@mkatogui/uds-tokens 0.2.1 → 0.5.0

package/dist/tokens.json

@@ -47,7 +47,8 @@
         "400": "#FBBF24",
         "500": "#F59E0B",
         "600": "#D97706",
-        "700": "#B45309"
+        "700": "#B45309",
+        "800": "#92400e"
       },
       "cyan": {
         "400": "#22D3EE",
@@ -109,18 +110,32 @@
       },
       "success": "#059669",
       "success-bg": "#ECFDF5",
+      "success-on-bg": "#047857",
       "warning": "#D97706",
       "warning-bg": "#FFFBEB",
+      "warning-on-bg": "#92400e",
+      "text-on-error": "#171717",
       "error": "#DC2626",
       "error-bg": "#FEF2F2",
       "info": "#2563EB",
       "info-bg": "#EFF6FF",
-      "surface-default": "{color.primitive.neutral.white}",
+      "surface-default": "#FFFFFF",
       "surface-hover": "#F5F5FA",
       "surface-active": "#EDEDF5",
       "text-disabled": "#A0A0B0",
       "border-strong": "#6E6E7E",
-      "overlay": "rgba(0, 0, 0, 0.5)"
+      "overlay": "rgba(0, 0, 0, 0.5)",
+      "action-primary": "#2563EB",
+      "action-secondary": "#3B82F6",
+      "action-destructive": "#DC2626",
+      "feedback-success": "#059669",
+      "feedback-warning": "#D97706",
+      "feedback-error": "#DC2626",
+      "feedback-info": "#2563EB",
+      "surface-elevated": "#F8F8FA",
+      "surface-overlay": "#F0F0F5",
+      "text-link": "#2563EB",
+      "border-focus": "#2563EB"
     },
     "chart": {
       "1": "#4F46E5",
@@ -131,6 +146,12 @@
       "6": "#8B5CF6",
       "7": "#EC4899",
       "8": "#06B6D4"
+    },
+    "utility": {
+      "hover-tint": "color-mix(in oklch, var(--color-brand-primary) 85%, white)",
+      "hover-shade": "color-mix(in oklch, var(--color-brand-primary) 85%, black)",
+      "disabled-overlay": "color-mix(in oklch, var(--color-bg-primary) 50%, transparent)",
+      "focus-ring": "color-mix(in oklch, var(--color-brand-accent) 40%, transparent)"
     }
   },
   "typography": {
@@ -242,7 +263,47 @@
       "default": "cubic-bezier(0.4, 0, 0.2, 1)",
       "in": "cubic-bezier(0.4, 0, 1, 1)",
       "out": "cubic-bezier(0, 0, 0.2, 1)",
-      "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
+      "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "spring-gentle": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "spring-bouncy": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+      "spring-stiff": "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    "keyframes": {
+      "fade-in": "{\"0%\":{\"opacity\":\"0\"},\"100%\":{\"opacity\":\"1\"}}",
+      "fade-out": "{\"0%\":{\"opacity\":\"1\"},\"100%\":{\"opacity\":\"0\"}}",
+      "slide-up": "{\"0%\":{\"transform\":\"translateY(16px)\",\"opacity\":\"0\"},\"100%\":{\"transform\":\"translateY(0)\",\"opacity\":\"1\"}}",
+      "slide-down": "{\"0%\":{\"transform\":\"translateY(-16px)\",\"opacity\":\"0\"},\"100%\":{\"transform\":\"translateY(0)\",\"opacity\":\"1\"}}",
+      "slide-left": "{\"0%\":{\"transform\":\"translateX(16px)\",\"opacity\":\"0\"},\"100%\":{\"transform\":\"translateX(0)\",\"opacity\":\"1\"}}",
+      "slide-right": "{\"0%\":{\"transform\":\"translateX(-16px)\",\"opacity\":\"0\"},\"100%\":{\"transform\":\"translateX(0)\",\"opacity\":\"1\"}}",
+      "scale-in": "{\"0%\":{\"transform\":\"scale(0.95)\",\"opacity\":\"0\"},\"100%\":{\"transform\":\"scale(1)\",\"opacity\":\"1\"}}",
+      "scale-out": "{\"0%\":{\"transform\":\"scale(1)\",\"opacity\":\"1\"},\"100%\":{\"transform\":\"scale(1.05)\",\"opacity\":\"0\"}}",
+      "spin": "{\"0%\":{\"transform\":\"rotate(0deg)\"},\"100%\":{\"transform\":\"rotate(360deg)\"}}",
+      "pulse": "{\"0%\":{\"opacity\":\"1\"},\"50%\":{\"opacity\":\"0.5\"},\"100%\":{\"opacity\":\"1\"}}",
+      "bounce": "{\"0%\":{\"transform\":\"translateY(0)\"},\"50%\":{\"transform\":\"translateY(-8px)\"},\"100%\":{\"transform\":\"translateY(0)\"}}",
+      "shake": "{\"0%\":{\"transform\":\"translateX(0)\"},\"25%\":{\"transform\":\"translateX(-4px)\"},\"75%\":{\"transform\":\"translateX(4px)\"},\"100%\":{\"transform\":\"translateX(0)\"}}",
+      "shimmer": "{\"0%\":{\"background-position\":\"-200% 0\"},\"100%\":{\"background-position\":\"200% 0\"}}",
+      "skeleton-wave": "{\"0%\":{\"background-position\":\"-468px 0\"},\"100%\":{\"background-position\":\"468px 0\"}}",
+      "pulse-ring": "{\"0%\":{\"transform\":\"scale(0.8)\",\"opacity\":\"1\"},\"100%\":{\"transform\":\"scale(2.0)\",\"opacity\":\"0\"}}",
+      "checkbox-morph": "{\"0%\":{\"stroke-dashoffset\":\"20\",\"opacity\":\"0\"},\"100%\":{\"stroke-dashoffset\":\"0\",\"opacity\":\"1\"}}",
+      "toggle-slide": "{\"0%\":{\"transform\":\"translateX(0)\"},\"100%\":{\"transform\":\"translateX(20px)\"}}",
+      "accordion-height": "{\"0%\":{\"max-height\":\"0\",\"opacity\":\"0\"},\"100%\":{\"max-height\":\"1000px\",\"opacity\":\"1\"}}",
+      "tab-indicator": "{\"0%\":{\"transform\":\"scaleX(0)\",\"opacity\":\"0\"},\"100%\":{\"transform\":\"scaleX(1)\",\"opacity\":\"1\"}}",
+      "counter": "{\"0%\":{\"opacity\":\"0\",\"transform\":\"translateY(8px)\"},\"100%\":{\"opacity\":\"1\",\"transform\":\"translateY(0)\"}}",
+      "typing": "{\"0%\":{\"width\":\"0\",\"border-right-color\":\"transparent\"},\"50%\":{\"border-right-color\":\"currentColor\"},\"100%\":{\"width\":\"100%\",\"border-right-color\":\"transparent\"}}",
+      "fade-in-up": "{\"0%\":{\"opacity\":\"0\",\"transform\":\"translateY(24px)\"},\"100%\":{\"opacity\":\"1\",\"transform\":\"translateY(0)\"}}",
+      "slide-in-right": "{\"0%\":{\"opacity\":\"0\",\"transform\":\"translateX(32px)\"},\"100%\":{\"opacity\":\"1\",\"transform\":\"translateX(0)\"}}",
+      "bounce-in": "{\"0%\":{\"opacity\":\"0\",\"transform\":\"scale(0.3)\"},\"50%\":{\"opacity\":\"1\",\"transform\":\"scale(1.05)\"},\"70%\":{\"transform\":\"scale(0.9)\"},\"100%\":{\"opacity\":\"1\",\"transform\":\"scale(1)\"}}"
+    },
+    "scroll-driven": {
+      "progress": "view()",
+      "reveal-threshold": "0.1",
+      "parallax-factor": "0.5"
+    },
+    "style": {
+      "conservative": "fade-in",
+      "moderate": "slide-up",
+      "expressive": "scale-in",
+      "instant": "none"
     }
   },
   "opacity": {
@@ -281,8 +342,8 @@
       "bg_tertiary_dark": "#242424",
       "bg_inverse_dark": "#FFFFFF",
       "text_primary_dark": "#F5F5F5",
-      "text_secondary_dark": "#A3A3A3",
-      "text_tertiary_dark": "#808080",
+      "text_secondary_dark": "#BDBDBD",
+      "text_tertiary_dark": "#989898",
       "text_on_brand_dark": "#111111",
       "brand_primary_dark": "#FFFFFF",
       "brand_primary_rgb_dark": "255, 255, 255",
@@ -315,11 +376,11 @@
       "bg_tertiary_dark": "#2C2824",
       "bg_inverse_dark": "#FDFCFB",
       "text_primary_dark": "#F5F0EB",
-      "text_secondary_dark": "#A8A29E",
-      "text_tertiary_dark": "#8C8680",
-      "text_on_brand_dark": "#FFFFFF",
-      "brand_primary_dark": "#D97706",
-      "brand_primary_rgb_dark": "217, 119, 6",
+      "text_secondary_dark": "#C0BBB8",
+      "text_tertiary_dark": "#A09A96",
+      "text_on_brand_dark": "#1C1917",
+      "brand_primary_dark": "#FBBF24",
+      "brand_primary_rgb_dark": "251, 191, 36",
       "brand_secondary_dark": "#B45309",
       "brand_accent_dark": "#F59E0B",
       "brand_muted_dark": "#2C2412",
@@ -336,8 +397,8 @@
       "text_secondary": "#5C5470",
       "text_tertiary": "#7A7189",
       "text_on_brand": "#FFFFFF",
-      "brand_primary": "#E8590C",
-      "brand_primary_rgb": "232, 89, 12",
+      "brand_primary": "#C2410C",
+      "brand_primary_rgb": "194, 65, 12",
       "brand_secondary": "#7048E8",
       "brand_accent": "#12B886",
       "brand_muted": "#FFF4E6",
@@ -349,11 +410,11 @@
       "bg_tertiary_dark": "#2A2336",
       "bg_inverse_dark": "#FFFFFF",
       "text_primary_dark": "#F0ECF5",
-      "text_secondary_dark": "#A8A0B5",
-      "text_tertiary_dark": "#8A8298",
+      "text_secondary_dark": "#C0B8CC",
+      "text_tertiary_dark": "#9E96AC",
       "text_on_brand_dark": "#FFFFFF",
-      "brand_primary_dark": "#FF6B2B",
-      "brand_primary_rgb_dark": "255, 107, 43",
+      "brand_primary_dark": "#CC4A14",
+      "brand_primary_rgb_dark": "204, 74, 20",
       "brand_secondary_dark": "#9775FA",
       "brand_accent_dark": "#38D9A9",
       "brand_muted_dark": "#2A1F12",
@@ -383,11 +444,11 @@
       "bg_tertiary_dark": "#1E2130",
       "bg_inverse_dark": "#FFFFFF",
       "text_primary_dark": "#E8EAF0",
-      "text_secondary_dark": "#9498A5",
-      "text_tertiary_dark": "#7A7E8C",
-      "text_on_brand_dark": "#FFFFFF",
-      "brand_primary_dark": "#6366F1",
-      "brand_primary_rgb_dark": "99, 102, 241",
+      "text_secondary_dark": "#B0B4C0",
+      "text_tertiary_dark": "#8E94A0",
+      "text_on_brand_dark": "#0F1117",
+      "brand_primary_dark": "#9B93F5",
+      "brand_primary_rgb_dark": "155, 147, 245",
       "brand_secondary_dark": "#38BDF8",
       "brand_accent_dark": "#22D3EE",
       "brand_muted_dark": "#1E1B4B",
@@ -408,8 +469,8 @@
         "bg-primary": "#0A0A0F",
         "bg-secondary": "#111118",
         "text-primary": "#F0F0F5",
-        "text-secondary": "#9999AA",
-        "brand-primary": "#2563EB",
+        "text-secondary": "#B8B8C8",
+        "brand-primary": "#60A5FA",
         "brand-secondary": "#3B82F6"
       }
     },
@@ -418,7 +479,7 @@
         "bg-primary": "#0A0A0F",
         "bg-secondary": "#111118",
         "text-primary": "#E0E0EE",
-        "text-secondary": "#9999AA",
+        "text-secondary": "#B8B8C8",
         "brand-primary": "#00FF88",
         "brand-secondary": "#00D4FF",
         "success": "#34D399",
@@ -428,13 +489,14 @@
         "error": "#F87171",
         "error-bg": "#2D0A0A",
         "info": "#60A5FA",
-        "info-bg": "#0A1628"
+        "info-bg": "#0A1628",
+        "text-tertiary": "#9e9eac"
       },
       "dark": {
         "bg-primary": "#050508",
         "bg-secondary": "#0A0A0F",
         "text-primary": "#E8E8F0",
-        "text-secondary": "#AAAABC",
+        "text-secondary": "#C0C0D0",
         "brand-primary": "#00FF88",
         "brand-secondary": "#00D4FF"
       }
@@ -452,8 +514,8 @@
         "bg-primary": "#0A0A0F",
         "bg-secondary": "#111118",
         "text-primary": "#F0F0F5",
-        "text-secondary": "#9999AA",
-        "brand-primary": "#7C3AED",
+        "text-secondary": "#B8B8C8",
+        "brand-primary": "#A78BFA",
         "brand-secondary": "#EC4899"
       }
     },
@@ -470,8 +532,8 @@
         "bg-primary": "#0D1117",
         "bg-secondary": "#161B22",
         "text-primary": "#E6EDF3",
-        "text-secondary": "#8B949E",
-        "brand-primary": "#4A7AB5",
+        "text-secondary": "#B0BAC5",
+        "brand-primary": "#79B8FF",
         "brand-secondary": "#58A6FF"
       }
     },
@@ -488,13 +550,46 @@
         "bg-primary": "#000000",
         "bg-secondary": "#1C1C1E",
         "text-primary": "#F5F5F7",
-        "text-secondary": "#A1A1A6",
-        "brand-primary": "#2997FF",
+        "text-secondary": "#B8B8BD",
+        "brand-primary": "#64D2FF",
         "brand-secondary": "#64D2FF"
       }
     }
   },
   "component": {
+    "modal": {
+      "overlay-opacity": "0.5",
+      "content-padding": "24px",
+      "header-padding": "20px",
+      "footer-padding": "20px",
+      "width-sm": "400px",
+      "width-md": "560px",
+      "width-lg": "720px"
+    },
+    "dropdown": {
+      "menu-min-width": "160px",
+      "item-height-sm": "32px",
+      "item-height-md": "36px",
+      "item-height-lg": "40px",
+      "separator-margin": "4px"
+    },
+    "alert": {
+      "icon-size": "20px",
+      "padding-sm": "12px 16px",
+      "padding-md": "16px 20px",
+      "padding-lg": "20px 24px"
+    },
+    "input": {
+      "label-gap": "4px",
+      "helper-gap": "4px",
+      "icon-size": "16px",
+      "icon-inset": "12px"
+    },
+    "feature-card": {
+      "media-height": "200px",
+      "content-padding": "20px",
+      "footer-padding": "16px"
+    },
     "tabs": {
       "height_md": "44px",
       "height_sm": "36px",
@@ -665,6 +760,57 @@
       "collapsed": "64px",
       "default": "240px",
       "wide": "320px"
+    },
+    "stack": {
+      "gap-xs": "4px",
+      "gap-sm": "8px",
+      "gap-md": "16px",
+      "gap-lg": "24px",
+      "gap-xl": "32px"
+    },
+    "grid": {
+      "columns-1": "1",
+      "columns-2": "2",
+      "columns-3": "3",
+      "columns-4": "4",
+      "columns-6": "6",
+      "columns-12": "12"
+    },
+    "container-query": {
+      "sm": "320px",
+      "md": "480px",
+      "lg": "640px",
+      "xl": "960px"
+    },
+    "container-max-width": {
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px"
+    }
+  },
+  "transition": {
+    "view-transition-name": {
+      "header": "uds-header",
+      "hero": "uds-hero",
+      "card": "uds-card",
+      "sidebar": "uds-sidebar",
+      "modal": "uds-modal"
+    },
+    "starting-style": {
+      "modal": "{\"opacity\":\"0\",\"transform\":\"scale(0.95)\"}",
+      "dropdown": "{\"opacity\":\"0\",\"transform\":\"translateY(-8px)\"}",
+      "toast": "{\"opacity\":\"0\",\"transform\":\"translateX(100%)\"}",
+      "popover": "{\"opacity\":\"0\",\"transform\":\"scale(0.9) translateY(-4px)\"}"
+    },
+    "behavior": {
+      "allow-discrete": "allow-discrete"
+    },
+    "style": {
+      "elegant": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "snappy": "cubic-bezier(0.2, 0, 0, 1)",
+      "gentle": "cubic-bezier(0.4, 0, 0.6, 1)",
+      "instant": "steps(1)"
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mkatogui/uds-tokens",
-  "version": "0.2.1",
-  "description": "496 W3C DTCG design tokens from Universal Design System — CSS, JS, TypeScript, and JSON exports",
+  "version": "0.5.0",
+  "description": "600 W3C DTCG design tokens from Universal Design System — CSS, JS, TypeScript, and JSON exports",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -12,7 +12,10 @@
       "types": "./dist/index.d.ts"
     },
     "./css": "./dist/tokens.css",
-    "./json": "./dist/tokens.json"
+    "./json": "./dist/tokens.json",
+    "./types": {
+      "types": "./dist/tokens.d.ts"
+    }
   },
   "files": ["dist/"],
   "keywords": ["design-tokens", "css-custom-properties", "wcag", "accessibility", "design-system"],
@@ -24,6 +27,7 @@
     "directory": "packages/tokens"
   },
   "scripts": {
-    "build": "node build.js"
+    "build": "node build.js",
+    "generate-types": "node build.js"
   }
 }