@inspirecn/react 1.0.0

package/src/styles/tokens.css

@@ -0,0 +1,249 @@
+/**
+ * Design Tokens
+ * Auto-generated from tokens.json
+ * Generated at: 2/15/2026, 12:12:44 PM
+ */
+
+@theme {
+  /* Color */
+  --color-primary-25: #F2F4FF;
+  --color-primary-50: #E4E9FF;
+  --color-primary-100: #C6D0FF;
+  --color-primary-200: #A3B3FF;
+  --color-primary-300: #7591FF;
+  --color-primary-400: #2A6EFF;
+  --color-primary-500: #0052FF;
+  --color-primary-600: #0049E4;
+  --color-primary-700: #0040C6;
+  --color-primary-800: #0034A1;
+  --color-primary-900: #002572;
+  --color-primary-950: #00040B;
+  --color-grey-25: #FFFFFF;
+  --color-grey-50: #F9F9F9;
+  --color-grey-100: #F5F5F5;
+  --color-grey-200: #F3F3F3;
+  --color-grey-300: #EEEEEE;
+  --color-grey-400: #A5A5A5;
+  --color-grey-500: #787878;
+  --color-grey-600: #4B4B4B;
+  --color-grey-700: #353535;
+  --color-grey-800: #333333;
+  --color-grey-900: #292929;
+  --color-grey-950: #222222;
+  --color-pomegranate-25: #FFFBFB;
+  --color-pomegranate-50: #FFF2F1;
+  --color-pomegranate-100: #FFE2DF;
+  --color-pomegranate-200: #FFCBC5;
+  --color-pomegranate-300: #FFA69D;
+  --color-pomegranate-400: #FF7364;
+  --color-pomegranate-500: #FF3722;
+  --color-pomegranate-600: #ED2A15;
+  --color-pomegranate-700: #C81F0D;
+  --color-pomegranate-800: #A51D0F;
+  --color-pomegranate-900: #881F14;
+  --color-pomegranate-950: #4B0B04;
+  --color-lima-25: #FCFEFA;
+  --color-lima-50: #F5FFE6;
+  --color-lima-100: #E7FDCA;
+  --color-lima-200: #D1FB9B;
+  --color-lima-300: #B2F660;
+  --color-lima-400: #93EB30;
+  --color-lima-500: #73CF11;
+  --color-lima-600: #58A709;
+  --color-lima-700: #437F0C;
+  --color-lima-800: #386410;
+  --color-lima-900: #305512;
+  --color-lima-950: #162F04;
+  --color-supernova-25: #FFFEFA;
+  --color-supernova-50: #FFFEE7;
+  --color-supernova-100: #FFFEC1;
+  --color-supernova-200: #FFF986;
+  --color-supernova-300: #FFEE41;
+  --color-supernova-400: #FFDD0D;
+  --color-supernova-500: #FFCE00;
+  --color-supernova-600: #D19700;
+  --color-supernova-700: #A66B02;
+  --color-supernova-800: #89540A;
+  --color-supernova-900: #74440F;
+  --color-supernova-950: #442304;
+  --color-flush-orange-25: #FFFDFB;
+  --color-flush-orange-50: #FFF8EB;
+  --color-flush-orange-100: #FFEFD4;
+  --color-flush-orange-200: #FFDBAB;
+  --color-flush-orange-300: #FFC070;
+  --color-flush-orange-400: #FF9437;
+  --color-flush-orange-500: #FF8622;
+  --color-flush-orange-600: #F06006;
+  --color-flush-orange-700: #C74707;
+  --color-flush-orange-800: #9E380E;
+  --color-flush-orange-900: #7F3A0F;
+  --color-flush-orange-950: #451605;
+  
+  /* Radius */
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-2xl: 48px;
+  --radius-full: 100%;
+  
+  /* Typography */
+  --font-sans: "GT Walsheim", sans-serif;
+  --text-heading-3xl: 48px;
+  --text-heading-3xl--line-height: 60px;
+  --text-heading-2xl: 32px;
+  --text-heading-2xl--line-height: 40px;
+  --text-heading-xl: 24px;
+  --text-heading-xl--line-height: 30px;
+  --text-heading-lg: 20px;
+  --text-heading-lg--line-height: 24px;
+  --text-heading-md: 18px;
+  --text-heading-md--line-height: 22px;
+  --text-heading-sm: 16px;
+  --text-heading-sm--line-height: 20px;
+  --text-heading-xs: 14px;
+  --text-heading-xs--line-height: 16px;
+  --text-text-xl: 20px;
+  --text-text-xl--line-height: 30px;
+  --text-text-lg: 18px;
+  --text-text-lg--line-height: 28px;
+  --text-text-md: 16px;
+  --text-text-md--line-height: 24px;
+  --text-text-sm: 14px;
+  --text-text-sm--line-height: 20px;
+  --text-text-xs: 12px;
+  --text-text-xs--line-height: 18px;
+  --text-text-xxs: 12px;
+  --text-text-xxs--line-height: 14px;
+  
+  /* Semantic Color Mappings */
+  --color-surface-white: var(--surface-white);
+  --color-surface-secondary: var(--surface-secondary);
+  --color-surface-tertiary: var(--surface-tertiary);
+  --color-surface-tag: var(--surface-tag);
+  --color-surface-icon: var(--surface-icon);
+  --color-cta-primary: var(--cta-primary);
+  --color-cta-secondary: var(--cta-secondary);
+  --color-cta-tertiary: var(--cta-tertiary);
+  --color-focused: var(--focused);
+  --color-hover-primary: var(--hover-primary);
+  --color-hover-secondary: var(--hover-secondary);
+  --color-hover-tertiary: var(--hover-tertiary);
+  --color-delete: var(--delete);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-brand: var(--text-brand);
+  --color-text-white: var(--text-white);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-muted: var(--text-muted);
+  --color-border-primary: var(--border-primary);
+  --color-border-white: var(--border-white);
+  --color-icon-primary: var(--icon-primary);
+  --color-icon-secondary: var(--icon-secondary);
+  --color-icon-tertiary: var(--icon-tertiary);
+  --color-icon-brand: var(--icon-brand);
+  --color-icon-white: var(--icon-white);
+  --color-black: var(--black);
+  --color-white: var(--white);
+  --color-delivered: var(--delivered);
+  --color-bounced: var(--bounced);
+  --color-cancelled: var(--cancelled);
+  --color-clicked: var(--clicked);
+  --color-complained: var(--complained);
+  --color-delivered-delayed: var(--delivered-delayed);
+  --color-failed: var(--failed);
+  --color-opened: var(--opened);
+  --color-scheduled: var(--scheduled);
+  --color-sent: var(--sent);
+  --color-queued: var(--queued);
+  --color-suppressed: var(--suppressed);
+  
+}
+
+:root {
+  --surface-white: var(--color-grey-25);
+  --surface-secondary: var(--color-grey-100);
+  --surface-tertiary: var(--color-grey-50);
+  --surface-tag: var(--color-grey-300);
+  --surface-icon: var(--color-primary-25);
+  --cta-primary: var(--color-primary-500);
+  --cta-secondary: var(--color-grey-300);
+  --cta-tertiary: var(--color-grey-200);
+  --focused: var(--color-primary-200);
+  --hover-primary: var(--color-grey-25);
+  --hover-secondary: var(--color-grey-200);
+  --hover-tertiary: var(--color-grey-50);
+  --delete: var(--color-pomegranate-500);
+  --text-primary: var(--color-primary-950);
+  --text-secondary: var(--color-grey-600);
+  --text-brand: var(--color-primary-500);
+  --text-white: var(--color-grey-25);
+  --text-tertiary: var(--color-grey-500);
+  --text-muted: var(--color-grey-300);
+  --border-primary: var(--color-grey-300);
+  --border-white: var(--color-grey-25);
+  --icon-primary: var(--color-primary-950);
+  --icon-secondary: var(--color-grey-600);
+  --icon-tertiary: var(--color-grey-500);
+  --icon-brand: var(--color-primary-500);
+  --icon-white: var(--color-grey-25);
+  --black: var(--color-grey-950);
+  --white: var(--color-grey-25);
+  --delivered: var(--color-lima-500);
+  --bounced: var(--color-pomegranate-700);
+  --cancelled: var(--color-grey-500);
+  --clicked: var(--color-primary-300);
+  --complained: var(--color-pomegranate-300);
+  --delivered-delayed: var(--color-supernova-500);
+  --failed: var(--color-pomegranate-500);
+  --opened: var(--color-primary-500);
+  --scheduled: var(--color-primary-200);
+  --sent: var(--color-lima-300);
+  --queued: var(--color-supernova-600);
+  --suppressed: var(--color-grey-800);
+}
+
+.dark {
+  --surface-white: var(--color-grey-900);
+  --surface-secondary: var(--color-grey-800);
+  --surface-tertiary: var(--color-grey-950);
+  --surface-tag: var(--color-grey-700);
+  --surface-icon: var(--color-primary-600);
+  --cta-primary: var(--color-primary-500);
+  --cta-secondary: var(--color-grey-700);
+  --cta-tertiary: var(--color-grey-800);
+  --focused: var(--color-primary-200);
+  --hover-primary: var(--color-grey-25);
+  --hover-secondary: var(--color-grey-800);
+  --hover-tertiary: var(--color-grey-25);
+  --delete: var(--color-pomegranate-500);
+  --text-primary: var(--color-grey-50);
+  --text-secondary: var(--color-grey-400);
+  --text-brand: var(--color-primary-500);
+  --text-white: var(--color-grey-950);
+  --text-tertiary: var(--color-grey-500);
+  --text-muted: var(--color-primary-950);
+  --border-primary: var(--color-grey-700);
+  --border-white: var(--color-grey-800);
+  --icon-primary: var(--color-grey-25);
+  --icon-secondary: var(--color-grey-25);
+  --icon-tertiary: var(--color-grey-25);
+  --icon-brand: var(--color-primary-500);
+  --icon-white: var(--color-grey-25);
+  --black: var(--color-grey-950);
+  --white: var(--color-grey-25);
+  --delivered: var(--color-lima-500);
+  --bounced: var(--color-pomegranate-700);
+  --cancelled: var(--color-grey-500);
+  --clicked: var(--color-primary-300);
+  --complained: var(--color-pomegranate-300);
+  --delivered-delayed: var(--color-supernova-500);
+  --failed: var(--color-pomegranate-500);
+  --opened: var(--color-primary-500);
+  --scheduled: var(--color-primary-200);
+  --sent: var(--color-lima-300);
+  --queued: var(--color-supernova-600);
+  --suppressed: var(--color-grey-800);
+}

package/src/styles/tokens.json

@@ -0,0 +1,253 @@
+{
+  "color": {
+    "primary": {
+      "25": "#F2F4FF",
+      "50": "#E4E9FF",
+      "100": "#C6D0FF",
+      "200": "#A3B3FF",
+      "300": "#7591FF",
+      "400": "#2A6EFF",
+      "500": "#0052FF",
+      "600": "#0049E4",
+      "700": "#0040C6",
+      "800": "#0034A1",
+      "900": "#002572",
+      "950": "#00040B"
+    },
+    "grey": {
+      "25": "#FFFFFF",
+      "50": "#F9F9F9",
+      "100": "#F5F5F5",
+      "200": "#F3F3F3",
+      "300": "#EEEEEE",
+      "400": "#A5A5A5",
+      "500": "#787878",
+      "600": "#4B4B4B",
+      "700": "#353535",
+      "800": "#333333",
+      "900": "#292929",
+      "950": "#222222"
+    },
+    "pomegranate": {
+      "25": "#FFFBFB",
+      "50": "#FFF2F1",
+      "100": "#FFE2DF",
+      "200": "#FFCBC5",
+      "300": "#FFA69D",
+      "400": "#FF7364",
+      "500": "#FF3722",
+      "600": "#ED2A15",
+      "700": "#C81F0D",
+      "800": "#A51D0F",
+      "900": "#881F14",
+      "950": "#4B0B04"
+    },
+    "lima": {
+      "25": "#FCFEFA",
+      "50": "#F5FFE6",
+      "100": "#E7FDCA",
+      "200": "#D1FB9B",
+      "300": "#B2F660",
+      "400": "#93EB30",
+      "500": "#73CF11",
+      "600": "#58A709",
+      "700": "#437F0C",
+      "800": "#386410",
+      "900": "#305512",
+      "950": "#162F04"
+    },
+    "supernova": {
+      "25": "#FFFEFA",
+      "50": "#FFFEE7",
+      "100": "#FFFEC1",
+      "200": "#FFF986",
+      "300": "#FFEE41",
+      "400": "#FFDD0D",
+      "500": "#FFCE00",
+      "600": "#D19700",
+      "700": "#A66B02",
+      "800": "#89540A",
+      "900": "#74440F",
+      "950": "#442304"
+    },
+    "flushOrange": {
+      "25": "#FFFDFB",
+      "50": "#FFF8EB",
+      "100": "#FFEFD4",
+      "200": "#FFDBAB",
+      "300": "#FFC070",
+      "400": "#FF9437",
+      "500": "#FF8622",
+      "600": "#F06006",
+      "700": "#C74707",
+      "800": "#9E380E",
+      "900": "#7F3A0F",
+      "950": "#451605"
+    }
+  },
+  "radius": {
+    "none": "0px",
+    "xs": "2px",
+    "sm": "4px",
+    "md": "8px",
+    "lg": "16px",
+    "xl": "24px",
+    "2xl": "48px",
+    "full": "100%"
+  },
+  "typography": {
+    "fontFamily": {
+      "sans": "GT Walsheim"
+    },
+    "fontWeight": {
+      "regular": "400",
+      "medium": "500",
+      "bold": "700"
+    },
+    "fontSize": {
+      "heading-3xl": "48px",
+      "heading-2xl": "32px",
+      "heading-xl": "24px",
+      "heading-lg": "20px",
+      "heading-md": "18px",
+      "heading-sm": "16px",
+      "heading-xs": "14px",
+      "text-xl": "20px",
+      "text-lg": "18px",
+      "text-md": "16px",
+      "text-sm": "14px",
+      "text-xs": "12px",
+      "text-xxs": "12px"
+    },
+    "lineHeight": {
+      "heading-3xl": "60px",
+      "heading-2xl": "40px",
+      "heading-xl": "30px",
+      "heading-lg": "24px",
+      "heading-md": "22px",
+      "heading-sm": "20px",
+      "heading-xs": "16px",
+      "text-xl": "30px",
+      "text-lg": "28px",
+      "text-md": "24px",
+      "text-sm": "20px",
+      "text-xs": "18px",
+      "text-xxs": "14px"
+    }
+  },
+  "shadow": {
+    "primary": "0px 4px 30px 0px rgba(0, 4, 11, 0.1)"
+  },
+  "animate": {},
+  "ease": {},
+  "theme": {
+    "root": {
+      "surface": {
+        "white": "{color.grey.25}",
+        "secondary": "{color.grey.100}",
+        "tertiary": "{color.grey.50}",
+        "tag": "{color.grey.300}",
+        "icon": "{color.primary.25}"
+      },
+      "cta": {
+        "primary": "{color.primary.500}",
+        "secondary": "{color.grey.300}",
+        "tertiary": "{color.grey.200}"
+      },
+      "focused": "{color.primary.200}",
+      "hover": {
+        "primary": "{color.grey.25}",
+        "secondary": "{color.grey.200}",
+        "tertiary": "{color.grey.50}"
+      },
+      "delete": "{color.pomegranate.500}",
+      "text": {
+        "primary": "{color.primary.950}",
+        "secondary": "{color.grey.600}",
+        "brand": "{color.primary.500}",
+        "white": "{color.grey.25}",
+        "tertiary": "{color.grey.500}",
+        "muted": "{color.grey.300}"
+      },
+      "border": {
+        "primary": "{color.grey.300}",
+        "white": "{color.grey.25}"
+      },
+      "icon": {
+        "primary": "{color.primary.950}",
+        "secondary": "{color.grey.600}",
+        "tertiary": "{color.grey.500}",
+        "brand": "{color.primary.500}",
+        "white": "{color.grey.25}"
+      },
+      "black": "{color.grey.950}",
+      "white": "{color.grey.25}",
+      "delivered": "{color.lima.500}",
+      "bounced": "{color.pomegranate.700}",
+      "cancelled": "{color.grey.500}",
+      "clicked": "{color.primary.300}",
+      "complained": "{color.pomegranate.300}",
+      "deliveredDelayed": "{color.supernova.500}",
+      "failed": "{color.pomegranate.500}",
+      "opened": "{color.primary.500}",
+      "scheduled": "{color.primary.200}",
+      "sent": "{color.lima.300}",
+      "queued": "{color.supernova.600}",
+      "suppressed": "{color.grey.800}"
+    },
+    "dark": {
+      "surface": {
+        "white": "{color.grey.900}",
+        "secondary": "{color.grey.800}",
+        "tertiary": "{color.grey.950}",
+        "tag": "{color.grey.700}",
+        "icon": "{color.primary.600}"
+      },
+      "cta": {
+        "primary": "{color.primary.500}",
+        "secondary": "{color.grey.700}",
+        "tertiary": "{color.grey.800}"
+      },
+      "focused": "{color.primary.200}",
+      "hover": {
+        "primary": "{color.grey.25}",
+        "secondary": "{color.grey.800}",
+        "tertiary": "{color.grey.25}"
+      },
+      "delete": "{color.pomegranate.500}",
+      "text": {
+        "primary": "{color.grey.50}",
+        "secondary": "{color.grey.400}",
+        "brand": "{color.primary.500}",
+        "white": "{color.grey.950}",
+        "tertiary": "{color.grey.500}",
+        "muted": "{color.primary.950}"
+      },
+      "border": {
+        "primary": "{color.grey.700}",
+        "white": "{color.grey.800}"
+      },
+      "icon": {
+        "primary": "{color.grey.25}",
+        "secondary": "{color.grey.25}",
+        "tertiary": "{color.grey.25}",
+        "brand": "{color.primary.500}",
+        "white": "{color.grey.25}"
+      },
+      "black": "{color.grey.950}",
+      "white": "{color.grey.25}",
+      "delivered": "{color.lima.500}",
+      "bounced": "{color.pomegranate.700}",
+      "cancelled": "{color.grey.500}",
+      "clicked": "{color.primary.300}",
+      "complained": "{color.pomegranate.300}",
+      "deliveredDelayed": "{color.supernova.500}",
+      "failed": "{color.pomegranate.500}",
+      "opened": "{color.primary.500}",
+      "scheduled": "{color.primary.200}",
+      "sent": "{color.lima.300}",
+      "queued": "{color.supernova.600}",
+      "suppressed": "{color.grey.800}"
+    }
+  }
+}