@digiko-npm/designsystem 0.7.2 → 0.8.0

package/src/tokens/tokens.json

@@ -0,0 +1,413 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "color": {
+    "light": {
+      "bg": {
+        "$value": "#fafafa",
+        "$type": "color",
+        "$description": "Main background"
+      },
+      "bg-subtle": {
+        "$value": "#ffffff",
+        "$type": "color",
+        "$description": "Subtle background"
+      },
+      "bg-muted": {
+        "$value": "#e4e4e7",
+        "$type": "color",
+        "$description": "Muted background"
+      },
+      "bg-elevated": {
+        "$value": "#f4f4f5",
+        "$type": "color",
+        "$description": "Elevated background"
+      },
+      "surface": {
+        "$value": "#ffffff",
+        "$type": "color",
+        "$description": "Surface color"
+      },
+      "surface-hover": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "surface-active": {
+        "$value": "#f4f4f5",
+        "$type": "color"
+      },
+      "text": {
+        "$value": "#09090b",
+        "$type": "color",
+        "$description": "Primary text — 19.3:1 contrast on bg"
+      },
+      "text-secondary": {
+        "$value": "#52525b",
+        "$type": "color",
+        "$description": "Secondary text — 7.6:1 contrast on bg"
+      },
+      "text-tertiary": {
+        "$value": "#a1a1aa",
+        "$type": "color",
+        "$description": "Tertiary text — decorative only"
+      },
+      "text-disabled": {
+        "$value": "#d4d4d8",
+        "$type": "color",
+        "$description": "Disabled text — exempt per WCAG 1.4.3"
+      },
+      "inverted": {
+        "$value": "#18181b",
+        "$type": "color"
+      },
+      "on-inverted": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "border": {
+        "$value": "#e4e4e7",
+        "$type": "color"
+      },
+      "border-hover": {
+        "$value": "#d4d4d8",
+        "$type": "color"
+      },
+      "border-active": {
+        "$value": "#a1a1aa",
+        "$type": "color"
+      },
+      "border-subtle": {
+        "$value": "#f4f4f5",
+        "$type": "color"
+      },
+      "interactive": {
+        "$value": "#3f3f46",
+        "$type": "color"
+      },
+      "interactive-hover": {
+        "$value": "#27272a",
+        "$type": "color"
+      },
+      "overlay": {
+        "$value": "rgba(0, 0, 0, 0.5)",
+        "$type": "color"
+      },
+      "overlay-subtle": {
+        "$value": "rgba(0, 0, 0, 0.02)",
+        "$type": "color"
+      },
+      "overlay-hover": {
+        "$value": "rgba(0, 0, 0, 0.04)",
+        "$type": "color"
+      },
+      "overlay-active": {
+        "$value": "rgba(0, 0, 0, 0.08)",
+        "$type": "color"
+      },
+      "nav-bg": {
+        "$value": "rgba(250, 250, 250, 0.8)",
+        "$type": "color"
+      },
+      "nav-border": {
+        "$value": "rgba(228, 228, 231, 0.6)",
+        "$type": "color"
+      },
+      "selection-bg": {
+        "$value": "#09090b",
+        "$type": "color"
+      },
+      "selection-text": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "scrollbar-thumb": {
+        "$value": "#d4d4d4",
+        "$type": "color"
+      },
+      "scrollbar-thumb-hover": {
+        "$value": "#a3a3a3",
+        "$type": "color"
+      }
+    },
+    "dark": {
+      "bg": {
+        "$value": "#09090b",
+        "$type": "color"
+      },
+      "bg-subtle": {
+        "$value": "#0f0f11",
+        "$type": "color"
+      },
+      "bg-muted": {
+        "$value": "#18181b",
+        "$type": "color"
+      },
+      "bg-elevated": {
+        "$value": "#1c1c20",
+        "$type": "color"
+      },
+      "surface": {
+        "$value": "#0f0f11",
+        "$type": "color"
+      },
+      "surface-hover": {
+        "$value": "#18181b",
+        "$type": "color"
+      },
+      "surface-active": {
+        "$value": "#27272a",
+        "$type": "color"
+      },
+      "text": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "text-secondary": {
+        "$value": "#a1a1aa",
+        "$type": "color"
+      },
+      "text-tertiary": {
+        "$value": "#71717a",
+        "$type": "color"
+      },
+      "text-disabled": {
+        "$value": "#3f3f46",
+        "$type": "color"
+      },
+      "inverted": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "on-inverted": {
+        "$value": "#09090b",
+        "$type": "color"
+      },
+      "border": {
+        "$value": "#27272a",
+        "$type": "color"
+      },
+      "border-hover": {
+        "$value": "#3f3f46",
+        "$type": "color"
+      },
+      "border-active": {
+        "$value": "#52525b",
+        "$type": "color"
+      },
+      "border-subtle": {
+        "$value": "#18181b",
+        "$type": "color"
+      },
+      "interactive": {
+        "$value": "#d4d4d8",
+        "$type": "color"
+      },
+      "interactive-hover": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "overlay": {
+        "$value": "rgba(0, 0, 0, 0.7)",
+        "$type": "color"
+      },
+      "overlay-subtle": {
+        "$value": "rgba(255, 255, 255, 0.03)",
+        "$type": "color"
+      },
+      "overlay-hover": {
+        "$value": "rgba(255, 255, 255, 0.06)",
+        "$type": "color"
+      },
+      "overlay-active": {
+        "$value": "rgba(255, 255, 255, 0.1)",
+        "$type": "color"
+      },
+      "nav-bg": {
+        "$value": "rgba(9, 9, 11, 0.8)",
+        "$type": "color"
+      },
+      "nav-border": {
+        "$value": "rgba(39, 39, 42, 0.6)",
+        "$type": "color"
+      },
+      "selection-bg": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "selection-text": {
+        "$value": "#09090b",
+        "$type": "color"
+      },
+      "scrollbar-thumb": {
+        "$value": "#27272a",
+        "$type": "color"
+      },
+      "scrollbar-thumb-hover": {
+        "$value": "#3f3f46",
+        "$type": "color"
+      }
+    },
+    "semantic": {
+      "success": {
+        "default": { "$value": "#16a34a", "$type": "color" },
+        "subtle": { "$value": "rgba(22, 163, 74, 0.1)", "$type": "color" },
+        "border": { "$value": "rgba(22, 163, 74, 0.2)", "$type": "color" },
+        "solid": { "$value": "#16a34a", "$type": "color" }
+      },
+      "warning": {
+        "default": { "$value": "#d97706", "$type": "color" },
+        "subtle": { "$value": "rgba(217, 119, 6, 0.1)", "$type": "color" },
+        "border": { "$value": "rgba(217, 119, 6, 0.2)", "$type": "color" },
+        "solid": { "$value": "#d97706", "$type": "color" }
+      },
+      "error": {
+        "default": { "$value": "#dc2626", "$type": "color" },
+        "subtle": { "$value": "rgba(220, 38, 38, 0.1)", "$type": "color" },
+        "border": { "$value": "rgba(220, 38, 38, 0.2)", "$type": "color" },
+        "solid": { "$value": "#dc2626", "$type": "color" }
+      },
+      "info": {
+        "default": { "$value": "#2563eb", "$type": "color" },
+        "subtle": { "$value": "rgba(37, 99, 235, 0.1)", "$type": "color" },
+        "border": { "$value": "rgba(37, 99, 235, 0.2)", "$type": "color" },
+        "solid": { "$value": "#2563eb", "$type": "color" }
+      }
+    },
+    "accent": {
+      "blue": { "$value": "#2563eb", "$type": "color" },
+      "blue-subtle": { "$value": "rgba(37, 99, 235, 0.1)", "$type": "color" },
+      "blue-border": { "$value": "rgba(37, 99, 235, 0.2)", "$type": "color" },
+      "purple": { "$value": "#7c3aed", "$type": "color" },
+      "purple-subtle": { "$value": "rgba(124, 58, 237, 0.1)", "$type": "color" },
+      "purple-border": { "$value": "rgba(124, 58, 237, 0.2)", "$type": "color" },
+      "green": { "$value": "#16a34a", "$type": "color" },
+      "green-subtle": { "$value": "rgba(22, 163, 74, 0.1)", "$type": "color" },
+      "green-border": { "$value": "rgba(22, 163, 74, 0.2)", "$type": "color" },
+      "orange": { "$value": "#d97706", "$type": "color" },
+      "orange-subtle": { "$value": "rgba(217, 119, 6, 0.1)", "$type": "color" },
+      "orange-border": { "$value": "rgba(217, 119, 6, 0.2)", "$type": "color" }
+    },
+    "shadow": {
+      "light": {
+        "sm": { "$value": "0 1px 2px rgba(0, 0, 0, 0.05)", "$type": "shadow" },
+        "md": { "$value": "0 4px 12px rgba(0, 0, 0, 0.08)", "$type": "shadow" },
+        "lg": { "$value": "0 8px 24px rgba(0, 0, 0, 0.12)", "$type": "shadow" }
+      },
+      "dark": {
+        "sm": { "$value": "0 1px 2px rgba(0, 0, 0, 0.2)", "$type": "shadow" },
+        "md": { "$value": "0 4px 12px rgba(0, 0, 0, 0.3)", "$type": "shadow" },
+        "lg": { "$value": "0 8px 24px rgba(0, 0, 0, 0.4)", "$type": "shadow" }
+      }
+    }
+  },
+  "spacing": {
+    "0": { "$value": "0", "$type": "dimension" },
+    "0-5": { "$value": "0.125rem", "$type": "dimension", "$description": "2px" },
+    "1": { "$value": "0.25rem", "$type": "dimension", "$description": "4px" },
+    "1-5": { "$value": "0.375rem", "$type": "dimension", "$description": "6px" },
+    "2": { "$value": "0.5rem", "$type": "dimension", "$description": "8px" },
+    "2-5": { "$value": "0.625rem", "$type": "dimension", "$description": "10px" },
+    "3": { "$value": "0.75rem", "$type": "dimension", "$description": "12px" },
+    "4": { "$value": "1rem", "$type": "dimension", "$description": "16px" },
+    "5": { "$value": "1.25rem", "$type": "dimension", "$description": "20px" },
+    "6": { "$value": "1.5rem", "$type": "dimension", "$description": "24px" },
+    "8": { "$value": "2rem", "$type": "dimension", "$description": "32px" },
+    "10": { "$value": "2.5rem", "$type": "dimension", "$description": "40px" },
+    "12": { "$value": "3rem", "$type": "dimension", "$description": "48px" },
+    "16": { "$value": "4rem", "$type": "dimension", "$description": "64px" },
+    "20": { "$value": "5rem", "$type": "dimension", "$description": "80px" },
+    "24": { "$value": "6rem", "$type": "dimension", "$description": "96px" },
+    "32": { "$value": "8rem", "$type": "dimension", "$description": "128px" }
+  },
+  "sizing": {
+    "1": { "$value": "1.5rem", "$type": "dimension", "$description": "24px — xs tier" },
+    "2": { "$value": "2rem", "$type": "dimension", "$description": "32px — sm tier" },
+    "3": { "$value": "2.5rem", "$type": "dimension", "$description": "40px — md tier" },
+    "4": { "$value": "3rem", "$type": "dimension", "$description": "48px — lg tier" }
+  },
+  "borderRadius": {
+    "none": { "$value": "0", "$type": "dimension" },
+    "sm": { "$value": "6px", "$type": "dimension" },
+    "md": { "$value": "8px", "$type": "dimension" },
+    "lg": { "$value": "12px", "$type": "dimension" },
+    "xl": { "$value": "16px", "$type": "dimension" },
+    "2xl": { "$value": "20px", "$type": "dimension" },
+    "full": { "$value": "9999px", "$type": "dimension" }
+  },
+  "typography": {
+    "fontFamily": {
+      "display": { "$value": "\"Clash Display\", system-ui, sans-serif", "$type": "fontFamily" },
+      "sans": { "$value": "\"Switzer\", system-ui, -apple-system, sans-serif", "$type": "fontFamily" },
+      "mono": { "$value": "\"Geist Mono\", ui-monospace, \"SF Mono\", monospace", "$type": "fontFamily" }
+    },
+    "fontSize": {
+      "2xs": { "$value": "0.625rem", "$type": "dimension", "$description": "10px" },
+      "xs": { "$value": "0.75rem", "$type": "dimension", "$description": "12px" },
+      "sm": { "$value": "0.875rem", "$type": "dimension", "$description": "14px" },
+      "base": { "$value": "1rem", "$type": "dimension", "$description": "16px" },
+      "lg": { "$value": "1.125rem", "$type": "dimension", "$description": "18px" },
+      "xl": { "$value": "1.25rem", "$type": "dimension", "$description": "20px" },
+      "2xl": { "$value": "1.5rem", "$type": "dimension", "$description": "24px" },
+      "3xl": { "$value": "1.875rem", "$type": "dimension", "$description": "30px" },
+      "4xl": { "$value": "2.25rem", "$type": "dimension", "$description": "36px" },
+      "5xl": { "$value": "3rem", "$type": "dimension", "$description": "48px" },
+      "6xl": { "$value": "3.75rem", "$type": "dimension", "$description": "60px" },
+      "7xl": { "$value": "4.5rem", "$type": "dimension", "$description": "72px" }
+    },
+    "fontWeight": {
+      "light": { "$value": 300, "$type": "fontWeight" },
+      "normal": { "$value": 400, "$type": "fontWeight" },
+      "medium": { "$value": 500, "$type": "fontWeight" },
+      "semibold": { "$value": 600, "$type": "fontWeight" },
+      "bold": { "$value": 700, "$type": "fontWeight" },
+      "display": { "$value": 400, "$type": "fontWeight", "$description": "Clash Display optimal weight" }
+    },
+    "lineHeight": {
+      "none": { "$value": "1", "$type": "number" },
+      "tight": { "$value": "1.1", "$type": "number" },
+      "snug": { "$value": "1.25", "$type": "number" },
+      "normal": { "$value": "1.5", "$type": "number" },
+      "relaxed": { "$value": "1.625", "$type": "number" },
+      "loose": { "$value": "2", "$type": "number" }
+    },
+    "letterSpacing": {
+      "tighter": { "$value": "-0.02em", "$type": "dimension" },
+      "tight": { "$value": "-0.01em", "$type": "dimension" },
+      "normal": { "$value": "0", "$type": "dimension" },
+      "wide": { "$value": "0.05em", "$type": "dimension" },
+      "wider": { "$value": "0.1em", "$type": "dimension" }
+    }
+  },
+  "zIndex": {
+    "base": { "$value": 0, "$type": "number" },
+    "dropdown": { "$value": 50, "$type": "number" },
+    "sticky": { "$value": 60, "$type": "number" },
+    "overlay": { "$value": 80, "$type": "number" },
+    "modal": { "$value": 100, "$type": "number" },
+    "toast": { "$value": 150, "$type": "number" },
+    "tooltip": { "$value": 200, "$type": "number" }
+  },
+  "duration": {
+    "fast": { "$value": "100ms", "$type": "duration" },
+    "normal": { "$value": "200ms", "$type": "duration" },
+    "slow": { "$value": "400ms", "$type": "duration" },
+    "slower": { "$value": "800ms", "$type": "duration" }
+  },
+  "easing": {
+    "default": { "$value": "ease", "$type": "cubicBezier" },
+    "out": { "$value": "cubic-bezier(0, 0, 0.2, 1)", "$type": "cubicBezier" },
+    "out-expo": { "$value": "cubic-bezier(0.16, 1, 0.3, 1)", "$type": "cubicBezier" },
+    "bounce": { "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)", "$type": "cubicBezier" }
+  },
+  "blur": {
+    "sm": { "$value": "4px", "$type": "dimension" },
+    "md": { "$value": "12px", "$type": "dimension" },
+    "lg": { "$value": "20px", "$type": "dimension" }
+  },
+  "opacity": {
+    "disabled": { "$value": 0.5, "$type": "number" }
+  },
+  "focusRing": {
+    "width": { "$value": "2px", "$type": "dimension" },
+    "offset": { "$value": "2px", "$type": "dimension" }
+  }
+}