@scattered-light/loomiere-mojave 0.8.0 → 0.9.0

package/dist/tokens.d.ts

@@ -2723,6 +2723,16 @@ declare const tokens: {
       };
     };
   };
+  readonly "app-bar": {
+    readonly "height": string;
+    readonly "padding-inline": string;
+    readonly "gap": string;
+    readonly "background": string;
+    readonly "border-width": string;
+    readonly "border-color": string;
+    readonly "divider-height": string;
+    readonly "divider-color": string;
+  };
   readonly "avatar": {
     readonly "size-xs": string;
     readonly "size-sm": string;
@@ -2801,6 +2811,10 @@ declare const tokens: {
     readonly "popup-min-width": string;
     readonly "column-width": string;
   };
+  readonly "picker-button": {
+    readonly "max-width": string;
+    readonly "label-color": string;
+  };
   readonly "popover": {
     readonly "text-max-width": string;
     readonly "popup-min-width": string;
@@ -2867,6 +2881,12 @@ declare const tokens: {
     readonly "viewport-margin": string;
     readonly "viewport-margin-md": string;
   };
+  readonly "toggle-group": {
+    readonly "segmented-border-color": string;
+    readonly "segmented-background": string;
+    readonly "segmented-pressed-background": string;
+    readonly "segmented-pressed-color": string;
+  };
   readonly "toggle": {
     readonly "opacity-disabled": string;
   };

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"
@@ -2867,6 +2881,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",
@@ -20858,6 +20941,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 +23585,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 +23597,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",
@@ -23489,7 +23612,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.9.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.9.0"
   }
 }