@dixy-ui/themes 0.1.0-beta.3 → 0.1.0-beta.4

package/dist/brutalist-concrete.css

@@ -29,6 +29,11 @@
     --dixy-font-title-sm-family:
       "Archivo Black", "Arial Black", ui-sans-serif, sans-serif;
     --dixy-skin-edge: #8e8b84;
+    --dixy-skin-field-edge: color-mix(
+      in oklab,
+      var(--dixy-color-base-9) 50%,
+      var(--dixy-color-base-8)
+    );
     --dixy-organic-density: 50;
     --dixy-organic-cornerDensity: 70;
     --dixy-organic-canopyDepth: 40;
@@ -119,7 +124,6 @@
     --dixy-organic-b: #6b6862;
     --dixy-organic-c: #e0a020;
     --dixy-organic-d: #e6e2da;
-    --dixy-skin-selected: var(--dixy-skin-finish);
     --dixy-color-text-primary: color-mix(
       in srgb,
       var(--dixy-color-base-12) 80%,
@@ -137,6 +141,7 @@
       #33322f
     );
   }
+
   .dixy-theme[data-dixy-skin="dixy/brutalist-concrete"][data-relief="2"] {
     --dixy-skin-shadow:
       var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
@@ -277,6 +282,30 @@
     ):not([data-variant="soft"]) {
     background-color: var(--dixy-skin-surface);
   }
+  :is(
+      .dixy-dialog-popup,
+      .dixy-alert-dialog-popup,
+      .dixy-drawer-popup,
+      .dixy-popover-popup,
+      .dixy-preview-card-popup,
+      .dixy-tooltip-popup,
+      .dixy-select-popup,
+      .dixy-combobox-popup,
+      .dixy-autocomplete-popup,
+      .dixy-menu-popup,
+      .dixy-context-menu-popup,
+      .dixy-navigation-menu-popup
+    )[data-dixy-skin="dixy/brutalist-concrete"]:not(
+      [data-dixy-material-override]
+    ):not(:where([data-dixy-material-override]) *):not(
+      [data-variant="solid"]
+    ):not([data-variant="soft"]) {
+    background-color: color-mix(
+      in srgb,
+      var(--dixy-color-background-surface-raised) 94%,
+      var(--dixy-skin-surface)
+    );
+  }
   :is(
     .dixy-input,
     .dixy-textarea,
@@ -309,7 +338,7 @@
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *) {
     border-width: var(--dixy-input-border-width);
-    border-color: var(--dixy-skin-edge);
+    border-color: var(--dixy-skin-field-edge);
     background-image: var(--dixy-skin-paint);
     background-color: var(--dixy-color-background-canvas);
     background-size:
@@ -319,6 +348,45 @@
       100% 100%;
     box-shadow: var(--dixy-skin-inset);
   }
+  /* materials.css styles [data-dixy-visual] surfaces at 0,5,0. Match the
+     skin's paint to that so its image and grain size always land together;
+     otherwise the material image is tiled at the grain size (stripes). */
+  :is(
+      .dixy-card,
+      .dixy-box,
+      .dixy-dialog-popup,
+      .dixy-alert-dialog-popup,
+      .dixy-drawer-popup,
+      .dixy-popover-popup,
+      .dixy-preview-card-popup,
+      .dixy-tooltip-popup,
+      .dixy-select-popup,
+      .dixy-combobox-popup,
+      .dixy-autocomplete-popup,
+      .dixy-menu-popup,
+      .dixy-context-menu-popup,
+      .dixy-navigation-menu-popup,
+      .dixy-toast-root,
+      .dixy-alert,
+      .dixy-list-box,
+      .dixy-calendar,
+      .dixy-range-calendar,
+      .dixy-input,
+      .dixy-textarea,
+      .dixy-native-select,
+      .dixy-select-trigger,
+      .dixy-input-group,
+      .dixy-combobox-input-group,
+      .dixy-autocomplete-input-group,
+      .dixy-number-field-group,
+      .dixy-otp-field-input
+    )[data-dixy-skin="dixy/brutalist-concrete"]:not(
+      [data-dixy-material-override]
+    ):not(
+      :where([data-dixy-material-override]) *
+    )[data-dixy-visual][data-material]:not([data-disabled]) {
+    background-image: var(--dixy-skin-paint);
+  }
   :is(.dixy-button)[data-dixy-skin="dixy/brutalist-concrete"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *):is(
@@ -349,14 +417,19 @@
     border: 1px solid var(--dixy-skin-edge);
     box-shadow: var(--dixy-skin-inset);
   }
+  /* Selected tabs and toggles are one flat colour, lifted by edge and relief only. A gradient behind the label (thumb art, sheen, material image) splits it across two colours. :not([data-variant="line"]) also outranks materials.css (0,3,0). */
   :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/brutalist-concrete"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *) {
-    background-image: var(--dixy-skin-finish);
     box-shadow: var(--dixy-skin-control-relief);
     border: 1px solid var(--dixy-skin-edge);
   }
-  /* Toggle groups read like tabs: a sunken track, the selected toggle a raised thumb (slider-knob paint in light, the raised finish in dark so its label stays readable). */
+  :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/brutalist-concrete"]:not(
+      [data-dixy-material-override]
+    ):not(:where([data-dixy-material-override]) *):not([data-variant="line"]) {
+    background-image: none;
+  }
+  /* Toggle groups read like tabs: a sunken track, the selected toggle a raised, flat thumb. */
   .dixy-theme[data-dixy-skin="dixy/brutalist-concrete"]
     .dixy-toggle-group:is([data-attached], [data-segmented]):not(
       [data-dixy-material-override]
@@ -371,7 +444,7 @@
       [data-variant="solid"]
     )[data-pressed]:not([data-disabled]) {
     background-color: var(--dixy-color-background-surface-raised);
-    background-image: var(--dixy-skin-selected, var(--dixy-skin-thumb));
+    background-image: none;
     box-shadow: var(--dixy-skin-control-relief);
     border-color: var(--dixy-skin-edge);
     color: var(--dixy-color-text-primary);

package/dist/bytes.json

@@ -1,157 +1,192 @@
 [
   {
     "id": "dixy/living-forest",
-    "cssBytes": 29844,
-    "gzipBytes": 4401
+    "cssBytes": 32270,
+    "gzipBytes": 4717
   },
   {
     "id": "dixy/retro-os",
-    "cssBytes": 27504,
-    "gzipBytes": 4041
+    "cssBytes": 29780,
+    "gzipBytes": 4333
   },
   {
     "id": "dixy/winamp-signal",
-    "cssBytes": 32951,
-    "gzipBytes": 4638
+    "cssBytes": 35266,
+    "gzipBytes": 4926
   },
   {
     "id": "dixy/studio-hardware",
-    "cssBytes": 28071,
-    "gzipBytes": 4068
+    "cssBytes": 30392,
+    "gzipBytes": 4372
   },
   {
     "id": "dixy/prism-glass",
-    "cssBytes": 30202,
-    "gzipBytes": 4352
+    "cssBytes": 32487,
+    "gzipBytes": 4640
   },
   {
     "id": "dixy/tactile-atelier",
-    "cssBytes": 30381,
-    "gzipBytes": 4403
+    "cssBytes": 32810,
+    "gzipBytes": 4711
   },
   {
     "id": "dixy/ocean-depths",
-    "cssBytes": 27186,
-    "gzipBytes": 3985
+    "cssBytes": 29613,
+    "gzipBytes": 4308
   },
   {
     "id": "dixy/candy-clay",
-    "cssBytes": 25291,
-    "gzipBytes": 3669
+    "cssBytes": 27849,
+    "gzipBytes": 3996
   },
   {
     "id": "dixy/art-deco",
-    "cssBytes": 27264,
-    "gzipBytes": 4134
+    "cssBytes": 29540,
+    "gzipBytes": 4420
   },
   {
     "id": "dixy/y2k-titanium",
-    "cssBytes": 31119,
-    "gzipBytes": 4455
+    "cssBytes": 35533,
+    "gzipBytes": 4971
   },
   {
     "id": "dixy/material-light",
-    "cssBytes": 27285,
-    "gzipBytes": 3850
+    "cssBytes": 29603,
+    "gzipBytes": 4155
   },
   {
     "id": "dixy/scrapbook",
-    "cssBytes": 21547,
-    "gzipBytes": 3239
+    "cssBytes": 23826,
+    "gzipBytes": 3530
   },
   {
     "id": "dixy/blueprint",
-    "cssBytes": 28736,
-    "gzipBytes": 4304
+    "cssBytes": 31015,
+    "gzipBytes": 4595
   },
   {
     "id": "dixy/riso-zine",
-    "cssBytes": 25111,
-    "gzipBytes": 3851
+    "cssBytes": 27390,
+    "gzipBytes": 4144
   },
   {
     "id": "dixy/neon-night-market",
-    "cssBytes": 29128,
-    "gzipBytes": 4152
+    "cssBytes": 31455,
+    "gzipBytes": 4459
   },
   {
     "id": "dixy/sumi-ink",
-    "cssBytes": 23688,
-    "gzipBytes": 3730
+    "cssBytes": 25964,
+    "gzipBytes": 4030
   },
   {
     "id": "dixy/tokyo-transit",
-    "cssBytes": 24216,
-    "gzipBytes": 3607
+    "cssBytes": 26531,
+    "gzipBytes": 3901
   },
   {
     "id": "dixy/phosphor-terminal",
-    "cssBytes": 31915,
-    "gzipBytes": 4372
+    "cssBytes": 34242,
+    "gzipBytes": 4675
   },
   {
     "id": "dixy/ansi-panes",
-    "cssBytes": 29253,
-    "gzipBytes": 4276
+    "cssBytes": 31535,
+    "gzipBytes": 4569
   },
   {
     "id": "dixy/swiss-poster",
-    "cssBytes": 23207,
-    "gzipBytes": 3544
+    "cssBytes": 27506,
+    "gzipBytes": 4039
   },
   {
     "id": "dixy/azulejo-tile",
-    "cssBytes": 30290,
-    "gzipBytes": 4351
+    "cssBytes": 32602,
+    "gzipBytes": 4655
   },
   {
     "id": "dixy/brutalist-concrete",
-    "cssBytes": 30479,
-    "gzipBytes": 4408
+    "cssBytes": 32809,
+    "gzipBytes": 4721
   },
   {
     "id": "dixy/atomic-lounge",
-    "cssBytes": 29623,
-    "gzipBytes": 4198
+    "cssBytes": 31938,
+    "gzipBytes": 4502
   },
   {
     "id": "dixy/orbital-hud",
-    "cssBytes": 30422,
-    "gzipBytes": 4356
+    "cssBytes": 34688,
+    "gzipBytes": 4853
   },
   {
     "id": "dixy/freighter",
-    "cssBytes": 30105,
-    "gzipBytes": 4555
+    "cssBytes": 34353,
+    "gzipBytes": 5033
   },
   {
     "id": "dixy/solar-sail",
-    "cssBytes": 28634,
-    "gzipBytes": 4174
+    "cssBytes": 30916,
+    "gzipBytes": 4478
   },
   {
     "id": "dixy/diwali-lights",
-    "cssBytes": 28680,
-    "gzipBytes": 4216
+    "cssBytes": 30995,
+    "gzipBytes": 4521
   },
   {
     "id": "dixy/papel-picado",
-    "cssBytes": 27866,
-    "gzipBytes": 4096
+    "cssBytes": 30178,
+    "gzipBytes": 4395
   },
   {
     "id": "dixy/holi-colours",
-    "cssBytes": 28376,
-    "gzipBytes": 4127
+    "cssBytes": 30688,
+    "gzipBytes": 4433
   },
   {
     "id": "dixy/yule-knit",
-    "cssBytes": 26873,
-    "gzipBytes": 4001
+    "cssBytes": 29152,
+    "gzipBytes": 4293
   },
   {
     "id": "dixy/glass-ui",
-    "cssBytes": 28558,
-    "gzipBytes": 4162
+    "cssBytes": 30834,
+    "gzipBytes": 4457
+  },
+  {
+    "id": "dixy/sunset-drive",
+    "cssBytes": 31436,
+    "gzipBytes": 4559
+  },
+  {
+    "id": "dixy/save-point",
+    "cssBytes": 30491,
+    "gzipBytes": 4436
+  },
+  {
+    "id": "dixy/arcade-cabinet",
+    "cssBytes": 33882,
+    "gzipBytes": 4697
+  },
+  {
+    "id": "dixy/ledger",
+    "cssBytes": 19148,
+    "gzipBytes": 2959
+  },
+  {
+    "id": "dixy/mainframe",
+    "cssBytes": 24511,
+    "gzipBytes": 3438
+  },
+  {
+    "id": "dixy/dispatch",
+    "cssBytes": 23183,
+    "gzipBytes": 3270
+  },
+  {
+    "id": "dixy/signal",
+    "cssBytes": 19272,
+    "gzipBytes": 2875
   }
 ]

package/dist/candy-clay.css

@@ -42,6 +42,11 @@
       "Fredoka Variable", "Fredoka", ui-rounded, "SF Pro Rounded", "Nunito",
       sans-serif;
     --dixy-skin-edge: #f5d7df;
+    --dixy-skin-field-edge: color-mix(
+      in oklab,
+      var(--dixy-color-base-9) 50%,
+      var(--dixy-color-base-8)
+    );
 
     --dixy-color-text-primary: color-mix(
       in srgb,
@@ -132,13 +137,18 @@
     --dixy-font-title-sm-letter-spacing: -0.01em;
   }
   .dixy-theme[data-dixy-skin="dixy/candy-clay"][data-appearance="dark"] {
-    --dixy-skin-selected: var(--dixy-skin-finish);
     --dixy-color-text-primary: color-mix(
       in srgb,
       var(--dixy-color-base-12) 15%,
       #fff6f2
     );
     --dixy-skin-edge: #4a3150;
+    --dixy-skin-authored-shadow:
+      6px 8px 18px rgb(0 0 0 / 0.4), -3px -3px 10px rgb(255 255 255 / 0.04),
+      inset 2px 2px 3px rgb(255 255 255 / 0.12);
+    --dixy-skin-inset:
+      inset 3px 3px 6px rgb(0 0 0 / 0.35),
+      inset -3px -3px 6px rgb(255 255 255 / 0.05);
     --dixy-skin-surface: color-mix(
       in srgb,
       var(--dixy-color-background-surface-raised) 20%,
@@ -150,6 +160,7 @@
       #36233c
     );
   }
+
   .dixy-theme[data-dixy-skin="dixy/candy-clay"][data-relief="2"] {
     --dixy-skin-shadow:
       var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
@@ -289,6 +300,28 @@
     ):not([data-variant="solid"]):not([data-variant="soft"]) {
     background-color: var(--dixy-skin-surface);
   }
+  :is(
+      .dixy-dialog-popup,
+      .dixy-alert-dialog-popup,
+      .dixy-drawer-popup,
+      .dixy-popover-popup,
+      .dixy-preview-card-popup,
+      .dixy-tooltip-popup,
+      .dixy-select-popup,
+      .dixy-combobox-popup,
+      .dixy-autocomplete-popup,
+      .dixy-menu-popup,
+      .dixy-context-menu-popup,
+      .dixy-navigation-menu-popup
+    )[data-dixy-skin="dixy/candy-clay"]:not([data-dixy-material-override]):not(
+      :where([data-dixy-material-override]) *
+    ):not([data-variant="solid"]):not([data-variant="soft"]) {
+    background-color: color-mix(
+      in srgb,
+      var(--dixy-color-background-surface-raised) 94%,
+      var(--dixy-skin-surface)
+    );
+  }
   :is(
     .dixy-input,
     .dixy-textarea,
@@ -321,7 +354,7 @@
       :where([data-dixy-material-override]) *
     ) {
     border-width: var(--dixy-input-border-width);
-    border-color: var(--dixy-skin-edge);
+    border-color: var(--dixy-skin-field-edge);
     background-image: var(--dixy-skin-paint);
     background-color: var(--dixy-color-background-canvas);
     background-size:
@@ -331,6 +364,43 @@
       100% 100%;
     box-shadow: var(--dixy-skin-inset);
   }
+  /* materials.css styles [data-dixy-visual] surfaces at 0,5,0. Match the
+     skin's paint to that so its image and grain size always land together;
+     otherwise the material image is tiled at the grain size (stripes). */
+  :is(
+      .dixy-card,
+      .dixy-box,
+      .dixy-dialog-popup,
+      .dixy-alert-dialog-popup,
+      .dixy-drawer-popup,
+      .dixy-popover-popup,
+      .dixy-preview-card-popup,
+      .dixy-tooltip-popup,
+      .dixy-select-popup,
+      .dixy-combobox-popup,
+      .dixy-autocomplete-popup,
+      .dixy-menu-popup,
+      .dixy-context-menu-popup,
+      .dixy-navigation-menu-popup,
+      .dixy-toast-root,
+      .dixy-alert,
+      .dixy-list-box,
+      .dixy-calendar,
+      .dixy-range-calendar,
+      .dixy-input,
+      .dixy-textarea,
+      .dixy-native-select,
+      .dixy-select-trigger,
+      .dixy-input-group,
+      .dixy-combobox-input-group,
+      .dixy-autocomplete-input-group,
+      .dixy-number-field-group,
+      .dixy-otp-field-input
+    )[data-dixy-skin="dixy/candy-clay"]:not([data-dixy-material-override]):not(
+      :where([data-dixy-material-override]) *
+    )[data-dixy-visual][data-material]:not([data-disabled]) {
+    background-image: var(--dixy-skin-paint);
+  }
   :is(.dixy-button)[data-dixy-skin="dixy/candy-clay"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *):is(
@@ -361,14 +431,19 @@
     border: 1px solid var(--dixy-skin-edge);
     box-shadow: var(--dixy-skin-inset);
   }
+  /* Selected tabs and toggles are one flat colour, lifted by edge and relief only. A gradient behind the label (thumb art, sheen, material image) splits it across two colours. :not([data-variant="line"]) also outranks materials.css (0,3,0). */
   :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/candy-clay"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *) {
-    background-image: var(--dixy-skin-finish);
     box-shadow: var(--dixy-skin-control-relief);
     border: 1px solid var(--dixy-skin-edge);
   }
-  /* Toggle groups read like tabs: a sunken track, the selected toggle a raised thumb (slider-knob paint in light, the raised finish in dark so its label stays readable). */
+  :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/candy-clay"]:not(
+      [data-dixy-material-override]
+    ):not(:where([data-dixy-material-override]) *):not([data-variant="line"]) {
+    background-image: none;
+  }
+  /* Toggle groups read like tabs: a sunken track, the selected toggle a raised, flat thumb. */
   .dixy-theme[data-dixy-skin="dixy/candy-clay"]
     .dixy-toggle-group:is([data-attached], [data-segmented]):not(
       [data-dixy-material-override]
@@ -383,7 +458,7 @@
       [data-variant="solid"]
     )[data-pressed]:not([data-disabled]) {
     background-color: var(--dixy-color-background-surface-raised);
-    background-image: var(--dixy-skin-selected, var(--dixy-skin-thumb));
+    background-image: none;
     box-shadow: var(--dixy-skin-control-relief);
     border-color: var(--dixy-skin-edge);
     color: var(--dixy-color-text-primary);