@scattered-light/loomiere-mojave 0.10.0 → 0.11.0

package/dist/exports/tailwind.css

@@ -1120,7 +1120,7 @@
   --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
   --sl-side-nav-group-label-color: var(--sl-text-secondary);
   --sl-side-nav-toggle-background: var(--sl-surface-raised);
-  --sl-side-nav-toggle-border-color: var(--sl-border-strong);
+  --sl-side-nav-toggle-border-color: var(--sl-text-primary);
   --sl-stat-figure-figure-color: var(--sl-text-primary);
   --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
   --sl-stat-figure-underline-color: var(--sl-rule-color);
@@ -1304,7 +1304,7 @@
   --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
   --sl-side-nav-group-label-color: var(--sl-text-secondary);
   --sl-side-nav-toggle-background: var(--sl-surface-raised);
-  --sl-side-nav-toggle-border-color: var(--sl-border-strong);
+  --sl-side-nav-toggle-border-color: var(--sl-text-primary);
   --sl-stat-figure-figure-color: var(--sl-text-primary);
   --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
   --sl-stat-figure-underline-color: var(--sl-rule-color);
@@ -1488,7 +1488,7 @@
   --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
   --sl-side-nav-group-label-color: var(--sl-text-secondary);
   --sl-side-nav-toggle-background: var(--sl-surface-raised);
-  --sl-side-nav-toggle-border-color: var(--sl-border-strong);
+  --sl-side-nav-toggle-border-color: var(--sl-text-primary);
   --sl-stat-figure-figure-color: var(--sl-text-primary);
   --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
   --sl-stat-figure-underline-color: var(--sl-rule-color);

package/dist/exports/tokens.dtcg.json

@@ -12494,27 +12494,35 @@
       "$value": "{text.secondary}",
       "$description": "A group heading's caps label."
     },
-    "toggle-size": {
+    "toggle-width": {
       "$value": "{space.6}",
-      "$description": "The collapse button's width and height. It sits on the column's edge."
+      "$description": "The collapse handle's width. It straddles the column's edge."
+    },
+    "toggle-height": {
+      "$value": "{space.11}",
+      "$description": "The collapse handle's height, a tall tab on the column's edge."
+    },
+    "toggle-radius": {
+      "$value": "{radius.control}",
+      "$description": "The collapse handle's corners."
     },
     "toggle-offset": {
-      "$value": "{space.4}",
+      "$value": "{space.7}",
       "$description": "Distance of the collapse button from the top of the column."
     },
     "toggle-background": {
       "$type": "color",
       "$value": "{surface.raised}",
-      "$description": "The collapse button's fill."
+      "$description": "The collapse handle's fill."
     },
     "toggle-border-color": {
       "$type": "color",
-      "$value": "{border.strong}",
-      "$description": "The collapse button's outline."
+      "$value": "{text.primary}",
+      "$description": "The collapse handle's outline and chevron. It fills with this color on hover."
     },
     "collapsed-width": {
       "$value": "{space.11}",
-      "$description": "Width of the column when it is collapsed, wide enough for the collapse button."
+      "$description": "Width of the column when it is collapsed, wide enough for the collapse handle."
     }
   },
   "slider": {

package/dist/tokens.css

@@ -1901,9 +1901,10 @@
     --sl-side-nav-item-gap: var(--sl-space-2); /** Space between a row's label and its count. */
     --sl-side-nav-indicator-width: var(--sl-stroke-medium); /** The line under the current row. */
     --sl-side-nav-group-padding-top: var(--sl-space-5); /** Space above a group heading. */
-    --sl-side-nav-toggle-size: var(--sl-space-6); /** The collapse button's width and height. It sits on the column's edge. */
-    --sl-side-nav-toggle-offset: var(--sl-space-4); /** Distance of the collapse button from the top of the column. */
-    --sl-side-nav-collapsed-width: var(--sl-space-11); /** Width of the column when it is collapsed, wide enough for the collapse button. */
+    --sl-side-nav-toggle-width: var(--sl-space-6); /** The collapse handle's width. It straddles the column's edge. */
+    --sl-side-nav-toggle-height: var(--sl-space-11); /** The collapse handle's height, a tall tab on the column's edge. */
+    --sl-side-nav-toggle-offset: var(--sl-space-7); /** Distance of the collapse button from the top of the column. */
+    --sl-side-nav-collapsed-width: var(--sl-space-11); /** Width of the column when it is collapsed, wide enough for the collapse handle. */
     --sl-slider-thumb-size: var(--sl-space-5); /** Knob diameter, big enough to grab with a finger on a 4px track. */
     --sl-splitter-handle-hit-size: var(--sl-a11y-min-touch-target); /** The part a finger grabs. The line stays one stroke. A fine pointer uses a11y.min-target (24px) instead, so the grab area does not cover the panel's scrollbar. Coarse pointers keep this 44px. */
     --sl-splitter-grip-size: var(--sl-space-1); /** 4px. The diameter of one grip dot. Small enough to sit on the hairline without becoming a second control. */
@@ -2177,6 +2178,7 @@
     --sl-sheet-border-width: var(--sl-stroke-default); /** Thickness of the sides and bottom. */
     --sl-sheet-radius: var(--sl-radius-surface); /** Corners, like any card or panel. The top corners stay square under a tab label, so the tab sits flush on the rule. */
     --sl-side-nav-item-height: var(--sl-control-height-md); /** Least height of a row: the regular control height, so a row is as tall as a button. */
+    --sl-side-nav-toggle-radius: var(--sl-radius-control); /** The collapse handle's corners. */
     --sl-splitter-handle-size: var(--sl-stroke-default); /** The visible separator. One stroke, the same hairline as Separator, so a splitter reads as a divider you can grab. */
     --sl-focus-shadow-3px-error: 0 0 0 3px var(--sl-status-error); /** Focus halo for a field with an error. */
     --sl-calendar-day-color: var(--sl-text-primary); /** A day in the month being shown. */
@@ -2277,6 +2279,7 @@
     --sl-status-level-error-bold-fg: var(--sl-scope-error-on-solid); /** bold in error: solid in error */
     --sl-description-list-value-color: var(--sl-text-primary); /** Values. */
     --sl-side-nav-item-color: var(--sl-text-primary); /** A row's text. */
+    --sl-side-nav-toggle-border-color: var(--sl-text-primary); /** The collapse handle's outline and chevron. It fills with this color on hover. */
     --sl-stat-figure-figure-color: var(--sl-text-primary); /** The figure's color. */
     --sl-focus-shadow-3px-primary: 0 0 0 3px var(--sl-interactive-tint-hover); /** Soft focus halo for inputs. */
     --sl-focus-shadow-3px-primary-soft: 0 0 0 3px var(--sl-interactive-tint-active); /** Slightly stronger focus halo for inputs on tinted surfaces. */
@@ -2381,8 +2384,7 @@
     --sl-side-nav-count-color: var(--sl-text-accent); /** A count at the end of a row, such as items open. Accent text so it asks for attention. */
     --sl-side-nav-count-color-quiet: var(--sl-text-secondary); /** A count that is only information (tone="quiet"), such as a total. */
     --sl-side-nav-group-label-color: var(--sl-text-secondary); /** A group heading's caps label. */
-    --sl-side-nav-toggle-background: var(--sl-surface-raised); /** The collapse button's fill. */
-    --sl-side-nav-toggle-border-color: var(--sl-border-strong); /** The collapse button's outline. */
+    --sl-side-nav-toggle-background: var(--sl-surface-raised); /** The collapse handle's fill. */
     --sl-stat-figure-figure-color-accent: var(--sl-text-accent); /** The figure's color at tone="accent", for a figure that asks for action (open questions, items to review). */
     --sl-stat-figure-label-color: var(--sl-text-secondary); /** The caps label above the figure. */
     --sl-stat-figure-caption-color: var(--sl-text-secondary); /** The caption under the figure. */
@@ -5921,7 +5923,7 @@
     --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
     --sl-side-nav-group-label-color: var(--sl-text-secondary);
     --sl-side-nav-toggle-background: var(--sl-surface-raised);
-    --sl-side-nav-toggle-border-color: var(--sl-border-strong);
+    --sl-side-nav-toggle-border-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
     --sl-stat-figure-underline-color: var(--sl-rule-color);
@@ -6105,7 +6107,7 @@
     --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
     --sl-side-nav-group-label-color: var(--sl-text-secondary);
     --sl-side-nav-toggle-background: var(--sl-surface-raised);
-    --sl-side-nav-toggle-border-color: var(--sl-border-strong);
+    --sl-side-nav-toggle-border-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
     --sl-stat-figure-underline-color: var(--sl-rule-color);
@@ -6289,7 +6291,7 @@
     --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
     --sl-side-nav-group-label-color: var(--sl-text-secondary);
     --sl-side-nav-toggle-background: var(--sl-surface-raised);
-    --sl-side-nav-toggle-border-color: var(--sl-border-strong);
+    --sl-side-nav-toggle-border-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
     --sl-stat-figure-underline-color: var(--sl-rule-color);

package/dist/tokens.d.ts

@@ -2855,7 +2855,9 @@ declare const tokens: {
     readonly "count-color-quiet": string;
     readonly "group-padding-top": string;
     readonly "group-label-color": string;
-    readonly "toggle-size": string;
+    readonly "toggle-width": string;
+    readonly "toggle-height": string;
+    readonly "toggle-radius": string;
     readonly "toggle-offset": string;
     readonly "toggle-background": string;
     readonly "toggle-border-color": string;

package/dist/tokens.js

@@ -2855,10 +2855,12 @@ const tokens = {
     "count-color-quiet": "#4f5852",
     "group-padding-top": "1.25rem",
     "group-label-color": "#4f5852",
-    "toggle-size": "1.5rem",
-    "toggle-offset": "1rem",
+    "toggle-width": "1.5rem",
+    "toggle-height": "2.75rem",
+    "toggle-radius": "0.125rem",
+    "toggle-offset": "1.75rem",
     "toggle-background": "#f8fbf9",
-    "toggle-border-color": "#7c8980",
+    "toggle-border-color": "#221928",
     "collapsed-width": "2.75rem"
   },
   "slider": {

package/dist/tokens.json

@@ -20828,19 +20828,35 @@
       "description": "A group heading's caps label."
     },
     {
-      "name": "--sl-side-nav-toggle-size",
-      "path": "side-nav.toggle-size",
+      "name": "--sl-side-nav-toggle-width",
+      "path": "side-nav.toggle-width",
       "layer": "component",
       "value": "1.5rem",
       "references": "{space.6}",
-      "description": "The collapse button's width and height. It sits on the column's edge."
+      "description": "The collapse handle's width. It straddles the column's edge."
+    },
+    {
+      "name": "--sl-side-nav-toggle-height",
+      "path": "side-nav.toggle-height",
+      "layer": "component",
+      "value": "2.75rem",
+      "references": "{space.11}",
+      "description": "The collapse handle's height, a tall tab on the column's edge."
+    },
+    {
+      "name": "--sl-side-nav-toggle-radius",
+      "path": "side-nav.toggle-radius",
+      "layer": "component",
+      "value": "0.125rem",
+      "references": "{radius.control}",
+      "description": "The collapse handle's corners."
     },
     {
       "name": "--sl-side-nav-toggle-offset",
       "path": "side-nav.toggle-offset",
       "layer": "component",
-      "value": "1rem",
-      "references": "{space.4}",
+      "value": "1.75rem",
+      "references": "{space.7}",
       "description": "Distance of the collapse button from the top of the column."
     },
     {
@@ -20850,16 +20866,16 @@
       "type": "color",
       "value": "#f8fbf9",
       "references": "{surface.raised}",
-      "description": "The collapse button's fill."
+      "description": "The collapse handle's fill."
     },
     {
       "name": "--sl-side-nav-toggle-border-color",
       "path": "side-nav.toggle-border-color",
       "layer": "component",
       "type": "color",
-      "value": "#7c8980",
-      "references": "{border.strong}",
-      "description": "The collapse button's outline."
+      "value": "#221928",
+      "references": "{text.primary}",
+      "description": "The collapse handle's outline and chevron. It fills with this color on hover."
     },
     {
       "name": "--sl-side-nav-collapsed-width",
@@ -20867,7 +20883,7 @@
       "layer": "component",
       "value": "2.75rem",
       "references": "{space.11}",
-      "description": "Width of the column when it is collapsed, wide enough for the collapse button."
+      "description": "Width of the column when it is collapsed, wide enough for the collapse handle."
     },
     {
       "name": "--sl-slider-thumb-size",
@@ -23797,8 +23813,9 @@
         "--sl-side-nav-count-color": "#70463c",
         "--sl-side-nav-count-color-quiet": "#3c5a66",
         "--sl-side-nav-group-label-color": "#3c5a66",
+        "--sl-side-nav-toggle-radius": "0.0938rem",
         "--sl-side-nav-toggle-background": "#f3fcff",
-        "--sl-side-nav-toggle-border-color": "#6b8d99",
+        "--sl-side-nav-toggle-border-color": "#203d48",
         "--sl-stat-figure-figure-font-size": "clamp(1.8144rem, 1.6934rem + 0.6048vw, 2.1773rem)",
         "--sl-stat-figure-figure-font-size-sm": "clamp(1.26rem, 1.176rem + 0.42vw, 1.512rem)",
         "--sl-stat-figure-figure-line-height-sm": 1.183,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-mojave",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Mojave, the demo theme for Loomiere: desert stone and purple, built from one brand file.",
   "repository": {
     "type": "git",
@@ -62,6 +62,6 @@
     }
   },
   "devDependencies": {
-    "@scattered-light/loomiere": "0.10.0"
+    "@scattered-light/loomiere": "0.11.0"
   }
 }