@scattered-light/loomiere-mojave 0.13.0 → 0.14.0

package/dist/exports/tailwind.css

@@ -1100,6 +1100,8 @@
   --sl-app-bar-border-color: var(--sl-rule-color);
   --sl-app-bar-divider-color: var(--sl-border-strong);
   --sl-collection-tree-line-color: var(--sl-border-strong);
+  --sl-collection-tree-parent-row-background: var(--sl-table-background);
+  --sl-collection-tree-parent-row-hover: var(--sl-table-row-hover);
   --sl-collection-disclosure-color: var(--sl-text-primary);
   --sl-description-list-row-border-color: var(--sl-border-subtle);
   --sl-description-list-label-color: var(--sl-text-secondary);
@@ -1287,6 +1289,8 @@
   --sl-app-bar-border-color: var(--sl-rule-color);
   --sl-app-bar-divider-color: var(--sl-border-strong);
   --sl-collection-tree-line-color: var(--sl-border-strong);
+  --sl-collection-tree-parent-row-background: var(--sl-table-background);
+  --sl-collection-tree-parent-row-hover: var(--sl-table-row-hover);
   --sl-collection-disclosure-color: var(--sl-text-primary);
   --sl-description-list-row-border-color: var(--sl-border-subtle);
   --sl-description-list-label-color: var(--sl-text-secondary);
@@ -1474,6 +1478,8 @@
   --sl-app-bar-border-color: var(--sl-rule-color);
   --sl-app-bar-divider-color: var(--sl-border-strong);
   --sl-collection-tree-line-color: var(--sl-border-strong);
+  --sl-collection-tree-parent-row-background: var(--sl-table-background);
+  --sl-collection-tree-parent-row-hover: var(--sl-table-row-hover);
   --sl-collection-disclosure-color: var(--sl-text-primary);
   --sl-description-list-row-border-color: var(--sl-border-subtle);
   --sl-description-list-label-color: var(--sl-text-secondary);

package/dist/exports/tokens.dtcg.json

@@ -12198,6 +12198,16 @@
       "$value": "{border.strong}",
       "$description": "The elbow connector from a child row back to its parent, with treeLines."
     },
+    "tree-parent-row-background": {
+      "$type": "color",
+      "$value": "{table.background}",
+      "$description": "Fill of a parent row in a tree with treeLines, so a parent reads a step off its children."
+    },
+    "tree-parent-row-hover": {
+      "$type": "color",
+      "$value": "{table.row-hover}",
+      "$description": "A parent row under the pointer, with treeLines. A brand sets it a step darker than table.row-hover so a parent still stands out when hovered."
+    },
     "disclosure-size-small": {
       "$value": "{space.5}",
       "$description": "The expand and collapse button when a table sets disclosure=\"small\", small enough that a parent row keeps its siblings' height."
@@ -12456,6 +12466,11 @@
       "$value": "{space.3-5}",
       "$description": "Space either side of the tab label's text."
     },
+    "tab-text-offset": {
+      "$type": "dimension",
+      "$value": "0px",
+      "$description": "Nudges the tab label down, for a typeface whose caps sit high in the line box. Zero centers the line box."
+    },
     "tab-radius": {
       "$value": "{radius.sm}",
       "$description": "The tab label's top corners. Its bottom corners stay square where it meets the rule."

package/dist/tokens.css

@@ -795,6 +795,7 @@
     --sl-picker-button-max-width: 18rem; /** Widest the button grows. A longer choice is cut with an ellipsis; the label never is. */
     --sl-preview-card-popup-min-width: 300px; /** Narrowest a preview card gets, so a short title still has room for its image. */
     --sl-preview-card-popup-max-width: 450px; /** Widest a preview card gets, so its description keeps a comfortable line length. */
+    --sl-sheet-tab-text-offset: 0px; /** Nudges the tab label down, for a typeface whose caps sit high in the line box. Zero centers the line box. */
     --sl-slider-vertical-height: 200px; /** Default length of a vertical slider. */
     --sl-splitter-key-step: 5%; /** One arrow press moves the handle by 5% of the splitter. Dryden used 5%: a nudge you can see, not a jump. */
     --sl-splitter-key-step-large: 10%; /** The Shift step. Twice the arrow step, so a few presses cross the panel without holding the key. */
@@ -2419,6 +2420,7 @@
     --sl-table-total-rule-color: var(--sl-rule-color); /** The line above a subtotal or total row and the double line under a grand total. The working-paper rule color, so totals and sheet tops are ruled in the same ink. */
     --sl-table-total-background: var(--sl-table-background); /** Fill of a subtotal or grand total row: the cell color, so the rules mark the total instead of a band. The footer's default totals row keeps the header tray. */
     --sl-app-bar-border-color: var(--sl-rule-color); /** The line under the bar, in the rule color, so an ink rule brand gets an ink line here too. */
+    --sl-collection-tree-parent-row-background: var(--sl-table-background); /** Fill of a parent row in a tree with treeLines, so a parent reads a step off its children. */
     --sl-sheet-rule-color: var(--sl-rule-color); /** The top rule's color: the working-paper rule color, so sheets and ruled tables match. */
     --sl-sheet-tab-color: var(--sl-text-on-inverse-surface); /** Text on the tab label. */
     --sl-side-nav-indicator-color: var(--sl-rule-color); /** The current row's line: the working-paper rule color, so the nav and the sheets share one ink. */
@@ -2427,6 +2429,7 @@
     --sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse); /** Text on the pressed toggle. */
     --sl-check-background: var(--sl-field-background); /** Empty box, the same fill as a field so it reads as something to fill in. */
     --sl-popup-arrow-fill: var(--sl-popup-background); /** The arrow is part of the popup, so it takes the popup's fill. */
+    --sl-collection-tree-parent-row-hover: var(--sl-table-row-hover); /** A parent row under the pointer, with treeLines. A brand sets it a step darker than table.row-hover so a parent still stands out when hovered. */
   }
 
   /* Look: Classic (data-look='classic'). */
@@ -5913,6 +5916,8 @@
     --sl-app-bar-border-color: var(--sl-rule-color);
     --sl-app-bar-divider-color: var(--sl-border-strong);
     --sl-collection-tree-line-color: var(--sl-border-strong);
+    --sl-collection-tree-parent-row-background: var(--sl-table-background);
+    --sl-collection-tree-parent-row-hover: var(--sl-table-row-hover);
     --sl-collection-disclosure-color: var(--sl-text-primary);
     --sl-description-list-row-border-color: var(--sl-border-subtle);
     --sl-description-list-label-color: var(--sl-text-secondary);
@@ -6100,6 +6105,8 @@
     --sl-app-bar-border-color: var(--sl-rule-color);
     --sl-app-bar-divider-color: var(--sl-border-strong);
     --sl-collection-tree-line-color: var(--sl-border-strong);
+    --sl-collection-tree-parent-row-background: var(--sl-table-background);
+    --sl-collection-tree-parent-row-hover: var(--sl-table-row-hover);
     --sl-collection-disclosure-color: var(--sl-text-primary);
     --sl-description-list-row-border-color: var(--sl-border-subtle);
     --sl-description-list-label-color: var(--sl-text-secondary);
@@ -6287,6 +6294,8 @@
     --sl-app-bar-border-color: var(--sl-rule-color);
     --sl-app-bar-divider-color: var(--sl-border-strong);
     --sl-collection-tree-line-color: var(--sl-border-strong);
+    --sl-collection-tree-parent-row-background: var(--sl-table-background);
+    --sl-collection-tree-parent-row-hover: var(--sl-table-row-hover);
     --sl-collection-disclosure-color: var(--sl-text-primary);
     --sl-description-list-row-border-color: var(--sl-border-subtle);
     --sl-description-list-label-color: var(--sl-text-secondary);

package/dist/tokens.d.ts

@@ -2771,6 +2771,8 @@ declare const tokens: {
     readonly "header-height-md": string;
     readonly "tree-indent": string;
     readonly "tree-line-color": string;
+    readonly "tree-parent-row-background": string;
+    readonly "tree-parent-row-hover": string;
     readonly "disclosure-size-small": string;
     readonly "tree-line-offset": string;
     readonly "tree-row-height-parent": string;
@@ -2846,6 +2848,7 @@ declare const tokens: {
     readonly "tab-color": string;
     readonly "tab-height": string;
     readonly "tab-padding-inline": string;
+    readonly "tab-text-offset": string;
     readonly "tab-radius": string;
     readonly "header-gap": string;
   };

package/dist/tokens.js

@@ -2771,6 +2771,8 @@ const tokens = {
     "header-height-md": "3.25rem",
     "tree-indent": "1rem",
     "tree-line-color": "#7c8980",
+    "tree-parent-row-background": "#ffffff",
+    "tree-parent-row-hover": "#f4e7ff",
     "disclosure-size-small": "1.25rem",
     "tree-line-offset": "0.5rem",
     "tree-row-height-parent": "2.25rem",
@@ -2846,6 +2848,7 @@ const tokens = {
     "tab-color": "#f8fbf9",
     "tab-height": "1.75rem",
     "tab-padding-inline": "0.875rem",
+    "tab-text-offset": "0px",
     "tab-radius": "0.125rem",
     "header-gap": "0.75rem"
   },

package/dist/tokens.json

@@ -20307,6 +20307,24 @@
       "references": "{border.strong}",
       "description": "The elbow connector from a child row back to its parent, with treeLines."
     },
+    {
+      "name": "--sl-collection-tree-parent-row-background",
+      "path": "collection.tree-parent-row-background",
+      "layer": "component",
+      "type": "color",
+      "value": "#ffffff",
+      "references": "{table.background}",
+      "description": "Fill of a parent row in a tree with treeLines, so a parent reads a step off its children."
+    },
+    {
+      "name": "--sl-collection-tree-parent-row-hover",
+      "path": "collection.tree-parent-row-hover",
+      "layer": "component",
+      "type": "color",
+      "value": "#f4e7ff",
+      "references": "{table.row-hover}",
+      "description": "A parent row under the pointer, with treeLines. A brand sets it a step darker than table.row-hover so a parent still stands out when hovered."
+    },
     {
       "name": "--sl-collection-disclosure-size-small",
       "path": "collection.disclosure-size-small",
@@ -20763,6 +20781,14 @@
       "references": "{space.3-5}",
       "description": "Space either side of the tab label's text."
     },
+    {
+      "name": "--sl-sheet-tab-text-offset",
+      "path": "sheet.tab-text-offset",
+      "layer": "component",
+      "type": "dimension",
+      "value": "0px",
+      "description": "Nudges the tab label down, for a typeface whose caps sit high in the line box. Zero centers the line box."
+    },
     {
       "name": "--sl-sheet-tab-radius",
       "path": "sheet.tab-radius",
@@ -23882,6 +23908,7 @@
         "--sl-avatar-initials-font-size-xl": "clamp(1.26rem, 1.176rem + 0.42vw, 1.512rem)",
         "--sl-button-radius": "0.0938rem",
         "--sl-collection-tree-line-color": "#6b8d99",
+        "--sl-collection-tree-parent-row-hover": "#fedfd7",
         "--sl-collection-disclosure-color": "#203d48",
         "--sl-description-list-row-border-color": "#def6ff",
         "--sl-description-list-label-color": "#3c5a66",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-mojave",
-  "version": "0.13.0",
+  "version": "0.14.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.13.0"
+    "@scattered-light/loomiere": "0.14.0"
   }
 }