@teseor/css 1.7.0 → 1.9.0

package/src/04-components/actions/button-group/button-group.docs.json

@@ -1,52 +0,0 @@
-{
-  "id": "button-group",
-  "type": "component",
-  "title": "Button Group",
-  "description": "Container for grouped buttons that share borders and have connected appearance.",
-  "api": "./button-group.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-button-group\" role=\"group\"><button class=\"ui-button ui-button--outline\">Left</button><button class=\"ui-button ui-button--outline\">Middle</button><button class=\"ui-button ui-button--outline\">Right</button></div>",
-          "code": "<div class=\"ui-button-group\" role=\"group\">\n  <button class=\"ui-button ui-button--outline\">Left</button>\n  <button class=\"ui-button ui-button--outline\">Middle</button>\n  <button class=\"ui-button ui-button--outline\">Right</button>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Primary Buttons",
-      "examples": [
-        {
-          "html": "<div class=\"ui-button-group\" role=\"group\"><button class=\"ui-button\">Save</button><button class=\"ui-button\">Save & Close</button></div>",
-          "code": "<div class=\"ui-button-group\" role=\"group\">\n  <button class=\"ui-button\">Save</button>\n  <button class=\"ui-button\">Save & Close</button>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Vertical",
-      "examples": [
-        {
-          "html": "<div class=\"ui-button-group ui-button-group--vertical\" role=\"group\"><button class=\"ui-button ui-button--outline\">Top</button><button class=\"ui-button ui-button--outline\">Middle</button><button class=\"ui-button ui-button--outline\">Bottom</button></div>",
-          "code": "<div class=\"ui-button-group ui-button-group--vertical\" role=\"group\">\n  <button class=\"ui-button ui-button--outline\">Top</button>\n  <button class=\"ui-button ui-button--outline\">Middle</button>\n  <button class=\"ui-button ui-button--outline\">Bottom</button>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Icons",
-      "examples": [
-        {
-          "html": "<div class=\"ui-button-group\" role=\"group\" aria-label=\"Text formatting\"><button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Bold\"><svg class=\"ui-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z\"/></svg></button><button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Italic\"><svg class=\"ui-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z\"/></svg></button><button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Underline\"><svg class=\"ui-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z\"/></svg></button></div>",
-          "code": "<div class=\"ui-button-group\" role=\"group\" aria-label=\"Text formatting\">\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Bold\">...</button>\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Italic\">...</button>\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Underline\">...</button>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-button-group-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius for first and last buttons"
-    }
-  ]
-}

package/src/04-components/actions/close-button/close-button.api.json

@@ -1,71 +0,0 @@
-{
-  "name": "close-button",
-  "element": "button",
-  "modifiers": {
-    "size": {
-      "values": ["sm", "lg"]
-    },
-    "subtle": {
-      "type": "boolean"
-    }
-  },
-  "elements": {
-    "icon": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-close-button-size",
-      "description": "Overall button size (width and height)",
-      "default": "var(--ui-row-2)"
-    },
-    {
-      "name": "--ui-close-button-icon-size",
-      "description": "Size of the X icon",
-      "default": "var(--ui-size-md)"
-    },
-    {
-      "name": "--ui-close-button-color",
-      "description": "Icon color",
-      "default": "var(--ui-color-text-muted)"
-    },
-    {
-      "name": "--ui-close-button-bg",
-      "description": "Background color",
-      "default": "transparent"
-    },
-    {
-      "name": "--ui-close-button-hover-bg",
-      "description": "Background color on hover",
-      "default": "var(--ui-color-bg-muted)"
-    },
-    {
-      "name": "--ui-close-button-radius",
-      "description": "Border radius",
-      "default": "var(--ui-radius-md)"
-    },
-    {
-      "name": "--ui-close-button-size-sm",
-      "default": "calc(var(--ui-unit) * 3)"
-    },
-    {
-      "name": "--ui-close-button-icon-size-sm",
-      "default": "var(--ui-size-sm)"
-    },
-    {
-      "name": "--ui-close-button-size-lg",
-      "default": "var(--ui-row-3)"
-    },
-    {
-      "name": "--ui-close-button-icon-size-lg",
-      "default": "var(--ui-size-lg)"
-    },
-    {
-      "name": "--ui-close-button-subtle-color",
-      "default": "var(--ui-color-border-strong)"
-    },
-    {
-      "name": "--ui-close-button-subtle-hover-bg",
-      "default": "var(--ui-color-bg-subtle)"
-    }
-  ]
-}

package/src/04-components/data-display/avatar/avatar.api.json

@@ -1,75 +0,0 @@
-{
-  "name": "avatar",
-  "element": "div",
-  "modifiers": {
-    "size": {
-      "values": ["xs", "sm", "lg", "xl"]
-    },
-    "square": {
-      "type": "boolean"
-    }
-  },
-  "elements": {
-    "fallback": {},
-    "image": {}
-  },
-  "relatedComponents": ["avatar-group"],
-  "cssVars": [
-    {
-      "name": "--ui-avatar-size",
-      "default": "calc(#{t.$unit} * 5"
-    },
-    {
-      "name": "--ui-avatar-bg",
-      "default": "var(--ui-color-bg-subtle)"
-    },
-    {
-      "name": "--ui-avatar-color",
-      "default": "var(--ui-color-text-muted)"
-    },
-    {
-      "name": "--ui-avatar-font-size",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-avatar-radius",
-      "default": "50%"
-    },
-    {
-      "name": "--ui-avatar-size-xs",
-      "default": "calc(#{t.$unit} * 3"
-    },
-    {
-      "name": "--ui-avatar-font-size-xs",
-      "default": "var(--ui-font-size-xs)"
-    },
-    {
-      "name": "--ui-avatar-size-sm",
-      "default": "calc(#{t.$unit} * 4"
-    },
-    {
-      "name": "--ui-avatar-font-size-sm",
-      "default": "var(--ui-font-size-xs)"
-    },
-    {
-      "name": "--ui-avatar-size-lg",
-      "default": "calc(#{t.$unit} * 6"
-    },
-    {
-      "name": "--ui-avatar-font-size-lg",
-      "default": "var(--ui-font-size-md)"
-    },
-    {
-      "name": "--ui-avatar-size-xl",
-      "default": "calc(#{t.$unit} * 8"
-    },
-    {
-      "name": "--ui-avatar-font-size-xl",
-      "default": "var(--ui-font-size-lg)"
-    },
-    {
-      "name": "--ui-avatar-radius-square",
-      "default": "var(--ui-radius-md)"
-    }
-  ]
-}

package/src/04-components/data-display/badge/badge.api.json

@@ -1,86 +0,0 @@
-{
-  "name": "badge",
-  "element": "span",
-  "modifiers": {
-    "size": {
-      "values": ["sm"]
-    },
-    "variant": {
-      "values": ["primary", "success", "warning", "danger"]
-    }
-  },
-  "cssVars": [
-    {
-      "name": "--ui-badge-height",
-      "default": "var(--ui-row)"
-    },
-    {
-      "name": "--ui-badge-padding-x",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-badge-font-size",
-      "default": "var(--ui-font-size-xs)"
-    },
-    {
-      "name": "--ui-badge-font-weight",
-      "default": "var(--ui-weight-medium)"
-    },
-    {
-      "name": "--ui-badge-radius",
-      "default": "var(--ui-radius-full)"
-    },
-    {
-      "name": "--ui-badge-bg",
-      "default": "var(--ui-color-bg-muted)"
-    },
-    {
-      "name": "--ui-badge-text",
-      "default": "var(--ui-color-text)"
-    },
-    {
-      "name": "--ui-badge-height-sm",
-      "default": "var(--ui-row)"
-    },
-    {
-      "name": "--ui-badge-padding-x-sm",
-      "default": "var(--ui-space-0)"
-    },
-    {
-      "name": "--ui-badge-font-size-sm",
-      "default": "var(--ui-font-size-xs)"
-    },
-    {
-      "name": "--ui-badge-primary-bg",
-      "default": "var(--ui-color-primary)"
-    },
-    {
-      "name": "--ui-badge-primary-text",
-      "default": "var(--ui-color-text-inverse)"
-    },
-    {
-      "name": "--ui-badge-success-bg",
-      "default": "var(--ui-color-success)"
-    },
-    {
-      "name": "--ui-badge-success-text",
-      "default": "var(--ui-color-text-inverse)"
-    },
-    {
-      "name": "--ui-badge-warning-bg",
-      "default": "var(--ui-color-warning)"
-    },
-    {
-      "name": "--ui-badge-warning-text",
-      "default": "var(--ui-color-text)"
-    },
-    {
-      "name": "--ui-badge-danger-bg",
-      "default": "var(--ui-color-danger)"
-    },
-    {
-      "name": "--ui-badge-danger-text",
-      "default": "var(--ui-color-text-inverse)"
-    }
-  ]
-}

package/src/04-components/data-display/card/card.api.json

@@ -1,53 +0,0 @@
-{
-  "name": "card",
-  "element": "div",
-  "modifiers": {
-    "variant": {
-      "values": ["subtle", "muted"]
-    },
-    "size": {
-      "values": ["sm", "lg"]
-    },
-    "flush": {
-      "type": "boolean"
-    }
-  },
-  "cssVars": [
-    {
-      "name": "--ui-card-padding",
-      "default": "var(--ui-space-4)"
-    },
-    {
-      "name": "--ui-card-border-width",
-      "default": "var(--ui-border-width-sm)"
-    },
-    {
-      "name": "--ui-card-bg",
-      "default": "var(--ui-color-bg)"
-    },
-    {
-      "name": "--ui-card-border-color",
-      "default": "var(--ui-color-border)"
-    },
-    {
-      "name": "--ui-card-radius",
-      "default": "var(--ui-radius-md)"
-    },
-    {
-      "name": "--ui-card-bg-subtle",
-      "default": "var(--ui-color-bg-subtle)"
-    },
-    {
-      "name": "--ui-card-bg-muted",
-      "default": "var(--ui-color-bg-muted)"
-    },
-    {
-      "name": "--ui-card-padding-sm",
-      "default": "var(--ui-space-2)"
-    },
-    {
-      "name": "--ui-card-padding-lg",
-      "default": "var(--ui-space-6)"
-    }
-  ]
-}

package/src/04-components/data-display/card/index.scss

@@ -1,41 +0,0 @@
-@use '../../../00-config/mixins/border' as *;
-
-// @component card
-// @element div
-
-@layer components.tokens {
-  .card {
-    --_padding: var(--ui-card-padding, var(--ui-space-4));
-    --_border-width: var(--ui-card-border-width, var(--ui-border-width-sm));
-    --_bg: var(--ui-card-bg, var(--ui-color-bg));
-    --_border-color: var(--ui-card-border-color, var(--ui-color-border));
-    --_radius: var(--ui-card-radius, var(--ui-radius-md));
-  }
-
-  // @modifier variant
-  .card--subtle { --_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle)); }
-  .card--muted { --_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted)); }
-
-  // @modifier size
-  .card--sm { --_padding: var(--ui-card-padding-sm, var(--ui-space-2)); }
-  .card--lg { --_padding: var(--ui-card-padding-lg, var(--ui-space-6)); }
-
-  // @modifier boolean flush
-  .card--flush {
-    --_padding: 0;
-    --_border-width: 0;
-  }
-}
-
-// Implementation
-@layer components.styles {
-  .card {
-    @include border(var(--_border-width), var(--_border-color));
-    @include rounded(var(--_radius));
-    @include surface(var(--_bg));
-    // Subtract border from padding to keep total on grid
-    padding: calc(var(--_padding) - var(--_border-width));
-    // Grid-aligned line-height for text content
-    line-height: var(--ui-row-1);
-  }
-}

package/src/04-components/data-display/data-list/data-list.docs.json

@@ -1,79 +0,0 @@
-{
-  "api": "./data-list.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<dl class=\"ui-data-list\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Name</dt><dd class=\"ui-data-list__value\">John Doe</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Email</dt><dd class=\"ui-data-list__value\">john@example.com</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Role</dt><dd class=\"ui-data-list__value\">Administrator</dd></div></dl>"
-        }
-      ]
-    },
-    {
-      "title": "Horizontal Layout",
-      "description": "Side-by-side label and value",
-      "examples": [
-        {
-          "html": "<dl class=\"ui-data-list ui-data-list--horizontal\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Status</dt><dd class=\"ui-data-list__value\">Active</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Created</dt><dd class=\"ui-data-list__value\">Dec 8, 2025</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Updated</dt><dd class=\"ui-data-list__value\">Dec 8, 2025</dd></div></dl>"
-        }
-      ]
-    },
-    {
-      "title": "Divided",
-      "description": "With separator lines between items",
-      "examples": [
-        {
-          "html": "<dl class=\"ui-data-list ui-data-list--divided\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Order ID</dt><dd class=\"ui-data-list__value\">#12345</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Total</dt><dd class=\"ui-data-list__value\">$99.00</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Payment</dt><dd class=\"ui-data-list__value\">Credit Card</dd></div></dl>"
-        }
-      ]
-    },
-    {
-      "title": "Striped",
-      "description": "Alternating background for readability",
-      "examples": [
-        {
-          "html": "<dl class=\"ui-data-list ui-data-list--striped\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">CPU</dt><dd class=\"ui-data-list__value\">Intel i7</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Memory</dt><dd class=\"ui-data-list__value\">16 GB</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Storage</dt><dd class=\"ui-data-list__value\">512 GB SSD</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Display</dt><dd class=\"ui-data-list__value\">14\" Retina</dd></div></dl>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "html": "<dl class=\"ui-data-list ui-data-list--sm\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Small</dt><dd class=\"ui-data-list__value\">Compact display</dd></div></dl>",
-          "layout": "stack"
-        },
-        {
-          "html": "<dl class=\"ui-data-list\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Default</dt><dd class=\"ui-data-list__value\">Standard display</dd></div></dl>",
-          "layout": "stack"
-        },
-        {
-          "html": "<dl class=\"ui-data-list ui-data-list--lg\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Large</dt><dd class=\"ui-data-list__value\">Spacious display</dd></div></dl>",
-          "layout": "stack"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-data-list-gap",
-      "default": "calc(var(--unit) * 2)",
-      "description": "Gap between items"
-    },
-    {
-      "token": "--ui-data-list-item-gap",
-      "default": "var(--unit)",
-      "description": "Gap between label and value"
-    },
-    {
-      "token": "--ui-data-list-label-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Label color"
-    },
-    {
-      "token": "--ui-data-list-value-color",
-      "default": "var(--ui-color-text)",
-      "description": "Value color"
-    }
-  ]
-}

package/src/04-components/data-display/image/image.api.json

@@ -1,76 +0,0 @@
-{
-  "name": "image",
-  "element": "figure",
-  "modifiers": {
-    "size": {
-      "values": ["sm", "md", "lg", "xl", "full"]
-    },
-    "rounded": {
-      "type": "boolean"
-    },
-    "circle": {
-      "type": "boolean"
-    },
-    "object-fit": {
-      "values": ["cover", "contain"]
-    }
-  },
-  "elements": {
-    "img": {},
-    "caption": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-image-size",
-      "default": "auto"
-    },
-    {
-      "name": "--ui-image-size-sm",
-      "default": "calc(var(--unit) * 12)"
-    },
-    {
-      "name": "--ui-image-size-md",
-      "default": "calc(var(--unit) * 24)"
-    },
-    {
-      "name": "--ui-image-size-lg",
-      "default": "calc(var(--unit) * 40)"
-    },
-    {
-      "name": "--ui-image-size-xl",
-      "default": "calc(var(--unit) * 60)"
-    },
-    {
-      "name": "--ui-image-bg",
-      "default": "var(--ui-color-bg-muted)"
-    },
-    {
-      "name": "--ui-image-radius",
-      "default": "0"
-    },
-    {
-      "name": "--ui-image-radius-rounded",
-      "default": "var(--ui-radius-lg)"
-    },
-    {
-      "name": "--ui-image-radius-circle",
-      "default": "50%"
-    },
-    {
-      "name": "--ui-image-object-fit",
-      "default": "cover"
-    },
-    {
-      "name": "--ui-image-caption-color",
-      "default": "var(--ui-color-text-muted)"
-    },
-    {
-      "name": "--ui-image-caption-font-size",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-image-caption-spacing",
-      "default": "var(--ui-space-1)"
-    }
-  ]
-}

package/src/04-components/data-display/stat/stat.api.json

@@ -1,18 +0,0 @@
-{
-  "name": "stat",
-  "element": "div",
-  "modifiers": {
-    "size": {
-      "values": ["sm"]
-    }
-  },
-  "subElements": ["value", "label"],
-  "cssVars": [
-    { "name": "--ui-stat-gap", "default": "var(--ui-space-1)" },
-    { "name": "--ui-stat-value-font-size", "default": "var(--ui-font-size-3xl)" },
-    { "name": "--ui-stat-value-font-weight", "default": "var(--ui-weight-bold)" },
-    { "name": "--ui-stat-value-color", "default": "var(--ui-color-text)" },
-    { "name": "--ui-stat-label-font-size", "default": "var(--ui-font-size-sm)" },
-    { "name": "--ui-stat-label-color", "default": "var(--ui-color-text-muted)" }
-  ]
-}

package/src/04-components/data-display/status/status.docs.json

@@ -1,60 +0,0 @@
-{
-  "id": "status",
-  "type": "component",
-  "title": "Status",
-  "description": "Visual status indicator with colored dot to show state.",
-  "api": "./status.api.json",
-  "sections": [
-    {
-      "title": "Variants",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; flex-direction: column; gap: var(--ui-space-2);\"><span class=\"ui-status\"><span class=\"ui-status__dot\"></span>Default</span><span class=\"ui-status ui-status--success\"><span class=\"ui-status__dot\"></span>Online</span><span class=\"ui-status ui-status--warning\"><span class=\"ui-status__dot\"></span>Away</span><span class=\"ui-status ui-status--danger\"><span class=\"ui-status__dot\"></span>Busy</span><span class=\"ui-status ui-status--info\"><span class=\"ui-status__dot\"></span>In a meeting</span></div>",
-          "code": "<span class=\"ui-status ui-status--success\">\n  <span class=\"ui-status__dot\"></span>\n  Online\n</span>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; gap: var(--ui-space-4); align-items: center;\"><span class=\"ui-status ui-status--success ui-status--sm\"><span class=\"ui-status__dot\"></span>Small</span><span class=\"ui-status ui-status--success\"><span class=\"ui-status__dot\"></span>Default</span><span class=\"ui-status ui-status--success ui-status--lg\"><span class=\"ui-status__dot\"></span>Large</span></div>",
-          "code": "<span class=\"ui-status ui-status--sm\">...</span>\n<span class=\"ui-status\">...</span>\n<span class=\"ui-status ui-status--lg\">...</span>"
-        }
-      ]
-    },
-    {
-      "title": "Pulse Animation",
-      "description": "For live or active indicators",
-      "api": "./status.api.json",
-      "examples": [
-        {
-          "html": "<span class=\"ui-status ui-status--success ui-status--pulse\"><span class=\"ui-status__dot\"></span>Live</span>",
-          "code": "<span class=\"ui-status ui-status--success ui-status--pulse\">\n  <span class=\"ui-status__dot\"></span>\n  Live\n</span>"
-        }
-      ]
-    },
-    {
-      "title": "Dot Only",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; gap: var(--ui-space-2);\"><span class=\"ui-status ui-status--success\"><span class=\"ui-status__dot\"></span></span><span class=\"ui-status ui-status--warning\"><span class=\"ui-status__dot\"></span></span><span class=\"ui-status ui-status--danger\"><span class=\"ui-status__dot\"></span></span></div>",
-          "code": "<span class=\"ui-status ui-status--success\">\n  <span class=\"ui-status__dot\"></span>\n</span>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    { "token": "--ui-status-size", "default": "var(--unit)", "description": "Dot size" },
-    {
-      "token": "--ui-status-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Default dot color"
-    },
-    {
-      "token": "--ui-status-gap",
-      "default": "var(--unit)",
-      "description": "Gap between dot and text"
-    }
-  ]
-}

package/src/04-components/data-display/table/table.api.json

@@ -1,34 +0,0 @@
-{
-  "name": "table",
-  "element": "div",
-  "modifiers": {
-    "compact": {
-      "type": "boolean"
-    },
-    "striped": {
-      "type": "boolean"
-    }
-  },
-  "cssVars": [
-    {
-      "name": "--ui-table-font-size",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-table-border-color",
-      "default": "var(--ui-color-border)"
-    },
-    {
-      "name": "--ui-table-header-bg",
-      "default": "var(--ui-color-bg-subtle)"
-    },
-    {
-      "name": "--ui-table-cell-padding-x",
-      "default": "var(--ui-space-2)"
-    },
-    {
-      "name": "--ui-table-cell-padding-y",
-      "default": "var(--ui-space-1)"
-    }
-  ]
-}