From bc598dad92300577b2a16daaf1e98ae1d62543d5 Mon Sep 17 00:00:00 2001 From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Date: Wed, 11 Jun 2025 11:24:40 -0400 Subject: [PATCH] Consolidate theme files (#1053) * consolidate theme files * move dimension to its own layer * touch up * fix `.wa-invert` * fix selectors and missing fonts * fix selectors (for real this time) --- .../dimension.css => dimension/blocky.css} | 6 +- .../webawesome/src/styles/dimension/flat.css | 5 + .../dimension.css => dimension/glossy.css} | 6 +- .../dimension.css => dimension/smooth.css} | 6 +- .../dimension.css => dimension/subtle.css} | 18 +- .../webawesome/src/styles/themes/active.css | 391 ++++++++++- .../src/styles/themes/active/color.css | 145 ----- .../src/styles/themes/active/overrides.css | 16 - .../src/styles/themes/active/typography.css | 13 - .../webawesome/src/styles/themes/awesome.css | 423 +++++++++++- .../src/styles/themes/awesome/color.css | 132 ---- .../src/styles/themes/awesome/overrides.css | 60 -- .../src/styles/themes/awesome/typography.css | 20 - .../src/styles/themes/brutalist.css | 453 ++++++++++++- .../src/styles/themes/brutalist/color.css | 151 ----- .../src/styles/themes/brutalist/overrides.css | 89 --- .../styles/themes/brutalist/typography.css | 16 - .../webawesome/src/styles/themes/default.css | 362 ++++++++++- .../src/styles/themes/default/color.css | 203 ------ .../src/styles/themes/default/groups.css | 64 -- .../src/styles/themes/default/outlines.css | 23 - .../src/styles/themes/default/rounding.css | 18 - .../src/styles/themes/default/shadows.css | 36 -- .../src/styles/themes/default/space.css | 22 - .../src/styles/themes/default/transitions.css | 12 - .../src/styles/themes/default/typography.css | 47 -- .../webawesome/src/styles/themes/glossy.css | 399 +++++++++++- .../src/styles/themes/glossy/color.css | 28 - .../src/styles/themes/glossy/overrides.css | 25 - .../src/styles/themes/glossy/typography.css | 17 - .../webawesome/src/styles/themes/matter.css | 611 +++++++++++++++++- .../src/styles/themes/matter/color.css | 149 ----- .../src/styles/themes/matter/overrides.css | 245 ------- .../src/styles/themes/matter/typography.css | 17 - .../webawesome/src/styles/themes/mellow.css | 405 +++++++++++- .../src/styles/themes/mellow/color.css | 102 --- .../src/styles/themes/mellow/overrides.css | 34 - .../src/styles/themes/mellow/typography.css | 15 - .../webawesome/src/styles/themes/playful.css | 417 +++++++++++- .../src/styles/themes/playful/color.css | 149 ----- .../src/styles/themes/playful/overrides.css | 39 -- .../src/styles/themes/playful/typography.css | 26 - .../webawesome/src/styles/themes/premium.css | 415 +++++++++++- .../src/styles/themes/premium/color.css | 147 ----- .../src/styles/themes/premium/overrides.css | 46 -- .../src/styles/themes/premium/typography.css | 22 - .../webawesome/src/styles/themes/shoelace.css | 493 +++++++++++++- .../src/styles/themes/shoelace/color.css | 131 ---- .../src/styles/themes/shoelace/overrides.css | 123 ---- .../src/styles/themes/shoelace/typography.css | 16 - .../webawesome/src/styles/themes/tailspin.css | 422 +++++++++++- .../src/styles/themes/tailspin/color.css | 158 ----- .../src/styles/themes/tailspin/overrides.css | 61 -- .../src/styles/themes/tailspin/typography.css | 17 - 54 files changed, 4534 insertions(+), 2932 deletions(-) rename packages/webawesome/src/styles/{themes/awesome/dimension.css => dimension/blocky.css} (98%) create mode 100644 packages/webawesome/src/styles/dimension/flat.css rename packages/webawesome/src/styles/{themes/glossy/dimension.css => dimension/glossy.css} (98%) rename packages/webawesome/src/styles/{themes/playful/dimension.css => dimension/smooth.css} (98%) rename packages/webawesome/src/styles/{themes/active/dimension.css => dimension/subtle.css} (83%) delete mode 100644 packages/webawesome/src/styles/themes/active/color.css delete mode 100644 packages/webawesome/src/styles/themes/active/overrides.css delete mode 100644 packages/webawesome/src/styles/themes/active/typography.css delete mode 100644 packages/webawesome/src/styles/themes/awesome/color.css delete mode 100644 packages/webawesome/src/styles/themes/awesome/overrides.css delete mode 100644 packages/webawesome/src/styles/themes/awesome/typography.css delete mode 100644 packages/webawesome/src/styles/themes/brutalist/color.css delete mode 100644 packages/webawesome/src/styles/themes/brutalist/overrides.css delete mode 100644 packages/webawesome/src/styles/themes/brutalist/typography.css delete mode 100644 packages/webawesome/src/styles/themes/default/color.css delete mode 100644 packages/webawesome/src/styles/themes/default/groups.css delete mode 100644 packages/webawesome/src/styles/themes/default/outlines.css delete mode 100644 packages/webawesome/src/styles/themes/default/rounding.css delete mode 100644 packages/webawesome/src/styles/themes/default/shadows.css delete mode 100644 packages/webawesome/src/styles/themes/default/space.css delete mode 100644 packages/webawesome/src/styles/themes/default/transitions.css delete mode 100644 packages/webawesome/src/styles/themes/default/typography.css delete mode 100644 packages/webawesome/src/styles/themes/glossy/color.css delete mode 100644 packages/webawesome/src/styles/themes/glossy/overrides.css delete mode 100644 packages/webawesome/src/styles/themes/glossy/typography.css delete mode 100644 packages/webawesome/src/styles/themes/matter/color.css delete mode 100644 packages/webawesome/src/styles/themes/matter/overrides.css delete mode 100644 packages/webawesome/src/styles/themes/matter/typography.css delete mode 100644 packages/webawesome/src/styles/themes/mellow/color.css delete mode 100644 packages/webawesome/src/styles/themes/mellow/overrides.css delete mode 100644 packages/webawesome/src/styles/themes/mellow/typography.css delete mode 100644 packages/webawesome/src/styles/themes/playful/color.css delete mode 100644 packages/webawesome/src/styles/themes/playful/overrides.css delete mode 100644 packages/webawesome/src/styles/themes/playful/typography.css delete mode 100644 packages/webawesome/src/styles/themes/premium/color.css delete mode 100644 packages/webawesome/src/styles/themes/premium/overrides.css delete mode 100644 packages/webawesome/src/styles/themes/premium/typography.css delete mode 100644 packages/webawesome/src/styles/themes/shoelace/color.css delete mode 100644 packages/webawesome/src/styles/themes/shoelace/overrides.css delete mode 100644 packages/webawesome/src/styles/themes/shoelace/typography.css delete mode 100644 packages/webawesome/src/styles/themes/tailspin/color.css delete mode 100644 packages/webawesome/src/styles/themes/tailspin/overrides.css delete mode 100644 packages/webawesome/src/styles/themes/tailspin/typography.css diff --git a/packages/webawesome/src/styles/themes/awesome/dimension.css b/packages/webawesome/src/styles/dimension/blocky.css similarity index 98% rename from packages/webawesome/src/styles/themes/awesome/dimension.css rename to packages/webawesome/src/styles/dimension/blocky.css index 6bd3964ac..1a768fd46 100644 --- a/packages/webawesome/src/styles/themes/awesome/dimension.css +++ b/packages/webawesome/src/styles/dimension/blocky.css @@ -1,7 +1,5 @@ -@layer wa-theme { - :where(:root), - :host, - .wa-theme-awesome { +@layer wa-dimension { + :where(:root) { wa-button, button, input:where([type='button'], [type='reset'], [type='submit']) { diff --git a/packages/webawesome/src/styles/dimension/flat.css b/packages/webawesome/src/styles/dimension/flat.css new file mode 100644 index 000000000..735b156db --- /dev/null +++ b/packages/webawesome/src/styles/dimension/flat.css @@ -0,0 +1,5 @@ +@layer wa-dimension { + :where(:root) { + /* Nothing to see here */ + } +} diff --git a/packages/webawesome/src/styles/themes/glossy/dimension.css b/packages/webawesome/src/styles/dimension/glossy.css similarity index 98% rename from packages/webawesome/src/styles/themes/glossy/dimension.css rename to packages/webawesome/src/styles/dimension/glossy.css index 212d4ab51..93da204fd 100644 --- a/packages/webawesome/src/styles/themes/glossy/dimension.css +++ b/packages/webawesome/src/styles/dimension/glossy.css @@ -1,7 +1,5 @@ -@layer wa-theme { - :where(:root), - :host, - .wa-theme-glossy { +@layer wa-dimension { + :where(:root) { --wa-theme-glossy-inner-shine: inset 0 0.125rem 0 0 rgb(255 255 255 / 0.3); --wa-theme-glossy-top-highlight: inset 0 0.25rem 0 0 rgb(255 255 255 / 0.1); --wa-theme-glossy-upper-tint: inset 0 1.25em 0 0 rgb(255 255 255 / 0.1); diff --git a/packages/webawesome/src/styles/themes/playful/dimension.css b/packages/webawesome/src/styles/dimension/smooth.css similarity index 98% rename from packages/webawesome/src/styles/themes/playful/dimension.css rename to packages/webawesome/src/styles/dimension/smooth.css index 9e8fa9adb..087638d5e 100644 --- a/packages/webawesome/src/styles/themes/playful/dimension.css +++ b/packages/webawesome/src/styles/dimension/smooth.css @@ -1,7 +1,5 @@ -@layer wa-theme { - :where(:root), - :host, - .wa-theme-playful { +@layer wa-dimension { + :where(:root) { button, input:where([type='button'], [type='reset'], [type='submit']), wa-button { diff --git a/packages/webawesome/src/styles/themes/active/dimension.css b/packages/webawesome/src/styles/dimension/subtle.css similarity index 83% rename from packages/webawesome/src/styles/themes/active/dimension.css rename to packages/webawesome/src/styles/dimension/subtle.css index 793d4950a..165cfc0ce 100644 --- a/packages/webawesome/src/styles/themes/active/dimension.css +++ b/packages/webawesome/src/styles/dimension/subtle.css @@ -1,12 +1,10 @@ -@layer wa-theme { - :where(:root), - :host, - .wa-theme-active { - --wa-theme-active-shadow-pop-out: +@layer wa-dimension { + :where(:root) { + --wa-subtle-shadow-pop-out: inset 0 0.0625rem 0 0.0625rem rgb(255 255 255 / 0.15) /* shine */, inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */, inset 0 -0.125rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */; - --wa-theme-active-shadow-punch-in: + --wa-subtle-shadow-punch-in: inset 0 0 0 0 transparent /* shine */, inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.15) /* inner highlight */, inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.15) /* inner shadow */; @@ -18,7 +16,7 @@ &::part(base) { border-width: 0px; box-shadow: - var(--wa-theme-active-shadow-pop-out), + var(--wa-subtle-shadow-pop-out), inset 0 0 0 var(--border-width) var(--border-color, var(--background-color, transparent)); padding-inline: calc(var(--wa-form-control-padding-inline) + var(--border-width)); } @@ -27,14 +25,14 @@ &:where(:not(wa-button)), &::part(base) { box-shadow: - var(--wa-theme-active-shadow-punch-in), + var(--wa-subtle-shadow-punch-in), inset 0 0 0 var(--border-width) var(--border-color-active, var(--background-color-active, transparent)); } } } wa-card { - box-shadow: var(--wa-theme-active-shadow-pop-out); + box-shadow: var(--wa-subtle-shadow-pop-out); } input:not([type='button'], [type='reset'], [type='submit'], :checked), @@ -51,7 +49,7 @@ wa-slider::part(thumb), wa-switch::part(thumb) { - box-shadow: var(--wa-theme-active-shadow-pop-out); + box-shadow: var(--wa-subtle-shadow-pop-out); } wa-progress-bar { diff --git a/packages/webawesome/src/styles/themes/active.css b/packages/webawesome/src/styles/themes/active.css index bb306e869..dd4ec7563 100644 --- a/packages/webawesome/src/styles/themes/active.css +++ b/packages/webawesome/src/styles/themes/active.css @@ -1,29 +1,378 @@ -@import url('active/color.css'); -@import url('default/space.css'); -@import url('default/outlines.css'); -@import url('active/typography.css'); -@import url('default/rounding.css'); -@import url('default/shadows.css'); -@import url('default/transitions.css'); -@import url('default/groups.css'); -@import url('active/dimension.css'); -@import url('active/overrides.css'); +@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 { - :where(:root), - :host, + :root, .wa-theme-active, - .wa-dark, .wa-light, - .wa-invert { - /** - * Rounding - */ - --wa-border-radius-scale: 2; + .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); - /** - * Component Groups - */ --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/active/color.css b/packages/webawesome/src/styles/themes/active/color.css deleted file mode 100644 index c6873c449..000000000 --- a/packages/webawesome/src/styles/themes/active/color.css +++ /dev/null @@ -1,145 +0,0 @@ -@import url('../../color/rudimentary.css'); -@import url('../default/color.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'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-active, - .wa-light, - .wa-dark .wa-invert { - color-scheme: light; - color: var(--wa-color-text-normal); - - /** - * Foundational Colors - */ - --wa-color-text-normal: var(--wa-color-neutral-05); - --wa-color-text-link: var(--wa-color-brand-40); - - --wa-color-focus: var(--wa-color-blue-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; - } - - .wa-dark, - .wa-invert { - /** - * Foundational Colors - */ - --wa-color-surface-lowered: black; - - --wa-color-text-link: var(--wa-color-brand-70); - - /** - * 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; - } -} diff --git a/packages/webawesome/src/styles/themes/active/overrides.css b/packages/webawesome/src/styles/themes/active/overrides.css deleted file mode 100644 index ddc316df2..000000000 --- a/packages/webawesome/src/styles/themes/active/overrides.css +++ /dev/null @@ -1,16 +0,0 @@ -@layer wa-theme { - :where(:root), - :host, - .wa-theme-active { - 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/active/typography.css b/packages/webawesome/src/styles/themes/active/typography.css deleted file mode 100644 index fe0a17e54..000000000 --- a/packages/webawesome/src/styles/themes/active/typography.css +++ /dev/null @@ -1,13 +0,0 @@ -@import url('../default/typography.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 { - :where(:root), - :host, - .wa-theme-active { - --wa-font-family-body: 'Inter', sans-serif; - - --wa-font-weight-semibold: 550; - --wa-font-weight-bold: 650; - } -} diff --git a/packages/webawesome/src/styles/themes/awesome.css b/packages/webawesome/src/styles/themes/awesome.css index bc061efa3..0ef9d22a3 100644 --- a/packages/webawesome/src/styles/themes/awesome.css +++ b/packages/webawesome/src/styles/themes/awesome.css @@ -1,55 +1,422 @@ -@import url('awesome/color.css'); -@import url('default/space.css'); -@import url('default/outlines.css'); -@import url('awesome/typography.css'); -@import url('default/rounding.css'); -@import url('default/shadows.css'); -@import url('default/transitions.css'); -@import url('default/groups.css'); -@import url('awesome/dimension.css'); -@import url('awesome/overrides.css'); +@import url('../color/bright.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('../dimension/blocky.css'); +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap'); @layer wa-theme { - :where(:root), - :host, + :root, .wa-theme-awesome, - .wa-dark, .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-20); + --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-70); + --wa-color-brand-border-quiet: var(--wa-color-brand-70); + --wa-color-brand-border-normal: var(--wa-color-brand-50); + --wa-color-brand-border-loud: var(--wa-color-brand-30); + --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: var(--wa-color-text-normal); + + --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-70); + --wa-color-success-border-normal: var(--wa-color-success-50); + --wa-color-success-border-loud: var(--wa-color-success-30); + --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: var(--wa-color-text-normal); + + --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-70); + --wa-color-warning-border-normal: var(--wa-color-warning-50); + --wa-color-warning-border-loud: var(--wa-color-warning-30); + --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: var(--wa-color-text-normal); + + --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-70); + --wa-color-danger-border-normal: var(--wa-color-danger-50); + --wa-color-danger-border-loud: var(--wa-color-danger-30); + --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: var(--wa-color-text-normal); + + --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-70); + --wa-color-neutral-border-normal: var(--wa-color-neutral-50); + --wa-color-neutral-border-loud: var(--wa-color-neutral-30); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-40); + --wa-color-neutral-on-normal: var(--wa-color-neutral-40); + --wa-color-neutral-on-loud: var(--wa-color-text-normal); + /* #endregion */ + } + + .wa-dark, .wa-invert { - /** - * Borders - */ + /* #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-50); + --wa-color-brand-border-quiet: var(--wa-color-brand-30); + --wa-color-brand-border-normal: var(--wa-color-brand-50); + --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-80); + --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-30); + --wa-color-success-border-normal: var(--wa-color-success-50); + --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-80); + --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-70); + --wa-color-warning-border-quiet: var(--wa-color-warning-30); + --wa-color-warning-border-normal: var(--wa-color-warning-50); + --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-80); + --wa-color-warning-on-loud: var(--wa-color-warning-05); + + --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-30); + --wa-color-danger-border-normal: var(--wa-color-danger-50); + --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-80); + --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-50); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-30); + --wa-color-neutral-border-normal: var(--wa-color-neutral-50); + --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: white; + /* #endregion */ + } + + :root, + .wa-theme-awesome, + .wa-light, + .wa-dark, + .wa-invert { + /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + --wa-font-family-body: 'Quicksand', 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: 400; + --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-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-bold); + + --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: 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 */ - /** - * Rounding - */ + /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */ --wa-border-radius-scale: 1.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); - /** - * Shadows - */ --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: 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; + --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); - /** - * Transitions - */ + --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-in; + --wa-transition-slow: 300ms; + --wa-transition-normal: 150ms; + --wa-transition-fast: 75ms; + /* #endregion */ - /** - * Component Groups - */ + /* #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-neutral-border-loud); --wa-form-control-label-color: var(--wa-color-text-normal); --wa-form-control-label-font-weight: var(--wa-font-weight-bold); --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: 1em; --wa-form-control-padding-inline: 1.25em; + --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-awesome, + .wa-light, + .wa-dark, + .wa-invert { + :is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button):not( + [appearance='plain'], + .wa-plain + ) { + &[appearance~='outlined'], + &.wa-outlined { + --border-color: var(--text-color); + + .wa-dark &, + .wa-invert & { + --border-color: var(--wa-color-border-quiet); + --text-color-active: var(--wa-color-on-quiet); + } + } + } + + wa-badge { + border-radius: var(--wa-border-radius-m); + font-weight: var(--wa-font-weight-bold); + text-transform: uppercase; + } + + wa-callout { + &:is([appearance~='outlined']) { + border-color: var(--wa-color-border-normal); + } + &:not([appearance~='accent']) { + --icon-color: var(--wa-color-border-normal); + } + } + + wa-card { + background-color: var(--wa-color-surface-raised); + } + wa-card::part(header) { + border-bottom-style: dotted; + } + wa-card::part(footer) { + border-top-style: dotted; + } + + input[type='checkbox'], + wa-checkbox, + wa-tree-item::part(checkbox__control) { + --checked-icon-color: var(--wa-color-surface-default); + } + + wa-switch { + --height: 1.5em; + } + + wa-tag { + font-weight: var(--wa-font-weight-bold); + } } } diff --git a/packages/webawesome/src/styles/themes/awesome/color.css b/packages/webawesome/src/styles/themes/awesome/color.css deleted file mode 100644 index cdccdf7f7..000000000 --- a/packages/webawesome/src/styles/themes/awesome/color.css +++ /dev/null @@ -1,132 +0,0 @@ -@import url('../../color/bright.css'); -@import url('../default/color.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'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-awesome, - .wa-light, - .wa-dark .wa-invert { - /** - * Foundational Colors - */ - --wa-color-text-normal: var(--wa-color-neutral-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-70); - --wa-color-brand-border-quiet: var(--wa-color-brand-70); - --wa-color-brand-border-normal: var(--wa-color-brand-50); - --wa-color-brand-border-loud: var(--wa-color-brand-30); - --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: var(--wa-color-text-normal); - - --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-70); - --wa-color-success-border-normal: var(--wa-color-success-50); - --wa-color-success-border-loud: var(--wa-color-success-30); - --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: var(--wa-color-text-normal); - - --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-70); - --wa-color-warning-border-normal: var(--wa-color-warning-50); - --wa-color-warning-border-loud: var(--wa-color-warning-30); - --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: var(--wa-color-text-normal); - - --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-70); - --wa-color-danger-border-normal: var(--wa-color-danger-50); - --wa-color-danger-border-loud: var(--wa-color-danger-30); - --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: var(--wa-color-text-normal); - - --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-70); - --wa-color-neutral-border-normal: var(--wa-color-neutral-50); - --wa-color-neutral-border-loud: var(--wa-color-neutral-30); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-40); - --wa-color-neutral-on-normal: var(--wa-color-neutral-40); - --wa-color-neutral-on-loud: var(--wa-color-text-normal); - } - - .wa-dark, - .wa-invert { - color-scheme: dark; - color: var(--wa-color-text-normal); - - /** - * 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-30); - --wa-color-brand-border-normal: var(--wa-color-brand-50); - --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-80); - --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-30); - --wa-color-success-border-normal: var(--wa-color-success-50); - --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-80); - --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-70); - --wa-color-warning-border-quiet: var(--wa-color-warning-30); - --wa-color-warning-border-normal: var(--wa-color-warning-50); - --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-80); - --wa-color-warning-on-loud: var(--wa-color-warning-05); - - --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-30); - --wa-color-danger-border-normal: var(--wa-color-danger-50); - --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-80); - --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-50); - --wa-color-neutral-border-quiet: var(--wa-color-neutral-30); - --wa-color-neutral-border-normal: var(--wa-color-neutral-50); - --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: white; - } -} diff --git a/packages/webawesome/src/styles/themes/awesome/overrides.css b/packages/webawesome/src/styles/themes/awesome/overrides.css deleted file mode 100644 index 0792baed7..000000000 --- a/packages/webawesome/src/styles/themes/awesome/overrides.css +++ /dev/null @@ -1,60 +0,0 @@ -@layer wa-theme { - :where(:root), - :host, - .wa-theme-awesome { - :is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button):not( - [appearance='plain'], - .wa-plain - ) { - &[appearance~='outlined'], - &.wa-outlined { - --border-color: var(--text-color); - - .wa-dark &, - .wa-invert & { - --border-color: var(--wa-color-border-quiet); - --text-color-active: var(--wa-color-on-quiet); - } - } - } - - wa-badge { - border-radius: var(--wa-border-radius-m); - font-weight: var(--wa-font-weight-bold); - text-transform: uppercase; - } - - wa-callout { - &:is([appearance~='outlined']) { - border-color: var(--wa-color-border-normal); - } - &:not([appearance~='accent']) { - --icon-color: var(--wa-color-border-normal); - } - } - - wa-card { - background-color: var(--wa-color-surface-raised); - } - wa-card::part(header) { - border-bottom-style: dotted; - } - wa-card::part(footer) { - border-top-style: dotted; - } - - input[type='checkbox'], - wa-checkbox, - wa-tree-item::part(checkbox__control) { - --checked-icon-color: var(--wa-color-surface-default); - } - - wa-switch { - --height: 1.5em; - } - - wa-tag { - font-weight: var(--wa-font-weight-bold); - } - } -} diff --git a/packages/webawesome/src/styles/themes/awesome/typography.css b/packages/webawesome/src/styles/themes/awesome/typography.css deleted file mode 100644 index 02d376203..000000000 --- a/packages/webawesome/src/styles/themes/awesome/typography.css +++ /dev/null @@ -1,20 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap'); -@import url('../default/typography.css'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-awesome { - /** - * Typography - */ - --wa-font-family-body: Quicksand, sans-serif; - - --wa-font-weight-light: 400; - --wa-font-weight-normal: 500; - --wa-font-weight-semibold: 600; - --wa-font-weight-bold: 700; - - --wa-font-weight-action: var(--wa-font-weight-bold); - } -} diff --git a/packages/webawesome/src/styles/themes/brutalist.css b/packages/webawesome/src/styles/themes/brutalist.css index fb01501ba..642c06daa 100644 --- a/packages/webawesome/src/styles/themes/brutalist.css +++ b/packages/webawesome/src/styles/themes/brutalist.css @@ -1,45 +1,440 @@ -@import url('brutalist/color.css'); -@import url('default/space.css'); -@import url('default/outlines.css'); -@import url('brutalist/typography.css'); -@import url('default/rounding.css'); -@import url('default/shadows.css'); -@import url('default/transitions.css'); -@import url('default/groups.css'); -@import url('brutalist/overrides.css'); +@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 { - :where(:root), - :host, + :root, .wa-theme-brutalist, - .wa-dark, .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 { - /** - * Spacing - */ + /* #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; - /** - * Borders - */ --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 */ - /** - * Rounding - */ + /* #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); - /** - * Shadows - */ - --wa-shadow-blur-scale: 0; + --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-y-scale: 4; + --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); - /** - * Component Groups - */ --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/brutalist/color.css b/packages/webawesome/src/styles/themes/brutalist/color.css deleted file mode 100644 index 11c018941..000000000 --- a/packages/webawesome/src/styles/themes/brutalist/color.css +++ /dev/null @@ -1,151 +0,0 @@ -@import url('../../color/default.css'); -@import url('../default/color.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'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-brutalist, - .wa-light, - .wa-dark .wa-invert { - /** - * Foundational Colors - */ - --wa-color-surface-border: var(--wa-color-neutral-10); - - --wa-color-text-link: var(--wa-color-neutral-40); - - --wa-color-shadow: rgb(0 0 0 / 0.2); - - --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; - } - - .wa-dark, - .wa-invert { - 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-link: var(--wa-color-neutral-70); - - --wa-color-shadow: rgb(0 0 0 / 0.5); - - /** - * 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); - } -} diff --git a/packages/webawesome/src/styles/themes/brutalist/overrides.css b/packages/webawesome/src/styles/themes/brutalist/overrides.css deleted file mode 100644 index 017e525f1..000000000 --- a/packages/webawesome/src/styles/themes/brutalist/overrides.css +++ /dev/null @@ -1,89 +0,0 @@ -@layer wa-theme { - :where(:root), - :host, - .wa-theme-brutalist { - 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 { - border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border); - box-shadow: var(--wa-shadow-s); - } - - :is( - wa-input::part(input), - wa-select::part(form-control-input), - wa-textarea::part(form-control-input), - 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/brutalist/typography.css b/packages/webawesome/src/styles/themes/brutalist/typography.css deleted file mode 100644 index 0a22f44d9..000000000 --- a/packages/webawesome/src/styles/themes/brutalist/typography.css +++ /dev/null @@ -1,16 +0,0 @@ -@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'); -@import url('../default/typography.css'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-brutalist { - --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-weight-bold: 700; - - --wa-font-weight-heading: var(--wa-font-weight-semibold); - } -} diff --git a/packages/webawesome/src/styles/themes/default.css b/packages/webawesome/src/styles/themes/default.css index 7df92cc71..fd431de17 100644 --- a/packages/webawesome/src/styles/themes/default.css +++ b/packages/webawesome/src/styles/themes/default.css @@ -1,13 +1,357 @@ @import url('../color/default.css'); -@import url('default/color.css'); -@import url('default/space.css'); -@import url('default/outlines.css'); -@import url('default/typography.css'); -@import url('default/rounding.css'); -@import url('default/shadows.css'); -@import url('default/transitions.css'); -@import url('default/groups.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'); @layer wa-theme { - /* Nothing yet */ + :root, + .wa-theme-default, + .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-50); + --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-50); + --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-50); + --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-50); + --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-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-default, + .wa-light, + .wa-dark, + .wa-invert { + /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + --wa-font-family-body: ui-sans-serif, system-ui, 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: 500; + --wa-font-weight-bold: 600; + + --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; + --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-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 */ + } } diff --git a/packages/webawesome/src/styles/themes/default/color.css b/packages/webawesome/src/styles/themes/default/color.css deleted file mode 100644 index 7d8769fae..000000000 --- a/packages/webawesome/src/styles/themes/default/color.css +++ /dev/null @@ -1,203 +0,0 @@ -@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'); - -@layer wa-theme { - /** - * Foundational Colors and Semantic Colors - */ - :where(:root), - :host, - .wa-theme-default, - :where([class^='wa-theme-'], [class*=' wa-theme-']), - .wa-light, - .wa-dark .wa-invert { - color-scheme: light; - color: var(--wa-color-text-normal); - - /** - * Foundational Colors - */ - - /* Surfaces are background layers that other content rests on. - * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */ - --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); - - /* Text colors are used for standard text elements. - * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */ - --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); - - /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */ - --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); - - /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties. - * By default, the opacity of your shadow color is tied to the blur of shadows in your theme. - * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */ - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), - transparent - ); - - /* Focus color provides the default color of the focus ring for predictable keyboard navigation. - * Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */ - --wa-color-focus: var(--wa-color-brand-60); - - /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */ - --wa-color-mix-hover: black 10%; - --wa-color-mix-active: black 20%; - - /** - * Semantic Colors - * Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results. - * Within these groups, each color specifies a role - - * * Fill for background colors or areas larger than a few pixels - * * Border for borders, dividers, and other stroke-like elements - * * On for content displayed on a fill with the corresponding attention - * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most. - */ - --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-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-50); - --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-50); - --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-50); - --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; - } - - .wa-dark, - .wa-invert { - 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); - - /* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */ - --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); - } -} diff --git a/packages/webawesome/src/styles/themes/default/groups.css b/packages/webawesome/src/styles/themes/default/groups.css deleted file mode 100644 index ac11fd38e..000000000 --- a/packages/webawesome/src/styles/themes/default/groups.css +++ /dev/null @@ -1,64 +0,0 @@ -@layer wa-theme { - /** - * Component Groups - */ - :where(:root), - :host, - .wa-theme-default, - :where([class^='wa-theme-'], [class*=' wa-theme-']), - .wa-light, - .wa-dark, - .wa-invert { - /* 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); - } -} diff --git a/packages/webawesome/src/styles/themes/default/outlines.css b/packages/webawesome/src/styles/themes/default/outlines.css deleted file mode 100644 index 05c613f08..000000000 --- a/packages/webawesome/src/styles/themes/default/outlines.css +++ /dev/null @@ -1,23 +0,0 @@ -@layer wa-theme { - /** - * Borders and outlines - */ - :where(:root), - :host { - --wa-border-style: solid; - - /* A multiplier is provided to uniformly increase or decrease all border widths. */ - --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); - - /** - * 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 */ - } -} diff --git a/packages/webawesome/src/styles/themes/default/rounding.css b/packages/webawesome/src/styles/themes/default/rounding.css deleted file mode 100644 index 5ee063589..000000000 --- a/packages/webawesome/src/styles/themes/default/rounding.css +++ /dev/null @@ -1,18 +0,0 @@ -@layer wa-theme { - /** -* Rounding -*/ - :where(:root), - :host { - /* A multiplier is provided to uniformly increase or decrease all border radii. */ - --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); - - /* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */ - --wa-border-radius-pill: 9999px; - --wa-border-radius-circle: 50%; - --wa-border-radius-square: 0px; - } -} diff --git a/packages/webawesome/src/styles/themes/default/shadows.css b/packages/webawesome/src/styles/themes/default/shadows.css deleted file mode 100644 index 7f3bc055f..000000000 --- a/packages/webawesome/src/styles/themes/default/shadows.css +++ /dev/null @@ -1,36 +0,0 @@ -@layer wa-theme { - /** - * Shadows - * Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities. - * A multiplier is provided for each shadow quality to uniformly scale all related values. - */ - :where(:root), - :host { - --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); - } -} diff --git a/packages/webawesome/src/styles/themes/default/space.css b/packages/webawesome/src/styles/themes/default/space.css deleted file mode 100644 index 125b90cdb..000000000 --- a/packages/webawesome/src/styles/themes/default/space.css +++ /dev/null @@ -1,22 +0,0 @@ -@layer wa-theme { - /** - * Spacing - */ - :where(:root), - :host { - /* A multiplier is provided to uniformly increase or decrease all spacing. */ - --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); - } -} diff --git a/packages/webawesome/src/styles/themes/default/transitions.css b/packages/webawesome/src/styles/themes/default/transitions.css deleted file mode 100644 index e7cbf6379..000000000 --- a/packages/webawesome/src/styles/themes/default/transitions.css +++ /dev/null @@ -1,12 +0,0 @@ -@layer wa-theme { - /** - * Transitions - */ - :where(:root), - :host { - --wa-transition-easing: ease; - --wa-transition-slow: 300ms; - --wa-transition-normal: 150ms; - --wa-transition-fast: 75ms; - } -} diff --git a/packages/webawesome/src/styles/themes/default/typography.css b/packages/webawesome/src/styles/themes/default/typography.css deleted file mode 100644 index 4847b2c77..000000000 --- a/packages/webawesome/src/styles/themes/default/typography.css +++ /dev/null @@ -1,47 +0,0 @@ -@layer wa-theme { - /** - * Typography - */ - :where(:root), - :where([class^='wa-theme-'], [class*=' wa-theme-']), - :host { - --wa-font-family-body: ui-sans-serif, system-ui, 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. - * A multiplier is provided to uniformly increase or decrease all font sizes. */ - --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-bold); - --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; - } -} diff --git a/packages/webawesome/src/styles/themes/glossy.css b/packages/webawesome/src/styles/themes/glossy.css index 172835aca..7839d1599 100644 --- a/packages/webawesome/src/styles/themes/glossy.css +++ b/packages/webawesome/src/styles/themes/glossy.css @@ -1,34 +1,387 @@ -@import url('glossy/color.css'); -@import url('default/space.css'); -@import url('default/outlines.css'); -@import url('glossy/typography.css'); -@import url('default/rounding.css'); -@import url('default/shadows.css'); -@import url('default/transitions.css'); -@import url('default/groups.css'); -@import url('glossy/dimension.css'); -@import url('glossy/overrides.css'); +@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 { - :where(:root), - :host, - .wa-theme-mellow, - .wa-dark, + :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 { - /** - * Spacing - */ + /* #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 */ - /** - * Rounding - */ + --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); - /** - * Shadows - */ --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/glossy/color.css b/packages/webawesome/src/styles/themes/glossy/color.css deleted file mode 100644 index 9c9b3e06b..000000000 --- a/packages/webawesome/src/styles/themes/glossy/color.css +++ /dev/null @@ -1,28 +0,0 @@ -@import url('../../color/elegant.css'); -@import url('../default/color.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'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-glossy, - .wa-light, - .wa-dark .wa-invert { - --wa-color-brand-fill-loud: var(--wa-color-brand-40); - --wa-color-success-fill-loud: var(--wa-color-success-40); - --wa-color-warning-fill-loud: var(--wa-color-warning-40); - --wa-color-danger-fill-loud: var(--wa-color-danger-40); - } - - .wa-dark, - .wa-invert { - --wa-color-brand-fill-loud: var(--wa-color-brand-40); - --wa-color-success-fill-loud: var(--wa-color-success-40); - --wa-color-warning-fill-loud: var(--wa-color-warning-40); - --wa-color-danger-fill-loud: var(--wa-color-danger-40); - } -} diff --git a/packages/webawesome/src/styles/themes/glossy/overrides.css b/packages/webawesome/src/styles/themes/glossy/overrides.css deleted file mode 100644 index 55089c8e9..000000000 --- a/packages/webawesome/src/styles/themes/glossy/overrides.css +++ /dev/null @@ -1,25 +0,0 @@ -@layer wa-theme { - :where(:root), - :host, - .wa-theme-glossy { - 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/glossy/typography.css b/packages/webawesome/src/styles/themes/glossy/typography.css deleted file mode 100644 index 3634943f6..000000000 --- a/packages/webawesome/src/styles/themes/glossy/typography.css +++ /dev/null @@ -1,17 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap'); -@import url('../default/typography.css'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-glossy { - --wa-font-family-body: 'Figtree', sans-serif; - - --wa-font-weight-semibold: 600; - --wa-font-weight-bold: 800; - - --wa-line-height-condensed: 1.35; - --wa-line-height-normal: 1.8; - --wa-line-height-expanded: 2.25; - } -} diff --git a/packages/webawesome/src/styles/themes/matter.css b/packages/webawesome/src/styles/themes/matter.css index 270c4a7ed..11b8241d0 100644 --- a/packages/webawesome/src/styles/themes/matter.css +++ b/packages/webawesome/src/styles/themes/matter.css @@ -1,44 +1,599 @@ -@import url('matter/color.css'); -@import url('default/space.css'); -@import url('default/outlines.css'); -@import url('matter/typography.css'); -@import url('default/rounding.css'); -@import url('default/shadows.css'); -@import url('default/transitions.css'); -@import url('default/groups.css'); -@import url('matter/overrides.css'); +@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 { - :where(:root), - :host, + :root, .wa-theme-matter, - .wa-dark, .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 { - /** - * Rounding - */ + /* #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); - /** - * Shadows - */ - --wa-shadow-blur-scale: 1.25; --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); - /** - * Focus - */ - --wa-focus-ring-width: 0.125rem; - --wa-focus-ring-offset: 0rem; + --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 */ - /** - * Component Groups - */ + /* #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-label-font-weight: var(--wa-font-weight-normal); + --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/matter/color.css b/packages/webawesome/src/styles/themes/matter/color.css deleted file mode 100644 index 5bb36424f..000000000 --- a/packages/webawesome/src/styles/themes/matter/color.css +++ /dev/null @@ -1,149 +0,0 @@ -@import url('../../color/mild.css'); -@import url('../default/color.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'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-matter, - .wa-light, - .wa-dark .wa-invert { - color-scheme: light; - color: var(--wa-color-text-normal); - - /** - * Foundational Colors - */ - - --wa-color-surface-raised: var(--wa-color-brand-95); - --wa-color-surface-lowered: var(--wa-color-neutral-90); - - --wa-color-text-link: var(--wa-color-brand-40); - - --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; - } - - .wa-dark, - .wa-invert { - /** - * Foundational Colors - */ - --wa-color-text-link: var(--wa-color-brand-70); - --wa-color-focus: var(--wa-color-brand-60); - - /** - * 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); - } -} diff --git a/packages/webawesome/src/styles/themes/matter/overrides.css b/packages/webawesome/src/styles/themes/matter/overrides.css deleted file mode 100644 index 1d3181a8e..000000000 --- a/packages/webawesome/src/styles/themes/matter/overrides.css +++ /dev/null @@ -1,245 +0,0 @@ -@layer wa-theme { - /** - * Component Styles - */ - @property --wa-ripple-progress { - syntax: ''; - initial-value: 0; - inherits: false; - } - - :where(:root), - :host, - .wa-theme-matter { - --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/matter/typography.css b/packages/webawesome/src/styles/themes/matter/typography.css deleted file mode 100644 index a16cd449d..000000000 --- a/packages/webawesome/src/styles/themes/matter/typography.css +++ /dev/null @@ -1,17 +0,0 @@ -@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'); -@import url('../default/typography.css'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-matter { - --wa-font-family-body: 'Wix Madefor Text', sans-serif; - --wa-font-family-code: 'Roboto Mono', monospace; - --wa-font-family-longform: 'Roboto Serif', serif; - - --wa-font-weight-bold: 700; - --wa-font-weight-heading: var(--wa-font-weight-semibold); - - --wa-link-decoration-default: underline; - } -} diff --git a/packages/webawesome/src/styles/themes/mellow.css b/packages/webawesome/src/styles/themes/mellow.css index de26f5d7b..1d58af45e 100644 --- a/packages/webawesome/src/styles/themes/mellow.css +++ b/packages/webawesome/src/styles/themes/mellow.css @@ -1,43 +1,392 @@ -@import url('mellow/color.css'); -@import url('default/space.css'); -@import url('default/outlines.css'); -@import url('mellow/typography.css'); -@import url('default/rounding.css'); -@import url('default/shadows.css'); -@import url('default/transitions.css'); -@import url('default/groups.css'); -@import url('mellow/overrides.css'); +@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 { - :where(:root), - :host, + :root, .wa-theme-mellow, - .wa-dark, .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 { - /** - * Spacing - */ + /* #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; - /** - * Borders - */ --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 */ - /** - * Focus - */ - --wa-focus-ring-width: 0.25rem; + /* #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); - /** - * Shadows - */ --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); - /** - * Component Groups - */ --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/mellow/color.css b/packages/webawesome/src/styles/themes/mellow/color.css deleted file mode 100644 index 8c96f6cda..000000000 --- a/packages/webawesome/src/styles/themes/mellow/color.css +++ /dev/null @@ -1,102 +0,0 @@ -@import url('../../color/natural.css'); -@import url('../default/color.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'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-mellow, - .wa-light, - .wa-dark .wa-invert { - 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-focus: var(--wa-color-brand-50); - - /** - * 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; - } - - .wa-dark, - .wa-invert { - /** - * Foundational Colors - */ - --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-brand-70); - - /** - * Semantic Colors - */ - --wa-color-neutral-fill-loud: var(--wa-color-neutral-50); - --wa-color-neutral-on-loud: white; - } -} diff --git a/packages/webawesome/src/styles/themes/mellow/overrides.css b/packages/webawesome/src/styles/themes/mellow/overrides.css deleted file mode 100644 index 91fe75e2e..000000000 --- a/packages/webawesome/src/styles/themes/mellow/overrides.css +++ /dev/null @@ -1,34 +0,0 @@ -@layer wa-theme { - /** - * Component Styles - */ - :where(:root), - :host, - .wa-theme-mellow { - 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/mellow/typography.css b/packages/webawesome/src/styles/themes/mellow/typography.css deleted file mode 100644 index e52cc61c3..000000000 --- a/packages/webawesome/src/styles/themes/mellow/typography.css +++ /dev/null @@ -1,15 +0,0 @@ -@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'); -@import url('../default/typography.css'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-mellow { - --wa-font-family-body: 'Mulish', sans-serif; - --wa-font-family-heading: 'Lora', serif; - --wa-font-family-longform: 'Lora', serif; - - --wa-font-weight-semibold: 600; - --wa-font-weight-bold: 700; - } -} diff --git a/packages/webawesome/src/styles/themes/playful.css b/packages/webawesome/src/styles/themes/playful.css index ebb7b195d..95b5f1ef5 100644 --- a/packages/webawesome/src/styles/themes/playful.css +++ b/packages/webawesome/src/styles/themes/playful.css @@ -1,46 +1,401 @@ -@import url('playful/color.css'); -@import url('default/space.css'); -@import url('default/outlines.css'); -@import url('playful/typography.css'); -@import url('default/rounding.css'); -@import url('default/shadows.css'); -@import url('default/transitions.css'); -@import url('default/groups.css'); -@import url('playful/dimension.css'); -@import url('playful/overrides.css'); +@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 { - :where(:root), - :host, + :root, .wa-theme-playful, - .wa-dark, .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 { - /** - * Borders - */ + /* #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 */ - /** - * Focus - */ - --wa-focus-ring-width: 0.25rem; - - /** - * Rounding - */ + /* #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); - /** - * Shadows - */ - --wa-shadow-blur-scale: 3; --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); - /** - * Component Groups - */ --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/playful/color.css b/packages/webawesome/src/styles/themes/playful/color.css deleted file mode 100644 index 93c3266c7..000000000 --- a/packages/webawesome/src/styles/themes/playful/color.css +++ /dev/null @@ -1,149 +0,0 @@ -@import url('../../color/rudimentary.css'); -@import url('../default/color.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'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-playful, - .wa-light, - .wa-dark .wa-invert { - /** - * Foundational Colors - */ - --wa-color-surface-border: var(--wa-color-neutral-80); - - --wa-color-text-link: var(--wa-color-yellow-40); - - --wa-color-focus: var(--wa-color-brand-60); - - /** - * 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); - } - - .wa-dark, - .wa-invert { - /** - * 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-yellow-80); - - --wa-color-focus: var(--wa-color-brand-60); - - --wa-color-mix-hover: white 10%; - - /** - * Semantic Colors - */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-20); - --wa-color-brand-fill-normal: var(--wa-color-brand-40); - --wa-color-brand-fill-loud: var(--wa-color-brand); - --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-50); - --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-20); - --wa-color-success-fill-normal: var(--wa-color-success-40); - --wa-color-success-fill-loud: var(--wa-color-success); - --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-50); - --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-20); - --wa-color-warning-fill-normal: var(--wa-color-warning-40); - --wa-color-warning-fill-loud: var(--wa-color-warning); - --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-50); - --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-20); - --wa-color-danger-fill-normal: var(--wa-color-danger-40); - --wa-color-danger-fill-loud: var(--wa-color-danger); - --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-50); - --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-20); - --wa-color-neutral-fill-normal: var(--wa-color-neutral-40); - --wa-color-neutral-fill-loud: var(--wa-color-neutral-70); - --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-50); - --wa-color-neutral-on-quiet: var(--wa-color-neutral-70); - --wa-color-neutral-on-normal: var(--wa-color-neutral-90); - --wa-color-neutral-on-loud: var(--wa-color-neutral-05); - } -} diff --git a/packages/webawesome/src/styles/themes/playful/overrides.css b/packages/webawesome/src/styles/themes/playful/overrides.css deleted file mode 100644 index 6d49be0d9..000000000 --- a/packages/webawesome/src/styles/themes/playful/overrides.css +++ /dev/null @@ -1,39 +0,0 @@ -@layer wa-theme { - :where(:root), - :host, - .wa-theme-playful { - 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/playful/typography.css b/packages/webawesome/src/styles/themes/playful/typography.css deleted file mode 100644 index 9b2c108ab..000000000 --- a/packages/webawesome/src/styles/themes/playful/typography.css +++ /dev/null @@ -1,26 +0,0 @@ -@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'); -@import url('../default/typography.css'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-playful { - --wa-font-family-body: 'Nunito', sans-serif; - --wa-font-family-heading: 'Fredoka', sans-serif; - --wa-font-family-code: 'Azeret Mono', ui-monospace, monospace; - - --wa-font-size-scale: 1.125; - - --wa-font-weight-normal: 500; - --wa-font-weight-semibold: 600; - --wa-font-weight-bold: 700; - - --wa-font-weight-heading: 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; - } -} diff --git a/packages/webawesome/src/styles/themes/premium.css b/packages/webawesome/src/styles/themes/premium.css index 01df47d02..f150fc3dc 100644 --- a/packages/webawesome/src/styles/themes/premium.css +++ b/packages/webawesome/src/styles/themes/premium.css @@ -1,36 +1,407 @@ -@import url('premium/color.css'); -@import url('default/space.css'); -@import url('default/outlines.css'); -@import url('premium/typography.css'); -@import url('default/rounding.css'); -@import url('default/shadows.css'); -@import url('default/transitions.css'); -@import url('default/groups.css'); -@import url('premium/overrides.css'); +@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 { - :where(:root), - :host, + :root, .wa-theme-premium, - .wa-dark, .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 { - /** - * Borders - */ + /* #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 */ - /** - * Rounding - */ + /* #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); - /** - * Component Groups - */ - --wa-form-control-activated-color: var(--wa-color-neutral-fill-loud); + --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/premium/color.css b/packages/webawesome/src/styles/themes/premium/color.css deleted file mode 100644 index b07ac1263..000000000 --- a/packages/webawesome/src/styles/themes/premium/color.css +++ /dev/null @@ -1,147 +0,0 @@ -@import url('../../color/anodized.css'); -@import url('../default/color.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'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-premium, - .wa-light, - .wa-dark .wa-invert { - /** - * Foundational Colors - */ - --wa-color-surface-border: var(--wa-color-neutral-80); - - --wa-color-mix-hover: white 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); - } - - .wa-dark, - .wa-invert { - /** - * 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-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); - } -} diff --git a/packages/webawesome/src/styles/themes/premium/overrides.css b/packages/webawesome/src/styles/themes/premium/overrides.css deleted file mode 100644 index 83721705e..000000000 --- a/packages/webawesome/src/styles/themes/premium/overrides.css +++ /dev/null @@ -1,46 +0,0 @@ -@layer wa-theme { - :where(:root), - :host, - .wa-theme-premium { - 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/premium/typography.css b/packages/webawesome/src/styles/themes/premium/typography.css deleted file mode 100644 index 5a32d8fdf..000000000 --- a/packages/webawesome/src/styles/themes/premium/typography.css +++ /dev/null @@ -1,22 +0,0 @@ -@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'); -@import url('../default/typography.css'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-premium, - .wa-light, - .wa-dark .wa-invert { - --wa-font-family-body: 'DM Sans', sans-serif; - --wa-font-family-heading: 'Playfair Display', serif; - --wa-font-family-longform: 'Playfair', serif; - - --wa-font-weight-heading: 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); - } -} diff --git a/packages/webawesome/src/styles/themes/shoelace.css b/packages/webawesome/src/styles/themes/shoelace.css index c76363b42..be08bd3c2 100644 --- a/packages/webawesome/src/styles/themes/shoelace.css +++ b/packages/webawesome/src/styles/themes/shoelace.css @@ -1,51 +1,484 @@ -@import url('shoelace/color.css'); -@import url('default/space.css'); -@import url('default/outlines.css'); -@import url('shoelace/typography.css'); -@import url('default/rounding.css'); -@import url('default/shadows.css'); -@import url('default/transitions.css'); -@import url('default/groups.css'); -@import url('shoelace/overrides.css'); +@import url('../color/shoelace.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'); @layer wa-theme { - :where(:root), - :host, + :root, .wa-theme-shoelace, - .wa-dark, .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-50); + --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-50); + --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-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-50); + --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-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-50); + --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-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-50); + --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-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-40); + --wa-color-neutral-on-normal: var(--wa-color-neutral-30); + --wa-color-neutral-on-loud: white; + /* #endregion */ + } + + .wa-dark, .wa-invert { - /** - * Focus - */ + /* #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-30); + --wa-color-brand-border-normal: var(--wa-color-brand-40); + --wa-color-brand-border-loud: var(--wa-color-brand-50); + --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-neutral-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-50); + --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-neutral-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-50); + --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-neutral-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-60); + --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-50); + --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-neutral-10); + + --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-60); + --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-50); + --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-shoelace, + .wa-light, + .wa-dark, + .wa-invert { + /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + --wa-font-family-body: ui-sans-serif, system-ui, 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: 500; + --wa-font-weight-bold: 600; + + --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; + --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: 0.7; + --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) color-mix(in oklab, var(--wa-color-focus) 60%, transparent); + --wa-focus-ring-offset: 0.0625rem; /* 1px */ + /* #endregion */ - /** - * Rounding - */ - --wa-border-radius-scale: 0.7; + /* #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); - /** - * Shadows - */ --wa-shadow-offset-y-scale: 0.0625; - --wa-shadow-spread-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); - /** - * Transitions - */ + --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; + --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: 250ms; --wa-transition-normal: 150ms; --wa-transition-fast: 50ms; + /* #endregion */ + + /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */ + /* Form Controls */ + --wa-form-control-background-color: var(--wa-color-surface-default); - /** - * Component Groups - */ - /* Form controls */ --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-m); + + /* 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-shoelace, + .wa-light, + .wa-dark, + .wa-invert { + wa-avatar { + --background-color: var(--wa-color-neutral-fill-loud); + --text-color: var(--wa-color-neutral-on-loud); + } + + wa-button::part(label), + wa-radio[appearance='button'], + button, + input:where([type='button'], [type='reset'], [type='submit']) { + font-size: var(--wa-font-size-smaller); + } + + wa-radio[appearance='button'] { + font-weight: var(--wa-font-weight-action); + + &:state(checked) { + background-color: var(--wa-form-control-activated-color); + color: var(--wa-color-brand-on-loud); + } + } + + wa-breadcrumb { + font-size: var(--wa-font-size-s); + } + + wa-callout { + --spacing: var(--wa-space-m); + font-size: var(--wa-font-size-smaller); + + &:is([appearance~='outlined']) { + border-top-width: var(--wa-border-width-l); + border-color: var(--wa-color-surface-border); + border-top-color: var(--border-color, var(--wa-color-border-loud)); + + &:not([appearance~='accent']) { + --border-color: var(--wa-color-fill-loud); + } + } + &:not([appearance~='accent']) { + --icon-color: var(--wa-color-fill-loud); + --text-color: var(--wa-color-text-normal); + } + } + + wa-card { + background-color: var(--wa-color-surface-raised); + } + + wa-carousel { + --pagination-color-active: var(--wa-color-neutral-fill-loud); + } + + :is( + wa-input, + wa-select, + wa-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 + ):not([appearance='filled'], .wa-filled) { + --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) + color-mix(in oklab, var(--wa-color-focus), transparent 50%); + --wa-focus-ring-offset: 0; + } + + 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-slider::part(thumb) { + border: none; + } + + wa-switch { + --background-color: var(--wa-color-gray-50); + --border-color: var(--background-color); + --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2); + --thumb-color: var(--wa-color-surface-default); + --thumb-size: calc(var(--height) + 4px); + --width: calc(var(--height) * 2); + + &::part(thumb) { + border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color); + } + &[checked]::part(thumb) { + border-color: var(--background-color-checked); + } + } + + wa-progress-bar::part(base), + progress { + height: 1em; + } + + wa-tab { + font-size: var(--wa-font-size-smaller); + } } } diff --git a/packages/webawesome/src/styles/themes/shoelace/color.css b/packages/webawesome/src/styles/themes/shoelace/color.css deleted file mode 100644 index 62f4455cf..000000000 --- a/packages/webawesome/src/styles/themes/shoelace/color.css +++ /dev/null @@ -1,131 +0,0 @@ -@import url('../../color/shoelace.css'); -@import url('../default/color.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'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-shoelace, - .wa-light, - .wa-dark .wa-invert { - color-scheme: light; - - /** - * 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-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-50); - --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-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-50); - --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-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-50); - --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-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-50); - --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-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-40); - --wa-color-neutral-on-normal: var(--wa-color-neutral-30); - --wa-color-neutral-on-loud: white; - } - - .wa-dark, - .wa-invert { - /** - * Foundational Colors - */ - --wa-color-text-normal: var(--wa-color-neutral-80); - - /** - * 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-50); - --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-neutral-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-50); - --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-neutral-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-50); - --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-neutral-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-60); - --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-50); - --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-neutral-10); - - --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-60); - --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-50); - --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); - } -} diff --git a/packages/webawesome/src/styles/themes/shoelace/overrides.css b/packages/webawesome/src/styles/themes/shoelace/overrides.css deleted file mode 100644 index 59f7cb31b..000000000 --- a/packages/webawesome/src/styles/themes/shoelace/overrides.css +++ /dev/null @@ -1,123 +0,0 @@ -@layer wa-theme { - :where(:root), - :host, - .wa-theme-shoelace { - wa-avatar { - --background-color: var(--wa-color-neutral-fill-loud); - --text-color: var(--wa-color-neutral-on-loud); - } - - wa-button::part(label), - wa-radio[appearance='button'], - button, - input:where([type='button'], [type='reset'], [type='submit']) { - font-size: var(--wa-font-size-smaller); - } - - wa-radio[appearance='button'] { - font-weight: var(--wa-font-weight-action); - - &:state(checked) { - background-color: var(--wa-form-control-activated-color); - color: var(--wa-color-brand-on-loud); - } - } - - wa-breadcrumb { - font-size: var(--wa-font-size-s); - } - - wa-callout { - --spacing: var(--wa-space-m); - font-size: var(--wa-font-size-smaller); - - &:is([appearance~='outlined']) { - border-top-width: var(--wa-border-width-l); - border-color: var(--wa-color-surface-border); - border-top-color: var(--border-color, var(--wa-color-border-loud)); - - &:not([appearance~='accent']) { - --border-color: var(--wa-color-fill-loud); - } - } - &:not([appearance~='accent']) { - --icon-color: var(--wa-color-fill-loud); - --text-color: var(--wa-color-text-normal); - } - } - - wa-card { - background-color: var(--wa-color-surface-raised); - } - - wa-carousel { - --pagination-color-active: var(--wa-color-neutral-fill-loud); - } - - :is( - wa-input, - wa-select, - wa-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 - ):not([appearance='filled'], .wa-filled) { - --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) - color-mix(in oklab, var(--wa-color-focus), transparent 50%); - --wa-focus-ring-offset: 0; - } - - 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-slider::part(thumb) { - border: none; - } - - wa-switch { - --background-color: var(--wa-color-gray-50); - --border-color: var(--background-color); - --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2); - --thumb-color: var(--wa-color-surface-default); - --thumb-size: calc(var(--height) + 4px); - --width: calc(var(--height) * 2); - - &::part(thumb) { - border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color); - } - &[checked]::part(thumb) { - border-color: var(--background-color-checked); - } - } - - wa-progress-bar::part(base), - progress { - height: 1em; - } - - wa-tab { - font-size: var(--wa-font-size-smaller); - } - } -} diff --git a/packages/webawesome/src/styles/themes/shoelace/typography.css b/packages/webawesome/src/styles/themes/shoelace/typography.css deleted file mode 100644 index ba1c023fa..000000000 --- a/packages/webawesome/src/styles/themes/shoelace/typography.css +++ /dev/null @@ -1,16 +0,0 @@ -@import url('../default/typography.css'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-shoelace { - --wa-font-family-body: - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', - 'Segoe UI Emoji', 'Segoe UI Symbol'; - --wa-font-family-heading: var(--wa-font-family-body); - --wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; - --wa-font-family-longform: Georgia, 'Times New Roman', serif; - - --wa-link-decoration-default: underline; - } -} diff --git a/packages/webawesome/src/styles/themes/tailspin.css b/packages/webawesome/src/styles/themes/tailspin.css index 0e779eef0..3f5345a41 100644 --- a/packages/webawesome/src/styles/themes/tailspin.css +++ b/packages/webawesome/src/styles/themes/tailspin.css @@ -1,45 +1,413 @@ -@import url('tailspin/color.css'); -@import url('default/space.css'); -@import url('default/outlines.css'); -@import url('tailspin/typography.css'); -@import url('default/rounding.css'); -@import url('default/shadows.css'); -@import url('default/transitions.css'); -@import url('default/groups.css'); -@import url('tailspin/overrides.css'); +@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 { - :where(:root), - :host, + :root, .wa-theme-tailspin, - .wa-dark, .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 { - /** - * Spacing - */ + /* #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 */ - /** - * Focus - */ - --wa-focus-ring-width: 0.125rem; + --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); - /** - * Shadows - */ --wa-shadow-offset-y-scale: 0.5; - --wa-shadow-offset-blur-scale: 0.5; - --wa-shadow-spread-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); - /** - * Component Groups - */ + --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); + } } } diff --git a/packages/webawesome/src/styles/themes/tailspin/color.css b/packages/webawesome/src/styles/themes/tailspin/color.css deleted file mode 100644 index 1ed29d6bf..000000000 --- a/packages/webawesome/src/styles/themes/tailspin/color.css +++ /dev/null @@ -1,158 +0,0 @@ -@import url('../../color/vogue.css'); -@import url('../default/color.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'); - -@layer wa-theme { - :where(:root), - :host, - .wa-theme-tailspin, - .wa-light, - .wa-dark .wa-invert { - /** - * Foundational Colors - */ - --wa-color-text-link: var(--wa-color-brand-40); - - --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; - - /** - * Component Groups - */ - --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-dark, - .wa-invert { - /** - * Foundational Colors - */ - --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-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); - } -} diff --git a/packages/webawesome/src/styles/themes/tailspin/overrides.css b/packages/webawesome/src/styles/themes/tailspin/overrides.css deleted file mode 100644 index a175cf515..000000000 --- a/packages/webawesome/src/styles/themes/tailspin/overrides.css +++ /dev/null @@ -1,61 +0,0 @@ -@layer wa-theme { - :where(:root), - :host, - .wa-theme-tailspin { - 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); - } - } -} diff --git a/packages/webawesome/src/styles/themes/tailspin/typography.css b/packages/webawesome/src/styles/themes/tailspin/typography.css deleted file mode 100644 index bf489c9bc..000000000 --- a/packages/webawesome/src/styles/themes/tailspin/typography.css +++ /dev/null @@ -1,17 +0,0 @@ -@import url('../default/typography.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 { - :where(:root), - :host, - .wa-theme-tailspin { - --wa-font-family-body: 'Inter', sans-serif; - - --wa-font-weight-bold: 700; - - --wa-font-size-scale: 0.875; - - --wa-link-decoration-default: none; - --wa-link-decoration-hover: none; - } -}