@scattered-light/loomiere-mojave 0.3.0 → 0.4.0

package/dist/exports/AGENTS.md

@@ -1,6 +1,6 @@
 # Mojave theme: guide for agents
 
-This folder is a Loomiere theme. Load `tokens.css` (every token as a `--sl-` variable, light and dark) and `utilities.css` (text styles, focus ring, brand pairs). Framework adapters sit in `exports/`: `tailwind.css` (Tailwind v4: text styles by tier such as `text-base`, concept classes such as `bg-field` and `text-link`, no bare sizes like `text-sm`), `shadcn.css` (shadcn/ui), `mui.js`, `chakra.js`, AG Grid themes, `tokens.dtcg.json`. `tokens.json` lists every token with its path, value, modes and the reason it exists; read a token's `description` before using it.
+This folder is a Loomiere theme. Load `tokens.css` (every token as a `--sl-` variable, light and dark) and `utilities.css` (text styles, focus ring, brand pairs). Framework adapters sit in `exports/`: `tailwind.css` (Tailwind v4: text styles by tier such as `text-body-base`, concept classes such as `bg-field` and `text-link`, no bare sizes like `text-sm`), `shadcn.css` (shadcn/ui), `mui.js`, `chakra.js`, AG Grid themes, `tokens.dtcg.json`. `tokens.json` lists every token with its path, value, modes and the reason it exists; read a token's `description` before using it.
 
 Components: `@scattered-light/loomiere-base-ui` (Base UI parts styled by class name; import `@scattered-light/loomiere-base-ui/styles.css` after the theme). `exports/design-system/components/<Name>/README.md` lists each component's classes and an example.
 
@@ -91,6 +91,12 @@ Set it with `data-emphasis="bold|standard|subtle|quiet"` on a Button or any elem
 
 `data-color="<palette>"` on any element repaints everything inside it in that palette (`primary`, `secondary`, `error`, `accent`, `chrome`...): a destructive button is `<Button data-emphasis="bold" data-color="error">`.
 
+#### Statuses
+
+`data-status="info|success|warning|error"` on any element gives every emphasis level inside it that status's version, so a subtle warning banner is `<div data-status="warning" data-emphasis="subtle">`. A level is the level's style in the status's palette unless the brand picked a pair for it:
+
+(This brand picks none, so every level is automatic.)
+
 #### Brand pairs
 
 A pair is a background with its own text and accent, checked to meet AA. Put `class="sl-pair-<name>"` on a band, card or callout and everything inside (text, links, buttons, focus) takes the pair's colors.
@@ -107,14 +113,14 @@ Families: display 'Funnel Display', sans-serif, body 'Barlow Semi Condensed', sa
 
 All text uses one whole text style, never a size or weight on its own: `class="text-style-<name>"`, or the `--sl-font-<name>-*` variables (font-family, font-size, font-weight, line-height, letter-spacing) together. Styles come in tiers named for why the text is that size:
 
-- **minimize**: the smallest functional text: captions, fine print, dense metadata. Variants: `trigger`, `selected`, `link`, `subtitle`, `subtitle-label`.
-- **condense**: compact UI: small controls, table cells, secondary labels. Variants: `trigger`, `selected`, `link`, `subtitle`, `subtitle-label`.
-- **base**: the default UI and body text. Variants: `selected`, `label`, `link`, `subtitle`, `trigger`.
-- **magnify**: emphasized body text: lead paragraphs, larger controls. Variants: `trigger`.
-- **maximize**: display text for headings and hero copy, in steps xs to 4xl. Variants: `2xl`, `3xl`, `4xl`, `lg`, `md`, `sm`, `xl`, `xs`.
-- **code**: code, in the mono family.
+- **minimize**: the smallest functional text: captions, fine print, dense metadata. Roles: `body`, `trigger`, `selected`, `link`, `subtitle`, `eyebrow`.
+- **condense**: compact UI: small controls, table cells, secondary labels. Roles: `code`, `body`, `trigger`, `selected`, `link`, `subtitle`, `eyebrow`, `title`.
+- **base**: the default UI and body text. Roles: `body`, `selected`, `label`, `link`, `subtitle`, `trigger`, `title`.
+- **magnify**: emphasized body text: lead paragraphs, larger controls. Roles: `body`, `trigger`, `title`.
+- **amplify**: titles of dialogs, drawers and page sections. Roles: `title`.
+- **maximize**: the page head. Roles: `title`.
 
-Inside a tier, `-trigger` is for buttons and triggers, `-selected` for the current tab, toggle or nav item, `-link` for links, `-subtitle` for subheads and `-label` for form labels. Sizes below the base are fixed; the base and up grow with the viewport.
+Names are role first, then tier: `body-` for running text, `trigger-` for buttons and triggers, `selected-` for the current tab, toggle or nav item, `link-` for links, `subtitle-` for subheads, `label-` for form labels, `eyebrow-` for small uppercase labels, `title-` for titles in the display family, `code-` for code in the mono family. Sizes below the base are fixed; the base and up grow with the viewport.
 
 ### Space, shape and depth
 
@@ -140,11 +146,11 @@ Keyboard focus is one ring, `--sl-focus-outline` with `--sl-focus-outline-offset
 
 ### Modes
 
-Light and dark: `data-theme="light|dark"` on the root, or the system setting when neither is set. High contrast follows `prefers-contrast: more`. Color vision themes: `data-vision="deuteranopia|protanopia|tritanopia|achromatopsia"`, each designed from this brand. Never hand-pick dark colors; the tokens already flip.
+Themes: `data-theme="light|dark|light-high-contrast|dark-high-contrast"` on the root, or the system setting (including `prefers-contrast: more`) when none is set. Color vision themes are themes of their own, each a light theme designed from this brand: `data-theme="deuteranopia|protanopia|tritanopia|achromatopsia"`. Never hand-pick dark colors; the tokens already flip.
 
 ### Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Combobox`, `ContextMenu`, `Dialog`, `Drawer`, `Field`, `Fieldset`, `Form`, `IconButton`, `Input`, `Menu`, `Menubar`, `Meter`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Slider`, `Switch`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Combobox`, `ContextMenu`, `Dialog`, `Drawer`, `Field`, `Fieldset`, `Form`, `Input`, `Menu`, `Menubar`, `Meter`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Slider`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
 
 Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
 
@@ -158,7 +164,7 @@ Load three things, in this order:
 
 `window.Loomiere` holds two kinds of component:
 
-- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.IconButton`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). A plain `.Button`, such as a Popover or Toolbar trigger, is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it.
+- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). A plain `.Button`, such as a Popover or Toolbar trigger, is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it.
 - **Everything else is the bare Base UI part** under its usual name (`Loomiere.Popover.Popup`, `Loomiere.ToggleGroup`). It draws nothing until you give each part its class, which is the component and part names joined: `<Loomiere.Popover.Popup className="PopoverPopup">`, `<Loomiere.Toggle className="Toggle">`. The component READMEs list every class.
 
 `Loomiere.Base` holds the bare Base UI parts for the wrappers too (`Loomiere.Base.Button`), for when you need the part without its classes.
@@ -169,8 +175,7 @@ Pick by what the person is doing, not by look:
 
 | Component | Use it to |
 |---|---|
-| `Button` | Run one action. Set its emphasis by how much the action matters. |
-| `IconButton` | Run a small, frequent action shown as an icon alone, where a Button would be too loud: calendar arrows, row actions, a clear button. Always give it an aria-label. |
+| `Button` | Run one action. Set its emphasis by how much the action matters. For a small, frequent action shown as an icon alone (calendar arrows, row actions), use a quiet neutral icon-only Button: `<Loomiere.Button emphasis="quiet" palette="neutral" data-size="xs" aria-label="Next month">` with one icon inside. |
 | `Switch` | Turn one setting on or off, taking effect at once. |
 | `Checkbox` | Turn one option on or off inside a form that is submitted later. |
 | `Toggle` | A tool that stays pressed, such as Bold in a toolbar. |

package/dist/exports/ag-grid-v32.css

@@ -19,8 +19,8 @@
   --ag-column-hover-color: var(--sl-table-column-hover);
   --ag-range-selection-background-color: var(--sl-table-range-background);
   --ag-range-selection-border-color: var(--sl-table-range-border);
-  --ag-font-family: var(--sl-font-condense-font-family);
-  --ag-font-size: var(--sl-font-condense-font-size);
+  --ag-font-family: var(--sl-font-body-condense-font-family);
+  --ag-font-size: var(--sl-font-body-condense-font-size);
   --ag-grid-size: var(--sl-space-2);
   --ag-row-height: var(--sl-table-row-height);
   --ag-header-height: var(--sl-table-header-height);
@@ -70,18 +70,18 @@
 
 /* The old themes have no header type settings: the header uses the condense-subtitle text style. */
 .ag-theme-loomiere .ag-header-cell-text {
-  font-family: var(--sl-font-condense-subtitle-font-family);
-  font-size: var(--sl-font-condense-subtitle-font-size);
-  font-weight: var(--sl-font-condense-subtitle-font-weight);
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
 }
 .ag-theme-loomiere .ag-header-cell:hover {
   background-color: var(--sl-table-header-background-hover);
 }
 /* Letter spacing comes from the condense and condense-subtitle text styles. */
 .ag-theme-loomiere {
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 .ag-theme-loomiere .ag-header-cell-text {
-  letter-spacing: var(--sl-font-condense-subtitle-letter-spacing);
-  line-height: var(--sl-font-condense-subtitle-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  line-height: var(--sl-font-subtitle-condense-line-height);
 }

package/dist/exports/ag-grid-v33.css

@@ -2,11 +2,11 @@
 /* Letter spacing comes from the condense and condense-subtitle text styles. */
 .ag-root-wrapper,
 .ag-popup {
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 .ag-header-cell-text {
-  letter-spacing: var(--sl-font-condense-subtitle-letter-spacing);
-  line-height: var(--sl-font-condense-subtitle-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  line-height: var(--sl-font-subtitle-condense-line-height);
 }
 /* 33 to 35 hard-code a 5px radius on picker fields (36 uses borderRadius). */
 .ag-picker-field-wrapper {

package/dist/exports/ag-grid-v33.js

@@ -24,11 +24,11 @@ export const brandParams = {
   rangeSelectionBorderColor: "var(--sl-table-range-border)",
   cellEditingBorder: "var(--sl-field-border-width) solid var(--sl-field-border-color-focus)",
   cellEditingShadow: "var(--sl-field-shadow-focus)",
-  fontFamily: "var(--sl-font-condense-font-family)",
-  fontSize: "var(--sl-font-condense-font-size)",
-  headerFontFamily: "var(--sl-font-condense-subtitle-font-family)",
-  headerFontSize: "var(--sl-font-condense-subtitle-font-size)",
-  headerFontWeight: "var(--sl-font-condense-subtitle-font-weight)",
+  fontFamily: "var(--sl-font-body-condense-font-family)",
+  fontSize: "var(--sl-font-body-condense-font-size)",
+  headerFontFamily: "var(--sl-font-subtitle-condense-font-family)",
+  headerFontSize: "var(--sl-font-subtitle-condense-font-size)",
+  headerFontWeight: "var(--sl-font-subtitle-condense-font-weight)",
   spacing: "var(--sl-space-2)",
   rowHeight: "var(--sl-table-row-height)",
   headerHeight: "var(--sl-table-header-height)",
@@ -102,7 +102,7 @@ export const brandParams = {
   buttonHoverBorder: "var(--sl-stroke-default) solid var(--sl-emphasis-standard-border-hover)",
   buttonActiveBackgroundColor: "var(--sl-emphasis-standard-bg-active)",
   buttonBorderRadius: "var(--sl-radius-control)",
-  buttonFontWeight: "var(--sl-font-condense-trigger-font-weight)",
+  buttonFontWeight: "var(--sl-font-trigger-condense-font-weight)",
   iconButtonColor: "var(--sl-icon-button-color)",
   iconButtonHoverColor: "var(--sl-icon-button-color-hover)",
   iconButtonHoverBackgroundColor: "var(--sl-icon-button-background-hover)",

package/dist/exports/ag-grid-v36.css

@@ -2,9 +2,9 @@
 /* Letter spacing comes from the condense and condense-subtitle text styles. */
 .ag-root-wrapper,
 .ag-popup {
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 .ag-header-cell-text {
-  letter-spacing: var(--sl-font-condense-subtitle-letter-spacing);
-  line-height: var(--sl-font-condense-subtitle-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  line-height: var(--sl-font-subtitle-condense-line-height);
 }

package/dist/exports/ag-grid-v36.js

@@ -24,12 +24,12 @@ export const brandParams = {
   rangeSelectionBorderColor: "var(--sl-table-range-border)",
   cellEditingBorder: "var(--sl-field-border-width) solid var(--sl-field-border-color-focus)",
   cellEditingShadow: "var(--sl-field-shadow-focus)",
-  fontFamily: "var(--sl-font-condense-font-family)",
-  fontSize: "var(--sl-font-condense-font-size)",
-  fontWeight: "var(--sl-font-condense-font-weight)",
-  headerFontFamily: "var(--sl-font-condense-subtitle-font-family)",
-  headerFontSize: "var(--sl-font-condense-subtitle-font-size)",
-  headerFontWeight: "var(--sl-font-condense-subtitle-font-weight)",
+  fontFamily: "var(--sl-font-body-condense-font-family)",
+  fontSize: "var(--sl-font-body-condense-font-size)",
+  fontWeight: "var(--sl-font-body-condense-font-weight)",
+  headerFontFamily: "var(--sl-font-subtitle-condense-font-family)",
+  headerFontSize: "var(--sl-font-subtitle-condense-font-size)",
+  headerFontWeight: "var(--sl-font-subtitle-condense-font-weight)",
   spacing: "var(--sl-space-2)",
   rowHeight: "var(--sl-table-row-height)",
   headerHeight: "var(--sl-table-header-height)",
@@ -105,7 +105,7 @@ export const brandParams = {
   buttonHoverBorder: "var(--sl-stroke-default) solid var(--sl-emphasis-standard-border-hover)",
   buttonActiveBackgroundColor: "var(--sl-emphasis-standard-bg-active)",
   buttonBorderRadius: "var(--sl-radius-control)",
-  buttonFontWeight: "var(--sl-font-condense-trigger-font-weight)",
+  buttonFontWeight: "var(--sl-font-trigger-condense-font-weight)",
   iconButtonColor: "var(--sl-icon-button-color)",
   iconButtonHoverColor: "var(--sl-icon-button-color-hover)",
   iconButtonHoverBackgroundColor: "var(--sl-icon-button-background-hover)",

package/dist/exports/catalog.json

@@ -17,7 +17,7 @@
       "files": [
         "figma.json"
       ],
-      "for": "Syncing to Figma variables: Brand, Pairs and Theme collections with light and dark modes. Ask Claude to sync a step."
+      "for": "Figma variables, text styles and effect styles (elevation and focus shadows): hidden Brand and Scale collections, and Size, Theme, Status and Emphasis, with modes for desktop, tablet and mobile, light and dark, high contrast, color vision, statuses and emphasis. Ask Claude to sync, run loomiere figma push, or import it with the Loomiere Figma plugin."
     },
     {
       "id": "tailwind",
@@ -26,7 +26,7 @@
       "files": [
         "tailwind.css"
       ],
-      "for": "Tailwind v4 projects: import after tailwindcss (it brings tokens.css along). Utilities like bg-accent-solid, text-fg, bg-emphasis-bg, and text styles by tier: text-base, text-magnify-trigger."
+      "for": "Tailwind v4 projects: import after tailwindcss (it brings tokens.css along). Utilities like bg-accent-solid, text-fg, bg-emphasis-bg, and text styles by tier: text-body-base, text-trigger-magnify."
     },
     {
       "id": "shadcn",
@@ -125,8 +125,6 @@
         "design-system/components/Fieldset/preview.html",
         "design-system/components/Form/README.md",
         "design-system/components/Form/preview.html",
-        "design-system/components/IconButton/README.md",
-        "design-system/components/IconButton/preview.html",
         "design-system/components/Input/README.md",
         "design-system/components/Input/preview.html",
         "design-system/components/Menu/README.md",
@@ -159,6 +157,8 @@
         "design-system/components/Slider/preview.html",
         "design-system/components/Switch/README.md",
         "design-system/components/Switch/preview.html",
+        "design-system/components/Table/README.md",
+        "design-system/components/Table/preview.html",
         "design-system/components/Tabs/README.md",
         "design-system/components/Tabs/preview.html",
         "design-system/components/Toast/README.md",