@scattered-light/loomiere-mojave 0.12.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);
@@ -1098,6 +1100,7 @@
   --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);
@@ -1271,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);
@@ -1283,6 +1287,7 @@
   --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);
@@ -1456,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);
@@ -1468,6 +1474,7 @@
   --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."
@@ -12197,6 +12202,39 @@
       "$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

@@ -1874,6 +1874,9 @@
     --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. */
@@ -2278,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. */
@@ -2405,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. */
@@ -5891,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);
@@ -5903,6 +5913,7 @@
     --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);
@@ -6076,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);
@@ -6088,6 +6100,7 @@
     --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);
@@ -6261,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);
@@ -6273,6 +6287,7 @@
     --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;
@@ -2771,6 +2772,14 @@ declare const tokens: {
     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",
@@ -2771,6 +2772,14 @@ const tokens = {
     "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",
@@ -20306,6 +20315,71 @@
       "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",
@@ -22565,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",
@@ -23807,6 +23882,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-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.12.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.12.0"
+    "@scattered-light/loomiere": "0.13.0"
   }
 }