@scattered-light/loomiere-mojave 0.11.0 → 0.13.0

package/dist/exports/tailwind.css

@@ -359,6 +359,7 @@
   --color-table-border: var(--sl-table-border-color);
   --color-table-row-border: var(--sl-table-row-border-color);
   --color-table-row-hover: var(--sl-table-row-hover);
+  --color-table-row-hover-fg: var(--sl-table-row-hover-color);
   --color-table-row-selected: var(--sl-table-row-selected);
   --color-table-row-current: var(--sl-table-row-current);
   --color-table-group-header: var(--sl-table-group-header-background);
@@ -1086,6 +1087,7 @@
   --sl-table-border-color: var(--sl-border-default);
   --sl-table-row-border-color: var(--sl-border-subtle);
   --sl-table-row-hover: var(--sl-item-background-hover);
+  --sl-table-row-hover-color: var(--sl-item-color-hover);
   --sl-table-row-selected: var(--sl-item-background-selected);
   --sl-table-row-current: var(--sl-surface-tray);
   --sl-table-group-header-background: var(--sl-surface-tray);
@@ -1097,6 +1099,8 @@
   --sl-app-bar-background: var(--sl-surface-raised);
   --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-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);
   --sl-description-list-value-color: var(--sl-text-primary);
@@ -1270,6 +1274,7 @@
   --sl-table-border-color: var(--sl-border-default);
   --sl-table-row-border-color: var(--sl-border-subtle);
   --sl-table-row-hover: var(--sl-item-background-hover);
+  --sl-table-row-hover-color: var(--sl-item-color-hover);
   --sl-table-row-selected: var(--sl-item-background-selected);
   --sl-table-row-current: var(--sl-surface-tray);
   --sl-table-group-header-background: var(--sl-surface-tray);
@@ -1281,6 +1286,8 @@
   --sl-app-bar-background: var(--sl-surface-raised);
   --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-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);
   --sl-description-list-value-color: var(--sl-text-primary);
@@ -1454,6 +1461,7 @@
   --sl-table-border-color: var(--sl-border-default);
   --sl-table-row-border-color: var(--sl-border-subtle);
   --sl-table-row-hover: var(--sl-item-background-hover);
+  --sl-table-row-hover-color: var(--sl-item-color-hover);
   --sl-table-row-selected: var(--sl-item-background-selected);
   --sl-table-row-current: var(--sl-surface-tray);
   --sl-table-group-header-background: var(--sl-surface-tray);
@@ -1465,6 +1473,8 @@
   --sl-app-bar-background: var(--sl-surface-raised);
   --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-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);
   --sl-description-list-value-color: var(--sl-text-primary);

package/dist/exports/tokens.dtcg.json

@@ -8519,6 +8519,11 @@
       "$value": "{item.background-hover}",
       "$description": "Row under the pointer. Same tint as a highlighted menu row."
     },
+    "row-hover-color": {
+      "$type": "color",
+      "$value": "{item.color-hover}",
+      "$description": "Text on the row under the pointer. A brand whose hover is only a light tint points it at text.primary so the text does not change."
+    },
     "row-selected": {
       "$value": "{item.background-selected}",
       "$description": "Selected rows. Same tint as the chosen menu row."
@@ -12188,6 +12193,48 @@
       "$value": "{space.4}",
       "$description": "How far each deeper level steps in, so a child sits under its parent's text."
     },
+    "tree-line-color": {
+      "$type": "color",
+      "$value": "{border.strong}",
+      "$description": "The elbow connector from a child row back to its parent, with treeLines."
+    },
+    "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."
+    },
+    "tree-line-offset": {
+      "$value": "{space.2}",
+      "$description": "Where a child's elbow starts, from the start of its level's indent. A brand with a wider tree-indent brings it closer to the parent's text."
+    },
+    "tree-row-height-parent": {
+      "$value": "{collection.row-height-sm}",
+      "$description": "A parent row's height in a table with treeLines, so a register can give its parents a little more room than the rows under them."
+    },
+    "tree-row-height-child": {
+      "$value": "{collection.row-height-sm}",
+      "$description": "A child row's height in a table with treeLines."
+    },
+    "total-row-height-subtotal": {
+      "$value": "{collection.row-height-sm}",
+      "$description": "A subtotal row's height in a table with treeLines."
+    },
+    "total-row-height-grand": {
+      "$value": "{collection.row-height-sm}",
+      "$description": "The grand-total row's height in a table with treeLines."
+    },
+    "disclosure-color": {
+      "$type": "color",
+      "$value": "{text.primary}",
+      "$description": "The small expand button's chevron (disclosure=\"small\"). A brand points it at its accent."
+    },
+    "search-fixed-width": {
+      "$value": "{space.80}",
+      "$description": "The search field's width when the toolbar sets searchWidth=\"fixed\", the most it takes, so a count and a sort note can sit beside it."
+    },
+    "toolbar-frame-padding": {
+      "$value": "{space.3}",
+      "$description": "Padding around the toolbar when it is framed, inside a Sheet above a table that runs edge to edge."
+    },
     "list-row-padding-block": {
       "$value": "{space.3}",
       "$description": "Vertical padding of a list row. The row is not a fixed height, because a second line and an extra slot have to fit."

package/dist/tokens.css

@@ -1873,6 +1873,10 @@
     --sl-badge-dot-condense: var(--sl-space-2); /** 8px, the default. */
     --sl-badge-dot-base: var(--sl-space-2); /** 8px. The base badge is taller, but the dot stays a mark. */
     --sl-collection-tree-indent: var(--sl-space-4); /** How far each deeper level steps in, so a child sits under its parent's text. */
+    --sl-collection-disclosure-size-small: var(--sl-space-5); /** The expand and collapse button when a table sets disclosure="small", small enough that a parent row keeps its siblings' height. */
+    --sl-collection-tree-line-offset: var(--sl-space-2); /** Where a child's elbow starts, from the start of its level's indent. A brand with a wider tree-indent brings it closer to the parent's text. */
+    --sl-collection-search-fixed-width: var(--sl-space-80); /** The search field's width when the toolbar sets searchWidth="fixed", the most it takes, so a count and a sort note can sit beside it. */
+    --sl-collection-toolbar-frame-padding: var(--sl-space-3); /** Padding around the toolbar when it is framed, inside a Sheet above a table that runs edge to edge. */
     --sl-collection-list-row-padding-block: var(--sl-space-3); /** Vertical padding of a list row. The row is not a fixed height, because a second line and an extra slot have to fit. */
     --sl-collection-list-row-gap: var(--sl-space-2); /** Between the checkbox, the text, the amount and the actions in a list row. */
     --sl-collection-toolbar-gap: var(--sl-space-2); /** Between the search, the filters and the actions. */
@@ -2277,6 +2281,11 @@
     --sl-status-level-success-bold-fg: var(--sl-scope-success-on-solid); /** bold in success: solid in success */
     --sl-status-level-warning-bold-fg: var(--sl-scope-warning-on-solid); /** bold in warning: solid in warning */
     --sl-status-level-error-bold-fg: var(--sl-scope-error-on-solid); /** bold in error: solid in error */
+    --sl-collection-tree-row-height-parent: var(--sl-collection-row-height-sm); /** A parent row's height in a table with treeLines, so a register can give its parents a little more room than the rows under them. */
+    --sl-collection-tree-row-height-child: var(--sl-collection-row-height-sm); /** A child row's height in a table with treeLines. */
+    --sl-collection-total-row-height-subtotal: var(--sl-collection-row-height-sm); /** A subtotal row's height in a table with treeLines. */
+    --sl-collection-total-row-height-grand: var(--sl-collection-row-height-sm); /** The grand-total row's height in a table with treeLines. */
+    --sl-collection-disclosure-color: var(--sl-text-primary); /** The small expand button's chevron (disclosure="small"). A brand points it at its accent. */
     --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. */
@@ -2367,6 +2376,7 @@
     --sl-status-level-default-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
     --sl-app-bar-background: var(--sl-surface-raised); /** The bar's fill: one step off the page, like a card, so the page reads as sitting under it. */
     --sl-app-bar-divider-color: var(--sl-border-strong); /** Color of a vertical Separator in the bar. */
+    --sl-collection-tree-line-color: var(--sl-border-strong); /** The elbow connector from a child row back to its parent, with treeLines. */
     --sl-description-list-row-border-color: var(--sl-border-subtle); /** Hairline between pairs, as quiet as a table's row lines. */
     --sl-description-list-label-color: var(--sl-text-secondary); /** Labels. */
     --sl-description-list-leader-color: var(--sl-border-control); /** The dotted leader at variant="leader". The control edge color: dark enough to lead the eye, still lighter than the text. */
@@ -2403,6 +2413,7 @@
     --sl-popup-background: var(--sl-surface-base); /** Popup fill. */
     --sl-popup-arrow-stroke: var(--sl-popup-border-color); /** Arrow edge, continuing the popup's border. */
     --sl-table-row-hover: var(--sl-item-background-hover); /** Row under the pointer. Same tint as a highlighted menu row. */
+    --sl-table-row-hover-color: var(--sl-item-color-hover); /** Text on the row under the pointer. A brand whose hover is only a light tint points it at text.primary so the text does not change. */
     --sl-table-row-selected: var(--sl-item-background-selected); /** Selected rows. Same tint as the chosen menu row. */
     --sl-table-range-border: var(--sl-focus-ring); /** Edge of a range selection and of the focused cell, the same color as every focus ring. */
     --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. */
@@ -5889,6 +5900,7 @@
     --sl-table-border-color: var(--sl-border-default);
     --sl-table-row-border-color: var(--sl-border-subtle);
     --sl-table-row-hover: var(--sl-item-background-hover);
+    --sl-table-row-hover-color: var(--sl-item-color-hover);
     --sl-table-row-selected: var(--sl-item-background-selected);
     --sl-table-row-current: var(--sl-surface-tray);
     --sl-table-group-header-background: var(--sl-surface-tray);
@@ -5900,6 +5912,8 @@
     --sl-app-bar-background: var(--sl-surface-raised);
     --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-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);
     --sl-description-list-value-color: var(--sl-text-primary);
@@ -6073,6 +6087,7 @@
     --sl-table-border-color: var(--sl-border-default);
     --sl-table-row-border-color: var(--sl-border-subtle);
     --sl-table-row-hover: var(--sl-item-background-hover);
+    --sl-table-row-hover-color: var(--sl-item-color-hover);
     --sl-table-row-selected: var(--sl-item-background-selected);
     --sl-table-row-current: var(--sl-surface-tray);
     --sl-table-group-header-background: var(--sl-surface-tray);
@@ -6084,6 +6099,8 @@
     --sl-app-bar-background: var(--sl-surface-raised);
     --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-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);
     --sl-description-list-value-color: var(--sl-text-primary);
@@ -6257,6 +6274,7 @@
     --sl-table-border-color: var(--sl-border-default);
     --sl-table-row-border-color: var(--sl-border-subtle);
     --sl-table-row-hover: var(--sl-item-background-hover);
+    --sl-table-row-hover-color: var(--sl-item-color-hover);
     --sl-table-row-selected: var(--sl-item-background-selected);
     --sl-table-row-current: var(--sl-surface-tray);
     --sl-table-group-header-background: var(--sl-surface-tray);
@@ -6268,6 +6286,8 @@
     --sl-app-bar-background: var(--sl-surface-raised);
     --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-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);
     --sl-description-list-value-color: var(--sl-text-primary);

package/dist/tokens.d.ts

@@ -2012,6 +2012,7 @@ declare const tokens: {
     readonly "border-color": string;
     readonly "row-border-color": string;
     readonly "row-hover": string;
+    readonly "row-hover-color": string;
     readonly "row-selected": string;
     readonly "row-current": string;
     readonly "group-header-background": string;
@@ -2769,6 +2770,16 @@ declare const tokens: {
     readonly "header-height-sm": string;
     readonly "header-height-md": string;
     readonly "tree-indent": string;
+    readonly "tree-line-color": string;
+    readonly "disclosure-size-small": string;
+    readonly "tree-line-offset": string;
+    readonly "tree-row-height-parent": string;
+    readonly "tree-row-height-child": string;
+    readonly "total-row-height-subtotal": string;
+    readonly "total-row-height-grand": string;
+    readonly "disclosure-color": string;
+    readonly "search-fixed-width": string;
+    readonly "toolbar-frame-padding": string;
     readonly "list-row-padding-block": string;
     readonly "list-row-gap": string;
     readonly "toolbar-gap": string;

package/dist/tokens.js

@@ -2012,6 +2012,7 @@ const tokens = {
     "border-color": "#e7ece4",
     "row-border-color": "#eff3ee",
     "row-hover": "#f4e7ff",
+    "row-hover-color": "#542775",
     "row-selected": "#e6c6ff",
     "row-current": "#f8fbf9",
     "group-header-background": "#f8fbf9",
@@ -2769,6 +2770,16 @@ const tokens = {
     "header-height-sm": "2.75rem",
     "header-height-md": "3.25rem",
     "tree-indent": "1rem",
+    "tree-line-color": "#7c8980",
+    "disclosure-size-small": "1.25rem",
+    "tree-line-offset": "0.5rem",
+    "tree-row-height-parent": "2.25rem",
+    "tree-row-height-child": "2.25rem",
+    "total-row-height-subtotal": "2.25rem",
+    "total-row-height-grand": "2.25rem",
+    "disclosure-color": "#221928",
+    "search-fixed-width": "20rem",
+    "toolbar-frame-padding": "0.75rem",
     "list-row-padding-block": "0.75rem",
     "list-row-gap": "0.5rem",
     "toolbar-gap": "0.5rem",

package/dist/tokens.json

@@ -14271,6 +14271,15 @@
       "references": "{item.background-hover}",
       "description": "Row under the pointer. Same tint as a highlighted menu row."
     },
+    {
+      "name": "--sl-table-row-hover-color",
+      "path": "table.row-hover-color",
+      "layer": "semantic",
+      "type": "color",
+      "value": "#542775",
+      "references": "{item.color-hover}",
+      "description": "Text on the row under the pointer. A brand whose hover is only a light tint points it at text.primary so the text does not change."
+    },
     {
       "name": "--sl-table-row-selected",
       "path": "table.row-selected",
@@ -20289,6 +20298,88 @@
       "references": "{space.4}",
       "description": "How far each deeper level steps in, so a child sits under its parent's text."
     },
+    {
+      "name": "--sl-collection-tree-line-color",
+      "path": "collection.tree-line-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#7c8980",
+      "references": "{border.strong}",
+      "description": "The elbow connector from a child row back to its parent, with treeLines."
+    },
+    {
+      "name": "--sl-collection-disclosure-size-small",
+      "path": "collection.disclosure-size-small",
+      "layer": "component",
+      "value": "1.25rem",
+      "references": "{space.5}",
+      "description": "The expand and collapse button when a table sets disclosure=\"small\", small enough that a parent row keeps its siblings' height."
+    },
+    {
+      "name": "--sl-collection-tree-line-offset",
+      "path": "collection.tree-line-offset",
+      "layer": "component",
+      "value": "0.5rem",
+      "references": "{space.2}",
+      "description": "Where a child's elbow starts, from the start of its level's indent. A brand with a wider tree-indent brings it closer to the parent's text."
+    },
+    {
+      "name": "--sl-collection-tree-row-height-parent",
+      "path": "collection.tree-row-height-parent",
+      "layer": "component",
+      "value": "2.25rem",
+      "references": "{collection.row-height-sm}",
+      "description": "A parent row's height in a table with treeLines, so a register can give its parents a little more room than the rows under them."
+    },
+    {
+      "name": "--sl-collection-tree-row-height-child",
+      "path": "collection.tree-row-height-child",
+      "layer": "component",
+      "value": "2.25rem",
+      "references": "{collection.row-height-sm}",
+      "description": "A child row's height in a table with treeLines."
+    },
+    {
+      "name": "--sl-collection-total-row-height-subtotal",
+      "path": "collection.total-row-height-subtotal",
+      "layer": "component",
+      "value": "2.25rem",
+      "references": "{collection.row-height-sm}",
+      "description": "A subtotal row's height in a table with treeLines."
+    },
+    {
+      "name": "--sl-collection-total-row-height-grand",
+      "path": "collection.total-row-height-grand",
+      "layer": "component",
+      "value": "2.25rem",
+      "references": "{collection.row-height-sm}",
+      "description": "The grand-total row's height in a table with treeLines."
+    },
+    {
+      "name": "--sl-collection-disclosure-color",
+      "path": "collection.disclosure-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#221928",
+      "references": "{text.primary}",
+      "description": "The small expand button's chevron (disclosure=\"small\"). A brand points it at its accent."
+    },
+    {
+      "name": "--sl-collection-search-fixed-width",
+      "path": "collection.search-fixed-width",
+      "layer": "component",
+      "value": "20rem",
+      "references": "{space.80}",
+      "description": "The search field's width when the toolbar sets searchWidth=\"fixed\", the most it takes, so a count and a sort note can sit beside it."
+    },
+    {
+      "name": "--sl-collection-toolbar-frame-padding",
+      "path": "collection.toolbar-frame-padding",
+      "layer": "component",
+      "value": "0.75rem",
+      "references": "{space.3}",
+      "description": "Padding around the toolbar when it is framed, inside a Sheet above a table that runs edge to edge."
+    },
     {
       "name": "--sl-collection-list-row-padding-block",
       "path": "collection.list-row-padding-block",
@@ -22548,6 +22639,7 @@
         "--sl-table-border-color": "#d1f3ff",
         "--sl-table-row-border-color": "#def6ff",
         "--sl-table-row-hover": "#fedfd7",
+        "--sl-table-row-hover-color": "#54352d",
         "--sl-table-row-selected": "#fedfd7",
         "--sl-table-row-current": "#f3fcff",
         "--sl-table-group-header-background": "#f3fcff",
@@ -23789,6 +23881,8 @@
         "--sl-avatar-initials-font-size-lg": "clamp(0.875rem, 0.8167rem + 0.2917vw, 1.05rem)",
         "--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-disclosure-color": "#203d48",
         "--sl-description-list-row-border-color": "#def6ff",
         "--sl-description-list-label-color": "#3c5a66",
         "--sl-description-list-value-color": "#203d48",

package/package.json

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