kaleido-ui 0.1.68 → 0.1.69

package/dist/tokens/index.js

@@ -1,23 +1,32 @@
 // src/tokens/colors.ts
 var lightSemanticColors = {
-  background: "#ffffff",
-  foreground: "#0a0a0a",
-  card: "#ffffff",
-  cardFg: "#0a0a0a",
-  popover: "#ffffff",
-  popoverFg: "#0a0a0a",
-  primary: "#171717",
-  primaryFg: "#fafafa",
-  secondary: "#f5f5f5",
-  secondaryFg: "#171717",
-  muted: "#f5f5f5",
-  mutedFg: "#737373",
-  accent: "#f5f5f5",
-  accentFg: "#171717",
+  background: "#EAECF8",
+  // surface-raised (light page body)
+  foreground: "#12131E",
+  // content-primary
+  card: "#FFFFFF",
+  //       surface-overlay
+  cardFg: "#12131E",
+  popover: "#FFFFFF",
+  popoverFg: "#12131E",
+  primary: "#17B581",
+  //    brand green (light)
+  primaryFg: "#FFFFFF",
+  secondary: "#E4E6F6",
+  //  neutral surface (bg-secondary utility is brand violet via app token)
+  secondaryFg: "#12131E",
+  muted: "#F6F7FD",
+  //      surface-elevated
+  mutedFg: "#464A69",
+  //    content-secondary
+  accent: "#E4E6F6",
+  //     surface-high
+  accentFg: "#12131E",
   destructive: "#e7000b",
-  border: "#e5e5e5",
-  input: "#e5e5e5",
-  ring: "#a1a1a1",
+  border: "#C8CBE0",
+  //     border-default
+  input: "#C8CBE0",
+  ring: "#17B581",
   chart1: "#2BEE79",
   chart2: "#F6C343",
   chart3: "#F7931A",
@@ -25,30 +34,37 @@ var lightSemanticColors = {
   chart5: "#DD352E"
 };
 var darkSemanticColors = {
-  background: "#0A1326",
-  foreground: "#ffffff",
+  background: "#12131C",
+  // surface-base (deepest)
+  foreground: "#E8E9F2",
+  // content-primary (cool white)
   border: "rgba(255, 255, 255, 0.10)",
   input: "rgba(255, 255, 255, 0.15)",
   destructive: "hsl(0 62% 50%)",
   secondary: "#16273F",
-  secondaryFg: "#ffffff",
-  muted: "#0F1C33",
+  // neutral surface (bg-secondary utility is brand violet via app token)
+  secondaryFg: "#E8E9F2",
+  muted: "#181924",
+  //     surface-raised
   mutedFg: "rgba(255, 255, 255, 0.55)",
-  primary: "#2BEE79",
-  primaryFg: "#051B10",
-  accent: "#16273F",
-  accentFg: "#ffffff",
-  ring: "#2BEE79",
-  card: "#0F1C33",
-  cardFg: "#ffffff",
-  popover: "#16273F",
-  popoverFg: "#ffffff",
+  primary: "#15E99A",
+  //   brand green (dark)
+  primaryFg: "#12131C",
+  accent: "#323448",
+  //    surface-elevated
+  accentFg: "#E8E9F2",
+  ring: "#15E99A",
+  card: "#242638",
+  //      surface-overlay (card)
+  cardFg: "#E8E9F2",
+  popover: "#242638",
+  popoverFg: "#E8E9F2",
   chart1: "#2BEE79",
   chart2: "#F6C343",
   chart3: "#F7931A",
   chart4: "#7C3AED",
   chart5: "#DD352E",
-  semanticBackground: "#0F1C33",
+  semanticBackground: "#242638",
   semanticBorder: "rgba(255, 255, 255, 0.10)"
 };
 var colors = {
@@ -136,6 +152,91 @@ var colors = {
   }
 };
 
+// src/tokens/app-semantic.ts
+var appSemanticDark = {
+  // Body is notably darker than cards — clear depth without full-black.
+  "surface-base": "18 19 28",
+  //  #12131C — deepest bg, sidebar
+  "surface-raised": "24 25 36",
+  // #181924 — page body bg
+  "surface-overlay": "36 38 56",
+  // #242638 — card bg (~14 lighter than body)
+  "surface-elevated": "50 52 72",
+  // #323448 — sections inside cards
+  "surface-high": "66 68 90",
+  //    #42445A — hover/active highlights
+  primary: "21 233 154",
+  //         #15E99A
+  "primary-emphasis": "18 201 126",
+  // #12C97E
+  "primary-foreground": "18 19 28",
+  secondary: "139 92 246",
+  //       #8B5CF6
+  "secondary-emphasis": "124 58 237",
+  "secondary-foreground": "255 255 255",
+  "content-primary": "232 233 242",
+  // #E8E9F2 — slightly cool white
+  "content-secondary": "142 146 172",
+  // #8E92AC
+  "content-tertiary": "88 92 116",
+  // #585C74
+  "content-inverse": "18 19 28",
+  "border-subtle": "40 42 60",
+  //   #282A3C
+  "border-default": "54 56 76",
+  //  #36384C
+  "border-strong": "21 233 154",
+  "status-success": "34 197 94",
+  "status-danger": "248 113 113",
+  "status-warning": "245 158 11",
+  "status-info": "56 189 248",
+  divider: "86 89 108"
+  //          #56596C
+};
+var appSemanticLight = {
+  // Cards = white on a cool-gray page for clear depth.
+  "surface-base": "218 220 234",
+  // #DADCEA — sidebar/deep backgrounds
+  "surface-raised": "234 236 248",
+  // #EAECF8 — page body bg
+  "surface-overlay": "255 255 255",
+  // #FFFFFF — card bg (white)
+  "surface-elevated": "246 247 253",
+  // #F6F7FD — sections inside cards
+  "surface-high": "228 230 246",
+  // #E4E6F6 — hover/active highlights
+  primary: "23 181 129",
+  //         #17B581
+  "primary-emphasis": "19 138 100",
+  // #138A64
+  "primary-foreground": "255 255 255",
+  secondary: "111 50 255",
+  //       #6F32FF
+  "secondary-emphasis": "90 31 229",
+  // #5A1FE5
+  "secondary-foreground": "255 255 255",
+  "content-primary": "18 19 30",
+  //  #12131E
+  "content-secondary": "70 74 105",
+  // #464A69
+  "content-tertiary": "118 122 152",
+  // #767A98
+  "content-inverse": "255 255 255",
+  "border-subtle": "218 220 238",
+  // #DADCEE
+  "border-default": "200 203 224",
+  // #C8CBE0
+  "border-strong": "23 181 129",
+  "status-success": "22 163 74",
+  "status-danger": "220 38 38",
+  "status-warning": "217 119 6",
+  "status-info": "2 132 199",
+  divider: "200 203 224"
+  //         #C8CBE0
+};
+var appStatusSubtleAlpha = "0.15";
+var appSemanticOrder = Object.keys(appSemanticDark);
+
 // src/tokens/typography.ts
 var fontFamily = {
   display: "'Satoshi', system-ui, -apple-system, sans-serif",
@@ -438,6 +539,10 @@ function makeTheme(mode) {
 }
 export {
   animation,
+  appSemanticDark,
+  appSemanticLight,
+  appSemanticOrder,
+  appStatusSubtleAlpha,
   colors,
   fontFamily,
   fontWeight,

package/dist/web/index.cjs

@@ -7068,30 +7068,37 @@ var import_react15 = require("react");
 
 // src/tokens/colors.ts
 var darkSemanticColors = {
-  background: "#0A1326",
-  foreground: "#ffffff",
+  background: "#12131C",
+  // surface-base (deepest)
+  foreground: "#E8E9F2",
+  // content-primary (cool white)
   border: "rgba(255, 255, 255, 0.10)",
   input: "rgba(255, 255, 255, 0.15)",
   destructive: "hsl(0 62% 50%)",
   secondary: "#16273F",
-  secondaryFg: "#ffffff",
-  muted: "#0F1C33",
+  // neutral surface (bg-secondary utility is brand violet via app token)
+  secondaryFg: "#E8E9F2",
+  muted: "#181924",
+  //     surface-raised
   mutedFg: "rgba(255, 255, 255, 0.55)",
-  primary: "#2BEE79",
-  primaryFg: "#051B10",
-  accent: "#16273F",
-  accentFg: "#ffffff",
-  ring: "#2BEE79",
-  card: "#0F1C33",
-  cardFg: "#ffffff",
-  popover: "#16273F",
-  popoverFg: "#ffffff",
+  primary: "#15E99A",
+  //   brand green (dark)
+  primaryFg: "#12131C",
+  accent: "#323448",
+  //    surface-elevated
+  accentFg: "#E8E9F2",
+  ring: "#15E99A",
+  card: "#242638",
+  //      surface-overlay (card)
+  cardFg: "#E8E9F2",
+  popover: "#242638",
+  popoverFg: "#E8E9F2",
   chart1: "#2BEE79",
   chart2: "#F6C343",
   chart3: "#F7931A",
   chart4: "#7C3AED",
   chart5: "#DD352E",
-  semanticBackground: "#0F1C33",
+  semanticBackground: "#242638",
   semanticBorder: "rgba(255, 255, 255, 0.10)"
 };
 var colors = {

package/dist/web/index.js

@@ -6890,30 +6890,37 @@ import { useState as useState14 } from "react";
 
 // src/tokens/colors.ts
 var darkSemanticColors = {
-  background: "#0A1326",
-  foreground: "#ffffff",
+  background: "#12131C",
+  // surface-base (deepest)
+  foreground: "#E8E9F2",
+  // content-primary (cool white)
   border: "rgba(255, 255, 255, 0.10)",
   input: "rgba(255, 255, 255, 0.15)",
   destructive: "hsl(0 62% 50%)",
   secondary: "#16273F",
-  secondaryFg: "#ffffff",
-  muted: "#0F1C33",
+  // neutral surface (bg-secondary utility is brand violet via app token)
+  secondaryFg: "#E8E9F2",
+  muted: "#181924",
+  //     surface-raised
   mutedFg: "rgba(255, 255, 255, 0.55)",
-  primary: "#2BEE79",
-  primaryFg: "#051B10",
-  accent: "#16273F",
-  accentFg: "#ffffff",
-  ring: "#2BEE79",
-  card: "#0F1C33",
-  cardFg: "#ffffff",
-  popover: "#16273F",
-  popoverFg: "#ffffff",
+  primary: "#15E99A",
+  //   brand green (dark)
+  primaryFg: "#12131C",
+  accent: "#323448",
+  //    surface-elevated
+  accentFg: "#E8E9F2",
+  ring: "#15E99A",
+  card: "#242638",
+  //      surface-overlay (card)
+  cardFg: "#E8E9F2",
+  popover: "#242638",
+  popoverFg: "#E8E9F2",
   chart1: "#2BEE79",
   chart2: "#F6C343",
   chart3: "#F7931A",
   chart4: "#7C3AED",
   chart5: "#DD352E",
-  semanticBackground: "#0F1C33",
+  semanticBackground: "#242638",
   semanticBorder: "rgba(255, 255, 255, 0.10)"
 };
 var colors = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.68",
+  "version": "0.1.69",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",