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

package/dist/freighter.css

@@ -31,6 +31,11 @@
     --dixy-font-title-sm-family:
       "Archivo Black", "Arial Black", ui-sans-serif, sans-serif;
     --dixy-skin-edge: #9b9a94;
+    --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;
@@ -128,7 +133,6 @@
     --dixy-organic-b: #0e0f10;
     --dixy-organic-c: #e5533d;
     --dixy-organic-d: #a5a59c;
-    --dixy-skin-selected: var(--dixy-skin-finish);
     --dixy-color-text-primary: color-mix(
       in srgb,
       var(--dixy-color-base-12) 85%,
@@ -146,6 +150,7 @@
       #2b2e30
     );
   }
+
   .dixy-theme[data-dixy-skin="dixy/freighter"][data-relief="2"] {
     --dixy-skin-shadow:
       var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
@@ -171,11 +176,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/freighter"] {
+  .dixy-theme[data-dixy-skin="dixy/freighter"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/freighter"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -279,6 +282,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/freighter"]: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,
@@ -311,7 +336,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:
@@ -321,6 +346,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/freighter"]: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/freighter"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *):is(
@@ -351,14 +413,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/freighter"]: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/freighter"]: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/freighter"]
     .dixy-toggle-group:is([data-attached], [data-segmented]):not(
       [data-dixy-material-override]
@@ -373,7 +440,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);
@@ -834,16 +901,72 @@
     :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/freighter"] {
     border-radius: 0;
     --dixy-chrome-bar-radius: 0px;
-    clip-path: polygon(
-      10px 0,
-      calc(100% - 10px) 0,
-      100% 10px,
-      100% calc(100% - 10px),
-      calc(100% - 10px) 100%,
-      10px 100%,
-      0 calc(100% - 10px),
-      0 10px
-    );
+  }
+  @supports (corner-shape: bevel) {
+    .dixy-theme[data-dixy-skin="dixy/freighter"]
+      :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/freighter"] {
+      border-radius: 10px;
+      corner-shape: bevel;
+    }
+  }
+  @supports not (corner-shape: bevel) {
+    .dixy-theme[data-dixy-skin="dixy/freighter"]
+      :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/freighter"] {
+      clip-path: polygon(
+        10px 0,
+        calc(100% - 10px) 0,
+        100% 10px,
+        100% calc(100% - 10px),
+        calc(100% - 10px) 100%,
+        10px 100%,
+        0 calc(100% - 10px),
+        0 10px
+      );
+    }
+    .dixy-theme[data-dixy-skin="dixy/freighter"]
+      :is(
+        .dixy-card,
+        .dixy-dialog-popup
+      )[data-dixy-skin="dixy/freighter"]::after {
+      content: "";
+      position: absolute;
+      inset: calc(var(--dixy-skin-frame-width, 1px) * -1);
+      pointer-events: none;
+      z-index: 1;
+      background:
+        linear-gradient(
+            to bottom right,
+            transparent 50%,
+            var(--dixy-skin-edge) 50%
+              calc(50% + var(--dixy-skin-frame-width, 1px)),
+            transparent calc(50% + var(--dixy-skin-frame-width, 1px))
+          )
+          top left/10px 10px no-repeat,
+        linear-gradient(
+            to bottom left,
+            transparent 50%,
+            var(--dixy-skin-edge) 50%
+              calc(50% + var(--dixy-skin-frame-width, 1px)),
+            transparent calc(50% + var(--dixy-skin-frame-width, 1px))
+          )
+          top right/10px 10px no-repeat,
+        linear-gradient(
+            to top right,
+            transparent 50%,
+            var(--dixy-skin-edge) 50%
+              calc(50% + var(--dixy-skin-frame-width, 1px)),
+            transparent calc(50% + var(--dixy-skin-frame-width, 1px))
+          )
+          bottom left/10px 10px no-repeat,
+        linear-gradient(
+            to top left,
+            transparent 50%,
+            var(--dixy-skin-edge) 50%
+              calc(50% + var(--dixy-skin-frame-width, 1px)),
+            transparent calc(50% + var(--dixy-skin-frame-width, 1px))
+          )
+          bottom right/10px 10px no-repeat;
+    }
   }
   .dixy-theme[data-dixy-skin="dixy/freighter"]
     :is(.dixy-card)[data-dixy-skin="dixy/freighter"]

package/dist/glass-ui.css

@@ -23,6 +23,11 @@
     --dixy-font-title-md-family: ui-sans-serif, system-ui, sans-serif;
     --dixy-font-title-sm-family: ui-sans-serif, system-ui, sans-serif;
     --dixy-skin-edge: #ffffffb3;
+    --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: 60;
     --dixy-organic-canopyDepth: 50;
@@ -126,7 +131,6 @@
     --dixy-organic-b: #6ea8ff;
     --dixy-organic-c: #d68cff;
     --dixy-organic-d: #e8f0ff;
-    --dixy-skin-selected: var(--dixy-skin-finish);
     --dixy-skin-edge: #ffffff38;
     --dixy-skin-surface: color-mix(
       in srgb,
@@ -139,6 +143,7 @@
       #1c2233a6
     );
   }
+
   .dixy-theme[data-dixy-skin="dixy/glass-ui"][data-relief="2"] {
     --dixy-skin-shadow:
       var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
@@ -164,11 +169,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/glass-ui"] {
+  .dixy-theme[data-dixy-skin="dixy/glass-ui"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/glass-ui"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -272,6 +275,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/glass-ui"]: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,
@@ -304,7 +329,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:
@@ -314,6 +339,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/glass-ui"]: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/glass-ui"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *):is(
@@ -344,14 +406,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/glass-ui"]: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/glass-ui"]: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/glass-ui"]
     .dixy-toggle-group:is([data-attached], [data-segmented]):not(
       [data-dixy-material-override]
@@ -366,7 +433,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/holi-colours.css

@@ -41,6 +41,11 @@
       "Fredoka Variable", "Fredoka", ui-rounded, "SF Pro Rounded", "Nunito",
       sans-serif;
     --dixy-skin-edge: #efe7f2;
+    --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: 75;
     --dixy-organic-canopyDepth: 50;
@@ -122,7 +127,6 @@
     --dixy-organic-b: #ffd43b;
     --dixy-organic-c: #38d9a9;
     --dixy-organic-d: #74c0fc;
-    --dixy-skin-selected: var(--dixy-skin-finish);
     --dixy-color-text-primary: color-mix(
       in srgb,
       var(--dixy-color-base-12) 85%,
@@ -140,6 +144,7 @@
       #1a1824
     );
   }
+
   .dixy-theme[data-dixy-skin="dixy/holi-colours"][data-relief="2"] {
     --dixy-skin-shadow:
       var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
@@ -165,11 +170,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/holi-colours"] {
+  .dixy-theme[data-dixy-skin="dixy/holi-colours"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/holi-colours"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -275,6 +278,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/holi-colours"]: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,
@@ -307,7 +334,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:
@@ -317,6 +344,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/holi-colours"]: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/holi-colours"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *):is(
@@ -347,14 +413,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/holi-colours"]: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/holi-colours"]: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/holi-colours"]
     .dixy-toggle-group:is([data-attached], [data-segmented]):not(
       [data-dixy-material-override]
@@ -369,7 +440,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);