@scattered-light/loomiere 0.0.0-stage → 0.1.1

package/tokens/semantic/spacing.json

@@ -0,0 +1,110 @@
+{
+  "control": {
+    "height-lg": {
+      "$value": "{space.13}"
+    },
+    "height-md": {
+      "$value": "{space.11}"
+    },
+    "height-sm": {
+      "$value": "{space.9}"
+    },
+    "height-xs": {
+      "$value": "{space.7}"
+    },
+    "padding-block": {
+      "$value": "{space.3}"
+    },
+    "padding-block-lg": {
+      "$value": "{space.4}"
+    },
+    "padding-block-sm": {
+      "$value": "{space.2}"
+    },
+    "padding-block-xs": {
+      "$value": "{space.1}"
+    },
+    "padding-inline": {
+      "$value": "{space.4}"
+    },
+    "padding-inline-lg": {
+      "$value": "{space.5}"
+    },
+    "padding-inline-sm": {
+      "$value": "{space.3}"
+    },
+    "padding-inline-xs": {
+      "$value": "{space.2}"
+    },
+    "$description": "Control sizes. Heights follow the space scale so controls line up with the layout grid; md is 44px, the touch target size."
+  },
+  "gap": {
+    "control": {
+      "$value": "{space.2}"
+    },
+    "control-sm": {
+      "$value": "{space.1-5}"
+    },
+    "control-xs": {
+      "$value": "{space.1}"
+    },
+    "stack-lg": {
+      "$value": "{space.6}"
+    },
+    "stack-md": {
+      "$value": "{space.4}"
+    },
+    "stack-sm": {
+      "$value": "{space.2}"
+    },
+    "$description": "Gaps between related items. Control gaps sit inside a control (icon and label); stack gaps sit between controls."
+  },
+  "inset": {
+    "popup": {
+      "$value": "{space.2}",
+      "$description": "Padding inside menus and popups, between the popup edge and its items."
+    }
+  },
+  "space": {
+    "block-lg": {
+      "$value": "{space.8}"
+    },
+    "block-md": {
+      "$value": "{space.6}"
+    },
+    "block-sm": {
+      "$value": "{space.4}"
+    },
+    "block-xs": {
+      "$value": "{space.2}"
+    },
+    "inline-lg": {
+      "$value": "{space.8}"
+    },
+    "inline-md": {
+      "$value": "{space.6}"
+    },
+    "inline-sm": {
+      "$value": "{space.4}"
+    },
+    "inline-xs": {
+      "$value": "{space.2}"
+    },
+    "$description": "Directional padding for containers: block is top and bottom, inline is left and right."
+  },
+  "spacing": {
+    "stack-lg": {
+      "$value": "{space.8}"
+    },
+    "stack-md": {
+      "$value": "{space.6}"
+    },
+    "stack-sm": {
+      "$value": "{space.4}"
+    },
+    "stack-xs": {
+      "$value": "{space.2}"
+    },
+    "$description": "Vertical rhythm between stacked blocks of content."
+  }
+}

package/tokens/semantic/table.json

@@ -0,0 +1,73 @@
+{
+  "table": {
+    "$description": "Data tables and grids (AG Grid today, any table later). Rows are list items laid flat: the same hover and selected tints as menu rows, on the page surface, with a tray-colored header so the column names read as chrome.",
+    "background": {
+      "$value": "{surface.canvas}",
+      "$description": "Cell area. The page color, so a grid sits on the page like body text."
+    },
+    "color": {
+      "$value": "{text.primary}",
+      "$description": "Cell text."
+    },
+    "subtle-color": {
+      "$value": "{text.secondary}",
+      "$description": "Secondary text in cells and panels: counts, hints, group totals."
+    },
+    "header-background": {
+      "$value": "{surface.tray}",
+      "$description": "Header row, side bar and other grid chrome. The tray step, so it sits a step off the cells in both themes and secondary text on it still passes AA."
+    },
+    "header-color": {
+      "$value": "{text.primary}",
+      "$description": "Column names."
+    },
+    "header-background-hover": {
+      "$value": "{fill.subtle}",
+      "$description": "A header cell under the pointer, showing it can be clicked to sort."
+    },
+    "border-color": {
+      "$value": "{border.default}",
+      "$description": "The grid's outer edge and the line under the header."
+    },
+    "row-border-color": {
+      "$value": "{border.subtle}",
+      "$description": "Hairlines between rows, quiet so the data leads."
+    },
+    "row-hover": {
+      "$value": "{item.background-hover}",
+      "$description": "Row under the pointer. Same tint as a highlighted menu row."
+    },
+    "row-selected": {
+      "$value": "{item.background-selected}",
+      "$description": "Selected rows. Same tint as the chosen menu row."
+    },
+    "column-hover": {
+      "$value": "{fill.subtle}",
+      "$description": "Column under the pointer, when column hover is on. Neutral so it never reads as a selection."
+    },
+    "range-background": {
+      "$value": "{interactive.tint}",
+      "$description": "Cells inside a dragged range selection."
+    },
+    "range-border": {
+      "$value": "{focus.ring}",
+      "$description": "Edge of a range selection and of the focused cell, the same color as every focus ring."
+    },
+    "row-height": {
+      "$value": "{control.height-sm}",
+      "$description": "Row height: the small control height, so a checkbox, input or button in a cell fits without growing the row."
+    },
+    "header-height": {
+      "$value": "{control.height-md}",
+      "$description": "Header row height: the regular control height, a little taller than rows so the header reads as its own band."
+    },
+    "cell-padding-inline": {
+      "$value": "{control.padding-inline-sm}",
+      "$description": "Space either side of cell text, matching small controls."
+    },
+    "radius": {
+      "$value": "{radius.surface}",
+      "$description": "Grid corners, like any card or panel."
+    }
+  }
+}

package/tokens/semantic/typography.json

@@ -0,0 +1,312 @@
+{
+  "font": {
+    "$description": "Text styles for the condense, base, magnify and minimize tiers. Each style has its parts (family, size, weight, line height, letter spacing) and a -font shorthand that combines them.",
+    "base": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.md}",
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.md}"
+      },
+      "$description": "Body copy in the base tier, the default UI and body text."
+    },
+    "base-selected": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.md}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.md}"
+      },
+      "$description": "The selected or current item in the base tier (the default UI and body text): selected tabs and toggles, the current nav item or page. Base body text at semibold, so selection reads without changing size."
+    },
+    "base-label": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.sm}",
+        "fontWeight": "{font-weight.medium}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.sm}"
+      },
+      "$description": "Form labels in the base tier, the default UI and body text."
+    },
+    "base-link": {
+      "$type": "typography",
+      "$value": "{font.base}",
+      "$description": "Links in the base tier. The same type as base body text: a link stands out by color and underline, not by its type."
+    },
+    "base-subtitle": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.md}",
+        "fontWeight": "{font-weight.bold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.md}"
+      },
+      "$description": "Subtitles in the base tier, the default UI and body text."
+    },
+    "base-trigger": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.md}",
+        "fontWeight": "{font-weight.medium}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.sm}"
+      },
+      "$description": "Buttons and triggers in the base tier, the default UI and body text."
+    },
+    "code": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.mono}",
+        "fontSize": "{font-size.sm}",
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.sm}"
+      },
+      "$description": "Code uses the mono family so characters line up."
+    },
+    "condense": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.sm}",
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.sm}"
+      },
+      "$description": "Body copy in the condense tier, dense UI text (tables, secondary labels)."
+    },
+    "condense-trigger": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.sm}",
+        "fontWeight": "{font-weight.medium}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.sm}"
+      },
+      "$description": "Buttons and triggers in the condense tier (dense UI): condense body text at medium, like base-trigger one tier down."
+    },
+    "condense-selected": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.sm}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.sm}"
+      },
+      "$description": "The selected or current item in the condense tier (dense UI text): selected tabs and toggles, the current nav item or page. Condense body text at semibold, so selection reads without changing size."
+    },
+    "condense-link": {
+      "$type": "typography",
+      "$value": "{font.condense}",
+      "$description": "Links in the condense tier. The same type as condense body text: a link stands out by color and underline, not by its type."
+    },
+    "condense-subtitle": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.sm}",
+        "fontWeight": "{font-weight.bold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.sm}"
+      },
+      "$description": "Subtitles in the condense tier, dense UI text (tables, secondary labels)."
+    },
+    "condense-subtitle-label": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.sm}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.wider}",
+        "lineHeight": "{line-height.sm}"
+      },
+      "$description": "Small uppercase eyebrow labels in the condense tier, dense UI text (tables, secondary labels).",
+      "$extensions": {
+        "sl.text-transform": "uppercase"
+      }
+    },
+    "magnify": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.lg}",
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.md}"
+      },
+      "$description": "Body copy in the magnify tier, emphasized body text (lead paragraphs)."
+    },
+    "magnify-trigger": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.lg}",
+        "fontWeight": "{font-weight.medium}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.md}"
+      },
+      "$description": "Buttons and triggers in the magnify tier (emphasized, larger UI): magnify body text at medium, like base-trigger one tier up."
+    },
+    "minimize": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.xs}",
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.xs}"
+      },
+      "$description": "Body copy in the minimize tier, the smallest functional text (captions, fine print)."
+    },
+    "minimize-trigger": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.xs}",
+        "fontWeight": "{font-weight.medium}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.xs}"
+      },
+      "$description": "Buttons and triggers in the minimize tier (the smallest UI): minimize body text at medium, like base-trigger one tier down."
+    },
+    "minimize-selected": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.xs}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.xs}"
+      },
+      "$description": "The selected or current item in the minimize tier (the smallest functional text): selected tabs and toggles, the current nav item or page. Minimize body text at semibold, so selection reads without changing size."
+    },
+    "minimize-link": {
+      "$type": "typography",
+      "$value": "{font.minimize}",
+      "$description": "Links in the minimize tier. The same type as minimize body text: a link stands out by color and underline, not by its type."
+    },
+    "minimize-subtitle": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.xs}",
+        "fontWeight": "{font-weight.bold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.xs}"
+      },
+      "$description": "Subtitles in the minimize tier, the smallest functional text (captions, fine print)."
+    },
+    "minimize-subtitle-label": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.body}",
+        "fontSize": "{font-size.xs}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.widest}",
+        "lineHeight": "{line-height.xs}"
+      },
+      "$description": "Small uppercase eyebrow labels in the minimize tier, the smallest functional text (captions, fine print).",
+      "$extensions": {
+        "sl.text-transform": "uppercase"
+      }
+    },
+    "maximize-2xl": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.2xl}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.2xl}"
+      },
+      "$description": "Display text at 2xl, for headings and hero copy."
+    },
+    "maximize-3xl": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.3xl}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.3xl}"
+      },
+      "$description": "Display text at 3xl, for headings and hero copy."
+    },
+    "maximize-4xl": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.4xl}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.4xl}"
+      },
+      "$description": "Display text at 4xl, for headings and hero copy."
+    },
+    "maximize-lg": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.lg}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.md}"
+      },
+      "$description": "Display text at lg, for headings and hero copy."
+    },
+    "maximize-md": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.md}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.md}"
+      },
+      "$description": "Display text at md, for headings and hero copy."
+    },
+    "maximize-sm": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.sm}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.sm}"
+      },
+      "$description": "Display text at sm, for headings and hero copy."
+    },
+    "maximize-xl": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.xl}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.md}"
+      },
+      "$description": "Display text at xl, for headings and hero copy."
+    },
+    "maximize-xs": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.xs}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.xs}"
+      },
+      "$description": "Display text at xs, for headings and hero copy."
+    }
+  }
+}