@kinetixui/tokens 0.1.0 → 0.4.0

package/dist/android/Theme.dark.kt

@@ -0,0 +1,53 @@
+
+
+// Do not edit directly, this file was auto-generated.
+
+
+
+package com.kinetixui.tokens
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.*
+
+object KinetixThemeDark {
+  val colorAccent = Color(0xff102432)
+  val colorAccentForeground = Color(0xfff0f7ff)
+  val colorBackground = Color(0xff050c11)
+  val colorBorder = Color(0xff395a70)
+  val colorCard = Color(0xff0b1821)
+  val colorCardForeground = Color(0xfff0f7ff)
+  val colorChart1 = Color(0xff92b2c8)
+  val colorChart2 = Color(0xff90a08f)
+  val colorChart3 = Color(0xffffc975)
+  val colorChart4 = Color(0xffdd6a6a)
+  val colorChart5 = Color(0xffd2c1b6)
+  val colorDestructive = Color(0xffdd6a6a)
+  val colorDestructiveForeground = Color(0xff280202)
+  val colorForeground = Color(0xfff0f7ff)
+  val colorInfo = Color(0xff92b2c8)
+  val colorInfoForeground = Color(0xff050c11)
+  val colorInput = Color(0xff395a70)
+  val colorMuted = Color(0xff102432)
+  val colorMutedForeground = Color(0xff92b2c8)
+  val colorPopover = Color(0xff0b1821)
+  val colorPopoverForeground = Color(0xfff0f7ff)
+  val colorPrimary = Color(0xff92b2c8)
+  val colorPrimaryForeground = Color(0xff050c11)
+  val colorRing = Color(0xff92b2c8)
+  val colorSecondary = Color(0xff2e362e)
+  val colorSecondaryForeground = Color(0xffe3e7e3)
+  val colorSidebar = Color(0xff0b1821)
+  val colorSidebarAccent = Color(0xff102432)
+  val colorSidebarAccentForeground = Color(0xfff0f7ff)
+  val colorSidebarBorder = Color(0xff395a70)
+  val colorSidebarForeground = Color(0xfff0f7ff)
+  val colorSidebarPrimary = Color(0xff92b2c8)
+  val colorSidebarPrimaryForeground = Color(0xff050c11)
+  val colorSidebarRing = Color(0xff92b2c8)
+  val colorSuccess = Color(0xff90a08f)
+  val colorSuccessForeground = Color(0xff171b17)
+  val colorTertiary = Color(0xff395a70)
+  val colorTertiaryForeground = Color(0xfff0f7ff)
+  val colorWarning = Color(0xffffc975)
+  val colorWarningForeground = Color(0xff2a1a00)
+}

package/dist/android/Theme.kt

@@ -35,7 +35,7 @@ object KinetixTheme {
   val colorPrimaryForeground = Color(0xfff0f7ff)
   val colorRing = Color(0xff1b3c53)
   val colorSecondary = Color(0xfff1f3f1)
-  val colorSecondaryForeground = Color(0xff748873)
+  val colorSecondaryForeground = Color(0xff5d6d5c)
   val colorSemanticError = Color(0xffec5047)
   val colorSemanticErrorContainer = Color(0xfffef3f2)
   val colorSemanticInfoContainer = Color(0xfff0f7ff)

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

@@ -117,7 +117,7 @@
   <color name="color_primary">#ff1b3c53</color>
   <color name="color_primary_foreground">#fff0f7ff</color>
   <color name="color_secondary">#fff1f3f1</color>
-  <color name="color_secondary_foreground">#ff748873</color>
+  <color name="color_secondary_foreground">#ff5d6d5c</color>
   <color name="color_muted">#fff6f6f6</color>
   <color name="color_muted_foreground">#ff6d6d6d</color>
   <color name="color_accent">#fff0f7ff</color>

package/dist/flutter/app_colors.dart

@@ -124,7 +124,7 @@ class KinetixColors {
     static const colorRed950 = Color(0xFF140101);
     static const colorRing = Color(0xFF1B3C53); /** figma: focus state draws a 2px 'Primay' border */
     static const colorSecondary = Color(0xFFF1F3F1); /** figma: secondaryContainer #f1f3f1 (our 'secondary' == Figma container role) */
-    static const colorSecondaryForeground = Color(0xFF748873); /** figma: onSecondaryContainer #748873 */
+    static const colorSecondaryForeground = Color(0xFF5D6D5C); /** figma onSecondaryContainer was green.500 (#748873) = 3.42:1 on secondary (AA-large only); green.600 (#5d6d5c) = 4.95:1 */
     static const colorSemanticError = Color(0xFFEC5047); /** figma: error (NOT red.500 #c60a0a — Figma keeps error as its own value) */
     static const colorSemanticErrorContainer = Color(0xFFFEF3F2); /** figma: errorContainer */
     static const colorSemanticInfoContainer = Color(0xFFF0F7FF);

package/dist/flutter/app_theme.dart

@@ -37,7 +37,7 @@ class KinetixTheme {
     static const colorPrimaryForeground = Color(0xFFF0F7FF); /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground */
     static const colorRing = Color(0xFF1B3C53); /** figma: focus state draws a 2px 'Primay' border */
     static const colorSecondary = Color(0xFFF1F3F1); /** figma: secondaryContainer #f1f3f1 (our 'secondary' == Figma container role) */
-    static const colorSecondaryForeground = Color(0xFF748873); /** figma: onSecondaryContainer #748873 */
+    static const colorSecondaryForeground = Color(0xFF5D6D5C); /** figma onSecondaryContainer was green.500 (#748873) = 3.42:1 on secondary (AA-large only); green.600 (#5d6d5c) = 4.95:1 */
     static const colorSemanticError = Color(0xFFEC5047); /** figma: error (NOT red.500 #c60a0a — Figma keeps error as its own value) */
     static const colorSemanticErrorContainer = Color(0xFFFEF3F2); /** figma: errorContainer */
     static const colorSemanticInfoContainer = Color(0xFFF0F7FF);

package/dist/flutter/kinetix_color_scheme.dark.dart

@@ -0,0 +1,50 @@
+//
+// KinetixColorSchemeDark — generated by Style Dictionary. Do not edit.
+//
+
+import 'dart:ui';
+
+class KinetixColorSchemeDark {
+  KinetixColorSchemeDark._();
+
+  static const background = Color(0xFF050C11);
+  static const foreground = Color(0xFFF0F7FF);
+  static const card = Color(0xFF0B1821);
+  static const cardForeground = Color(0xFFF0F7FF);
+  static const popover = Color(0xFF0B1821);
+  static const popoverForeground = Color(0xFFF0F7FF);
+  static const primary = Color(0xFF92B2C8);
+  static const primaryForeground = Color(0xFF050C11);
+  static const secondary = Color(0xFF2E362E);
+  static const secondaryForeground = Color(0xFFE3E7E3);
+  static const muted = Color(0xFF102432);
+  static const mutedForeground = Color(0xFF92B2C8);
+  static const accent = Color(0xFF102432);
+  static const accentForeground = Color(0xFFF0F7FF);
+  static const destructive = Color(0xFFDD6A6A);
+  static const destructiveForeground = Color(0xFF280202);
+  static const success = Color(0xFF90A08F);
+  static const successForeground = Color(0xFF171B17);
+  static const warning = Color(0xFFFFC975);
+  static const warningForeground = Color(0xFF2A1A00);
+  static const border = Color(0xFF395A70);
+  static const input = Color(0xFF395A70);
+  static const ring = Color(0xFF92B2C8);
+  static const chart1 = Color(0xFF92B2C8);
+  static const chart2 = Color(0xFF90A08F);
+  static const chart3 = Color(0xFFFFC975);
+  static const chart4 = Color(0xFFDD6A6A);
+  static const chart5 = Color(0xFFD2C1B6);
+  static const sidebar = Color(0xFF0B1821);
+  static const sidebarForeground = Color(0xFFF0F7FF);
+  static const sidebarPrimary = Color(0xFF92B2C8);
+  static const sidebarPrimaryForeground = Color(0xFF050C11);
+  static const sidebarAccent = Color(0xFF102432);
+  static const sidebarAccentForeground = Color(0xFFF0F7FF);
+  static const sidebarBorder = Color(0xFF395A70);
+  static const sidebarRing = Color(0xFF92B2C8);
+  static const tertiary = Color(0xFF395A70);
+  static const tertiaryForeground = Color(0xFFF0F7FF);
+  static const info = Color(0xFF92B2C8);
+  static const infoForeground = Color(0xFF050C11);
+}

package/dist/flutter/kinetix_color_scheme.dart

@@ -0,0 +1,50 @@
+//
+// KinetixColorScheme — generated by Style Dictionary. Do not edit.
+//
+
+import 'dart:ui';
+
+class KinetixColorScheme {
+  KinetixColorScheme._();
+
+  static const background = Color(0xFFFFFFFF);
+  static const foreground = Color(0xFF050C11);
+  static const card = Color(0xFFFFFFFF);
+  static const cardForeground = Color(0xFF050C11);
+  static const popover = Color(0xFFFFFFFF);
+  static const popoverForeground = Color(0xFF050C11);
+  static const primary = Color(0xFF1B3C53);
+  static const primaryForeground = Color(0xFFF0F7FF);
+  static const secondary = Color(0xFFF1F3F1);
+  static const secondaryForeground = Color(0xFF5D6D5C);
+  static const muted = Color(0xFFF6F6F6);
+  static const mutedForeground = Color(0xFF6D6D6D);
+  static const accent = Color(0xFFF0F7FF);
+  static const accentForeground = Color(0xFF1B3C53);
+  static const destructive = Color(0xFFEC5047);
+  static const destructiveForeground = Color(0xFFFEF3F2);
+  static const success = Color(0xFF5D6D5C);
+  static const successForeground = Color(0xFFF1F3F1);
+  static const warning = Color(0xFFF97907);
+  static const warningForeground = Color(0xFFFFF8EB);
+  static const border = Color(0xFF92B2C8);
+  static const input = Color(0xFF92B2C8);
+  static const ring = Color(0xFF1B3C53);
+  static const chart1 = Color(0xFF1B3C53);
+  static const chart2 = Color(0xFF748873);
+  static const chart3 = Color(0xFFFFBC53);
+  static const chart4 = Color(0xFFD13A3A);
+  static const chart5 = Color(0xFFB4A499);
+  static const sidebar = Color(0xFFFAFAFA);
+  static const sidebarForeground = Color(0xFF050C11);
+  static const sidebarPrimary = Color(0xFF1B3C53);
+  static const sidebarPrimaryForeground = Color(0xFFF0F7FF);
+  static const sidebarAccent = Color(0xFFF0F7FF);
+  static const sidebarAccentForeground = Color(0xFF1B3C53);
+  static const sidebarBorder = Color(0xFFE0E0E0);
+  static const sidebarRing = Color(0xFF1B3C53);
+  static const tertiary = Color(0xFFB0B0B0);
+  static const tertiaryForeground = Color(0xFFF0F7FF);
+  static const info = Color(0xFF57778D);
+  static const infoForeground = Color(0xFFF0F7FF);
+}

package/dist/ios/KinetixColors.swift

@@ -121,7 +121,7 @@ public enum KinetixColor {
     public static let colorRed950 = UIColor(red: 0.078, green: 0.004, blue: 0.004, alpha: 1)
     public static let colorRing = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1) /** figma: focus state draws a 2px 'Primay' border */
     public static let colorSecondary = UIColor(red: 0.945, green: 0.953, blue: 0.945, alpha: 1) /** figma: secondaryContainer #f1f3f1 (our 'secondary' == Figma container role) */
-    public static let colorSecondaryForeground = UIColor(red: 0.455, green: 0.533, blue: 0.451, alpha: 1) /** figma: onSecondaryContainer #748873 */
+    public static let colorSecondaryForeground = UIColor(red: 0.365, green: 0.427, blue: 0.361, alpha: 1) /** figma onSecondaryContainer was green.500 (#748873) = 3.42:1 on secondary (AA-large only); green.600 (#5d6d5c) = 4.95:1 */
     public static let colorSemanticError = UIColor(red: 0.925, green: 0.314, blue: 0.278, alpha: 1) /** figma: error (NOT red.500 #c60a0a — Figma keeps error as its own value) */
     public static let colorSemanticErrorContainer = UIColor(red: 0.996, green: 0.953, blue: 0.949, alpha: 1) /** figma: errorContainer */
     public static let colorSemanticInfoContainer = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1)

package/dist/ios/KinetixColorsSwiftUI.dark.swift

@@ -0,0 +1,48 @@
+//
+// KinetixColorsSwiftUIDark — generated by Style Dictionary. Do not edit.
+//
+
+import SwiftUI
+
+public enum KinetixColorsSwiftUIDark {
+    public static let background = Color(red: 0.02, green: 0.047, blue: 0.067)
+    public static let foreground = Color(red: 0.941, green: 0.969, blue: 1)
+    public static let card = Color(red: 0.043, green: 0.094, blue: 0.129)
+    public static let cardForeground = Color(red: 0.941, green: 0.969, blue: 1)
+    public static let popover = Color(red: 0.043, green: 0.094, blue: 0.129)
+    public static let popoverForeground = Color(red: 0.941, green: 0.969, blue: 1)
+    public static let primary = Color(red: 0.573, green: 0.698, blue: 0.784)
+    public static let primaryForeground = Color(red: 0.02, green: 0.047, blue: 0.067)
+    public static let secondary = Color(red: 0.18, green: 0.212, blue: 0.18)
+    public static let secondaryForeground = Color(red: 0.89, green: 0.906, blue: 0.89)
+    public static let muted = Color(red: 0.063, green: 0.141, blue: 0.196)
+    public static let mutedForeground = Color(red: 0.573, green: 0.698, blue: 0.784)
+    public static let accent = Color(red: 0.063, green: 0.141, blue: 0.196)
+    public static let accentForeground = Color(red: 0.941, green: 0.969, blue: 1)
+    public static let destructive = Color(red: 0.867, green: 0.416, blue: 0.416)
+    public static let destructiveForeground = Color(red: 0.157, green: 0.008, blue: 0.008)
+    public static let success = Color(red: 0.565, green: 0.627, blue: 0.561)
+    public static let successForeground = Color(red: 0.09, green: 0.106, blue: 0.09)
+    public static let warning = Color(red: 1, green: 0.788, blue: 0.459)
+    public static let warningForeground = Color(red: 0.165, green: 0.102, blue: 0)
+    public static let border = Color(red: 0.224, green: 0.353, blue: 0.439)
+    public static let input = Color(red: 0.224, green: 0.353, blue: 0.439)
+    public static let ring = Color(red: 0.573, green: 0.698, blue: 0.784)
+    public static let chart1 = Color(red: 0.573, green: 0.698, blue: 0.784)
+    public static let chart2 = Color(red: 0.565, green: 0.627, blue: 0.561)
+    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 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)
+    public static let sidebarPrimaryForeground = Color(red: 0.02, green: 0.047, blue: 0.067)
+    public static let sidebarAccent = Color(red: 0.063, green: 0.141, blue: 0.196)
+    public static let sidebarAccentForeground = Color(red: 0.941, green: 0.969, blue: 1)
+    public static let sidebarBorder = Color(red: 0.224, green: 0.353, blue: 0.439)
+    public static let sidebarRing = Color(red: 0.573, green: 0.698, blue: 0.784)
+    public static let tertiary = Color(red: 0.224, green: 0.353, blue: 0.439)
+    public static let tertiaryForeground = Color(red: 0.941, green: 0.969, blue: 1)
+    public static let info = Color(red: 0.573, green: 0.698, blue: 0.784)
+    public static let infoForeground = Color(red: 0.02, green: 0.047, blue: 0.067)
+}

package/dist/ios/KinetixColorsSwiftUI.swift

@@ -0,0 +1,48 @@
+//
+// KinetixColorsSwiftUI — generated by Style Dictionary. Do not edit.
+//
+
+import SwiftUI
+
+public enum KinetixColorsSwiftUI {
+    public static let background = Color(red: 1, green: 1, blue: 1)
+    public static let foreground = Color(red: 0.02, green: 0.047, blue: 0.067)
+    public static let card = Color(red: 1, green: 1, blue: 1)
+    public static let cardForeground = Color(red: 0.02, green: 0.047, blue: 0.067)
+    public static let popover = Color(red: 1, green: 1, blue: 1)
+    public static let popoverForeground = Color(red: 0.02, green: 0.047, blue: 0.067)
+    public static let primary = Color(red: 0.106, green: 0.235, blue: 0.325)
+    public static let primaryForeground = Color(red: 0.941, green: 0.969, blue: 1)
+    public static let secondary = Color(red: 0.945, green: 0.953, blue: 0.945)
+    public static let secondaryForeground = Color(red: 0.365, green: 0.427, blue: 0.361)
+    public static let muted = Color(red: 0.965, green: 0.965, blue: 0.965)
+    public static let mutedForeground = Color(red: 0.427, green: 0.427, blue: 0.427)
+    public static let accent = Color(red: 0.941, green: 0.969, blue: 1)
+    public static let accentForeground = Color(red: 0.106, green: 0.235, blue: 0.325)
+    public static let destructive = Color(red: 0.925, green: 0.314, blue: 0.278)
+    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 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)
+    public static let ring = Color(red: 0.106, green: 0.235, blue: 0.325)
+    public static let chart1 = Color(red: 0.106, green: 0.235, blue: 0.325)
+    public static let chart2 = Color(red: 0.455, green: 0.533, blue: 0.451)
+    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 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)
+    public static let sidebarPrimaryForeground = Color(red: 0.941, green: 0.969, blue: 1)
+    public static let sidebarAccent = Color(red: 0.941, green: 0.969, blue: 1)
+    public static let sidebarAccentForeground = Color(red: 0.106, green: 0.235, blue: 0.325)
+    public static let sidebarBorder = Color(red: 0.878, green: 0.878, blue: 0.878)
+    public static let sidebarRing = Color(red: 0.106, green: 0.235, blue: 0.325)
+    public static let tertiary = Color(red: 0.69, green: 0.69, blue: 0.69)
+    public static let tertiaryForeground = Color(red: 0.941, green: 0.969, blue: 1)
+    public static let info = Color(red: 0.341, green: 0.467, blue: 0.553)
+    public static let infoForeground = Color(red: 0.941, green: 0.969, blue: 1)
+}

package/dist/ios/Theme.swift

@@ -34,7 +34,7 @@ public class KinetixTheme {
     public static let colorPrimaryForeground = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1) /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground */
     public static let colorRing = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1) /** figma: focus state draws a 2px 'Primay' border */
     public static let colorSecondary = UIColor(red: 0.945, green: 0.953, blue: 0.945, alpha: 1) /** figma: secondaryContainer #f1f3f1 (our 'secondary' == Figma container role) */
-    public static let colorSecondaryForeground = UIColor(red: 0.455, green: 0.533, blue: 0.451, alpha: 1) /** figma: onSecondaryContainer #748873 */
+    public static let colorSecondaryForeground = UIColor(red: 0.365, green: 0.427, blue: 0.361, alpha: 1) /** figma onSecondaryContainer was green.500 (#748873) = 3.42:1 on secondary (AA-large only); green.600 (#5d6d5c) = 4.95:1 */
     public static let colorSemanticError = UIColor(red: 0.925, green: 0.314, blue: 0.278, alpha: 1) /** figma: error (NOT red.500 #c60a0a — Figma keeps error as its own value) */
     public static let colorSemanticErrorContainer = UIColor(red: 0.996, green: 0.953, blue: 0.949, alpha: 1) /** figma: errorContainer */
     public static let colorSemanticInfoContainer = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1)

package/dist/web/globals.css

@@ -187,7 +187,7 @@
   --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 */
+  --secondary-foreground: var(--green-600); /** figma onSecondaryContainer was green.500 (#748873) = 3.42:1 on secondary (AA-large only); green.600 (#5d6d5c) = 4.95:1 */
   --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) */

package/dist/web/tokens.d.ts

@@ -130,7 +130,7 @@ declare const tokens: {
     "primary": "#1b3c53",
     "primary-foreground": "#f0f7ff",
     "secondary": "#f1f3f1",
-    "secondary-foreground": "#748873",
+    "secondary-foreground": "#5d6d5c",
     "muted": "#f6f6f6",
     "muted-foreground": "#6d6d6d",
     "accent": "#f0f7ff",

package/dist/web/tokens.js

@@ -130,7 +130,7 @@ export const tokens = {
     "primary": "#1b3c53",
     "primary-foreground": "#f0f7ff",
     "secondary": "#f1f3f1",
-    "secondary-foreground": "#748873",
+    "secondary-foreground": "#5d6d5c",
     "muted": "#f6f6f6",
     "muted-foreground": "#6d6d6d",
     "accent": "#f0f7ff",

package/dist/web/tokens.ts

@@ -131,7 +131,7 @@ export const tokens = {
     "primary": "#1b3c53",
     "primary-foreground": "#f0f7ff",
     "secondary": "#f1f3f1",
-    "secondary-foreground": "#748873",
+    "secondary-foreground": "#5d6d5c",
     "muted": "#f6f6f6",
     "muted-foreground": "#6d6d6d",
     "accent": "#f0f7ff",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/tokens",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "description": "KinetixUI design tokens — CSS variables, a TypeScript object, and native SwiftUI / Jetpack Compose / Flutter text styles, compiled by Style Dictionary.",
   "keywords": [
     "design-tokens",