kaleido-ui 0.1.56 → 0.1.58
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.
- package/dist/css/kaleido-ui.css +7 -7
- package/dist/native/fonts/Satoshi-Bold.ttf +0 -0
- package/dist/native/fonts/Satoshi-Medium.ttf +0 -0
- package/dist/native/fonts/Satoshi-Regular.ttf +0 -0
- package/dist/native/fonts.cjs +64 -0
- package/dist/native/fonts.d.cts +23 -0
- package/dist/native/fonts.d.ts +23 -0
- package/dist/native/fonts.js +28 -0
- package/dist/native/index.cjs +9 -9
- package/dist/native/index.d.cts +15 -15
- package/dist/native/index.d.ts +15 -15
- package/dist/native/index.js +9 -9
- package/dist/tokens/index.cjs +9 -9
- package/dist/tokens/index.d.cts +10 -10
- package/dist/tokens/index.d.ts +10 -10
- package/dist/tokens/index.js +9 -9
- package/dist/web/index.cjs +9 -9
- package/dist/web/index.js +9 -9
- package/package.json +7 -2
package/dist/css/kaleido-ui.css
CHANGED
|
@@ -53,22 +53,22 @@
|
|
|
53
53
|
|
|
54
54
|
/* ── Semantic colors (dark mode) — from src/tokens/colors.ts ───────────── */
|
|
55
55
|
.dark {
|
|
56
|
-
--background:
|
|
56
|
+
--background: #0A1326;
|
|
57
57
|
--foreground: #ffffff;
|
|
58
|
-
--card:
|
|
58
|
+
--card: #0F1C33;
|
|
59
59
|
--card-foreground: #ffffff;
|
|
60
|
-
--popover:
|
|
60
|
+
--popover: #16273F;
|
|
61
61
|
--popover-foreground: #ffffff;
|
|
62
62
|
--primary: #2BEE79;
|
|
63
63
|
--primary-foreground: #051B10;
|
|
64
|
-
--secondary:
|
|
64
|
+
--secondary: #16273F;
|
|
65
65
|
--secondary-foreground: #ffffff;
|
|
66
|
-
--muted:
|
|
66
|
+
--muted: #0F1C33;
|
|
67
67
|
--muted-foreground: rgba(255, 255, 255, 0.55);
|
|
68
|
-
--accent:
|
|
68
|
+
--accent: #16273F;
|
|
69
69
|
--accent-foreground: #ffffff;
|
|
70
70
|
--destructive: hsl(0 62% 50%);
|
|
71
|
-
--border:
|
|
71
|
+
--border: rgba(255, 255, 255, 0.10);
|
|
72
72
|
--input: rgba(255, 255, 255, 0.15);
|
|
73
73
|
--ring: #2BEE79;
|
|
74
74
|
--chart-1: #2BEE79;
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var fonts_exports = {};
|
|
30
|
+
__export(fonts_exports, {
|
|
31
|
+
kaleidoFonts: () => kaleidoFonts,
|
|
32
|
+
satoshiFamilyForWeight: () => satoshiFamilyForWeight,
|
|
33
|
+
satoshiFontFamily: () => satoshiFontFamily
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(fonts_exports);
|
|
36
|
+
var import_Satoshi_Regular = __toESM(require("./fonts/Satoshi-Regular.ttf"), 1);
|
|
37
|
+
var import_Satoshi_Medium = __toESM(require("./fonts/Satoshi-Medium.ttf"), 1);
|
|
38
|
+
var import_Satoshi_Bold = __toESM(require("./fonts/Satoshi-Bold.ttf"), 1);
|
|
39
|
+
const kaleidoFonts = {
|
|
40
|
+
"Satoshi-Regular": import_Satoshi_Regular.default,
|
|
41
|
+
"Satoshi-Medium": import_Satoshi_Medium.default,
|
|
42
|
+
"Satoshi-Bold": import_Satoshi_Bold.default
|
|
43
|
+
};
|
|
44
|
+
const satoshiFontFamily = {
|
|
45
|
+
regular: "Satoshi-Regular",
|
|
46
|
+
medium: "Satoshi-Medium",
|
|
47
|
+
/** No dedicated 600 face ships — semibold maps onto the bold cut. */
|
|
48
|
+
semibold: "Satoshi-Bold",
|
|
49
|
+
bold: "Satoshi-Bold"
|
|
50
|
+
};
|
|
51
|
+
function satoshiFamilyForWeight(weight) {
|
|
52
|
+
if (weight === "bold") return satoshiFontFamily.bold;
|
|
53
|
+
const n = typeof weight === "number" ? weight : Number(weight);
|
|
54
|
+
if (!Number.isFinite(n)) return satoshiFontFamily.regular;
|
|
55
|
+
if (n >= 600) return satoshiFontFamily.bold;
|
|
56
|
+
if (n >= 500) return satoshiFontFamily.medium;
|
|
57
|
+
return satoshiFontFamily.regular;
|
|
58
|
+
}
|
|
59
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
60
|
+
0 && (module.exports = {
|
|
61
|
+
kaleidoFonts,
|
|
62
|
+
satoshiFamilyForWeight,
|
|
63
|
+
satoshiFontFamily
|
|
64
|
+
});
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Asset map keyed by the family name to register the font under. Pass straight
|
|
3
|
+
* to `expo-font`'s `useFonts` / `Font.loadAsync`. Each key becomes the string
|
|
4
|
+
* you use as `fontFamily` in styles (identical on iOS and Android).
|
|
5
|
+
*/
|
|
6
|
+
declare const kaleidoFonts: Record<string, number>;
|
|
7
|
+
/** Registered Satoshi family names, by semantic weight. */
|
|
8
|
+
declare const satoshiFontFamily: {
|
|
9
|
+
readonly regular: "Satoshi-Regular";
|
|
10
|
+
readonly medium: "Satoshi-Medium";
|
|
11
|
+
/** No dedicated 600 face ships — semibold maps onto the bold cut. */
|
|
12
|
+
readonly semibold: "Satoshi-Bold";
|
|
13
|
+
readonly bold: "Satoshi-Bold";
|
|
14
|
+
};
|
|
15
|
+
type SatoshiWeightName = keyof typeof satoshiFontFamily;
|
|
16
|
+
/**
|
|
17
|
+
* Resolve the Satoshi family that best matches an RN `fontWeight` value.
|
|
18
|
+
* RN won't synthesize weight from a single custom family (especially on
|
|
19
|
+
* Android), so weight must be expressed by picking the matching face.
|
|
20
|
+
*/
|
|
21
|
+
declare function satoshiFamilyForWeight(weight?: string | number): string;
|
|
22
|
+
|
|
23
|
+
export { type SatoshiWeightName, kaleidoFonts, satoshiFamilyForWeight, satoshiFontFamily };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Asset map keyed by the family name to register the font under. Pass straight
|
|
3
|
+
* to `expo-font`'s `useFonts` / `Font.loadAsync`. Each key becomes the string
|
|
4
|
+
* you use as `fontFamily` in styles (identical on iOS and Android).
|
|
5
|
+
*/
|
|
6
|
+
declare const kaleidoFonts: Record<string, number>;
|
|
7
|
+
/** Registered Satoshi family names, by semantic weight. */
|
|
8
|
+
declare const satoshiFontFamily: {
|
|
9
|
+
readonly regular: "Satoshi-Regular";
|
|
10
|
+
readonly medium: "Satoshi-Medium";
|
|
11
|
+
/** No dedicated 600 face ships — semibold maps onto the bold cut. */
|
|
12
|
+
readonly semibold: "Satoshi-Bold";
|
|
13
|
+
readonly bold: "Satoshi-Bold";
|
|
14
|
+
};
|
|
15
|
+
type SatoshiWeightName = keyof typeof satoshiFontFamily;
|
|
16
|
+
/**
|
|
17
|
+
* Resolve the Satoshi family that best matches an RN `fontWeight` value.
|
|
18
|
+
* RN won't synthesize weight from a single custom family (especially on
|
|
19
|
+
* Android), so weight must be expressed by picking the matching face.
|
|
20
|
+
*/
|
|
21
|
+
declare function satoshiFamilyForWeight(weight?: string | number): string;
|
|
22
|
+
|
|
23
|
+
export { type SatoshiWeightName, kaleidoFonts, satoshiFamilyForWeight, satoshiFontFamily };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import SatoshiRegular from "./fonts/Satoshi-Regular.ttf";
|
|
2
|
+
import SatoshiMedium from "./fonts/Satoshi-Medium.ttf";
|
|
3
|
+
import SatoshiBold from "./fonts/Satoshi-Bold.ttf";
|
|
4
|
+
const kaleidoFonts = {
|
|
5
|
+
"Satoshi-Regular": SatoshiRegular,
|
|
6
|
+
"Satoshi-Medium": SatoshiMedium,
|
|
7
|
+
"Satoshi-Bold": SatoshiBold
|
|
8
|
+
};
|
|
9
|
+
const satoshiFontFamily = {
|
|
10
|
+
regular: "Satoshi-Regular",
|
|
11
|
+
medium: "Satoshi-Medium",
|
|
12
|
+
/** No dedicated 600 face ships — semibold maps onto the bold cut. */
|
|
13
|
+
semibold: "Satoshi-Bold",
|
|
14
|
+
bold: "Satoshi-Bold"
|
|
15
|
+
};
|
|
16
|
+
function satoshiFamilyForWeight(weight) {
|
|
17
|
+
if (weight === "bold") return satoshiFontFamily.bold;
|
|
18
|
+
const n = typeof weight === "number" ? weight : Number(weight);
|
|
19
|
+
if (!Number.isFinite(n)) return satoshiFontFamily.regular;
|
|
20
|
+
if (n >= 600) return satoshiFontFamily.bold;
|
|
21
|
+
if (n >= 500) return satoshiFontFamily.medium;
|
|
22
|
+
return satoshiFontFamily.regular;
|
|
23
|
+
}
|
|
24
|
+
export {
|
|
25
|
+
kaleidoFonts,
|
|
26
|
+
satoshiFamilyForWeight,
|
|
27
|
+
satoshiFontFamily
|
|
28
|
+
};
|
package/dist/native/index.cjs
CHANGED
|
@@ -81,31 +81,31 @@ var import_wdk_uikit_react_native = require("@tetherto/wdk-uikit-react-native");
|
|
|
81
81
|
|
|
82
82
|
// src/tokens/colors.ts
|
|
83
83
|
var darkSemanticColors = {
|
|
84
|
-
background: "
|
|
84
|
+
background: "#0A1326",
|
|
85
85
|
foreground: "#ffffff",
|
|
86
|
-
border: "
|
|
86
|
+
border: "rgba(255, 255, 255, 0.10)",
|
|
87
87
|
input: "rgba(255, 255, 255, 0.15)",
|
|
88
88
|
destructive: "hsl(0 62% 50%)",
|
|
89
|
-
secondary: "
|
|
89
|
+
secondary: "#16273F",
|
|
90
90
|
secondaryFg: "#ffffff",
|
|
91
|
-
muted: "
|
|
91
|
+
muted: "#0F1C33",
|
|
92
92
|
mutedFg: "rgba(255, 255, 255, 0.55)",
|
|
93
93
|
primary: "#2BEE79",
|
|
94
94
|
primaryFg: "#051B10",
|
|
95
|
-
accent: "
|
|
95
|
+
accent: "#16273F",
|
|
96
96
|
accentFg: "#ffffff",
|
|
97
97
|
ring: "#2BEE79",
|
|
98
|
-
card: "
|
|
98
|
+
card: "#0F1C33",
|
|
99
99
|
cardFg: "#ffffff",
|
|
100
|
-
popover: "
|
|
100
|
+
popover: "#16273F",
|
|
101
101
|
popoverFg: "#ffffff",
|
|
102
102
|
chart1: "#2BEE79",
|
|
103
103
|
chart2: "#F6C343",
|
|
104
104
|
chart3: "#F7931A",
|
|
105
105
|
chart4: "#7C3AED",
|
|
106
106
|
chart5: "#DD352E",
|
|
107
|
-
semanticBackground: "
|
|
108
|
-
semanticBorder: "
|
|
107
|
+
semanticBackground: "#0F1C33",
|
|
108
|
+
semanticBorder: "rgba(255, 255, 255, 0.10)"
|
|
109
109
|
};
|
|
110
110
|
var colors = {
|
|
111
111
|
...darkSemanticColors,
|
package/dist/native/index.d.cts
CHANGED
|
@@ -11,7 +11,7 @@ import { TextProps, ViewProps, PressableProps, ViewStyle } from 'react-native';
|
|
|
11
11
|
*/
|
|
12
12
|
declare const kaleidoswapBrandConfig: {
|
|
13
13
|
primaryColor: "#2BEE79";
|
|
14
|
-
secondaryColor: "
|
|
14
|
+
secondaryColor: "#16273F";
|
|
15
15
|
};
|
|
16
16
|
/**
|
|
17
17
|
* Full custom theme tokens for more granular control.
|
|
@@ -20,10 +20,10 @@ declare const kaleidoswapTokens: {
|
|
|
20
20
|
readonly colors: {
|
|
21
21
|
readonly primary: "#2BEE79";
|
|
22
22
|
readonly primaryFg: "#051B10";
|
|
23
|
-
readonly background: "
|
|
24
|
-
readonly surface: "
|
|
25
|
-
readonly surfaceHighlight: "
|
|
26
|
-
readonly border: "
|
|
23
|
+
readonly background: "#0A1326";
|
|
24
|
+
readonly surface: "#0F1C33";
|
|
25
|
+
readonly surfaceHighlight: "#16273F";
|
|
26
|
+
readonly border: "rgba(255, 255, 255, 0.10)";
|
|
27
27
|
readonly textPrimary: "#ffffff";
|
|
28
28
|
readonly textSecondary: "rgba(255, 255, 255, 0.55)";
|
|
29
29
|
readonly success: "#2BEE79";
|
|
@@ -420,7 +420,7 @@ declare function ModeToggle({ icon, size, onToggle }: ModeToggleProps): react_js
|
|
|
420
420
|
declare const colors: {
|
|
421
421
|
readonly textPrimary: "#ffffff";
|
|
422
422
|
readonly textSecondary: "rgba(255, 255, 255, 0.55)";
|
|
423
|
-
readonly textMuted: "
|
|
423
|
+
readonly textMuted: "rgba(255, 255, 255, 0.10)";
|
|
424
424
|
readonly textDimmed: "#2BEE79";
|
|
425
425
|
/** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
|
|
426
426
|
readonly success: "#2BEE79";
|
|
@@ -499,31 +499,31 @@ declare const colors: {
|
|
|
499
499
|
readonly receive: "#2BEE79";
|
|
500
500
|
readonly swap: "#4290FF";
|
|
501
501
|
};
|
|
502
|
-
readonly background: "
|
|
502
|
+
readonly background: "#0A1326";
|
|
503
503
|
readonly foreground: "#ffffff";
|
|
504
|
-
readonly border: "
|
|
504
|
+
readonly border: "rgba(255, 255, 255, 0.10)";
|
|
505
505
|
readonly input: "rgba(255, 255, 255, 0.15)";
|
|
506
506
|
readonly destructive: "hsl(0 62% 50%)";
|
|
507
|
-
readonly secondary: "
|
|
507
|
+
readonly secondary: "#16273F";
|
|
508
508
|
readonly secondaryFg: "#ffffff";
|
|
509
|
-
readonly muted: "
|
|
509
|
+
readonly muted: "#0F1C33";
|
|
510
510
|
readonly mutedFg: "rgba(255, 255, 255, 0.55)";
|
|
511
511
|
readonly primary: "#2BEE79";
|
|
512
512
|
readonly primaryFg: "#051B10";
|
|
513
|
-
readonly accent: "
|
|
513
|
+
readonly accent: "#16273F";
|
|
514
514
|
readonly accentFg: "#ffffff";
|
|
515
515
|
readonly ring: "#2BEE79";
|
|
516
|
-
readonly card: "
|
|
516
|
+
readonly card: "#0F1C33";
|
|
517
517
|
readonly cardFg: "#ffffff";
|
|
518
|
-
readonly popover: "
|
|
518
|
+
readonly popover: "#16273F";
|
|
519
519
|
readonly popoverFg: "#ffffff";
|
|
520
520
|
readonly chart1: "#2BEE79";
|
|
521
521
|
readonly chart2: "#F6C343";
|
|
522
522
|
readonly chart3: "#F7931A";
|
|
523
523
|
readonly chart4: "#7C3AED";
|
|
524
524
|
readonly chart5: "#DD352E";
|
|
525
|
-
readonly semanticBackground: "
|
|
526
|
-
readonly semanticBorder: "
|
|
525
|
+
readonly semanticBackground: "#0F1C33";
|
|
526
|
+
readonly semanticBorder: "rgba(255, 255, 255, 0.10)";
|
|
527
527
|
};
|
|
528
528
|
|
|
529
529
|
/**
|
package/dist/native/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ import { TextProps, ViewProps, PressableProps, ViewStyle } from 'react-native';
|
|
|
11
11
|
*/
|
|
12
12
|
declare const kaleidoswapBrandConfig: {
|
|
13
13
|
primaryColor: "#2BEE79";
|
|
14
|
-
secondaryColor: "
|
|
14
|
+
secondaryColor: "#16273F";
|
|
15
15
|
};
|
|
16
16
|
/**
|
|
17
17
|
* Full custom theme tokens for more granular control.
|
|
@@ -20,10 +20,10 @@ declare const kaleidoswapTokens: {
|
|
|
20
20
|
readonly colors: {
|
|
21
21
|
readonly primary: "#2BEE79";
|
|
22
22
|
readonly primaryFg: "#051B10";
|
|
23
|
-
readonly background: "
|
|
24
|
-
readonly surface: "
|
|
25
|
-
readonly surfaceHighlight: "
|
|
26
|
-
readonly border: "
|
|
23
|
+
readonly background: "#0A1326";
|
|
24
|
+
readonly surface: "#0F1C33";
|
|
25
|
+
readonly surfaceHighlight: "#16273F";
|
|
26
|
+
readonly border: "rgba(255, 255, 255, 0.10)";
|
|
27
27
|
readonly textPrimary: "#ffffff";
|
|
28
28
|
readonly textSecondary: "rgba(255, 255, 255, 0.55)";
|
|
29
29
|
readonly success: "#2BEE79";
|
|
@@ -420,7 +420,7 @@ declare function ModeToggle({ icon, size, onToggle }: ModeToggleProps): react_js
|
|
|
420
420
|
declare const colors: {
|
|
421
421
|
readonly textPrimary: "#ffffff";
|
|
422
422
|
readonly textSecondary: "rgba(255, 255, 255, 0.55)";
|
|
423
|
-
readonly textMuted: "
|
|
423
|
+
readonly textMuted: "rgba(255, 255, 255, 0.10)";
|
|
424
424
|
readonly textDimmed: "#2BEE79";
|
|
425
425
|
/** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
|
|
426
426
|
readonly success: "#2BEE79";
|
|
@@ -499,31 +499,31 @@ declare const colors: {
|
|
|
499
499
|
readonly receive: "#2BEE79";
|
|
500
500
|
readonly swap: "#4290FF";
|
|
501
501
|
};
|
|
502
|
-
readonly background: "
|
|
502
|
+
readonly background: "#0A1326";
|
|
503
503
|
readonly foreground: "#ffffff";
|
|
504
|
-
readonly border: "
|
|
504
|
+
readonly border: "rgba(255, 255, 255, 0.10)";
|
|
505
505
|
readonly input: "rgba(255, 255, 255, 0.15)";
|
|
506
506
|
readonly destructive: "hsl(0 62% 50%)";
|
|
507
|
-
readonly secondary: "
|
|
507
|
+
readonly secondary: "#16273F";
|
|
508
508
|
readonly secondaryFg: "#ffffff";
|
|
509
|
-
readonly muted: "
|
|
509
|
+
readonly muted: "#0F1C33";
|
|
510
510
|
readonly mutedFg: "rgba(255, 255, 255, 0.55)";
|
|
511
511
|
readonly primary: "#2BEE79";
|
|
512
512
|
readonly primaryFg: "#051B10";
|
|
513
|
-
readonly accent: "
|
|
513
|
+
readonly accent: "#16273F";
|
|
514
514
|
readonly accentFg: "#ffffff";
|
|
515
515
|
readonly ring: "#2BEE79";
|
|
516
|
-
readonly card: "
|
|
516
|
+
readonly card: "#0F1C33";
|
|
517
517
|
readonly cardFg: "#ffffff";
|
|
518
|
-
readonly popover: "
|
|
518
|
+
readonly popover: "#16273F";
|
|
519
519
|
readonly popoverFg: "#ffffff";
|
|
520
520
|
readonly chart1: "#2BEE79";
|
|
521
521
|
readonly chart2: "#F6C343";
|
|
522
522
|
readonly chart3: "#F7931A";
|
|
523
523
|
readonly chart4: "#7C3AED";
|
|
524
524
|
readonly chart5: "#DD352E";
|
|
525
|
-
readonly semanticBackground: "
|
|
526
|
-
readonly semanticBorder: "
|
|
525
|
+
readonly semanticBackground: "#0F1C33";
|
|
526
|
+
readonly semanticBorder: "rgba(255, 255, 255, 0.10)";
|
|
527
527
|
};
|
|
528
528
|
|
|
529
529
|
/**
|
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: "
|
|
6
|
+
background: "#0A1326",
|
|
7
7
|
foreground: "#ffffff",
|
|
8
|
-
border: "
|
|
8
|
+
border: "rgba(255, 255, 255, 0.10)",
|
|
9
9
|
input: "rgba(255, 255, 255, 0.15)",
|
|
10
10
|
destructive: "hsl(0 62% 50%)",
|
|
11
|
-
secondary: "
|
|
11
|
+
secondary: "#16273F",
|
|
12
12
|
secondaryFg: "#ffffff",
|
|
13
|
-
muted: "
|
|
13
|
+
muted: "#0F1C33",
|
|
14
14
|
mutedFg: "rgba(255, 255, 255, 0.55)",
|
|
15
15
|
primary: "#2BEE79",
|
|
16
16
|
primaryFg: "#051B10",
|
|
17
|
-
accent: "
|
|
17
|
+
accent: "#16273F",
|
|
18
18
|
accentFg: "#ffffff",
|
|
19
19
|
ring: "#2BEE79",
|
|
20
|
-
card: "
|
|
20
|
+
card: "#0F1C33",
|
|
21
21
|
cardFg: "#ffffff",
|
|
22
|
-
popover: "
|
|
22
|
+
popover: "#16273F",
|
|
23
23
|
popoverFg: "#ffffff",
|
|
24
24
|
chart1: "#2BEE79",
|
|
25
25
|
chart2: "#F6C343",
|
|
26
26
|
chart3: "#F7931A",
|
|
27
27
|
chart4: "#7C3AED",
|
|
28
28
|
chart5: "#DD352E",
|
|
29
|
-
semanticBackground: "
|
|
30
|
-
semanticBorder: "
|
|
29
|
+
semanticBackground: "#0F1C33",
|
|
30
|
+
semanticBorder: "rgba(255, 255, 255, 0.10)"
|
|
31
31
|
};
|
|
32
32
|
var colors = {
|
|
33
33
|
...darkSemanticColors,
|
package/dist/tokens/index.cjs
CHANGED
|
@@ -69,31 +69,31 @@ var lightSemanticColors = {
|
|
|
69
69
|
chart5: "#DD352E"
|
|
70
70
|
};
|
|
71
71
|
var darkSemanticColors = {
|
|
72
|
-
background: "
|
|
72
|
+
background: "#0A1326",
|
|
73
73
|
foreground: "#ffffff",
|
|
74
|
-
border: "
|
|
74
|
+
border: "rgba(255, 255, 255, 0.10)",
|
|
75
75
|
input: "rgba(255, 255, 255, 0.15)",
|
|
76
76
|
destructive: "hsl(0 62% 50%)",
|
|
77
|
-
secondary: "
|
|
77
|
+
secondary: "#16273F",
|
|
78
78
|
secondaryFg: "#ffffff",
|
|
79
|
-
muted: "
|
|
79
|
+
muted: "#0F1C33",
|
|
80
80
|
mutedFg: "rgba(255, 255, 255, 0.55)",
|
|
81
81
|
primary: "#2BEE79",
|
|
82
82
|
primaryFg: "#051B10",
|
|
83
|
-
accent: "
|
|
83
|
+
accent: "#16273F",
|
|
84
84
|
accentFg: "#ffffff",
|
|
85
85
|
ring: "#2BEE79",
|
|
86
|
-
card: "
|
|
86
|
+
card: "#0F1C33",
|
|
87
87
|
cardFg: "#ffffff",
|
|
88
|
-
popover: "
|
|
88
|
+
popover: "#16273F",
|
|
89
89
|
popoverFg: "#ffffff",
|
|
90
90
|
chart1: "#2BEE79",
|
|
91
91
|
chart2: "#F6C343",
|
|
92
92
|
chart3: "#F7931A",
|
|
93
93
|
chart4: "#7C3AED",
|
|
94
94
|
chart5: "#DD352E",
|
|
95
|
-
semanticBackground: "
|
|
96
|
-
semanticBorder: "
|
|
95
|
+
semanticBackground: "#0F1C33",
|
|
96
|
+
semanticBorder: "rgba(255, 255, 255, 0.10)"
|
|
97
97
|
};
|
|
98
98
|
var colors = {
|
|
99
99
|
...darkSemanticColors,
|
package/dist/tokens/index.d.cts
CHANGED
|
@@ -31,7 +31,7 @@ declare const lightSemanticColors: {
|
|
|
31
31
|
declare const colors: {
|
|
32
32
|
readonly textPrimary: "#ffffff";
|
|
33
33
|
readonly textSecondary: "rgba(255, 255, 255, 0.55)";
|
|
34
|
-
readonly textMuted: "
|
|
34
|
+
readonly textMuted: "rgba(255, 255, 255, 0.10)";
|
|
35
35
|
readonly textDimmed: "#2BEE79";
|
|
36
36
|
/** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
|
|
37
37
|
readonly success: "#2BEE79";
|
|
@@ -110,31 +110,31 @@ declare const colors: {
|
|
|
110
110
|
readonly receive: "#2BEE79";
|
|
111
111
|
readonly swap: "#4290FF";
|
|
112
112
|
};
|
|
113
|
-
readonly background: "
|
|
113
|
+
readonly background: "#0A1326";
|
|
114
114
|
readonly foreground: "#ffffff";
|
|
115
|
-
readonly border: "
|
|
115
|
+
readonly border: "rgba(255, 255, 255, 0.10)";
|
|
116
116
|
readonly input: "rgba(255, 255, 255, 0.15)";
|
|
117
117
|
readonly destructive: "hsl(0 62% 50%)";
|
|
118
|
-
readonly secondary: "
|
|
118
|
+
readonly secondary: "#16273F";
|
|
119
119
|
readonly secondaryFg: "#ffffff";
|
|
120
|
-
readonly muted: "
|
|
120
|
+
readonly muted: "#0F1C33";
|
|
121
121
|
readonly mutedFg: "rgba(255, 255, 255, 0.55)";
|
|
122
122
|
readonly primary: "#2BEE79";
|
|
123
123
|
readonly primaryFg: "#051B10";
|
|
124
|
-
readonly accent: "
|
|
124
|
+
readonly accent: "#16273F";
|
|
125
125
|
readonly accentFg: "#ffffff";
|
|
126
126
|
readonly ring: "#2BEE79";
|
|
127
|
-
readonly card: "
|
|
127
|
+
readonly card: "#0F1C33";
|
|
128
128
|
readonly cardFg: "#ffffff";
|
|
129
|
-
readonly popover: "
|
|
129
|
+
readonly popover: "#16273F";
|
|
130
130
|
readonly popoverFg: "#ffffff";
|
|
131
131
|
readonly chart1: "#2BEE79";
|
|
132
132
|
readonly chart2: "#F6C343";
|
|
133
133
|
readonly chart3: "#F7931A";
|
|
134
134
|
readonly chart4: "#7C3AED";
|
|
135
135
|
readonly chart5: "#DD352E";
|
|
136
|
-
readonly semanticBackground: "
|
|
137
|
-
readonly semanticBorder: "
|
|
136
|
+
readonly semanticBackground: "#0F1C33";
|
|
137
|
+
readonly semanticBorder: "rgba(255, 255, 255, 0.10)";
|
|
138
138
|
};
|
|
139
139
|
|
|
140
140
|
/**
|
package/dist/tokens/index.d.ts
CHANGED
|
@@ -31,7 +31,7 @@ declare const lightSemanticColors: {
|
|
|
31
31
|
declare const colors: {
|
|
32
32
|
readonly textPrimary: "#ffffff";
|
|
33
33
|
readonly textSecondary: "rgba(255, 255, 255, 0.55)";
|
|
34
|
-
readonly textMuted: "
|
|
34
|
+
readonly textMuted: "rgba(255, 255, 255, 0.10)";
|
|
35
35
|
readonly textDimmed: "#2BEE79";
|
|
36
36
|
/** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
|
|
37
37
|
readonly success: "#2BEE79";
|
|
@@ -110,31 +110,31 @@ declare const colors: {
|
|
|
110
110
|
readonly receive: "#2BEE79";
|
|
111
111
|
readonly swap: "#4290FF";
|
|
112
112
|
};
|
|
113
|
-
readonly background: "
|
|
113
|
+
readonly background: "#0A1326";
|
|
114
114
|
readonly foreground: "#ffffff";
|
|
115
|
-
readonly border: "
|
|
115
|
+
readonly border: "rgba(255, 255, 255, 0.10)";
|
|
116
116
|
readonly input: "rgba(255, 255, 255, 0.15)";
|
|
117
117
|
readonly destructive: "hsl(0 62% 50%)";
|
|
118
|
-
readonly secondary: "
|
|
118
|
+
readonly secondary: "#16273F";
|
|
119
119
|
readonly secondaryFg: "#ffffff";
|
|
120
|
-
readonly muted: "
|
|
120
|
+
readonly muted: "#0F1C33";
|
|
121
121
|
readonly mutedFg: "rgba(255, 255, 255, 0.55)";
|
|
122
122
|
readonly primary: "#2BEE79";
|
|
123
123
|
readonly primaryFg: "#051B10";
|
|
124
|
-
readonly accent: "
|
|
124
|
+
readonly accent: "#16273F";
|
|
125
125
|
readonly accentFg: "#ffffff";
|
|
126
126
|
readonly ring: "#2BEE79";
|
|
127
|
-
readonly card: "
|
|
127
|
+
readonly card: "#0F1C33";
|
|
128
128
|
readonly cardFg: "#ffffff";
|
|
129
|
-
readonly popover: "
|
|
129
|
+
readonly popover: "#16273F";
|
|
130
130
|
readonly popoverFg: "#ffffff";
|
|
131
131
|
readonly chart1: "#2BEE79";
|
|
132
132
|
readonly chart2: "#F6C343";
|
|
133
133
|
readonly chart3: "#F7931A";
|
|
134
134
|
readonly chart4: "#7C3AED";
|
|
135
135
|
readonly chart5: "#DD352E";
|
|
136
|
-
readonly semanticBackground: "
|
|
137
|
-
readonly semanticBorder: "
|
|
136
|
+
readonly semanticBackground: "#0F1C33";
|
|
137
|
+
readonly semanticBorder: "rgba(255, 255, 255, 0.10)";
|
|
138
138
|
};
|
|
139
139
|
|
|
140
140
|
/**
|
package/dist/tokens/index.js
CHANGED
|
@@ -25,31 +25,31 @@ var lightSemanticColors = {
|
|
|
25
25
|
chart5: "#DD352E"
|
|
26
26
|
};
|
|
27
27
|
var darkSemanticColors = {
|
|
28
|
-
background: "
|
|
28
|
+
background: "#0A1326",
|
|
29
29
|
foreground: "#ffffff",
|
|
30
|
-
border: "
|
|
30
|
+
border: "rgba(255, 255, 255, 0.10)",
|
|
31
31
|
input: "rgba(255, 255, 255, 0.15)",
|
|
32
32
|
destructive: "hsl(0 62% 50%)",
|
|
33
|
-
secondary: "
|
|
33
|
+
secondary: "#16273F",
|
|
34
34
|
secondaryFg: "#ffffff",
|
|
35
|
-
muted: "
|
|
35
|
+
muted: "#0F1C33",
|
|
36
36
|
mutedFg: "rgba(255, 255, 255, 0.55)",
|
|
37
37
|
primary: "#2BEE79",
|
|
38
38
|
primaryFg: "#051B10",
|
|
39
|
-
accent: "
|
|
39
|
+
accent: "#16273F",
|
|
40
40
|
accentFg: "#ffffff",
|
|
41
41
|
ring: "#2BEE79",
|
|
42
|
-
card: "
|
|
42
|
+
card: "#0F1C33",
|
|
43
43
|
cardFg: "#ffffff",
|
|
44
|
-
popover: "
|
|
44
|
+
popover: "#16273F",
|
|
45
45
|
popoverFg: "#ffffff",
|
|
46
46
|
chart1: "#2BEE79",
|
|
47
47
|
chart2: "#F6C343",
|
|
48
48
|
chart3: "#F7931A",
|
|
49
49
|
chart4: "#7C3AED",
|
|
50
50
|
chart5: "#DD352E",
|
|
51
|
-
semanticBackground: "
|
|
52
|
-
semanticBorder: "
|
|
51
|
+
semanticBackground: "#0F1C33",
|
|
52
|
+
semanticBorder: "rgba(255, 255, 255, 0.10)"
|
|
53
53
|
};
|
|
54
54
|
var colors = {
|
|
55
55
|
...darkSemanticColors,
|
package/dist/web/index.cjs
CHANGED
|
@@ -7138,31 +7138,31 @@ var import_react15 = require("react");
|
|
|
7138
7138
|
|
|
7139
7139
|
// src/tokens/colors.ts
|
|
7140
7140
|
var darkSemanticColors = {
|
|
7141
|
-
background: "
|
|
7141
|
+
background: "#0A1326",
|
|
7142
7142
|
foreground: "#ffffff",
|
|
7143
|
-
border: "
|
|
7143
|
+
border: "rgba(255, 255, 255, 0.10)",
|
|
7144
7144
|
input: "rgba(255, 255, 255, 0.15)",
|
|
7145
7145
|
destructive: "hsl(0 62% 50%)",
|
|
7146
|
-
secondary: "
|
|
7146
|
+
secondary: "#16273F",
|
|
7147
7147
|
secondaryFg: "#ffffff",
|
|
7148
|
-
muted: "
|
|
7148
|
+
muted: "#0F1C33",
|
|
7149
7149
|
mutedFg: "rgba(255, 255, 255, 0.55)",
|
|
7150
7150
|
primary: "#2BEE79",
|
|
7151
7151
|
primaryFg: "#051B10",
|
|
7152
|
-
accent: "
|
|
7152
|
+
accent: "#16273F",
|
|
7153
7153
|
accentFg: "#ffffff",
|
|
7154
7154
|
ring: "#2BEE79",
|
|
7155
|
-
card: "
|
|
7155
|
+
card: "#0F1C33",
|
|
7156
7156
|
cardFg: "#ffffff",
|
|
7157
|
-
popover: "
|
|
7157
|
+
popover: "#16273F",
|
|
7158
7158
|
popoverFg: "#ffffff",
|
|
7159
7159
|
chart1: "#2BEE79",
|
|
7160
7160
|
chart2: "#F6C343",
|
|
7161
7161
|
chart3: "#F7931A",
|
|
7162
7162
|
chart4: "#7C3AED",
|
|
7163
7163
|
chart5: "#DD352E",
|
|
7164
|
-
semanticBackground: "
|
|
7165
|
-
semanticBorder: "
|
|
7164
|
+
semanticBackground: "#0F1C33",
|
|
7165
|
+
semanticBorder: "rgba(255, 255, 255, 0.10)"
|
|
7166
7166
|
};
|
|
7167
7167
|
var colors = {
|
|
7168
7168
|
...darkSemanticColors,
|
package/dist/web/index.js
CHANGED
|
@@ -6961,31 +6961,31 @@ import { useState as useState14 } from "react";
|
|
|
6961
6961
|
|
|
6962
6962
|
// src/tokens/colors.ts
|
|
6963
6963
|
var darkSemanticColors = {
|
|
6964
|
-
background: "
|
|
6964
|
+
background: "#0A1326",
|
|
6965
6965
|
foreground: "#ffffff",
|
|
6966
|
-
border: "
|
|
6966
|
+
border: "rgba(255, 255, 255, 0.10)",
|
|
6967
6967
|
input: "rgba(255, 255, 255, 0.15)",
|
|
6968
6968
|
destructive: "hsl(0 62% 50%)",
|
|
6969
|
-
secondary: "
|
|
6969
|
+
secondary: "#16273F",
|
|
6970
6970
|
secondaryFg: "#ffffff",
|
|
6971
|
-
muted: "
|
|
6971
|
+
muted: "#0F1C33",
|
|
6972
6972
|
mutedFg: "rgba(255, 255, 255, 0.55)",
|
|
6973
6973
|
primary: "#2BEE79",
|
|
6974
6974
|
primaryFg: "#051B10",
|
|
6975
|
-
accent: "
|
|
6975
|
+
accent: "#16273F",
|
|
6976
6976
|
accentFg: "#ffffff",
|
|
6977
6977
|
ring: "#2BEE79",
|
|
6978
|
-
card: "
|
|
6978
|
+
card: "#0F1C33",
|
|
6979
6979
|
cardFg: "#ffffff",
|
|
6980
|
-
popover: "
|
|
6980
|
+
popover: "#16273F",
|
|
6981
6981
|
popoverFg: "#ffffff",
|
|
6982
6982
|
chart1: "#2BEE79",
|
|
6983
6983
|
chart2: "#F6C343",
|
|
6984
6984
|
chart3: "#F7931A",
|
|
6985
6985
|
chart4: "#7C3AED",
|
|
6986
6986
|
chart5: "#DD352E",
|
|
6987
|
-
semanticBackground: "
|
|
6988
|
-
semanticBorder: "
|
|
6987
|
+
semanticBackground: "#0F1C33",
|
|
6988
|
+
semanticBorder: "rgba(255, 255, 255, 0.10)"
|
|
6989
6989
|
};
|
|
6990
6990
|
var colors = {
|
|
6991
6991
|
...darkSemanticColors,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kaleido-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.58",
|
|
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",
|
|
@@ -23,6 +23,11 @@
|
|
|
23
23
|
"import": "./dist/native/index.js",
|
|
24
24
|
"require": "./dist/native/index.cjs"
|
|
25
25
|
},
|
|
26
|
+
"./native/fonts": {
|
|
27
|
+
"types": "./dist/native/fonts.d.ts",
|
|
28
|
+
"import": "./dist/native/fonts.js",
|
|
29
|
+
"require": "./dist/native/fonts.cjs"
|
|
30
|
+
},
|
|
26
31
|
"./css": "./dist/css/kaleido-ui.css"
|
|
27
32
|
},
|
|
28
33
|
"files": [
|
|
@@ -33,7 +38,7 @@
|
|
|
33
38
|
"scripts": {
|
|
34
39
|
"generate:css": "node node_modules/tsx/dist/cli.mjs scripts/generate-css.ts",
|
|
35
40
|
"check:tokens": "node node_modules/tsx/dist/cli.mjs scripts/check-tokens.ts",
|
|
36
|
-
"build": "npm run generate:css && npm run check:tokens && tsup && mkdir -p dist/css && cp src/css/kaleido-ui.css dist/css/kaleido-ui.css",
|
|
41
|
+
"build": "npm run generate:css && npm run check:tokens && tsup && mkdir -p dist/css && cp src/css/kaleido-ui.css dist/css/kaleido-ui.css && mkdir -p dist/native/fonts && cp src/native/fonts/*.ttf dist/native/fonts/",
|
|
37
42
|
"dev": "tsup --watch",
|
|
38
43
|
"showcase": "vite --config showcase/vite.config.ts",
|
|
39
44
|
"showcase:build": "npm run generate:css && vite build --config showcase/vite.config.ts",
|