@teseor/css 1.7.0 → 1.9.0

package/src/04-components/forms/textarea/textarea.api.json

@@ -1,96 +0,0 @@
-{
-  "name": "textarea",
-  "element": "textarea",
-  "modifiers": {
-    "size": {
-      "values": ["sm", "lg"]
-    },
-    "variant": {
-      "values": ["filled", "ghost"]
-    },
-    "state": {
-      "values": ["error", "success"]
-    },
-    "resize": {
-      "values": ["resize-none", "resize-both"]
-    }
-  },
-  "cssVars": [
-    {
-      "name": "--ui-textarea-min-height",
-      "default": "calc(#{t.$row} * 4"
-    },
-    {
-      "name": "--ui-textarea-padding-x",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-textarea-padding-y",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-textarea-font-size",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-textarea-radius",
-      "default": "var(--ui-radius-md)"
-    },
-    {
-      "name": "--ui-textarea-bg",
-      "default": "var(--ui-color-bg)"
-    },
-    {
-      "name": "--ui-textarea-border-color",
-      "default": "var(--ui-color-border-strong)"
-    },
-    {
-      "name": "--ui-textarea-border-color-focus",
-      "default": "var(--ui-color-primary)"
-    },
-    {
-      "name": "--ui-textarea-text",
-      "default": "var(--ui-color-text)"
-    },
-    {
-      "name": "--ui-textarea-placeholder",
-      "default": "var(--ui-color-text-muted)"
-    },
-    {
-      "name": "--ui-textarea-min-height-sm",
-      "default": "calc(#{t.$row} * 3"
-    },
-    {
-      "name": "--ui-textarea-font-size-sm",
-      "default": "var(--ui-font-size-xs)"
-    },
-    {
-      "name": "--ui-textarea-min-height-lg",
-      "default": "calc(#{t.$row} * 6"
-    },
-    {
-      "name": "--ui-textarea-padding-x-lg",
-      "default": "var(--ui-space-2)"
-    },
-    {
-      "name": "--ui-textarea-padding-y-lg",
-      "default": "var(--ui-space-2)"
-    },
-    {
-      "name": "--ui-textarea-font-size-lg",
-      "default": "var(--ui-font-size-md)"
-    },
-    {
-      "name": "--ui-textarea-filled-bg",
-      "default": "var(--ui-color-bg-muted)"
-    },
-    {
-      "name": "--ui-textarea-error-border",
-      "default": "var(--ui-color-danger)"
-    },
-    {
-      "name": "--ui-textarea-success-border",
-      "default": "var(--ui-color-success)"
-    }
-  ]
-}

package/src/04-components/forms/toggle/toggle.api.json

@@ -1,48 +0,0 @@
-{
-  "name": "toggle",
-  "element": "div",
-  "modifiers": {
-    "size": {
-      "values": ["sm", "lg"]
-    }
-  },
-  "elements": {
-    "input": {},
-    "track": {},
-    "thumb": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-toggle-track-width",
-      "default": "calc(#{t.$unit} * 5"
-    },
-    {
-      "name": "--ui-toggle-track-height",
-      "default": "calc(#{t.$unit} * 3"
-    },
-    {
-      "name": "--ui-toggle-track-bg",
-      "default": "var(--ui-color-bg-subtle)"
-    },
-    {
-      "name": "--ui-toggle-track-bg-checked",
-      "default": "var(--ui-color-primary)"
-    },
-    {
-      "name": "--ui-toggle-track-radius",
-      "default": "calc(#{t.$unit} * 1.5"
-    },
-    {
-      "name": "--ui-toggle-thumb-size",
-      "default": "calc(#{t.$unit} * 2.5"
-    },
-    {
-      "name": "--ui-toggle-thumb-bg",
-      "default": "white"
-    },
-    {
-      "name": "--ui-toggle-thumb-offset",
-      "default": "calc(#{t.$unit} / 4"
-    }
-  ]
-}

package/src/04-components/forms/toggle/toggle.docs.json

@@ -1,92 +0,0 @@
-{
-  "id": "toggle",
-  "type": "component",
-  "title": "Toggle",
-  "description": "Switch control for boolean states. Uses checkbox semantics with role=switch for accessibility.",
-  "api": "./toggle.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\"><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label>",
-          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\">\n  <span class=\"ui-toggle__track\"></span>\n  <span class=\"ui-toggle__thumb\"></span>\n</label>"
-        }
-      ]
-    },
-    {
-      "title": "Checked",
-      "examples": [
-        {
-          "html": "<label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label>",
-          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked>\n  ...\n</label>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; gap: var(--ui-space-2); align-items: center;\"><label class=\"ui-toggle ui-toggle--sm\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\"><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label><label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label><label class=\"ui-toggle ui-toggle--lg\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\"><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label></div>",
-          "code": "<label class=\"ui-toggle ui-toggle--sm\">...</label>\n<label class=\"ui-toggle\">...</label>\n<label class=\"ui-toggle ui-toggle--lg\">...</label>"
-        }
-      ]
-    },
-    {
-      "title": "Disabled",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; gap: var(--ui-space-2);\"><label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" disabled><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label><label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked disabled><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label></div>",
-          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" ... disabled>\n  ...\n</label>"
-        }
-      ]
-    },
-    {
-      "title": "With Label",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; align-items: center; gap: var(--ui-space-2);\"><label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" id=\"notifications\"><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label><label for=\"notifications\">Enable notifications</label></div>",
-          "code": "<div style=\"display: flex; align-items: center; gap: var(--ui-space-2);\">\n  <label class=\"ui-toggle\">\n    <input type=\"checkbox\" ... id=\"notifications\">\n    ...\n  </label>\n  <label for=\"notifications\">Enable notifications</label>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-toggle-track-width",
-      "default": "calc(var(--unit) * 5)",
-      "description": "Track width"
-    },
-    {
-      "token": "--ui-toggle-track-height",
-      "default": "calc(var(--unit) * 3)",
-      "description": "Track height"
-    },
-    {
-      "token": "--ui-toggle-track-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Track background (unchecked)"
-    },
-    {
-      "token": "--ui-toggle-track-bg-checked",
-      "default": "var(--ui-color-primary)",
-      "description": "Track background (checked)"
-    },
-    {
-      "token": "--ui-toggle-track-radius",
-      "default": "calc(var(--unit) * 1.5)",
-      "description": "Track border radius"
-    },
-    {
-      "token": "--ui-toggle-thumb-size",
-      "default": "calc(var(--unit) * 2.5)",
-      "description": "Thumb size"
-    },
-    { "token": "--ui-toggle-thumb-bg", "default": "white", "description": "Thumb background" },
-    {
-      "token": "--ui-toggle-thumb-offset",
-      "default": "calc(var(--unit) / 4)",
-      "description": "Thumb offset from edge"
-    }
-  ]
-}

package/src/04-components/layout/divider/divider.docs.json

@@ -1,68 +0,0 @@
-{
-  "id": "divider",
-  "type": "component",
-  "title": "Divider",
-  "description": "Visual separator between content sections. Supports horizontal/vertical orientation and optional text label.",
-  "api": "./divider.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-divider\" role=\"separator\"></div>",
-          "code": "<div class=\"ui-divider\" role=\"separator\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "With Label",
-      "examples": [
-        {
-          "html": "<div class=\"ui-divider\" role=\"separator\">OR</div>",
-          "code": "<div class=\"ui-divider\" role=\"separator\">OR</div>"
-        }
-      ]
-    },
-    {
-      "title": "Label Alignment",
-      "examples": [
-        {
-          "html": "<div class=\"ui-divider ui-divider--start\" role=\"separator\">Start</div><div class=\"ui-divider\" role=\"separator\">Center</div><div class=\"ui-divider ui-divider--end\" role=\"separator\">End</div>",
-          "code": "<div class=\"ui-divider ui-divider--start\">Start</div>\n<div class=\"ui-divider\">Center</div>\n<div class=\"ui-divider ui-divider--end\">End</div>"
-        }
-      ]
-    },
-    {
-      "title": "Dashed",
-      "examples": [
-        {
-          "html": "<div class=\"ui-divider ui-divider--dashed\" role=\"separator\"></div>",
-          "code": "<div class=\"ui-divider ui-divider--dashed\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Vertical",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; height: 64px; align-items: center;\"><span>Left</span><div class=\"ui-divider ui-divider--vertical\" role=\"separator\"></div><span>Right</span></div>",
-          "code": "<div style=\"display: flex;\">\n  <span>Left</span>\n  <div class=\"ui-divider ui-divider--vertical\"></div>\n  <span>Right</span>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-divider-color",
-      "default": "var(--ui-color-border)",
-      "description": "Line color"
-    },
-    { "token": "--ui-divider-line-size", "default": "1px", "description": "Line thickness" },
-    { "token": "--ui-divider-height", "default": "var(--unit)", "description": "Container height" },
-    {
-      "token": "--ui-divider-gap",
-      "default": "calc(var(--unit) * 2)",
-      "description": "Vertical margin"
-    }
-  ]
-}

package/src/04-components/layout/scroll-area/scroll-area.api.json

@@ -1,63 +0,0 @@
-{
-  "name": "scroll-area",
-  "element": "div",
-  "modifiers": {
-    "size": {
-      "values": ["sm", "lg", "xl"]
-    },
-    "direction": {
-      "values": ["horizontal", "both"]
-    },
-    "thin": {
-      "type": "boolean"
-    },
-    "auto-hide": {
-      "type": "boolean"
-    }
-  },
-  "elements": {
-    "viewport": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-scroll-area-max-height",
-      "default": "calc(var(--ui-row) * 10)"
-    },
-    {
-      "name": "--ui-scroll-area-max-height-sm",
-      "default": "calc(var(--ui-row) * 5)"
-    },
-    {
-      "name": "--ui-scroll-area-max-height-lg",
-      "default": "calc(var(--ui-row) * 15)"
-    },
-    {
-      "name": "--ui-scroll-area-max-height-xl",
-      "default": "calc(var(--ui-row) * 20)"
-    },
-    {
-      "name": "--ui-scroll-area-scrollbar-size",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-scroll-area-scrollbar-size-thin",
-      "default": "calc(var(--ui-space-1) * 0.5)"
-    },
-    {
-      "name": "--ui-scroll-area-thumb-color",
-      "default": "var(--ui-color-border-strong)"
-    },
-    {
-      "name": "--ui-scroll-area-thumb-hover-color",
-      "default": "var(--ui-color-neutral-400)"
-    },
-    {
-      "name": "--ui-scroll-area-track-color",
-      "default": "transparent"
-    },
-    {
-      "name": "--ui-scroll-area-thumb-radius",
-      "default": "var(--ui-radius-full)"
-    }
-  ]
-}

package/src/04-components/layout/spacer/index.scss

@@ -1,11 +0,0 @@
-@layer components.tokens {
-  .spacer {
-    --_size: var(--ui-spacer-size, 1);
-  }
-}
-
-@layer components.styles {
-  .spacer {
-    flex: var(--_size);
-  }
-}

package/src/04-components/layout/spacer/spacer.api.json

@@ -1,6 +0,0 @@
-{
-  "name": "spacer",
-  "element": "div",
-  "modifiers": {},
-  "cssVars": [{ "name": "--ui-spacer-size", "default": "1" }]
-}

package/src/04-components/navigation/breadcrumb/breadcrumb.api.json

@@ -1,36 +0,0 @@
-{
-  "name": "breadcrumb",
-  "element": "div",
-  "modifiers": {},
-  "elements": {
-    "item": {},
-    "link": {},
-    "current": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-breadcrumb-height",
-      "default": "var(--ui-row-1)"
-    },
-    {
-      "name": "--ui-breadcrumb-gap",
-      "default": "calc(#{t.$unit} * 1"
-    },
-    {
-      "name": "--ui-breadcrumb-separator-color",
-      "default": "var(--ui-color-text-muted)"
-    },
-    {
-      "name": "--ui-breadcrumb-link-color",
-      "default": "var(--ui-color-text-muted)"
-    },
-    {
-      "name": "--ui-breadcrumb-current-color",
-      "default": "var(--ui-color-text)"
-    },
-    {
-      "name": "--ui-breadcrumb-separator",
-      "default": "\"/\""
-    }
-  ]
-}

package/src/04-components/navigation/breadcrumb/breadcrumb.docs.json

@@ -1,59 +0,0 @@
-{
-  "id": "breadcrumb",
-  "type": "component",
-  "title": "Breadcrumb",
-  "description": "Navigation hierarchy showing current page location in site structure.",
-  "api": "./breadcrumb.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<nav class=\"ui-breadcrumb\" aria-label=\"Breadcrumb\"><ol class=\"ui-breadcrumb\"><li class=\"ui-breadcrumb__item\"><a href=\"#\" class=\"ui-breadcrumb__link\">Home</a></li><li class=\"ui-breadcrumb__item\"><a href=\"#\" class=\"ui-breadcrumb__link\">Products</a></li><li class=\"ui-breadcrumb__item\"><span class=\"ui-breadcrumb__current\" aria-current=\"page\">Shoes</span></li></ol></nav>",
-          "code": "<nav aria-label=\"Breadcrumb\">\n  <ol class=\"ui-breadcrumb\">\n    <li class=\"ui-breadcrumb__item\">\n      <a href=\"#\" class=\"ui-breadcrumb__link\">Home</a>\n    </li>\n    <li class=\"ui-breadcrumb__item\">\n      <a href=\"#\" class=\"ui-breadcrumb__link\">Products</a>\n    </li>\n    <li class=\"ui-breadcrumb__item\">\n      <span aria-current=\"page\">Shoes</span>\n    </li>\n  </ol>\n</nav>"
-        }
-      ]
-    },
-    {
-      "title": "With Icons",
-      "examples": [
-        {
-          "html": "<nav aria-label=\"Breadcrumb\"><ol class=\"ui-breadcrumb\"><li class=\"ui-breadcrumb__item\"><a href=\"#\" class=\"ui-breadcrumb__link\"><svg class=\"ui-icon ui-icon--sm\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"/></svg></a></li><li class=\"ui-breadcrumb__item\"><a href=\"#\" class=\"ui-breadcrumb__link\">Settings</a></li><li class=\"ui-breadcrumb__item\"><span class=\"ui-breadcrumb__current\" aria-current=\"page\">Profile</span></li></ol></nav>",
-          "code": "<ol class=\"ui-breadcrumb\">\n  <li class=\"ui-breadcrumb__item\">\n    <a href=\"#\" class=\"ui-breadcrumb__link\">\n      <svg class=\"ui-icon\">...</svg>\n    </a>\n  </li>\n  ...\n</ol>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-breadcrumb-height",
-      "default": "var(--ui-row-1)",
-      "description": "Container height"
-    },
-    {
-      "token": "--ui-breadcrumb-gap",
-      "default": "var(--unit)",
-      "description": "Gap between items"
-    },
-    {
-      "token": "--ui-breadcrumb-separator",
-      "default": "\"/\"",
-      "description": "Separator character"
-    },
-    {
-      "token": "--ui-breadcrumb-separator-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Separator color"
-    },
-    {
-      "token": "--ui-breadcrumb-link-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Link color"
-    },
-    {
-      "token": "--ui-breadcrumb-current-color",
-      "default": "var(--ui-color-text)",
-      "description": "Current page color"
-    }
-  ]
-}

package/src/04-components/navigation/menu/menu.docs.json

@@ -1,81 +0,0 @@
-{
-  "api": "./menu.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-menu\"><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\">Edit</button></li><li><button class=\"ui-menu__item\">Duplicate</button></li><li><button class=\"ui-menu__item\">Archive</button></li></ul></div>"
-        }
-      ]
-    },
-    {
-      "title": "With Icons and Shortcuts",
-      "examples": [
-        {
-          "html": "<div class=\"ui-menu\"><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\"><span class=\"ui-menu__item-icon\">+</span>New File<span class=\"ui-menu__item-shortcut\">Cmd+N</span></button></li><li><button class=\"ui-menu__item\"><span class=\"ui-menu__item-icon\">O</span>Open<span class=\"ui-menu__item-shortcut\">Cmd+O</span></button></li><li><button class=\"ui-menu__item\"><span class=\"ui-menu__item-icon\">S</span>Save<span class=\"ui-menu__item-shortcut\">Cmd+S</span></button></li></ul></div>"
-        }
-      ]
-    },
-    {
-      "title": "Groups with Labels",
-      "examples": [
-        {
-          "html": "<div class=\"ui-menu\"><div class=\"ui-menu__label\">Edit</div><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\">Cut</button></li><li><button class=\"ui-menu__item\">Copy</button></li><li><button class=\"ui-menu__item\">Paste</button></li></ul><div class=\"ui-menu__separator\"></div><div class=\"ui-menu__label\">View</div><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\">Zoom In</button></li><li><button class=\"ui-menu__item\">Zoom Out</button></li></ul></div>"
-        }
-      ]
-    },
-    {
-      "title": "States",
-      "examples": [
-        {
-          "html": "<div class=\"ui-menu\"><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\">Normal Item</button></li><li><button class=\"ui-menu__item ui-menu__item--disabled\" aria-disabled=\"true\">Disabled Item</button></li><li><button class=\"ui-menu__item ui-menu__item--danger\">Delete</button></li></ul></div>"
-        }
-      ]
-    },
-    {
-      "title": "Checkable Items",
-      "examples": [
-        {
-          "html": "<div class=\"ui-menu\"><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item ui-menu__item--check\"><span class=\"ui-menu__item-indicator\">&#10003;</span>Show Toolbar</button></li><li><button class=\"ui-menu__item ui-menu__item--check\"><span class=\"ui-menu__item-indicator\"></span>Show Sidebar</button></li></ul><div class=\"ui-menu__separator\"></div><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item ui-menu__item--radio\"><span class=\"ui-menu__item-indicator\">&#8226;</span>List View</button></li><li><button class=\"ui-menu__item ui-menu__item--radio\"><span class=\"ui-menu__item-indicator\"></span>Grid View</button></li></ul></div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-menu-min-width",
-      "default": "calc(var(--unit) * 16)",
-      "description": "Minimum width"
-    },
-    {
-      "token": "--ui-menu-max-height",
-      "default": "calc(var(--unit) * 40)",
-      "description": "Maximum height"
-    },
-    { "token": "--ui-menu-padding", "default": "var(--unit)", "description": "Container padding" },
-    {
-      "token": "--ui-menu-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    },
-    { "token": "--ui-menu-bg", "default": "var(--ui-color-bg)", "description": "Background color" },
-    {
-      "token": "--ui-menu-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    { "token": "--ui-menu-shadow", "default": "var(--shadow-lg)", "description": "Box shadow" },
-    { "token": "--ui-menu-item-padding", "default": "8px 16px", "description": "Item padding" },
-    {
-      "token": "--ui-menu-item-radius",
-      "default": "var(--ui-radius-sm)",
-      "description": "Item border radius"
-    },
-    {
-      "token": "--ui-menu-item-bg-hover",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Item hover background"
-    }
-  ]
-}

package/src/04-components/navigation/nav/nav.api.json

@@ -1,55 +0,0 @@
-{
-  "name": "nav",
-  "element": "nav",
-  "modifiers": {
-    "pills": {
-      "type": "boolean"
-    },
-    "vertical": {
-      "type": "boolean"
-    }
-  },
-  "elements": {
-    "list": {},
-    "item": {
-      "modifiers": {
-        "active": {
-          "type": "boolean"
-        },
-        "disabled": {
-          "type": "boolean"
-        }
-      }
-    }
-  },
-  "cssVars": [
-    {
-      "name": "--ui-nav-gap",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-nav-item-height",
-      "default": "var(--ui-row-2)"
-    },
-    {
-      "name": "--ui-nav-item-padding-x",
-      "default": "var(--ui-space-2)"
-    },
-    {
-      "name": "--ui-nav-item-font-size",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-nav-item-color",
-      "default": "var(--ui-color-text-muted)"
-    },
-    {
-      "name": "--ui-nav-item-color-active",
-      "default": "var(--ui-color-primary)"
-    },
-    {
-      "name": "--ui-nav-border-color",
-      "default": "var(--ui-color-border)"
-    }
-  ]
-}