@kinetixui/tokens 0.4.1 → 0.4.3

package/dist/android/Theme.dark.kt

@@ -21,6 +21,9 @@ object KinetixThemeDark {
   val colorChart3 = Color(0xffffc975)
   val colorChart4 = Color(0xffdd6a6a)
   val colorChart5 = Color(0xffd2c1b6)
+  val colorChart6 = Color(0xff7495ab)
+  val colorChart7 = Color(0xffd13a3a)
+  val colorChart8 = Color(0xff748873)
   val colorDestructive = Color(0xffdd6a6a)
   val colorDestructiveForeground = Color(0xff280202)
   val colorForeground = Color(0xfff0f7ff)

package/dist/android/Theme.kt

@@ -21,6 +21,9 @@ object KinetixTheme {
   val colorChart3 = Color(0xffffbc53)
   val colorChart4 = Color(0xffd13a3a)
   val colorChart5 = Color(0xffb4a499)
+  val colorChart6 = Color(0xff57778d)
+  val colorChart7 = Color(0xff9e0808)
+  val colorChart8 = Color(0xff465245)
   val colorDestructive = Color(0xffc60a0a)
   val colorDestructiveForeground = Color(0xfffef3f2)
   val colorForeground = Color(0xff050c11)
@@ -59,6 +62,6 @@ object KinetixTheme {
   val colorSuccessForeground = Color(0xfff1f3f1)
   val colorTertiary = Color(0xffb0b0b0)
   val colorTertiaryForeground = Color(0xfff0f7ff)
-  val colorWarning = Color(0xfff97907)
+  val colorWarning = Color(0xff7f5b21)
   val colorWarningForeground = Color(0xfffff8eb)
 }

package/dist/android/res/values/colors.xml

@@ -126,7 +126,7 @@
   <color name="color_destructive_foreground">#fffef3f2</color>
   <color name="color_success">#ff5d6d5c</color>
   <color name="color_success_foreground">#fff1f3f1</color>
-  <color name="color_warning">#fff97907</color>
+  <color name="color_warning">#ff7f5b21</color>
   <color name="color_warning_foreground">#fffff8eb</color>
   <color name="color_border">#ff92b2c8</color>
   <color name="color_input">#ff92b2c8</color>
@@ -147,6 +147,9 @@
   <color name="color_chart_3">#ffffbc53</color>
   <color name="color_chart_4">#ffd13a3a</color>
   <color name="color_chart_5">#ffb4a499</color>
+  <color name="color_chart_6">#ff57778d</color>
+  <color name="color_chart_7">#ff9e0808</color>
+  <color name="color_chart_8">#ff465245</color>
   <color name="color_sidebar">#fffafafa</color>
   <color name="color_sidebar_foreground">#ff050c11</color>
   <color name="color_sidebar_primary">#ff1b3c53</color>

package/dist/flutter/app_colors.dart

@@ -53,6 +53,9 @@ class KinetixColors {
     static const colorChart3 = Color(0xFFFFBC53);
     static const colorChart4 = Color(0xFFD13A3A);
     static const colorChart5 = Color(0xFFB4A499);
+    static const colorChart6 = Color(0xFF57778D); /** synth: 6th data-viz hue — steel blue, distinct from the navy chart-1 */
+    static const colorChart7 = Color(0xFF9E0808); /** synth: 7th data-viz hue — deep red, distinct from chart-4 */
+    static const colorChart8 = Color(0xFF465245); /** synth: 8th data-viz hue — deep green, distinct from chart-2 */
     static const colorCream0 = Color(0xFFFFFFFF);
     static const colorCream100 = Color(0xFFFEFDFC);
     static const colorCream1000 = Color(0xFF8C5734);
@@ -165,6 +168,6 @@ class KinetixColors {
     static const colorTaupe950 = Color(0xFF4B3D34);
     static const colorTertiary = Color(0xFFB0B0B0); /** figma: tertiary — switch off-track */
     static const colorTertiaryForeground = Color(0xFFF0F7FF);
-    static const colorWarning = Color(0xFFF97907); /** figma: onWarningContainer #f97907 (only warning role Figma exposes at full chroma) */
+    static const colorWarning = Color(0xFF7F5B21); /** a11y: Figma onWarningContainer #f97907 is 2.7:1 as text on the page / 2.6:1 in the Tag warning variant — fails WCAG AA. amber.800 #7f5b21 clears 6.1:1 / 5.8:1. Dark --warning stays bright (amber.400). See ACCESSIBILITY-AUDIT.md. */
     static const colorWarningForeground = Color(0xFFFFF8EB); /** figma: warningContainer #fff8eb */
 }

package/dist/flutter/app_theme.dart

@@ -23,6 +23,9 @@ class KinetixTheme {
     static const colorChart3 = Color(0xFFFFBC53);
     static const colorChart4 = Color(0xFFD13A3A);
     static const colorChart5 = Color(0xFFB4A499);
+    static const colorChart6 = Color(0xFF57778D); /** synth: 6th data-viz hue — steel blue, distinct from the navy chart-1 */
+    static const colorChart7 = Color(0xFF9E0808); /** synth: 7th data-viz hue — deep red, distinct from chart-4 */
+    static const colorChart8 = Color(0xFF465245); /** synth: 8th data-viz hue — deep green, distinct from chart-2 */
     static const colorDestructive = Color(0xFFC60A0A); /** a11y: figma error #ec5047 is 3.33:1 under on-error / 3.62:1 as text on the page — fails WCAG AA. red.500 #c60a0a clears 5.6:1 / 6.1:1. See ACCESSIBILITY-AUDIT.md. */
     static const colorDestructiveForeground = Color(0xFFFEF3F2); /** figma: onError #fef3f2 */
     static const colorForeground = Color(0xFF050C11); /** figma: onSurface #050c11 */
@@ -61,6 +64,6 @@ class KinetixTheme {
     static const colorSuccessForeground = Color(0xFFF1F3F1); /** synth */
     static const colorTertiary = Color(0xFFB0B0B0); /** figma: tertiary — switch off-track */
     static const colorTertiaryForeground = Color(0xFFF0F7FF);
-    static const colorWarning = Color(0xFFF97907); /** figma: onWarningContainer #f97907 (only warning role Figma exposes at full chroma) */
+    static const colorWarning = Color(0xFF7F5B21); /** a11y: Figma onWarningContainer #f97907 is 2.7:1 as text on the page / 2.6:1 in the Tag warning variant — fails WCAG AA. amber.800 #7f5b21 clears 6.1:1 / 5.8:1. Dark --warning stays bright (amber.400). See ACCESSIBILITY-AUDIT.md. */
     static const colorWarningForeground = Color(0xFFFFF8EB); /** figma: warningContainer #fff8eb */
 }

package/dist/flutter/kinetix_color_scheme.dark.dart

@@ -35,6 +35,9 @@ class KinetixColorSchemeDark {
   static const chart3 = Color(0xFFFFC975);
   static const chart4 = Color(0xFFDD6A6A);
   static const chart5 = Color(0xFFD2C1B6);
+  static const chart6 = Color(0xFF7495AB);
+  static const chart7 = Color(0xFFD13A3A);
+  static const chart8 = Color(0xFF748873);
   static const sidebar = Color(0xFF0B1821);
   static const sidebarForeground = Color(0xFFF0F7FF);
   static const sidebarPrimary = Color(0xFF92B2C8);

package/dist/flutter/kinetix_color_scheme.dart

@@ -25,7 +25,7 @@ class KinetixColorScheme {
   static const destructiveForeground = Color(0xFFFEF3F2);
   static const success = Color(0xFF5D6D5C);
   static const successForeground = Color(0xFFF1F3F1);
-  static const warning = Color(0xFFF97907);
+  static const warning = Color(0xFF7F5B21);
   static const warningForeground = Color(0xFFFFF8EB);
   static const border = Color(0xFF92B2C8);
   static const input = Color(0xFF92B2C8);
@@ -35,6 +35,9 @@ class KinetixColorScheme {
   static const chart3 = Color(0xFFFFBC53);
   static const chart4 = Color(0xFFD13A3A);
   static const chart5 = Color(0xFFB4A499);
+  static const chart6 = Color(0xFF57778D);
+  static const chart7 = Color(0xFF9E0808);
+  static const chart8 = Color(0xFF465245);
   static const sidebar = Color(0xFFFAFAFA);
   static const sidebarForeground = Color(0xFF050C11);
   static const sidebarPrimary = Color(0xFF1B3C53);

package/dist/ios/KinetixColors.swift

@@ -50,6 +50,9 @@ public enum KinetixColor {
     public static let colorChart3 = UIColor(red: 1.000, green: 0.737, blue: 0.325, alpha: 1)
     public static let colorChart4 = UIColor(red: 0.820, green: 0.227, blue: 0.227, alpha: 1)
     public static let colorChart5 = UIColor(red: 0.706, green: 0.643, blue: 0.600, alpha: 1)
+    public static let colorChart6 = UIColor(red: 0.341, green: 0.467, blue: 0.553, alpha: 1) /** synth: 6th data-viz hue — steel blue, distinct from the navy chart-1 */
+    public static let colorChart7 = UIColor(red: 0.620, green: 0.031, blue: 0.031, alpha: 1) /** synth: 7th data-viz hue — deep red, distinct from chart-4 */
+    public static let colorChart8 = UIColor(red: 0.275, green: 0.322, blue: 0.271, alpha: 1) /** synth: 8th data-viz hue — deep green, distinct from chart-2 */
     public static let colorCream0 = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorCream100 = UIColor(red: 0.996, green: 0.992, blue: 0.988, alpha: 1)
     public static let colorCream1000 = UIColor(red: 0.549, green: 0.341, blue: 0.204, alpha: 1)
@@ -162,6 +165,6 @@ public enum KinetixColor {
     public static let colorTaupe950 = UIColor(red: 0.294, green: 0.239, blue: 0.204, alpha: 1)
     public static let colorTertiary = UIColor(red: 0.690, green: 0.690, blue: 0.690, alpha: 1) /** figma: tertiary — switch off-track */
     public static let colorTertiaryForeground = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1)
-    public static let colorWarning = UIColor(red: 0.976, green: 0.475, blue: 0.027, alpha: 1) /** figma: onWarningContainer #f97907 (only warning role Figma exposes at full chroma) */
+    public static let colorWarning = UIColor(red: 0.498, green: 0.357, blue: 0.129, alpha: 1) /** a11y: Figma onWarningContainer #f97907 is 2.7:1 as text on the page / 2.6:1 in the Tag warning variant — fails WCAG AA. amber.800 #7f5b21 clears 6.1:1 / 5.8:1. Dark --warning stays bright (amber.400). See ACCESSIBILITY-AUDIT.md. */
     public static let colorWarningForeground = UIColor(red: 1.000, green: 0.973, blue: 0.922, alpha: 1) /** figma: warningContainer #fff8eb */
 }

package/dist/ios/KinetixColorsSwiftUI.dark.swift

@@ -33,6 +33,9 @@ public enum KinetixColorsSwiftUIDark {
     public static let chart3 = Color(red: 1, green: 0.788, blue: 0.459)
     public static let chart4 = Color(red: 0.867, green: 0.416, blue: 0.416)
     public static let chart5 = Color(red: 0.824, green: 0.757, blue: 0.714)
+    public static let chart6 = Color(red: 0.455, green: 0.584, blue: 0.671)
+    public static let chart7 = Color(red: 0.82, green: 0.227, blue: 0.227)
+    public static let chart8 = Color(red: 0.455, green: 0.533, blue: 0.451)
     public static let sidebar = Color(red: 0.043, green: 0.094, blue: 0.129)
     public static let sidebarForeground = Color(red: 0.941, green: 0.969, blue: 1)
     public static let sidebarPrimary = Color(red: 0.573, green: 0.698, blue: 0.784)

package/dist/ios/KinetixColorsSwiftUI.swift

@@ -23,7 +23,7 @@ public enum KinetixColorsSwiftUI {
     public static let destructiveForeground = Color(red: 0.996, green: 0.953, blue: 0.949)
     public static let success = Color(red: 0.365, green: 0.427, blue: 0.361)
     public static let successForeground = Color(red: 0.945, green: 0.953, blue: 0.945)
-    public static let warning = Color(red: 0.976, green: 0.475, blue: 0.027)
+    public static let warning = Color(red: 0.498, green: 0.357, blue: 0.129)
     public static let warningForeground = Color(red: 1, green: 0.973, blue: 0.922)
     public static let border = Color(red: 0.573, green: 0.698, blue: 0.784)
     public static let input = Color(red: 0.573, green: 0.698, blue: 0.784)
@@ -33,6 +33,9 @@ public enum KinetixColorsSwiftUI {
     public static let chart3 = Color(red: 1, green: 0.737, blue: 0.325)
     public static let chart4 = Color(red: 0.82, green: 0.227, blue: 0.227)
     public static let chart5 = Color(red: 0.706, green: 0.643, blue: 0.6)
+    public static let chart6 = Color(red: 0.341, green: 0.467, blue: 0.553)
+    public static let chart7 = Color(red: 0.62, green: 0.031, blue: 0.031)
+    public static let chart8 = Color(red: 0.275, green: 0.322, blue: 0.271)
     public static let sidebar = Color(red: 0.98, green: 0.98, blue: 0.98)
     public static let sidebarForeground = Color(red: 0.02, green: 0.047, blue: 0.067)
     public static let sidebarPrimary = Color(red: 0.106, green: 0.235, blue: 0.325)

package/dist/ios/Theme.swift

@@ -20,6 +20,9 @@ public class KinetixTheme {
     public static let colorChart3 = UIColor(red: 1.000, green: 0.737, blue: 0.325, alpha: 1)
     public static let colorChart4 = UIColor(red: 0.820, green: 0.227, blue: 0.227, alpha: 1)
     public static let colorChart5 = UIColor(red: 0.706, green: 0.643, blue: 0.600, alpha: 1)
+    public static let colorChart6 = UIColor(red: 0.341, green: 0.467, blue: 0.553, alpha: 1) /** synth: 6th data-viz hue — steel blue, distinct from the navy chart-1 */
+    public static let colorChart7 = UIColor(red: 0.620, green: 0.031, blue: 0.031, alpha: 1) /** synth: 7th data-viz hue — deep red, distinct from chart-4 */
+    public static let colorChart8 = UIColor(red: 0.275, green: 0.322, blue: 0.271, alpha: 1) /** synth: 8th data-viz hue — deep green, distinct from chart-2 */
     public static let colorDestructive = UIColor(red: 0.776, green: 0.039, blue: 0.039, alpha: 1) /** a11y: figma error #ec5047 is 3.33:1 under on-error / 3.62:1 as text on the page — fails WCAG AA. red.500 #c60a0a clears 5.6:1 / 6.1:1. See ACCESSIBILITY-AUDIT.md. */
     public static let colorDestructiveForeground = UIColor(red: 0.996, green: 0.953, blue: 0.949, alpha: 1) /** figma: onError #fef3f2 */
     public static let colorForeground = UIColor(red: 0.020, green: 0.047, blue: 0.067, alpha: 1) /** figma: onSurface #050c11 */
@@ -58,6 +61,6 @@ public class KinetixTheme {
     public static let colorSuccessForeground = UIColor(red: 0.945, green: 0.953, blue: 0.945, alpha: 1) /** synth */
     public static let colorTertiary = UIColor(red: 0.690, green: 0.690, blue: 0.690, alpha: 1) /** figma: tertiary — switch off-track */
     public static let colorTertiaryForeground = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1)
-    public static let colorWarning = UIColor(red: 0.976, green: 0.475, blue: 0.027, alpha: 1) /** figma: onWarningContainer #f97907 (only warning role Figma exposes at full chroma) */
+    public static let colorWarning = UIColor(red: 0.498, green: 0.357, blue: 0.129, alpha: 1) /** a11y: Figma onWarningContainer #f97907 is 2.7:1 as text on the page / 2.6:1 in the Tag warning variant — fails WCAG AA. amber.800 #7f5b21 clears 6.1:1 / 5.8:1. Dark --warning stays bright (amber.400). See ACCESSIBILITY-AUDIT.md. */
     public static let colorWarningForeground = UIColor(red: 1.000, green: 0.973, blue: 0.922, alpha: 1) /** figma: warningContainer #fff8eb */
 }

package/dist/web/extras.dark.css

@@ -0,0 +1,8 @@
+/* Generated by Style Dictionary — shadow + typography composites. */
+
+.dark {
+  --shadow-focus: 0 0 0 1px #92b2c8, 0 0 0 4px #92b2c852;
+  --shadow-focus-destructive: 0 0 0 1px #dd6a6a, 0 0 0 4px #dd6a6a52;
+  --shadow-focus-success: 0 0 0 1px #90a08f, 0 0 0 4px #90a08f52;
+  --shadow-focus-warning: 0 0 0 1px #ffc975, 0 0 0 4px #ffc97552;
+}

package/dist/web/globals.css

@@ -196,7 +196,7 @@
   --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: var(--amber-800); /** a11y: Figma onWarningContainer #f97907 is 2.7:1 as text on the page / 2.6:1 in the Tag warning variant — fails WCAG AA. amber.800 #7f5b21 clears 6.1:1 / 5.8:1. Dark --warning stays bright (amber.400). See ACCESSIBILITY-AUDIT.md. */
   --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) */
@@ -206,6 +206,9 @@
   --chart-3: var(--amber-500);
   --chart-4: var(--red-400);
   --chart-5: var(--taupe-600);
+  --chart-6: var(--blue-300); /** synth: 6th data-viz hue — steel blue, distinct from the navy chart-1 */
+  --chart-7: var(--red-600); /** synth: 7th data-viz hue — deep red, distinct from chart-4 */
+  --chart-8: var(--green-700); /** synth: 8th data-viz hue — deep green, distinct from chart-2 */
   --sidebar: var(--neutral-50);
   --sidebar-foreground: var(--blue-900);
   --sidebar-primary: var(--blue-500);

package/dist/web/globals.dark.css

@@ -31,6 +31,9 @@
   --chart-3: 37 100% 73%;
   --chart-4: 0 63% 64%;
   --chart-5: 24 24% 77%;
+  --chart-6: 204 25% 56%;
+  --chart-7: 0 62% 52%;
+  --chart-8: 117 8% 49%;
   --sidebar: 205 50% 9%;
   --sidebar-foreground: 212 100% 97%;
   --sidebar-primary: 204 33% 68%;

package/dist/web/tokens.d.ts

@@ -139,7 +139,7 @@ declare const tokens: {
     "destructive-foreground": "#fef3f2",
     "success": "#5d6d5c",
     "success-foreground": "#f1f3f1",
-    "warning": "#f97907",
+    "warning": "#7f5b21",
     "warning-foreground": "#fff8eb",
     "border": "#92b2c8",
     "input": "#92b2c8",
@@ -162,6 +162,9 @@ declare const tokens: {
     "chart-3": "#ffbc53",
     "chart-4": "#d13a3a",
     "chart-5": "#b4a499",
+    "chart-6": "#57778d",
+    "chart-7": "#9e0808",
+    "chart-8": "#465245",
     "sidebar": "#fafafa",
     "sidebar-foreground": "#050c11",
     "sidebar-primary": "#1b3c53",

package/dist/web/tokens.js

@@ -139,7 +139,7 @@ export const tokens = {
     "destructive-foreground": "#fef3f2",
     "success": "#5d6d5c",
     "success-foreground": "#f1f3f1",
-    "warning": "#f97907",
+    "warning": "#7f5b21",
     "warning-foreground": "#fff8eb",
     "border": "#92b2c8",
     "input": "#92b2c8",
@@ -162,6 +162,9 @@ export const tokens = {
     "chart-3": "#ffbc53",
     "chart-4": "#d13a3a",
     "chart-5": "#b4a499",
+    "chart-6": "#57778d",
+    "chart-7": "#9e0808",
+    "chart-8": "#465245",
     "sidebar": "#fafafa",
     "sidebar-foreground": "#050c11",
     "sidebar-primary": "#1b3c53",

package/dist/web/tokens.ts

@@ -140,7 +140,7 @@ export const tokens = {
     "destructive-foreground": "#fef3f2",
     "success": "#5d6d5c",
     "success-foreground": "#f1f3f1",
-    "warning": "#f97907",
+    "warning": "#7f5b21",
     "warning-foreground": "#fff8eb",
     "border": "#92b2c8",
     "input": "#92b2c8",
@@ -163,6 +163,9 @@ export const tokens = {
     "chart-3": "#ffbc53",
     "chart-4": "#d13a3a",
     "chart-5": "#b4a499",
+    "chart-6": "#57778d",
+    "chart-7": "#9e0808",
+    "chart-8": "#465245",
     "sidebar": "#fafafa",
     "sidebar-foreground": "#050c11",
     "sidebar-primary": "#1b3c53",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/tokens",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "KinetixUI design tokens — CSS variables, a TypeScript object, and native SwiftUI / Jetpack Compose / Flutter text styles, compiled by Style Dictionary.",
   "keywords": [
     "design-tokens",
@@ -29,6 +29,7 @@
     "./css": "./dist/web/globals.css",
     "./css/dark": "./dist/web/globals.dark.css",
     "./css/extras": "./dist/web/extras.css",
+    "./css/extras/dark": "./dist/web/extras.dark.css",
     "./package.json": "./package.json"
   },
   "files": [