Add Matter theme (#547)

* Add Matter theme

* Add Matter to alpha build

* Add changelog

* Fix incorrect palette name

* Make loud fills darker in light mode

docs/docs/resources/changelog.md

@@ -18,6 +18,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Added `.wa-callout` utility class
 - Added new themes:
   - Glossy
+  - Matter
   - Premium
   - Playful
 

docs/docs/themes/matter.md

@@ -0,0 +1,7 @@
+---
+title: Matter
+description: Digital design inspired by the real world.
+isPro: true
+tags: pro
+defaultPalette: mild
+---

scripts/build.js

@@ -127,6 +127,7 @@ async function generateStyles() {
         file.includes('themes/awesome') ||
         file.includes('themes/active') ||
         file.includes('themes/glossy') ||
+        file.includes('themes/matter') ||
         file.includes('themes/mellow') ||
         file.includes('themes/playful') ||
         file.includes('themes/premium') ||

src/styles/color/mild.css

@@ -0,0 +1,100 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-mild {
+  --wa-color-red-95: #ffeeec;
+  --wa-color-red-90: #ffddda;
+  --wa-color-red-80: #f9bbb3;
+  --wa-color-red-70: #f0978d;
+  --wa-color-red-60: #e47468;
+  --wa-color-red-50: #cf443b;
+  --wa-color-red-40: #b40c12;
+  --wa-color-red-30: #910000;
+  --wa-color-red-20: #6d0000;
+  --wa-color-red-10: #450002;
+  --wa-color-red-05: #2f0001;
+
+  --wa-color-yellow-95: #fff4b3;
+  --wa-color-yellow-90: #fee58c;
+  --wa-color-yellow-80: #e3c868;
+  --wa-color-yellow-70: #c6ad4f;
+  --wa-color-yellow-60: #ab933a;
+  --wa-color-yellow-50: #897421;
+  --wa-color-yellow-40: #695808;
+  --wa-color-yellow-30: #534400;
+  --wa-color-yellow-20: #3d3100;
+  --wa-color-yellow-10: #251d00;
+  --wa-color-yellow-05: #171200;
+
+  --wa-color-green-95: #e1f9e1;
+  --wa-color-green-90: #bff2c0;
+  --wa-color-green-80: #9fd7a1;
+  --wa-color-green-70: #86bc88;
+  --wa-color-green-60: #6ca170;
+  --wa-color-green-50: #4e8153;
+  --wa-color-green-40: #336339;
+  --wa-color-green-30: #224e29;
+  --wa-color-green-20: #123a1b;
+  --wa-color-green-10: #01230a;
+  --wa-color-green-05: #001701;
+
+  --wa-color-teal-95: #edf3f3;
+  --wa-color-teal-90: #dbe8e7;
+  --wa-color-teal-80: #b4cfcc;
+  --wa-color-teal-70: #8db7b3;
+  --wa-color-teal-60: #679f9b;
+  --wa-color-teal-50: #36817c;
+  --wa-color-teal-40: #006461;
+  --wa-color-teal-30: #004e4b;
+  --wa-color-teal-20: #003937;
+  --wa-color-teal-10: #002220;
+  --wa-color-teal-05: #001514;
+
+  --wa-color-blue-95: #eaf5ff;
+  --wa-color-blue-90: #d5e7ff;
+  --wa-color-blue-80: #b5cced;
+  --wa-color-blue-70: #95b1d7;
+  --wa-color-blue-60: #7697c1;
+  --wa-color-blue-50: #5078a5;
+  --wa-color-blue-40: #305b88;
+  --wa-color-blue-30: #1b4771;
+  --wa-color-blue-20: #0a3458;
+  --wa-color-blue-10: #011f39;
+  --wa-color-blue-05: #001327;
+
+  --wa-color-indigo-95: #f7efff;
+  --wa-color-indigo-90: #ede1ff;
+  --wa-color-indigo-80: #d3c0ff;
+  --wa-color-indigo-70: #baa1f9;
+  --wa-color-indigo-60: #9f86e0;
+  --wa-color-indigo-50: #7f67bd;
+  --wa-color-indigo-40: #624a9e;
+  --wa-color-indigo-30: #4e3589;
+  --wa-color-indigo-20: #3a2074;
+  --wa-color-indigo-10: #24045f;
+  --wa-color-indigo-05: #180044;
+
+  --wa-color-violet-95: #ffedff;
+  --wa-color-violet-90: #fbdbff;
+  --wa-color-violet-80: #e2bde9;
+  --wa-color-violet-70: #c8a2d1;
+  --wa-color-violet-60: #af87b9;
+  --wa-color-violet-50: #8f679b;
+  --wa-color-violet-40: #714a7f;
+  --wa-color-violet-30: #5d366c;
+  --wa-color-violet-20: #492258;
+  --wa-color-violet-10: #310c40;
+  --wa-color-violet-05: #22042d;
+
+  --wa-color-gray-95: #f4f3f4;
+  --wa-color-gray-90: #e7e5e8;
+  --wa-color-gray-80: #ccc8cd;
+  --wa-color-gray-70: #b2adb2;
+  --wa-color-gray-60: #979498;
+  --wa-color-gray-50: #777478;
+  --wa-color-gray-40: #5b585d;
+  --wa-color-gray-30: #464547;
+  --wa-color-gray-20: #333235;
+  --wa-color-gray-10: #1f1d22;
+  --wa-color-gray-05: #121214;
+}

src/styles/themes/matter.css

@@ -0,0 +1,42 @@
+@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');
+
+:where(:root),
+:host,
+.wa-theme-matter,
+.wa-dark,
+.wa-light,
+.wa-invert {
+  /**
+   * Rounding
+   */
+  --wa-border-radius-scale: 1.33;
+
+  /**
+   * Shadows
+   */
+  --wa-shadow-blur-scale: 1.25;
+  --wa-shadow-offset-y-scale: 0.5;
+  --wa-shadow-spread-scale: 0;
+
+  /**
+   * Focus
+   */
+  --wa-focus-ring-width: 0.125rem;
+  --wa-focus-ring-offset: 0rem;
+
+  /**
+   * Component Groups
+   */
+  --wa-form-control-border-radius: var(--wa-border-radius-s);
+  --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
+
+  --wa-tooltip-arrow-size: 0rem;
+}

src/styles/themes/matter/color.css

@@ -0,0 +1,143 @@
+@import url('../../color/mild.css');
+@import url('../default/color.css');
+
+: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-indigo-95);
+  --wa-color-surface-lowered: var(--wa-color-gray-90);
+
+  --wa-color-text-link: var(--wa-color-indigo-40);
+
+  --wa-color-shadow: rgb(0 0 0 / 0.3);
+
+  --wa-color-focus: var(--wa-color-indigo-40);
+
+  --wa-color-mix-hover: white 5%;
+  --wa-color-mix-active: white 10%;
+
+  /**
+   * Semantic Colors
+   */
+  --wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-border-quiet: var(--wa-color-indigo-90);
+  --wa-color-brand-border-normal: var(--wa-color-indigo-80);
+  --wa-color-brand-border-loud: var(--wa-color-indigo-50);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-on-loud: white;
+
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-fill-loud: var(--wa-color-green-40);
+  --wa-color-success-border-quiet: var(--wa-color-green-90);
+  --wa-color-success-border-normal: var(--wa-color-green-80);
+  --wa-color-success-border-loud: var(--wa-color-green-50);
+  --wa-color-success-on-quiet: var(--wa-color-green-40);
+  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-on-loud: white;
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-on-loud: white;
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-fill-loud: var(--wa-color-red-40);
+  --wa-color-danger-border-quiet: var(--wa-color-red-90);
+  --wa-color-danger-border-normal: var(--wa-color-red-80);
+  --wa-color-danger-border-loud: var(--wa-color-red-50);
+  --wa-color-danger-on-quiet: var(--wa-color-red-40);
+  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-on-loud: white;
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-30);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-20);
+  --wa-color-neutral-on-loud: white;
+}
+
+.wa-dark,
+.wa-invert,
+:is(:host-context(.wa-dark)) {
+  /**
+   * Foundational Colors
+   */
+  --wa-color-text-link: var(--wa-color-indigo-70);
+  --wa-color-focus: var(--wa-color-indigo-60);
+
+  /**
+   * Semantic Colors
+   */
+  --wa-color-brand-fill-quiet: var(--wa-color-indigo-20);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-70);
+  --wa-color-brand-border-quiet: var(--wa-color-indigo-20);
+  --wa-color-brand-border-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-border-loud: var(--wa-color-indigo-60);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-70);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-80);
+  --wa-color-brand-on-loud: var(--wa-color-indigo-10);
+
+  --wa-color-success-fill-quiet: var(--wa-color-green-20);
+  --wa-color-success-fill-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-loud: var(--wa-color-green-70);
+  --wa-color-success-border-quiet: var(--wa-color-green-20);
+  --wa-color-success-border-normal: var(--wa-color-green-30);
+  --wa-color-success-border-loud: var(--wa-color-green-60);
+  --wa-color-success-on-quiet: var(--wa-color-green-70);
+  --wa-color-success-on-normal: var(--wa-color-green-80);
+  --wa-color-success-on-loud: var(--wa-color-green-10);
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-on-loud: var(--wa-color-yellow-10);
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
+  --wa-color-danger-fill-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-loud: var(--wa-color-red-70);
+  --wa-color-danger-border-quiet: var(--wa-color-red-20);
+  --wa-color-danger-border-normal: var(--wa-color-red-30);
+  --wa-color-danger-border-loud: var(--wa-color-red-60);
+  --wa-color-danger-on-quiet: var(--wa-color-red-70);
+  --wa-color-danger-on-normal: var(--wa-color-red-80);
+  --wa-color-danger-on-loud: var(--wa-color-red-10);
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-70);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-80);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-70);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-80);
+  --wa-color-neutral-on-loud: var(--wa-color-gray-10);
+}

src/styles/themes/matter/overrides.css

@@ -0,0 +1,153 @@
+/**
+ * Component Styles
+ */
+:where(:root),
+:host,
+.wa-theme-matter {
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  wa-button,
+  wa-radio-group > wa-radio-button,
+  .wa-button {
+    --wa-form-control-border-radius: var(--wa-border-radius-pill);
+
+    box-shadow: 0 0 transparent;
+    transition-property: all;
+
+    &:not([appearance~='plain'], .wa-plain) {
+      padding-inline: calc(var(--wa-space) * 1.5);
+    }
+
+    &:not([appearance~='outlined'], [appearance~='plain'], .wa-outlined, .wa-plain):hover {
+      box-shadow: var(--wa-shadow-s);
+    }
+
+    &:is([appearance~='outlined'], .wa-outlined) {
+      --border-color: var(--wa-form-control-border-color);
+    }
+  }
+
+  input[type='checkbox'],
+  wa-checkbox,
+  wa-tree-item::part(checkbox__control) {
+    --border-radius: calc(var(--wa-border-radius-s) / 2);
+  }
+
+  wa-icon-button::part(base) {
+    aspect-ratio: 1;
+    border-radius: var(--wa-border-radius-circle);
+    padding: 0.75em;
+  }
+
+  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-text-field {
+    --wa-form-control-value-line-height: var(--wa-line-height-normal);
+
+    &:is([appearance~='filled'], .wa-filled):not([appearance~='outlined'], .wa-outlined, [pill], .wa-pill) {
+      --wa-focus-ring: ;
+      --border-color: transparent transparent var(--wa-form-control-border-color) transparent;
+
+      &:where(input, textarea, wa-input, select, wa-textarea, .wa-text-field):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, .wa-text-field),
+      &::part(input),
+      &::part(combobox) {
+        border-radius: var(--wa-form-control-border-radius) var(--wa-form-control-border-radius) 0px 0px;
+      }
+    }
+  }
+
+  wa-menu-item,
+  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 {
+    height: 0.25rem;
+
+    &:where(progress),
+    &::part(base) {
+      border-radius: var(--wa-border-radius-square);
+    }
+  }
+
+  input:is([type='checkbox'], [type='radio']),
+  wa-checkbox,
+  wa-tree-item::part(checkbox__control),
+  wa-radio {
+    --border-width: var(--wa-border-width-m);
+    --checked-icon-scale: 0.65;
+
+    &::part(control) {
+      margin-inline-end: 0.75em;
+    }
+
+    &:hover {
+      --box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
+      &:is(:checked, :indeterminate, :state(checked), :state(indeterminate)) {
+        --box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color-checked), transparent 85%);
+      }
+    }
+  }
+
+  input[type='range']:hover,
+  wa-slider:hover {
+    --thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--thumb-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;
+    }
+
+    &: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);
+  }
+}

src/styles/themes/matter/typography.css

@@ -0,0 +1,19 @@
+@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');
+
+: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-light: 300;
+  --wa-font-weight-normal: 400;
+  --wa-font-weight-semibold: 500;
+  --wa-font-weight-bold: 700;
+
+  --wa-font-weight-heading: var(--wa-font-weight-semibold);
+
+  --wa-link-decoration-default: underline;
+}