@velora-cms/design-tokens 0.14.0 → 0.14.1
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/README.md +2 -29
- package/package.json +5 -37
- package/LICENSE +0 -202
- package/dist/build-css.d.ts +0 -8
- package/dist/build-css.js +0 -48
- package/dist/generate.d.ts +0 -1
- package/dist/generate.js +0 -15
- package/dist/index.d.ts +0 -6
- package/dist/index.js +0 -4
- package/dist/tailwind-theme.d.ts +0 -30
- package/dist/tailwind-theme.js +0 -51
- package/dist/theme-css.d.ts +0 -12
- package/dist/theme-css.js +0 -42
- package/dist/theme-types.d.ts +0 -40
- package/dist/theme-types.js +0 -1
- package/dist/themes/dark.d.ts +0 -13
- package/dist/themes/dark.js +0 -75
- package/dist/themes/index.d.ts +0 -5
- package/dist/themes/index.js +0 -4
- package/dist/themes/light.d.ts +0 -9
- package/dist/themes/light.js +0 -13
- package/dist/tokens.css +0 -199
- package/dist/tokens.d.ts +0 -25
- package/dist/tokens.js +0 -224
- package/dist/tokens.json +0 -184
- package/dist/types.d.ts +0 -69
- package/dist/types.js +0 -5
package/dist/themes/index.js
DELETED
package/dist/themes/light.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { BuiltInTheme } from '../theme-types.js';
|
|
2
|
-
/**
|
|
3
|
-
* Light needs no overrides — the base token set generated to :root
|
|
4
|
-
* (tokens.ts) already IS the light theme. Still modeled as a real
|
|
5
|
-
* BuiltInTheme, not a special case: applying any theme is always
|
|
6
|
-
* "set data-theme to this id," whether or not that theme happens to
|
|
7
|
-
* define overrides.
|
|
8
|
-
*/
|
|
9
|
-
export declare const lightTheme: BuiltInTheme;
|
package/dist/themes/light.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Light needs no overrides — the base token set generated to :root
|
|
3
|
-
* (tokens.ts) already IS the light theme. Still modeled as a real
|
|
4
|
-
* BuiltInTheme, not a special case: applying any theme is always
|
|
5
|
-
* "set data-theme to this id," whether or not that theme happens to
|
|
6
|
-
* define overrides.
|
|
7
|
-
*/
|
|
8
|
-
export const lightTheme = {
|
|
9
|
-
id: 'light',
|
|
10
|
-
name: 'Light',
|
|
11
|
-
type: 'theme',
|
|
12
|
-
contributions: { themeTokens: {} },
|
|
13
|
-
};
|
package/dist/tokens.css
DELETED
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
/* Generated by @velora-cms/design-tokens — do not edit by hand. */
|
|
2
|
-
|
|
3
|
-
:root {
|
|
4
|
-
--color-primary-50: #EAF4FB;
|
|
5
|
-
--color-primary-100: #CFE6F6;
|
|
6
|
-
--color-primary-200: #A9D5F0;
|
|
7
|
-
--color-primary-300: #7CC0E8;
|
|
8
|
-
--color-primary-400: #4E9CCB;
|
|
9
|
-
--color-primary-500: #2A82BC;
|
|
10
|
-
--color-primary-600: #1F6FA8;
|
|
11
|
-
--color-primary-700: #1A5E8F;
|
|
12
|
-
--color-primary-800: #154D75;
|
|
13
|
-
--color-primary-900: #113D5C;
|
|
14
|
-
--color-primary-950: #0B2A40;
|
|
15
|
-
--color-secondary-50: #F0F0FA;
|
|
16
|
-
--color-secondary-100: #E9E9F8;
|
|
17
|
-
--color-secondary-200: #D3D4F1;
|
|
18
|
-
--color-secondary-300: #B4B6E6;
|
|
19
|
-
--color-secondary-400: #8F92D8;
|
|
20
|
-
--color-secondary-500: #5B5FC7;
|
|
21
|
-
--color-secondary-600: #4B4FB0;
|
|
22
|
-
--color-secondary-700: #3E4194;
|
|
23
|
-
--color-secondary-800: #333676;
|
|
24
|
-
--color-secondary-900: #282A5C;
|
|
25
|
-
--color-secondary-950: #181A3A;
|
|
26
|
-
--color-success-50: #EEF5EB;
|
|
27
|
-
--color-success-100: #E4F0DF;
|
|
28
|
-
--color-success-200: #C6E0BD;
|
|
29
|
-
--color-success-300: #9CC78E;
|
|
30
|
-
--color-success-400: #6CA85C;
|
|
31
|
-
--color-success-500: #4E9340;
|
|
32
|
-
--color-success-600: #3B7D2E;
|
|
33
|
-
--color-success-700: #306626;
|
|
34
|
-
--color-success-800: #27521F;
|
|
35
|
-
--color-success-900: #1F4119;
|
|
36
|
-
--color-success-950: #122A0E;
|
|
37
|
-
--color-warning-50: #FBF5E8;
|
|
38
|
-
--color-warning-100: #F7EBD2;
|
|
39
|
-
--color-warning-200: #EFD8A6;
|
|
40
|
-
--color-warning-300: #E4BF72;
|
|
41
|
-
--color-warning-400: #D6A245;
|
|
42
|
-
--color-warning-500: #C98E2D;
|
|
43
|
-
--color-warning-600: #B7791F;
|
|
44
|
-
--color-warning-700: #96631A;
|
|
45
|
-
--color-warning-800: #764E15;
|
|
46
|
-
--color-warning-900: #5B3C11;
|
|
47
|
-
--color-warning-950: #3B260A;
|
|
48
|
-
--color-danger-50: #FBEFEE;
|
|
49
|
-
--color-danger-100: #F6E0DE;
|
|
50
|
-
--color-danger-200: #EEC3BF;
|
|
51
|
-
--color-danger-300: #E39B95;
|
|
52
|
-
--color-danger-400: #D66E66;
|
|
53
|
-
--color-danger-500: #C94F46;
|
|
54
|
-
--color-danger-600: #B93A32;
|
|
55
|
-
--color-danger-700: #9A2F29;
|
|
56
|
-
--color-danger-800: #7B2621;
|
|
57
|
-
--color-danger-900: #611E1A;
|
|
58
|
-
--color-danger-950: #3F120F;
|
|
59
|
-
--color-neutral-50: #FAF9F5;
|
|
60
|
-
--color-neutral-100: #F3F1EB;
|
|
61
|
-
--color-neutral-200: #ECEAE3;
|
|
62
|
-
--color-neutral-300: #E1DED5;
|
|
63
|
-
--color-neutral-400: #CFCBC0;
|
|
64
|
-
--color-neutral-500: #8C9490;
|
|
65
|
-
--color-neutral-600: #5C6663;
|
|
66
|
-
--color-neutral-700: #3E4644;
|
|
67
|
-
--color-neutral-800: #2A3230;
|
|
68
|
-
--color-neutral-900: #1B2321;
|
|
69
|
-
--color-neutral-950: #111614;
|
|
70
|
-
--color-background-base: #F3F1EB;
|
|
71
|
-
--color-background-elevated: #FFFFFF;
|
|
72
|
-
--color-background-subtle: #FAF9F5;
|
|
73
|
-
--color-background-overlay: rgba(27, 35, 33, 0.5);
|
|
74
|
-
--color-background-hover: #F0EEE7;
|
|
75
|
-
--color-text-primary: #1B2321;
|
|
76
|
-
--color-text-secondary: #5C6663;
|
|
77
|
-
--color-text-tertiary: #616966;
|
|
78
|
-
--color-text-disabled: #8C9490;
|
|
79
|
-
--color-text-inverse: #FFFFFF;
|
|
80
|
-
--color-border-default: #E1DED5;
|
|
81
|
-
--color-border-subtle: #ECEAE3;
|
|
82
|
-
--color-border-strong: #CFCBC0;
|
|
83
|
-
--color-code-keyword: #1A5E8F;
|
|
84
|
-
--color-code-tag: #4B4FB0;
|
|
85
|
-
--color-code-string: #306626;
|
|
86
|
-
--color-code-attr: #96631A;
|
|
87
|
-
--color-code-comment: #6B6659;
|
|
88
|
-
--color-code-punctuation: #4A463C;
|
|
89
|
-
--spacing-0: 0;
|
|
90
|
-
--spacing-1: 0.25rem;
|
|
91
|
-
--spacing-2: 0.5rem;
|
|
92
|
-
--spacing-3: 0.75rem;
|
|
93
|
-
--spacing-4: 1rem;
|
|
94
|
-
--spacing-5: 1.25rem;
|
|
95
|
-
--spacing-6: 1.5rem;
|
|
96
|
-
--spacing-7: 1.75rem;
|
|
97
|
-
--spacing-8: 2rem;
|
|
98
|
-
--spacing-9: 2.25rem;
|
|
99
|
-
--spacing-10: 2.5rem;
|
|
100
|
-
--spacing-11: 2.75rem;
|
|
101
|
-
--spacing-12: 3rem;
|
|
102
|
-
--spacing-14: 3.5rem;
|
|
103
|
-
--spacing-16: 4rem;
|
|
104
|
-
--spacing-20: 5rem;
|
|
105
|
-
--spacing-24: 6rem;
|
|
106
|
-
--spacing-72: 18rem;
|
|
107
|
-
--spacing-px: 1px;
|
|
108
|
-
--radius-none: 0;
|
|
109
|
-
--radius-sm: 0.375rem;
|
|
110
|
-
--radius-md: 0.5rem;
|
|
111
|
-
--radius-lg: 0.75rem;
|
|
112
|
-
--radius-xl: 1rem;
|
|
113
|
-
--radius-full: 9999px;
|
|
114
|
-
--shadow-sm: 0 1px 2px 0 rgba(43, 38, 24, 0.06);
|
|
115
|
-
--shadow-md: 0 1px 2px 0 rgba(43, 38, 24, 0.05), 0 6px 18px 0 rgba(43, 38, 24, 0.07);
|
|
116
|
-
--shadow-lg: 0 2px 4px 0 rgba(43, 38, 24, 0.06), 0 16px 40px 0 rgba(43, 38, 24, 0.12);
|
|
117
|
-
--shadow-xl: 0 4px 8px 0 rgba(43, 38, 24, 0.08), 0 24px 56px 0 rgba(43, 38, 24, 0.16);
|
|
118
|
-
--motion-duration-fast: 150ms;
|
|
119
|
-
--motion-duration-normal: 250ms;
|
|
120
|
-
--motion-duration-slow: 400ms;
|
|
121
|
-
--motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
|
|
122
|
-
--motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
|
|
123
|
-
--motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
|
|
124
|
-
--direction: ltr;
|
|
125
|
-
--font-family-sans: 'IBM Plex Sans', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;
|
|
126
|
-
--font-family-serif: 'Literata', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
|
|
127
|
-
--font-family-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
|
|
128
|
-
--font-size-xs: 0.75rem;
|
|
129
|
-
--font-size-sm: 0.8125rem;
|
|
130
|
-
--font-size-base: 0.875rem;
|
|
131
|
-
--font-size-lg: 1rem;
|
|
132
|
-
--font-size-xl: 1.25rem;
|
|
133
|
-
--font-size-2xl: 1.5rem;
|
|
134
|
-
--font-size-3xl: 1.875rem;
|
|
135
|
-
--font-weight-normal: 400;
|
|
136
|
-
--font-weight-medium: 500;
|
|
137
|
-
--font-weight-semibold: 600;
|
|
138
|
-
--font-weight-bold: 700;
|
|
139
|
-
--line-height-tight: 1.25;
|
|
140
|
-
--line-height-normal: 1.5;
|
|
141
|
-
--line-height-relaxed: 1.75;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
[data-theme="dark"] {
|
|
145
|
-
--color-background-base: #1A1C1B;
|
|
146
|
-
--color-background-elevated: #232625;
|
|
147
|
-
--color-background-subtle: #1F2221;
|
|
148
|
-
--color-background-overlay: rgba(0, 0, 0, 0.6);
|
|
149
|
-
--color-background-hover: #2C302E;
|
|
150
|
-
--color-text-primary: #ECEAE3;
|
|
151
|
-
--color-text-secondary: #A3A8A6;
|
|
152
|
-
--color-text-tertiary: #969C99;
|
|
153
|
-
--color-text-disabled: #6F7573;
|
|
154
|
-
--color-text-inverse: #14181B;
|
|
155
|
-
--color-border-default: #33373A;
|
|
156
|
-
--color-border-subtle: #2C302E;
|
|
157
|
-
--color-border-strong: #444A4D;
|
|
158
|
-
--color-primary-50: #1D2A34;
|
|
159
|
-
--color-primary-100: #22364A;
|
|
160
|
-
--color-primary-200: #2A4A66;
|
|
161
|
-
--color-primary-300: #7CC0E8;
|
|
162
|
-
--color-primary-600: #7CC0E8;
|
|
163
|
-
--color-primary-700: #9AD0EE;
|
|
164
|
-
--color-primary-800: #BFE1F5;
|
|
165
|
-
--color-secondary-100: #2A2C46;
|
|
166
|
-
--color-secondary-500: #9A9DE3;
|
|
167
|
-
--color-secondary-600: #9A9DE3;
|
|
168
|
-
--color-success-100: #223A1E;
|
|
169
|
-
--color-success-600: #7FC46E;
|
|
170
|
-
--color-success-700: #8FD07F;
|
|
171
|
-
--color-warning-100: #3D3016;
|
|
172
|
-
--color-warning-600: #E0AA4B;
|
|
173
|
-
--color-warning-800: #EABB6A;
|
|
174
|
-
--color-danger-100: #45201D;
|
|
175
|
-
--color-danger-600: #E8776E;
|
|
176
|
-
--color-danger-700: #F0918A;
|
|
177
|
-
--color-code-keyword: #7CC0E8;
|
|
178
|
-
--color-code-tag: #9A9DE3;
|
|
179
|
-
--color-code-string: #7FC46E;
|
|
180
|
-
--color-code-attr: #E0AA4B;
|
|
181
|
-
--color-code-comment: #A3A8A6;
|
|
182
|
-
--color-code-punctuation: #C5C9C6;
|
|
183
|
-
--color-neutral-50: #1F2221;
|
|
184
|
-
--color-neutral-100: #232625;
|
|
185
|
-
--color-neutral-200: #2C302E;
|
|
186
|
-
--color-neutral-300: #33373A;
|
|
187
|
-
--color-neutral-400: #444A4D;
|
|
188
|
-
--color-neutral-500: #6F7573;
|
|
189
|
-
--color-neutral-600: #A3A8A6;
|
|
190
|
-
--color-neutral-700: #C5C9C6;
|
|
191
|
-
--color-neutral-800: #DAD9D3;
|
|
192
|
-
--color-neutral-900: #ECEAE3;
|
|
193
|
-
--color-neutral-950: #F5F4F0;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
/* Arabic locales lead with Plex Sans Arabic — same token, language-conditional value. */
|
|
197
|
-
[lang="ar"], [lang^="ar-"] {
|
|
198
|
-
--font-family-sans: 'IBM Plex Sans Arabic', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
|
|
199
|
-
}
|
package/dist/tokens.d.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import type { VeloraDesignTokens } from './types.js';
|
|
2
|
-
/**
|
|
3
|
-
* Velora brand tokens — the default (light) token set, per the S177
|
|
4
|
-
* design (the Session-177 design decisions,
|
|
5
|
-
* user-approved 2026-08-30).
|
|
6
|
-
*
|
|
7
|
-
* Colour roles: the primary scale runs sky (50–300, atmosphere:
|
|
8
|
-
* selection, focus, the version rail) into cerulean (600–800, action:
|
|
9
|
-
* buttons, links). THE ACTION COLOUR IS primary-600 — this supersedes the
|
|
10
|
-
* Session-27 "brand = 500 step" convention for primary; 500 is a
|
|
11
|
-
* mid-step used for nothing in particular. Status scales pair a 100-step
|
|
12
|
-
* soft fill with the lightest text step that clears 4.5:1 on that fill
|
|
13
|
-
* (success/danger 700, warning 800). Neutrals are warm stone, not grey. The
|
|
14
|
-
* dark set (themes/dark.ts) overrides colour only — themes never touch
|
|
15
|
-
* typography/spacing/shadow/motion.
|
|
16
|
-
*/
|
|
17
|
-
export declare const tokens: VeloraDesignTokens;
|
|
18
|
-
/**
|
|
19
|
-
* Under an Arabic document language the SAME sans token leads with Plex
|
|
20
|
-
* Sans Arabic (its Latin glyphs are Plex-compatible), so RTL locales get a
|
|
21
|
-
* native UI face without any component knowing. Emitted by build-css.ts
|
|
22
|
-
* as a `[lang="ar"]` block — a language-conditional value of an existing
|
|
23
|
-
* token, not a new one.
|
|
24
|
-
*/
|
|
25
|
-
export declare const ARABIC_SANS_FONT_FAMILY = "'IBM Plex Sans Arabic', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif";
|
package/dist/tokens.js
DELETED
|
@@ -1,224 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Velora brand tokens — the default (light) token set, per the S177
|
|
3
|
-
* design (the Session-177 design decisions,
|
|
4
|
-
* user-approved 2026-08-30).
|
|
5
|
-
*
|
|
6
|
-
* Colour roles: the primary scale runs sky (50–300, atmosphere:
|
|
7
|
-
* selection, focus, the version rail) into cerulean (600–800, action:
|
|
8
|
-
* buttons, links). THE ACTION COLOUR IS primary-600 — this supersedes the
|
|
9
|
-
* Session-27 "brand = 500 step" convention for primary; 500 is a
|
|
10
|
-
* mid-step used for nothing in particular. Status scales pair a 100-step
|
|
11
|
-
* soft fill with the lightest text step that clears 4.5:1 on that fill
|
|
12
|
-
* (success/danger 700, warning 800). Neutrals are warm stone, not grey. The
|
|
13
|
-
* dark set (themes/dark.ts) overrides colour only — themes never touch
|
|
14
|
-
* typography/spacing/shadow/motion.
|
|
15
|
-
*/
|
|
16
|
-
export const tokens = {
|
|
17
|
-
color: {
|
|
18
|
-
primary: {
|
|
19
|
-
'50': '#EAF4FB',
|
|
20
|
-
'100': '#CFE6F6',
|
|
21
|
-
'200': '#A9D5F0',
|
|
22
|
-
'300': '#7CC0E8',
|
|
23
|
-
'400': '#4E9CCB',
|
|
24
|
-
'500': '#2A82BC',
|
|
25
|
-
'600': '#1F6FA8',
|
|
26
|
-
'700': '#1A5E8F',
|
|
27
|
-
'800': '#154D75',
|
|
28
|
-
'900': '#113D5C',
|
|
29
|
-
'950': '#0B2A40',
|
|
30
|
-
},
|
|
31
|
-
// The former brand indigo, demoted to the info/secondary role.
|
|
32
|
-
secondary: {
|
|
33
|
-
'50': '#F0F0FA',
|
|
34
|
-
'100': '#E9E9F8',
|
|
35
|
-
'200': '#D3D4F1',
|
|
36
|
-
'300': '#B4B6E6',
|
|
37
|
-
'400': '#8F92D8',
|
|
38
|
-
'500': '#5B5FC7',
|
|
39
|
-
'600': '#4B4FB0',
|
|
40
|
-
'700': '#3E4194',
|
|
41
|
-
'800': '#333676',
|
|
42
|
-
'900': '#282A5C',
|
|
43
|
-
'950': '#181A3A',
|
|
44
|
-
},
|
|
45
|
-
success: {
|
|
46
|
-
'50': '#EEF5EB',
|
|
47
|
-
'100': '#E4F0DF',
|
|
48
|
-
'200': '#C6E0BD',
|
|
49
|
-
'300': '#9CC78E',
|
|
50
|
-
'400': '#6CA85C',
|
|
51
|
-
'500': '#4E9340',
|
|
52
|
-
'600': '#3B7D2E',
|
|
53
|
-
'700': '#306626',
|
|
54
|
-
'800': '#27521F',
|
|
55
|
-
'900': '#1F4119',
|
|
56
|
-
'950': '#122A0E',
|
|
57
|
-
},
|
|
58
|
-
warning: {
|
|
59
|
-
'50': '#FBF5E8',
|
|
60
|
-
'100': '#F7EBD2',
|
|
61
|
-
'200': '#EFD8A6',
|
|
62
|
-
'300': '#E4BF72',
|
|
63
|
-
'400': '#D6A245',
|
|
64
|
-
'500': '#C98E2D',
|
|
65
|
-
'600': '#B7791F',
|
|
66
|
-
'700': '#96631A',
|
|
67
|
-
'800': '#764E15',
|
|
68
|
-
'900': '#5B3C11',
|
|
69
|
-
'950': '#3B260A',
|
|
70
|
-
},
|
|
71
|
-
danger: {
|
|
72
|
-
'50': '#FBEFEE',
|
|
73
|
-
'100': '#F6E0DE',
|
|
74
|
-
'200': '#EEC3BF',
|
|
75
|
-
'300': '#E39B95',
|
|
76
|
-
'400': '#D66E66',
|
|
77
|
-
'500': '#C94F46',
|
|
78
|
-
'600': '#B93A32',
|
|
79
|
-
'700': '#9A2F29',
|
|
80
|
-
'800': '#7B2621',
|
|
81
|
-
'900': '#611E1A',
|
|
82
|
-
'950': '#3F120F',
|
|
83
|
-
},
|
|
84
|
-
neutral: {
|
|
85
|
-
'50': '#FAF9F5',
|
|
86
|
-
'100': '#F3F1EB',
|
|
87
|
-
'200': '#ECEAE3',
|
|
88
|
-
'300': '#E1DED5',
|
|
89
|
-
'400': '#CFCBC0',
|
|
90
|
-
'500': '#8C9490',
|
|
91
|
-
'600': '#5C6663',
|
|
92
|
-
'700': '#3E4644',
|
|
93
|
-
'800': '#2A3230',
|
|
94
|
-
'900': '#1B2321',
|
|
95
|
-
'950': '#111614',
|
|
96
|
-
},
|
|
97
|
-
background: {
|
|
98
|
-
base: '#F3F1EB',
|
|
99
|
-
elevated: '#FFFFFF',
|
|
100
|
-
subtle: '#FAF9F5',
|
|
101
|
-
overlay: 'rgba(27, 35, 33, 0.5)',
|
|
102
|
-
// Nudged from #ECEAE3 (S179): the original wash put primary-600 text
|
|
103
|
-
// at 4.48:1 against it, just under AA — #F0EEE7 clears 4.5:1 while
|
|
104
|
-
// staying the darkest of the four light surfaces (the hover-wash
|
|
105
|
-
// hierarchy is unchanged).
|
|
106
|
-
hover: '#F0EEE7',
|
|
107
|
-
},
|
|
108
|
-
text: {
|
|
109
|
-
primary: '#1B2321',
|
|
110
|
-
secondary: '#5C6663',
|
|
111
|
-
tertiary: '#616966',
|
|
112
|
-
disabled: '#8C9490',
|
|
113
|
-
inverse: '#FFFFFF',
|
|
114
|
-
},
|
|
115
|
-
border: {
|
|
116
|
-
default: '#E1DED5',
|
|
117
|
-
subtle: '#ECEAE3',
|
|
118
|
-
strong: '#CFCBC0',
|
|
119
|
-
},
|
|
120
|
-
// Code-syntax roles (S195), approved mockup: reuses existing hues
|
|
121
|
-
// (primary-700 / secondary-600 / success-700 / warning-700) for
|
|
122
|
-
// keyword/tag/string/attr so highlighted code stays in the brand
|
|
123
|
-
// palette; comment/punctuation are quiet warm-stone steps between
|
|
124
|
-
// neutral-600 and neutral-700 built for this role specifically.
|
|
125
|
-
code: {
|
|
126
|
-
keyword: '#1A5E8F',
|
|
127
|
-
tag: '#4B4FB0',
|
|
128
|
-
string: '#306626',
|
|
129
|
-
attr: '#96631A',
|
|
130
|
-
comment: '#6B6659',
|
|
131
|
-
punctuation: '#4A463C',
|
|
132
|
-
},
|
|
133
|
-
},
|
|
134
|
-
typography: {
|
|
135
|
-
fontFamily: {
|
|
136
|
-
sans: "'IBM Plex Sans', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif",
|
|
137
|
-
serif: "'Literata', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif",
|
|
138
|
-
mono: "'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace",
|
|
139
|
-
},
|
|
140
|
-
// px targets at a 16px root: 12 · 13 · 14 · 16 · 20 · 24 · 30.
|
|
141
|
-
// base is 14px (the tool's body size); 2xl = tool titles, 3xl =
|
|
142
|
-
// content titles (serif).
|
|
143
|
-
fontSize: {
|
|
144
|
-
xs: '0.75rem',
|
|
145
|
-
sm: '0.8125rem',
|
|
146
|
-
base: '0.875rem',
|
|
147
|
-
lg: '1rem',
|
|
148
|
-
xl: '1.25rem',
|
|
149
|
-
'2xl': '1.5rem',
|
|
150
|
-
'3xl': '1.875rem',
|
|
151
|
-
},
|
|
152
|
-
fontWeight: {
|
|
153
|
-
normal: 400,
|
|
154
|
-
medium: 500,
|
|
155
|
-
semibold: 600,
|
|
156
|
-
bold: 700,
|
|
157
|
-
},
|
|
158
|
-
lineHeight: {
|
|
159
|
-
tight: 1.25,
|
|
160
|
-
normal: 1.5,
|
|
161
|
-
relaxed: 1.75,
|
|
162
|
-
},
|
|
163
|
-
},
|
|
164
|
-
spacing: {
|
|
165
|
-
'0': '0',
|
|
166
|
-
px: '1px',
|
|
167
|
-
'1': '0.25rem',
|
|
168
|
-
'2': '0.5rem',
|
|
169
|
-
'3': '0.75rem',
|
|
170
|
-
'4': '1rem',
|
|
171
|
-
'5': '1.25rem',
|
|
172
|
-
'6': '1.5rem',
|
|
173
|
-
'7': '1.75rem',
|
|
174
|
-
'8': '2rem',
|
|
175
|
-
'9': '2.25rem',
|
|
176
|
-
'10': '2.5rem',
|
|
177
|
-
'11': '2.75rem',
|
|
178
|
-
'12': '3rem',
|
|
179
|
-
'14': '3.5rem',
|
|
180
|
-
'16': '4rem',
|
|
181
|
-
'20': '5rem',
|
|
182
|
-
'24': '6rem',
|
|
183
|
-
// 72 (18rem): the persistent tree panel's width (S49 structure, S177 spec
|
|
184
|
-
// 284px) — Tailwind's `w-72` resolves only through this scale.
|
|
185
|
-
'72': '18rem',
|
|
186
|
-
},
|
|
187
|
-
// 6 small · 8 controls · 12 cards · 16 dialogs
|
|
188
|
-
radius: {
|
|
189
|
-
none: '0',
|
|
190
|
-
sm: '0.375rem',
|
|
191
|
-
md: '0.5rem',
|
|
192
|
-
lg: '0.75rem',
|
|
193
|
-
xl: '1rem',
|
|
194
|
-
full: '9999px',
|
|
195
|
-
},
|
|
196
|
-
// Warm-tinted (the shadow colour is the neutral-900 ink, not black).
|
|
197
|
-
shadow: {
|
|
198
|
-
sm: '0 1px 2px 0 rgba(43, 38, 24, 0.06)',
|
|
199
|
-
md: '0 1px 2px 0 rgba(43, 38, 24, 0.05), 0 6px 18px 0 rgba(43, 38, 24, 0.07)',
|
|
200
|
-
lg: '0 2px 4px 0 rgba(43, 38, 24, 0.06), 0 16px 40px 0 rgba(43, 38, 24, 0.12)',
|
|
201
|
-
xl: '0 4px 8px 0 rgba(43, 38, 24, 0.08), 0 24px 56px 0 rgba(43, 38, 24, 0.16)',
|
|
202
|
-
},
|
|
203
|
-
motion: {
|
|
204
|
-
duration: {
|
|
205
|
-
fast: '150ms',
|
|
206
|
-
normal: '250ms',
|
|
207
|
-
slow: '400ms',
|
|
208
|
-
},
|
|
209
|
-
easing: {
|
|
210
|
-
standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
211
|
-
enter: 'cubic-bezier(0, 0, 0.2, 1)',
|
|
212
|
-
exit: 'cubic-bezier(0.4, 0, 1, 1)',
|
|
213
|
-
},
|
|
214
|
-
},
|
|
215
|
-
direction: 'ltr',
|
|
216
|
-
};
|
|
217
|
-
/**
|
|
218
|
-
* Under an Arabic document language the SAME sans token leads with Plex
|
|
219
|
-
* Sans Arabic (its Latin glyphs are Plex-compatible), so RTL locales get a
|
|
220
|
-
* native UI face without any component knowing. Emitted by build-css.ts
|
|
221
|
-
* as a `[lang="ar"]` block — a language-conditional value of an existing
|
|
222
|
-
* token, not a new one.
|
|
223
|
-
*/
|
|
224
|
-
export const ARABIC_SANS_FONT_FAMILY = "'IBM Plex Sans Arabic', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif";
|
package/dist/tokens.json
DELETED
|
@@ -1,184 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"color": {
|
|
3
|
-
"primary": {
|
|
4
|
-
"50": "#EAF4FB",
|
|
5
|
-
"100": "#CFE6F6",
|
|
6
|
-
"200": "#A9D5F0",
|
|
7
|
-
"300": "#7CC0E8",
|
|
8
|
-
"400": "#4E9CCB",
|
|
9
|
-
"500": "#2A82BC",
|
|
10
|
-
"600": "#1F6FA8",
|
|
11
|
-
"700": "#1A5E8F",
|
|
12
|
-
"800": "#154D75",
|
|
13
|
-
"900": "#113D5C",
|
|
14
|
-
"950": "#0B2A40"
|
|
15
|
-
},
|
|
16
|
-
"secondary": {
|
|
17
|
-
"50": "#F0F0FA",
|
|
18
|
-
"100": "#E9E9F8",
|
|
19
|
-
"200": "#D3D4F1",
|
|
20
|
-
"300": "#B4B6E6",
|
|
21
|
-
"400": "#8F92D8",
|
|
22
|
-
"500": "#5B5FC7",
|
|
23
|
-
"600": "#4B4FB0",
|
|
24
|
-
"700": "#3E4194",
|
|
25
|
-
"800": "#333676",
|
|
26
|
-
"900": "#282A5C",
|
|
27
|
-
"950": "#181A3A"
|
|
28
|
-
},
|
|
29
|
-
"success": {
|
|
30
|
-
"50": "#EEF5EB",
|
|
31
|
-
"100": "#E4F0DF",
|
|
32
|
-
"200": "#C6E0BD",
|
|
33
|
-
"300": "#9CC78E",
|
|
34
|
-
"400": "#6CA85C",
|
|
35
|
-
"500": "#4E9340",
|
|
36
|
-
"600": "#3B7D2E",
|
|
37
|
-
"700": "#306626",
|
|
38
|
-
"800": "#27521F",
|
|
39
|
-
"900": "#1F4119",
|
|
40
|
-
"950": "#122A0E"
|
|
41
|
-
},
|
|
42
|
-
"warning": {
|
|
43
|
-
"50": "#FBF5E8",
|
|
44
|
-
"100": "#F7EBD2",
|
|
45
|
-
"200": "#EFD8A6",
|
|
46
|
-
"300": "#E4BF72",
|
|
47
|
-
"400": "#D6A245",
|
|
48
|
-
"500": "#C98E2D",
|
|
49
|
-
"600": "#B7791F",
|
|
50
|
-
"700": "#96631A",
|
|
51
|
-
"800": "#764E15",
|
|
52
|
-
"900": "#5B3C11",
|
|
53
|
-
"950": "#3B260A"
|
|
54
|
-
},
|
|
55
|
-
"danger": {
|
|
56
|
-
"50": "#FBEFEE",
|
|
57
|
-
"100": "#F6E0DE",
|
|
58
|
-
"200": "#EEC3BF",
|
|
59
|
-
"300": "#E39B95",
|
|
60
|
-
"400": "#D66E66",
|
|
61
|
-
"500": "#C94F46",
|
|
62
|
-
"600": "#B93A32",
|
|
63
|
-
"700": "#9A2F29",
|
|
64
|
-
"800": "#7B2621",
|
|
65
|
-
"900": "#611E1A",
|
|
66
|
-
"950": "#3F120F"
|
|
67
|
-
},
|
|
68
|
-
"neutral": {
|
|
69
|
-
"50": "#FAF9F5",
|
|
70
|
-
"100": "#F3F1EB",
|
|
71
|
-
"200": "#ECEAE3",
|
|
72
|
-
"300": "#E1DED5",
|
|
73
|
-
"400": "#CFCBC0",
|
|
74
|
-
"500": "#8C9490",
|
|
75
|
-
"600": "#5C6663",
|
|
76
|
-
"700": "#3E4644",
|
|
77
|
-
"800": "#2A3230",
|
|
78
|
-
"900": "#1B2321",
|
|
79
|
-
"950": "#111614"
|
|
80
|
-
},
|
|
81
|
-
"background": {
|
|
82
|
-
"base": "#F3F1EB",
|
|
83
|
-
"elevated": "#FFFFFF",
|
|
84
|
-
"subtle": "#FAF9F5",
|
|
85
|
-
"overlay": "rgba(27, 35, 33, 0.5)",
|
|
86
|
-
"hover": "#F0EEE7"
|
|
87
|
-
},
|
|
88
|
-
"text": {
|
|
89
|
-
"primary": "#1B2321",
|
|
90
|
-
"secondary": "#5C6663",
|
|
91
|
-
"tertiary": "#616966",
|
|
92
|
-
"disabled": "#8C9490",
|
|
93
|
-
"inverse": "#FFFFFF"
|
|
94
|
-
},
|
|
95
|
-
"border": {
|
|
96
|
-
"default": "#E1DED5",
|
|
97
|
-
"subtle": "#ECEAE3",
|
|
98
|
-
"strong": "#CFCBC0"
|
|
99
|
-
},
|
|
100
|
-
"code": {
|
|
101
|
-
"keyword": "#1A5E8F",
|
|
102
|
-
"tag": "#4B4FB0",
|
|
103
|
-
"string": "#306626",
|
|
104
|
-
"attr": "#96631A",
|
|
105
|
-
"comment": "#6B6659",
|
|
106
|
-
"punctuation": "#4A463C"
|
|
107
|
-
}
|
|
108
|
-
},
|
|
109
|
-
"typography": {
|
|
110
|
-
"fontFamily": {
|
|
111
|
-
"sans": "'IBM Plex Sans', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif",
|
|
112
|
-
"serif": "'Literata', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif",
|
|
113
|
-
"mono": "'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace"
|
|
114
|
-
},
|
|
115
|
-
"fontSize": {
|
|
116
|
-
"xs": "0.75rem",
|
|
117
|
-
"sm": "0.8125rem",
|
|
118
|
-
"base": "0.875rem",
|
|
119
|
-
"lg": "1rem",
|
|
120
|
-
"xl": "1.25rem",
|
|
121
|
-
"2xl": "1.5rem",
|
|
122
|
-
"3xl": "1.875rem"
|
|
123
|
-
},
|
|
124
|
-
"fontWeight": {
|
|
125
|
-
"normal": 400,
|
|
126
|
-
"medium": 500,
|
|
127
|
-
"semibold": 600,
|
|
128
|
-
"bold": 700
|
|
129
|
-
},
|
|
130
|
-
"lineHeight": {
|
|
131
|
-
"tight": 1.25,
|
|
132
|
-
"normal": 1.5,
|
|
133
|
-
"relaxed": 1.75
|
|
134
|
-
}
|
|
135
|
-
},
|
|
136
|
-
"spacing": {
|
|
137
|
-
"0": "0",
|
|
138
|
-
"1": "0.25rem",
|
|
139
|
-
"2": "0.5rem",
|
|
140
|
-
"3": "0.75rem",
|
|
141
|
-
"4": "1rem",
|
|
142
|
-
"5": "1.25rem",
|
|
143
|
-
"6": "1.5rem",
|
|
144
|
-
"7": "1.75rem",
|
|
145
|
-
"8": "2rem",
|
|
146
|
-
"9": "2.25rem",
|
|
147
|
-
"10": "2.5rem",
|
|
148
|
-
"11": "2.75rem",
|
|
149
|
-
"12": "3rem",
|
|
150
|
-
"14": "3.5rem",
|
|
151
|
-
"16": "4rem",
|
|
152
|
-
"20": "5rem",
|
|
153
|
-
"24": "6rem",
|
|
154
|
-
"72": "18rem",
|
|
155
|
-
"px": "1px"
|
|
156
|
-
},
|
|
157
|
-
"radius": {
|
|
158
|
-
"none": "0",
|
|
159
|
-
"sm": "0.375rem",
|
|
160
|
-
"md": "0.5rem",
|
|
161
|
-
"lg": "0.75rem",
|
|
162
|
-
"xl": "1rem",
|
|
163
|
-
"full": "9999px"
|
|
164
|
-
},
|
|
165
|
-
"shadow": {
|
|
166
|
-
"sm": "0 1px 2px 0 rgba(43, 38, 24, 0.06)",
|
|
167
|
-
"md": "0 1px 2px 0 rgba(43, 38, 24, 0.05), 0 6px 18px 0 rgba(43, 38, 24, 0.07)",
|
|
168
|
-
"lg": "0 2px 4px 0 rgba(43, 38, 24, 0.06), 0 16px 40px 0 rgba(43, 38, 24, 0.12)",
|
|
169
|
-
"xl": "0 4px 8px 0 rgba(43, 38, 24, 0.08), 0 24px 56px 0 rgba(43, 38, 24, 0.16)"
|
|
170
|
-
},
|
|
171
|
-
"motion": {
|
|
172
|
-
"duration": {
|
|
173
|
-
"fast": "150ms",
|
|
174
|
-
"normal": "250ms",
|
|
175
|
-
"slow": "400ms"
|
|
176
|
-
},
|
|
177
|
-
"easing": {
|
|
178
|
-
"standard": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
179
|
-
"enter": "cubic-bezier(0, 0, 0.2, 1)",
|
|
180
|
-
"exit": "cubic-bezier(0.4, 0, 1, 1)"
|
|
181
|
-
}
|
|
182
|
-
},
|
|
183
|
-
"direction": "ltr"
|
|
184
|
-
}
|