@scattered-light/loomiere-mojave 0.8.0 → 0.10.0

package/dist/exports/tailwind.css

@@ -1094,21 +1094,42 @@
   --sl-table-range-border: var(--sl-focus-ring);
   --sl-table-total-rule-color: var(--sl-rule-color);
   --sl-table-total-background: var(--sl-table-background);
+  --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-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);
   --sl-description-list-leader-color: var(--sl-border-control);
   --sl-drawer-handle-color: var(--sl-border-strong);
+  --sl-picker-button-label-color: var(--sl-text-secondary);
   --sl-sheet-background: var(--sl-surface-raised);
   --sl-sheet-border-color: var(--sl-border-default);
   --sl-sheet-rule-color: var(--sl-rule-color);
   --sl-sheet-tab-background: var(--sl-surface-inverse);
   --sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
+  --sl-side-nav-background: var(--sl-surface-tray);
+  --sl-side-nav-border-color: var(--sl-border-default);
+  --sl-side-nav-item-divider-color: var(--sl-border-subtle);
+  --sl-side-nav-item-color: var(--sl-text-primary);
+  --sl-side-nav-item-color-disabled: var(--sl-text-secondary);
+  --sl-side-nav-item-background-hover: var(--sl-fill-subtle);
+  --sl-side-nav-item-background-current: var(--sl-surface-raised);
+  --sl-side-nav-indicator-color: var(--sl-rule-color);
+  --sl-side-nav-count-color: var(--sl-text-accent);
+  --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
+  --sl-side-nav-group-label-color: var(--sl-text-secondary);
+  --sl-side-nav-toggle-background: var(--sl-surface-raised);
+  --sl-side-nav-toggle-border-color: var(--sl-border-strong);
   --sl-stat-figure-figure-color: var(--sl-text-primary);
   --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
   --sl-stat-figure-underline-color: var(--sl-rule-color);
   --sl-stat-figure-label-color: var(--sl-text-secondary);
   --sl-stat-figure-caption-color: var(--sl-text-secondary);
+  --sl-toggle-group-segmented-border-color: var(--sl-rule-color);
+  --sl-toggle-group-segmented-background: var(--sl-surface-raised);
+  --sl-toggle-group-segmented-pressed-background: var(--sl-fill-inverse);
+  --sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse);
   --sl-calendar-day-background-hover: var(--sl-item-background-hover);
   --sl-check-background: var(--sl-field-background);
 }
@@ -1257,21 +1278,42 @@
   --sl-table-range-border: var(--sl-focus-ring);
   --sl-table-total-rule-color: var(--sl-rule-color);
   --sl-table-total-background: var(--sl-table-background);
+  --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-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);
   --sl-description-list-leader-color: var(--sl-border-control);
   --sl-drawer-handle-color: var(--sl-border-strong);
+  --sl-picker-button-label-color: var(--sl-text-secondary);
   --sl-sheet-background: var(--sl-surface-raised);
   --sl-sheet-border-color: var(--sl-border-default);
   --sl-sheet-rule-color: var(--sl-rule-color);
   --sl-sheet-tab-background: var(--sl-surface-inverse);
   --sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
+  --sl-side-nav-background: var(--sl-surface-tray);
+  --sl-side-nav-border-color: var(--sl-border-default);
+  --sl-side-nav-item-divider-color: var(--sl-border-subtle);
+  --sl-side-nav-item-color: var(--sl-text-primary);
+  --sl-side-nav-item-color-disabled: var(--sl-text-secondary);
+  --sl-side-nav-item-background-hover: var(--sl-fill-subtle);
+  --sl-side-nav-item-background-current: var(--sl-surface-raised);
+  --sl-side-nav-indicator-color: var(--sl-rule-color);
+  --sl-side-nav-count-color: var(--sl-text-accent);
+  --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
+  --sl-side-nav-group-label-color: var(--sl-text-secondary);
+  --sl-side-nav-toggle-background: var(--sl-surface-raised);
+  --sl-side-nav-toggle-border-color: var(--sl-border-strong);
   --sl-stat-figure-figure-color: var(--sl-text-primary);
   --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
   --sl-stat-figure-underline-color: var(--sl-rule-color);
   --sl-stat-figure-label-color: var(--sl-text-secondary);
   --sl-stat-figure-caption-color: var(--sl-text-secondary);
+  --sl-toggle-group-segmented-border-color: var(--sl-rule-color);
+  --sl-toggle-group-segmented-background: var(--sl-surface-raised);
+  --sl-toggle-group-segmented-pressed-background: var(--sl-fill-inverse);
+  --sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse);
   --sl-calendar-day-background-hover: var(--sl-item-background-hover);
   --sl-check-background: var(--sl-field-background);
 }
@@ -1420,21 +1462,42 @@
   --sl-table-range-border: var(--sl-focus-ring);
   --sl-table-total-rule-color: var(--sl-rule-color);
   --sl-table-total-background: var(--sl-table-background);
+  --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-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);
   --sl-description-list-leader-color: var(--sl-border-control);
   --sl-drawer-handle-color: var(--sl-border-strong);
+  --sl-picker-button-label-color: var(--sl-text-secondary);
   --sl-sheet-background: var(--sl-surface-raised);
   --sl-sheet-border-color: var(--sl-border-default);
   --sl-sheet-rule-color: var(--sl-rule-color);
   --sl-sheet-tab-background: var(--sl-surface-inverse);
   --sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
+  --sl-side-nav-background: var(--sl-surface-tray);
+  --sl-side-nav-border-color: var(--sl-border-default);
+  --sl-side-nav-item-divider-color: var(--sl-border-subtle);
+  --sl-side-nav-item-color: var(--sl-text-primary);
+  --sl-side-nav-item-color-disabled: var(--sl-text-secondary);
+  --sl-side-nav-item-background-hover: var(--sl-fill-subtle);
+  --sl-side-nav-item-background-current: var(--sl-surface-raised);
+  --sl-side-nav-indicator-color: var(--sl-rule-color);
+  --sl-side-nav-count-color: var(--sl-text-accent);
+  --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
+  --sl-side-nav-group-label-color: var(--sl-text-secondary);
+  --sl-side-nav-toggle-background: var(--sl-surface-raised);
+  --sl-side-nav-toggle-border-color: var(--sl-border-strong);
   --sl-stat-figure-figure-color: var(--sl-text-primary);
   --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
   --sl-stat-figure-underline-color: var(--sl-rule-color);
   --sl-stat-figure-label-color: var(--sl-text-secondary);
   --sl-stat-figure-caption-color: var(--sl-text-secondary);
+  --sl-toggle-group-segmented-border-color: var(--sl-rule-color);
+  --sl-toggle-group-segmented-background: var(--sl-surface-raised);
+  --sl-toggle-group-segmented-pressed-background: var(--sl-fill-inverse);
+  --sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse);
   --sl-calendar-day-background-hover: var(--sl-item-background-hover);
   --sl-check-background: var(--sl-field-background);
 }

package/dist/exports/tokens.dtcg.json

@@ -12028,6 +12028,43 @@
       }
     }
   },
+  "app-bar": {
+    "height": {
+      "$value": "{space.16}",
+      "$description": "Least height of the bar. It grows if its contents wrap."
+    },
+    "padding-inline": {
+      "$value": "{space.6}",
+      "$description": "Space at the bar's start and end."
+    },
+    "gap": {
+      "$value": "{space.2-5}",
+      "$description": "Space between the things in the bar."
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{surface.raised}",
+      "$description": "The bar's fill: one step off the page, like a card, so the page reads as sitting under it."
+    },
+    "border-width": {
+      "$value": "{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."
+    },
+    "border-color": {
+      "$type": "color",
+      "$value": "{rule.color}",
+      "$description": "The line under the bar, in the rule color, so an ink rule brand gets an ink line here too."
+    },
+    "divider-height": {
+      "$value": "{space.6}",
+      "$description": "Height of a vertical Separator between groups of actions in the bar."
+    },
+    "divider-color": {
+      "$type": "color",
+      "$value": "{border.strong}",
+      "$description": "Color of a vertical Separator in the bar."
+    }
+  },
   "avatar": {
     "size-xs": {
       "$value": "{space.8}",
@@ -12291,6 +12328,17 @@
       "$description": "Width of each column in a two-column link list."
     }
   },
+  "picker-button": {
+    "max-width": {
+      "$value": "18rem",
+      "$description": "Widest the button grows. A longer choice is cut with an ellipsis; the label never is."
+    },
+    "label-color": {
+      "$type": "color",
+      "$value": "{text.secondary}",
+      "$description": "The caps label, quieter than the choice it names."
+    }
+  },
   "popover": {
     "text-max-width": {
       "$value": "{measure.narrow}",
@@ -12370,6 +12418,105 @@
       "$description": "Space between the tab label and an action at the end of the header row, such as an Edit link."
     }
   },
+  "side-nav": {
+    "background": {
+      "$type": "color",
+      "$value": "{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."
+    },
+    "border-color": {
+      "$type": "color",
+      "$value": "{border.default}",
+      "$description": "The line between the column and the page."
+    },
+    "item-height": {
+      "$value": "{control.height-md}",
+      "$description": "Least height of a row: the regular control height, so a row is as tall as a button."
+    },
+    "item-padding-inline": {
+      "$value": "{space.5}",
+      "$description": "Space at each end of a row."
+    },
+    "item-gap": {
+      "$value": "{space.2}",
+      "$description": "Space between a row's label and its count."
+    },
+    "item-divider-color": {
+      "$type": "color",
+      "$value": "{border.subtle}",
+      "$description": "The hairline under each row."
+    },
+    "item-color": {
+      "$type": "color",
+      "$value": "{text.primary}",
+      "$description": "A row's text."
+    },
+    "item-color-disabled": {
+      "$type": "color",
+      "$value": "{text.secondary}",
+      "$description": "A row that is not available yet. Secondary text, not the faded disabled color, so its hint stays readable."
+    },
+    "item-background-hover": {
+      "$type": "color",
+      "$value": "{fill.subtle}",
+      "$description": "A row under the pointer."
+    },
+    "item-background-current": {
+      "$type": "color",
+      "$value": "{surface.raised}",
+      "$description": "The current row: the raised surface, so it reads as the open page."
+    },
+    "indicator-width": {
+      "$value": "{stroke.medium}",
+      "$description": "The line under the current row."
+    },
+    "indicator-color": {
+      "$type": "color",
+      "$value": "{rule.color}",
+      "$description": "The current row's line: the working-paper rule color, so the nav and the sheets share one ink."
+    },
+    "count-color": {
+      "$type": "color",
+      "$value": "{text.accent}",
+      "$description": "A count at the end of a row, such as items open. Accent text so it asks for attention."
+    },
+    "count-color-quiet": {
+      "$type": "color",
+      "$value": "{text.secondary}",
+      "$description": "A count that is only information (tone=\"quiet\"), such as a total."
+    },
+    "group-padding-top": {
+      "$value": "{space.5}",
+      "$description": "Space above a group heading."
+    },
+    "group-label-color": {
+      "$type": "color",
+      "$value": "{text.secondary}",
+      "$description": "A group heading's caps label."
+    },
+    "toggle-size": {
+      "$value": "{space.6}",
+      "$description": "The collapse button's width and height. It sits on the column's edge."
+    },
+    "toggle-offset": {
+      "$value": "{space.4}",
+      "$description": "Distance of the collapse button from the top of the column."
+    },
+    "toggle-background": {
+      "$type": "color",
+      "$value": "{surface.raised}",
+      "$description": "The collapse button's fill."
+    },
+    "toggle-border-color": {
+      "$type": "color",
+      "$value": "{border.strong}",
+      "$description": "The collapse button's outline."
+    },
+    "collapsed-width": {
+      "$value": "{space.11}",
+      "$description": "Width of the column when it is collapsed, wide enough for the collapse button."
+    }
+  },
   "slider": {
     "thumb-size": {
       "$value": "{space.5}",
@@ -12513,6 +12660,28 @@
       "$description": "Distance from the screen corner from 500px up."
     }
   },
+  "toggle-group": {
+    "segmented-border-color": {
+      "$type": "color",
+      "$value": "{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."
+    },
+    "segmented-background": {
+      "$type": "color",
+      "$value": "{surface.raised}",
+      "$description": "Fill of a toggle that is not pressed."
+    },
+    "segmented-pressed-background": {
+      "$type": "color",
+      "$value": "{fill.inverse}",
+      "$description": "Fill of the pressed toggle: the solid chrome color, dark on light pages and light on dark ones."
+    },
+    "segmented-pressed-color": {
+      "$type": "color",
+      "$value": "{text.on-inverse}",
+      "$description": "Text on the pressed toggle."
+    }
+  },
   "toggle": {
     "opacity-disabled": {
       "$value": "0.5",