@kinetixui/tokens 0.1.0

package/dist/web/extras.css

@@ -0,0 +1,29 @@
+/* Generated by Style Dictionary — shadow + typography composites. */
+
+:root {
+  --shadow-sm: 0 1px 2px 0 #0000000d;
+  --shadow-md: 0 1px 1px 0 #0000001f, 0 2px 5px 0 #676e7614;
+  --shadow-lg: 0 4px 6px -1px #00000012, 0 2px 4px -2px #0000000f;
+  --shadow-xl: 0 4px 24px 0 #0000001f;
+  --shadow-focus: 0 0 0 1px #1b3c53, 0 0 0 4px #1b3c5333;
+  --shadow-focus-destructive: 0 0 0 1px #ec5047, 0 0 0 4px #ec504733;
+  --shadow-focus-success: 0 0 0 1px #5d6d5c, 0 0 0 4px #5d6d5c33;
+  --shadow-focus-warning: 0 0 0 1px #f97907, 0 0 0 4px #f9790733;
+
+  --text-display-lg: 500 57px/64px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-display-md: 500 45px/52px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-display-sm: 400 36px/44px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-headline-lg: 600 32px/40px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-headline-md: 400 28px/36px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-headline-sm: 400 24px/32px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-title-lg: 400 22px/28px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-title-md: 500 16px/24px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-title-sm: 500 14px/20px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-title-dialog: 600 18px/24px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-label-lg: 500 14px/20px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-label-md: 500 12px/16px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-label-sm: 500 11px/16px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-body-lg: 400 16px/24px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-body-md: 400 14px/20px Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --text-body-sm: 400 12px/16px Montserrat, ui-sans-serif, system-ui, sans-serif;
+}

package/dist/web/globals.css

@@ -0,0 +1,220 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --blue-0: 207 100% 98%;
+  --blue-50: 212 100% 97%;
+  --blue-100: 204 33% 68%;
+  --blue-150: 203 28% 62%;
+  --blue-200: 204 25% 56%;
+  --blue-300: 204 24% 45%;
+  --blue-400: 204 33% 33%;
+  --blue-500: 205 51% 22%;
+  --blue-600: 205 50% 17%;
+  --blue-700: 205 52% 13%;
+  --blue-800: 205 50% 9%;
+  --blue-850: 205 52% 6%;
+  --blue-900: 205 55% 4%;
+  --blue-950: 204 45% 2%;
+  --blue-1000: 0 0% 0%;
+  --green-0: 0 0% 100%;
+  --green-50: 120 8% 95%;
+  --green-100: 120 8% 90%;
+  --green-150: 120 8% 85%;
+  --green-200: 120 8% 80%;
+  --green-300: 115 8% 70%;
+  --green-400: 116 8% 59%;
+  --green-500: 117 8% 49%;
+  --green-600: 116 8% 39%;
+  --green-700: 115 9% 30%;
+  --green-800: 120 8% 20%;
+  --green-850: 120 8% 15%;
+  --green-900: 120 8% 10%;
+  --green-950: 120 8% 5%;
+  --green-1000: 0 0% 0%;
+  --taupe-0: 0 0% 100%;
+  --taupe-50: 20 27% 98%;
+  --taupe-100: 30 25% 95%;
+  --taupe-150: 20 26% 93%;
+  --taupe-200: 22 23% 91%;
+  --taupe-300: 25 24% 86%;
+  --taupe-400: 22 23% 82%;
+  --taupe-500: 24 24% 77%;
+  --taupe-600: 24 15% 65%;
+  --taupe-700: 23 11% 54%;
+  --taupe-800: 24 12% 42%;
+  --taupe-850: 23 13% 36%;
+  --taupe-900: 22 15% 31%;
+  --taupe-950: 23 18% 25%;
+  --taupe-1000: 23 24% 19%;
+  --cream-0: 0 0% 100%;
+  --cream-50: 60 33% 99%;
+  --cream-100: 30 50% 99%;
+  --cream-150: 20 43% 99%;
+  --cream-200: 15 50% 98%;
+  --cream-300: 30 43% 97%;
+  --cream-400: 23 44% 96%;
+  --cream-500: 24 45% 96%;
+  --cream-600: 24 31% 84%;
+  --cream-700: 25 29% 72%;
+  --cream-800: 23 29% 61%;
+  --cream-850: 24 28% 55%;
+  --cream-900: 24 29% 49%;
+  --cream-950: 24 36% 44%;
+  --cream-1000: 24 46% 38%;
+  --amber-0: 0 0% 100%;
+  --amber-50: 35 100% 97%;
+  --amber-100: 37 100% 93%;
+  --amber-150: 37 100% 90%;
+  --amber-200: 37 100% 86%;
+  --amber-300: 37 100% 80%;
+  --amber-400: 37 100% 73%;
+  --amber-500: 37 100% 66%;
+  --amber-600: 37 63% 55%;
+  --amber-700: 36 55% 43%;
+  --amber-800: 37 59% 31%;
+  --amber-850: 37 62% 26%;
+  --amber-900: 36 67% 20%;
+  --amber-950: 37 77% 14%;
+  --amber-1000: 37 100% 8%;
+  --red-0: 0 100% 99%;
+  --red-50: 0 67% 93%;
+  --red-100: 0 66% 87%;
+  --red-150: 0 64% 81%;
+  --red-200: 0 63% 75%;
+  --red-300: 0 63% 64%;
+  --red-400: 0 62% 52%;
+  --red-500: 0 90% 41%;
+  --red-600: 0 90% 33%;
+  --red-700: 0 90% 25%;
+  --red-800: 0 90% 16%;
+  --red-850: 0 90% 12%;
+  --red-900: 0 90% 8%;
+  --red-950: 0 90% 4%;
+  --red-1000: 0 0% 0%;
+  --neutral-0: 0 0% 100%;
+  --neutral-50: 0 0% 98%;
+  --neutral-100: 0 0% 96%;
+  --neutral-200: 0 0% 93%;
+  --neutral-300: 0 0% 88%;
+  --neutral-400: 0 0% 76%;
+  --neutral-500: 0 0% 62%;
+  --neutral-600: 0 0% 43%;
+  --neutral-700: 0 0% 31%;
+  --neutral-800: 0 0% 20%;
+  --neutral-900: 0 0% 12%;
+  --neutral-1000: 0 0% 0%;
+  --static-white: 0 0% 100%;
+  --static-black: 0 0% 0%;
+  --semantic-error: 3 81% 60%; /** figma: error (NOT red.500 #c60a0a — Figma keeps error as its own value) */
+  --semantic-on-error: 5 86% 97%; /** figma: onError */
+  --semantic-error-container: 5 86% 97%; /** figma: errorContainer */
+  --semantic-on-error-container: 3 81% 60%; /** figma: onErrorContainer */
+  --semantic-warning-container: 39 100% 96%; /** figma: warningContainer */
+  --semantic-on-warning-container: 28 95% 50%; /** figma: onWarningContainer */
+  --semantic-success-container: 120 8% 95%;
+  --semantic-on-success-container: 115 9% 30%;
+  --semantic-warning: 28 95% 50%;
+  --semantic-info-container: 212 100% 97%;
+  --semantic-on-info-container: 204 33% 33%;
+  --tertiary: 0 0% 69%; /** figma: tertiary — switch off-track */
+  --spacing-0: 0;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px; /** SYNTHESIZED */
+  --spacing-8: 32px;
+  --radius-none: 0;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px; /** SYNTHESIZED */
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+  --border-width-default: 1px;
+  --border-width-focus: 2px;
+  --font-family-sans: Montserrat, ui-sans-serif, system-ui, sans-serif;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-size-display-lg: 57px;
+  --font-size-display-md: 45px;
+  --font-size-display-sm: 36px;
+  --font-size-headline-lg: 32px;
+  --font-size-headline-md: 28px;
+  --font-size-headline-sm: 24px;
+  --font-size-title-lg: 22px;
+  --font-size-title-md: 16px;
+  --font-size-title-sm: 14px;
+  --font-size-title-dialog: 18px;
+  --font-size-label-lg: 14px;
+  --font-size-label-md: 12px;
+  --font-size-label-sm: 11px;
+  --font-size-body-lg: 16px;
+  --font-size-body-md: 14px;
+  --font-size-body-sm: 12px;
+  --line-height-display-lg: 64px;
+  --line-height-display-md: 52px;
+  --line-height-display-sm: 44px;
+  --line-height-headline-lg: 40px;
+  --line-height-headline-md: 36px;
+  --line-height-headline-sm: 32px;
+  --line-height-title-lg: 28px;
+  --line-height-title-md: 24px;
+  --line-height-title-sm: 20px;
+  --line-height-title-dialog: 24px;
+  --line-height-label-lg: 20px;
+  --line-height-label-md: 16px;
+  --line-height-label-sm: 16px;
+  --line-height-body-lg: 24px;
+  --line-height-body-md: 20px;
+  --line-height-body-sm: 16px;
+  --letter-spacing-tighter: -0.25px;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide-1: 0.1px;
+  --letter-spacing-wide-15: 0.15px;
+  --letter-spacing-wide-25: 0.25px;
+  --letter-spacing-wide-5: 0.5px;
+  --background: var(--neutral-0); /** figma: surfaceContainerLowest #ffffff */
+  --foreground: var(--blue-900); /** figma: onSurface #050c11 */
+  --card: var(--neutral-0); /** synth: no Figma card token; = background */
+  --card-foreground: var(--blue-900); /** synth: = foreground */
+  --popover: var(--neutral-0); /** synth: no Figma popover token; = background */
+  --popover-foreground: var(--blue-900); /** synth: = foreground */
+  --primary: var(--blue-500); /** figma: 'Primay' (sic) #1b3c53 -> renamed primary */
+  --primary-foreground: var(--blue-50); /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground */
+  --secondary: var(--green-50); /** figma: secondaryContainer #f1f3f1 (our 'secondary' == Figma container role) */
+  --secondary-foreground: var(--green-500); /** figma: onSecondaryContainer #748873 */
+  --muted: var(--neutral-100); /** figma: surfaceContainer #f6f6f6 */
+  --muted-foreground: var(--neutral-600); /** figma: onSurfaceVariant #6d6d6d */
+  --accent: var(--blue-50); /** figma: 'LightBlue' #f0f7ff (the hover fill used by Outline/Ghost buttons) */
+  --accent-foreground: var(--blue-500); /** synth: = primary for readable text on accent */
+  --destructive: var(--semantic-error); /** figma: error #ec5047 */
+  --destructive-foreground: var(--semantic-on-error); /** figma: onError #fef3f2 */
+  --success: var(--green-600); /** synth: no Figma success token; green ramp step 6 (distinct from secondary) */
+  --success-foreground: var(--green-50); /** synth */
+  --warning: var(--semantic-on-warning-container); /** figma: onWarningContainer #f97907 (only warning role Figma exposes at full chroma) */
+  --warning-foreground: var(--semantic-warning-container); /** figma: warningContainer #fff8eb */
+  --border: var(--blue-100); /** figma: outline #92b2c8 */
+  --input: var(--blue-100); /** figma: outline #92b2c8 (same as border) */
+  --ring: var(--blue-500); /** figma: focus state draws a 2px 'Primay' border */
+  --chart-1: var(--blue-500); /** synth: brand ramps for data viz */
+  --chart-2: var(--green-500);
+  --chart-3: var(--amber-500);
+  --chart-4: var(--red-400);
+  --chart-5: var(--taupe-600);
+  --sidebar: var(--neutral-50);
+  --sidebar-foreground: var(--blue-900);
+  --sidebar-primary: var(--blue-500);
+  --sidebar-primary-foreground: var(--blue-50);
+  --sidebar-accent: var(--blue-50);
+  --sidebar-accent-foreground: var(--blue-500);
+  --sidebar-border: var(--neutral-300);
+  --sidebar-ring: var(--blue-500);
+  --tertiary-foreground: var(--blue-50);
+  --info: var(--blue-300); /** synth: steel blue, distinct from navy primary */
+  --info-foreground: var(--blue-50);
+}

package/dist/web/globals.dark.css

@@ -0,0 +1,46 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dark {
+  --background: 205 55% 4%;
+  --foreground: 212 100% 97%;
+  --card: 205 50% 9%;
+  --card-foreground: 212 100% 97%;
+  --popover: 205 50% 9%;
+  --popover-foreground: 212 100% 97%;
+  --primary: 204 33% 68%;
+  --primary-foreground: 205 55% 4%;
+  --secondary: 120 8% 20%;
+  --secondary-foreground: 120 8% 90%;
+  --muted: 205 52% 13%;
+  --muted-foreground: 204 33% 68%;
+  --accent: 205 52% 13%;
+  --accent-foreground: 212 100% 97%;
+  --destructive: 0 63% 64%;
+  --destructive-foreground: 0 90% 8%;
+  --success: 116 8% 59%;
+  --success-foreground: 120 8% 10%;
+  --warning: 37 100% 73%;
+  --warning-foreground: 37 100% 8%;
+  --border: 204 33% 33%;
+  --input: 204 33% 33%;
+  --ring: 204 33% 68%;
+  --chart-1: 204 33% 68%;
+  --chart-2: 116 8% 59%;
+  --chart-3: 37 100% 73%;
+  --chart-4: 0 63% 64%;
+  --chart-5: 24 24% 77%;
+  --sidebar: 205 50% 9%;
+  --sidebar-foreground: 212 100% 97%;
+  --sidebar-primary: 204 33% 68%;
+  --sidebar-primary-foreground: 205 55% 4%;
+  --sidebar-accent: 205 52% 13%;
+  --sidebar-accent-foreground: 212 100% 97%;
+  --sidebar-border: 204 33% 33%;
+  --sidebar-ring: 204 33% 68%;
+  --tertiary: 204 33% 33%;
+  --tertiary-foreground: 212 100% 97%;
+  --info: 204 33% 68%;
+  --info-foreground: 205 55% 4%;
+}