shared-design-system 1.116.0 → 1.118.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.
Files changed (33) hide show
  1. package/dist/src/components/Alert.js +14 -13
  2. package/dist/src/components/Alert.js.map +1 -1
  3. package/dist/src/components/Badge.js +25 -109
  4. package/dist/src/components/Badge.js.map +1 -1
  5. package/dist/src/components/Button.d.ts +1 -1
  6. package/dist/src/components/Button.js +67 -40
  7. package/dist/src/components/Button.js.map +1 -1
  8. package/dist/src/components/ConfigProvider.d.ts +1 -1
  9. package/dist/src/components/ConfigProvider.js +3 -3
  10. package/dist/src/components/ConfigProvider.js.map +1 -1
  11. package/dist/src/components/DatePicker.js +1 -1
  12. package/dist/src/components/InputComponents.d.ts +1 -0
  13. package/dist/src/components/InputComponents.js +20 -16
  14. package/dist/src/components/InputComponents.js.map +1 -1
  15. package/dist/src/components/MultiSelect.js +1 -1
  16. package/dist/src/components/Radio.d.ts +1 -0
  17. package/dist/src/components/Radio.js.map +1 -1
  18. package/dist/src/components/ReadOnlyField.js +1 -1
  19. package/dist/src/components/Select.d.ts +1 -0
  20. package/dist/src/components/Select.js +1 -1
  21. package/dist/src/components/Select.js.map +1 -1
  22. package/dist/src/components/Tag.js +9 -9
  23. package/dist/src/components/Tag.js.map +1 -1
  24. package/dist/src/components/TagInput.js +1 -1
  25. package/dist/src/components/ToggleButton.d.ts +1 -0
  26. package/dist/src/components/ToggleButton.js.map +1 -1
  27. package/dist/src/components/Typography.js +18 -18
  28. package/dist/src/components/Typography.js.map +1 -1
  29. package/dist/src/tokens.d.ts +46 -0
  30. package/dist/src/tokens.js +195 -43
  31. package/dist/src/tokens.js.map +1 -1
  32. package/package.json +1 -1
  33. package/src/theme.css +135 -82
package/dist/src/tokens.d.ts CHANGED
@@ -2,6 +2,18 @@
2
2
  * Design Tokens — shared-design-system
3
3
  * Single source of truth for colors, spacing, typography, shadows.
4
4
  */
5
+ export interface PaletteScale {
6
+ 1: string;
7
+ 2: string;
8
+ 3: string;
9
+ 4: string;
10
+ 5: string;
11
+ 6: string;
12
+ 7: string;
13
+ 8: string;
14
+ 9: string;
15
+ 10: string;
16
+ }
5
17
  export interface ColorTokens {
6
18
  white: string;
7
19
  primary: string;
@@ -10,6 +22,8 @@ export interface ColorTokens {
10
22
  accent: string;
11
23
  accentDark: string;
12
24
  accentLight: string;
25
+ mainYellow: string;
26
+ brandBlack: string;
13
27
  success: string;
14
28
  successBg: string;
15
29
  warning: string;
@@ -26,6 +40,10 @@ export interface ColorTokens {
26
40
  surface: string;
27
41
  surfaceAlt: string;
28
42
  overlay: string;
43
+ overlayBlack80: string;
44
+ overlayBlack40: string;
45
+ overlayWhite80: string;
46
+ overlayWhite40: string;
29
47
  slate50: string;
30
48
  slate100: string;
31
49
  slate200: string;
@@ -36,6 +54,16 @@ export interface ColorTokens {
36
54
  slate700: string;
37
55
  slate800: string;
38
56
  slate900: string;
57
+ yellow: PaletteScale;
58
+ orange: PaletteScale;
59
+ volcano: PaletteScale;
60
+ red: PaletteScale;
61
+ blue: PaletteScale;
62
+ daybreakBlue: PaletteScale;
63
+ green: PaletteScale;
64
+ polarGreen: PaletteScale;
65
+ purple: PaletteScale;
66
+ neutral: PaletteScale;
39
67
  }
40
68
  export interface RadiusTokens {
41
69
  sm: string;
@@ -51,6 +79,21 @@ export interface ShadowTokens {
51
79
  lg: string;
52
80
  xl: string;
53
81
  }
82
+ export interface FontLineHeightTokens {
83
+ caption1: string;
84
+ subheadline: string;
85
+ body: string;
86
+ title3: string;
87
+ title2: string;
88
+ largeTitle: string;
89
+ }
90
+ export interface FontLetterSpacingTokens {
91
+ none: string;
92
+ caption: string;
93
+ body: string;
94
+ title2: string;
95
+ heading: string;
96
+ }
54
97
  export interface FontTokens {
55
98
  family: string;
56
99
  xs: string;
@@ -60,10 +103,13 @@ export interface FontTokens {
60
103
  lg: string;
61
104
  xl: string;
62
105
  "2xl": string;
106
+ "3xl": string;
63
107
  weightNormal: number;
64
108
  weightMedium: number;
65
109
  weightSemibold: number;
66
110
  weightBold: number;
111
+ lineHeight: FontLineHeightTokens;
112
+ letterSpacing: FontLetterSpacingTokens;
67
113
  }
68
114
  export interface SpacingTokens {
69
115
  [key: string]: string;
package/dist/src/tokens.js CHANGED
@@ -5,44 +5,180 @@
5
5
  export const tokens = {
6
6
  color: {
7
7
  white: "#FFFFFF",
8
- // Primary — brand orange-red (#E8530A) — gradient warm: yellow-orange → red
9
- primary: "var(--ds-color-primary, #E8530A)",
10
- primaryDark: "var(--ds-color-primary-dark, #C43A00)",
11
- primaryLight: "var(--ds-color-primary-light, #FEF0E6)",
12
- // Accent — brand yellow (#FFC20E)
13
- accent: "var(--ds-color-accent, #FFC20E)",
14
- accentDark: "var(--ds-color-accent-dark, #F7A30A)",
15
- accentLight: "var(--ds-color-accent-light, #FFF9E5)",
16
- // Status
17
- success: "var(--ds-color-success, #4FA800)",
18
- successBg: "var(--ds-color-success-bg, #F2FAE2)",
19
- warning: "var(--ds-color-warning, #F56600)",
20
- warningBg: "var(--ds-color-warning-bg, #FFF0E5)",
21
- danger: "var(--ds-color-danger, #D12421)",
22
- dangerBg: "var(--ds-color-danger-bg, #FDE8E8)",
23
- info: "var(--ds-color-info, #1890FF)",
24
- infoBg: "var(--ds-color-info-bg, #E5F3FF)",
25
- // Text
26
- text: "var(--ds-color-text, #212B36)",
27
- textMuted: "var(--ds-color-text-muted, #454F5B)",
28
- textDisabled: "var(--ds-color-text-disabled, #B6BEC8)",
29
- // Border & Surface
30
- border: "var(--ds-color-border, #D3D8DE)",
31
- borderFocus: "var(--ds-color-border-focus, #E8530A)",
8
+ // ── Brand Main Colors ─────────────────────────────────────────────────────
9
+ primary: "var(--ds-color-primary, #DA2128)", // Main/Red = red/6
10
+ primaryDark: "var(--ds-color-primary-dark, #C61F24)", // red/7
11
+ primaryLight: "var(--ds-color-primary-light, #FBE9EA)", // red/1
12
+ accent: "var(--ds-color-accent, #FAA61A)", // Main/Orange = orange/6
13
+ accentDark: "var(--ds-color-accent-dark, #DC8B05)", // orange/7
14
+ accentLight: "var(--ds-color-accent-light, #FFF6E5)", // orange/1
15
+ mainYellow: "#FFDD00", // Main/Yellow = yellow/6
16
+ brandBlack: "#333333", // Brand/Black
17
+ // ── Status / Semantic ─────────────────────────────────────────────────────
18
+ success: "var(--ds-color-success, #22955D)", // green/6
19
+ successBg: "var(--ds-color-success-bg, #E9F4EF)", // green/1
20
+ warning: "var(--ds-color-warning, #F56600)", // volcano/6
21
+ warningBg: "var(--ds-color-warning-bg, #FEF0E5)", // volcano/1
22
+ danger: "var(--ds-color-danger, #DA2128)", // red/6
23
+ dangerBg: "var(--ds-color-danger-bg, #FBE9EA)", // red/1
24
+ info: "var(--ds-color-info, #0A6DC7)", // blue/6
25
+ infoBg: "var(--ds-color-info-bg, #E7F0F9)", // blue/1
26
+ // ── Text ──────────────────────────────────────────────────────────────────
27
+ text: "var(--ds-color-text, #111927)", // Neutral/10
28
+ textMuted: "var(--ds-color-text-muted, #4D5761)", // Neutral/7
29
+ textDisabled: "var(--ds-color-text-disabled, #9DA4AE)", // Neutral/5
30
+ // ── Border & Surface ──────────────────────────────────────────────────────
31
+ border: "var(--ds-color-border, #E5E7EB)", // Neutral/3
32
+ borderFocus: "var(--ds-color-border-focus, #DA2128)", // primary
32
33
  surface: "var(--ds-color-surface, #FFFFFF)",
33
- surfaceAlt: "var(--ds-color-surface-alt, #F8F9FA)",
34
+ surfaceAlt: "var(--ds-color-surface-alt, #F9FAFB)", // Neutral/1
34
35
  overlay: "rgba(0, 0, 0, 0.3)",
35
- // Neutral (slate-like) scale
36
- slate50: "#F8F9FA",
37
- slate100: "#EAEEF2",
38
- slate200: "#D3D8DE",
39
- slate300: "#B6BEC8",
40
- slate400: "#7B7B7B",
41
- slate500: "#454F5B",
42
- slate600: "#334155",
43
- slate700: "#2D3748",
44
- slate800: "#212B36",
45
- slate900: "#0F172A",
36
+ // ── Overlay ───────────────────────────────────────────────────────────────
37
+ overlayBlack80: "rgba(0, 0, 0, 0.8)",
38
+ overlayBlack40: "rgba(0, 0, 0, 0.4)",
39
+ overlayWhite80: "rgba(255, 255, 255, 0.8)",
40
+ overlayWhite40: "rgba(255, 255, 255, 0.4)",
41
+ // ── Neutral (slate) scale — Neutral Palette ───────────────────────────────
42
+ slate50: "#F9FAFB", // Neutral/1
43
+ slate100: "#F3F4F6", // Neutral/2
44
+ slate200: "#E5E7EB", // Neutral/3
45
+ slate300: "#D2D6DB", // Neutral/4
46
+ slate400: "#9DA4AE", // Neutral/5
47
+ slate500: "#6C737F", // Neutral/6
48
+ slate600: "#4D5761", // Neutral/7
49
+ slate700: "#384250", // Neutral/8
50
+ slate800: "#1F2A37", // Neutral/9
51
+ slate900: "#111927", // Neutral/10
52
+ // ── Yellow Palette ────────────────────────────────────────────────────────
53
+ yellow: {
54
+ 1: "#FFFCE6",
55
+ 2: "#FFF4B0",
56
+ 3: "#FFEF8A",
57
+ 4: "#FFE854",
58
+ 5: "#FFE433",
59
+ 6: "#FFDD00", // Main/Yellow
60
+ 7: "#E8C900",
61
+ 8: "#B59D00",
62
+ 9: "#8C7A00",
63
+ 10: "#6B5D00",
64
+ },
65
+ // ── Orange Palette ────────────────────────────────────────────────────────
66
+ orange: {
67
+ 1: "#FFF6E5",
68
+ 2: "#FFEED1",
69
+ 3: "#FFE3B2",
70
+ 4: "#FFD080",
71
+ 5: "#FFBC4B",
72
+ 6: "#FAA61A", // Main/Orange
73
+ 7: "#DC8B05",
74
+ 8: "#AA6B04",
75
+ 9: "#784B03",
76
+ 10: "#503202",
77
+ },
78
+ // ── Volcano Palette ───────────────────────────────────────────────────────
79
+ volcano: {
80
+ 1: "#FEF0E5",
81
+ 2: "#FDE0CC",
82
+ 3: "#FBC299",
83
+ 4: "#F9A366",
84
+ 5: "#F78533",
85
+ 6: "#F56600", // Warning
86
+ 7: "#AB4700",
87
+ 8: "#7B3300",
88
+ 9: "#4A1F00",
89
+ 10: "#190A00",
90
+ },
91
+ // ── Red Palette ───────────────────────────────────────────────────────────
92
+ red: {
93
+ 1: "#FBE9EA",
94
+ 2: "#F4BABC",
95
+ 3: "#EE999C",
96
+ 4: "#E66B6F",
97
+ 5: "#E14E53",
98
+ 6: "#DA2128", // Main/Red — primary
99
+ 7: "#C61F24",
100
+ 8: "#9B181C",
101
+ 9: "#781316",
102
+ 10: "#5C0E11",
103
+ },
104
+ // ── Blue Palette ──────────────────────────────────────────────────────────
105
+ blue: {
106
+ 1: "#E7F0F9",
107
+ 2: "#B3D2EE",
108
+ 3: "#8EBCE5",
109
+ 4: "#5B9DD9",
110
+ 5: "#3B8AD2",
111
+ 6: "#0A6DC7", // Info
112
+ 7: "#0963B5",
113
+ 8: "#074D8D",
114
+ 9: "#063C6D",
115
+ 10: "#042E54",
116
+ },
117
+ // ── Daybreak Blue Palette ─────────────────────────────────────────────────
118
+ daybreakBlue: {
119
+ 1: "#E7F0F9",
120
+ 2: "#B3D2EE",
121
+ 3: "#8EBCE5",
122
+ 4: "#5B9DD9",
123
+ 5: "#3B8AD2",
124
+ 6: "#0A6DC7",
125
+ 7: "#0963B5",
126
+ 8: "#074D8D",
127
+ 9: "#063C6D",
128
+ 10: "#042E54",
129
+ },
130
+ // ── Green Palette ─────────────────────────────────────────────────────────
131
+ green: {
132
+ 1: "#E9F4EF",
133
+ 2: "#BADECD",
134
+ 3: "#99CEB4",
135
+ 4: "#6BB892",
136
+ 5: "#4EAA7D",
137
+ 6: "#22955D", // Success
138
+ 7: "#1F8855",
139
+ 8: "#186A42",
140
+ 9: "#135233",
141
+ 10: "#0E3F27",
142
+ },
143
+ // ── Polar Green Palette ───────────────────────────────────────────────────
144
+ polarGreen: {
145
+ 1: "#F6FFED",
146
+ 2: "#D9F7BE",
147
+ 3: "#B7EB8F",
148
+ 4: "#95DE64",
149
+ 5: "#73D13D",
150
+ 6: "#52C41A",
151
+ 7: "#389E0D",
152
+ 8: "#237804",
153
+ 9: "#135200",
154
+ 10: "#092B00",
155
+ },
156
+ // ── Purple Palette ────────────────────────────────────────────────────────
157
+ purple: {
158
+ 1: "#F4F0FA",
159
+ 2: "#DBD0F0",
160
+ 3: "#CABAE8",
161
+ 4: "#B29ADE",
162
+ 5: "#A386D7",
163
+ 6: "#8C68CD",
164
+ 7: "#7F5FBB",
165
+ 8: "#634A92",
166
+ 9: "#4D3971",
167
+ 10: "#3B2C56",
168
+ },
169
+ // ── Neutral Palette ───────────────────────────────────────────────────────
170
+ neutral: {
171
+ 1: "#F9FAFB",
172
+ 2: "#F3F4F6",
173
+ 3: "#E5E7EB",
174
+ 4: "#D2D6DB",
175
+ 5: "#9DA4AE",
176
+ 6: "#6C737F",
177
+ 7: "#4D5761",
178
+ 8: "#384250",
179
+ 9: "#1F2A37",
180
+ 10: "#111927",
181
+ },
46
182
  },
47
183
  radius: {
48
184
  sm: "4px",
@@ -60,17 +196,33 @@ export const tokens = {
60
196
  },
61
197
  font: {
62
198
  family: "'Be Vietnam Pro', 'Inter', 'Segoe UI', system-ui, sans-serif",
63
- xs: "0.75rem",
64
- sm: "0.8125rem",
65
- base: "0.875rem",
66
- md: "1rem",
67
- lg: "1.125rem",
68
- xl: "1.25rem",
69
- "2xl": "1.75rem",
199
+ xs: "0.75rem", // 12px — Caption1
200
+ sm: "0.8125rem", // 13px — legacy/internal
201
+ base: "0.875rem", // 14px — Subheadline
202
+ md: "1rem", // 16px — Body
203
+ lg: "1.125rem", // 18px — Body Large
204
+ xl: "1.25rem", // 20px — Title3
205
+ "2xl": "1.5rem", // 24px — Title2
206
+ "3xl": "2rem", // 32px — Large Title
70
207
  weightNormal: 400,
71
208
  weightMedium: 500,
72
209
  weightSemibold: 600,
73
210
  weightBold: 700,
211
+ lineHeight: {
212
+ caption1: "18px",
213
+ subheadline: "20px",
214
+ body: "24px",
215
+ title3: "26px",
216
+ title2: "32px",
217
+ largeTitle: "40px",
218
+ },
219
+ letterSpacing: {
220
+ none: "0px",
221
+ caption: "-0.10px",
222
+ body: "-0.20px",
223
+ title2: "-0.30px",
224
+ heading: "-0.03em",
225
+ },
74
226
  },
75
227
  spacing: {
76
228
  xs: "4px",
package/dist/src/tokens.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA8FH,MAAM,CAAC,MAAM,MAAM,GAAiB;IAClC,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,4EAA4E;QAC5E,OAAO,EAAE,wCAAwC;QACjD,WAAW,EAAE,wCAAwC;QACrD,YAAY,EAAE,wCAAwC;QACtD,kCAAkC;QAClC,MAAM,EAAE,wCAAwC;QAChD,UAAU,EAAE,wCAAwC;QACpD,WAAW,EAAE,wCAAwC;QACrD,SAAS;QACT,OAAO,EAAE,wCAAwC;QACjD,SAAS,EAAE,wCAAwC;QACnD,OAAO,EAAE,wCAAwC;QACjD,SAAS,EAAE,wCAAwC;QACnD,MAAM,EAAE,wCAAwC;QAChD,QAAQ,EAAE,wCAAwC;QAClD,IAAI,EAAE,wCAAwC;QAC9C,MAAM,EAAE,wCAAwC;QAChD,OAAO;QACP,IAAI,EAAE,wCAAwC;QAC9C,SAAS,EAAE,wCAAwC;QACnD,YAAY,EAAE,wCAAwC;QACtD,mBAAmB;QACnB,MAAM,EAAE,wCAAwC;QAChD,WAAW,EAAE,wCAAwC;QACrD,OAAO,EAAE,wCAAwC;QACjD,UAAU,EAAE,wCAAwC;QACpD,OAAO,EAAE,oBAAoB;QAC7B,6BAA6B;QAC7B,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;KACpB;IACD,MAAM,EAAE;QACN,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,QAAQ;KACf;IACD,MAAM,EAAE;QACN,EAAE,EAAE,sDAAsD;QAC1D,EAAE,EAAE,sDAAsD;QAC1D,EAAE,EAAE,wDAAwD;QAC5D,EAAE,EAAE,yDAAyD;KAC9D;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,8DAA8D;QACtE,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,WAAW;QACf,IAAI,EAAE,UAAU;QAChB,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,UAAU;QACd,EAAE,EAAE,SAAS;QACb,KAAK,EAAE,SAAS;QAChB,YAAY,EAAE,GAAG;QACjB,YAAY,EAAE,GAAG;QACjB,cAAc,EAAE,GAAG;QACnB,UAAU,EAAE,GAAG;KAChB;IACD,OAAO,EAAE;QACP,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,KAAK;QACV,GAAG,EAAE,KAAK;QACV,GAAG,EAAE,MAAM;QACX,GAAG,EAAE,MAAM;QACX,GAAG,EAAE,MAAM;QACX,GAAG,EAAE,MAAM;QACX,GAAG,EAAE,MAAM;QACX,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;KACb;IACD,UAAU,EAAE;QACV,IAAI,EAAE,sCAAsC;QAC5C,MAAM,EAAE,sCAAsC;QAC9C,IAAI,EAAE,sCAAsC;KAC7C;CACF,CAAC"}
1
+ {"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/tokens.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shared-design-system",
3
- "version": "1.116.0",
3
+ "version": "1.118.0",
4
4
  "description": "Shared Tailwind Design System & UI Tokens for all Micro Frontends",
5
5
  "main": "dist/src/index.js",
6
6
  "module": "dist/src/index.js",
package/src/theme.css CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  /*
10
10
  * Tailwind v4 no longer applies a gray default border color.
11
- * Reset to neutral-2 so border/border-* classes don't render black.
11
+ * Reset to neutral-3 so border/border-* classes don't render black.
12
12
  */
13
13
  @layer base {
14
14
  *,
@@ -19,102 +19,155 @@
19
19
  }
20
20
 
21
21
  @theme {
22
- /* ─── Brand Colors ──────────────────────────────────────── */
23
- --color-brand-50: #FFF9E5;
24
- --color-brand-500: #FFC20E;
25
- --color-brandRed: #BE1128;
26
- --color-brandYellow: #FFC20E;
27
- --color-brandGrey: #464646;
22
+ /* ─── Brand Main Colors ──────────────────────────────────── */
23
+ --color-brand-red: #DA2128; /* Main/Red = red/6 */
24
+ --color-brand-orange: #FAA61A; /* Main/Orange = orange/6 */
25
+ --color-brand-yellow: #FFDD00; /* Main/Yellow = yellow/6 */
26
+ --color-brand-black: #333333; /* Brand/Black */
28
27
 
29
28
  /* ─── Primary / Secondary ───────────────────────────────── */
30
- --color-primary: var(--theme-color-primary, #ffc20e);
31
- --color-secondary: var(--theme-color-secondary, #eaeef2);
29
+ --color-primary: var(--ds-color-primary, #DA2128);
30
+ --color-secondary: var(--ds-color-surface-alt, #F9FAFB);
32
31
 
33
32
  /* ─── Yellow Scale ──────────────────────────────────────── */
34
- --color-yellow-5: #F7A30A;
35
- --color-yellow-4: #F7B512;
36
- --color-yellow-3: #FCC954;
37
- --color-yellow-2: #FFDF80;
38
- --color-yellow-1: #FFECB3;
39
- --color-yellow-0: #FFF9E5;
33
+ --color-yellow-1: #FFFCE6;
34
+ --color-yellow-2: #FFF4B0;
35
+ --color-yellow-3: #FFEF8A;
36
+ --color-yellow-4: #FFE854;
37
+ --color-yellow-5: #FFE433;
38
+ --color-yellow-6: #FFDD00;
39
+ --color-yellow-7: #E8C900;
40
+ --color-yellow-8: #B59D00;
41
+ --color-yellow-9: #8C7A00;
42
+ --color-yellow-10: #6B5D00;
40
43
 
41
- /* ─── Neutral Scale ─────────────────────────────────────── */
42
- --color-neutral-5: #212B36;
43
- --color-neutral-4: #454F5B;
44
- --color-neutral-3: #B6BEC8;
45
- --color-neutral-2: #D3D8DE;
46
- --color-neutral-1: #EAEEF2;
47
- --color-neutral-0: #F8F9FA;
44
+ /* ─── Orange Scale ──────────────────────────────────────── */
45
+ --color-orange-1: #FFF6E5;
46
+ --color-orange-2: #FFEED1;
47
+ --color-orange-3: #FFE3B2;
48
+ --color-orange-4: #FFD080;
49
+ --color-orange-5: #FFBC4B;
50
+ --color-orange-6: #FAA61A;
51
+ --color-orange-7: #DC8B05;
52
+ --color-orange-8: #AA6B04;
53
+ --color-orange-9: #784B03;
54
+ --color-orange-10: #503202;
48
55
 
49
- /* ─── Purple Scale ──────────────────────────────────────── */
50
- --color-purple-5: #6B1C3A;
51
- --color-purple-4: #A60066;
52
- --color-purple-3: #D10373;
53
- --color-purple-2: #FF99D8;
54
- --color-purple-1: #FFE5F5;
56
+ /* ─── Volcano Scale ─────────────────────────────────────── */
57
+ --color-volcano-1: #FEF0E5;
58
+ --color-volcano-2: #FDE0CC;
59
+ --color-volcano-3: #FBC299;
60
+ --color-volcano-4: #F9A366;
61
+ --color-volcano-5: #F78533;
62
+ --color-volcano-6: #F56600;
63
+ --color-volcano-7: #AB4700;
64
+ --color-volcano-8: #7B3300;
65
+ --color-volcano-9: #4A1F00;
66
+ --color-volcano-10: #190A00;
55
67
 
56
- /* ─── Orange Scale ──────────────────────────────────────── */
57
- --color-orange-5: #D4470F;
58
- --color-orange-4: #F56600;
59
- --color-orange-3: #FF993B;
60
- --color-orange-2: #FFB580;
61
- --color-orange-1: #FFD2B3;
62
- --color-orange-0: #FFF0E5;
68
+ /* ─── Red Scale ─────────────────────────────────────────── */
69
+ --color-red-1: #FBE9EA;
70
+ --color-red-2: #F4BABC;
71
+ --color-red-3: #EE999C;
72
+ --color-red-4: #E66B6F;
73
+ --color-red-5: #E14E53;
74
+ --color-red-6: #DA2128;
75
+ --color-red-7: #C61F24;
76
+ --color-red-8: #9B181C;
77
+ --color-red-9: #781316;
78
+ --color-red-10: #5C0E11;
79
+
80
+ /* ─── Blue Scale ────────────────────────────────────────── */
81
+ --color-blue-1: #E7F0F9;
82
+ --color-blue-2: #B3D2EE;
83
+ --color-blue-3: #8EBCE5;
84
+ --color-blue-4: #5B9DD9;
85
+ --color-blue-5: #3B8AD2;
86
+ --color-blue-6: #0A6DC7;
87
+ --color-blue-7: #0963B5;
88
+ --color-blue-8: #074D8D;
89
+ --color-blue-9: #063C6D;
90
+ --color-blue-10: #042E54;
63
91
 
64
92
  /* ─── Green Scale ───────────────────────────────────────── */
65
- --color-green-5: #337321;
66
- --color-green-4: #4FA800;
67
- --color-green-3: #7DBA00;
68
- --color-green-2: #ABD653;
69
- --color-green-1: #D5E5B4;
70
- --color-green-0: #F2FAE2;
93
+ --color-green-1: #E9F4EF;
94
+ --color-green-2: #BADECD;
95
+ --color-green-3: #99CEB4;
96
+ --color-green-4: #6BB892;
97
+ --color-green-5: #4EAA7D;
98
+ --color-green-6: #22955D;
99
+ --color-green-7: #1F8855;
100
+ --color-green-8: #186A42;
101
+ --color-green-9: #135233;
102
+ --color-green-10: #0E3F27;
71
103
 
72
- /* ─── Blue Scale ────────────────────────────────────────── */
73
- --color-blue-5: #006FD6;
74
- --color-blue-4: #1890FF;
75
- --color-blue-3: #80C2FF;
76
- --color-blue-2: #C2E1FF;
77
- --color-blue-1: #E5F3FF;
104
+ /* ─── Polar Green Scale ─────────────────────────────────── */
105
+ --color-polar-green-1: #F6FFED;
106
+ --color-polar-green-2: #D9F7BE;
107
+ --color-polar-green-3: #B7EB8F;
108
+ --color-polar-green-4: #95DE64;
109
+ --color-polar-green-5: #73D13D;
110
+ --color-polar-green-6: #52C41A;
111
+ --color-polar-green-7: #389E0D;
112
+ --color-polar-green-8: #237804;
113
+ --color-polar-green-9: #135200;
114
+ --color-polar-green-10: #092B00;
78
115
 
79
- /* ─── Red Scale ─────────────────────────────────────────── */
80
- --color-red-5: #AD2624;
81
- --color-red-4: #D12421;
82
- --color-red-3: #EB2629;
83
- --color-red-2: #FCA5A6;
84
- --color-red-1: #FDE8E8;
116
+ /* ─── Purple Scale ──────────────────────────────────────── */
117
+ --color-purple-1: #F4F0FA;
118
+ --color-purple-2: #DBD0F0;
119
+ --color-purple-3: #CABAE8;
120
+ --color-purple-4: #B29ADE;
121
+ --color-purple-5: #A386D7;
122
+ --color-purple-6: #8C68CD;
123
+ --color-purple-7: #7F5FBB;
124
+ --color-purple-8: #634A92;
125
+ --color-purple-9: #4D3971;
126
+ --color-purple-10: #3B2C56;
127
+
128
+ /* ─── Neutral Scale ─────────────────────────────────────── */
129
+ --color-neutral-1: #F9FAFB;
130
+ --color-neutral-2: #F3F4F6;
131
+ --color-neutral-3: #E5E7EB;
132
+ --color-neutral-4: #D2D6DB;
133
+ --color-neutral-5: #9DA4AE;
134
+ --color-neutral-6: #6C737F;
135
+ --color-neutral-7: #4D5761;
136
+ --color-neutral-8: #384250;
137
+ --color-neutral-9: #1F2A37;
138
+ --color-neutral-10: #111927;
85
139
 
86
140
  /* ─── Semantic Colors ───────────────────────────────────── */
87
- --color-primaryMain: #ffc20e;
88
- --color-primaryDark: #f7a30a;
89
- --color-secondaryMain: #eaeef2;
90
- --color-secondaryDark: #d3d8de;
91
- --color-successMain: #4fa800;
92
- --color-successDark: #337321;
93
- --color-errorMain: #d12421;
94
- --color-errorDark: #ad2624;
95
- --color-warningMain: #f56600;
96
- --color-warningDark: #d4470f;
97
- --color-infoMain: #1890ff;
98
- --color-infoDark: #006fd6;
99
-
100
- /* ─── Grey Scale ────────────────────────────────────────── */
101
- --color-grey-50: #fafafa;
102
- --color-grey-100: #f5f5f5;
103
- --color-grey-200: #f8f9fa;
104
- --color-grey-300: #eaeef2;
105
- --color-grey-400: #bdbdbd;
106
- --color-grey-500: #d3d8de;
107
- --color-grey-600: #b6bec8;
108
- --color-grey-700: #454f5b;
109
- --color-grey-800: #7B7B7B;
110
- --color-grey-900: #212b36;
141
+ --color-success: #22955D; /* green/6 */
142
+ --color-success-bg: #E9F4EF; /* green/1 */
143
+ --color-warning: #F56600; /* volcano/6 */
144
+ --color-warning-bg: #FEF0E5; /* volcano/1 */
145
+ --color-danger: #DA2128; /* red/6 */
146
+ --color-danger-bg: #FBE9EA; /* red/1 */
147
+ --color-info: #0A6DC7; /* blue/6 */
148
+ --color-info-bg: #E7F0F9; /* blue/1 */
149
+
150
+ /* ─── Overlay ───────────────────────────────────────────── */
151
+ --color-overlay-black-80: rgba(0, 0, 0, 0.8);
152
+ --color-overlay-black-40: rgba(0, 0, 0, 0.4);
153
+ --color-overlay-white-80: rgba(255, 255, 255, 0.8);
154
+ --color-overlay-white-40: rgba(255, 255, 255, 0.4);
111
155
 
112
156
  /* ─── Typography ────────────────────────────────────────── */
113
- --font-family-sans: Inter, system-ui, sans-serif;
114
- --font-size-normal: 0.875rem;
115
- --font-size-title: 1rem;
116
- --font-size-header-title: 1.75rem;
157
+ --font-family-sans: 'Be Vietnam Pro', 'Inter', 'Segoe UI', system-ui, sans-serif;
158
+ --font-size-caption: 0.75rem; /* 12px — Caption1 */
159
+ --font-size-subheadline: 0.875rem; /* 14px — Subheadline */
160
+ --font-size-body: 1rem; /* 16px — Body */
161
+ --font-size-body-lg: 1.125rem; /* 18px — Body Large */
162
+ --font-size-title3: 1.25rem; /* 20px — Title3 */
163
+ --font-size-title2: 1.5rem; /* 24px — Title2 */
164
+ --font-size-large-title: 2rem; /* 32px — Large Title */
117
165
 
118
166
  /* ─── Border Radius ─────────────────────────────────────── */
119
- --radius-theme: var(--theme-border-radius, 0.5rem);
167
+ --radius-sm: 4px;
168
+ --radius-md: 6px;
169
+ --radius-lg: 8px;
170
+ --radius-xl: 12px;
171
+ --radius-2xl: 16px;
172
+ --radius-full: 9999px;
120
173
  }