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

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)),
@@ -262,6 +267,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,
@@ -275,6 +302,11 @@
   )[data-dixy-skin="dixy/blueprint"] {
     border-radius: calc(var(--dixy-radius-control) * 0.5);
   }
+  :is(.dixy-textarea)[data-dixy-skin="dixy/blueprint"] {
+    border-radius: calc(
+      min(var(--dixy-radius-control), var(--dixy-radius-card)) * 0.5
+    );
+  }
   :is(
       .dixy-input,
       .dixy-textarea,
@@ -289,7 +321,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:
@@ -299,6 +331,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(
@@ -329,14 +398,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]
@@ -351,7 +425,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)),
@@ -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,
@@ -290,6 +319,11 @@
   )[data-dixy-skin="dixy/brutalist-concrete"] {
     border-radius: calc(var(--dixy-radius-control) * 1);
   }
+  :is(.dixy-textarea)[data-dixy-skin="dixy/brutalist-concrete"] {
+    border-radius: calc(
+      min(var(--dixy-radius-control), var(--dixy-radius-card)) * 1
+    );
+  }
   :is(
       .dixy-input,
       .dixy-textarea,
@@ -304,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:
@@ -314,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(
@@ -344,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]
@@ -366,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,162 +1,192 @@
 [
   {
     "id": "dixy/living-forest",
-    "cssBytes": 29680,
-    "gzipBytes": 4377
+    "cssBytes": 32270,
+    "gzipBytes": 4717
   },
   {
     "id": "dixy/retro-os",
-    "cssBytes": 27345,
-    "gzipBytes": 4016
+    "cssBytes": 29780,
+    "gzipBytes": 4333
   },
   {
     "id": "dixy/winamp-signal",
-    "cssBytes": 32787,
-    "gzipBytes": 4614
+    "cssBytes": 35266,
+    "gzipBytes": 4926
   },
   {
     "id": "dixy/studio-hardware",
-    "cssBytes": 27905,
-    "gzipBytes": 4043
+    "cssBytes": 30392,
+    "gzipBytes": 4372
   },
   {
     "id": "dixy/prism-glass",
-    "cssBytes": 30040,
-    "gzipBytes": 4327
+    "cssBytes": 32487,
+    "gzipBytes": 4640
   },
   {
     "id": "dixy/tactile-atelier",
-    "cssBytes": 30215,
-    "gzipBytes": 4377
+    "cssBytes": 32810,
+    "gzipBytes": 4711
   },
   {
     "id": "dixy/ocean-depths",
-    "cssBytes": 27023,
-    "gzipBytes": 3960
+    "cssBytes": 29613,
+    "gzipBytes": 4308
   },
   {
     "id": "dixy/candy-clay",
-    "cssBytes": 25128,
-    "gzipBytes": 3643
+    "cssBytes": 27849,
+    "gzipBytes": 3996
   },
   {
     "id": "dixy/art-deco",
-    "cssBytes": 27105,
-    "gzipBytes": 4110
+    "cssBytes": 29540,
+    "gzipBytes": 4420
   },
   {
     "id": "dixy/y2k-titanium",
-    "cssBytes": 30956,
-    "gzipBytes": 4431
+    "cssBytes": 35533,
+    "gzipBytes": 4971
   },
   {
     "id": "dixy/material-light",
-    "cssBytes": 27120,
-    "gzipBytes": 3825
+    "cssBytes": 29603,
+    "gzipBytes": 4155
   },
   {
     "id": "dixy/scrapbook",
-    "cssBytes": 21387,
-    "gzipBytes": 3215
+    "cssBytes": 23826,
+    "gzipBytes": 3530
   },
   {
     "id": "dixy/blueprint",
-    "cssBytes": 28574,
-    "gzipBytes": 4280
+    "cssBytes": 31015,
+    "gzipBytes": 4595
   },
   {
     "id": "dixy/riso-zine",
-    "cssBytes": 24949,
-    "gzipBytes": 3826
+    "cssBytes": 27390,
+    "gzipBytes": 4144
   },
   {
     "id": "dixy/neon-night-market",
-    "cssBytes": 28958,
-    "gzipBytes": 4127
+    "cssBytes": 31455,
+    "gzipBytes": 4459
   },
   {
     "id": "dixy/sumi-ink",
-    "cssBytes": 23527,
-    "gzipBytes": 3705
+    "cssBytes": 25964,
+    "gzipBytes": 4030
   },
   {
     "id": "dixy/tokyo-transit",
-    "cssBytes": 24052,
-    "gzipBytes": 3583
+    "cssBytes": 26531,
+    "gzipBytes": 3901
   },
   {
     "id": "dixy/phosphor-terminal",
-    "cssBytes": 31747,
-    "gzipBytes": 4347
+    "cssBytes": 34242,
+    "gzipBytes": 4675
   },
   {
     "id": "dixy/ansi-panes",
-    "cssBytes": 29092,
-    "gzipBytes": 4252
+    "cssBytes": 31535,
+    "gzipBytes": 4569
   },
   {
     "id": "dixy/swiss-poster",
-    "cssBytes": 23044,
-    "gzipBytes": 3521
+    "cssBytes": 27506,
+    "gzipBytes": 4039
   },
   {
     "id": "dixy/azulejo-tile",
-    "cssBytes": 30127,
-    "gzipBytes": 4325
+    "cssBytes": 32602,
+    "gzipBytes": 4655
   },
   {
     "id": "dixy/brutalist-concrete",
-    "cssBytes": 30310,
-    "gzipBytes": 4385
+    "cssBytes": 32809,
+    "gzipBytes": 4721
   },
   {
     "id": "dixy/atomic-lounge",
-    "cssBytes": 29459,
-    "gzipBytes": 4174
+    "cssBytes": 31938,
+    "gzipBytes": 4502
   },
   {
     "id": "dixy/orbital-hud",
-    "cssBytes": 30260,
-    "gzipBytes": 4331
+    "cssBytes": 34688,
+    "gzipBytes": 4853
   },
   {
     "id": "dixy/freighter",
-    "cssBytes": 29945,
-    "gzipBytes": 4527
+    "cssBytes": 34353,
+    "gzipBytes": 5033
   },
   {
     "id": "dixy/solar-sail",
-    "cssBytes": 28473,
-    "gzipBytes": 4150
+    "cssBytes": 30916,
+    "gzipBytes": 4478
   },
   {
     "id": "dixy/diwali-lights",
-    "cssBytes": 28516,
-    "gzipBytes": 4191
-  },
-  {
-    "id": "dixy/lunar-new-year",
-    "cssBytes": 26012,
-    "gzipBytes": 3896
+    "cssBytes": 30995,
+    "gzipBytes": 4521
   },
   {
     "id": "dixy/papel-picado",
-    "cssBytes": 27703,
-    "gzipBytes": 4072
+    "cssBytes": 30178,
+    "gzipBytes": 4395
   },
   {
     "id": "dixy/holi-colours",
-    "cssBytes": 28213,
-    "gzipBytes": 4105
+    "cssBytes": 30688,
+    "gzipBytes": 4433
   },
   {
     "id": "dixy/yule-knit",
-    "cssBytes": 26713,
-    "gzipBytes": 3977
+    "cssBytes": 29152,
+    "gzipBytes": 4293
   },
   {
     "id": "dixy/glass-ui",
-    "cssBytes": 28399,
-    "gzipBytes": 4138
+    "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
   }
 ]