fractalstyler2 0.4.0 → 0.7.0

package/registry.json

@@ -0,0 +1,2002 @@
+[
+  {
+    "class": ".gap-*",
+    "layer": "L1",
+    "property": "gap: calc(var(--space-*) * var(--gap-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Flex and grid gap spacing (presets: 3xs..3xl, literals: ladder to 64px)",
+    "example": "<div class=\"gap-*\">"
+  },
+  {
+    "class": ".rgap-*",
+    "layer": "L1",
+    "property": "row-gap: calc(var(--space-*) * var(--gap-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Row gap spacing",
+    "example": "<div class=\"rgap-*\">"
+  },
+  {
+    "class": ".cgap-*",
+    "layer": "L1",
+    "property": "column-gap: calc(var(--space-*) * var(--gap-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Column gap spacing",
+    "example": "<div class=\"cgap-*\">"
+  },
+  {
+    "class": ".pad-*",
+    "layer": "L1",
+    "property": "padding: calc(var(--space-*) * var(--pad-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Padding on all sides",
+    "example": "<div class=\"pad-*\">"
+  },
+  {
+    "class": ".pad-x-*",
+    "layer": "L1",
+    "property": "padding-inline: calc(var(--space-*) * var(--pad-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Horizontal inline padding",
+    "example": "<div class=\"pad-x-*\">"
+  },
+  {
+    "class": ".pad-y-*",
+    "layer": "L1",
+    "property": "padding-block: calc(var(--space-*) * var(--pad-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Vertical block padding",
+    "example": "<div class=\"pad-y-*\">"
+  },
+  {
+    "class": ".pad-top-*",
+    "layer": "L1",
+    "property": "padding-top: calc(var(--space-*) * var(--pad-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Top padding",
+    "example": "<div class=\"pad-top-*\">"
+  },
+  {
+    "class": ".pad-right-*",
+    "layer": "L1",
+    "property": "padding-right: calc(var(--space-*) * var(--pad-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Right padding",
+    "example": "<div class=\"pad-right-*\">"
+  },
+  {
+    "class": ".pad-bottom-*",
+    "layer": "L1",
+    "property": "padding-bottom: calc(var(--space-*) * var(--pad-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Bottom padding",
+    "example": "<div class=\"pad-bottom-*\">"
+  },
+  {
+    "class": ".pad-left-*",
+    "layer": "L1",
+    "property": "padding-left: calc(var(--space-*) * var(--pad-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Left padding",
+    "example": "<div class=\"pad-left-*\">"
+  },
+  {
+    "class": ".marg-*",
+    "layer": "L1",
+    "property": "margin: calc(var(--space-*) * var(--gap-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Margin on all sides",
+    "example": "<div class=\"marg-*\">"
+  },
+  {
+    "class": ".marg--*",
+    "layer": "L1",
+    "property": "margin: calc(var(--space-*) * var(--gap-scale) * -1) | -{N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Negative margin on all sides",
+    "example": "<div class=\"marg--*\">"
+  },
+  {
+    "class": ".marg-x-*",
+    "layer": "L1",
+    "property": "margin-inline: calc(var(--space-*) * var(--gap-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Horizontal inline margin",
+    "example": "<div class=\"marg-x-*\">"
+  },
+  {
+    "class": ".marg-y-*",
+    "layer": "L1",
+    "property": "margin-block: calc(var(--space-*) * var(--gap-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Vertical block margin",
+    "example": "<div class=\"marg-y-*\">"
+  },
+  {
+    "class": ".marg-top-*",
+    "layer": "L1",
+    "property": "margin-top: calc(var(--space-*) * var(--gap-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Top margin",
+    "example": "<div class=\"marg-top-*\">"
+  },
+  {
+    "class": ".marg-top--*",
+    "layer": "L1",
+    "property": "margin-top: calc(var(--space-*) * var(--gap-scale) * -1) | -{N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Negative top margin",
+    "example": "<div class=\"marg-top--*\">"
+  },
+  {
+    "class": ".marg-bottom-*",
+    "layer": "L1",
+    "property": "margin-bottom: calc(var(--space-*) * var(--gap-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Bottom margin",
+    "example": "<div class=\"marg-bottom-*\">"
+  },
+  {
+    "class": ".marg-bottom--*",
+    "layer": "L1",
+    "property": "margin-bottom: calc(var(--space-*) * var(--gap-scale) * -1) | -{N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Negative bottom margin",
+    "example": "<div class=\"marg-bottom--*\">"
+  },
+  {
+    "class": ".marg-left-*",
+    "layer": "L1",
+    "property": "margin-left: calc(var(--space-*) * var(--gap-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Left margin",
+    "example": "<div class=\"marg-left-*\">"
+  },
+  {
+    "class": ".marg-right-*",
+    "layer": "L1",
+    "property": "margin-right: calc(var(--space-*) * var(--gap-scale)) | {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Right margin",
+    "example": "<div class=\"marg-right-*\">"
+  },
+  {
+    "class": ".radius-*",
+    "layer": "L1",
+    "property": "border-radius: {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Corner border radius (ladder to 64px; .radius-0 is the reset, .radius-full for pills)",
+    "example": "<div class=\"radius-*\">"
+  },
+  {
+    "class": ".radius-full",
+    "layer": "L1",
+    "property": "border-radius: var(--radius-full)",
+    "file": "_02_dimensions.sass",
+    "description": "Circular border radius (9999px)",
+    "example": "<div class=\"radius-full\">"
+  },
+  {
+    "class": ".w-*",
+    "layer": "L1",
+    "property": "width: {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Width in pixels (ladder to 512px)",
+    "example": "<div class=\"w-*\">"
+  },
+  {
+    "class": ".h-*",
+    "layer": "L1",
+    "property": "height: {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Height in pixels (ladder to 512px)",
+    "example": "<div class=\"h-*\">"
+  },
+  {
+    "class": ".square-*",
+    "layer": "L1",
+    "property": "width: {N}px; height: {N}px",
+    "file": "_02_dimensions.sass",
+    "description": "Square dimensions in pixels (ladder to 512px)",
+    "example": "<div class=\"square-*\">"
+  },
+  {
+    "class": ".min0",
+    "layer": "L1",
+    "property": "min-width: 0; min-height: 0",
+    "file": "_02_dimensions.sass",
+    "description": "Zero min bounds to prevent flex blowouts",
+    "example": "<div class=\"min0\">"
+  },
+  {
+    "class": ".wfull",
+    "layer": "L1",
+    "property": "width: 100%",
+    "file": "_02_dimensions.sass",
+    "description": "100% full width",
+    "example": "<div class=\"wfull\">"
+  },
+  {
+    "class": ".hfull",
+    "layer": "L1",
+    "property": "height: 100%",
+    "file": "_02_dimensions.sass",
+    "description": "100% full height",
+    "example": "<div class=\"hfull\">"
+  },
+  {
+    "class": ".full",
+    "layer": "L1",
+    "property": "width: 100%; height: 100%",
+    "file": "_02_dimensions.sass",
+    "description": "100% width and height",
+    "example": "<div class=\"full\">"
+  },
+  {
+    "class": ".hfull-vh",
+    "layer": "L1",
+    "property": "min-height: 100vh",
+    "file": "_02_dimensions.sass",
+    "description": "Full viewport height",
+    "example": "<div class=\"hfull-vh\">"
+  },
+  {
+    "class": ".hfull-vh-fitted",
+    "layer": "L1",
+    "property": "min-height: calc(100vh - var(--header-height) - var(--footer-height))",
+    "file": "_02_dimensions.sass",
+    "description": "Viewport height fitted between header and footer",
+    "example": "<div class=\"hfull-vh-fitted\">"
+  },
+  {
+    "class": ".frame-16-9",
+    "layer": "L3",
+    "property": "aspect-ratio: 16 / 9",
+    "file": "_04_layouts.sass",
+    "description": "Aspect-ratio media frame (16/9)",
+    "example": "<div class=\"frame-16-9\">"
+  },
+  {
+    "class": ".frame-9-16",
+    "layer": "L3",
+    "property": "aspect-ratio: 9 / 16",
+    "file": "_04_layouts.sass",
+    "description": "Aspect-ratio media frame (9/16)",
+    "example": "<div class=\"frame-9-16\">"
+  },
+  {
+    "class": ".frame-4-3",
+    "layer": "L3",
+    "property": "aspect-ratio: 4 / 3",
+    "file": "_04_layouts.sass",
+    "description": "Aspect-ratio media frame (4/3)",
+    "example": "<div class=\"frame-4-3\">"
+  },
+  {
+    "class": ".frame-3-4",
+    "layer": "L3",
+    "property": "aspect-ratio: 3 / 4",
+    "file": "_04_layouts.sass",
+    "description": "Aspect-ratio media frame (3/4)",
+    "example": "<div class=\"frame-3-4\">"
+  },
+  {
+    "class": ".frame-3-2",
+    "layer": "L3",
+    "property": "aspect-ratio: 3 / 2",
+    "file": "_04_layouts.sass",
+    "description": "Aspect-ratio media frame (3/2)",
+    "example": "<div class=\"frame-3-2\">"
+  },
+  {
+    "class": ".frame-2-3",
+    "layer": "L3",
+    "property": "aspect-ratio: 2 / 3",
+    "file": "_04_layouts.sass",
+    "description": "Aspect-ratio media frame (2/3)",
+    "example": "<div class=\"frame-2-3\">"
+  },
+  {
+    "class": ".frame-1-1",
+    "layer": "L3",
+    "property": "aspect-ratio: 1 / 1",
+    "file": "_04_layouts.sass",
+    "description": "Aspect-ratio media frame (1/1)",
+    "example": "<div class=\"frame-1-1\">"
+  },
+  {
+    "class": ".theme-light-default",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-light-default\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-himalaya-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-himalaya-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-editorial-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-editorial-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-space-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-space-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-sun-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-sun-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-monochrono-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-monochrono-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-molly-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-molly-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-malana-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-malana-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-coresync-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-coresync-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-studio-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-studio-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-matcha-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-matcha-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-sakura-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-sakura-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-nordic-frost-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-nordic-frost-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-desert-dune-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-desert-dune-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-lavender-mist-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-lavender-mist-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-botanical-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-botanical-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-clay-studio-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-clay-studio-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-solaris-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-solaris-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-cyberpunk-day-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-cyberpunk-day-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-copper-patina-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-copper-patina-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-dracula-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-dracula-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-lagoona-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-lagoona-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-frozen-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-frozen-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-night-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-night-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-inkworm-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-inkworm-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-monochrono-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-monochrono-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-fouram-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-fouram-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-wintercame-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-wintercame-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-sun-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-sun-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-console-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-console-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-dracula-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-dracula-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-catppuccin-mocha",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-catppuccin-mocha\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-nord-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-nord-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-gruvbox-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-gruvbox-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-onedark-pro",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-onedark-pro\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-rose-pine-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-rose-pine-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-midnight-emerald-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-midnight-emerald-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-obsidian-crimson-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-obsidian-crimson-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-synthwave-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-synthwave-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-deep-ocean-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-deep-ocean-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-amethyst-void-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-amethyst-void-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".box",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": ".box component / container",
+    "example": "<div class=\"box\">"
+  },
+  {
+    "class": ".box.xcenter",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .box",
+    "example": "<div class=\"box.xcenter\">"
+  },
+  {
+    "class": ".box.xleft",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .box",
+    "example": "<div class=\"box.xleft\">"
+  },
+  {
+    "class": ".box.xright",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .box",
+    "example": "<div class=\"box.xright\">"
+  },
+  {
+    "class": ".box.ycenter",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .box",
+    "example": "<div class=\"box.ycenter\">"
+  },
+  {
+    "class": ".box.ytop",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .box",
+    "example": "<div class=\"box.ytop\">"
+  },
+  {
+    "class": ".box.ybot",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .box",
+    "example": "<div class=\"box.ybot\">"
+  },
+  {
+    "class": ".box.ybetween",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .box",
+    "example": "<div class=\"box.ybetween\">"
+  },
+  {
+    "class": ".box.yevenly",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .box",
+    "example": "<div class=\"box.yevenly\">"
+  },
+  {
+    "class": ".box.yaround",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .box",
+    "example": "<div class=\"box.yaround\">"
+  },
+  {
+    "class": ".row",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": ".row component / container",
+    "example": "<div class=\"row\">"
+  },
+  {
+    "class": ".row.xleft",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .row",
+    "example": "<div class=\"row.xleft\">"
+  },
+  {
+    "class": ".row.xcenter",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .row",
+    "example": "<div class=\"row.xcenter\">"
+  },
+  {
+    "class": ".row.xright",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .row",
+    "example": "<div class=\"row.xright\">"
+  },
+  {
+    "class": ".row.xbetween",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .row",
+    "example": "<div class=\"row.xbetween\">"
+  },
+  {
+    "class": ".row.xevenly",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .row",
+    "example": "<div class=\"row.xevenly\">"
+  },
+  {
+    "class": ".row.xaround",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .row",
+    "example": "<div class=\"row.xaround\">"
+  },
+  {
+    "class": ".row.ycenter",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .row",
+    "example": "<div class=\"row.ycenter\">"
+  },
+  {
+    "class": ".row.ytop",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .row",
+    "example": "<div class=\"row.ytop\">"
+  },
+  {
+    "class": ".row.ybot",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .row",
+    "example": "<div class=\"row.ybot\">"
+  },
+  {
+    "class": ".grid",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": ".grid component / container",
+    "example": "<div class=\"grid\">"
+  },
+  {
+    "class": ".grid.center",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.center\">"
+  },
+  {
+    "class": ".grid.xcenter",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.xcenter\">"
+  },
+  {
+    "class": ".grid.xleft",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.xleft\">"
+  },
+  {
+    "class": ".grid.xright",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.xright\">"
+  },
+  {
+    "class": ".grid.xstretch",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.xstretch\">"
+  },
+  {
+    "class": ".grid.ycenter",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.ycenter\">"
+  },
+  {
+    "class": ".grid.ytop",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.ytop\">"
+  },
+  {
+    "class": ".grid.ybot",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.ybot\">"
+  },
+  {
+    "class": ".grid.ystretch",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.ystretch\">"
+  },
+  {
+    "class": ".grid.xbetween",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.xbetween\">"
+  },
+  {
+    "class": ".grid.xevenly",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.xevenly\">"
+  },
+  {
+    "class": ".grid.xaround",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.xaround\">"
+  },
+  {
+    "class": ".grid.ybetween",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.ybetween\">"
+  },
+  {
+    "class": ".grid.yevenly",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.yevenly\">"
+  },
+  {
+    "class": ".grid.yaround",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Modifier for .grid",
+    "example": "<div class=\"grid.yaround\">"
+  },
+  {
+    "class": ".wrap",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": ".wrap component / container",
+    "example": "<div class=\"wrap\">"
+  },
+  {
+    "class": ".grow",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": ".grow component / container",
+    "example": "<div class=\"grow\">"
+  },
+  {
+    "class": ".shrink-0",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": ".shrink-0 component / container",
+    "example": "<div class=\"shrink-0\">"
+  },
+  {
+    "class": ".relative",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": ".relative component / container",
+    "example": "<div class=\"relative\">"
+  },
+  {
+    "class": ".absolute",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": ".absolute component / container",
+    "example": "<div class=\"absolute\">"
+  },
+  {
+    "class": ".fixed",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": ".fixed component / container",
+    "example": "<div class=\"fixed\">"
+  },
+  {
+    "class": ".sticky",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": ".sticky component / container",
+    "example": "<div class=\"sticky\">"
+  },
+  {
+    "class": ".grid-1",
+    "layer": "L3",
+    "property": "",
+    "file": "_04_layouts.sass",
+    "description": ".grid-1 component / container",
+    "example": "<div class=\"grid-1\">"
+  },
+  {
+    "class": ".grid-2",
+    "layer": "L3",
+    "property": "",
+    "file": "_04_layouts.sass",
+    "description": ".grid-2 component / container",
+    "example": "<div class=\"grid-2\">"
+  },
+  {
+    "class": ".grid-3",
+    "layer": "L3",
+    "property": "",
+    "file": "_04_layouts.sass",
+    "description": ".grid-3 component / container",
+    "example": "<div class=\"grid-3\">"
+  },
+  {
+    "class": ".grid-4",
+    "layer": "L3",
+    "property": "",
+    "file": "_04_layouts.sass",
+    "description": ".grid-4 component / container",
+    "example": "<div class=\"grid-4\">"
+  },
+  {
+    "class": ".grid-6",
+    "layer": "L3",
+    "property": "",
+    "file": "_04_layouts.sass",
+    "description": ".grid-6 component / container",
+    "example": "<div class=\"grid-6\">"
+  },
+  {
+    "class": ".card-grid",
+    "layer": "L3",
+    "property": "",
+    "file": "_04_layouts.sass",
+    "description": ".card-grid component / container",
+    "example": "<div class=\"card-grid\">"
+  },
+  {
+    "class": ".prose",
+    "layer": "L3",
+    "property": "",
+    "file": "_04_layouts.sass",
+    "description": ".prose component / container",
+    "example": "<div class=\"prose\">"
+  },
+  {
+    "class": ".reel",
+    "layer": "L3",
+    "property": "",
+    "file": "_04_layouts.sass",
+    "description": ".reel component / container",
+    "example": "<div class=\"reel\">"
+  },
+  {
+    "class": ".app-shell",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".app-shell component / container",
+    "example": "<div class=\"app-shell\">"
+  },
+  {
+    "class": ".app-header",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".app-header component / container",
+    "example": "<div class=\"app-header\">"
+  },
+  {
+    "class": ".app-main",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".app-main component / container",
+    "example": "<div class=\"app-main\">"
+  },
+  {
+    "class": ".main-section",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".main-section component / container",
+    "example": "<div class=\"main-section\">"
+  },
+  {
+    "class": ".sidebar-left",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ",",
+    "example": "<div class=\"sidebar-left\">"
+  },
+  {
+    "class": ".sidebar-right",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".sidebar-right component / container",
+    "example": "<div class=\"sidebar-right\">"
+  },
+  {
+    "class": ".sidebar-left",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".sidebar-left component / container",
+    "example": "<div class=\"sidebar-left\">"
+  },
+  {
+    "class": ".sidebar-right",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".sidebar-right component / container",
+    "example": "<div class=\"sidebar-right\">"
+  },
+  {
+    "class": ".sidebar-left",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": "Required child of .sidebar-right — see canonical-markups.md",
+    "example": "<div class=\"sidebar-left\">"
+  },
+  {
+    "class": ".sidebar-right",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": "Required child of .sidebar-right — see canonical-markups.md",
+    "example": "<div class=\"sidebar-right\">"
+  },
+  {
+    "class": ".content-shell",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".content-shell component / container",
+    "example": "<div class=\"content-shell\">"
+  },
+  {
+    "class": ".app-footer",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".app-footer component / container",
+    "example": "<div class=\"app-footer\">"
+  },
+  {
+    "class": ".mobile-toc",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".mobile-toc component / container",
+    "example": "<div class=\"mobile-toc\">"
+  },
+  {
+    "class": ".navtree",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".navtree component / container",
+    "example": "<div class=\"navtree\">"
+  },
+  {
+    "class": ".navtree-title",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".navtree-title component / container",
+    "example": "<div class=\"navtree-title\">"
+  },
+  {
+    "class": ".navtree-link",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".navtree-link component / container",
+    "example": "<div class=\"navtree-link\">"
+  },
+  {
+    "class": ".navtree-link.active",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": "Modifier for .navtree-link",
+    "example": "<div class=\"navtree-link.active\">"
+  },
+  {
+    "class": ".navtree-sub",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".navtree-sub component / container",
+    "example": "<div class=\"navtree-sub\">"
+  },
+  {
+    "class": ".toc",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".toc component / container",
+    "example": "<div class=\"toc\">"
+  },
+  {
+    "class": ".toc-title",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".toc-title component / container",
+    "example": "<div class=\"toc-title\">"
+  },
+  {
+    "class": ".toc-list",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".toc-list component / container",
+    "example": "<div class=\"toc-list\">"
+  },
+  {
+    "class": ".toc-link",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".toc-link component / container",
+    "example": "<div class=\"toc-link\">"
+  },
+  {
+    "class": ".toc-link.active",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": "Modifier for .toc-link",
+    "example": "<div class=\"toc-link.active\">"
+  },
+  {
+    "class": ".toc-footer",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".toc-footer component / container",
+    "example": "<div class=\"toc-footer\">"
+  },
+  {
+    "class": ".tab-list",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".tab-list component / container",
+    "example": "<div class=\"tab-list\">"
+  },
+  {
+    "class": ".tab-trigger",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".tab-trigger component / container",
+    "example": "<div class=\"tab-trigger\">"
+  },
+  {
+    "class": ".tab-trigger.active",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": "Modifier for .tab-trigger",
+    "example": "<div class=\"tab-trigger.active\">"
+  },
+  {
+    "class": ".page-shell",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".page-shell component / container",
+    "example": "<div class=\"page-shell\">"
+  },
+  {
+    "class": ".page-split",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".page-split component / container",
+    "example": "<div class=\"page-split\">"
+  },
+  {
+    "class": ".page-main",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": "Required child of .page-split — see canonical-markups.md",
+    "example": "<div class=\"page-main\">"
+  },
+  {
+    "class": ".page-sidebar",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": "Required child of .page-split — see canonical-markups.md",
+    "example": "<div class=\"page-sidebar\">"
+  },
+  {
+    "class": ".drawer",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".drawer component / container",
+    "example": "<div class=\"drawer\">"
+  },
+  {
+    "class": ".drawer.open",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": "Modifier for .drawer",
+    "example": "<div class=\"drawer.open\">"
+  },
+  {
+    "class": ".dialog",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".dialog component / container",
+    "example": "<div class=\"dialog\">"
+  },
+  {
+    "class": ".dialog.open",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ",",
+    "example": "<div class=\"dialog.open\">"
+  },
+  {
+    "class": ".popover",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".popover component / container",
+    "example": "<div class=\"popover\">"
+  },
+  {
+    "class": ".popover.open",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": "Modifier for .popover",
+    "example": "<div class=\"popover.open\">"
+  },
+  {
+    "class": ".accordion",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".accordion component / container",
+    "example": "<div class=\"accordion\">"
+  },
+  {
+    "class": ".accordion-item",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".accordion-item component / container",
+    "example": "<div class=\"accordion-item\">"
+  },
+  {
+    "class": ".accordion-content",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": "Required child of .accordion-item — see canonical-markups.md",
+    "example": "<div class=\"accordion-content\">"
+  },
+  {
+    "class": ".accordion-panel",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": "Required child of .accordion-item — see canonical-markups.md",
+    "example": "<div class=\"accordion-panel\">"
+  },
+  {
+    "class": ".accordion-item.open",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".accordion-content",
+    "example": "<div class=\"accordion-item.open\">"
+  },
+  {
+    "class": ".accordion-trigger",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".accordion-trigger component / container",
+    "example": "<div class=\"accordion-trigger\">"
+  },
+  {
+    "class": ".hero",
+    "layer": "L4",
+    "property": "",
+    "file": "_05_shells.sass",
+    "description": ".hero component / container",
+    "example": "<div class=\"hero\">"
+  },
+  {
+    "class": ".bg",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".bg component / container",
+    "example": "<div class=\"bg\">"
+  },
+  {
+    "class": ".surface",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".surface component / container",
+    "example": "<div class=\"surface\">"
+  },
+  {
+    "class": ".raised",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".raised component / container",
+    "example": "<div class=\"raised\">"
+  },
+  {
+    "class": ".panel",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".panel component / container",
+    "example": "<div class=\"panel\">"
+  },
+  {
+    "class": ".footer",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".footer component / container",
+    "example": "<div class=\"footer\">"
+  },
+  {
+    "class": ".canvas",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".canvas component / container",
+    "example": "<div class=\"canvas\">"
+  },
+  {
+    "class": ".terminal",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".terminal component / container",
+    "example": "<div class=\"terminal\">"
+  },
+  {
+    "class": ".text-primary",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-primary component / container",
+    "example": "<div class=\"text-primary\">"
+  },
+  {
+    "class": ".text-secondary",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-secondary component / container",
+    "example": "<div class=\"text-secondary\">"
+  },
+  {
+    "class": ".text-muted",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-muted component / container",
+    "example": "<div class=\"text-muted\">"
+  },
+  {
+    "class": ".text-inverse",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-inverse component / container",
+    "example": "<div class=\"text-inverse\">"
+  },
+  {
+    "class": ".text-theme",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-theme component / container",
+    "example": "<div class=\"text-theme\">"
+  },
+  {
+    "class": ".text-success",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-success component / container",
+    "example": "<div class=\"text-success\">"
+  },
+  {
+    "class": ".text-warning",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-warning component / container",
+    "example": "<div class=\"text-warning\">"
+  },
+  {
+    "class": ".text-danger",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-danger component / container",
+    "example": "<div class=\"text-danger\">"
+  },
+  {
+    "class": ".text-info",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-info component / container",
+    "example": "<div class=\"text-info\">"
+  },
+  {
+    "class": ".bg-success",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".bg-success component / container",
+    "example": "<div class=\"bg-success\">"
+  },
+  {
+    "class": ".bg-warning",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".bg-warning component / container",
+    "example": "<div class=\"bg-warning\">"
+  },
+  {
+    "class": ".bg-danger",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".bg-danger component / container",
+    "example": "<div class=\"bg-danger\">"
+  },
+  {
+    "class": ".bg-info",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".bg-info component / container",
+    "example": "<div class=\"bg-info\">"
+  },
+  {
+    "class": ".border",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".border component / container",
+    "example": "<div class=\"border\">"
+  },
+  {
+    "class": ".border-subtle",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".border-subtle component / container",
+    "example": "<div class=\"border-subtle\">"
+  },
+  {
+    "class": ".border-top",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".border-top component / container",
+    "example": "<div class=\"border-top\">"
+  },
+  {
+    "class": ".border-right",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".border-right component / container",
+    "example": "<div class=\"border-right\">"
+  },
+  {
+    "class": ".border-bottom",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".border-bottom component / container",
+    "example": "<div class=\"border-bottom\">"
+  },
+  {
+    "class": ".border-left",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".border-left component / container",
+    "example": "<div class=\"border-left\">"
+  },
+  {
+    "class": ".text-xs",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-xs component / container",
+    "example": "<div class=\"text-xs\">"
+  },
+  {
+    "class": ".text-sm",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-sm component / container",
+    "example": "<div class=\"text-sm\">"
+  },
+  {
+    "class": ".text-md",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-md component / container",
+    "example": "<div class=\"text-md\">"
+  },
+  {
+    "class": ".text-lg",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-lg component / container",
+    "example": "<div class=\"text-lg\">"
+  },
+  {
+    "class": ".text-xl",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-xl component / container",
+    "example": "<div class=\"text-xl\">"
+  },
+  {
+    "class": ".text-2xl",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-2xl component / container",
+    "example": "<div class=\"text-2xl\">"
+  },
+  {
+    "class": ".text-3xl",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-3xl component / container",
+    "example": "<div class=\"text-3xl\">"
+  },
+  {
+    "class": ".text-4xl",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".text-4xl component / container",
+    "example": "<div class=\"text-4xl\">"
+  },
+  {
+    "class": ".weight-400",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".weight-400 component / container",
+    "example": "<div class=\"weight-400\">"
+  },
+  {
+    "class": ".weight-500",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".weight-500 component / container",
+    "example": "<div class=\"weight-500\">"
+  },
+  {
+    "class": ".weight-600",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".weight-600 component / container",
+    "example": "<div class=\"weight-600\">"
+  },
+  {
+    "class": ".weight-700",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".weight-700 component / container",
+    "example": "<div class=\"weight-700\">"
+  },
+  {
+    "class": ".mono",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".mono component / container",
+    "example": "<div class=\"mono\">"
+  },
+  {
+    "class": ".tt-u",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".tt-u component / container",
+    "example": "<div class=\"tt-u\">"
+  },
+  {
+    "class": ".tt-c",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".tt-c component / container",
+    "example": "<div class=\"tt-c\">"
+  },
+  {
+    "class": ".truncate",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".truncate component / container",
+    "example": "<div class=\"truncate\">"
+  },
+  {
+    "class": ".clamp-1",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".clamp-1 component / container",
+    "example": "<div class=\"clamp-1\">"
+  },
+  {
+    "class": ".clamp-2",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".clamp-2 component / container",
+    "example": "<div class=\"clamp-2\">"
+  },
+  {
+    "class": ".clamp-3",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".clamp-3 component / container",
+    "example": "<div class=\"clamp-3\">"
+  },
+  {
+    "class": ".eyebrow",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".eyebrow component / container",
+    "example": "<div class=\"eyebrow\">"
+  },
+  {
+    "class": ".card",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".card component / container",
+    "example": "<div class=\"card\">"
+  },
+  {
+    "class": ".field",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".field component / container",
+    "example": "<div class=\"field\">"
+  },
+  {
+    "class": ".field-label",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".field-label component / container",
+    "example": "<div class=\"field-label\">"
+  },
+  {
+    "class": ".field-error",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".field-error component / container",
+    "example": "<div class=\"field-error\">"
+  },
+  {
+    "class": ".avatar",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".avatar component / container",
+    "example": "<div class=\"avatar\">"
+  },
+  {
+    "class": ".divider",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".divider component / container",
+    "example": "<div class=\"divider\">"
+  },
+  {
+    "class": ".kbd",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".kbd component / container",
+    "example": "<div class=\"kbd\">"
+  },
+  {
+    "class": ".switch-track",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".switch-track component / container",
+    "example": "<div class=\"switch-track\">"
+  },
+  {
+    "class": ".switch-thumb",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".switch-thumb component / container",
+    "example": "<div class=\"switch-thumb\">"
+  },
+  {
+    "class": ".switch-track",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": "[aria-checked='true'],",
+    "example": "<div class=\"switch-track\">"
+  },
+  {
+    "class": ".switch-track",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".checked",
+    "example": "<div class=\"switch-track\">"
+  },
+  {
+    "class": ".switch-thumb",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": "Required child of .switch-track — see canonical-markups.md",
+    "example": "<div class=\"switch-thumb\">"
+  },
+  {
+    "class": ".hide-mobile",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".hide-mobile component / container",
+    "example": "<div class=\"hide-mobile\">"
+  },
+  {
+    "class": ".hide-desktop",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".hide-desktop component / container",
+    "example": "<div class=\"hide-desktop\">"
+  },
+  {
+    "class": ".only-mobile",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".only-mobile component / container",
+    "example": "<div class=\"only-mobile\">"
+  },
+  {
+    "class": ".shadow-sm",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".shadow-sm component / container",
+    "example": "<div class=\"shadow-sm\">"
+  },
+  {
+    "class": ".shadow-md",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".shadow-md component / container",
+    "example": "<div class=\"shadow-md\">"
+  },
+  {
+    "class": ".shadow-lg",
+    "layer": "L5",
+    "property": "",
+    "file": "_06_visuals.sass",
+    "description": ".shadow-lg component / container",
+    "example": "<div class=\"shadow-lg\">"
+  },
+  {
+    "class": ".badge",
+    "layer": "L5",
+    "property": "",
+    "file": "_07_interactions.sass",
+    "description": ".badge component / container",
+    "example": "<div class=\"badge\">"
+  },
+  {
+    "class": ".input",
+    "layer": "L5",
+    "property": "",
+    "file": "_07_interactions.sass",
+    "description": ".input component / container",
+    "example": "<div class=\"input\">"
+  },
+  {
+    "class": ".select",
+    "layer": "L5",
+    "property": "",
+    "file": "_07_interactions.sass",
+    "description": ".select component / container",
+    "example": "<div class=\"select\">"
+  },
+  {
+    "class": ".link",
+    "layer": "L5",
+    "property": "",
+    "file": "_07_interactions.sass",
+    "description": ".link component / container",
+    "example": "<div class=\"link\">"
+  },
+  {
+    "class": ".link-plain",
+    "layer": "L5",
+    "property": "",
+    "file": "_07_interactions.sass",
+    "description": ".link-plain component / container",
+    "example": "<div class=\"link-plain\">"
+  },
+  {
+    "class": ".link-parent",
+    "layer": "L5",
+    "property": "",
+    "file": "_07_interactions.sass",
+    "description": ".link-parent component / container",
+    "example": "<div class=\"link-parent\">"
+  },
+  {
+    "class": ".link-plain",
+    "layer": "L5",
+    "property": "",
+    "file": "_07_interactions.sass",
+    "description": "Required child of .link-parent — see canonical-markups.md",
+    "example": "<div class=\"link-plain\">"
+  },
+  {
+    "class": ".button",
+    "layer": "L5",
+    "property": "",
+    "file": "_07_interactions.sass",
+    "description": ".button component / container",
+    "example": "<div class=\"button\">"
+  },
+  {
+    "class": ".button.primary",
+    "layer": "L5",
+    "property": "",
+    "file": "_07_interactions.sass",
+    "description": "Modifier for .button",
+    "example": "<div class=\"button.primary\">"
+  },
+  {
+    "class": ".button.ghost",
+    "layer": "L5",
+    "property": "",
+    "file": "_07_interactions.sass",
+    "description": "Modifier for .button",
+    "example": "<div class=\"button.ghost\">"
+  },
+  {
+    "class": ".button.active",
+    "layer": "L5",
+    "property": "",
+    "file": "_07_interactions.sass",
+    "description": "Modifier for .button",
+    "example": "<div class=\"button.active\">"
+  },
+  {
+    "class": ".button.is-icon",
+    "layer": "L5",
+    "property": "",
+    "file": "_07_interactions.sass",
+    "description": "Modifier for .button",
+    "example": "<div class=\"button.is-icon\">"
+  }
+]