@scattered-light/loomiere-mojave 0.8.0 → 0.10.0

package/dist/tokens.js

@@ -2723,6 +2723,16 @@ const tokens = {
       }
     }
   },
+  "app-bar": {
+    "height": "4rem",
+    "padding-inline": "1.5rem",
+    "gap": "0.625rem",
+    "background": "#f8fbf9",
+    "border-width": "1px",
+    "border-color": "#7c8980",
+    "divider-height": "1.5rem",
+    "divider-color": "#7c8980"
+  },
   "avatar": {
     "size-xs": "2rem",
     "size-sm": "2.5rem",
@@ -2801,6 +2811,10 @@ const tokens = {
     "popup-min-width": "400px",
     "column-width": "12rem"
   },
+  "picker-button": {
+    "max-width": "18rem",
+    "label-color": "#4f5852"
+  },
   "popover": {
     "text-max-width": "45ch",
     "popup-min-width": "200px"
@@ -2824,6 +2838,29 @@ const tokens = {
     "tab-radius": "0.125rem",
     "header-gap": "0.75rem"
   },
+  "side-nav": {
+    "background": "#f8fbf9",
+    "border-color": "#e7ece4",
+    "item-height": "2.75rem",
+    "item-padding-inline": "1.25rem",
+    "item-gap": "0.5rem",
+    "item-divider-color": "#eff3ee",
+    "item-color": "#221928",
+    "item-color-disabled": "#4f5852",
+    "item-background-hover": "#eff3ee",
+    "item-background-current": "#f8fbf9",
+    "indicator-width": "2px",
+    "indicator-color": "#7c8980",
+    "count-color": "#7131a0",
+    "count-color-quiet": "#4f5852",
+    "group-padding-top": "1.25rem",
+    "group-label-color": "#4f5852",
+    "toggle-size": "1.5rem",
+    "toggle-offset": "1rem",
+    "toggle-background": "#f8fbf9",
+    "toggle-border-color": "#7c8980",
+    "collapsed-width": "2.75rem"
+  },
   "slider": {
     "thumb-size": "1.25rem",
     "vertical-height": "200px"
@@ -2867,6 +2904,12 @@ const tokens = {
     "viewport-margin": "1rem",
     "viewport-margin-md": "2rem"
   },
+  "toggle-group": {
+    "segmented-border-color": "#7c8980",
+    "segmented-background": "#f8fbf9",
+    "segmented-pressed-background": "#353d38",
+    "segmented-pressed-color": "#f8fbf9"
+  },
   "toggle": {
     "opacity-disabled": "0.5"
   },

package/dist/tokens.json

@@ -19991,6 +19991,73 @@
       "references": "{scope.error.solid-hover}",
       "description": "quiet in error: outline in error"
     },
+    {
+      "name": "--sl-app-bar-height",
+      "path": "app-bar.height",
+      "layer": "component",
+      "value": "4rem",
+      "references": "{space.16}",
+      "description": "Least height of the bar. It grows if its contents wrap."
+    },
+    {
+      "name": "--sl-app-bar-padding-inline",
+      "path": "app-bar.padding-inline",
+      "layer": "component",
+      "value": "1.5rem",
+      "references": "{space.6}",
+      "description": "Space at the bar's start and end."
+    },
+    {
+      "name": "--sl-app-bar-gap",
+      "path": "app-bar.gap",
+      "layer": "component",
+      "value": "0.625rem",
+      "references": "{space.2-5}",
+      "description": "Space between the things in the bar."
+    },
+    {
+      "name": "--sl-app-bar-background",
+      "path": "app-bar.background",
+      "layer": "component",
+      "type": "color",
+      "value": "#f8fbf9",
+      "references": "{surface.raised}",
+      "description": "The bar's fill: one step off the page, like a card, so the page reads as sitting under it."
+    },
+    {
+      "name": "--sl-app-bar-border-width",
+      "path": "app-bar.border-width",
+      "layer": "component",
+      "value": "1px",
+      "references": "{stroke.default}",
+      "description": "The line under the bar while rule.width is 0. With rule.width on, the line takes the thicker of the two."
+    },
+    {
+      "name": "--sl-app-bar-border-color",
+      "path": "app-bar.border-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#7c8980",
+      "references": "{rule.color}",
+      "description": "The line under the bar, in the rule color, so an ink rule brand gets an ink line here too."
+    },
+    {
+      "name": "--sl-app-bar-divider-height",
+      "path": "app-bar.divider-height",
+      "layer": "component",
+      "value": "1.5rem",
+      "references": "{space.6}",
+      "description": "Height of a vertical Separator between groups of actions in the bar."
+    },
+    {
+      "name": "--sl-app-bar-divider-color",
+      "path": "app-bar.divider-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#7c8980",
+      "references": "{border.strong}",
+      "description": "Color of a vertical Separator in the bar."
+    },
     {
       "name": "--sl-avatar-size-xs",
       "path": "avatar.size-xs",
@@ -20466,6 +20533,22 @@
       "value": "12rem",
       "description": "Width of each column in a two-column link list."
     },
+    {
+      "name": "--sl-picker-button-max-width",
+      "path": "picker-button.max-width",
+      "layer": "component",
+      "value": "18rem",
+      "description": "Widest the button grows. A longer choice is cut with an ellipsis; the label never is."
+    },
+    {
+      "name": "--sl-picker-button-label-color",
+      "path": "picker-button.label-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#4f5852",
+      "references": "{text.secondary}",
+      "description": "The caps label, quieter than the choice it names."
+    },
     {
       "name": "--sl-popover-text-max-width",
       "path": "popover.text-max-width",
@@ -20605,6 +20688,187 @@
       "references": "{space.3}",
       "description": "Space between the tab label and an action at the end of the header row, such as an Edit link."
     },
+    {
+      "name": "--sl-side-nav-background",
+      "path": "side-nav.background",
+      "layer": "component",
+      "type": "color",
+      "value": "#f8fbf9",
+      "references": "{surface.tray}",
+      "description": "The column's fill: the tray surface, a step off the page, so the current row on the raised surface stands out from it."
+    },
+    {
+      "name": "--sl-side-nav-border-color",
+      "path": "side-nav.border-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#e7ece4",
+      "references": "{border.default}",
+      "description": "The line between the column and the page."
+    },
+    {
+      "name": "--sl-side-nav-item-height",
+      "path": "side-nav.item-height",
+      "layer": "component",
+      "value": "2.75rem",
+      "references": "{control.height-md}",
+      "description": "Least height of a row: the regular control height, so a row is as tall as a button."
+    },
+    {
+      "name": "--sl-side-nav-item-padding-inline",
+      "path": "side-nav.item-padding-inline",
+      "layer": "component",
+      "value": "1.25rem",
+      "references": "{space.5}",
+      "description": "Space at each end of a row."
+    },
+    {
+      "name": "--sl-side-nav-item-gap",
+      "path": "side-nav.item-gap",
+      "layer": "component",
+      "value": "0.5rem",
+      "references": "{space.2}",
+      "description": "Space between a row's label and its count."
+    },
+    {
+      "name": "--sl-side-nav-item-divider-color",
+      "path": "side-nav.item-divider-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#eff3ee",
+      "references": "{border.subtle}",
+      "description": "The hairline under each row."
+    },
+    {
+      "name": "--sl-side-nav-item-color",
+      "path": "side-nav.item-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#221928",
+      "references": "{text.primary}",
+      "description": "A row's text."
+    },
+    {
+      "name": "--sl-side-nav-item-color-disabled",
+      "path": "side-nav.item-color-disabled",
+      "layer": "component",
+      "type": "color",
+      "value": "#4f5852",
+      "references": "{text.secondary}",
+      "description": "A row that is not available yet. Secondary text, not the faded disabled color, so its hint stays readable."
+    },
+    {
+      "name": "--sl-side-nav-item-background-hover",
+      "path": "side-nav.item-background-hover",
+      "layer": "component",
+      "type": "color",
+      "value": "#eff3ee",
+      "references": "{fill.subtle}",
+      "description": "A row under the pointer."
+    },
+    {
+      "name": "--sl-side-nav-item-background-current",
+      "path": "side-nav.item-background-current",
+      "layer": "component",
+      "type": "color",
+      "value": "#f8fbf9",
+      "references": "{surface.raised}",
+      "description": "The current row: the raised surface, so it reads as the open page."
+    },
+    {
+      "name": "--sl-side-nav-indicator-width",
+      "path": "side-nav.indicator-width",
+      "layer": "component",
+      "value": "2px",
+      "references": "{stroke.medium}",
+      "description": "The line under the current row."
+    },
+    {
+      "name": "--sl-side-nav-indicator-color",
+      "path": "side-nav.indicator-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#7c8980",
+      "references": "{rule.color}",
+      "description": "The current row's line: the working-paper rule color, so the nav and the sheets share one ink."
+    },
+    {
+      "name": "--sl-side-nav-count-color",
+      "path": "side-nav.count-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#7131a0",
+      "references": "{text.accent}",
+      "description": "A count at the end of a row, such as items open. Accent text so it asks for attention."
+    },
+    {
+      "name": "--sl-side-nav-count-color-quiet",
+      "path": "side-nav.count-color-quiet",
+      "layer": "component",
+      "type": "color",
+      "value": "#4f5852",
+      "references": "{text.secondary}",
+      "description": "A count that is only information (tone=\"quiet\"), such as a total."
+    },
+    {
+      "name": "--sl-side-nav-group-padding-top",
+      "path": "side-nav.group-padding-top",
+      "layer": "component",
+      "value": "1.25rem",
+      "references": "{space.5}",
+      "description": "Space above a group heading."
+    },
+    {
+      "name": "--sl-side-nav-group-label-color",
+      "path": "side-nav.group-label-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#4f5852",
+      "references": "{text.secondary}",
+      "description": "A group heading's caps label."
+    },
+    {
+      "name": "--sl-side-nav-toggle-size",
+      "path": "side-nav.toggle-size",
+      "layer": "component",
+      "value": "1.5rem",
+      "references": "{space.6}",
+      "description": "The collapse button's width and height. It sits on the column's edge."
+    },
+    {
+      "name": "--sl-side-nav-toggle-offset",
+      "path": "side-nav.toggle-offset",
+      "layer": "component",
+      "value": "1rem",
+      "references": "{space.4}",
+      "description": "Distance of the collapse button from the top of the column."
+    },
+    {
+      "name": "--sl-side-nav-toggle-background",
+      "path": "side-nav.toggle-background",
+      "layer": "component",
+      "type": "color",
+      "value": "#f8fbf9",
+      "references": "{surface.raised}",
+      "description": "The collapse button'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."
+    },
+    {
+      "name": "--sl-side-nav-collapsed-width",
+      "path": "side-nav.collapsed-width",
+      "layer": "component",
+      "value": "2.75rem",
+      "references": "{space.11}",
+      "description": "Width of the column when it is collapsed, wide enough for the collapse button."
+    },
     {
       "name": "--sl-slider-thumb-size",
       "path": "slider.thumb-size",
@@ -20858,6 +21122,42 @@
       "references": "{space.8}",
       "description": "Distance from the screen corner from 500px up."
     },
+    {
+      "name": "--sl-toggle-group-segmented-border-color",
+      "path": "toggle-group.segmented-border-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#7c8980",
+      "references": "{rule.color}",
+      "description": "The outline around a segmented group and the line between its toggles. The rule color, so it is a control edge by default and ink with an ink rule."
+    },
+    {
+      "name": "--sl-toggle-group-segmented-background",
+      "path": "toggle-group.segmented-background",
+      "layer": "component",
+      "type": "color",
+      "value": "#f8fbf9",
+      "references": "{surface.raised}",
+      "description": "Fill of a toggle that is not pressed."
+    },
+    {
+      "name": "--sl-toggle-group-segmented-pressed-background",
+      "path": "toggle-group.segmented-pressed-background",
+      "layer": "component",
+      "type": "color",
+      "value": "#353d38",
+      "references": "{fill.inverse}",
+      "description": "Fill of the pressed toggle: the solid chrome color, dark on light pages and light on dark ones."
+    },
+    {
+      "name": "--sl-toggle-group-segmented-pressed-color",
+      "path": "toggle-group.segmented-pressed-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#f8fbf9",
+      "references": "{text.on-inverse}",
+      "description": "Text on the pressed toggle."
+    },
     {
       "name": "--sl-toggle-opacity-disabled",
       "path": "toggle.opacity-disabled",
@@ -23466,6 +23766,9 @@
         "--sl-status-level-error-quiet-fg": "#a70000",
         "--sl-status-level-error-quiet-border": "#c70000",
         "--sl-status-level-error-quiet-border-hover": "#a70000",
+        "--sl-app-bar-background": "#f3fcff",
+        "--sl-app-bar-border-color": "#6b8d99",
+        "--sl-app-bar-divider-color": "#6b8d99",
         "--sl-avatar-initials-font-size-md": "0.875rem",
         "--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)",
@@ -23475,6 +23778,7 @@
         "--sl-description-list-value-color": "#203d48",
         "--sl-description-list-leader-color": "#6b8d99",
         "--sl-drawer-handle-color": "#6b8d99",
+        "--sl-picker-button-label-color": "#3c5a66",
         "--sl-sheet-background": "#f3fcff",
         "--sl-sheet-border-color": "#d1f3ff",
         "--sl-sheet-rule-color": "#6b8d99",
@@ -23482,6 +23786,19 @@
         "--sl-sheet-tab-background": "#203d48",
         "--sl-sheet-tab-color": "#f3fcff",
         "--sl-sheet-tab-radius": "0.0938rem",
+        "--sl-side-nav-background": "#f3fcff",
+        "--sl-side-nav-border-color": "#d1f3ff",
+        "--sl-side-nav-item-divider-color": "#def6ff",
+        "--sl-side-nav-item-color": "#203d48",
+        "--sl-side-nav-item-color-disabled": "#3c5a66",
+        "--sl-side-nav-item-background-hover": "#def6ff",
+        "--sl-side-nav-item-background-current": "#f3fcff",
+        "--sl-side-nav-indicator-color": "#6b8d99",
+        "--sl-side-nav-count-color": "#70463c",
+        "--sl-side-nav-count-color-quiet": "#3c5a66",
+        "--sl-side-nav-group-label-color": "#3c5a66",
+        "--sl-side-nav-toggle-background": "#f3fcff",
+        "--sl-side-nav-toggle-border-color": "#6b8d99",
         "--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,
@@ -23489,7 +23806,11 @@
         "--sl-stat-figure-figure-color-accent": "#70463c",
         "--sl-stat-figure-underline-color": "#6b8d99",
         "--sl-stat-figure-label-color": "#3c5a66",
-        "--sl-stat-figure-caption-color": "#3c5a66"
+        "--sl-stat-figure-caption-color": "#3c5a66",
+        "--sl-toggle-group-segmented-border-color": "#6b8d99",
+        "--sl-toggle-group-segmented-background": "#f3fcff",
+        "--sl-toggle-group-segmented-pressed-background": "#203d48",
+        "--sl-toggle-group-segmented-pressed-color": "#f3fcff"
       }
     }
   ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-mojave",
-  "version": "0.8.0",
+  "version": "0.10.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.8.0"
+    "@scattered-light/loomiere": "0.10.0"
   }
 }