@feugene/granularity 0.1.0

package/dist/package.json

@@ -0,0 +1,293 @@
+{
+  "name": "@feugene/granularity",
+  "version": "0.1.0",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./types/src/index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./i18n": {
+      "types": "./types/src/i18n/index.d.ts",
+      "import": "./i18n.js"
+    },
+    "./fileValidation": {
+      "types": "./types/src/fileValidation/index.d.ts",
+      "import": "./fileValidation.js"
+    },
+    "./directives": {
+      "types": "./types/src/directives/index.d.ts",
+      "import": "./directives.js"
+    },
+    "./directives/*": {
+      "types": "./types/src/directives/*.d.ts",
+      "import": "./directives/*.js"
+    },
+    "./composables/*": {
+      "types": "./types/src/composables/*.d.ts",
+      "import": "./composables/*.js"
+    },
+    "./components/DsAlert": {
+      "types": "./types/src/components/DsAlert/index.d.ts",
+      "import": "./components/DsAlert/index.js"
+    },
+    "./components/DsAvatar": {
+      "types": "./types/src/components/DsAvatar/index.d.ts",
+      "import": "./components/DsAvatar/index.js"
+    },
+    "./components/DsBadge": {
+      "types": "./types/src/components/DsBadge/index.d.ts",
+      "import": "./components/DsBadge/index.js"
+    },
+    "./components/DsBadgeWrap": {
+      "types": "./types/src/components/DsBadgeWrap/index.d.ts",
+      "import": "./components/DsBadgeWrap/index.js"
+    },
+    "./components/DsBottomNav": {
+      "types": "./types/src/components/DsBottomNav/index.d.ts",
+      "import": "./components/DsBottomNav/index.js"
+    },
+    "./components/DsButton": {
+      "types": "./types/src/components/DsButton/index.d.ts",
+      "import": "./components/DsButton/index.js"
+    },
+    "./components/DsButtonGroup": {
+      "types": "./types/src/components/DsButtonGroup/index.d.ts",
+      "import": "./components/DsButtonGroup/index.js"
+    },
+    "./components/DsCard": {
+      "types": "./types/src/components/DsCard/index.d.ts",
+      "import": "./components/DsCard/index.js"
+    },
+    "./components/DsCollapse": {
+      "types": "./types/src/components/DsCollapse/index.d.ts",
+      "import": "./components/DsCollapse/index.js"
+    },
+    "./components/DsConfirmDialog": {
+      "types": "./types/src/components/DsConfirmDialog/index.d.ts",
+      "import": "./components/DsConfirmDialog/index.js"
+    },
+    "./components/DsDataTable": {
+      "types": "./types/src/components/DsDataTable/index.d.ts",
+      "import": "./components/DsDataTable/index.js"
+    },
+    "./components/DsDrawer": {
+      "types": "./types/src/components/DsDrawer/index.d.ts",
+      "import": "./components/DsDrawer/index.js"
+    },
+    "./components/DsDropdown": {
+      "types": "./types/src/components/DsDropdown/index.d.ts",
+      "import": "./components/DsDropdown/index.js"
+    },
+    "./components/DsDropdownMenu": {
+      "types": "./types/src/components/DsDropdownMenu/index.d.ts",
+      "import": "./components/DsDropdownMenu/index.js"
+    },
+    "./components/DsCheckbox": {
+      "types": "./types/src/components/DsCheckbox/index.d.ts",
+      "import": "./components/DsCheckbox/index.js"
+    },
+    "./components/DsDialog": {
+      "types": "./types/src/components/DsDialog/index.d.ts",
+      "import": "./components/DsDialog/index.js"
+    },
+    "./components/DsEmptyState": {
+      "types": "./types/src/components/DsEmptyState/index.d.ts",
+      "import": "./components/DsEmptyState/index.js"
+    },
+    "./components/DsFileUpload": {
+      "types": "./types/src/components/DsFileUpload/index.d.ts",
+      "import": "./components/DsFileUpload/index.js"
+    },
+    "./components/DsFormFile": {
+      "types": "./types/src/components/DsFormFile/index.d.ts",
+      "import": "./components/DsFormFile/index.js"
+    },
+    "./components/DsFormField": {
+      "types": "./types/src/components/DsFormField/index.d.ts",
+      "import": "./components/DsFormField/index.js"
+    },
+    "./components/DsFormSection": {
+      "types": "./types/src/components/DsFormSection/index.d.ts",
+      "import": "./components/DsFormSection/index.js"
+    },
+    "./components/DsList": {
+      "types": "./types/src/components/DsList/index.d.ts",
+      "import": "./components/DsList/index.js"
+    },
+    "./components/DsIcon": {
+      "types": "./types/src/components/DsIcon/index.d.ts",
+      "import": "./components/DsIcon/index.js"
+    },
+    "./components/DsImageViewer": {
+      "types": "./types/src/components/DsImageViewer/index.d.ts",
+      "import": "./components/DsImageViewer/index.js"
+    },
+    "./components/DsInput": {
+      "types": "./types/src/components/DsInput/index.d.ts",
+      "import": "./components/DsInput/index.js"
+    },
+    "./components/DsInputTag": {
+      "types": "./types/src/components/DsInputTag/index.d.ts",
+      "import": "./components/DsInputTag/index.js"
+    },
+    "./components/DsLink": {
+      "types": "./types/src/components/DsLink/index.d.ts",
+      "import": "./components/DsLink/index.js"
+    },
+    "./components/DsLoading": {
+      "types": "./types/src/components/DsLoading/index.d.ts",
+      "import": "./components/DsLoading/index.js"
+    },
+    "./components/DsModal": {
+      "types": "./types/src/components/DsModal/index.d.ts",
+      "import": "./components/DsModal/index.js"
+    },
+    "./components/DsNavbar": {
+      "types": "./types/src/components/DsNavbar/index.d.ts",
+      "import": "./components/DsNavbar/index.js"
+    },
+    "./components/DsPagination": {
+      "types": "./types/src/components/DsPagination/index.d.ts",
+      "import": "./components/DsPagination/index.js"
+    },
+    "./components/DsProgressBar": {
+      "types": "./types/src/components/DsProgressBar/index.d.ts",
+      "import": "./components/DsProgressBar/index.js"
+    },
+    "./components/DsPromptDialog": {
+      "types": "./types/src/components/DsPromptDialog/index.d.ts",
+      "import": "./components/DsPromptDialog/index.js"
+    },
+    "./components/DsRadio": {
+      "types": "./types/src/components/DsRadio/index.d.ts",
+      "import": "./components/DsRadio/index.js"
+    },
+    "./components/DsRadioGroup": {
+      "types": "./types/src/components/DsRadioGroup/index.d.ts",
+      "import": "./components/DsRadioGroup/index.js"
+    },
+    "./components/DsSelect": {
+      "types": "./types/src/components/DsSelect/index.d.ts",
+      "import": "./components/DsSelect/index.js"
+    },
+    "./components/DsSegmented": {
+      "types": "./types/src/components/DsSegmented/index.d.ts",
+      "import": "./components/DsSegmented/index.js"
+    },
+    "./components/DsSidebar": {
+      "types": "./types/src/components/DsSidebar/index.d.ts",
+      "import": "./components/DsSidebar/index.js"
+    },
+    "./components/DsSkeleton": {
+      "types": "./types/src/components/DsSkeleton/index.d.ts",
+      "import": "./components/DsSkeleton/index.js"
+    },
+    "./components/DsSwitch": {
+      "types": "./types/src/components/DsSwitch/index.d.ts",
+      "import": "./components/DsSwitch/index.js"
+    },
+    "./components/DsTable": {
+      "types": "./types/src/components/DsTable/index.d.ts",
+      "import": "./components/DsTable/index.js"
+    },
+    "./components/DsTabs": {
+      "types": "./types/src/components/DsTabs/index.d.ts",
+      "import": "./components/DsTabs/index.js"
+    },
+    "./components/DsToaster": {
+      "types": "./types/src/components/DsToaster/index.d.ts",
+      "import": "./components/DsToaster/index.js"
+    },
+    "./components/DsTextarea": {
+      "types": "./types/src/components/DsTextarea/index.d.ts",
+      "import": "./components/DsTextarea/index.js"
+    },
+    "./components/DsTree": {
+      "types": "./types/src/components/DsTree/index.d.ts",
+      "import": "./components/DsTree/index.js"
+    },
+    "./components/DsTreeSelect": {
+      "types": "./types/src/components/DsTreeSelect/index.d.ts",
+      "import": "./components/DsTreeSelect/index.js"
+    },
+    "./components/DsTooltip": {
+      "types": "./types/src/components/DsTooltip/index.d.ts",
+      "import": "./components/DsTooltip/index.js"
+    },
+    "./uno": {
+      "types": "./types/src/unocss/preset.d.ts",
+      "import": "./uno.js",
+      "default": "./uno.js"
+    },
+    "./uno-node": {
+      "types": "./types/src/unocss/preset.node.d.ts",
+      "import": "./uno-node.js",
+      "default": "./uno-node.js"
+    },
+    "./styles.css": "./styles.css",
+    "./foundation.css": "./foundation.css",
+    "./styles/base.css": "./styles/base.css",
+    "./styles/tokens.css": "./styles/tokens.css",
+    "./styles/themes/light.css": "./styles/themes/light.css",
+    "./styles/themes/dark.css": "./styles/themes/dark.css",
+    "./components/DsAlert/styles.css": "./components/DsAlert/styles.css",
+    "./components/DsAvatar/styles.css": "./components/DsAvatar/styles.css",
+    "./components/DsBadge/styles.css": "./components/DsBadge/styles.css",
+    "./components/DsBadgeWrap/styles.css": "./components/DsBadgeWrap/styles.css",
+    "./components/DsBottomNav/styles.css": "./components/DsBottomNav/styles.css",
+    "./components/DsButton/styles.css": "./components/DsButton/styles.css",
+    "./components/DsButtonGroup/styles.css": "./components/DsButtonGroup/styles.css",
+    "./components/DsCard/styles.css": "./components/DsCard/styles.css",
+    "./components/DsCollapse/styles.css": "./components/DsCollapse/styles.css",
+    "./components/DsConfirmDialog/styles.css": "./components/DsConfirmDialog/styles.css",
+    "./components/DsDataTable/styles.css": "./components/DsDataTable/styles.css",
+    "./components/DsDrawer/styles.css": "./components/DsDrawer/styles.css",
+    "./components/DsDropdown/styles.css": "./components/DsDropdown/styles.css",
+    "./components/DsDropdownMenu/styles.css": "./components/DsDropdownMenu/styles.css",
+    "./components/DsCheckbox/styles.css": "./components/DsCheckbox/styles.css",
+    "./components/DsDialog/styles.css": "./components/DsDialog/styles.css",
+    "./components/DsEmptyState/styles.css": "./components/DsEmptyState/styles.css",
+    "./components/DsFileUpload/styles.css": "./components/DsFileUpload/styles.css",
+    "./components/DsFormFile/styles.css": "./components/DsFormFile/styles.css",
+    "./components/DsFormField/styles.css": "./components/DsFormField/styles.css",
+    "./components/DsFormSection/styles.css": "./components/DsFormSection/styles.css",
+    "./components/DsList/styles.css": "./components/DsList/styles.css",
+    "./components/DsIcon/styles.css": "./components/DsIcon/styles.css",
+    "./components/DsImageViewer/styles.css": "./components/DsImageViewer/styles.css",
+    "./components/DsInput/styles.css": "./components/DsInput/styles.css",
+    "./components/DsInputTag/styles.css": "./components/DsInputTag/styles.css",
+    "./components/DsLink/styles.css": "./components/DsLink/styles.css",
+    "./components/DsLoading/styles.css": "./components/DsLoading/styles.css",
+    "./components/DsModal/styles.css": "./components/DsModal/styles.css",
+    "./components/DsNavbar/styles.css": "./components/DsNavbar/styles.css",
+    "./components/DsPagination/styles.css": "./components/DsPagination/styles.css",
+    "./components/DsProgressBar/styles.css": "./components/DsProgressBar/styles.css",
+    "./components/DsPromptDialog/styles.css": "./components/DsPromptDialog/styles.css",
+    "./components/DsRadio/styles.css": "./components/DsRadio/styles.css",
+    "./components/DsRadioGroup/styles.css": "./components/DsRadioGroup/styles.css",
+    "./components/DsSelect/styles.css": "./components/DsSelect/styles.css",
+    "./components/DsSegmented/styles.css": "./components/DsSegmented/styles.css",
+    "./components/DsSidebar/styles.css": "./components/DsSidebar/styles.css",
+    "./components/DsSkeleton/styles.css": "./components/DsSkeleton/styles.css",
+    "./components/DsSwitch/styles.css": "./components/DsSwitch/styles.css",
+    "./components/DsTable/styles.css": "./components/DsTable/styles.css",
+    "./components/DsTabs/styles.css": "./components/DsTabs/styles.css",
+    "./components/DsToaster/styles.css": "./components/DsToaster/styles.css",
+    "./components/DsTextarea/styles.css": "./components/DsTextarea/styles.css",
+    "./components/DsTree/styles.css": "./components/DsTree/styles.css",
+    "./components/DsTreeSelect/styles.css": "./components/DsTreeSelect/styles.css",
+    "./components/DsTooltip/styles.css": "./components/DsTooltip/styles.css"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.32",
+    "unocss": "^66.0.0"
+  },
+  "dependencies": {
+    "@headlessui/vue": "^1.7.23"
+  }
+}

package/dist/styles/base.css

@@ -0,0 +1,33 @@
+html,
+body {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    font-family: var(--ds-font-ui);
+    background: var(--bg);
+    color: var(--fg);
+}
+
+/*
+ * UnoCSS tailwind-compat reset intentionally does not force `background-color: transparent` for buttons
+ * (to avoid breaking component libraries). In our DS we want plain buttons/links to be transparent by default.
+ */
+:where(a, button) {
+    background-color: transparent;
+}
+
+:where(input[type='button'], input[type='submit'], input[type='reset']) {
+    background-color: transparent;
+}
+
+code,
+pre,
+kbd {
+    font-family: var(--ds-font-mono);
+}
+
+* {
+    box-sizing: border-box;
+}

package/dist/styles/themes/dark.css

@@ -0,0 +1,102 @@
+.theme-dark,
+.dark,
+[data-theme='dark'] {
+  /* Surface roles */
+  --bg: #0f172a;
+  --fg: #f8fafc;
+  --card: #1e293b;
+  --card-fg: #f8fafc;
+  --popover: #1e293b;
+  --popover-fg: #f8fafc;
+  --muted: #334155;
+  --muted-fg: #94a3b8;
+  --secondary: #334155;
+  --secondary-fg: #f1f5f9;
+  --brd: #334155;
+  --input: #334155;
+  --ring: #818cf8;
+
+  /* Action roles */
+  --primary: #6366f1;
+  --primary-fg: #ffffff;
+  --accent: #1e1b4b;
+  --accent-fg: #c7d2fe;
+  --destructive: #ef4444;
+  --destructive-fg: #ffffff;
+
+  /* Status roles */
+  --ds-success: #34d399;
+  --ds-success-light: #064e3b;
+  --ds-success-fg: #0f172a;
+  --ds-success-text: #6ee7b7;
+  --ds-warning: #fb923c;
+  --ds-warning-light: #7c2d12;
+  --ds-warning-fg: #0f172a;
+  --ds-warning-text: #fdba74;
+  --ds-danger: #f87171;
+  --ds-danger-light: #7f1d1d;
+  --ds-danger-fg: #0f172a;
+  --ds-danger-text: #fca5a5;
+  --ds-info: #818cf8;
+  --ds-info-light: #312e81;
+  --ds-info-fg: #0f172a;
+  --ds-info-text: #c7d2fe;
+  --ds-slate: #94a3b8;
+  --ds-slate-light: #334155;
+  --ds-slate-fg: #0f172a;
+  --ds-slate-text: #cbd5e1;
+  --ds-azure: #38bdf8;
+  --ds-azure-light: #0c4a6e;
+  --ds-azure-fg: #0f172a;
+  --ds-azure-text: #bae6fd;
+
+  /* Data visualization roles */
+  --chart-1: #6366f1;
+  --chart-2: #34d399;
+  --chart-3: #fb923c;
+  --chart-4: #818cf8;
+  --chart-5: #a78bfa;
+
+  /* Navigation roles */
+  --sidebar: #1e293b;
+  --sidebar-fg: #f8fafc;
+  --sidebar-primary: #6366f1;
+  --sidebar-primary-fg: #ffffff;
+  --sidebar-accent: #334155;
+  --sidebar-accent-fg: #f1f5f9;
+  --sidebar-brd: #334155;
+  --sidebar-ring: #818cf8;
+}
+
+@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
+  .theme-dark,
+  .dark,
+  [data-theme='dark'] {
+    /* Action role fallbacks */
+    --primary-hover: #6f72f2;
+    --primary-active: #7b7ef3;
+    --secondary-hover: #435062;
+    --secondary-active: #535f70;
+    --brd-hover: #6e7987;
+    --brd-active: #8c94a0;
+    --destructive-hover: #f05353;
+    --destructive-active: #f06161;
+
+    /* Status role fallbacks */
+    --ds-success-hover: #44d6a1;
+    --ds-success-active: #53d9a9;
+    --ds-warning-hover: #fb9a4b;
+    --ds-warning-active: #fba35b;
+    --ds-danger-hover: #f87c7c;
+    --ds-danger-active: #f88787;
+    --ds-info-hover: #8b95f8;
+    --ds-info-active: #949ef9;
+    --ds-slate-hover: #9faec0;
+    --ds-slate-active: #aab7c8;
+    --ds-azure-hover: #4bc3f9;
+    --ds-azure-active: #5dcbf9;
+
+    /* Component semantic fallbacks */
+    --ds-category-tree-branch-line-active-color: #505b8c;
+  }
+}

package/dist/styles/themes/light.css

@@ -0,0 +1,98 @@
+:root {
+  /* Surface roles */
+  --bg: #f8fafc;
+  --fg: #0f172a;
+  --card: #ffffff;
+  --card-fg: #0f172a;
+  --popover: #ffffff;
+  --popover-fg: #0f172a;
+  --muted: #f1f5f9;
+  --muted-fg: #64748b;
+  --secondary: #e2e8f0;
+  --secondary-fg: #1e293b;
+  --brd: #e2e8f0;
+  --input: #e2e8f0;
+  --ring: #6366f1;
+
+  /* Action roles */
+  --primary: #4f46e5;
+  --primary-fg: #ffffff;
+  --accent: #eef2ff;
+  --accent-fg: #3730a3;
+  --destructive: #dc2626;
+  --destructive-fg: #ffffff;
+
+  /* Status roles */
+  --ds-success: #10b981;
+  --ds-success-light: #d1fae5;
+  --ds-success-fg: #ffffff;
+  --ds-success-text: #065f46;
+  --ds-warning: #f97316;
+  --ds-warning-light: #ffedd5;
+  --ds-warning-fg: #ffffff;
+  --ds-warning-text: #7c2d12;
+  --ds-danger: #dc2626;
+  --ds-danger-light: #fee2e2;
+  --ds-danger-fg: #ffffff;
+  --ds-danger-text: #991b1b;
+  --ds-info: #5850ec;
+  --ds-info-light: #e0e7ff;
+  --ds-info-fg: #ffffff;
+  --ds-info-text: #3730a3;
+  --ds-slate: #475569;
+  --ds-slate-light: #e2e8f0;
+  --ds-slate-fg: #ffffff;
+  --ds-slate-text: #334155;
+  --ds-azure: #0ea5e9;
+  --ds-azure-light: #e0f2fe;
+  --ds-azure-fg: #ffffff;
+  --ds-azure-text: #075985;
+
+  /* Data visualization roles */
+  --chart-1: #4f46e5;
+  --chart-2: #10b981;
+  --chart-3: #f97316;
+  --chart-4: #6366f1;
+  --chart-5: #8b5cf6;
+
+  /* Navigation roles */
+  --sidebar: #ffffff;
+  --sidebar-fg: #0f172a;
+  --sidebar-primary: #4f46e5;
+  --sidebar-primary-fg: #ffffff;
+  --sidebar-accent: #f1f5f9;
+  --sidebar-accent-fg: #1e293b;
+  --sidebar-brd: #e2e8f0;
+  --sidebar-ring: #6366f1;
+}
+
+@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
+  :root {
+    /* Action role fallbacks */
+    --primary-hover: #4a42d6;
+    --primary-active: #453ec7;
+    --secondary-hover: #d1d7e0;
+    --secondary-active: #c0c7d0;
+    --brd-hover: #a3a9b5;
+    --brd-active: #838a97;
+    --destructive-hover: #cc2526;
+    --destructive-active: #bb2427;
+
+    /* Status role fallbacks */
+    --ds-success-hover: #10ac7a;
+    --ds-success-active: #109f73;
+    --ds-warning-hover: #e66c18;
+    --ds-warning-active: #d46419;
+    --ds-danger-hover: #cc2526;
+    --ds-danger-active: #bb2427;
+    --ds-info-hover: #5c60e1;
+    --ds-info-active: #5659d1;
+    --ds-slate-hover: #435062;
+    --ds-slate-active: #3d4a5b;
+    --ds-azure-hover: #0284c7;
+    --ds-azure-active: #0369a1;
+
+    /* Component semantic fallbacks */
+    --ds-category-tree-branch-line-active-color: #c4cdf7;
+  }
+}

package/dist/styles/tokens.css

@@ -0,0 +1,118 @@
+:root {
+  /* Foundations: neutral palette */
+  --ds-slate-0: #ffffff;
+  --ds-slate-50: #f8fafc;
+  --ds-slate-100: #f1f5f9;
+  --ds-slate-200: #e2e8f0;
+  --ds-slate-300: #cbd5e1;
+  --ds-slate-400: #94a3b8;
+  --ds-slate-500: #64748b;
+  --ds-slate-600: #475569;
+  --ds-slate-700: #334155;
+  --ds-slate-800: #1e293b;
+  --ds-slate-900: #0f172a;
+
+  /* Typography: font families */
+  --ds-font-ui: Inter, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
+  --ds-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+
+  /* Typography: font sizes */
+  --ds-text-xs: 12px;
+  --ds-text-sm: 14px;
+  --ds-text-base: 16px;
+  --ds-text-lg: 18px;
+  --ds-text-xl: 20px;
+  --ds-text-2xl: 24px;
+  --ds-text-3xl: 30px;
+  --ds-text-4xl: 36px;
+
+  /* Typography: line heights */
+  --ds-leading-tight: 1.25;
+  --ds-leading-normal: 1.5;
+  --ds-leading-relaxed: 1.625;
+
+  /* Typography: font weights */
+  --ds-font-regular: 400;
+  --ds-font-medium: 500;
+  --ds-font-semibold: 600;
+  --ds-font-bold: 700;
+
+  /* Layout: spacing scale */
+  --ds-space-0: 0px;
+  --ds-space-1: 4px;
+  --ds-space-2: 8px;
+  --ds-space-3: 12px;
+  --ds-space-4: 16px;
+  --ds-space-5: 20px;
+  --ds-space-6: 24px;
+  --ds-space-8: 32px;
+  --ds-space-10: 40px;
+  --ds-space-12: 48px;
+  --ds-space-16: 64px;
+  --ds-space-20: 80px;
+  --ds-space-24: 96px;
+  --ds-space-32: 128px;
+  --ds-space-40: 160px;
+  --ds-space-48: 192px;
+  --ds-space-64: 256px;
+
+  /* Layout: containers */
+  --ds-container-max: 1280px;
+  --ds-container-max-2xl: 1440px;
+  --ds-container-padding-mobile: 16px;
+  --ds-container-padding-tablet: 24px;
+  --ds-container-padding-desktop: 32px;
+
+  /* Layout: breakpoints */
+  --ds-bp-sm: 640px;
+  --ds-bp-md: 768px;
+  --ds-bp-lg: 1024px;
+  --ds-bp-xl: 1280px;
+  --ds-bp-2xl: 1536px;
+
+  /* Shapes: radii and compatibility aliases */
+  --radius: 0.5rem;
+  --ds-radius-none: 0px;
+  --ds-radius-sm: 4px;
+  --ds-radius-md: 8px;
+  --ds-radius-lg: 12px;
+  --ds-radius-xl: 16px;
+  --ds-radius-full: 9999px;
+
+  /* Elevation */
+  --ds-shadow-0: none;
+  --ds-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08);
+  --ds-shadow-2: 0 8px 24px rgba(15, 23, 42, 0.14);
+  --ds-shadow-3: 0 16px 48px rgba(15, 23, 42, 0.20);
+
+  /* Motion */
+  --ds-duration-fast: 150ms;
+  --ds-duration-base: 200ms;
+  --ds-duration-slow: 300ms;
+  --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ds-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
+
+  /* Derived interaction formulas: action roles */
+  --primary-hover: color-mix(in srgb, var(--primary) 92%, var(--fg));
+  --primary-active: color-mix(in srgb, var(--primary) 84%, var(--fg));
+  --secondary-hover: color-mix(in srgb, var(--secondary) 92%, var(--fg));
+  --secondary-active: color-mix(in srgb, var(--secondary) 84%, var(--fg));
+  --brd-hover: color-mix(in srgb, var(--brd) 70%, var(--fg));
+  --brd-active: color-mix(in srgb, var(--brd) 55%, var(--fg));
+  --destructive-hover: color-mix(in srgb, var(--destructive) 92%, var(--fg));
+  --destructive-active: color-mix(in srgb, var(--destructive) 84%, var(--fg));
+
+  /* Derived interaction formulas: status roles */
+  --ds-success-hover: color-mix(in srgb, var(--ds-success) 92%, var(--fg));
+  --ds-success-active: color-mix(in srgb, var(--ds-success) 84%, var(--fg));
+  --ds-warning-hover: color-mix(in srgb, var(--ds-warning) 92%, var(--fg));
+  --ds-warning-active: color-mix(in srgb, var(--ds-warning) 84%, var(--fg));
+  --ds-danger-hover: color-mix(in srgb, var(--ds-danger) 92%, var(--fg));
+  --ds-danger-active: color-mix(in srgb, var(--ds-danger) 84%, var(--fg));
+  --ds-info-hover: color-mix(in srgb, var(--ds-info) 92%, var(--fg));
+  --ds-info-active: color-mix(in srgb, var(--ds-info) 84%, var(--fg));
+  --ds-slate-hover: color-mix(in srgb, var(--ds-slate) 92%, var(--fg));
+  --ds-slate-active: color-mix(in srgb, var(--ds-slate) 84%, var(--fg));
+  --ds-azure-hover: color-mix(in srgb, var(--ds-azure) 92%, var(--fg));
+  --ds-azure-active: color-mix(in srgb, var(--ds-azure) 84%, var(--fg));
+}