@encore-os/tokens 0.4.0
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/tokens.css +154 -0
- package/dist/tokens.d.ts +17 -0
- package/dist/tokens.json +2536 -0
- package/dist/tokens.ts +83 -0
- package/package.json +30 -0
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
@theme inline {
|
|
2
|
+
--color-background: var(--background);
|
|
3
|
+
--color-foreground: var(--foreground);
|
|
4
|
+
--color-muted: var(--muted);
|
|
5
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
6
|
+
--color-surface: var(--surface);
|
|
7
|
+
--color-border: var(--border);
|
|
8
|
+
--color-ring: var(--ring);
|
|
9
|
+
--color-primary: var(--primary);
|
|
10
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
11
|
+
--color-secondary: var(--secondary);
|
|
12
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
13
|
+
--color-card: var(--card);
|
|
14
|
+
--color-card-foreground: var(--card-foreground);
|
|
15
|
+
--color-popover: var(--popover);
|
|
16
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
17
|
+
--color-input: var(--input);
|
|
18
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
19
|
+
--color-accent: var(--accent);
|
|
20
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
21
|
+
--color-destructive: var(--destructive);
|
|
22
|
+
--color-success: var(--success);
|
|
23
|
+
--color-warning: var(--warning);
|
|
24
|
+
--color-info: var(--info);
|
|
25
|
+
|
|
26
|
+
--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
27
|
+
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
|
|
28
|
+
--text-xs: 0.75rem;
|
|
29
|
+
--text-sm: 0.875rem;
|
|
30
|
+
--text-base: 1rem;
|
|
31
|
+
--text-lg: 1.125rem;
|
|
32
|
+
--text-xl: 1.25rem;
|
|
33
|
+
--text-2xl: 1.5rem;
|
|
34
|
+
--text-3xl: 1.875rem;
|
|
35
|
+
--text-4xl: 2.25rem;
|
|
36
|
+
--font-weight-normal: 400;
|
|
37
|
+
--font-weight-medium: 500;
|
|
38
|
+
--font-weight-semibold: 600;
|
|
39
|
+
--font-weight-bold: 700;
|
|
40
|
+
--leading-tight: 1.25;
|
|
41
|
+
--leading-snug: 1.375;
|
|
42
|
+
--leading-normal: 1.5;
|
|
43
|
+
--leading-relaxed: 1.625;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:root {
|
|
47
|
+
--background: #f2f5f8;
|
|
48
|
+
--foreground: #0f1624;
|
|
49
|
+
--muted: #e6edf6;
|
|
50
|
+
--muted-foreground: #4c5d76;
|
|
51
|
+
--surface: #ffffff;
|
|
52
|
+
--border: #c8ced8;
|
|
53
|
+
--ring: #0ea5e9;
|
|
54
|
+
--primary: #101f41;
|
|
55
|
+
--primary-foreground: #ffffff;
|
|
56
|
+
--secondary: #f3f5f7;
|
|
57
|
+
--secondary-foreground: #0f1624;
|
|
58
|
+
--card: #ffffff;
|
|
59
|
+
--card-foreground: #0f1624;
|
|
60
|
+
--popover: #ffffff;
|
|
61
|
+
--popover-foreground: #0f1624;
|
|
62
|
+
--input: #c8ced8;
|
|
63
|
+
--destructive-foreground: #f9fafb;
|
|
64
|
+
--accent: #0a7db2;
|
|
65
|
+
--accent-foreground: #ffffff;
|
|
66
|
+
--destructive: #d92626;
|
|
67
|
+
--success: #279b57;
|
|
68
|
+
--warning: #e9980c;
|
|
69
|
+
--info: #0a5adb;
|
|
70
|
+
|
|
71
|
+
--font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
72
|
+
--font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
|
|
73
|
+
--font-size-xs: 0.75rem;
|
|
74
|
+
--font-size-sm: 0.875rem;
|
|
75
|
+
--font-size-base: 1rem;
|
|
76
|
+
--font-size-lg: 1.125rem;
|
|
77
|
+
--font-size-xl: 1.25rem;
|
|
78
|
+
--font-size-2xl: 1.5rem;
|
|
79
|
+
--font-size-3xl: 1.875rem;
|
|
80
|
+
--font-size-4xl: 2.25rem;
|
|
81
|
+
--font-weight-normal: 400;
|
|
82
|
+
--font-weight-medium: 500;
|
|
83
|
+
--font-weight-semibold: 600;
|
|
84
|
+
--font-weight-bold: 700;
|
|
85
|
+
--line-height-tight: 1.25;
|
|
86
|
+
--line-height-snug: 1.375;
|
|
87
|
+
--line-height-normal: 1.5;
|
|
88
|
+
--line-height-relaxed: 1.625;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.dark {
|
|
92
|
+
--background: #0b1220;
|
|
93
|
+
--foreground: #e6edf6;
|
|
94
|
+
--muted: #172238;
|
|
95
|
+
--muted-foreground: #90a1ba;
|
|
96
|
+
--surface: #111c30;
|
|
97
|
+
--border: #243349;
|
|
98
|
+
--ring: #38bdf8;
|
|
99
|
+
--primary: #0ea5e9;
|
|
100
|
+
--primary-foreground: #04141f;
|
|
101
|
+
--secondary: #1b2740;
|
|
102
|
+
--secondary-foreground: #c5d2e6;
|
|
103
|
+
--card: #111c30;
|
|
104
|
+
--card-foreground: #e6edf6;
|
|
105
|
+
--popover: #0f1a2c;
|
|
106
|
+
--popover-foreground: #e6edf6;
|
|
107
|
+
--input: #1d2a42;
|
|
108
|
+
--destructive-foreground: #1a0606;
|
|
109
|
+
--accent: #38bdf8;
|
|
110
|
+
--accent-foreground: #04141f;
|
|
111
|
+
--destructive: #f04848;
|
|
112
|
+
--success: #3ddc84;
|
|
113
|
+
--warning: #f5b133;
|
|
114
|
+
--info: #4f8ff5;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Spacing scale (DTCG dimension tokens). */
|
|
118
|
+
@theme {
|
|
119
|
+
--spacing-0: 0rem;
|
|
120
|
+
--spacing-1: 0.25rem;
|
|
121
|
+
--spacing-2: 0.5rem;
|
|
122
|
+
--spacing-3: 0.75rem;
|
|
123
|
+
--spacing-4: 1rem;
|
|
124
|
+
--spacing-5: 1.25rem;
|
|
125
|
+
--spacing-6: 1.5rem;
|
|
126
|
+
--spacing-8: 2rem;
|
|
127
|
+
--spacing-10: 2.5rem;
|
|
128
|
+
--spacing-12: 3rem;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* Density convention — opt in via a class on a root element (html/body/app shell).
|
|
132
|
+
App default = COMPACT (14px): product UIs should set class="density-compact".
|
|
133
|
+
Marketing / long-form surfaces use class="density-comfortable" (16px).
|
|
134
|
+
The :root block below provides the compact defaults so `--density-*` resolve
|
|
135
|
+
before any class is applied; these vars do not restyle existing components. */
|
|
136
|
+
:root {
|
|
137
|
+
--density-font-size: 14px;
|
|
138
|
+
--density-control-height: 2.25rem;
|
|
139
|
+
--density-line-height: 1.25rem;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.density-compact {
|
|
143
|
+
--density-font-size: 14px;
|
|
144
|
+
--density-control-height: 2.25rem;
|
|
145
|
+
--density-line-height: 1.25rem;
|
|
146
|
+
font-size: 14px;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.density-comfortable {
|
|
150
|
+
--density-font-size: 16px;
|
|
151
|
+
--density-control-height: 2.5rem;
|
|
152
|
+
--density-line-height: 1.5rem;
|
|
153
|
+
font-size: 16px;
|
|
154
|
+
}
|
package/dist/tokens.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export declare const lightTokens: Record<string, string>;
|
|
2
|
+
export declare const darkTokens: Record<string, string>;
|
|
3
|
+
export type TokenName = string;
|
|
4
|
+
export declare const fontFamily: Record<string, string>;
|
|
5
|
+
export declare const fontSize: Record<string, string>;
|
|
6
|
+
export declare const fontWeight: Record<string, number>;
|
|
7
|
+
export declare const lineHeight: Record<string, number>;
|
|
8
|
+
export declare const typography: {
|
|
9
|
+
fontFamily: Record<string, string>;
|
|
10
|
+
fontSize: Record<string, string>;
|
|
11
|
+
fontWeight: Record<string, number>;
|
|
12
|
+
lineHeight: Record<string, number>;
|
|
13
|
+
};
|
|
14
|
+
export type FontFamily = string;
|
|
15
|
+
export type FontSize = string;
|
|
16
|
+
export type FontWeight = string;
|
|
17
|
+
export type LineHeight = string;
|