@scattered-light/loomiere 0.0.0-stage → 0.1.0

package/tokens/foundation/type.json

@@ -0,0 +1,92 @@
+{
+  "font-weight": {
+    "$type": "fontWeight",
+    "$description": "Numeric weights. Brands pick which ones their typefaces actually ship.",
+    "hairline": {
+      "$value": 100
+    },
+    "thin": {
+      "$value": 200
+    },
+    "light": {
+      "$value": 300
+    },
+    "normal": {
+      "$value": 400
+    },
+    "medium": {
+      "$value": 500
+    },
+    "semibold": {
+      "$value": 600
+    },
+    "bold": {
+      "$value": 700
+    },
+    "extrabold": {
+      "$value": 800
+    },
+    "black": {
+      "$value": 900
+    }
+  },
+  "letter-spacing": {
+    "$type": "dimension",
+    "$description": "Tracking in em so it scales with the font size.",
+    "tighter": {
+      "$value": "-0.05em",
+      "$description": "Very large display text."
+    },
+    "tight": {
+      "$value": "-0.025em",
+      "$description": "Headlines."
+    },
+    "normal": {
+      "$value": "0",
+      "$description": "Body text."
+    },
+    "wide": {
+      "$value": "0.025em",
+      "$description": "Small text that needs air."
+    },
+    "wider": {
+      "$value": "0.05em",
+      "$description": "Small caps and labels."
+    },
+    "widest": {
+      "$value": "0.1em",
+      "$description": "Uppercase group labels."
+    }
+  },
+  "font-family": {
+    "sans": {
+      "$type": "fontFamily",
+      "$value": [
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Roboto",
+        "Oxygen",
+        "Ubuntu",
+        "Cantarell",
+        "Fira Sans",
+        "Droid Sans",
+        "Helvetica Neue",
+        "sans-serif"
+      ],
+      "$description": "Platform UI font. Fallback when a brand typeface is unavailable."
+    },
+    "serif": {
+      "$type": "fontFamily",
+      "$value": [
+        "ui-serif",
+        "Georgia",
+        "Cambria",
+        "Times New Roman",
+        "Times",
+        "serif"
+      ],
+      "$description": "Platform serif stack."
+    }
+  }
+}

package/tokens/semantic/accessibility.json

@@ -0,0 +1,39 @@
+{
+  "a11y": {
+    "focus-outline-offset": {
+      "$value": "2px",
+      "$description": "Gap between a control and its focus ring so the ring never blends into the control border."
+    },
+    "focus-outline-width": {
+      "$value": "2px",
+      "$description": "Focus ring thickness. 2px is the WCAG 2.2 minimum that stays visible on every surface."
+    },
+    "focus-ring-radius": {
+      "$value": "{radius.focus}",
+      "$description": "Rounds the focus ring to match the small control radius."
+    },
+    "link-focus-outline-offset": {
+      "$value": "0.25em",
+      "$description": "Links sit inside text, so the offset scales with the font (em) instead of a fixed px."
+    },
+    "link-focus-ring-radius": {
+      "$value": "0.125em",
+      "$description": "A slight em-based rounding so inline focus rings hug the text."
+    },
+    "min-touch-target": {
+      "$value": "44px",
+      "$description": "Smallest tap area for any control (WCAG 2.5.5 and Apple HIG both use 44px)."
+    }
+  },
+  "focus": {
+    "ring": {
+      "$value": "{interactive.default}",
+      "$type": "color",
+      "$description": "Focus ring color. Uses the interactive accent so focus reads as \"this is the thing you can act on\"."
+    },
+    "ring-width": {
+      "$value": "{a11y.focus-outline-width}",
+      "$description": "Alias for the focus outline width, kept for components that style rings with box-shadow."
+    }
+  }
+}

package/tokens/semantic/bar.json

@@ -0,0 +1,45 @@
+{
+  "bar": {
+    "$description": "A strip that holds a row of controls: toolbars and toggle groups. One surface and rhythm so every row of controls reads as the same kind of thing.",
+    "background": {
+      "$value": "{surface.tray}",
+      "$description": "Strip fill."
+    },
+    "border-color": {
+      "$value": "{border.default}",
+      "$description": "Strip edge."
+    },
+    "border-width": {
+      "$value": "{stroke.default}",
+      "$description": "Strip edge thickness."
+    },
+    "radius": {
+      "$value": "{radius.surface}",
+      "$description": "Strip corners. Controls inside a toggle group take radius.item, so the inner corners follow the outer ones."
+    },
+    "padding": {
+      "$value": "{space.1}",
+      "$description": "Space between the strip's edge and its controls, small so the controls nearly fill it."
+    },
+    "gap": {
+      "$value": "{space.1}",
+      "$description": "Space between controls in one group."
+    },
+    "group-gap": {
+      "$value": "{space.2}",
+      "$description": "Space between groups in a toolbar, wider than inside a group."
+    },
+    "separator-color": {
+      "$value": "{border.default}",
+      "$description": "Divider between groups."
+    },
+    "separator-length": {
+      "$value": "{space.6}",
+      "$description": "Divider height, shorter than the controls so the groups still read as one strip."
+    },
+    "separator-spacing": {
+      "$value": "{space.1}",
+      "$description": "Extra space either side of a divider."
+    }
+  }
+}

package/tokens/semantic/check.json

@@ -0,0 +1,57 @@
+{
+  "check": {
+    "$description": "The small box or circle you tick: checkboxes and radios, and the edge of a switch track. They share one look so a form of mixed choices reads as one set.",
+    "background": {
+      "$value": "{field.background}",
+      "$description": "Empty box, the same fill as a field so it reads as something to fill in."
+    },
+    "border-color": {
+      "$value": "{border.control}",
+      "$description": "Empty box edge. Passes 3:1 so the box can be found before it's ticked."
+    },
+    "border-color-hover": {
+      "$value": "{border.control-hover}",
+      "$description": "Edge under the pointer."
+    },
+    "border-width": {
+      "$value": "{stroke.default}",
+      "$description": "Edge thickness."
+    },
+    "background-checked": {
+      "$value": "{interactive.default}",
+      "$description": "Ticked box fill, the brand's interactive color."
+    },
+    "border-color-checked": {
+      "$value": "{border.accent}",
+      "$description": "Ticked box edge."
+    },
+    "mark-color": {
+      "$value": "{text.on-primary}",
+      "$description": "Check mark, dash or dot on a ticked fill."
+    },
+    "mark-color-outline": {
+      "$value": "{interactive.default}",
+      "$description": "Check mark in the outline style, where the box stays empty and only the mark is colored."
+    },
+    "mark-color-disabled": {
+      "$value": "{text.disabled}",
+      "$description": "Check mark of a disabled outline box."
+    },
+    "radius": {
+      "$value": "{radius.box}",
+      "$description": "Checkbox corners. Radios are always round."
+    },
+    "dot-scale": {
+      "$value": "0.4",
+      "$description": "A radio's dot as a share of the circle, so it scales with the size."
+    },
+    "opacity-disabled": {
+      "$value": "0.5",
+      "$description": "A disabled box fades as a whole; its label turns to disabled text."
+    },
+    "transition": {
+      "$value": "{transition.input}",
+      "$description": "Changes at the same speed as a field."
+    }
+  }
+}

package/tokens/semantic/color.json

@@ -0,0 +1,270 @@
+{
+  "border": {
+    "accent": {
+      "$value": "{scope.accent.border}",
+      "$type": "color",
+      "$description": "Borders that signal selection or the active item."
+    },
+    "default": {
+      "$value": "{scope.chrome.divider}",
+      "$type": "color",
+      "$description": "Everyday dividers and control outlines. Darkens under prefers-contrast: more."
+    },
+    "strong": {
+      "$value": "{scope.chrome.border-strong}",
+      "$type": "color",
+      "$description": "Borders that identify a control, such as inputs and unchecked checkboxes. 3:1 against the canvas, as WCAG asks for control boundaries."
+    },
+    "subtle": {
+      "$value": "{scope.chrome.border-subtle}",
+      "$type": "color",
+      "$description": "Hairlines inside a surface (table rows, list separators) that should barely register."
+    },
+    "control": {
+      "$value": "{scope.chrome.border}",
+      "$type": "color",
+      "$description": "Edge of a small control (checkbox, radio, switch) that must be found before it is filled."
+    },
+    "control-hover": {
+      "$value": "{scope.chrome.border-hover}",
+      "$type": "color",
+      "$description": "Control edge under the pointer: one clear step darker than border.control."
+    }
+  },
+  "interactive": {
+    "active": {
+      "$value": "{scope.accent.solid-active}",
+      "$type": "color",
+      "$description": "Pressed state of the main accent. Darker than hover so the press is felt."
+    },
+    "default": {
+      "$value": "{scope.accent.solid}",
+      "$type": "color",
+      "$description": "Primary accent for buttons, links and selected states. Step 600 is 6.1:1 on paper; step 400 is 5.6:1 on the dark canvas."
+    },
+    "disabled": {
+      "$value": "{scope.chrome.soft-active}",
+      "$type": "color",
+      "$description": "Fill for disabled accent controls. Low contrast on purpose, but never invisible."
+    },
+    "hover": {
+      "$value": "{scope.accent.solid-hover}",
+      "$type": "color",
+      "$description": "Hover state of the main accent. One step away from default in the direction of more contrast."
+    },
+    "tint": {
+      "$value": "{scope.accent.soft}",
+      "$type": "color",
+      "$description": "Faint accent wash behind a ghost or outline control on hover, or a selected row."
+    },
+    "tint-hover": {
+      "$value": "{scope.accent.soft-hover}",
+      "$type": "color",
+      "$description": "Accent wash for a highlighted menu item or a pressed toggle."
+    },
+    "tint-active": {
+      "$value": "{scope.accent.soft-active}",
+      "$type": "color",
+      "$description": "Accent wash for a selected or pressed item: one step past tint-hover."
+    },
+    "tint-strong": {
+      "$value": "{scope.accent.soft-strong}",
+      "$type": "color",
+      "$description": "Strongest accent wash, for hovering an item that is already pressed."
+    }
+  },
+  "overlay": {
+    "base": {
+      "$value": "{color.black}",
+      "$type": "color",
+      "$description": "Base color for scrims behind modals. Components apply their own opacity."
+    }
+  },
+  "status": {
+    "error": {
+      "$value": "{scope.error.signal}",
+      "$type": "color",
+      "$description": "Errors and destructive actions."
+    },
+    "error-dark": {
+      "$value": "{scope.error.fg}",
+      "$type": "color",
+      "$description": "Error color for text or icons that need more contrast than the base color."
+    },
+    "error-light": {
+      "$value": "{scope.error.soft}",
+      "$type": "color",
+      "$description": "Error tint for backgrounds behind error messages."
+    },
+    "info": {
+      "$value": "{scope.info.signal}",
+      "$type": "color",
+      "$description": "Neutral notices and help."
+    },
+    "info-dark": {
+      "$value": "{scope.info.fg}",
+      "$type": "color",
+      "$description": "Info color for text or icons that need more contrast."
+    },
+    "info-light": {
+      "$value": "{scope.info.soft}",
+      "$type": "color",
+      "$description": "Info tint for notice backgrounds."
+    },
+    "success": {
+      "$value": "{scope.success.signal}",
+      "$type": "color",
+      "$description": "Confirmations and completed states."
+    },
+    "success-dark": {
+      "$value": "{scope.success.fg}",
+      "$type": "color",
+      "$description": "Success color for text or icons that need more contrast."
+    },
+    "success-light": {
+      "$value": "{scope.success.soft}",
+      "$type": "color",
+      "$description": "Success tint for confirmation backgrounds."
+    },
+    "warning": {
+      "$value": "{scope.warning.signal}",
+      "$type": "color",
+      "$description": "Warnings, and the required-field marker."
+    },
+    "warning-dark": {
+      "$value": "{scope.warning.fg}",
+      "$type": "color",
+      "$description": "Warning color for text or icons that need more contrast."
+    },
+    "warning-light": {
+      "$value": "{scope.warning.soft}",
+      "$type": "color",
+      "$description": "Warning tint for caution backgrounds."
+    }
+  },
+  "surface": {
+    "base": {
+      "$value": "{surface.canvas}",
+      "$description": "Alias of canvas for components that ask for \"the background\"."
+    },
+    "canvas": {
+      "$value": "{scope.chrome.canvas}",
+      "$type": "color",
+      "$description": "The page itself. Paper in light mode, the darkest neutral in dark mode."
+    },
+    "overlay": {
+      "$value": "{scope.chrome.overlay}",
+      "$type": "color",
+      "$description": "Popups, menus and code blocks that sit above raised surfaces."
+    },
+    "raised": {
+      "$value": "{scope.chrome.raised}",
+      "$type": "color",
+      "$description": "Cards and panels one level above the canvas."
+    },
+    "modal": {
+      "$value": "{scope.chrome.modal}",
+      "$type": "color",
+      "$description": "Dialogs and drawers. Paper in light mode; in dark mode one step lighter than the page, so a modal lifts off the dimmed page under it."
+    },
+    "tray": {
+      "$value": "{scope.chrome.tray}",
+      "$type": "color",
+      "$description": "The strip behind a row of controls (toolbars, toggle groups). A step off the page in both themes, so the controls sitting on it stand out, while secondary and accent text on it still pass AA."
+    },
+    "inverse": {
+      "$value": "{scope.chrome.inverse}",
+      "$type": "color",
+      "$description": "Dark-on-light flip for small floating things such as tooltips. Inside a brand pair it becomes the pair's text color."
+    }
+  },
+  "text": {
+    "accent": {
+      "$value": "{scope.accent.fg}",
+      "$type": "color",
+      "$description": "Accent text such as active tabs. One step darker than the interactive color so it stays AA as text."
+    },
+    "disabled": {
+      "$value": "{scope.chrome.soft-strong}",
+      "$type": "color",
+      "$description": "Text in disabled controls. Deliberately below AA, which WCAG allows for disabled UI."
+    },
+    "on-accent": {
+      "$value": "{text.on-primary}",
+      "$description": "Alias for text placed on any accent fill."
+    },
+    "on-primary": {
+      "$value": "{scope.accent.on-solid}",
+      "$type": "color",
+      "$description": "Text on the accent fill: that step's own on-color, so it reads on any accent the brand picks."
+    },
+    "primary": {
+      "$value": "{scope.chrome.fg}",
+      "$type": "color",
+      "$description": "Body text and headings. The highest-contrast neutral."
+    },
+    "secondary": {
+      "$value": "{scope.chrome.fg-secondary}",
+      "$type": "color",
+      "$description": "Supporting text such as descriptions and helper copy. Over 7:1 on every surface, and darker still under prefers-contrast: more."
+    },
+    "tertiary": {
+      "$value": "{scope.chrome.fg-tertiary}",
+      "$type": "color",
+      "$description": "Placeholders, captions and metadata. The lightest text that still passes AA (4.5:1) on every surface."
+    },
+    "on-tint": {
+      "$value": "{scope.accent.on-soft}",
+      "$type": "color",
+      "$description": "Text on an accent wash (interactive.tint*). Stays in the accent family."
+    },
+    "on-tint-strong": {
+      "$value": "{scope.accent.ink}",
+      "$type": "color",
+      "$description": "Text on the selected accent wash, a step darker than on-tint."
+    },
+    "on-inverse": {
+      "$value": "{scope.chrome.on-solid}",
+      "$type": "color",
+      "$description": "Text on fill.inverse."
+    },
+    "on-inverse-surface": {
+      "$value": "{scope.chrome.on-inverse}",
+      "$type": "color",
+      "$description": "Text on surface.inverse (tooltips): the on-color of the inverse step, so it passes AA in both themes."
+    }
+  },
+  "fill": {
+    "$description": "Neutral fills for shapes that aren't surfaces: tracks, chips, hovered rows. Ordered by weight.",
+    "subtle": {
+      "$value": "{scope.chrome.soft}",
+      "$type": "color",
+      "$description": "Lightest fill: hovered rows, chips, empty tracks."
+    },
+    "default": {
+      "$value": "{scope.chrome.soft-hover}",
+      "$type": "color",
+      "$description": "Standard fill: slider and switch tracks, pressed rows."
+    },
+    "strong": {
+      "$value": "{scope.chrome.soft-active}",
+      "$type": "color",
+      "$description": "Heaviest fill: scroll thumbs, slider marks, hovered tracks."
+    },
+    "inverse": {
+      "$value": "{scope.chrome.solid}",
+      "$type": "color",
+      "$description": "A small solid chip in the chrome color that flips with the theme: dark on light pages, light on dark ones. Keyboard keys use it."
+    },
+    "stronger": {
+      "$value": "{scope.chrome.soft-strong}",
+      "$type": "color",
+      "$description": "One step past fill.strong, for the hover state of a strong fill such as a scrollbar thumb."
+    },
+    "track": {
+      "$value": "{scope.chrome.track}",
+      "$type": "color",
+      "$description": "The empty part of a meter or progress bar. Light like fill.subtle in light mode; near the page in dark mode, so any palette's fill reads 3:1 against it."
+    }
+  }
+}

package/tokens/semantic/content.json

@@ -0,0 +1,124 @@
+{
+  "content": {
+    "blockquote-border": {
+      "$value": "{border.accent}",
+      "$type": "color",
+      "$description": "Accent bar beside quotes so they read as quoted at a glance."
+    },
+    "blockquote-cite": {
+      "$value": "{text.tertiary}",
+      "$type": "color",
+      "$description": "Attribution under a quote, quieter than the quote itself."
+    },
+    "code-background": {
+      "$value": "{surface.overlay}",
+      "$type": "color",
+      "$description": "Inline code chip, tinted like an overlay so it separates from prose."
+    },
+    "code-border": {
+      "$value": "{border.default}",
+      "$type": "color",
+      "$description": "Outline for inline code chips."
+    },
+    "code-text": {
+      "$value": "{text.on-tint}",
+      "$type": "color",
+      "$description": "Inline code text in the accent's on-tint color so it stands apart from body text."
+    },
+    "field-border": {
+      "$value": "{border.default}",
+      "$type": "color",
+      "$description": "Borders for form fields rendered inside prose."
+    },
+    "hr-border": {
+      "$value": "{border.default}",
+      "$type": "color",
+      "$description": "Horizontal rules between prose sections."
+    },
+    "kbd-background": {
+      "$value": "{fill.inverse}",
+      "$type": "color",
+      "$description": "Keyboard keys render inverted (dark keys on light pages, light keys on dark ones) to look like keycaps."
+    },
+    "kbd-text": {
+      "$value": "{text.on-inverse}",
+      "$description": "Text on keycaps."
+    },
+    "link-color": {
+      "$value": "{interactive.default}",
+      "$type": "color",
+      "$description": "Links in running text. Same as the interactive accent so links and buttons agree."
+    },
+    "link-hover-color": {
+      "$value": "{interactive.hover}",
+      "$type": "color",
+      "$description": "Link hover, one step toward more contrast."
+    },
+    "link-underline-color": {
+      "$value": "color-mix(in oklab, {content.link-color} 45%, transparent)",
+      "$type": "color",
+      "$description": "The link color at 45% opacity, so underlines stay calmer than the text in long paragraphs and follow the link in every theme."
+    },
+    "link-underline-hover-color": {
+      "$value": "{content.link-hover-color}",
+      "$type": "color",
+      "$description": "Underline darkens on hover to confirm the target."
+    },
+    "list-marker-color": {
+      "$value": "{interactive.default}",
+      "$type": "color",
+      "$description": "Bullets and numbers in the accent so lists scan quickly."
+    },
+    "mark-background": {
+      "$value": "{interactive.tint-hover}",
+      "$type": "color",
+      "$description": "Highlighted text (<mark>), an accent tint."
+    },
+    "page-background": {
+      "$value": "{surface.canvas}",
+      "$description": "Background for long-form content pages."
+    },
+    "pre-background": {
+      "$value": "{surface.canvas}",
+      "$description": "Code block background."
+    },
+    "pre-border": {
+      "$value": "{border.default}",
+      "$type": "color",
+      "$description": "Code block outline."
+    },
+    "pre-text": {
+      "$value": "{content.prose-color}",
+      "$description": "Code block text, the same as prose."
+    },
+    "prose-color": {
+      "$value": "{text.primary}",
+      "$type": "color",
+      "$description": "Long-form body text. The same as body text, so prose and UI read as one voice."
+    },
+    "scrollbar-thumb": {
+      "$value": "{fill.strong}",
+      "$type": "color",
+      "$description": "Scrollbar thumb at rest."
+    },
+    "scrollbar-thumb-hover": {
+      "$value": "{fill.stronger}",
+      "$type": "color",
+      "$description": "Scrollbar thumb on hover, slightly stronger."
+    },
+    "scrollbar-track": {
+      "$value": "transparent",
+      "$description": "Scrollbar track stays transparent so it does not add a stripe to every panel."
+    },
+    "selection-background": {
+      "$value": "{interactive.tint-hover}",
+      "$type": "color",
+      "$description": "Text selection highlight, an accent tint."
+    },
+    "selection-text": {
+      "$value": "{text.primary}",
+      "$type": "color",
+      "$description": "Selected text stays body text so it reads the same on the tint."
+    }
+  }
+}

package/tokens/semantic/disclosure.json

@@ -0,0 +1,49 @@
+{
+  "disclosure": {
+    "$description": "Controls that show and hide a panel: Accordion, Collapsible and Tabs. They share hover and press fills, the chevron, the divider and the motion, so every show-and-hide reads the same way.",
+    "trigger-background-hover": {
+      "$value": "{fill.subtle}",
+      "$description": "A trigger under the pointer, the same light fill as a hovered row."
+    },
+    "trigger-background-active": {
+      "$value": "{fill.default}",
+      "$description": "A trigger being pressed, one step stronger than hover."
+    },
+    "icon-color": {
+      "$value": "{text.secondary}",
+      "$description": "The chevron that turns as a panel opens."
+    },
+    "content-color": {
+      "$value": "{text.secondary}",
+      "$description": "Text inside an opened accordion or collapsible panel, quieter than the trigger that names it."
+    },
+    "divider-color": {
+      "$value": "{border.default}",
+      "$description": "Line between accordion items and under a tab list."
+    },
+    "indicator-color": {
+      "$value": "{border.accent}",
+      "$description": "The line under the selected tab."
+    },
+    "indicator-width": {
+      "$value": "{stroke.emphasis}",
+      "$description": "Selected tab line thickness."
+    },
+    "selected-color": {
+      "$value": "{text.accent}",
+      "$description": "Selected tab text."
+    },
+    "opacity-disabled": {
+      "$value": "0.5",
+      "$description": "A disabled trigger fades as well as graying out."
+    },
+    "animation-duration": {
+      "$value": "{duration.normal}",
+      "$description": "How long a panel takes to open or close, and the chevron to turn."
+    },
+    "animation-easing": {
+      "$value": "{easing.in-out}",
+      "$description": "Panels grow and shrink in place, so they ease both ways."
+    }
+  }
+}