kaleido-ui 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/css/kaleido-ui.css +26 -26
  2. package/dist/native/index.cjs +25 -25
  3. package/dist/native/index.d.cts +50 -50
  4. package/dist/native/index.d.ts +50 -50
  5. package/dist/native/index.js +25 -25
  6. package/dist/tailwind/index.cjs +25 -25
  7. package/dist/tailwind/index.js +25 -25
  8. package/dist/tokens/index.cjs +25 -25
  9. package/dist/tokens/index.d.cts +33 -33
  10. package/dist/tokens/index.d.ts +33 -33
  11. package/dist/tokens/index.js +25 -25
  12. package/package.json +1 -1
package/dist/css/kaleido-ui.css CHANGED
@@ -55,30 +55,30 @@
55
55
  }
56
56
 
57
57
  .dark {
58
- --accent: #262626;
59
- --accent-foreground: #fafafa;
60
- --background: #0a0a0a;
61
- --border: #ffffff1a;
62
- --card: #171717;
63
- --card-foreground: #fafafa;
64
- --chart-1: #1447e6;
65
- --chart-2: #00bc7d;
66
- --chart-3: #fe9a00;
67
- --chart-4: #ad46ff;
68
- --chart-5: #ff2056;
69
- --destructive: #ff6467;
70
- --destructive-foreground: #fafafa;
71
- --foreground: #fafafa;
72
- --input: #ffffff26;
73
- --muted: #262626;
74
- --muted-foreground: #a1a1a1;
75
- --popover: #171717;
76
- --popover-foreground: #fafafa;
77
- --primary: #e5e5e5;
78
- --primary-foreground: #171717;
79
- --ring: #737373;
80
- --secondary: #262626;
81
- --secondary-foreground: #fafafa;
82
- --semantic-background: #272625;
83
- --semantic-border: #535151;
58
+ --accent: hsl(154 26% 17%);
59
+ --accent-foreground: #ffffff;
60
+ --background: hsl(158 58% 7%);
61
+ --border: hsl(150 20% 24%);
62
+ --card: hsl(156 32% 12%);
63
+ --card-foreground: #ffffff;
64
+ --chart-1: #2BEE79;
65
+ --chart-2: #F6C343;
66
+ --chart-3: #F7931A;
67
+ --chart-4: #7C3AED;
68
+ --chart-5: #DD352E;
69
+ --destructive: hsl(0 62% 50%);
70
+ --destructive-foreground: #ffffff;
71
+ --foreground: #ffffff;
72
+ --input: rgba(255, 255, 255, 0.15);
73
+ --muted: hsl(156 32% 12%);
74
+ --muted-foreground: rgba(255, 255, 255, 0.55);
75
+ --popover: hsl(154 26% 17%);
76
+ --popover-foreground: #ffffff;
77
+ --primary: #2BEE79;
78
+ --primary-foreground: #051B10;
79
+ --ring: #2BEE79;
80
+ --secondary: hsl(154 26% 17%);
81
+ --secondary-foreground: #ffffff;
82
+ --semantic-background: hsl(156 32% 12%);
83
+ --semantic-border: hsl(150 20% 24%);
84
84
  }
package/dist/native/index.cjs CHANGED
@@ -53,31 +53,31 @@ var import_wdk_uikit_react_native = require("@tetherto/wdk-uikit-react-native");
53
53
 
54
54
  // src/tokens/colors.ts
55
55
  var darkSemanticColors = {
56
- background: "#0a0a0a",
57
- foreground: "#fafafa",
58
- border: "#ffffff1a",
59
- input: "#ffffff26",
60
- destructive: "#ff6467",
61
- secondary: "#262626",
62
- secondaryFg: "#fafafa",
63
- muted: "#262626",
64
- mutedFg: "#a1a1a1",
65
- primary: "#e5e5e5",
66
- primaryFg: "#171717",
67
- accent: "#262626",
68
- accentFg: "#fafafa",
69
- ring: "#737373",
70
- card: "#171717",
71
- cardFg: "#fafafa",
72
- popover: "#171717",
73
- popoverFg: "#fafafa",
74
- chart1: "#1447e6",
75
- chart2: "#00bc7d",
76
- chart3: "#fe9a00",
77
- chart4: "#ad46ff",
78
- chart5: "#ff2056",
79
- semanticBackground: "#272625",
80
- semanticBorder: "#535151"
56
+ background: "hsl(158 58% 7%)",
57
+ foreground: "#ffffff",
58
+ border: "hsl(150 20% 24%)",
59
+ input: "rgba(255, 255, 255, 0.15)",
60
+ destructive: "hsl(0 62% 50%)",
61
+ secondary: "hsl(154 26% 17%)",
62
+ secondaryFg: "#ffffff",
63
+ muted: "hsl(156 32% 12%)",
64
+ mutedFg: "rgba(255, 255, 255, 0.55)",
65
+ primary: "#2BEE79",
66
+ primaryFg: "#051B10",
67
+ accent: "hsl(154 26% 17%)",
68
+ accentFg: "#ffffff",
69
+ ring: "#2BEE79",
70
+ card: "hsl(156 32% 12%)",
71
+ cardFg: "#ffffff",
72
+ popover: "hsl(154 26% 17%)",
73
+ popoverFg: "#ffffff",
74
+ chart1: "#2BEE79",
75
+ chart2: "#F6C343",
76
+ chart3: "#F7931A",
77
+ chart4: "#7C3AED",
78
+ chart5: "#DD352E",
79
+ semanticBackground: "hsl(156 32% 12%)",
80
+ semanticBorder: "hsl(150 20% 24%)"
81
81
  };
82
82
  var colors = {
83
83
  ...darkSemanticColors,
package/dist/native/index.d.cts CHANGED
@@ -9,26 +9,26 @@ export { AmountInput, AssetSelector, Balance, CryptoAddressInput, NetworkSelecto
9
9
  * <ThemeProvider brandConfig={kaleidoswapBrandConfig}>
10
10
  */
11
11
  declare const kaleidoswapBrandConfig: {
12
- primaryColor: "#e5e5e5";
13
- secondaryColor: "#262626";
12
+ primaryColor: "#2BEE79";
13
+ secondaryColor: "hsl(154 26% 17%)";
14
14
  };
15
15
  /**
16
16
  * Full custom theme tokens for more granular control.
17
17
  */
18
18
  declare const kaleidoswapTokens: {
19
19
  readonly colors: {
20
- readonly primary: "#e5e5e5";
21
- readonly primaryFg: "#171717";
22
- readonly background: "#0a0a0a";
23
- readonly surface: "#171717";
24
- readonly surfaceHighlight: "#262626";
25
- readonly border: "#ffffff1a";
26
- readonly textPrimary: "#fafafa";
27
- readonly textSecondary: "#a1a1a1";
28
- readonly success: "#e5e5e5";
29
- readonly warning: "#fe9a00";
30
- readonly error: "#ff6467";
31
- readonly info: "#1447e6";
20
+ readonly primary: "#2BEE79";
21
+ readonly primaryFg: "#051B10";
22
+ readonly background: "hsl(158 58% 7%)";
23
+ readonly surface: "hsl(156 32% 12%)";
24
+ readonly surfaceHighlight: "hsl(154 26% 17%)";
25
+ readonly border: "hsl(150 20% 24%)";
26
+ readonly textPrimary: "#ffffff";
27
+ readonly textSecondary: "rgba(255, 255, 255, 0.55)";
28
+ readonly success: "#2BEE79";
29
+ readonly warning: "#F7931A";
30
+ readonly error: "hsl(0 62% 50%)";
31
+ readonly info: "#2BEE79";
32
32
  readonly network: {
33
33
  readonly bitcoin: "#F7931A";
34
34
  readonly rgb: "#DD352E";
@@ -84,9 +84,9 @@ declare const variantConfig: {
84
84
  readonly iconColor: "#60A5FA";
85
85
  };
86
86
  readonly success: {
87
- readonly bg: "#e5e5e51A";
88
- readonly borderColor: "#e5e5e533";
89
- readonly iconColor: "#e5e5e5";
87
+ readonly bg: "#2BEE791A";
88
+ readonly borderColor: "#2BEE7933";
89
+ readonly iconColor: "#2BEE79";
90
90
  };
91
91
  };
92
92
  interface AlertBannerProps {
@@ -103,15 +103,15 @@ interface SectionLabelProps {
103
103
  declare function SectionLabel({ children, style }: SectionLabelProps): react_jsx_runtime.JSX.Element;
104
104
 
105
105
  declare const colors: {
106
- readonly textPrimary: "#fafafa";
107
- readonly textSecondary: "#a1a1a1";
108
- readonly textMuted: "#ffffff1a";
109
- readonly textDimmed: "#737373";
106
+ readonly textPrimary: "#ffffff";
107
+ readonly textSecondary: "rgba(255, 255, 255, 0.55)";
108
+ readonly textMuted: "hsl(150 20% 24%)";
109
+ readonly textDimmed: "#2BEE79";
110
110
  /** Semantic */
111
- readonly success: "#e5e5e5";
112
- readonly warning: "#fe9a00";
113
- readonly error: "#ff6467";
114
- readonly info: "#1447e6";
111
+ readonly success: "#2BEE79";
112
+ readonly warning: "#F7931A";
113
+ readonly error: "hsl(0 62% 50%)";
114
+ readonly info: "#2BEE79";
115
115
  /** Network / Layer */
116
116
  readonly network: {
117
117
  readonly bitcoin: "#F7931A";
@@ -126,31 +126,31 @@ declare const colors: {
126
126
  readonly receive: "#2BEE79";
127
127
  readonly swap: "#4290FF";
128
128
  };
129
- readonly background: "#0a0a0a";
130
- readonly foreground: "#fafafa";
131
- readonly border: "#ffffff1a";
132
- readonly input: "#ffffff26";
133
- readonly destructive: "#ff6467";
134
- readonly secondary: "#262626";
135
- readonly secondaryFg: "#fafafa";
136
- readonly muted: "#262626";
137
- readonly mutedFg: "#a1a1a1";
138
- readonly primary: "#e5e5e5";
139
- readonly primaryFg: "#171717";
140
- readonly accent: "#262626";
141
- readonly accentFg: "#fafafa";
142
- readonly ring: "#737373";
143
- readonly card: "#171717";
144
- readonly cardFg: "#fafafa";
145
- readonly popover: "#171717";
146
- readonly popoverFg: "#fafafa";
147
- readonly chart1: "#1447e6";
148
- readonly chart2: "#00bc7d";
149
- readonly chart3: "#fe9a00";
150
- readonly chart4: "#ad46ff";
151
- readonly chart5: "#ff2056";
152
- readonly semanticBackground: "#272625";
153
- readonly semanticBorder: "#535151";
129
+ readonly background: "hsl(158 58% 7%)";
130
+ readonly foreground: "#ffffff";
131
+ readonly border: "hsl(150 20% 24%)";
132
+ readonly input: "rgba(255, 255, 255, 0.15)";
133
+ readonly destructive: "hsl(0 62% 50%)";
134
+ readonly secondary: "hsl(154 26% 17%)";
135
+ readonly secondaryFg: "#ffffff";
136
+ readonly muted: "hsl(156 32% 12%)";
137
+ readonly mutedFg: "rgba(255, 255, 255, 0.55)";
138
+ readonly primary: "#2BEE79";
139
+ readonly primaryFg: "#051B10";
140
+ readonly accent: "hsl(154 26% 17%)";
141
+ readonly accentFg: "#ffffff";
142
+ readonly ring: "#2BEE79";
143
+ readonly card: "hsl(156 32% 12%)";
144
+ readonly cardFg: "#ffffff";
145
+ readonly popover: "hsl(154 26% 17%)";
146
+ readonly popoverFg: "#ffffff";
147
+ readonly chart1: "#2BEE79";
148
+ readonly chart2: "#F6C343";
149
+ readonly chart3: "#F7931A";
150
+ readonly chart4: "#7C3AED";
151
+ readonly chart5: "#DD352E";
152
+ readonly semanticBackground: "hsl(156 32% 12%)";
153
+ readonly semanticBorder: "hsl(150 20% 24%)";
154
154
  };
155
155
 
156
156
  /**
package/dist/native/index.d.ts CHANGED
@@ -9,26 +9,26 @@ export { AmountInput, AssetSelector, Balance, CryptoAddressInput, NetworkSelecto
9
9
  * <ThemeProvider brandConfig={kaleidoswapBrandConfig}>
10
10
  */
11
11
  declare const kaleidoswapBrandConfig: {
12
- primaryColor: "#e5e5e5";
13
- secondaryColor: "#262626";
12
+ primaryColor: "#2BEE79";
13
+ secondaryColor: "hsl(154 26% 17%)";
14
14
  };
15
15
  /**
16
16
  * Full custom theme tokens for more granular control.
17
17
  */
18
18
  declare const kaleidoswapTokens: {
19
19
  readonly colors: {
20
- readonly primary: "#e5e5e5";
21
- readonly primaryFg: "#171717";
22
- readonly background: "#0a0a0a";
23
- readonly surface: "#171717";
24
- readonly surfaceHighlight: "#262626";
25
- readonly border: "#ffffff1a";
26
- readonly textPrimary: "#fafafa";
27
- readonly textSecondary: "#a1a1a1";
28
- readonly success: "#e5e5e5";
29
- readonly warning: "#fe9a00";
30
- readonly error: "#ff6467";
31
- readonly info: "#1447e6";
20
+ readonly primary: "#2BEE79";
21
+ readonly primaryFg: "#051B10";
22
+ readonly background: "hsl(158 58% 7%)";
23
+ readonly surface: "hsl(156 32% 12%)";
24
+ readonly surfaceHighlight: "hsl(154 26% 17%)";
25
+ readonly border: "hsl(150 20% 24%)";
26
+ readonly textPrimary: "#ffffff";
27
+ readonly textSecondary: "rgba(255, 255, 255, 0.55)";
28
+ readonly success: "#2BEE79";
29
+ readonly warning: "#F7931A";
30
+ readonly error: "hsl(0 62% 50%)";
31
+ readonly info: "#2BEE79";
32
32
  readonly network: {
33
33
  readonly bitcoin: "#F7931A";
34
34
  readonly rgb: "#DD352E";
@@ -84,9 +84,9 @@ declare const variantConfig: {
84
84
  readonly iconColor: "#60A5FA";
85
85
  };
86
86
  readonly success: {
87
- readonly bg: "#e5e5e51A";
88
- readonly borderColor: "#e5e5e533";
89
- readonly iconColor: "#e5e5e5";
87
+ readonly bg: "#2BEE791A";
88
+ readonly borderColor: "#2BEE7933";
89
+ readonly iconColor: "#2BEE79";
90
90
  };
91
91
  };
92
92
  interface AlertBannerProps {
@@ -103,15 +103,15 @@ interface SectionLabelProps {
103
103
  declare function SectionLabel({ children, style }: SectionLabelProps): react_jsx_runtime.JSX.Element;
104
104
 
105
105
  declare const colors: {
106
- readonly textPrimary: "#fafafa";
107
- readonly textSecondary: "#a1a1a1";
108
- readonly textMuted: "#ffffff1a";
109
- readonly textDimmed: "#737373";
106
+ readonly textPrimary: "#ffffff";
107
+ readonly textSecondary: "rgba(255, 255, 255, 0.55)";
108
+ readonly textMuted: "hsl(150 20% 24%)";
109
+ readonly textDimmed: "#2BEE79";
110
110
  /** Semantic */
111
- readonly success: "#e5e5e5";
112
- readonly warning: "#fe9a00";
113
- readonly error: "#ff6467";
114
- readonly info: "#1447e6";
111
+ readonly success: "#2BEE79";
112
+ readonly warning: "#F7931A";
113
+ readonly error: "hsl(0 62% 50%)";
114
+ readonly info: "#2BEE79";
115
115
  /** Network / Layer */
116
116
  readonly network: {
117
117
  readonly bitcoin: "#F7931A";
@@ -126,31 +126,31 @@ declare const colors: {
126
126
  readonly receive: "#2BEE79";
127
127
  readonly swap: "#4290FF";
128
128
  };
129
- readonly background: "#0a0a0a";
130
- readonly foreground: "#fafafa";
131
- readonly border: "#ffffff1a";
132
- readonly input: "#ffffff26";
133
- readonly destructive: "#ff6467";
134
- readonly secondary: "#262626";
135
- readonly secondaryFg: "#fafafa";
136
- readonly muted: "#262626";
137
- readonly mutedFg: "#a1a1a1";
138
- readonly primary: "#e5e5e5";
139
- readonly primaryFg: "#171717";
140
- readonly accent: "#262626";
141
- readonly accentFg: "#fafafa";
142
- readonly ring: "#737373";
143
- readonly card: "#171717";
144
- readonly cardFg: "#fafafa";
145
- readonly popover: "#171717";
146
- readonly popoverFg: "#fafafa";
147
- readonly chart1: "#1447e6";
148
- readonly chart2: "#00bc7d";
149
- readonly chart3: "#fe9a00";
150
- readonly chart4: "#ad46ff";
151
- readonly chart5: "#ff2056";
152
- readonly semanticBackground: "#272625";
153
- readonly semanticBorder: "#535151";
129
+ readonly background: "hsl(158 58% 7%)";
130
+ readonly foreground: "#ffffff";
131
+ readonly border: "hsl(150 20% 24%)";
132
+ readonly input: "rgba(255, 255, 255, 0.15)";
133
+ readonly destructive: "hsl(0 62% 50%)";
134
+ readonly secondary: "hsl(154 26% 17%)";
135
+ readonly secondaryFg: "#ffffff";
136
+ readonly muted: "hsl(156 32% 12%)";
137
+ readonly mutedFg: "rgba(255, 255, 255, 0.55)";
138
+ readonly primary: "#2BEE79";
139
+ readonly primaryFg: "#051B10";
140
+ readonly accent: "hsl(154 26% 17%)";
141
+ readonly accentFg: "#ffffff";
142
+ readonly ring: "#2BEE79";
143
+ readonly card: "hsl(156 32% 12%)";
144
+ readonly cardFg: "#ffffff";
145
+ readonly popover: "hsl(154 26% 17%)";
146
+ readonly popoverFg: "#ffffff";
147
+ readonly chart1: "#2BEE79";
148
+ readonly chart2: "#F6C343";
149
+ readonly chart3: "#F7931A";
150
+ readonly chart4: "#7C3AED";
151
+ readonly chart5: "#DD352E";
152
+ readonly semanticBackground: "hsl(156 32% 12%)";
153
+ readonly semanticBorder: "hsl(150 20% 24%)";
154
154
  };
155
155
 
156
156
  /**
package/dist/native/index.js CHANGED
@@ -3,31 +3,31 @@ import { ThemeProvider } from "@tetherto/wdk-uikit-react-native";
3
3
 
4
4
  // src/tokens/colors.ts
5
5
  var darkSemanticColors = {
6
- background: "#0a0a0a",
7
- foreground: "#fafafa",
8
- border: "#ffffff1a",
9
- input: "#ffffff26",
10
- destructive: "#ff6467",
11
- secondary: "#262626",
12
- secondaryFg: "#fafafa",
13
- muted: "#262626",
14
- mutedFg: "#a1a1a1",
15
- primary: "#e5e5e5",
16
- primaryFg: "#171717",
17
- accent: "#262626",
18
- accentFg: "#fafafa",
19
- ring: "#737373",
20
- card: "#171717",
21
- cardFg: "#fafafa",
22
- popover: "#171717",
23
- popoverFg: "#fafafa",
24
- chart1: "#1447e6",
25
- chart2: "#00bc7d",
26
- chart3: "#fe9a00",
27
- chart4: "#ad46ff",
28
- chart5: "#ff2056",
29
- semanticBackground: "#272625",
30
- semanticBorder: "#535151"
6
+ background: "hsl(158 58% 7%)",
7
+ foreground: "#ffffff",
8
+ border: "hsl(150 20% 24%)",
9
+ input: "rgba(255, 255, 255, 0.15)",
10
+ destructive: "hsl(0 62% 50%)",
11
+ secondary: "hsl(154 26% 17%)",
12
+ secondaryFg: "#ffffff",
13
+ muted: "hsl(156 32% 12%)",
14
+ mutedFg: "rgba(255, 255, 255, 0.55)",
15
+ primary: "#2BEE79",
16
+ primaryFg: "#051B10",
17
+ accent: "hsl(154 26% 17%)",
18
+ accentFg: "#ffffff",
19
+ ring: "#2BEE79",
20
+ card: "hsl(156 32% 12%)",
21
+ cardFg: "#ffffff",
22
+ popover: "hsl(154 26% 17%)",
23
+ popoverFg: "#ffffff",
24
+ chart1: "#2BEE79",
25
+ chart2: "#F6C343",
26
+ chart3: "#F7931A",
27
+ chart4: "#7C3AED",
28
+ chart5: "#DD352E",
29
+ semanticBackground: "hsl(156 32% 12%)",
30
+ semanticBorder: "hsl(150 20% 24%)"
31
31
  };
32
32
  var colors = {
33
33
  ...darkSemanticColors,
package/dist/tailwind/index.cjs CHANGED
@@ -26,31 +26,31 @@ module.exports = __toCommonJS(tailwind_exports);
26
26
 
27
27
  // src/tokens/colors.ts
28
28
  var darkSemanticColors = {
29
- background: "#0a0a0a",
30
- foreground: "#fafafa",
31
- border: "#ffffff1a",
32
- input: "#ffffff26",
33
- destructive: "#ff6467",
34
- secondary: "#262626",
35
- secondaryFg: "#fafafa",
36
- muted: "#262626",
37
- mutedFg: "#a1a1a1",
38
- primary: "#e5e5e5",
39
- primaryFg: "#171717",
40
- accent: "#262626",
41
- accentFg: "#fafafa",
42
- ring: "#737373",
43
- card: "#171717",
44
- cardFg: "#fafafa",
45
- popover: "#171717",
46
- popoverFg: "#fafafa",
47
- chart1: "#1447e6",
48
- chart2: "#00bc7d",
49
- chart3: "#fe9a00",
50
- chart4: "#ad46ff",
51
- chart5: "#ff2056",
52
- semanticBackground: "#272625",
53
- semanticBorder: "#535151"
29
+ background: "hsl(158 58% 7%)",
30
+ foreground: "#ffffff",
31
+ border: "hsl(150 20% 24%)",
32
+ input: "rgba(255, 255, 255, 0.15)",
33
+ destructive: "hsl(0 62% 50%)",
34
+ secondary: "hsl(154 26% 17%)",
35
+ secondaryFg: "#ffffff",
36
+ muted: "hsl(156 32% 12%)",
37
+ mutedFg: "rgba(255, 255, 255, 0.55)",
38
+ primary: "#2BEE79",
39
+ primaryFg: "#051B10",
40
+ accent: "hsl(154 26% 17%)",
41
+ accentFg: "#ffffff",
42
+ ring: "#2BEE79",
43
+ card: "hsl(156 32% 12%)",
44
+ cardFg: "#ffffff",
45
+ popover: "hsl(154 26% 17%)",
46
+ popoverFg: "#ffffff",
47
+ chart1: "#2BEE79",
48
+ chart2: "#F6C343",
49
+ chart3: "#F7931A",
50
+ chart4: "#7C3AED",
51
+ chart5: "#DD352E",
52
+ semanticBackground: "hsl(156 32% 12%)",
53
+ semanticBorder: "hsl(150 20% 24%)"
54
54
  };
55
55
  var colors = {
56
56
  ...darkSemanticColors,
package/dist/tailwind/index.js CHANGED
@@ -1,30 +1,30 @@
1
1
  // src/tokens/colors.ts
2
2
  var darkSemanticColors = {
3
- background: "#0a0a0a",
4
- foreground: "#fafafa",
5
- border: "#ffffff1a",
6
- input: "#ffffff26",
7
- destructive: "#ff6467",
8
- secondary: "#262626",
9
- secondaryFg: "#fafafa",
10
- muted: "#262626",
11
- mutedFg: "#a1a1a1",
12
- primary: "#e5e5e5",
13
- primaryFg: "#171717",
14
- accent: "#262626",
15
- accentFg: "#fafafa",
16
- ring: "#737373",
17
- card: "#171717",
18
- cardFg: "#fafafa",
19
- popover: "#171717",
20
- popoverFg: "#fafafa",
21
- chart1: "#1447e6",
22
- chart2: "#00bc7d",
23
- chart3: "#fe9a00",
24
- chart4: "#ad46ff",
25
- chart5: "#ff2056",
26
- semanticBackground: "#272625",
27
- semanticBorder: "#535151"
3
+ background: "hsl(158 58% 7%)",
4
+ foreground: "#ffffff",
5
+ border: "hsl(150 20% 24%)",
6
+ input: "rgba(255, 255, 255, 0.15)",
7
+ destructive: "hsl(0 62% 50%)",
8
+ secondary: "hsl(154 26% 17%)",
9
+ secondaryFg: "#ffffff",
10
+ muted: "hsl(156 32% 12%)",
11
+ mutedFg: "rgba(255, 255, 255, 0.55)",
12
+ primary: "#2BEE79",
13
+ primaryFg: "#051B10",
14
+ accent: "hsl(154 26% 17%)",
15
+ accentFg: "#ffffff",
16
+ ring: "#2BEE79",
17
+ card: "hsl(156 32% 12%)",
18
+ cardFg: "#ffffff",
19
+ popover: "hsl(154 26% 17%)",
20
+ popoverFg: "#ffffff",
21
+ chart1: "#2BEE79",
22
+ chart2: "#F6C343",
23
+ chart3: "#F7931A",
24
+ chart4: "#7C3AED",
25
+ chart5: "#DD352E",
26
+ semanticBackground: "hsl(156 32% 12%)",
27
+ semanticBorder: "hsl(150 20% 24%)"
28
28
  };
29
29
  var colors = {
30
30
  ...darkSemanticColors,
package/dist/tokens/index.cjs CHANGED
@@ -32,31 +32,31 @@ module.exports = __toCommonJS(tokens_exports);
32
32
 
33
33
  // src/tokens/colors.ts
34
34
  var darkSemanticColors = {
35
- background: "#0a0a0a",
36
- foreground: "#fafafa",
37
- border: "#ffffff1a",
38
- input: "#ffffff26",
39
- destructive: "#ff6467",
40
- secondary: "#262626",
41
- secondaryFg: "#fafafa",
42
- muted: "#262626",
43
- mutedFg: "#a1a1a1",
44
- primary: "#e5e5e5",
45
- primaryFg: "#171717",
46
- accent: "#262626",
47
- accentFg: "#fafafa",
48
- ring: "#737373",
49
- card: "#171717",
50
- cardFg: "#fafafa",
51
- popover: "#171717",
52
- popoverFg: "#fafafa",
53
- chart1: "#1447e6",
54
- chart2: "#00bc7d",
55
- chart3: "#fe9a00",
56
- chart4: "#ad46ff",
57
- chart5: "#ff2056",
58
- semanticBackground: "#272625",
59
- semanticBorder: "#535151"
35
+ background: "hsl(158 58% 7%)",
36
+ foreground: "#ffffff",
37
+ border: "hsl(150 20% 24%)",
38
+ input: "rgba(255, 255, 255, 0.15)",
39
+ destructive: "hsl(0 62% 50%)",
40
+ secondary: "hsl(154 26% 17%)",
41
+ secondaryFg: "#ffffff",
42
+ muted: "hsl(156 32% 12%)",
43
+ mutedFg: "rgba(255, 255, 255, 0.55)",
44
+ primary: "#2BEE79",
45
+ primaryFg: "#051B10",
46
+ accent: "hsl(154 26% 17%)",
47
+ accentFg: "#ffffff",
48
+ ring: "#2BEE79",
49
+ card: "hsl(156 32% 12%)",
50
+ cardFg: "#ffffff",
51
+ popover: "hsl(154 26% 17%)",
52
+ popoverFg: "#ffffff",
53
+ chart1: "#2BEE79",
54
+ chart2: "#F6C343",
55
+ chart3: "#F7931A",
56
+ chart4: "#7C3AED",
57
+ chart5: "#DD352E",
58
+ semanticBackground: "hsl(156 32% 12%)",
59
+ semanticBorder: "hsl(150 20% 24%)"
60
60
  };
61
61
  var colors = {
62
62
  ...darkSemanticColors,
package/dist/tokens/index.d.cts CHANGED
@@ -1,13 +1,13 @@
1
1
  declare const colors: {
2
- readonly textPrimary: "#fafafa";
3
- readonly textSecondary: "#a1a1a1";
4
- readonly textMuted: "#ffffff1a";
5
- readonly textDimmed: "#737373";
2
+ readonly textPrimary: "#ffffff";
3
+ readonly textSecondary: "rgba(255, 255, 255, 0.55)";
4
+ readonly textMuted: "hsl(150 20% 24%)";
5
+ readonly textDimmed: "#2BEE79";
6
6
  /** Semantic */
7
- readonly success: "#e5e5e5";
8
- readonly warning: "#fe9a00";
9
- readonly error: "#ff6467";
10
- readonly info: "#1447e6";
7
+ readonly success: "#2BEE79";
8
+ readonly warning: "#F7931A";
9
+ readonly error: "hsl(0 62% 50%)";
10
+ readonly info: "#2BEE79";
11
11
  /** Network / Layer */
12
12
  readonly network: {
13
13
  readonly bitcoin: "#F7931A";
@@ -22,31 +22,31 @@ declare const colors: {
22
22
  readonly receive: "#2BEE79";
23
23
  readonly swap: "#4290FF";
24
24
  };
25
- readonly background: "#0a0a0a";
26
- readonly foreground: "#fafafa";
27
- readonly border: "#ffffff1a";
28
- readonly input: "#ffffff26";
29
- readonly destructive: "#ff6467";
30
- readonly secondary: "#262626";
31
- readonly secondaryFg: "#fafafa";
32
- readonly muted: "#262626";
33
- readonly mutedFg: "#a1a1a1";
34
- readonly primary: "#e5e5e5";
35
- readonly primaryFg: "#171717";
36
- readonly accent: "#262626";
37
- readonly accentFg: "#fafafa";
38
- readonly ring: "#737373";
39
- readonly card: "#171717";
40
- readonly cardFg: "#fafafa";
41
- readonly popover: "#171717";
42
- readonly popoverFg: "#fafafa";
43
- readonly chart1: "#1447e6";
44
- readonly chart2: "#00bc7d";
45
- readonly chart3: "#fe9a00";
46
- readonly chart4: "#ad46ff";
47
- readonly chart5: "#ff2056";
48
- readonly semanticBackground: "#272625";
49
- readonly semanticBorder: "#535151";
25
+ readonly background: "hsl(158 58% 7%)";
26
+ readonly foreground: "#ffffff";
27
+ readonly border: "hsl(150 20% 24%)";
28
+ readonly input: "rgba(255, 255, 255, 0.15)";
29
+ readonly destructive: "hsl(0 62% 50%)";
30
+ readonly secondary: "hsl(154 26% 17%)";
31
+ readonly secondaryFg: "#ffffff";
32
+ readonly muted: "hsl(156 32% 12%)";
33
+ readonly mutedFg: "rgba(255, 255, 255, 0.55)";
34
+ readonly primary: "#2BEE79";
35
+ readonly primaryFg: "#051B10";
36
+ readonly accent: "hsl(154 26% 17%)";
37
+ readonly accentFg: "#ffffff";
38
+ readonly ring: "#2BEE79";
39
+ readonly card: "hsl(156 32% 12%)";
40
+ readonly cardFg: "#ffffff";
41
+ readonly popover: "hsl(154 26% 17%)";
42
+ readonly popoverFg: "#ffffff";
43
+ readonly chart1: "#2BEE79";
44
+ readonly chart2: "#F6C343";
45
+ readonly chart3: "#F7931A";
46
+ readonly chart4: "#7C3AED";
47
+ readonly chart5: "#DD352E";
48
+ readonly semanticBackground: "hsl(156 32% 12%)";
49
+ readonly semanticBorder: "hsl(150 20% 24%)";
50
50
  };
51
51
 
52
52
  /**
package/dist/tokens/index.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  declare const colors: {
2
- readonly textPrimary: "#fafafa";
3
- readonly textSecondary: "#a1a1a1";
4
- readonly textMuted: "#ffffff1a";
5
- readonly textDimmed: "#737373";
2
+ readonly textPrimary: "#ffffff";
3
+ readonly textSecondary: "rgba(255, 255, 255, 0.55)";
4
+ readonly textMuted: "hsl(150 20% 24%)";
5
+ readonly textDimmed: "#2BEE79";
6
6
  /** Semantic */
7
- readonly success: "#e5e5e5";
8
- readonly warning: "#fe9a00";
9
- readonly error: "#ff6467";
10
- readonly info: "#1447e6";
7
+ readonly success: "#2BEE79";
8
+ readonly warning: "#F7931A";
9
+ readonly error: "hsl(0 62% 50%)";
10
+ readonly info: "#2BEE79";
11
11
  /** Network / Layer */
12
12
  readonly network: {
13
13
  readonly bitcoin: "#F7931A";
@@ -22,31 +22,31 @@ declare const colors: {
22
22
  readonly receive: "#2BEE79";
23
23
  readonly swap: "#4290FF";
24
24
  };
25
- readonly background: "#0a0a0a";
26
- readonly foreground: "#fafafa";
27
- readonly border: "#ffffff1a";
28
- readonly input: "#ffffff26";
29
- readonly destructive: "#ff6467";
30
- readonly secondary: "#262626";
31
- readonly secondaryFg: "#fafafa";
32
- readonly muted: "#262626";
33
- readonly mutedFg: "#a1a1a1";
34
- readonly primary: "#e5e5e5";
35
- readonly primaryFg: "#171717";
36
- readonly accent: "#262626";
37
- readonly accentFg: "#fafafa";
38
- readonly ring: "#737373";
39
- readonly card: "#171717";
40
- readonly cardFg: "#fafafa";
41
- readonly popover: "#171717";
42
- readonly popoverFg: "#fafafa";
43
- readonly chart1: "#1447e6";
44
- readonly chart2: "#00bc7d";
45
- readonly chart3: "#fe9a00";
46
- readonly chart4: "#ad46ff";
47
- readonly chart5: "#ff2056";
48
- readonly semanticBackground: "#272625";
49
- readonly semanticBorder: "#535151";
25
+ readonly background: "hsl(158 58% 7%)";
26
+ readonly foreground: "#ffffff";
27
+ readonly border: "hsl(150 20% 24%)";
28
+ readonly input: "rgba(255, 255, 255, 0.15)";
29
+ readonly destructive: "hsl(0 62% 50%)";
30
+ readonly secondary: "hsl(154 26% 17%)";
31
+ readonly secondaryFg: "#ffffff";
32
+ readonly muted: "hsl(156 32% 12%)";
33
+ readonly mutedFg: "rgba(255, 255, 255, 0.55)";
34
+ readonly primary: "#2BEE79";
35
+ readonly primaryFg: "#051B10";
36
+ readonly accent: "hsl(154 26% 17%)";
37
+ readonly accentFg: "#ffffff";
38
+ readonly ring: "#2BEE79";
39
+ readonly card: "hsl(156 32% 12%)";
40
+ readonly cardFg: "#ffffff";
41
+ readonly popover: "hsl(154 26% 17%)";
42
+ readonly popoverFg: "#ffffff";
43
+ readonly chart1: "#2BEE79";
44
+ readonly chart2: "#F6C343";
45
+ readonly chart3: "#F7931A";
46
+ readonly chart4: "#7C3AED";
47
+ readonly chart5: "#DD352E";
48
+ readonly semanticBackground: "hsl(156 32% 12%)";
49
+ readonly semanticBorder: "hsl(150 20% 24%)";
50
50
  };
51
51
 
52
52
  /**
package/dist/tokens/index.js CHANGED
@@ -1,30 +1,30 @@
1
1
  // src/tokens/colors.ts
2
2
  var darkSemanticColors = {
3
- background: "#0a0a0a",
4
- foreground: "#fafafa",
5
- border: "#ffffff1a",
6
- input: "#ffffff26",
7
- destructive: "#ff6467",
8
- secondary: "#262626",
9
- secondaryFg: "#fafafa",
10
- muted: "#262626",
11
- mutedFg: "#a1a1a1",
12
- primary: "#e5e5e5",
13
- primaryFg: "#171717",
14
- accent: "#262626",
15
- accentFg: "#fafafa",
16
- ring: "#737373",
17
- card: "#171717",
18
- cardFg: "#fafafa",
19
- popover: "#171717",
20
- popoverFg: "#fafafa",
21
- chart1: "#1447e6",
22
- chart2: "#00bc7d",
23
- chart3: "#fe9a00",
24
- chart4: "#ad46ff",
25
- chart5: "#ff2056",
26
- semanticBackground: "#272625",
27
- semanticBorder: "#535151"
3
+ background: "hsl(158 58% 7%)",
4
+ foreground: "#ffffff",
5
+ border: "hsl(150 20% 24%)",
6
+ input: "rgba(255, 255, 255, 0.15)",
7
+ destructive: "hsl(0 62% 50%)",
8
+ secondary: "hsl(154 26% 17%)",
9
+ secondaryFg: "#ffffff",
10
+ muted: "hsl(156 32% 12%)",
11
+ mutedFg: "rgba(255, 255, 255, 0.55)",
12
+ primary: "#2BEE79",
13
+ primaryFg: "#051B10",
14
+ accent: "hsl(154 26% 17%)",
15
+ accentFg: "#ffffff",
16
+ ring: "#2BEE79",
17
+ card: "hsl(156 32% 12%)",
18
+ cardFg: "#ffffff",
19
+ popover: "hsl(154 26% 17%)",
20
+ popoverFg: "#ffffff",
21
+ chart1: "#2BEE79",
22
+ chart2: "#F6C343",
23
+ chart3: "#F7931A",
24
+ chart4: "#7C3AED",
25
+ chart5: "#DD352E",
26
+ semanticBackground: "hsl(156 32% 12%)",
27
+ semanticBorder: "hsl(150 20% 24%)"
28
28
  };
29
29
  var colors = {
30
30
  ...darkSemanticColors,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
5
5
  "license": "MIT",
6
6
  "type": "module",