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

package/dist/blueprint.css

@@ -29,6 +29,11 @@
     --dixy-font-title-sm-family:
       "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
     --dixy-skin-edge: #5f86bd;
+    --dixy-skin-field-edge: color-mix(
+      in oklab,
+      var(--dixy-color-base-9) 50%,
+      var(--dixy-color-base-8)
+    );
     --dixy-organic-density: 55;
     --dixy-organic-cornerDensity: 100;
     --dixy-organic-canopyDepth: 40;
@@ -116,7 +121,6 @@
     --dixy-organic-b: #9cc2f0;
     --dixy-organic-c: #ffd27a;
     --dixy-organic-d: #bcd6f5;
-    --dixy-skin-selected: var(--dixy-skin-finish);
     --dixy-skin-edge: #8fb3e6;
     --dixy-skin-surface: color-mix(
       in srgb,
@@ -129,6 +133,7 @@
       #123766
     );
   }
+
   .dixy-theme[data-dixy-skin="dixy/blueprint"][data-relief="2"] {
     --dixy-skin-shadow:
       var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
@@ -154,11 +159,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/blueprint"] {
+  .dixy-theme[data-dixy-skin="dixy/blueprint"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/blueprint"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -262,6 +265,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/blueprint"]: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,
@@ -294,7 +319,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:
@@ -304,6 +329,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/blueprint"]: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/blueprint"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *):is(
@@ -334,14 +396,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/blueprint"]: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/blueprint"]: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/blueprint"]
     .dixy-toggle-group:is([data-attached], [data-segmented]):not(
       [data-dixy-material-override]
@@ -356,7 +423,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/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)),
@@ -162,13 +167,11 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/brutalist-concrete"] {
-    position: relative;
-    isolation: isolate;
-  }
   .dixy-theme[data-dixy-skin="dixy/brutalist-concrete"]:not(
       .dixy-portal-scope
     ) {
+    position: relative;
+    isolation: isolate;
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -277,6 +280,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 +336,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 +346,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 +415,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 +442,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": 32213,
+    "gzipBytes": 4721
   },
   {
     "id": "dixy/retro-os",
-    "cssBytes": 27504,
-    "gzipBytes": 4041
+    "cssBytes": 29728,
+    "gzipBytes": 4335
   },
   {
     "id": "dixy/winamp-signal",
-    "cssBytes": 32951,
-    "gzipBytes": 4638
+    "cssBytes": 35209,
+    "gzipBytes": 4929
   },
   {
     "id": "dixy/studio-hardware",
-    "cssBytes": 28071,
-    "gzipBytes": 4068
+    "cssBytes": 30333,
+    "gzipBytes": 4374
   },
   {
     "id": "dixy/prism-glass",
-    "cssBytes": 30202,
-    "gzipBytes": 4352
+    "cssBytes": 32432,
+    "gzipBytes": 4642
   },
   {
     "id": "dixy/tactile-atelier",
-    "cssBytes": 30381,
-    "gzipBytes": 4403
+    "cssBytes": 32751,
+    "gzipBytes": 4714
   },
   {
     "id": "dixy/ocean-depths",
-    "cssBytes": 27186,
-    "gzipBytes": 3985
+    "cssBytes": 29557,
+    "gzipBytes": 4310
   },
   {
     "id": "dixy/candy-clay",
-    "cssBytes": 25291,
-    "gzipBytes": 3669
+    "cssBytes": 27795,
+    "gzipBytes": 3998
   },
   {
     "id": "dixy/art-deco",
-    "cssBytes": 27264,
-    "gzipBytes": 4134
+    "cssBytes": 29488,
+    "gzipBytes": 4421
   },
   {
     "id": "dixy/y2k-titanium",
-    "cssBytes": 31119,
-    "gzipBytes": 4455
+    "cssBytes": 35477,
+    "gzipBytes": 4974
   },
   {
     "id": "dixy/material-light",
-    "cssBytes": 27285,
-    "gzipBytes": 3850
+    "cssBytes": 29545,
+    "gzipBytes": 4156
   },
   {
     "id": "dixy/scrapbook",
-    "cssBytes": 21547,
-    "gzipBytes": 3239
+    "cssBytes": 23773,
+    "gzipBytes": 3532
   },
   {
     "id": "dixy/blueprint",
-    "cssBytes": 28736,
-    "gzipBytes": 4304
+    "cssBytes": 30962,
+    "gzipBytes": 4597
   },
   {
     "id": "dixy/riso-zine",
-    "cssBytes": 25111,
-    "gzipBytes": 3851
+    "cssBytes": 27337,
+    "gzipBytes": 4145
   },
   {
     "id": "dixy/neon-night-market",
-    "cssBytes": 29128,
-    "gzipBytes": 4152
+    "cssBytes": 31394,
+    "gzipBytes": 4460
   },
   {
     "id": "dixy/sumi-ink",
-    "cssBytes": 23688,
-    "gzipBytes": 3730
+    "cssBytes": 25912,
+    "gzipBytes": 4029
   },
   {
     "id": "dixy/tokyo-transit",
-    "cssBytes": 24216,
-    "gzipBytes": 3607
+    "cssBytes": 26474,
+    "gzipBytes": 3904
   },
   {
     "id": "dixy/phosphor-terminal",
-    "cssBytes": 31915,
-    "gzipBytes": 4372
+    "cssBytes": 34181,
+    "gzipBytes": 4677
   },
   {
     "id": "dixy/ansi-panes",
-    "cssBytes": 29253,
-    "gzipBytes": 4276
+    "cssBytes": 31481,
+    "gzipBytes": 4572
   },
   {
     "id": "dixy/swiss-poster",
-    "cssBytes": 23207,
-    "gzipBytes": 3544
+    "cssBytes": 27450,
+    "gzipBytes": 4039
   },
   {
     "id": "dixy/azulejo-tile",
-    "cssBytes": 30290,
-    "gzipBytes": 4351
+    "cssBytes": 32546,
+    "gzipBytes": 4656
   },
   {
     "id": "dixy/brutalist-concrete",
-    "cssBytes": 30479,
-    "gzipBytes": 4408
+    "cssBytes": 32747,
+    "gzipBytes": 4723
   },
   {
     "id": "dixy/atomic-lounge",
-    "cssBytes": 29623,
-    "gzipBytes": 4198
+    "cssBytes": 31881,
+    "gzipBytes": 4504
   },
   {
     "id": "dixy/orbital-hud",
-    "cssBytes": 30422,
-    "gzipBytes": 4356
+    "cssBytes": 34633,
+    "gzipBytes": 4856
   },
   {
     "id": "dixy/freighter",
-    "cssBytes": 30105,
-    "gzipBytes": 4555
+    "cssBytes": 34300,
+    "gzipBytes": 5035
   },
   {
     "id": "dixy/solar-sail",
-    "cssBytes": 28634,
-    "gzipBytes": 4174
+    "cssBytes": 30862,
+    "gzipBytes": 4480
   },
   {
     "id": "dixy/diwali-lights",
-    "cssBytes": 28680,
-    "gzipBytes": 4216
+    "cssBytes": 30938,
+    "gzipBytes": 4520
   },
   {
     "id": "dixy/papel-picado",
-    "cssBytes": 27866,
-    "gzipBytes": 4096
+    "cssBytes": 30122,
+    "gzipBytes": 4395
   },
   {
     "id": "dixy/holi-colours",
-    "cssBytes": 28376,
-    "gzipBytes": 4127
+    "cssBytes": 30632,
+    "gzipBytes": 4434
   },
   {
     "id": "dixy/yule-knit",
-    "cssBytes": 26873,
-    "gzipBytes": 4001
+    "cssBytes": 29099,
+    "gzipBytes": 4296
   },
   {
     "id": "dixy/glass-ui",
-    "cssBytes": 28558,
-    "gzipBytes": 4162
+    "cssBytes": 30782,
+    "gzipBytes": 4458
+  },
+  {
+    "id": "dixy/sunset-drive",
+    "cssBytes": 31380,
+    "gzipBytes": 4561
+  },
+  {
+    "id": "dixy/save-point",
+    "cssBytes": 30437,
+    "gzipBytes": 4438
+  },
+  {
+    "id": "dixy/arcade-cabinet",
+    "cssBytes": 33824,
+    "gzipBytes": 4699
+  },
+  {
+    "id": "dixy/ledger",
+    "cssBytes": 19098,
+    "gzipBytes": 2962
+  },
+  {
+    "id": "dixy/mainframe",
+    "cssBytes": 24458,
+    "gzipBytes": 3441
+  },
+  {
+    "id": "dixy/dispatch",
+    "cssBytes": 23131,
+    "gzipBytes": 3272
+  },
+  {
+    "id": "dixy/signal",
+    "cssBytes": 19222,
+    "gzipBytes": 2873
   }
 ]