From b99d7771dc1ce7ac9b2529ecaa081341fa84561d Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 11 Jun 2025 12:15:52 -0400 Subject: [PATCH] move pro themes to pro (#1054) --- .../webawesome/src/styles/themes/active.css | 378 ----------- .../src/styles/themes/brutalist.css | 440 ------------- .../webawesome/src/styles/themes/glossy.css | 387 ----------- .../webawesome/src/styles/themes/matter.css | 599 ------------------ .../webawesome/src/styles/themes/mellow.css | 392 ------------ .../webawesome/src/styles/themes/playful.css | 401 ------------ .../webawesome/src/styles/themes/premium.css | 407 ------------ .../webawesome/src/styles/themes/tailspin.css | 413 ------------ 8 files changed, 3417 deletions(-) delete mode 100644 packages/webawesome/src/styles/themes/active.css delete mode 100644 packages/webawesome/src/styles/themes/brutalist.css delete mode 100644 packages/webawesome/src/styles/themes/glossy.css delete mode 100644 packages/webawesome/src/styles/themes/matter.css delete mode 100644 packages/webawesome/src/styles/themes/mellow.css delete mode 100644 packages/webawesome/src/styles/themes/playful.css delete mode 100644 packages/webawesome/src/styles/themes/premium.css delete mode 100644 packages/webawesome/src/styles/themes/tailspin.css diff --git a/packages/webawesome/src/styles/themes/active.css b/packages/webawesome/src/styles/themes/active.css deleted file mode 100644 index dd4ec7563..000000000 --- a/packages/webawesome/src/styles/themes/active.css +++ /dev/null @@ -1,378 +0,0 @@ -@import url('../color/rudimentary.css'); -@import url('../brand/green.css'); -@import url('../success/green.css'); -@import url('../warning/yellow.css'); -@import url('../danger/red.css'); -@import url('../neutral/gray.css'); -@import url('../dimension/subtle.css'); -@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); - -@layer wa-theme { - :root, - .wa-theme-active, - .wa-light, - .wa-dark .wa-invert { - /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: light; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: white; - --wa-color-surface-default: white; - --wa-color-surface-lowered: var(--wa-color-neutral-95); - --wa-color-surface-border: var(--wa-color-neutral-90); - - --wa-color-text-normal: var(--wa-color-neutral-05); - --wa-color-text-quiet: var(--wa-color-neutral-40); - --wa-color-text-link: var(--wa-color-brand-40); - - --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent); - - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), - transparent - ); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: white 10%; - --wa-color-mix-active: black 5%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-95); - --wa-color-brand-fill-normal: var(--wa-color-brand-90); - --wa-color-brand-fill-loud: var(--wa-color-brand); - --wa-color-brand-border-quiet: var(--wa-color-brand-90); - --wa-color-brand-border-normal: var(--wa-color-brand-80); - --wa-color-brand-border-loud: var(--wa-color-brand-70); - --wa-color-brand-on-quiet: var(--wa-color-brand-40); - --wa-color-brand-on-normal: var(--wa-color-brand-30); - --wa-color-brand-on-loud: var(--wa-color-brand-on); - - --wa-color-success-fill-quiet: var(--wa-color-success-95); - --wa-color-success-fill-normal: var(--wa-color-success-90); - --wa-color-success-fill-loud: var(--wa-color-success); - --wa-color-success-border-quiet: var(--wa-color-success-90); - --wa-color-success-border-normal: var(--wa-color-success-80); - --wa-color-success-border-loud: var(--wa-color-success-70); - --wa-color-success-on-quiet: var(--wa-color-success-40); - --wa-color-success-on-normal: var(--wa-color-success-30); - --wa-color-success-on-loud: var(--wa-color-success-on); - - --wa-color-warning-fill-quiet: var(--wa-color-warning-95); - --wa-color-warning-fill-normal: var(--wa-color-warning-90); - --wa-color-warning-fill-loud: var(--wa-color-warning); - --wa-color-warning-border-quiet: var(--wa-color-warning-90); - --wa-color-warning-border-normal: var(--wa-color-warning-80); - --wa-color-warning-border-loud: var(--wa-color-warning-70); - --wa-color-warning-on-quiet: var(--wa-color-warning-40); - --wa-color-warning-on-normal: var(--wa-color-warning-30); - --wa-color-warning-on-loud: var(--wa-color-warning-on); - - --wa-color-danger-fill-quiet: var(--wa-color-danger-95); - --wa-color-danger-fill-normal: var(--wa-color-danger-90); - --wa-color-danger-fill-loud: var(--wa-color-danger); - --wa-color-danger-border-quiet: var(--wa-color-danger-90); - --wa-color-danger-border-normal: var(--wa-color-danger-80); - --wa-color-danger-border-loud: var(--wa-color-danger-70); - --wa-color-danger-on-quiet: var(--wa-color-danger-40); - --wa-color-danger-on-normal: var(--wa-color-danger-30); - --wa-color-danger-on-loud: var(--wa-color-danger-on); - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-80); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-90); - --wa-color-neutral-border-normal: var(--wa-color-neutral-80); - --wa-color-neutral-border-loud: var(--wa-color-neutral-70); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-40); - --wa-color-neutral-on-normal: var(--wa-color-neutral-30); - --wa-color-neutral-on-loud: black; - /* #endregion */ - } - - .wa-dark, - .wa-invert { - /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: dark; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-neutral-10); - --wa-color-surface-default: var(--wa-color-neutral-05); - --wa-color-surface-lowered: black; - --wa-color-surface-border: var(--wa-color-neutral-20); - - --wa-color-text-normal: var(--wa-color-neutral-95); - --wa-color-text-quiet: var(--wa-color-neutral-60); - --wa-color-text-link: var(--wa-color-brand-70); - - --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent); - - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%), - transparent - ); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: black 8%; - --wa-color-mix-active: black 16%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-10); - --wa-color-brand-fill-normal: var(--wa-color-brand-20); - --wa-color-brand-fill-loud: var(--wa-color-brand); - --wa-color-brand-border-quiet: var(--wa-color-brand-20); - --wa-color-brand-border-normal: var(--wa-color-brand-30); - --wa-color-brand-border-loud: var(--wa-color-brand-60); - --wa-color-brand-on-quiet: var(--wa-color-brand-70); - --wa-color-brand-on-normal: var(--wa-color-brand-90); - --wa-color-brand-on-loud: var(--wa-color-brand-on); - - --wa-color-success-fill-quiet: var(--wa-color-success-10); - --wa-color-success-fill-normal: var(--wa-color-success-20); - --wa-color-success-fill-loud: var(--wa-color-success); - --wa-color-success-border-quiet: var(--wa-color-success-20); - --wa-color-success-border-normal: var(--wa-color-success-30); - --wa-color-success-border-loud: var(--wa-color-success-40); - --wa-color-success-on-quiet: var(--wa-color-success-70); - --wa-color-success-on-normal: var(--wa-color-success-90); - --wa-color-success-on-loud: var(--wa-color-success-on); - - --wa-color-warning-fill-quiet: var(--wa-color-warning-10); - --wa-color-warning-fill-normal: var(--wa-color-warning-20); - --wa-color-warning-fill-loud: var(--wa-color-warning); - --wa-color-warning-border-quiet: var(--wa-color-warning-20); - --wa-color-warning-border-normal: var(--wa-color-warning-30); - --wa-color-warning-border-loud: var(--wa-color-warning-60); - --wa-color-warning-on-quiet: var(--wa-color-warning-70); - --wa-color-warning-on-normal: var(--wa-color-warning-90); - --wa-color-warning-on-loud: var(--wa-color-warning-on); - - --wa-color-danger-fill-quiet: var(--wa-color-danger-10); - --wa-color-danger-fill-normal: var(--wa-color-danger-20); - --wa-color-danger-fill-loud: var(--wa-color-danger); - --wa-color-danger-border-quiet: var(--wa-color-danger-20); - --wa-color-danger-border-normal: var(--wa-color-danger-30); - --wa-color-danger-border-loud: var(--wa-color-danger-60); - --wa-color-danger-on-quiet: var(--wa-color-danger-70); - --wa-color-danger-on-normal: var(--wa-color-danger-90); - --wa-color-danger-on-loud: var(--wa-color-danger-on); - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-20); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-80); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-20); - --wa-color-neutral-border-normal: var(--wa-color-neutral-30); - --wa-color-neutral-border-loud: var(--wa-color-neutral-60); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-80); - --wa-color-neutral-on-normal: var(--wa-color-neutral-90); - --wa-color-neutral-on-loud: black; - /* #endregion */ - } - - :root, - .wa-theme-active, - .wa-light, - .wa-dark, - .wa-invert { - /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-font-family-body: 'Inter', sans-serif; - --wa-font-family-heading: var(--wa-font-family-body); - --wa-font-family-code: ui-monospace, monospace; - --wa-font-family-longform: ui-serif, serif; - - /* Font sizes use a ratio of 1.125 to scale sizes proportionally. - * For larger font sizes, each size is twice 1.125x larger to maximize impact. - * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */ - --wa-font-size-scale: 1; - --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */ - --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */ - --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */ - --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */ - --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */ - --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */ - --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */ - --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */ - --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */ - - --wa-font-size-smaller: round(calc(1em / 1.125), 1px); - --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px); - - --wa-font-weight-light: 300; - --wa-font-weight-normal: 400; - --wa-font-weight-semibold: 550; - --wa-font-weight-bold: 650; - - --wa-font-weight-body: var(--wa-font-weight-normal); - --wa-font-weight-heading: var(--wa-font-weight-bold); - --wa-font-weight-code: var(--wa-font-weight-normal); - --wa-font-weight-longform: var(--wa-font-weight-normal); - --wa-font-weight-action: var(--wa-font-weight-semibold); - - --wa-line-height-condensed: 1.2; - --wa-line-height-normal: 1.6; - --wa-line-height-expanded: 2; - - --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted; - --wa-link-decoration-hover: underline; - /* #endregion */ - - /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-space-scale: 1; - --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */ - --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */ - --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */ - --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */ - --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */ - --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */ - --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */ - --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */ - --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */ - --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */ - - --wa-content-spacing: var(--wa-space-l); - /* #endregion */ - - /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-style: solid; - - --wa-border-width-scale: 1; - --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem); - --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem); - --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem); - /* #endregion */ - - /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-radius-scale: 1.75; - --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem); - --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem); - --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem); - - --wa-border-radius-pill: 9999px; - --wa-border-radius-circle: 50%; - --wa-border-radius-square: 0px; - /* #endregion */ - - /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-focus-ring-style: solid; - --wa-focus-ring-width: 0.1875rem; /* 3px */ - --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); - --wa-focus-ring-offset: 0.0625rem; /* 1px */ - /* #endregion */ - - /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-shadow-offset-x-scale: 0; - --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem); - --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem); - --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem); - - --wa-shadow-offset-y-scale: 1; - --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem); - --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem); - --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem); - - --wa-shadow-blur-scale: 1; - --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem); - --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem); - --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem); - - --wa-shadow-spread-scale: -0.5; - --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem); - --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem); - --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem); - - --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) - var(--wa-shadow-spread-s) var(--wa-color-shadow); - --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) - var(--wa-shadow-spread-m) var(--wa-color-shadow); - --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) - var(--wa-shadow-spread-l) var(--wa-color-shadow); - /* #endregion */ - - /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-transition-easing: ease; - --wa-transition-slow: 300ms; - --wa-transition-normal: 150ms; - --wa-transition-fast: 75ms; - /* #endregion */ - - /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */ - /* Form Controls */ - --wa-form-control-background-color: var(--wa-color-surface-default); - - --wa-form-control-border-color: var(--wa-color-neutral-border-normal); - --wa-form-control-border-style: var(--wa-border-style); - --wa-form-control-border-width: var(--wa-border-width-s); - --wa-form-control-border-radius: var(--wa-border-radius-m); - - --wa-form-control-activated-color: var(--wa-color-brand-fill-loud); - - --wa-form-control-label-color: var(--wa-color-text-normal); - --wa-form-control-label-font-weight: var(--wa-font-weight-semibold); - --wa-form-control-label-line-height: var(--wa-line-height-condensed); - - --wa-form-control-value-color: var(--wa-color-text-normal); - --wa-form-control-value-font-weight: var(--wa-font-weight-body); - --wa-form-control-value-line-height: var(--wa-line-height-condensed); - - --wa-form-control-hint-color: var(--wa-color-text-quiet); - --wa-form-control-hint-font-weight: var(--wa-font-weight-body); - --wa-form-control-hint-line-height: var(--wa-line-height-normal); - - --wa-form-control-placeholder-color: var(--wa-color-gray-50); - - --wa-form-control-required-content: '*'; - --wa-form-control-required-content-color: inherit; - --wa-form-control-required-content-offset: -0.1em; - - --wa-form-control-padding-block: 0.75em; - --wa-form-control-padding-inline: 1em; - --wa-form-control-height: round( - calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), - 1px - ); - --wa-form-control-toggle-size: round(1.25em, 1px); - - /* Panels */ - --wa-panel-border-style: var(--wa-border-style); - --wa-panel-border-width: var(--wa-border-width-s); - --wa-panel-border-radius: var(--wa-border-radius-l); - - /* Tooltips */ - --wa-tooltip-arrow-size: 0.375rem; - - --wa-tooltip-background-color: var(--wa-color-text-normal); - - --wa-tooltip-border-radius: var(--wa-border-radius-s); - - --wa-tooltip-content-color: var(--wa-color-surface-default); - --wa-tooltip-font-size: var(--wa-font-size-s); - --wa-tooltip-line-height: var(--wa-line-height-normal); - /* #endregion */ - } -} - -@layer wa-overrides { - :root, - .wa-theme-active, - .wa-light, - .wa-dark, - .wa-invert { - wa-radio, - input[type='radio'] { - --checked-icon-color: var(--wa-color-brand-on-loud); - --checked-icon-scale: 0.4; - - &:checked, - &:state(checked)::part(control) { - background-color: var(--wa-form-control-activated-color); - } - } - } -} diff --git a/packages/webawesome/src/styles/themes/brutalist.css b/packages/webawesome/src/styles/themes/brutalist.css deleted file mode 100644 index 642c06daa..000000000 --- a/packages/webawesome/src/styles/themes/brutalist.css +++ /dev/null @@ -1,440 +0,0 @@ -@import url('../color/default.css'); -@import url('../brand/blue.css'); -@import url('../success/green.css'); -@import url('../warning/yellow.css'); -@import url('../danger/red.css'); -@import url('../neutral/gray.css'); -@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap'); - -@layer wa-theme { - :root, - .wa-theme-brutalist, - .wa-light, - .wa-dark .wa-invert { - /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: light; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: white; - --wa-color-surface-default: white; - --wa-color-surface-lowered: var(--wa-color-neutral-95); - --wa-color-surface-border: var(--wa-color-neutral-10); - - --wa-color-text-normal: var(--wa-color-neutral-10); - --wa-color-text-quiet: var(--wa-color-neutral-40); - --wa-color-text-link: var(--wa-color-neutral-40); - - --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent); - - --wa-color-shadow: rgb(0 0 0 / 0.2); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: white 10%; - --wa-color-mix-active: white 20%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-95); - --wa-color-brand-fill-normal: var(--wa-color-brand-90); - --wa-color-brand-fill-loud: var(--wa-color-brand-50); - --wa-color-brand-border-quiet: var(--wa-color-brand-80); - --wa-color-brand-border-normal: var(--wa-color-brand-60); - --wa-color-brand-border-loud: var(--wa-color-brand-40); - --wa-color-brand-on-quiet: var(--wa-color-brand-40); - --wa-color-brand-on-normal: var(--wa-color-brand-40); - --wa-color-brand-on-loud: white; - - --wa-color-success-fill-quiet: var(--wa-color-success-95); - --wa-color-success-fill-normal: var(--wa-color-success-90); - --wa-color-success-fill-loud: var(--wa-color-success-50); - --wa-color-success-border-quiet: var(--wa-color-success-80); - --wa-color-success-border-normal: var(--wa-color-success-60); - --wa-color-success-border-loud: var(--wa-color-success-40); - --wa-color-success-on-quiet: var(--wa-color-success-40); - --wa-color-success-on-normal: var(--wa-color-success-40); - --wa-color-success-on-loud: white; - - --wa-color-warning-fill-quiet: var(--wa-color-warning-95); - --wa-color-warning-fill-normal: var(--wa-color-warning-90); - --wa-color-warning-fill-loud: var(--wa-color-warning-50); - --wa-color-warning-border-quiet: var(--wa-color-warning-80); - --wa-color-warning-border-normal: var(--wa-color-warning-60); - --wa-color-warning-border-loud: var(--wa-color-warning-40); - --wa-color-warning-on-quiet: var(--wa-color-warning-40); - --wa-color-warning-on-normal: var(--wa-color-warning-40); - --wa-color-warning-on-loud: white; - - --wa-color-danger-fill-quiet: var(--wa-color-danger-95); - --wa-color-danger-fill-normal: var(--wa-color-danger-90); - --wa-color-danger-fill-loud: var(--wa-color-danger-50); - --wa-color-danger-border-quiet: var(--wa-color-danger-80); - --wa-color-danger-border-normal: var(--wa-color-danger-60); - --wa-color-danger-border-loud: var(--wa-color-danger-40); - --wa-color-danger-on-quiet: var(--wa-color-danger-40); - --wa-color-danger-on-normal: var(--wa-color-danger-40); - --wa-color-danger-on-loud: white; - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-70); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-20); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-80); - --wa-color-neutral-border-normal: var(--wa-color-neutral-40); - --wa-color-neutral-border-loud: var(--wa-color-neutral-20); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-10); - --wa-color-neutral-on-normal: var(--wa-color-neutral-30); - --wa-color-neutral-on-loud: white; - /* #endregion */ - } - - .wa-dark, - .wa-invert { - /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: dark; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-neutral-05); - --wa-color-surface-default: var(--wa-color-neutral-10); - --wa-color-surface-lowered: var(--wa-color-neutral-05); - --wa-color-surface-border: var(--wa-color-neutral-40); - - --wa-color-text-normal: var(--wa-color-neutral-95); - --wa-color-text-quiet: var(--wa-color-neutral-60); - --wa-color-text-link: var(--wa-color-neutral-70); - - --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent); - - --wa-color-shadow: rgb(0 0 0 / 0.5); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: black 8%; - --wa-color-mix-active: black 16%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-20); - --wa-color-brand-fill-normal: var(--wa-color-brand-30); - --wa-color-brand-fill-loud: var(--wa-color-brand-70); - --wa-color-brand-border-quiet: var(--wa-color-brand-30); - --wa-color-brand-border-normal: var(--wa-color-brand-40); - --wa-color-brand-border-loud: var(--wa-color-brand-80); - --wa-color-brand-on-quiet: var(--wa-color-brand-70); - --wa-color-brand-on-normal: var(--wa-color-brand-95); - --wa-color-brand-on-loud: var(--wa-color-brand-10); - - --wa-color-success-fill-quiet: var(--wa-color-success-20); - --wa-color-success-fill-normal: var(--wa-color-success-30); - --wa-color-success-fill-loud: var(--wa-color-success-70); - --wa-color-success-border-quiet: var(--wa-color-success-30); - --wa-color-success-border-normal: var(--wa-color-success-40); - --wa-color-success-border-loud: var(--wa-color-success-80); - --wa-color-success-on-quiet: var(--wa-color-success-70); - --wa-color-success-on-normal: var(--wa-color-success-95); - --wa-color-success-on-loud: var(--wa-color-success-10); - - --wa-color-warning-fill-quiet: var(--wa-color-warning-20); - --wa-color-warning-fill-normal: var(--wa-color-warning-30); - --wa-color-warning-fill-loud: var(--wa-color-warning-70); - --wa-color-warning-border-quiet: var(--wa-color-warning-30); - --wa-color-warning-border-normal: var(--wa-color-warning-40); - --wa-color-warning-border-loud: var(--wa-color-warning-80); - --wa-color-warning-on-quiet: var(--wa-color-warning-70); - --wa-color-warning-on-normal: var(--wa-color-warning-95); - --wa-color-warning-on-loud: var(--wa-color-warning-10); - - --wa-color-danger-fill-quiet: var(--wa-color-danger-20); - --wa-color-danger-fill-normal: var(--wa-color-danger-30); - --wa-color-danger-fill-loud: var(--wa-color-danger-70); - --wa-color-danger-border-quiet: var(--wa-color-danger-30); - --wa-color-danger-border-normal: var(--wa-color-danger-40); - --wa-color-danger-border-loud: var(--wa-color-danger-80); - --wa-color-danger-on-quiet: var(--wa-color-danger-70); - --wa-color-danger-on-normal: var(--wa-color-danger-95); - --wa-color-danger-on-loud: var(--wa-color-danger-10); - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-30); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-70); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-50); - --wa-color-neutral-border-normal: var(--wa-color-neutral-80); - --wa-color-neutral-border-loud: var(--wa-color-neutral-90); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-80); - --wa-color-neutral-on-normal: var(--wa-color-neutral-95); - --wa-color-neutral-on-loud: var(--wa-color-neutral-10); - /* #endregion */ - } - - :root, - .wa-theme-brutalist, - .wa-light, - .wa-dark, - .wa-invert { - /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-font-family-body: 'Space Grotesk', sans-serif; - --wa-font-family-heading: 'IBM Plex Sans Condensed', sans-serif; - --wa-font-family-code: 'Space Mono', monospace; - --wa-font-family-longform: ui-serif, serif; - - /* Font sizes use a ratio of 1.125 to scale sizes proportionally. - * For larger font sizes, each size is twice 1.125x larger to maximize impact. - * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */ - --wa-font-size-scale: 1; - --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */ - --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */ - --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */ - --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */ - --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */ - --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */ - --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */ - --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */ - --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */ - - --wa-font-size-smaller: round(calc(1em / 1.125), 1px); - --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px); - - --wa-font-weight-light: 300; - --wa-font-weight-normal: 400; - --wa-font-weight-semibold: 500; - --wa-font-weight-bold: 700; - - --wa-font-weight-body: var(--wa-font-weight-normal); - --wa-font-weight-heading: var(--wa-font-weight-semibold); - --wa-font-weight-code: var(--wa-font-weight-normal); - --wa-font-weight-longform: var(--wa-font-weight-normal); - --wa-font-weight-action: var(--wa-font-weight-semibold); - - --wa-line-height-condensed: 1.2; - --wa-line-height-normal: 1.6; - --wa-line-height-expanded: 2; - - --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted; - --wa-link-decoration-hover: underline; - /* #endregion */ - - /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-space-scale: 1.125; - --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2.25px */ - --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4.5px */ - --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 9px */ - --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 13.5px */ - --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 18px */ - --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 27px */ - --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 36px */ - --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 45px */ - --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 54px */ - --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 72px */ - - --wa-content-spacing: var(--wa-space-l); - /* #endregion */ - - /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-style: solid; - - --wa-border-width-scale: 2; - --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem); - --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem); - --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem); - /* #endregion */ - - /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-radius-scale: 0; - --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem); - --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem); - --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem); - - --wa-border-radius-pill: 9999px; - --wa-border-radius-circle: 50%; - --wa-border-radius-square: 0px; - /* #endregion */ - - /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-focus-ring-style: solid; - --wa-focus-ring-width: 0.1875rem; /* 3px */ - --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); - --wa-focus-ring-offset: 0.0625rem; /* 1px */ - /* #endregion */ - - /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-shadow-offset-x-scale: var(--wa-shadow-offset-y-scale); - --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem); - --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem); - --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem); - - --wa-shadow-offset-y-scale: 4; - --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem); - --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem); - --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem); - - --wa-shadow-blur-scale: 0; - --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem); - --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem); - --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem); - - --wa-shadow-spread-scale: -0.5; - --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem); - --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem); - --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem); - - --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) - var(--wa-shadow-spread-s) var(--wa-color-shadow); - --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) - var(--wa-shadow-spread-m) var(--wa-color-shadow); - --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) - var(--wa-shadow-spread-l) var(--wa-color-shadow); - /* #endregion */ - - /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-transition-easing: ease; - --wa-transition-slow: 300ms; - --wa-transition-normal: 150ms; - --wa-transition-fast: 75ms; - /* #endregion */ - - /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */ - /* Form Controls */ - --wa-form-control-background-color: var(--wa-color-surface-default); - - --wa-form-control-border-color: var(--wa-color-neutral-border-loud); - --wa-form-control-border-style: var(--wa-border-style); - --wa-form-control-border-width: var(--wa-border-width-s); - --wa-form-control-border-radius: var(--wa-border-radius-m); - - --wa-form-control-activated-color: var(--wa-color-neutral-fill-loud); - - --wa-form-control-label-color: var(--wa-color-text-normal); - --wa-form-control-label-font-weight: var(--wa-font-weight-semibold); - --wa-form-control-label-line-height: var(--wa-line-height-condensed); - - --wa-form-control-value-color: var(--wa-color-text-normal); - --wa-form-control-value-font-weight: var(--wa-font-weight-body); - --wa-form-control-value-line-height: var(--wa-line-height-condensed); - - --wa-form-control-hint-color: var(--wa-color-text-quiet); - --wa-form-control-hint-font-weight: var(--wa-font-weight-body); - --wa-form-control-hint-line-height: var(--wa-line-height-normal); - - --wa-form-control-placeholder-color: var(--wa-color-gray-50); - - --wa-form-control-required-content: '*'; - --wa-form-control-required-content-color: inherit; - --wa-form-control-required-content-offset: -0.1em; - - --wa-form-control-padding-block: 0.75em; - --wa-form-control-padding-inline: 1em; - --wa-form-control-height: round( - calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), - 1px - ); - --wa-form-control-toggle-size: round(1.25em, 1px); - - /* Panels */ - --wa-panel-border-style: var(--wa-border-style); - --wa-panel-border-width: var(--wa-border-width-s); - --wa-panel-border-radius: var(--wa-border-radius-l); - - /* Tooltips */ - --wa-tooltip-arrow-size: 0.375rem; - - --wa-tooltip-background-color: var(--wa-color-text-normal); - - --wa-tooltip-border-radius: var(--wa-border-radius-s); - - --wa-tooltip-content-color: var(--wa-color-surface-default); - --wa-tooltip-font-size: var(--wa-font-size-s); - --wa-tooltip-line-height: var(--wa-line-height-normal); - /* #endregion */ - } -} - -@layer wa-overrides { - :root, - .wa-theme-brutalist, - .wa-light, - .wa-dark, - .wa-invert { - blockquote, - pre { - border-inline-start: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border); - } - wa-badge { - text-transform: uppercase; - } - - wa-callout, - wa-tag { - border-inline-start-color: var(--outlined-border-color, var(--wa-color-border-loud)); - border-inline-start-width: var(--wa-border-width-m); - - &:not([appearance~='outlined']) { - border-block-start-width: 0; - border-block-end-width: 0; - border-inline-end-width: 0; - } - - &:not([appearance~='accent']) { - --icon-color: var(--wa-color-fill-loud); - } - } - - wa-callout { - --spacing: var(--wa-space-s) var(--wa-space-m); - - &::part(icon) { - --spacing: var(--wa-space-m); - } - } - - wa-carousel { - --pagination-color: var(--wa-color-neutral-fill-normal); - } - - wa-carousel::part(scroll-container) { - padding: var(--wa-shadow-offset-y-s) var(--wa-shadow-offset-x-s); /* make room for the box-shadow */ - } - - wa-carousel::part(pagination-item), - wa-comparison::part(handle), - wa-progress-bar::part(base), - wa-slider::part(track), - wa-slider::part(thumb), - input[type='range'], - wa-switch::part(control), - wa-switch::part(thumb) { - border-radius: var(--wa-border-radius-square); - } - - wa-carousel-item::slotted(*) { - border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border); - box-shadow: var(--wa-shadow-s); - } - - wa-input::part(input), - wa-select::part(combobox), - wa-textarea::part(textarea), - input:where( - :not( - [type='button'], - [type='checkbox'], - [type='color'], - [type='file'], - [type='hidden'], - [type='image'], - [type='radio'], - [type='range'], - [type='reset'], - [type='submit'] - ) - ), - select, - textarea { - border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width); - } - - wa-rating { - --symbol-color-active: var(--wa-color-neutral-fill-loud); - } - } -} diff --git a/packages/webawesome/src/styles/themes/glossy.css b/packages/webawesome/src/styles/themes/glossy.css deleted file mode 100644 index 7839d1599..000000000 --- a/packages/webawesome/src/styles/themes/glossy.css +++ /dev/null @@ -1,387 +0,0 @@ -@import url('../color/elegant.css'); -@import url('../brand/indigo.css'); -@import url('../success/green.css'); -@import url('../warning/yellow.css'); -@import url('../danger/red.css'); -@import url('../neutral/gray.css'); -@import url('../dimension/glossy.css'); -@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap'); - -@layer wa-theme { - :root, - .wa-theme-glossy, - .wa-light, - .wa-dark .wa-invert { - /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: light; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: white; - --wa-color-surface-default: white; - --wa-color-surface-lowered: var(--wa-color-neutral-95); - --wa-color-surface-border: var(--wa-color-neutral-90); - - --wa-color-text-normal: var(--wa-color-neutral-10); - --wa-color-text-quiet: var(--wa-color-neutral-40); - --wa-color-text-link: var(--wa-color-brand-40); - - --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent); - - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), - transparent - ); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: black 10%; - --wa-color-mix-active: black 20%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-95); - --wa-color-brand-fill-normal: var(--wa-color-brand-90); - --wa-color-brand-fill-loud: var(--wa-color-brand-40); - --wa-color-brand-border-quiet: var(--wa-color-brand-90); - --wa-color-brand-border-normal: var(--wa-color-brand-80); - --wa-color-brand-border-loud: var(--wa-color-brand-60); - --wa-color-brand-on-quiet: var(--wa-color-brand-40); - --wa-color-brand-on-normal: var(--wa-color-brand-30); - --wa-color-brand-on-loud: white; - - --wa-color-success-fill-quiet: var(--wa-color-success-95); - --wa-color-success-fill-normal: var(--wa-color-success-90); - --wa-color-success-fill-loud: var(--wa-color-success-40); - --wa-color-success-border-quiet: var(--wa-color-success-90); - --wa-color-success-border-normal: var(--wa-color-success-80); - --wa-color-success-border-loud: var(--wa-color-success-60); - --wa-color-success-on-quiet: var(--wa-color-success-40); - --wa-color-success-on-normal: var(--wa-color-success-30); - --wa-color-success-on-loud: white; - - --wa-color-warning-fill-quiet: var(--wa-color-warning-95); - --wa-color-warning-fill-normal: var(--wa-color-warning-90); - --wa-color-warning-fill-loud: var(--wa-color-warning-40); - --wa-color-warning-border-quiet: var(--wa-color-warning-90); - --wa-color-warning-border-normal: var(--wa-color-warning-80); - --wa-color-warning-border-loud: var(--wa-color-warning-60); - --wa-color-warning-on-quiet: var(--wa-color-warning-40); - --wa-color-warning-on-normal: var(--wa-color-warning-30); - --wa-color-warning-on-loud: white; - - --wa-color-danger-fill-quiet: var(--wa-color-danger-95); - --wa-color-danger-fill-normal: var(--wa-color-danger-90); - --wa-color-danger-fill-loud: var(--wa-color-danger-40); - --wa-color-danger-border-quiet: var(--wa-color-danger-90); - --wa-color-danger-border-normal: var(--wa-color-danger-80); - --wa-color-danger-border-loud: var(--wa-color-danger-60); - --wa-color-danger-on-quiet: var(--wa-color-danger-40); - --wa-color-danger-on-normal: var(--wa-color-danger-30); - --wa-color-danger-on-loud: white; - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-20); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-90); - --wa-color-neutral-border-normal: var(--wa-color-neutral-80); - --wa-color-neutral-border-loud: var(--wa-color-neutral-60); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-40); - --wa-color-neutral-on-normal: var(--wa-color-neutral-30); - --wa-color-neutral-on-loud: white; - /* #endregion */ - } - - .wa-dark, - .wa-invert { - /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: dark; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-neutral-10); - --wa-color-surface-default: var(--wa-color-neutral-05); - --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%); - --wa-color-surface-border: var(--wa-color-neutral-20); - - --wa-color-text-normal: var(--wa-color-neutral-95); - --wa-color-text-quiet: var(--wa-color-neutral-60); - --wa-color-text-link: var(--wa-color-brand-70); - - --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent); - - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%), - transparent - ); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: black 8%; - --wa-color-mix-active: black 16%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-10); - --wa-color-brand-fill-normal: var(--wa-color-brand-20); - --wa-color-brand-fill-loud: var(--wa-color-brand-40); - --wa-color-brand-border-quiet: var(--wa-color-brand-20); - --wa-color-brand-border-normal: var(--wa-color-brand-30); - --wa-color-brand-border-loud: var(--wa-color-brand-40); - --wa-color-brand-on-quiet: var(--wa-color-brand-60); - --wa-color-brand-on-normal: var(--wa-color-brand-70); - --wa-color-brand-on-loud: white; - - --wa-color-success-fill-quiet: var(--wa-color-success-10); - --wa-color-success-fill-normal: var(--wa-color-success-20); - --wa-color-success-fill-loud: var(--wa-color-success-40); - --wa-color-success-border-quiet: var(--wa-color-success-20); - --wa-color-success-border-normal: var(--wa-color-success-30); - --wa-color-success-border-loud: var(--wa-color-success-40); - --wa-color-success-on-quiet: var(--wa-color-success-60); - --wa-color-success-on-normal: var(--wa-color-success-70); - --wa-color-success-on-loud: white; - - --wa-color-warning-fill-quiet: var(--wa-color-warning-10); - --wa-color-warning-fill-normal: var(--wa-color-warning-20); - --wa-color-warning-fill-loud: var(--wa-color-warning-40); - --wa-color-warning-border-quiet: var(--wa-color-warning-20); - --wa-color-warning-border-normal: var(--wa-color-warning-30); - --wa-color-warning-border-loud: var(--wa-color-warning-40); - --wa-color-warning-on-quiet: var(--wa-color-warning-60); - --wa-color-warning-on-normal: var(--wa-color-warning-70); - --wa-color-warning-on-loud: white; - - --wa-color-danger-fill-quiet: var(--wa-color-danger-10); - --wa-color-danger-fill-normal: var(--wa-color-danger-20); - --wa-color-danger-fill-loud: var(--wa-color-danger-40); - --wa-color-danger-border-quiet: var(--wa-color-danger-20); - --wa-color-danger-border-normal: var(--wa-color-danger-30); - --wa-color-danger-border-loud: var(--wa-color-danger-40); - --wa-color-danger-on-quiet: var(--wa-color-danger-60); - --wa-color-danger-on-normal: var(--wa-color-danger-70); - --wa-color-danger-on-loud: white; - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-20); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-90); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-20); - --wa-color-neutral-border-normal: var(--wa-color-neutral-30); - --wa-color-neutral-border-loud: var(--wa-color-neutral-40); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-60); - --wa-color-neutral-on-normal: var(--wa-color-neutral-70); - --wa-color-neutral-on-loud: var(--wa-color-neutral-05); - /* #endregion */ - } - - :root, - .wa-theme-glossy, - .wa-light, - .wa-dark, - .wa-invert { - /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-font-family-body: 'Figtree', sans-serif; - --wa-font-family-heading: var(--wa-font-family-body); - --wa-font-family-code: ui-monospace, monospace; - --wa-font-family-longform: ui-serif, serif; - - /* Font sizes use a ratio of 1.125 to scale sizes proportionally. - * For larger font sizes, each size is twice 1.125x larger to maximize impact. - * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */ - --wa-font-size-scale: 1; - --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */ - --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */ - --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */ - --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */ - --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */ - --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */ - --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */ - --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */ - --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */ - - --wa-font-size-smaller: round(calc(1em / 1.125), 1px); - --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px); - - --wa-font-weight-light: 300; - --wa-font-weight-normal: 400; - --wa-font-weight-semibold: 600; - --wa-font-weight-bold: 800; - - --wa-font-weight-body: var(--wa-font-weight-normal); - --wa-font-weight-heading: var(--wa-font-weight-bold); - --wa-font-weight-code: var(--wa-font-weight-normal); - --wa-font-weight-longform: var(--wa-font-weight-normal); - --wa-font-weight-action: var(--wa-font-weight-semibold); - - --wa-line-height-condensed: 1.35; - --wa-line-height-normal: 1.8; - --wa-line-height-expanded: 2.25; - - --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted; - --wa-link-decoration-hover: underline; - /* #endregion */ - - /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-space-scale: 1.125; - --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2.25px */ - --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4.5px */ - --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 9px */ - --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 13.5px */ - --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 18px */ - --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 27px */ - --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 36px */ - --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 45px */ - --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 54px */ - --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 72px */ - - --wa-content-spacing: var(--wa-space-l); - /* #endregion */ - - /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-style: solid; - - --wa-border-width-scale: 1; - --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem); - --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem); - --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem); - /* #endregion */ - - /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-radius-scale: 1.33; - --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem); - --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem); - --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem); - - --wa-border-radius-pill: 9999px; - --wa-border-radius-circle: 50%; - --wa-border-radius-square: 0px; - /* #endregion */ - - /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-focus-ring-style: solid; - --wa-focus-ring-width: 0.1875rem; /* 3px */ - --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); - --wa-focus-ring-offset: 0.0625rem; /* 1px */ - /* #endregion */ - - /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-shadow-offset-x-scale: 0; - --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem); - --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem); - --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem); - - --wa-shadow-offset-y-scale: 1; - --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem); - --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem); - --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem); - - --wa-shadow-blur-scale: 3; - --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem); - --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem); - --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem); - - --wa-shadow-spread-scale: -0.5; - --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem); - --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem); - --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem); - - --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) - var(--wa-shadow-spread-s) var(--wa-color-shadow); - --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) - var(--wa-shadow-spread-m) var(--wa-color-shadow); - --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) - var(--wa-shadow-spread-l) var(--wa-color-shadow); - /* #endregion */ - - /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-transition-easing: ease; - --wa-transition-slow: 300ms; - --wa-transition-normal: 150ms; - --wa-transition-fast: 75ms; - /* #endregion */ - - /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */ - /* Form Controls */ - --wa-form-control-background-color: var(--wa-color-surface-default); - - --wa-form-control-border-color: var(--wa-color-neutral-border-loud); - --wa-form-control-border-style: var(--wa-border-style); - --wa-form-control-border-width: var(--wa-border-width-s); - --wa-form-control-border-radius: var(--wa-border-radius-m); - - --wa-form-control-activated-color: var(--wa-color-brand-fill-loud); - - --wa-form-control-label-color: var(--wa-color-text-normal); - --wa-form-control-label-font-weight: var(--wa-font-weight-semibold); - --wa-form-control-label-line-height: var(--wa-line-height-condensed); - - --wa-form-control-value-color: var(--wa-color-text-normal); - --wa-form-control-value-font-weight: var(--wa-font-weight-body); - --wa-form-control-value-line-height: var(--wa-line-height-condensed); - - --wa-form-control-hint-color: var(--wa-color-text-quiet); - --wa-form-control-hint-font-weight: var(--wa-font-weight-body); - --wa-form-control-hint-line-height: var(--wa-line-height-normal); - - --wa-form-control-placeholder-color: var(--wa-color-gray-50); - - --wa-form-control-required-content: '*'; - --wa-form-control-required-content-color: inherit; - --wa-form-control-required-content-offset: -0.1em; - - --wa-form-control-padding-block: 0.75em; - --wa-form-control-padding-inline: 1em; - --wa-form-control-height: round( - calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), - 1px - ); - --wa-form-control-toggle-size: round(1.25em, 1px); - - /* Panels */ - --wa-panel-border-style: var(--wa-border-style); - --wa-panel-border-width: var(--wa-border-width-s); - --wa-panel-border-radius: var(--wa-border-radius-l); - - /* Tooltips */ - --wa-tooltip-arrow-size: 0.375rem; - - --wa-tooltip-background-color: var(--wa-color-text-normal); - - --wa-tooltip-border-radius: var(--wa-border-radius-s); - - --wa-tooltip-content-color: var(--wa-color-surface-default); - --wa-tooltip-font-size: var(--wa-font-size-s); - --wa-tooltip-line-height: var(--wa-line-height-normal); - /* #endregion */ - } -} - -@layer wa-overrides { - :root, - .wa-theme-glossy, - .wa-light, - .wa-dark, - .wa-invert { - h1, - h2, - h3, - h4, - h5, - h6 { - letter-spacing: -0.02em; - } - - wa-radio, - input[type='radio'] { - --checked-icon-color: var(--wa-color-surface-default); - --checked-icon-scale: 0.4; - - &:checked, - &:state(checked)::part(control) { - background-color: var(--wa-form-control-activated-color); - } - } - } -} diff --git a/packages/webawesome/src/styles/themes/matter.css b/packages/webawesome/src/styles/themes/matter.css deleted file mode 100644 index 11b8241d0..000000000 --- a/packages/webawesome/src/styles/themes/matter.css +++ /dev/null @@ -1,599 +0,0 @@ -@import url('../color/mild.css'); -@import url('../brand/purple.css'); -@import url('../success/green.css'); -@import url('../warning/yellow.css'); -@import url('../danger/red.css'); -@import url('../neutral/gray.css'); -@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap'); - -@layer wa-theme { - :root, - .wa-theme-matter, - .wa-light, - .wa-dark .wa-invert { - /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: light; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-neutral-95); - --wa-color-surface-default: white; - --wa-color-surface-lowered: var(--wa-color-neutral-90); - --wa-color-surface-border: var(--wa-color-neutral-90); - - --wa-color-text-normal: var(--wa-color-neutral-10); - --wa-color-text-quiet: var(--wa-color-neutral-40); - --wa-color-text-link: var(--wa-color-brand-40); - - --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent); - - --wa-color-shadow: rgb(0 0 0 / 0.3); - - --wa-color-focus: var(--wa-color-brand-40); - - --wa-color-mix-hover: white 5%; - --wa-color-mix-active: white 10%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-95); - --wa-color-brand-fill-normal: var(--wa-color-brand-90); - --wa-color-brand-fill-loud: var(--wa-color-brand-40); - --wa-color-brand-border-quiet: var(--wa-color-brand-90); - --wa-color-brand-border-normal: var(--wa-color-brand-80); - --wa-color-brand-border-loud: var(--wa-color-brand-50); - --wa-color-brand-on-quiet: var(--wa-color-brand-40); - --wa-color-brand-on-normal: var(--wa-color-brand-30); - --wa-color-brand-on-loud: white; - - --wa-color-success-fill-quiet: var(--wa-color-success-95); - --wa-color-success-fill-normal: var(--wa-color-success-90); - --wa-color-success-fill-loud: var(--wa-color-success-40); - --wa-color-success-border-quiet: var(--wa-color-success-90); - --wa-color-success-border-normal: var(--wa-color-success-80); - --wa-color-success-border-loud: var(--wa-color-success-50); - --wa-color-success-on-quiet: var(--wa-color-success-40); - --wa-color-success-on-normal: var(--wa-color-success-30); - --wa-color-success-on-loud: white; - - --wa-color-warning-fill-quiet: var(--wa-color-warning-95); - --wa-color-warning-fill-normal: var(--wa-color-warning-90); - --wa-color-warning-fill-loud: var(--wa-color-warning-40); - --wa-color-warning-border-quiet: var(--wa-color-warning-90); - --wa-color-warning-border-normal: var(--wa-color-warning-80); - --wa-color-warning-border-loud: var(--wa-color-warning-50); - --wa-color-warning-on-quiet: var(--wa-color-warning-40); - --wa-color-warning-on-normal: var(--wa-color-warning-30); - --wa-color-warning-on-loud: white; - - --wa-color-danger-fill-quiet: var(--wa-color-danger-95); - --wa-color-danger-fill-normal: var(--wa-color-danger-90); - --wa-color-danger-fill-loud: var(--wa-color-danger-40); - --wa-color-danger-border-quiet: var(--wa-color-danger-90); - --wa-color-danger-border-normal: var(--wa-color-danger-80); - --wa-color-danger-border-loud: var(--wa-color-danger-50); - --wa-color-danger-on-quiet: var(--wa-color-danger-40); - --wa-color-danger-on-normal: var(--wa-color-danger-30); - --wa-color-danger-on-loud: white; - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-40); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-90); - --wa-color-neutral-border-normal: var(--wa-color-neutral-80); - --wa-color-neutral-border-loud: var(--wa-color-neutral-50); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-30); - --wa-color-neutral-on-normal: var(--wa-color-neutral-20); - --wa-color-neutral-on-loud: white; - /* #endregion */ - } - - .wa-dark, - .wa-invert { - /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: dark; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-neutral-10); - --wa-color-surface-default: var(--wa-color-neutral-05); - --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%); - --wa-color-surface-border: var(--wa-color-neutral-20); - - --wa-color-text-normal: var(--wa-color-neutral-95); - --wa-color-text-quiet: var(--wa-color-neutral-60); - --wa-color-text-link: var(--wa-color-brand-70); - - --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent); - - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%), - transparent - ); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: black 8%; - --wa-color-mix-active: black 16%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-20); - --wa-color-brand-fill-normal: var(--wa-color-brand-30); - --wa-color-brand-fill-loud: var(--wa-color-brand-70); - --wa-color-brand-border-quiet: var(--wa-color-brand-20); - --wa-color-brand-border-normal: var(--wa-color-brand-30); - --wa-color-brand-border-loud: var(--wa-color-brand-60); - --wa-color-brand-on-quiet: var(--wa-color-brand-70); - --wa-color-brand-on-normal: var(--wa-color-brand-80); - --wa-color-brand-on-loud: var(--wa-color-brand-10); - - --wa-color-success-fill-quiet: var(--wa-color-success-20); - --wa-color-success-fill-normal: var(--wa-color-success-30); - --wa-color-success-fill-loud: var(--wa-color-success-70); - --wa-color-success-border-quiet: var(--wa-color-success-20); - --wa-color-success-border-normal: var(--wa-color-success-30); - --wa-color-success-border-loud: var(--wa-color-success-60); - --wa-color-success-on-quiet: var(--wa-color-success-70); - --wa-color-success-on-normal: var(--wa-color-success-80); - --wa-color-success-on-loud: var(--wa-color-success-10); - - --wa-color-warning-fill-quiet: var(--wa-color-warning-20); - --wa-color-warning-fill-normal: var(--wa-color-warning-30); - --wa-color-warning-fill-loud: var(--wa-color-warning-70); - --wa-color-warning-border-quiet: var(--wa-color-warning-20); - --wa-color-warning-border-normal: var(--wa-color-warning-30); - --wa-color-warning-border-loud: var(--wa-color-warning-60); - --wa-color-warning-on-quiet: var(--wa-color-warning-70); - --wa-color-warning-on-normal: var(--wa-color-warning-80); - --wa-color-warning-on-loud: var(--wa-color-warning-10); - - --wa-color-danger-fill-quiet: var(--wa-color-danger-20); - --wa-color-danger-fill-normal: var(--wa-color-danger-30); - --wa-color-danger-fill-loud: var(--wa-color-danger-70); - --wa-color-danger-border-quiet: var(--wa-color-danger-20); - --wa-color-danger-border-normal: var(--wa-color-danger-30); - --wa-color-danger-border-loud: var(--wa-color-danger-60); - --wa-color-danger-on-quiet: var(--wa-color-danger-70); - --wa-color-danger-on-normal: var(--wa-color-danger-80); - --wa-color-danger-on-loud: var(--wa-color-danger-10); - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-30); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-70); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-20); - --wa-color-neutral-border-normal: var(--wa-color-neutral-30); - --wa-color-neutral-border-loud: var(--wa-color-neutral-80); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-70); - --wa-color-neutral-on-normal: var(--wa-color-neutral-80); - --wa-color-neutral-on-loud: var(--wa-color-neutral-10); - /* #endregion */ - } - - :root, - .wa-theme-matter, - .wa-light, - .wa-dark, - .wa-invert { - /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-font-family-body: 'Wix Madefor Text', sans-serif; - --wa-font-family-heading: var(--wa-font-family-body); - --wa-font-family-code: 'Roboto Mono', monospace; - --wa-font-family-longform: 'Roboto Serif', serif; - - /* Font sizes use a ratio of 1.125 to scale sizes proportionally. - * For larger font sizes, each size is twice 1.125x larger to maximize impact. - * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */ - --wa-font-size-scale: 1; - --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */ - --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */ - --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */ - --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */ - --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */ - --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */ - --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */ - --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */ - --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */ - - --wa-font-size-smaller: round(calc(1em / 1.125), 1px); - --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px); - - --wa-font-weight-light: 300; - --wa-font-weight-normal: 400; - --wa-font-weight-semibold: 500; - --wa-font-weight-bold: 700; - - --wa-font-weight-body: var(--wa-font-weight-normal); - --wa-font-weight-heading: var(--wa-font-weight-semibold); - --wa-font-weight-code: var(--wa-font-weight-normal); - --wa-font-weight-longform: var(--wa-font-weight-normal); - --wa-font-weight-action: var(--wa-font-weight-semibold); - - --wa-line-height-condensed: 1.2; - --wa-line-height-normal: 1.6; - --wa-line-height-expanded: 2; - - --wa-link-decoration-default: underline; - --wa-link-decoration-hover: underline; - /* #endregion */ - - /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-space-scale: 1; - --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */ - --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */ - --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */ - --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */ - --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */ - --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */ - --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */ - --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */ - --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */ - --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */ - - --wa-content-spacing: var(--wa-space-l); - /* #endregion */ - - /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-style: solid; - - --wa-border-width-scale: 1; - --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem); - --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem); - --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem); - /* #endregion */ - - /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-radius-scale: 1.33; - --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem); - --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem); - --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem); - - --wa-border-radius-pill: 9999px; - --wa-border-radius-circle: 50%; - --wa-border-radius-square: 0px; - /* #endregion */ - - /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-focus-ring-style: solid; - --wa-focus-ring-width: 0.125rem; /* 2px */ - --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); - --wa-focus-ring-offset: 0rem; /* 0px */ - /* #endregion */ - - /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-shadow-offset-x-scale: 0; - --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem); - --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem); - --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem); - - --wa-shadow-offset-y-scale: 0.5; - --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem); - --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem); - --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem); - - --wa-shadow-blur-scale: 1.25; - --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem); - --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem); - --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem); - - --wa-shadow-spread-scale: 0; - --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem); - --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem); - --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem); - - --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) - var(--wa-shadow-spread-s) var(--wa-color-shadow); - --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) - var(--wa-shadow-spread-m) var(--wa-color-shadow); - --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) - var(--wa-shadow-spread-l) var(--wa-color-shadow); - /* #endregion */ - - /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-transition-easing: ease; - --wa-transition-slow: 300ms; - --wa-transition-normal: 150ms; - --wa-transition-fast: 75ms; - /* #endregion */ - - /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */ - /* Form Controls */ - --wa-form-control-background-color: var(--wa-color-surface-default); - - --wa-form-control-border-color: var(--wa-color-neutral-border-loud); - --wa-form-control-border-style: var(--wa-border-style); - --wa-form-control-border-width: var(--wa-border-width-s); - --wa-form-control-border-radius: var(--wa-border-radius-s); - - --wa-form-control-activated-color: var(--wa-color-brand-fill-loud); - - --wa-form-control-label-color: var(--wa-color-text-normal); - --wa-form-control-label-font-weight: var(--wa-font-weight-normal); - --wa-form-control-label-line-height: var(--wa-line-height-condensed); - - --wa-form-control-value-color: var(--wa-color-text-normal); - --wa-form-control-value-font-weight: var(--wa-font-weight-body); - --wa-form-control-value-line-height: var(--wa-line-height-condensed); - - --wa-form-control-hint-color: var(--wa-color-text-quiet); - --wa-form-control-hint-font-weight: var(--wa-font-weight-body); - --wa-form-control-hint-line-height: var(--wa-line-height-normal); - - --wa-form-control-placeholder-color: var(--wa-color-gray-50); - - --wa-form-control-required-content: '*'; - --wa-form-control-required-content-color: inherit; - --wa-form-control-required-content-offset: -0.1em; - - --wa-form-control-padding-block: 0.75em; - --wa-form-control-padding-inline: 1em; - --wa-form-control-height: round( - calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), - 1px - ); - --wa-form-control-toggle-size: round(1.25em, 1px); - - /* Panels */ - --wa-panel-border-style: var(--wa-border-style); - --wa-panel-border-width: var(--wa-border-width-s); - --wa-panel-border-radius: var(--wa-border-radius-l); - - /* Tooltips */ - --wa-tooltip-arrow-size: 0rem; - - --wa-tooltip-background-color: var(--wa-color-text-normal); - - --wa-tooltip-border-radius: var(--wa-border-radius-s); - - --wa-tooltip-content-color: var(--wa-color-surface-default); - --wa-tooltip-font-size: var(--wa-font-size-s); - --wa-tooltip-line-height: var(--wa-line-height-normal); - /* #endregion */ - } -} - -@layer wa-overrides { - @property --wa-ripple-progress { - syntax: ''; - initial-value: 0; - inherits: false; - } - - :root, - .wa-theme-matter, - .wa-light, - .wa-dark, - .wa-invert { - --wa-ripple-start-radius: 0.1em; - --wa-ripple-start-opacity: 0.1; - --wa-ripple-duration: calc(2 * var(--wa-transition-slow)); - - wa-button, - button, - input:where([type='button'], [type='reset'], [type='submit']) { - --wa-form-control-border-radius: var(--wa-border-radius-pill); - --box-shadow: 0 0 transparent; - - &:not([appearance~='plain']) { - &:where(:not(wa-button)), - &::part(base) { - padding-inline: calc(var(--wa-form-control-padding-inline) * 1.5); - } - } - - &:not([appearance~='outlined'], [appearance~='plain']):hover { - --box-shadow: var(--wa-shadow-s); - - &:active { - --box-shadow: 0 0 transparent; - } - } - - &:is([appearance~='outlined']) { - --border-color: var(--wa-form-control-border-color); - } - - /* Ripple effect */ - /* TODO: fix */ - --wa-ripple-progress: 1; - --wa-ripple-progress-inv: calc(1 - var(--wa-ripple-progress)); - --wa-ripple-radius: calc( - var(--wa-ripple-start-radius) * var(--wa-ripple-progress-inv) + 100% * var(--wa-ripple-progress) - ); - --wa-ripple-opacity: calc(var(--wa-ripple-start-opacity) * var(--wa-ripple-progress-inv)); - --wa-ripple-color: hsl(0 0% 100% / var(--wa-ripple-opacity)); - --wa-ripple-center-x: calc(100% * var(--mouse-local-x, 0.5)); - --wa-ripple-center-y: calc(100% * var(--mouse-local-y, 0.5)); - - background-image: radial-gradient( - circle at var(--wa-ripple-center-x) var(--wa-ripple-center-y), - var(--wa-ripple-color) var(--wa-ripple-radius), - transparent 0 - ); - transition: - var(--wa-transition-fast), - --wa-ripple-progress var(--wa-ripple-duration); - - &:active { - --wa-ripple-progress: 0; - --wa-ripple-duration: 0s; - } - } - - input[type='checkbox'], - wa-checkbox::part(control), - wa-tree-item::part(checkbox__control) { - border-radius: calc(var(--wa-border-radius-s) / 2); - } - - input:where( - :not( - [type='button'], - [type='checkbox'], - [type='color'], - [type='file'], - [type='hidden'], - [type='image'], - [type='radio'], - [type='range'], - [type='reset'], - [type='submit'] - ) - ), - select, - textarea, - wa-input, - wa-select, - wa-textarea { - --wa-form-control-value-line-height: var(--wa-line-height-normal); - - /* Needed for floating label */ - position: relative; - - &:is([appearance~='filled']):not([appearance~='outlined'], [pill]) { - --wa-focus-ring: ; - --border-color: transparent transparent var(--wa-form-control-border-color) transparent; - - &:where(input, textarea, wa-input, select, wa-textarea):focus, - &:where(wa-select):focus-within { - --border-color: transparent transparent var(--wa-color-focus) transparent; - --box-shadow: inset 0 calc(var(--wa-form-control-border-width) * -2) 0 0 var(--wa-color-focus); - } - - &:where(input, select, textarea), - &::part(input), - &::part(combobox) { - border-radius: var(--wa-form-control-border-radius) var(--wa-form-control-border-radius) 0px 0px; - } - } - - /** - * Floating labels - */ - &::part(label) { - transition: all var(--wa-transition-normal); - pointer-events: none; - - position: absolute; - left: calc(var(--wa-form-control-padding-inline) - 0.25em); - z-index: 1; - - /* State: out of the way by default */ - top: -0.5lh; - font-size: var(--wa-font-size-smaller); - - background-color: var(--wa-form-control-background-color); - padding-inline: 0.25em; - } - - &:focus::part(label) { - color: var(--wa-color-focus); - } - - /* State: placeholder-like when: - * - the input is empty - * - the input is not focused - * - there is no actual placeholder - */ - &:state(blank):not(:focus, [placeholder])::part(label) { - top: calc(var(--wa-form-control-height) / 2 - 0.5lh); - font-size: inherit; - } - - /* Different positioning and appearance for filled */ - &:where([appearance~='filled'])[label]:not([placeholder]) { - &::part(base) { - /* We want to move this down a bit to make space for the floating label */ - translate: 0 0.3em; - } - - &::part(label) { - /* In filled inputs, the floating label stays within the input */ - background-color: transparent; - } - - &:not(:state(blank):not(:focus, [placeholder]))::part(label) { - top: 0; - } - } - } - - wa-option { - --background-color-hover: color-mix(in oklch, var(--wa-color-surface-lowered), transparent); - --text-color-hover: var(--wa-color-text-normal); - &::part(base) { - line-height: var(--wa-line-height-expanded); - } - } - - progress, - wa-progress-bar::part(base) { - height: 0.25rem; - border-radius: var(--wa-border-radius-square); - } - - input:is([type='checkbox'], [type='radio']), - wa-checkbox::part(control), - wa-tree-item::part(checkbox__control), - wa-radio::part(control) { - --checked-icon-scale: 0.65; - - border-width: var(--wa-border-width-m); - margin-inline-end: 0.75em; - } - @media (hover: hover) { - :is(input:where([type='checkbox'], [type='radio']), wa-checkbox, wa-tree-item, wa-radio):hover { - &:where(input), - &::part(control), - &::part(checkbox__control) { - box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-border-color), transparent 85%); - } - &:is(:checked, :indeterminate, :state(checked), :state(indeterminate)) { - &:where(input), - &::part(control), - &::part(checkbox__control) { - box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-activated-color), transparent 85%); - } - } - } - } - - @media (hover: hover) { - wa-slider:hover::part(thumb) { - box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-activated-color), transparent 85%); - } - } - - wa-switch { - --background-color: var(--wa-color-surface-raised); - --border-width: var(--wa-border-width-m); - --height: 2em; - --width: calc(var(--height) * 1.625); - --thumb-size: 1.5em; - transition-property: all; - - &::part(control) { - margin-inline-end: 0.75em; - } - - @media (hover: hover) { - &:hover { - --thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%); - } - } - - &:not(:state(checked))::part(thumb) { - transform: scale(0.7); - } - - &:active::part(thumb) { - transform: scale(1.1); - } - } - - wa-tag { - font-weight: var(--wa-font-weight-semibold); - } - } -} diff --git a/packages/webawesome/src/styles/themes/mellow.css b/packages/webawesome/src/styles/themes/mellow.css deleted file mode 100644 index 1d58af45e..000000000 --- a/packages/webawesome/src/styles/themes/mellow.css +++ /dev/null @@ -1,392 +0,0 @@ -@import url('../color/natural.css'); -@import url('../brand/blue.css'); -@import url('../success/green.css'); -@import url('../warning/yellow.css'); -@import url('../danger/red.css'); -@import url('../neutral/gray.css'); -@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap'); - -@layer wa-theme { - :root, - .wa-theme-mellow, - .wa-light, - .wa-dark .wa-invert { - /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: light; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: white; - --wa-color-surface-default: var(--wa-color-neutral-95); - --wa-color-surface-lowered: var(--wa-color-neutral-90); - --wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-80), transparent); - - --wa-color-text-normal: var(--wa-color-brand-20); - --wa-color-text-quiet: var(--wa-color-brand-40); - --wa-color-text-link: var(--wa-color-brand-40); - - --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent); - - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), - transparent - ); - - --wa-color-focus: var(--wa-color-brand-50); - - --wa-color-mix-hover: black 10%; - --wa-color-mix-active: black 20%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-90); - --wa-color-brand-fill-normal: var(--wa-color-brand-80); - --wa-color-brand-fill-loud: var(--wa-color-brand-50); - --wa-color-brand-border-quiet: var(--wa-color-brand-80); - --wa-color-brand-border-normal: var(--wa-color-brand-70); - --wa-color-brand-border-loud: var(--wa-color-brand-60); - --wa-color-brand-on-quiet: var(--wa-color-brand-40); - --wa-color-brand-on-normal: var(--wa-color-brand-30); - --wa-color-brand-on-loud: white; - - --wa-color-success-fill-quiet: var(--wa-color-success-90); - --wa-color-success-fill-normal: var(--wa-color-success-80); - --wa-color-success-fill-loud: var(--wa-color-success-50); - --wa-color-success-border-quiet: var(--wa-color-success-80); - --wa-color-success-border-normal: var(--wa-color-success-70); - --wa-color-success-border-loud: var(--wa-color-success-60); - --wa-color-success-on-quiet: var(--wa-color-success-40); - --wa-color-success-on-normal: var(--wa-color-success-30); - --wa-color-success-on-loud: white; - - --wa-color-warning-fill-quiet: var(--wa-color-warning-90); - --wa-color-warning-fill-normal: var(--wa-color-warning-80); - --wa-color-warning-fill-loud: var(--wa-color-warning-50); - --wa-color-warning-border-quiet: var(--wa-color-warning-80); - --wa-color-warning-border-normal: var(--wa-color-warning-70); - --wa-color-warning-border-loud: var(--wa-color-warning-60); - --wa-color-warning-on-quiet: var(--wa-color-warning-40); - --wa-color-warning-on-normal: var(--wa-color-warning-30); - --wa-color-warning-on-loud: white; - - --wa-color-danger-fill-quiet: var(--wa-color-danger-90); - --wa-color-danger-fill-normal: var(--wa-color-danger-80); - --wa-color-danger-fill-loud: var(--wa-color-danger-50); - --wa-color-danger-border-quiet: var(--wa-color-danger-80); - --wa-color-danger-border-normal: var(--wa-color-danger-70); - --wa-color-danger-border-loud: var(--wa-color-danger-60); - --wa-color-danger-on-quiet: var(--wa-color-danger-40); - --wa-color-danger-on-normal: var(--wa-color-danger-30); - --wa-color-danger-on-loud: white; - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-80); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-50); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-80); - --wa-color-neutral-border-normal: var(--wa-color-neutral-70); - --wa-color-neutral-border-loud: var(--wa-color-neutral-60); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-40); - --wa-color-neutral-on-normal: var(--wa-color-neutral-30); - --wa-color-neutral-on-loud: white; - /* #endregion */ - } - - .wa-dark, - .wa-invert { - /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: dark; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-neutral-10); - --wa-color-surface-default: var(--wa-color-neutral-05); - --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%); - --wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-30), transparent); - - --wa-color-text-normal: var(--wa-color-brand-90); - --wa-color-text-quiet: var(--wa-color-neutral-60); - --wa-color-text-link: var(--wa-color-brand-70); - - --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent); - - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%), - transparent - ); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: black 8%; - --wa-color-mix-active: black 16%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-10); - --wa-color-brand-fill-normal: var(--wa-color-brand-20); - --wa-color-brand-fill-loud: var(--wa-color-brand-50); - --wa-color-brand-border-quiet: var(--wa-color-brand-20); - --wa-color-brand-border-normal: var(--wa-color-brand-30); - --wa-color-brand-border-loud: var(--wa-color-brand-40); - --wa-color-brand-on-quiet: var(--wa-color-brand-60); - --wa-color-brand-on-normal: var(--wa-color-brand-70); - --wa-color-brand-on-loud: white; - - --wa-color-success-fill-quiet: var(--wa-color-success-10); - --wa-color-success-fill-normal: var(--wa-color-success-20); - --wa-color-success-fill-loud: var(--wa-color-success-50); - --wa-color-success-border-quiet: var(--wa-color-success-20); - --wa-color-success-border-normal: var(--wa-color-success-30); - --wa-color-success-border-loud: var(--wa-color-success-40); - --wa-color-success-on-quiet: var(--wa-color-success-60); - --wa-color-success-on-normal: var(--wa-color-success-70); - --wa-color-success-on-loud: white; - - --wa-color-warning-fill-quiet: var(--wa-color-warning-10); - --wa-color-warning-fill-normal: var(--wa-color-warning-20); - --wa-color-warning-fill-loud: var(--wa-color-warning-50); - --wa-color-warning-border-quiet: var(--wa-color-warning-20); - --wa-color-warning-border-normal: var(--wa-color-warning-30); - --wa-color-warning-border-loud: var(--wa-color-warning-40); - --wa-color-warning-on-quiet: var(--wa-color-warning-60); - --wa-color-warning-on-normal: var(--wa-color-warning-70); - --wa-color-warning-on-loud: white; - - --wa-color-danger-fill-quiet: var(--wa-color-danger-10); - --wa-color-danger-fill-normal: var(--wa-color-danger-20); - --wa-color-danger-fill-loud: var(--wa-color-danger-50); - --wa-color-danger-border-quiet: var(--wa-color-danger-20); - --wa-color-danger-border-normal: var(--wa-color-danger-30); - --wa-color-danger-border-loud: var(--wa-color-danger-40); - --wa-color-danger-on-quiet: var(--wa-color-danger-60); - --wa-color-danger-on-normal: var(--wa-color-danger-70); - --wa-color-danger-on-loud: white; - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-20); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-90); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-20); - --wa-color-neutral-border-normal: var(--wa-color-neutral-30); - --wa-color-neutral-border-loud: var(--wa-color-neutral-40); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-60); - --wa-color-neutral-on-normal: var(--wa-color-neutral-70); - --wa-color-neutral-on-loud: var(--wa-color-neutral-05); - /* #endregion */ - } - - :root, - .wa-theme-mellow, - .wa-light, - .wa-dark, - .wa-invert { - /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-font-family-body: 'Mulish', sans-serif; - --wa-font-family-heading: 'Lora', serif; - --wa-font-family-code: ui-monospace, monospace; - --wa-font-family-longform: 'Lora', serif; - - /* Font sizes use a ratio of 1.125 to scale sizes proportionally. - * For larger font sizes, each size is twice 1.125x larger to maximize impact. - * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */ - --wa-font-size-scale: 1; - --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */ - --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */ - --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */ - --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */ - --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */ - --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */ - --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */ - --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */ - --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */ - - --wa-font-size-smaller: round(calc(1em / 1.125), 1px); - --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px); - - --wa-font-weight-light: 300; - --wa-font-weight-normal: 400; - --wa-font-weight-semibold: 600; - --wa-font-weight-bold: 700; - - --wa-font-weight-body: var(--wa-font-weight-normal); - --wa-font-weight-heading: var(--wa-font-weight-bold); - --wa-font-weight-code: var(--wa-font-weight-normal); - --wa-font-weight-longform: var(--wa-font-weight-normal); - --wa-font-weight-action: var(--wa-font-weight-semibold); - - --wa-line-height-condensed: 1.2; - --wa-line-height-normal: 1.6; - --wa-line-height-expanded: 2; - - --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted; - --wa-link-decoration-hover: underline; - /* #endregion */ - - /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-space-scale: 1.125; - --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2.25px */ - --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4.5px */ - --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 9px */ - --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 13.5px */ - --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 18px */ - --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 27px */ - --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 36px */ - --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 45px */ - --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 54px */ - --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 72px */ - - --wa-content-spacing: var(--wa-space-l); - /* #endregion */ - - /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-style: solid; - - --wa-border-width-scale: 1.5; - --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem); - --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem); - --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem); - /* #endregion */ - - /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-radius-scale: 1; - --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem); - --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem); - --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem); - - --wa-border-radius-pill: 9999px; - --wa-border-radius-circle: 50%; - --wa-border-radius-square: 0px; - /* #endregion */ - - /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-focus-ring-style: solid; - --wa-focus-ring-width: 0.25rem; /* 4px */ - --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); - --wa-focus-ring-offset: 0.0625rem; /* 1px */ - /* #endregion */ - - /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-shadow-offset-x-scale: 0; - --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem); - --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem); - --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem); - - --wa-shadow-offset-y-scale: 0; - --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem); - --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem); - --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem); - - --wa-shadow-blur-scale: 1; - --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem); - --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem); - --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem); - - --wa-shadow-spread-scale: -0.5; - --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem); - --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem); - --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem); - - --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) - var(--wa-shadow-spread-s) var(--wa-color-shadow); - --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) - var(--wa-shadow-spread-m) var(--wa-color-shadow); - --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) - var(--wa-shadow-spread-l) var(--wa-color-shadow); - /* #endregion */ - - /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-transition-easing: ease; - --wa-transition-slow: 300ms; - --wa-transition-normal: 150ms; - --wa-transition-fast: 75ms; - /* #endregion */ - - /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */ - /* Form Controls */ - --wa-form-control-background-color: var(--wa-color-surface-default); - - --wa-form-control-border-color: var(--wa-color-neutral-border-normal); - --wa-form-control-border-style: var(--wa-border-style); - --wa-form-control-border-width: var(--wa-border-width-s); - --wa-form-control-border-radius: var(--wa-border-radius-m); - - --wa-form-control-activated-color: var(--wa-color-brand-fill-loud); - - --wa-form-control-label-color: var(--wa-color-text-normal); - --wa-form-control-label-font-weight: var(--wa-font-weight-semibold); - --wa-form-control-label-line-height: var(--wa-line-height-condensed); - - --wa-form-control-value-color: var(--wa-color-text-normal); - --wa-form-control-value-font-weight: var(--wa-font-weight-body); - --wa-form-control-value-line-height: var(--wa-line-height-condensed); - - --wa-form-control-hint-color: var(--wa-color-text-quiet); - --wa-form-control-hint-font-weight: var(--wa-font-weight-body); - --wa-form-control-hint-line-height: var(--wa-line-height-normal); - - --wa-form-control-placeholder-color: var(--wa-color-gray-50); - - --wa-form-control-required-content: '*'; - --wa-form-control-required-content-color: inherit; - --wa-form-control-required-content-offset: -0.1em; - - --wa-form-control-padding-block: 0.75em; - --wa-form-control-padding-inline: 1em; - --wa-form-control-height: round( - calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), - 1px - ); - --wa-form-control-toggle-size: round(1.25em, 1px); - - /* Panels */ - --wa-panel-border-style: var(--wa-border-style); - --wa-panel-border-width: var(--wa-border-width-s); - --wa-panel-border-radius: var(--wa-border-radius-l); - - /* Tooltips */ - --wa-tooltip-arrow-size: 0.375rem; - - --wa-tooltip-background-color: var(--wa-color-text-normal); - - --wa-tooltip-border-radius: var(--wa-border-radius-s); - - --wa-tooltip-content-color: var(--wa-color-surface-default); - --wa-tooltip-font-size: var(--wa-font-size-s); - --wa-tooltip-line-height: var(--wa-line-height-normal); - /* #endregion */ - } -} - -@layer wa-overrides { - :root, - .wa-theme-mellow, - .wa-light, - .wa-dark, - .wa-invert { - h1, - h2, - h3, - h4, - h5, - h6 { - letter-spacing: calc(1em * -0.02); - } - - wa-callout { - border-width: var(--wa-panel-border-width) var(--wa-panel-border-width) var(--wa-panel-border-width) - calc(var(--wa-panel-border-width) * 4); - } - - wa-card::part(header) { - border-bottom-style: dotted; - } - wa-card::part(footer) { - border-top-style: dotted; - } - - input[type='radio'], - wa-radio { - --checked-icon-scale: 0.6; - } - } -} diff --git a/packages/webawesome/src/styles/themes/playful.css b/packages/webawesome/src/styles/themes/playful.css deleted file mode 100644 index 95b5f1ef5..000000000 --- a/packages/webawesome/src/styles/themes/playful.css +++ /dev/null @@ -1,401 +0,0 @@ -@import url('../color/rudimentary.css'); -@import url('../brand/purple.css'); -@import url('../success/green.css'); -@import url('../warning/yellow.css'); -@import url('../danger/red.css'); -@import url('../neutral/gray.css'); -@import url('../dimension/smooth.css'); -@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap'); - -@layer wa-theme { - :root, - .wa-theme-playful, - .wa-light, - .wa-dark .wa-invert { - /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: light; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: white; - --wa-color-surface-default: white; - --wa-color-surface-lowered: var(--wa-color-neutral-95); - --wa-color-surface-border: var(--wa-color-neutral-80); - - --wa-color-text-normal: var(--wa-color-neutral-10); - --wa-color-text-quiet: var(--wa-color-neutral-40); - --wa-color-text-link: var(--wa-color-brand-40); - - --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent); - - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), - transparent - ); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: black 10%; - --wa-color-mix-active: black 20%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-90); - --wa-color-brand-fill-normal: var(--wa-color-brand-80); - --wa-color-brand-fill-loud: var(--wa-color-brand); - --wa-color-brand-border-quiet: var(--wa-color-brand-90); - --wa-color-brand-border-normal: var(--wa-color-brand-70); - --wa-color-brand-border-loud: var(--wa-color-brand-50); - --wa-color-brand-on-quiet: var(--wa-color-brand-30); - --wa-color-brand-on-normal: var(--wa-color-brand-30); - --wa-color-brand-on-loud: var(--wa-color-brand-on); - - --wa-color-success-fill-quiet: var(--wa-color-success-90); - --wa-color-success-fill-normal: var(--wa-color-success-80); - --wa-color-success-fill-loud: var(--wa-color-success); - --wa-color-success-border-quiet: var(--wa-color-success-90); - --wa-color-success-border-normal: var(--wa-color-success-70); - --wa-color-success-border-loud: var(--wa-color-success-50); - --wa-color-success-on-quiet: var(--wa-color-success-30); - --wa-color-success-on-normal: var(--wa-color-success-30); - --wa-color-success-on-loud: var(--wa-color-success-on); - - --wa-color-warning-fill-quiet: var(--wa-color-warning-90); - --wa-color-warning-fill-normal: var(--wa-color-warning-80); - --wa-color-warning-fill-loud: var(--wa-color-warning); - --wa-color-warning-border-quiet: var(--wa-color-warning-90); - --wa-color-warning-border-normal: var(--wa-color-warning-70); - --wa-color-warning-border-loud: var(--wa-color-warning-50); - --wa-color-warning-on-quiet: var(--wa-color-warning-30); - --wa-color-warning-on-normal: var(--wa-color-warning-30); - --wa-color-warning-on-loud: var(--wa-color-warning-on); - - --wa-color-danger-fill-quiet: var(--wa-color-danger-90); - --wa-color-danger-fill-normal: var(--wa-color-danger-80); - --wa-color-danger-fill-loud: var(--wa-color-danger); - --wa-color-danger-border-quiet: var(--wa-color-danger-90); - --wa-color-danger-border-normal: var(--wa-color-danger-70); - --wa-color-danger-border-loud: var(--wa-color-danger-50); - --wa-color-danger-on-quiet: var(--wa-color-danger-30); - --wa-color-danger-on-normal: var(--wa-color-danger-30); - --wa-color-danger-on-loud: var(--wa-color-danger-on); - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-80); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-40); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-90); - --wa-color-neutral-border-normal: var(--wa-color-neutral-70); - --wa-color-neutral-border-loud: var(--wa-color-neutral-50); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-30); - --wa-color-neutral-on-normal: var(--wa-color-neutral-30); - --wa-color-neutral-on-loud: var(--wa-color-neutral-95); - /* #endregion */ - } - - .wa-dark, - .wa-invert { - /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: dark; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-neutral-20); - --wa-color-surface-default: var(--wa-color-neutral-10); - --wa-color-surface-lowered: var(--wa-color-neutral-05); - --wa-color-surface-border: var(--wa-color-neutral-20); - - --wa-color-text-normal: var(--wa-color-neutral-95); - --wa-color-text-quiet: var(--wa-color-neutral-60); - --wa-color-text-link: var(--wa-color-brand-80); - - --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent); - - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%), - transparent - ); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: white 10%; - --wa-color-mix-active: black 16%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-10); - --wa-color-brand-fill-normal: var(--wa-color-brand-20); - --wa-color-brand-fill-loud: var(--wa-color-brand); - --wa-color-brand-border-quiet: var(--wa-color-brand-20); - --wa-color-brand-border-normal: var(--wa-color-brand-30); - --wa-color-brand-border-loud: var(--wa-color-brand-40); - --wa-color-brand-on-quiet: var(--wa-color-brand-60); - --wa-color-brand-on-normal: var(--wa-color-brand-70); - --wa-color-brand-on-loud: var(--wa-color-brand-on); - - --wa-color-success-fill-quiet: var(--wa-color-success-10); - --wa-color-success-fill-normal: var(--wa-color-success-20); - --wa-color-success-fill-loud: var(--wa-color-success); - --wa-color-success-border-quiet: var(--wa-color-success-20); - --wa-color-success-border-normal: var(--wa-color-success-30); - --wa-color-success-border-loud: var(--wa-color-success-40); - --wa-color-success-on-quiet: var(--wa-color-success-60); - --wa-color-success-on-normal: var(--wa-color-success-70); - --wa-color-success-on-loud: var(--wa-color-success-on); - - --wa-color-warning-fill-quiet: var(--wa-color-warning-10); - --wa-color-warning-fill-normal: var(--wa-color-warning-20); - --wa-color-warning-fill-loud: var(--wa-color-warning); - --wa-color-warning-border-quiet: var(--wa-color-warning-20); - --wa-color-warning-border-normal: var(--wa-color-warning-30); - --wa-color-warning-border-loud: var(--wa-color-warning-40); - --wa-color-warning-on-quiet: var(--wa-color-warning-60); - --wa-color-warning-on-normal: var(--wa-color-warning-70); - --wa-color-warning-on-loud: var(--wa-color-warning-on); - - --wa-color-danger-fill-quiet: var(--wa-color-danger-10); - --wa-color-danger-fill-normal: var(--wa-color-danger-20); - --wa-color-danger-fill-loud: var(--wa-color-danger); - --wa-color-danger-border-quiet: var(--wa-color-danger-20); - --wa-color-danger-border-normal: var(--wa-color-danger-30); - --wa-color-danger-border-loud: var(--wa-color-danger-40); - --wa-color-danger-on-quiet: var(--wa-color-danger-60); - --wa-color-danger-on-normal: var(--wa-color-danger-70); - --wa-color-danger-on-loud: var(--wa-color-danger-on); - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-20); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-90); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-20); - --wa-color-neutral-border-normal: var(--wa-color-neutral-30); - --wa-color-neutral-border-loud: var(--wa-color-neutral-40); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-60); - --wa-color-neutral-on-normal: var(--wa-color-neutral-70); - --wa-color-neutral-on-loud: var(--wa-color-neutral-05); - /* #endregion */ - } - - :root, - .wa-theme-playful, - .wa-light, - .wa-dark, - .wa-invert { - /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-font-family-body: 'Nunito', sans-serif; - --wa-font-family-heading: 'Fredoka', sans-serif; - --wa-font-family-code: 'Azeret Mono', monospace; - --wa-font-family-longform: ui-serif, serif; - - /* Font sizes use a ratio of 1.125 to scale sizes proportionally. - * For larger font sizes, each size is twice 1.125x larger to maximize impact. - * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */ - --wa-font-size-scale: 1.125; - --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 12.375px */ - --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 13.5px */ - --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 15.75px */ - --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 18px */ - --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 22.5px */ - --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 28.125px */ - --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 36px */ - --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 46.125px */ - --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 58.5px */ - - --wa-font-size-smaller: round(calc(1em / 1.125), 1px); - --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px); - - --wa-font-weight-light: 300; - --wa-font-weight-normal: 500; - --wa-font-weight-semibold: 600; - --wa-font-weight-bold: 700; - - --wa-font-weight-body: var(--wa-font-weight-normal); - --wa-font-weight-heading: var(--wa-font-weight-semibold); - --wa-font-weight-code: var(--wa-font-weight-normal); - --wa-font-weight-longform: var(--wa-font-weight-normal); - --wa-font-weight-action: var(--wa-font-weight-semibold); - - --wa-line-height-condensed: 1.35; - --wa-line-height-normal: 1.8; - --wa-line-height-expanded: 2.25; - - --wa-link-decoration-default: underline color-mix(in oklab, currentColor 60%, transparent) dashed; - --wa-link-decoration-hover: underline; - /* #endregion */ - - /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-space-scale: 1; - --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */ - --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */ - --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */ - --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */ - --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */ - --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */ - --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */ - --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */ - --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */ - --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */ - - --wa-content-spacing: var(--wa-space-l); - /* #endregion */ - - /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-style: solid; - - --wa-border-width-scale: 3; - --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem); - --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem); - --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem); - /* #endregion */ - - /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-radius-scale: 2; - --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem); - --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem); - --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem); - - --wa-border-radius-pill: 9999px; - --wa-border-radius-circle: 50%; - --wa-border-radius-square: 0px; - /* #endregion */ - - /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-focus-ring-style: solid; - --wa-focus-ring-width: 0.25rem; /* 4px */ - --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); - --wa-focus-ring-offset: 0.0625rem; /* 1px */ - /* #endregion */ - - /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-shadow-offset-x-scale: 0; - --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem); - --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem); - --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem); - - --wa-shadow-offset-y-scale: 2; - --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem); - --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem); - --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem); - - --wa-shadow-blur-scale: 3; - --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem); - --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem); - --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem); - - --wa-shadow-spread-scale: -0.5; - --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem); - --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem); - --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem); - - --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) - var(--wa-shadow-spread-s) var(--wa-color-shadow); - --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) - var(--wa-shadow-spread-m) var(--wa-color-shadow); - --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) - var(--wa-shadow-spread-l) var(--wa-color-shadow); - /* #endregion */ - - /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-transition-easing: ease; - --wa-transition-slow: 300ms; - --wa-transition-normal: 150ms; - --wa-transition-fast: 75ms; - /* #endregion */ - - /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */ - /* Form Controls */ - --wa-form-control-background-color: var(--wa-color-surface-default); - - --wa-form-control-border-color: var(--wa-color-neutral-border-normal); - --wa-form-control-border-style: var(--wa-border-style); - --wa-form-control-border-width: var(--wa-border-width-s); - --wa-form-control-border-radius: min(var(--wa-border-radius-pill), calc(var(--wa-form-control-height) * 0.6)); - - --wa-form-control-activated-color: var(--wa-color-brand-fill-loud); - - --wa-form-control-label-color: var(--wa-color-text-normal); - --wa-form-control-label-font-weight: var(--wa-font-weight-semibold); - --wa-form-control-label-line-height: var(--wa-line-height-condensed); - - --wa-form-control-value-color: var(--wa-color-text-normal); - --wa-form-control-value-font-weight: var(--wa-font-weight-body); - --wa-form-control-value-line-height: var(--wa-line-height-condensed); - - --wa-form-control-hint-color: var(--wa-color-text-quiet); - --wa-form-control-hint-font-weight: var(--wa-font-weight-body); - --wa-form-control-hint-line-height: var(--wa-line-height-normal); - - --wa-form-control-placeholder-color: var(--wa-color-gray-50); - - --wa-form-control-required-content: '*'; - --wa-form-control-required-content-color: inherit; - --wa-form-control-required-content-offset: -0.1em; - - --wa-form-control-padding-block: 0.75em; - --wa-form-control-padding-inline: 1em; - --wa-form-control-height: round( - calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), - 1px - ); - --wa-form-control-toggle-size: round(1.25em, 1px); - - /* Panels */ - --wa-panel-border-style: var(--wa-border-style); - --wa-panel-border-width: var(--wa-border-width-s); - --wa-panel-border-radius: var(--wa-border-radius-l); - - /* Tooltips */ - --wa-tooltip-arrow-size: 0.375rem; - - --wa-tooltip-background-color: var(--wa-color-text-normal); - - --wa-tooltip-border-radius: var(--wa-border-radius-s); - - --wa-tooltip-content-color: var(--wa-color-surface-default); - --wa-tooltip-font-size: var(--wa-font-size-s); - --wa-tooltip-line-height: var(--wa-line-height-normal); - /* #endregion */ - } -} - -@layer wa-overrides { - :root, - .wa-theme-playful, - .wa-light, - .wa-dark, - .wa-invert { - wa-badge, - wa-button, - button, - input:where([type='button'], [type='reset'], [type='submit']) { - &:where(:not(wa-button)), - &::part(base) { - font-weight: var(--wa-font-weight-bold); - } - } - - wa-badge, - wa-tag, - wa-select::part(tag) { - border-width: calc(var(--wa-border-width-s) * 0.67); - } - wa-select::part(tag) { - border-radius: var(--wa-form-control-border-radius); - } - - wa-radio, - input[type='radio'] { - --checked-icon-color: var(--wa-color-surface-default); - --checked-icon-scale: 0.4; - - &:checked, - &:state(checked)::part(control) { - background-color: var(--wa-form-control-activated-color); - } - } - - wa-rating { - --symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent); - } - } -} diff --git a/packages/webawesome/src/styles/themes/premium.css b/packages/webawesome/src/styles/themes/premium.css deleted file mode 100644 index f150fc3dc..000000000 --- a/packages/webawesome/src/styles/themes/premium.css +++ /dev/null @@ -1,407 +0,0 @@ -@import url('../color/anodized.css'); -@import url('../brand/cyan.css'); -@import url('../success/green.css'); -@import url('../warning/yellow.css'); -@import url('../danger/red.css'); -@import url('../neutral/gray.css'); -@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap'); - -@layer wa-theme { - :root, - .wa-theme-premium, - .wa-light, - .wa-dark .wa-invert { - /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: light; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: white; - --wa-color-surface-default: white; - --wa-color-surface-lowered: var(--wa-color-neutral-95); - --wa-color-surface-border: var(--wa-color-neutral-80); - - --wa-color-text-normal: var(--wa-color-neutral-10); - --wa-color-text-quiet: var(--wa-color-neutral-40); - --wa-color-text-link: var(--wa-color-brand-40); - - --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent); - - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), - transparent - ); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: black 10%; - --wa-color-mix-active: var(--wa-color-surface-default) 5%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-95); - --wa-color-brand-fill-normal: var(--wa-color-brand-90); - --wa-color-brand-fill-loud: var(--wa-color-brand-80); - --wa-color-brand-border-quiet: var(--wa-color-brand-80); - --wa-color-brand-border-normal: var(--wa-color-brand-70); - --wa-color-brand-border-loud: var(--wa-color-brand-50); - --wa-color-brand-on-quiet: var(--wa-color-brand-40); - --wa-color-brand-on-normal: var(--wa-color-brand-30); - --wa-color-brand-on-loud: var(--wa-color-brand-10); - - --wa-color-success-fill-quiet: var(--wa-color-success-95); - --wa-color-success-fill-normal: var(--wa-color-success-90); - --wa-color-success-fill-loud: var(--wa-color-success-80); - --wa-color-success-border-quiet: var(--wa-color-success-80); - --wa-color-success-border-normal: var(--wa-color-success-70); - --wa-color-success-border-loud: var(--wa-color-success-50); - --wa-color-success-on-quiet: var(--wa-color-success-40); - --wa-color-success-on-normal: var(--wa-color-success-30); - --wa-color-success-on-loud: var(--wa-color-success-10); - - --wa-color-warning-fill-quiet: var(--wa-color-warning-95); - --wa-color-warning-fill-normal: var(--wa-color-warning-90); - --wa-color-warning-fill-loud: var(--wa-color-warning-80); - --wa-color-warning-border-quiet: var(--wa-color-warning-80); - --wa-color-warning-border-normal: var(--wa-color-warning-70); - --wa-color-warning-border-loud: var(--wa-color-warning-50); - --wa-color-warning-on-quiet: var(--wa-color-warning-40); - --wa-color-warning-on-normal: var(--wa-color-warning-30); - --wa-color-warning-on-loud: var(--wa-color-warning-10); - - --wa-color-danger-fill-quiet: var(--wa-color-danger-95); - --wa-color-danger-fill-normal: var(--wa-color-danger-90); - --wa-color-danger-fill-loud: var(--wa-color-danger-70); - --wa-color-danger-border-quiet: var(--wa-color-danger-80); - --wa-color-danger-border-normal: var(--wa-color-danger-70); - --wa-color-danger-border-loud: var(--wa-color-danger-50); - --wa-color-danger-on-quiet: var(--wa-color-danger-40); - --wa-color-danger-on-normal: var(--wa-color-danger-30); - --wa-color-danger-on-loud: var(--wa-color-danger-10); - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-30); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-80); - --wa-color-neutral-border-normal: var(--wa-color-neutral-70); - --wa-color-neutral-border-loud: var(--wa-color-neutral-50); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-40); - --wa-color-neutral-on-normal: var(--wa-color-neutral-30); - --wa-color-neutral-on-loud: var(--wa-color-neutral-95); - /* #endregion */ - } - - .wa-dark, - .wa-invert { - /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: dark; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-neutral-30); - --wa-color-surface-default: var(--wa-color-neutral-20); - --wa-color-surface-lowered: var(--wa-color-neutral-10); - --wa-color-surface-border: var(--wa-color-neutral-30); - - --wa-color-text-normal: var(--wa-color-neutral-95); - --wa-color-text-quiet: var(--wa-color-neutral-80); - --wa-color-text-link: var(--wa-color-brand-80); - - --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent); - - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%), - transparent - ); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: white 20%; - --wa-color-mix-active: var(--wa-color-surface-default) 10%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-30); - --wa-color-brand-fill-normal: var(--wa-color-brand-40); - --wa-color-brand-fill-loud: var(--wa-color-brand-70); - --wa-color-brand-border-quiet: var(--wa-color-brand-30); - --wa-color-brand-border-normal: var(--wa-color-brand-40); - --wa-color-brand-border-loud: var(--wa-color-brand-70); - --wa-color-brand-on-quiet: var(--wa-color-brand-80); - --wa-color-brand-on-normal: var(--wa-color-brand-90); - --wa-color-brand-on-loud: var(--wa-color-brand-10); - - --wa-color-success-fill-quiet: var(--wa-color-success-30); - --wa-color-success-fill-normal: var(--wa-color-success-40); - --wa-color-success-fill-loud: var(--wa-color-success-70); - --wa-color-success-border-quiet: var(--wa-color-success-30); - --wa-color-success-border-normal: var(--wa-color-success-40); - --wa-color-success-border-loud: var(--wa-color-success-70); - --wa-color-success-on-quiet: var(--wa-color-success-80); - --wa-color-success-on-normal: var(--wa-color-success-90); - --wa-color-success-on-loud: var(--wa-color-success-10); - - --wa-color-warning-fill-quiet: var(--wa-color-warning-30); - --wa-color-warning-fill-normal: var(--wa-color-warning-40); - --wa-color-warning-fill-loud: var(--wa-color-warning-70); - --wa-color-warning-border-quiet: var(--wa-color-warning-30); - --wa-color-warning-border-normal: var(--wa-color-warning-40); - --wa-color-warning-border-loud: var(--wa-color-warning-70); - --wa-color-warning-on-quiet: var(--wa-color-warning-80); - --wa-color-warning-on-normal: var(--wa-color-warning-90); - --wa-color-warning-on-loud: var(--wa-color-warning-10); - - --wa-color-danger-fill-quiet: var(--wa-color-danger-30); - --wa-color-danger-fill-normal: var(--wa-color-danger-40); - --wa-color-danger-fill-loud: var(--wa-color-danger-70); - --wa-color-danger-border-quiet: var(--wa-color-danger-30); - --wa-color-danger-border-normal: var(--wa-color-danger-40); - --wa-color-danger-border-loud: var(--wa-color-danger-70); - --wa-color-danger-on-quiet: var(--wa-color-danger-80); - --wa-color-danger-on-normal: var(--wa-color-danger-90); - --wa-color-danger-on-loud: var(--wa-color-danger-10); - - --wa-color-neutral-fill-quiet: var(--wa-color-neutral-30); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-40); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-90); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-30); - --wa-color-neutral-border-normal: var(--wa-color-neutral-40); - --wa-color-neutral-border-loud: var(--wa-color-neutral-70); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-80); - --wa-color-neutral-on-normal: var(--wa-color-neutral-90); - --wa-color-neutral-on-loud: var(--wa-color-neutral-10); - /* #endregion */ - } - - :root, - .wa-theme-premium, - .wa-light, - .wa-dark, - .wa-invert { - /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-font-family-body: 'DM Sans', sans-serif; - --wa-font-family-heading: 'Playfair Display', serif; - --wa-font-family-code: ui-monospace, monospace; - --wa-font-family-longform: 'Playfair', serif; - - /* Font sizes use a ratio of 1.125 to scale sizes proportionally. - * For larger font sizes, each size is twice 1.125x larger to maximize impact. - * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */ - --wa-font-size-scale: 1; - --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */ - --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */ - --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */ - --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */ - --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */ - --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */ - --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */ - --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */ - --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */ - - --wa-font-size-smaller: round(calc(1em / 1.125), 1px); - --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px); - - --wa-font-weight-light: 300; - --wa-font-weight-normal: 400; - --wa-font-weight-semibold: 500; - --wa-font-weight-bold: 600; - - --wa-font-weight-body: var(--wa-font-weight-normal); - --wa-font-weight-heading: var(--wa-font-weight-semibold); - --wa-font-weight-code: var(--wa-font-weight-normal); - --wa-font-weight-longform: var(--wa-font-weight-normal); - --wa-font-weight-action: var(--wa-font-weight-semibold); - - --wa-line-height-condensed: 1.1; - --wa-line-height-normal: 1.5; - --wa-line-height-expanded: 2; - - --wa-link-decoration-default: underline color-mix(in oklab, currentColor 40%, transparent); - --wa-link-decoration-hover: underline; - /* #endregion */ - - /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-space-scale: 1; - --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */ - --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */ - --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */ - --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */ - --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */ - --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */ - --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */ - --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */ - --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */ - --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */ - - --wa-content-spacing: var(--wa-space-l); - /* #endregion */ - - /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-style: solid; - - --wa-border-width-scale: 1.5; - --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem); - --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem); - --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem); - /* #endregion */ - - /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-radius-scale: 0.5; - --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem); - --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem); - --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem); - - --wa-border-radius-pill: 9999px; - --wa-border-radius-circle: 50%; - --wa-border-radius-square: 0px; - /* #endregion */ - - /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-focus-ring-style: solid; - --wa-focus-ring-width: 0.1875rem; /* 3px */ - --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); - --wa-focus-ring-offset: 0.0625rem; /* 1px */ - /* #endregion */ - - /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-shadow-offset-x-scale: 0; - --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem); - --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem); - --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem); - - --wa-shadow-offset-y-scale: 1; - --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem); - --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem); - --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem); - - --wa-shadow-blur-scale: 1; - --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem); - --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem); - --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem); - - --wa-shadow-spread-scale: -0.5; - --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem); - --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem); - --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem); - - --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) - var(--wa-shadow-spread-s) var(--wa-color-shadow); - --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) - var(--wa-shadow-spread-m) var(--wa-color-shadow); - --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) - var(--wa-shadow-spread-l) var(--wa-color-shadow); - /* #endregion */ - - /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-transition-easing: ease; - --wa-transition-slow: 300ms; - --wa-transition-normal: 150ms; - --wa-transition-fast: 75ms; - /* #endregion */ - - /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */ - /* Form Controls */ - --wa-form-control-background-color: transparent; - - --wa-form-control-border-color: var(--wa-color-neutral-border-loud); - --wa-form-control-border-style: var(--wa-border-style); - --wa-form-control-border-width: var(--wa-border-width-s); - --wa-form-control-border-radius: var(--wa-border-radius-m); - - --wa-form-control-activated-color: var(--wa-color-neutral-fill-loud); - - --wa-form-control-label-color: var(--wa-color-text-normal); - --wa-form-control-label-font-weight: var(--wa-font-weight-semibold); - --wa-form-control-label-line-height: var(--wa-line-height-condensed); - - --wa-form-control-value-color: var(--wa-color-text-normal); - --wa-form-control-value-font-weight: var(--wa-font-weight-body); - --wa-form-control-value-line-height: var(--wa-line-height-condensed); - - --wa-form-control-hint-color: var(--wa-color-text-quiet); - --wa-form-control-hint-font-weight: var(--wa-font-weight-body); - --wa-form-control-hint-line-height: var(--wa-line-height-normal); - - --wa-form-control-placeholder-color: var(--wa-color-gray-50); - - --wa-form-control-required-content: '*'; - --wa-form-control-required-content-color: inherit; - --wa-form-control-required-content-offset: -0.1em; - - --wa-form-control-padding-block: 0.75em; - --wa-form-control-padding-inline: 1em; - --wa-form-control-height: round( - calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), - 1px - ); - --wa-form-control-toggle-size: round(1.5em, 1px); - - /* Panels */ - --wa-panel-border-style: var(--wa-border-style); - --wa-panel-border-width: var(--wa-border-width-s); - --wa-panel-border-radius: var(--wa-border-radius-l); - - /* Tooltips */ - --wa-tooltip-arrow-size: 0.375rem; - - --wa-tooltip-background-color: var(--wa-color-text-normal); - - --wa-tooltip-border-radius: var(--wa-border-radius-s); - - --wa-tooltip-content-color: var(--wa-color-surface-default); - --wa-tooltip-font-size: var(--wa-font-size-s); - --wa-tooltip-line-height: var(--wa-line-height-normal); - /* #endregion */ - } -} - -@layer wa-overrides { - :root, - .wa-theme-premium, - .wa-light, - .wa-dark, - .wa-invert { - wa-rating { - --symbol-color-active: var(--wa-color-text-quiet); - } - - wa-button::part(label), - button, - input:where([type='button'], [type='reset'], [type='submit']) { - font-size: var(--wa-font-size-smaller); - text-transform: uppercase; - } - - wa-callout { - font-size: var(--wa-font-size-smaller); - } - - input[type='checkbox'], - wa-checkbox, - wa-tree-item::part(checkbox__control) { - --checked-icon-color: var(--wa-color-surface-default); - } - - wa-badge, - wa-tag { - text-transform: uppercase; - } - - wa-radio, - input[type='radio'] { - --checked-icon-color: var(--wa-color-surface-default); - --checked-icon-scale: 0.4; - - &:checked, - &:state(checked)::part(control) { - background-color: var(--wa-form-control-activated-color); - } - } - - wa-switch { - --thumb-color-checked: var(--wa-color-surface-default); - } - } -} diff --git a/packages/webawesome/src/styles/themes/tailspin.css b/packages/webawesome/src/styles/themes/tailspin.css deleted file mode 100644 index 3f5345a41..000000000 --- a/packages/webawesome/src/styles/themes/tailspin.css +++ /dev/null @@ -1,413 +0,0 @@ -@import url('../color/default.css'); -@import url('../brand/indigo.css'); -@import url('../success/green.css'); -@import url('../warning/yellow.css'); -@import url('../danger/red.css'); -@import url('../neutral/gray.css'); -@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); - -@layer wa-theme { - :root, - .wa-theme-tailspin, - .wa-light, - .wa-dark .wa-invert { - /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: light; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: white; - --wa-color-surface-default: white; - --wa-color-surface-lowered: var(--wa-color-neutral-95); - --wa-color-surface-border: var(--wa-color-neutral-90); - - --wa-color-text-normal: var(--wa-color-neutral-10); - --wa-color-text-quiet: var(--wa-color-neutral-40); - --wa-color-text-link: var(--wa-color-brand-40); - - --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent); - - --wa-color-shadow: rgb(0 0 0 / 0.05); - - --wa-color-focus: var(--wa-color-brand-50); - - --wa-color-mix-hover: var(--wa-color-neutral-80) 20%; - --wa-color-mix-active: var(--wa-color-neutral-80) 10%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-95) 85%, transparent); - --wa-color-brand-fill-normal: var(--wa-color-brand-90); - --wa-color-brand-fill-loud: var(--wa-color-brand-40); - --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-80), transparent); - --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-70) 60%, transparent); - --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-60) 70%, transparent); - --wa-color-brand-on-quiet: var(--wa-color-brand-40); - --wa-color-brand-on-normal: var(--wa-color-brand-30); - --wa-color-brand-on-loud: white; - - --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-95) 85%, transparent); - --wa-color-success-fill-normal: var(--wa-color-success-90); - --wa-color-success-fill-loud: var(--wa-color-success-50); - --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-80), transparent); - --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-70) 60%, transparent); - --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-60) 70%, transparent); - --wa-color-success-on-quiet: var(--wa-color-success-40); - --wa-color-success-on-normal: var(--wa-color-success-30); - --wa-color-success-on-loud: white; - - --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-95) 85%, transparent); - --wa-color-warning-fill-normal: var(--wa-color-warning-90); - --wa-color-warning-fill-loud: var(--wa-color-warning-50); - --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-80), transparent); - --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-70) 60%, transparent); - --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-60) 70%, transparent); - --wa-color-warning-on-quiet: var(--wa-color-warning-40); - --wa-color-warning-on-normal: var(--wa-color-warning-30); - --wa-color-warning-on-loud: white; - - --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-95) 85%, transparent); - --wa-color-danger-fill-normal: var(--wa-color-danger-90); - --wa-color-danger-fill-loud: var(--wa-color-danger-50); - --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-80), transparent); - --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-70) 60%, transparent); - --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-60) 70%, transparent); - --wa-color-danger-on-quiet: var(--wa-color-danger-40); - --wa-color-danger-on-normal: var(--wa-color-danger-30); - --wa-color-danger-on-loud: white; - - --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-95) 85%, transparent); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-10); - --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-80), transparent); - --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-70) 60%, transparent); - --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-60) 70%, transparent); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-30); - --wa-color-neutral-on-normal: var(--wa-color-neutral-30); - --wa-color-neutral-on-loud: white; - /* #endregion */ - } - - .wa-dark, - .wa-invert { - /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */ - color-scheme: dark; - color: var(--wa-color-text-normal); - - /* Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-neutral-10); - --wa-color-surface-default: var(--wa-color-neutral-05); - --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%); - --wa-color-surface-border: rgb(255 255 255 / 0.1); - - --wa-color-text-normal: white; - --wa-color-text-quiet: var(--wa-color-neutral-60); - --wa-color-text-link: var(--wa-color-brand-70); - - --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent); - - --wa-color-shadow: rgb(0 0 0 / 0.2); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: var(--wa-color-neutral-70) 20%; - --wa-color-mix-active: var(--wa-color-neutral-70) 10%; - - /* Semantic Colors */ - --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-10) 90%, transparent); - --wa-color-brand-fill-normal: var(--wa-color-brand-20); - --wa-color-brand-fill-loud: var(--wa-color-brand-50); - --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20), transparent); - --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-30), transparent); - --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-40), transparent); - --wa-color-brand-on-quiet: var(--wa-color-brand-60); - --wa-color-brand-on-normal: var(--wa-color-brand-70); - --wa-color-brand-on-loud: white; - - --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-10) 90%, transparent); - --wa-color-success-fill-normal: var(--wa-color-success-20); - --wa-color-success-fill-loud: var(--wa-color-success-50); - --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-20), transparent); - --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-30) 60%, transparent); - --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-40) 70%, transparent); - --wa-color-success-on-quiet: var(--wa-color-success-60); - --wa-color-success-on-normal: var(--wa-color-success-70); - --wa-color-success-on-loud: white; - - --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-10) 90%, transparent); - --wa-color-warning-fill-normal: var(--wa-color-warning-20); - --wa-color-warning-fill-loud: var(--wa-color-warning-50); - --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-20), transparent); - --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-30) 60%, transparent); - --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-40) 70%, transparent); - --wa-color-warning-on-quiet: var(--wa-color-warning-60); - --wa-color-warning-on-normal: var(--wa-color-warning-70); - --wa-color-warning-on-loud: white; - - --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-10) 90%, transparent); - --wa-color-danger-fill-normal: var(--wa-color-danger-20); - --wa-color-danger-fill-loud: var(--wa-color-danger-50); - --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-20), transparent); - --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-30) 60%, transparent); - --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-40) 70%, transparent); - --wa-color-danger-on-quiet: var(--wa-color-danger-60); - --wa-color-danger-on-normal: var(--wa-color-danger-70); - --wa-color-danger-on-loud: white; - - --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-10) 90%, transparent); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-20); - --wa-color-neutral-fill-loud: white; - --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-20), transparent); - --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-30) 60%, transparent); - --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-40) 70%, transparent); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-60); - --wa-color-neutral-on-normal: var(--wa-color-neutral-70); - --wa-color-neutral-on-loud: var(--wa-color-neutral-10); - /* #endregion */ - } - - :root, - .wa-theme-tailspin, - .wa-light, - .wa-dark, - .wa-invert { - /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-font-family-body: 'Inter', sans-serif; - --wa-font-family-heading: var(--wa-font-family-body); - --wa-font-family-code: ui-monospace, monospace; - --wa-font-family-longform: ui-serif, serif; - - /* Font sizes use a ratio of 1.125 to scale sizes proportionally. - * For larger font sizes, each size is twice 1.125x larger to maximize impact. - * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */ - --wa-font-size-scale: 0.875; - --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 9.625px */ - --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 10.5px */ - --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 12.25px */ - --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 14px */ - --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 17.5px */ - --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 21.875px */ - --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 28px */ - --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 35.875px */ - --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 45.5px */ - - --wa-font-size-smaller: round(calc(1em / 1.125), 1px); - --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px); - - --wa-font-weight-light: 300; - --wa-font-weight-normal: 400; - --wa-font-weight-semibold: 500; - --wa-font-weight-bold: 700; - - --wa-font-weight-body: var(--wa-font-weight-normal); - --wa-font-weight-heading: var(--wa-font-weight-bold); - --wa-font-weight-code: var(--wa-font-weight-normal); - --wa-font-weight-longform: var(--wa-font-weight-normal); - --wa-font-weight-action: var(--wa-font-weight-semibold); - - --wa-line-height-condensed: 1.2; - --wa-line-height-normal: 1.6; - --wa-line-height-expanded: 2; - - --wa-link-decoration-default: none; - --wa-link-decoration-hover: none; - /* #endregion */ - - /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-space-scale: 0.875; - --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 1.75px */ - --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 3.5px */ - --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 7px */ - --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 10.5px */ - --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 14px */ - --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 21px */ - --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 28px */ - --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 35px */ - --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 42px */ - --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 56px */ - - --wa-content-spacing: var(--wa-space-l); - /* #endregion */ - - /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-style: solid; - - --wa-border-width-scale: 1; - --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem); - --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem); - --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem); - /* #endregion */ - - /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-border-radius-scale: 1; - --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem); - --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem); - --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem); - - --wa-border-radius-pill: 9999px; - --wa-border-radius-circle: 50%; - --wa-border-radius-square: 0px; - /* #endregion */ - - /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-focus-ring-style: solid; - --wa-focus-ring-width: 0.125rem; /* 2px */ - --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); - --wa-focus-ring-offset: 0; - /* #endregion */ - - /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-shadow-offset-x-scale: 0; - --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem); - --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem); - --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem); - - --wa-shadow-offset-y-scale: 0.5; - --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem); - --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem); - --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem); - - --wa-shadow-blur-scale: 0.5; - --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem); - --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem); - --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem); - - --wa-shadow-spread-scale: 0; - --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem); - --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem); - --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem); - - --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) - var(--wa-shadow-spread-s) var(--wa-color-shadow); - --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) - var(--wa-shadow-spread-m) var(--wa-color-shadow); - --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) - var(--wa-shadow-spread-l) var(--wa-color-shadow); - /* #endregion */ - - /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */ - --wa-transition-easing: ease; - --wa-transition-slow: 300ms; - --wa-transition-normal: 150ms; - --wa-transition-fast: 75ms; - /* #endregion */ - - /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */ - /* Form Controls */ - --wa-form-control-background-color: color-mix(in oklab, var(--wa-color-surface-raised), transparent); - --wa-form-control-border-color: var(--wa-color-neutral-border-normal); - --wa-form-control-border-style: var(--wa-border-style); - --wa-form-control-border-width: var(--wa-border-width-s); - --wa-form-control-border-radius: var(--wa-border-radius-m); - - --wa-form-control-activated-color: var(--wa-color-brand-fill-loud); - - --wa-form-control-label-color: var(--wa-color-text-normal); - --wa-form-control-label-font-weight: var(--wa-font-weight-semibold); - --wa-form-control-label-line-height: var(--wa-line-height-normal); - - --wa-form-control-value-color: var(--wa-color-text-normal); - --wa-form-control-value-font-weight: var(--wa-font-weight-body); - --wa-form-control-value-line-height: var(--wa-line-height-condensed); - - --wa-form-control-hint-color: var(--wa-color-text-quiet); - --wa-form-control-hint-font-weight: var(--wa-font-weight-body); - --wa-form-control-hint-line-height: var(--wa-line-height-normal); - - --wa-form-control-placeholder-color: var(--wa-color-gray-50); - - --wa-form-control-required-content: '*'; - --wa-form-control-required-content-color: inherit; - --wa-form-control-required-content-offset: -0.1em; - - --wa-form-control-padding-block: 0.75em; - --wa-form-control-padding-inline: 1em; - --wa-form-control-height: round( - calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), - 1px - ); - --wa-form-control-toggle-size: round(1.25em, 1px); - - /* Panels */ - --wa-panel-border-style: var(--wa-border-style); - --wa-panel-border-width: var(--wa-border-width-s); - --wa-panel-border-radius: var(--wa-border-radius-l); - - /* Tooltips */ - --wa-tooltip-arrow-size: 0.375rem; - - --wa-tooltip-background-color: var(--wa-color-text-normal); - - --wa-tooltip-border-radius: var(--wa-border-radius-s); - - --wa-tooltip-content-color: var(--wa-color-surface-default); - --wa-tooltip-font-size: var(--wa-font-size-s); - --wa-tooltip-line-height: var(--wa-line-height-normal); - /* #endregion */ - } -} - -@layer wa-overrides { - :root, - .wa-theme-tailspin, - .wa-light, - .wa-dark, - .wa-invert { - h1, - h2, - h3, - h4 { - letter-spacing: calc(1em * -0.03); - } - - wa-avatar { - --background-color: var(--wa-color-neutral-fill-quiet); - --text-color: var(--wa-color-neutral-on-quiet); - } - - a, - wa-badge, - wa-tag { - font-weight: var(--wa-font-weight-semibold); - } - - :is(wa-button, button, input:where([type='button'], [type='reset'], [type='submit'])):not([appearance='plain']) { - --box-shadow: var(--wa-shadow-s); - } - - wa-callout { - border-radius: var(--wa-border-radius-m); - - &::part(icon) { - opacity: 0.6; - } - } - - wa-radio, - input[type='radio'] { - --checked-icon-color: var(--wa-color-surface-default); - --checked-icon-scale: 0.4; - - &:checked, - &:state(checked)::part(control) { - background-color: var(--wa-form-control-activated-color); - } - } - - wa-switch { - --background-color: var(--wa-color-neutral-fill-normal); - --border-color: transparent; - --height: calc(var(--thumb-size) * (18 / 14)); - --thumb-color: white; - --thumb-color-checked: var(--thumb-color); - --thumb-size: 1.25em; - --thumb-shadow: var(--wa-shadow-s); - --width: calc(var(--thumb-size) * (32 / 14)); - } - - wa-tab { - color: var(--wa-color-text-quiet); - } - } -}