shared-design-system 1.117.0 → 1.119.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 (28) 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.js +20 -17
  13. package/dist/src/components/InputComponents.js.map +1 -1
  14. package/dist/src/components/MultiSelect.js +16 -15
  15. package/dist/src/components/MultiSelect.js.map +1 -1
  16. package/dist/src/components/ReadOnlyField.js +1 -1
  17. package/dist/src/components/Select.js +16 -15
  18. package/dist/src/components/Select.js.map +1 -1
  19. package/dist/src/components/Tag.js +9 -9
  20. package/dist/src/components/Tag.js.map +1 -1
  21. package/dist/src/components/TagInput.js +1 -1
  22. package/dist/src/components/Typography.js +18 -18
  23. package/dist/src/components/Typography.js.map +1 -1
  24. package/dist/src/tokens.d.ts +46 -0
  25. package/dist/src/tokens.js +195 -43
  26. package/dist/src/tokens.js.map +1 -1
  27. package/package.json +1 -1
  28. package/src/theme.css +135 -82
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
  }