@scattered-light/loomiere-mojave 0.4.1 → 0.5.1

package/brand/mojave.json

@@ -90,6 +90,62 @@
 
   "motion": { "speed": 1, "durations": { "fast": 100, "normal": 200, "slow": 300 } },
 
+
+  "looks": {
+    "classic": {
+      "label": "Classic",
+      "description": "The look before the rebrand: slate teal chrome, a coral accent, Roboto and tight 3px corners.",
+      "color": {
+        "palettes": {
+          "neutral": {
+            "label": "harbor",
+            "contrast": "neutral",
+            "keys": ["#d1f3ff", "#a9d5e5", "#6b8d99", "#203d48"],
+            "exact": true,
+            "tone": { "color": "#6b8d99", "intensity": [0.3, 0.9] }
+          },
+          "primary": { "label": "coral", "keys": ["#fedfd7", "#e5927d", "#c37c6a"], "exact": true, "darkest": "#2b1a16" },
+          "secondary": { "label": "tide", "keys": ["#a9d5e5", "#336b7f"] },
+          "tertiary": { "label": "sand", "keys": ["#fff7d8", "#ead8a7"] },
+          "quaternary": { "label": "mint", "keys": ["#e0fcf0", "#8be0af", "#5ba37a"] },
+          "success": { "keys": ["#5ba37a"] },
+          "warning": { "keys": ["#e1b129"] },
+          "error": { "keys": ["#e50000"] },
+          "info": { "keys": ["#186ae1"] }
+        },
+        "data": [
+          ["blue", "#346ea3"], ["orange", "#f6844e"], ["green", "#5ba37a"], ["gold", "#f1c54b"], ["slate", "#688d99"],
+          ["red", "#f24646"], ["taupe", "#867775"], ["rose", "#e15a6a"], ["magenta", "#bb529e"], ["brown", "#b97350"],
+          ["sky", "#70ace4"], ["peach", "#feb794"], ["mint", "#8be0af"], ["sand", "#e8d5a1"], ["ice", "#a9d5e5"],
+          ["salmon", "#ff9797"], ["stone", "#bab5b4"], ["pink", "#ffb9c6"], ["orchid", "#f3a1dd"], ["tan", "#f0c5af"]
+        ]
+      },
+      "type": {
+        "families": {
+          "display": ["Roboto", "sans-serif"],
+          "body": ["Roboto", "sans-serif"]
+        },
+        "metrics": {
+          "display": { "ascent": 0.928, "descent": 0.244, "capHeight": 0.711, "xHeight": 0.528 },
+          "body": { "ascent": 0.928, "descent": 0.244, "capHeight": 0.711, "xHeight": 0.528 }
+        },
+        "base": { "min": 14, "max": 14 }
+      },
+      "radius": { "base": 3 },
+      "tokens": { "button.radius": "{radius.control}" },
+      "roles": {
+        "concepts": {
+          "chrome.fg": { "light": "neutral.1100" },
+          "accent.solid": { "light": "primary.500" },
+          "accent.solid-hover": { "light": "primary.600" },
+          "accent.solid-active": { "light": "primary.700" },
+          "accent.on-solid": { "light": "white" },
+          "accent.soft-active": { "light": "primary.100" }
+        }
+      }
+    }
+  },
+
   "roles": {
     "chrome": "neutral",
     "accent": "primary",

package/dist/exports/AGENTS.md

@@ -148,6 +148,8 @@ Keyboard focus is one ring, `--sl-focus-outline` with `--sl-focus-outline-offset
 
 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.
 
+Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look="classic"` on the root is Classic (The look before the rebrand: slate teal chrome, a coral accent, Roboto and tight 3px corners). A look changes token values, never names, so design with the tokens and every look follows. The values listed here are Mojave's; `bundle.css` holds every look.
+
 ### 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`, `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`).

package/dist/exports/design-system/README.md

@@ -140,6 +140,8 @@ Keyboard focus is one ring, `--sl-focus-outline` with `--sl-focus-outline-offset
 
 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.
 
+Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look="classic"` on the root is Classic (The look before the rebrand: slate teal chrome, a coral accent, Roboto and tight 3px corners). A look changes token values, never names, so design with the tokens and every look follows. The values listed here are Mojave's; `bundle.css` holds every look.
+
 ## 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`, `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`).