@scattered-light/loomiere 0.0.0-stage → 0.1.0

package/tokens/semantic/elevation.json

@@ -0,0 +1,72 @@
+{
+  "elevation": {
+    "2xl": {
+      "$value": "{shadow.2xl}",
+      "$extensions": {
+        "sl.modes": {
+          "reduced-motion": "{shadow.flat.2xl}"
+        }
+      }
+    },
+    "base": {
+      "$value": "{shadow.base}",
+      "$extensions": {
+        "sl.modes": {
+          "reduced-motion": "{shadow.flat.base}"
+        }
+      }
+    },
+    "lg": {
+      "$value": "{shadow.lg}",
+      "$extensions": {
+        "sl.modes": {
+          "reduced-motion": "{shadow.flat.lg}"
+        }
+      }
+    },
+    "md": {
+      "$value": "{shadow.md}",
+      "$extensions": {
+        "sl.modes": {
+          "reduced-motion": "{shadow.flat.md}"
+        }
+      }
+    },
+    "sm": {
+      "$value": "{shadow.sm}",
+      "$extensions": {
+        "sl.modes": {
+          "reduced-motion": "{shadow.flat.sm}"
+        }
+      }
+    },
+    "xl": {
+      "$value": "{shadow.xl}",
+      "$extensions": {
+        "sl.modes": {
+          "reduced-motion": "{shadow.flat.xl}"
+        }
+      }
+    },
+    "xs": {
+      "$value": "{shadow.xs}",
+      "$extensions": {
+        "sl.modes": {
+          "reduced-motion": "{shadow.flat.xs}"
+        }
+      }
+    },
+    "$description": "Shadows by height. Each one flattens to a 1px outline under prefers-reduced-motion, because large blurred shadows imply movement."
+  },
+  "shadow": {
+    "outline": {
+      "$value": "0 0 0 3px color-mix(in oklab, {focus.ring} 60%, transparent)",
+      "$description": "Focus halo for controls that use box-shadow instead of outline: the focus ring color at 60% opacity, so it follows the accent and the theme. Becomes currentColor under prefers-contrast: more.",
+      "$extensions": {
+        "sl.modes": {
+          "contrast-more": "0 0 0 3px currentColor"
+        }
+      }
+    }
+  }
+}

package/tokens/semantic/field.json

@@ -0,0 +1,77 @@
+{
+  "field": {
+    "$description": "A form field: label, control, description and error (the Field component), and the look of every control you type into or pick a value from (Input, Select trigger, Combobox, Autocomplete, Number field). Sizes come from control.*.",
+    "background": {
+      "$value": "{surface.base}",
+      "$description": "Field fill at rest."
+    },
+    "background-disabled": {
+      "$value": "{surface.overlay}",
+      "$description": "Disabled fields sink into a flat gray so they read as unavailable."
+    },
+    "border-color": {
+      "$value": "{border.control}",
+      "$description": "Field edge at rest. Passes 3:1 against the page (WCAG 1.4.11) so an empty field is still findable."
+    },
+    "border-color-hover": {
+      "$value": "{border.control-hover}",
+      "$description": "Field edge under the pointer."
+    },
+    "border-color-focus": {
+      "$value": "{focus.ring}",
+      "$description": "Field edge while typing, in the focus color."
+    },
+    "border-color-error": {
+      "$value": "{status.error}",
+      "$description": "Field edge when the value is invalid."
+    },
+    "border-width": {
+      "$value": "{stroke.default}",
+      "$description": "Field edge thickness."
+    },
+    "radius": {
+      "$value": "{radius.control}",
+      "$description": "Field corners, the same as every other control."
+    },
+    "color": {
+      "$value": "{text.primary}",
+      "$description": "The value you typed."
+    },
+    "color-disabled": {
+      "$value": "{text.disabled}",
+      "$description": "The value in a disabled field."
+    },
+    "placeholder-color": {
+      "$value": "{text.tertiary}",
+      "$description": "Hint text before anything is typed."
+    },
+    "shadow-focus": {
+      "$value": "{focus.shadow-3px-primary}",
+      "$description": "Soft halo while typing, on top of the focus border."
+    },
+    "shadow-focus-error": {
+      "$value": "{focus.shadow-3px-error}",
+      "$description": "Halo while typing in an invalid field."
+    },
+    "transition": {
+      "$value": "{transition.input}",
+      "$description": "Border and halo ease in, never snap."
+    },
+    "gap": {
+      "$value": "{space.1-5}",
+      "$description": "Between a field's label, control and messages."
+    },
+    "label-spacing": {
+      "$value": "{space.1}",
+      "$description": "Extra room under the label, so it reads as belonging to the control below it."
+    },
+    "message-spacing": {
+      "$value": "{space.1}",
+      "$description": "Extra room above a description or error, so it reads as a note on the control."
+    },
+    "opacity-disabled": {
+      "$value": "0.6",
+      "$description": "A disabled field fades as a whole, label included."
+    }
+  }
+}

package/tokens/semantic/focus.json

@@ -0,0 +1,36 @@
+{
+  "focus": {
+    "shadow-3px-error": {
+      "$value": "0 0 0 3px {status.error}",
+      "$description": "Focus halo for a field with an error."
+    },
+    "shadow-3px-primary": {
+      "$value": "0 0 0 3px {interactive.tint-hover}",
+      "$description": "Soft focus halo for inputs."
+    },
+    "shadow-3px-primary-soft": {
+      "$value": "0 0 0 3px {interactive.tint-active}",
+      "$description": "Slightly stronger focus halo for inputs on tinted surfaces."
+    },
+    "outline": {
+      "$value": "{a11y.focus-outline-width} solid {focus.ring}",
+      "$description": "The one keyboard focus ring. Every control uses it, outside or inset."
+    },
+    "outline-offset": {
+      "$value": "{a11y.focus-outline-offset}",
+      "$description": "Outside ring: a gap between the control and the ring so it never blends into the control border. The default."
+    },
+    "outline-offset-inset": {
+      "$value": "calc(-1 * {a11y.focus-outline-width})",
+      "$description": "Inset ring: drawn just inside the control's edge, for controls packed into a container (menus, tab lists, steppers) where an outside ring would be clipped or overlap a neighbor."
+    },
+    "halo-spread": {
+      "$value": "calc({a11y.focus-outline-offset} + {a11y.focus-outline-width} + 2px)",
+      "$description": "A soft glow just outside the focus ring: the gap, the ring, then 2px of tint. The ring carries the contrast (WCAG 1.4.11), so the glow can stay pale."
+    },
+    "halo-color": {
+      "$value": "{interactive.tint-hover}",
+      "$description": "The pale tint of the focus glow. Components on a colored scope use that scope's soft-hover instead."
+    }
+  }
+}

package/tokens/semantic/gauge.json

@@ -0,0 +1,45 @@
+{
+  "gauge": {
+    "$description": "A bar that shows an amount: Meter and Progress. The fill is the solid color of the scope around it, so data-color on the root (success, warning, error or any palette) re-colors the fill and the default follows the brand's accent.",
+    "track-color": {
+      "$value": "{fill.track}",
+      "$description": "The empty part of the bar. Every palette's fill reads 3:1 on it, so the amount is clear in both themes."
+    },
+    "height-sm": {
+      "$value": "{space.1}",
+      "$description": "Thin bar for dense lists."
+    },
+    "height": {
+      "$value": "{space.2}",
+      "$description": "Default bar height."
+    },
+    "height-lg": {
+      "$value": "{space.3}",
+      "$description": "Thick bar when the amount is the main thing on screen."
+    },
+    "radius": {
+      "$value": "{radius.pill}",
+      "$description": "Round ends on the track and the fill."
+    },
+    "gap": {
+      "$value": "{space.2}",
+      "$description": "Space between the label row and the bar."
+    },
+    "label-color": {
+      "$value": "{text.primary}",
+      "$description": "What is being measured."
+    },
+    "value-color": {
+      "$value": "{text.secondary}",
+      "$description": "The number, quieter than its label."
+    },
+    "transition": {
+      "$value": "width {duration.slow} {easing.default}",
+      "$description": "The fill grows smoothly when the value changes."
+    },
+    "indeterminate-duration": {
+      "$value": "1.5s",
+      "$description": "One sweep of an indeterminate progress bar. Slow enough to read as waiting, not as an alarm."
+    }
+  }
+}

package/tokens/semantic/icon-button.json

@@ -0,0 +1,33 @@
+{
+  "icon-button": {
+    "$description": "Small icon-only buttons: the X that dismisses a popover, dialog or toast, and the clear and open buttons inside a field. One look everywhere, so people learn it once.",
+    "size": {
+      "$value": "{space.6}",
+      "$description": "Square hit area around the X icon."
+    },
+    "inset": {
+      "$value": "{space.2}",
+      "$description": "Distance from the container's top and end corner when the button sits in a corner."
+    },
+    "radius": {
+      "$value": "{radius.item}",
+      "$description": "Rounded like a menu item, since its hover fill reads as a highlighted item."
+    },
+    "color": {
+      "$value": "{text.tertiary}",
+      "$description": "Quiet at rest so it doesn't compete with the content."
+    },
+    "color-hover": {
+      "$value": "{text.primary}",
+      "$description": "Darkens on hover to confirm it's the target."
+    },
+    "background-hover": {
+      "$value": "{fill.subtle}",
+      "$description": "A light neutral wash on hover, the same as a hovered row."
+    },
+    "transition": {
+      "$value": "{transition.button}",
+      "$description": "Responds as fast as a button."
+    }
+  }
+}

package/tokens/semantic/icon.json

@@ -0,0 +1,30 @@
+{
+  "icon-size": {
+    "$description": "One icon size per text tier. An icon takes the size of the tier whose text it sits beside, so icons and text scale together. Fixed px so glyphs land on whole pixels.",
+    "minimize": {
+      "$value": "12px",
+      "$type": "dimension",
+      "$description": "Icons beside minimize text: tiny indicators and markers."
+    },
+    "condense": {
+      "$value": "14px",
+      "$type": "dimension",
+      "$description": "Icons beside condense text: chips, small controls, dense rows."
+    },
+    "base": {
+      "$value": "16px",
+      "$type": "dimension",
+      "$description": "Icons beside base text: menu and list indicators, field icons. The default."
+    },
+    "magnify": {
+      "$value": "20px",
+      "$type": "dimension",
+      "$description": "Icons beside magnify text, and icons that lead a block such as a toast or accordion row."
+    },
+    "maximize": {
+      "$value": "24px",
+      "$type": "dimension",
+      "$description": "Icons beside maximize headings, and the largest touch-size buttons."
+    }
+  }
+}

package/tokens/semantic/item.json

@@ -0,0 +1,65 @@
+{
+  "item": {
+    "$description": "Rows inside menus and listboxes (Menu, Context menu, Select, Combobox, Autocomplete) share one look and one set of states.",
+    "color": {
+      "$value": "{text.primary}",
+      "$description": "Row text at rest."
+    },
+    "color-hover": {
+      "$value": "{text.on-tint}",
+      "$description": "Row text on the highlighted tint."
+    },
+    "color-selected": {
+      "$value": "{text.on-tint-strong}",
+      "$description": "Row text on the selected tint."
+    },
+    "color-disabled": {
+      "$value": "{text.disabled}",
+      "$description": "Row text when the row can't be picked."
+    },
+    "background-hover": {
+      "$value": "{interactive.tint-hover}",
+      "$description": "Highlighted row (pointer or keyboard)."
+    },
+    "background-selected": {
+      "$value": "{interactive.tint-active}",
+      "$description": "The chosen row."
+    },
+    "radius": {
+      "$value": "{radius.item}",
+      "$description": "Row corners inside the popup."
+    },
+    "padding-block": {
+      "$value": "{space.2-5}",
+      "$description": "Row height comes from this and the base text line."
+    },
+    "padding-block-dense": {
+      "$value": "{space.2}",
+      "$description": "Menu rows are a little tighter than listbox options, since menus are scanned, not read."
+    },
+    "padding-inline": {
+      "$value": "{space.3}",
+      "$description": "Space before and after row text."
+    },
+    "gap": {
+      "$value": "{space.2}",
+      "$description": "Between a row's icon, text and indicator."
+    },
+    "opacity-disabled": {
+      "$value": "0.5",
+      "$description": "Disabled rows fade as well as gray out."
+    },
+    "transition": {
+      "$value": "all 0.15s ease",
+      "$description": "Highlight follows the pointer quickly."
+    },
+    "indicator-color": {
+      "$value": "{interactive.default}",
+      "$description": "The check or dot that marks a chosen row."
+    },
+    "indicator-size": {
+      "$value": "{icon-size.base}",
+      "$description": "Square slot for the indicator, the same size as a row icon so text lines up with or without one."
+    }
+  }
+}

package/tokens/semantic/modal.json

@@ -0,0 +1,86 @@
+{
+  "modal": {
+    "$description": "Dialogs, alert dialogs and drawers: layers that take over the page until they are dismissed. They share one surface, scrim, heading and motion so every modal reads as the same kind of thing.",
+    "background": {
+      "$value": "{surface.modal}",
+      "$description": "Modal fill."
+    },
+    "border-color": {
+      "$value": "{border.default}",
+      "$description": "Modal edge, the same quiet line as popups."
+    },
+    "border-width": {
+      "$value": "{stroke.default}",
+      "$description": "Modal edge thickness."
+    },
+    "radius": {
+      "$value": "{radius.modal}",
+      "$description": "The largest radius, so a modal reads as its own layer. A drawer rounds only the edge facing the page."
+    },
+    "shadow": {
+      "$value": "{elevation.xl}",
+      "$description": "The deepest shadow, because a modal sits above everything but popups and toasts."
+    },
+    "padding": {
+      "$value": "{space.6}",
+      "$description": "Space inside a modal."
+    },
+    "gap": {
+      "$value": "{space.4}",
+      "$description": "Space between a modal's title, description, content and form."
+    },
+    "actions-gap": {
+      "$value": "{space.3}",
+      "$description": "Space between the buttons in a modal's action row."
+    },
+    "actions-spacing": {
+      "$value": "{space.6}",
+      "$description": "Extra space above the action row, so the buttons sit apart from the content they act on."
+    },
+    "width": {
+      "$value": "90vw",
+      "$description": "A dialog fills most of a narrow screen."
+    },
+    "max-width": {
+      "$value": "500px",
+      "$description": "Widest a dialog gets, so its text stays an easy line length."
+    },
+    "max-height": {
+      "$value": "90vh",
+      "$description": "Tallest a dialog gets; longer content scrolls inside it."
+    },
+    "backdrop": {
+      "$value": "color-mix(in srgb, {overlay.base} 50%, transparent)",
+      "$type": "color",
+      "$description": "Scrim that dims the page behind a modal."
+    },
+    "backdrop-z-index": {
+      "$value": "{z-index.scrim}",
+      "$description": "The scrim covers the page and its sticky bars."
+    },
+    "z-index": {
+      "$value": "{z-index.modal}",
+      "$description": "Modals sit above the scrim; popups opened from inside them sit above modals."
+    },
+    "animation-duration": {
+      "$value": "{duration.normal}",
+      "$description": "How long a modal takes to open or close."
+    },
+    "animation-easing": {
+      "$value": "{easing.out}",
+      "$description": "Modals arrive quickly and settle."
+    },
+    "scale-closed": {
+      "$value": "{popup.scale-closed}",
+      "$description": "A dialog grows from just under full size as it opens, like a popup."
+    },
+    "title-color": {
+      "$value": "{text.primary}",
+      "$description": "Modal heading color."
+    },
+    "description-color": {
+      "$value": "{text.secondary}",
+      "$description": "Supporting text under the heading."
+    }
+  }
+}

package/tokens/semantic/motion.json

@@ -0,0 +1,20 @@
+{
+  "transition": {
+    "button": {
+      "$value": "all {duration.fast} {easing.default}",
+      "$description": "Buttons respond fast so clicks feel immediate."
+    },
+    "dropdown": {
+      "$value": "all {duration.fast} {easing.out}",
+      "$description": "Dropdowns open fast and ease out so they arrive softly."
+    },
+    "input": {
+      "$value": "all {duration.normal} {easing.default}",
+      "$description": "Inputs change state at normal speed so focus changes are noticeable but not slow."
+    },
+    "modal": {
+      "$value": "all {duration.normal} {easing.out}",
+      "$description": "Modals take longer and ease out because they cover the page."
+    }
+  }
+}

package/tokens/semantic/notice.json

@@ -0,0 +1,37 @@
+{
+  "notice": {
+    "$description": "A short message that arrives on its own: toasts now, banners and inline alerts later. It floats on the popup surface; data-color (or a toast's type) tints it with that palette's soft fill, edge and text, so a success always looks like a success.",
+    "padding": {
+      "$value": "{space.4}",
+      "$description": "Space inside the notice, roomier than a popup's because it is read, not picked from."
+    },
+    "gap": {
+      "$value": "{space.3}",
+      "$description": "Space between the icon and the text, and between stacked toasts."
+    },
+    "text-gap": {
+      "$value": "{space.1}",
+      "$description": "Space between the title and the description."
+    },
+    "description-color": {
+      "$value": "{text.secondary}",
+      "$description": "Description on the plain surface. A tinted notice uses its palette's text color for both lines."
+    },
+    "z-index": {
+      "$value": "{z-index.toast}",
+      "$description": "Toasts stay visible over modals."
+    },
+    "animation-duration": {
+      "$value": "{duration.slow}",
+      "$description": "Arriving and leaving. Slower than a popup because a toast slides in from the edge."
+    },
+    "animation-easing": {
+      "$value": "{easing.out}",
+      "$description": "Arrives fast and settles."
+    },
+    "peek": {
+      "$value": "{space.3}",
+      "$description": "How much of each toast behind the front one shows when the stack is collapsed."
+    }
+  }
+}

package/tokens/semantic/popup.json

@@ -0,0 +1,89 @@
+{
+  "popup": {
+    "$description": "Every floating layer that opens from a trigger (menus, listboxes, popovers, preview cards) shares one surface, so they read as the same kind of thing.",
+    "background": {
+      "$value": "{surface.base}",
+      "$description": "Popup fill."
+    },
+    "border-color": {
+      "$value": "{border.default}",
+      "$description": "Popup edge, a quiet line that separates it from the page under it."
+    },
+    "border-width": {
+      "$value": "{stroke.default}",
+      "$description": "Popup edge thickness."
+    },
+    "radius": {
+      "$value": "{radius.surface}",
+      "$description": "Corners of a free-floating popup."
+    },
+    "radius-field": {
+      "$value": "{radius.control}",
+      "$description": "Corners of a list that drops from a field, matching the field so the two read as one control."
+    },
+    "shadow": {
+      "$value": "{elevation.lg}",
+      "$description": "Lifts the popup above the page."
+    },
+    "padding": {
+      "$value": "{space.1}",
+      "$description": "Space around a list of items, small so highlighted rows almost reach the edge."
+    },
+    "padding-panel": {
+      "$value": "{space.4}",
+      "$description": "Space around free content such as a popover's text."
+    },
+    "z-index": {
+      "$value": "{z-index.popover}",
+      "$description": "Popups stack above modals, so a menu inside a dialog still shows."
+    },
+    "animation-duration": {
+      "$value": "{duration.normal}",
+      "$description": "How long a popup takes to open."
+    },
+    "animation-easing": {
+      "$value": "ease-out",
+      "$description": "Popups arrive quickly and settle."
+    },
+    "arrow-fill": {
+      "$value": "{popup.background}",
+      "$description": "The arrow is part of the popup, so it takes the popup's fill."
+    },
+    "arrow-stroke": {
+      "$value": "{popup.border-color}",
+      "$description": "Arrow edge, continuing the popup's border."
+    },
+    "scale-closed": {
+      "$value": "0.95",
+      "$description": "Popups grow from just under full size as they open, so they seem to come from the trigger."
+    },
+    "list-max-height": {
+      "$value": "300px",
+      "$description": "A long list scrolls inside the popup after about seven rows."
+    },
+    "separator-color": {
+      "$value": "{border.subtle}",
+      "$description": "Line between groups of rows, quieter than the popup edge."
+    },
+    "separator-spacing": {
+      "$value": "{space.1}",
+      "$description": "Space above and below a separator."
+    },
+    "group-label-padding-top": {
+      "$value": "{space.2}",
+      "$description": "Space above a group label, so it sits closer to its own rows than to the group before."
+    },
+    "group-label-padding-bottom": {
+      "$value": "{space.1}",
+      "$description": "Space between a group label and its first row."
+    },
+    "empty-padding-block": {
+      "$value": "{space.6}",
+      "$description": "Room around a 'No results' message, so an empty list doesn't collapse to a sliver."
+    },
+    "min-width": {
+      "$value": "200px",
+      "$description": "Narrowest a free-floating popup or menu gets, so short labels don't make a sliver."
+    }
+  }
+}

package/tokens/semantic/scheme.json

@@ -0,0 +1,11 @@
+{
+  "color-scheme": {
+    "$value": "light",
+    "$description": "Which way native browser parts (scrollbars, date pickers, autofill) draw: light, or dark wherever the dark theme is on. Set as color-scheme on the root and handed to AG Grid's browserColorScheme, so they follow data-theme as well as the system setting.",
+    "$extensions": {
+      "sl.modes": {
+        "dark": "dark"
+      }
+    }
+  }
+}

package/tokens/semantic/shape.json

@@ -0,0 +1,54 @@
+{
+  "radius": {
+    "box": {
+      "$value": "{radius.base}",
+      "$description": "Default rounding for boxes that are not controls or surfaces."
+    },
+    "chrome": {
+      "$value": "{radius.md}",
+      "$description": "App chrome such as toolbars and menubars."
+    },
+    "control": {
+      "$value": "{radius.sm}",
+      "$description": "Inputs, buttons and other controls you click or type in."
+    },
+    "focus": {
+      "$value": "{radius.sm}",
+      "$description": "Focus rings follow the control radius."
+    },
+    "item": {
+      "$value": "{radius.sm}",
+      "$description": "Rows inside menus and lists, so highlighted items keep a soft edge inside the popup."
+    },
+    "minimal": {
+      "$value": "{radius.none}",
+      "$description": "Square corners for things that tile edge to edge."
+    },
+    "modal": {
+      "$value": "{radius.xl}",
+      "$description": "Dialogs get the largest radius so they read as a separate layer."
+    },
+    "pill": {
+      "$value": "{radius.full}",
+      "$description": "Fully rounded ends for pills, badges and switches."
+    },
+    "surface": {
+      "$value": "{radius.lg}",
+      "$description": "Cards, popovers and panels."
+    }
+  },
+  "stroke": {
+    "default": {
+      "$value": "{stroke.thin}",
+      "$description": "Normal borders."
+    },
+    "emphasis": {
+      "$value": "{stroke.medium}",
+      "$description": "Borders that mark a selected or focused state."
+    },
+    "strong": {
+      "$value": "{stroke.thick}",
+      "$description": "Borders that must hold up at a distance, such as dashed drop zones."
+    }
+  }
+}