@bpjs/design-system 0.0.0-stage → 0.0.2

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 (20) hide show
  1. package/README.md +708 -2
  2. package/dist/bpjs.css +3275 -0
  3. package/dist/bpjs.d.ts +20 -0
  4. package/dist/bpjs.iife.js +1 -0
  5. package/dist/bpjs.js +157 -0
  6. package/dist/bpjs.min.css +2 -0
  7. package/dist/bpjs.nofont.css +3257 -0
  8. package/dist/bpjs.nofont.min.css +2 -0
  9. package/dist/fonts/OFL.txt +93 -0
  10. package/dist/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2 +0 -0
  11. package/dist/fonts/plus-jakarta-sans-latin-wght-normal.woff2 +0 -0
  12. package/dist/icons-map.d.ts +159 -0
  13. package/dist/icons-map.js +166 -0
  14. package/dist/icons.d.ts +155 -0
  15. package/dist/icons.js +157 -0
  16. package/dist/icons.svg +157 -0
  17. package/dist/tokens.css +432 -0
  18. package/dist/tokens.dark.json +359 -0
  19. package/dist/tokens.light.json +359 -0
  20. package/package.json +82 -4
package/dist/tokens.css ADDED
@@ -0,0 +1,432 @@
1
+ /**
2
+ * @bpjs/design-system tokens
3
+ * Generated from Figma by scripts/build-tokens.mjs. Do not edit by hand.
4
+ * Light is the default. Set data-theme="dark" on any element to switch its subtree.
5
+ */
6
+ :root {
7
+ --bpjs-color-blues-10: #f3f8ff;
8
+ --bpjs-color-blues-50: #cfe0f9;
9
+ --bpjs-color-blues-100: #afcbf4;
10
+ --bpjs-color-blues-200: #86b1ef;
11
+ --bpjs-color-blues-300: #5e98ea;
12
+ --bpjs-color-blues-400: #367ee4;
13
+ --bpjs-color-blues-500: #0e64df;
14
+ --bpjs-color-blues-600: #0c53ba;
15
+ --bpjs-color-blues-700: #094395;
16
+ --bpjs-color-blues-800: #073270;
17
+ --bpjs-color-blues-900: #05214a;
18
+ --bpjs-color-blues-1000: #03142d;
19
+ --bpjs-color-gray-dark-50: #b9babb;
20
+ --bpjs-color-gray-dark-100: #979899;
21
+ --bpjs-color-gray-dark-200: #747577;
22
+ --bpjs-color-gray-dark-300: #515355;
23
+ --bpjs-color-gray-dark-400: #2e3033;
24
+ --bpjs-color-gray-dark-500: #26282b;
25
+ --bpjs-color-gray-dark-600: #1f2022;
26
+ --bpjs-color-gray-dark-700: #17181a;
27
+ --bpjs-color-gray-dark-800: #0f1011;
28
+ --bpjs-color-gray-dark-900: #090a0a;
29
+ --bpjs-color-gray-light-50: #fdfdfd;
30
+ --bpjs-color-gray-light-100: #f4f4f4;
31
+ --bpjs-color-gray-light-200: #d6d6d6;
32
+ --bpjs-color-gray-light-300: #c8c8c8;
33
+ --bpjs-color-gray-light-400: #bbbbbb;
34
+ --bpjs-color-gray-light-500: #adadad;
35
+ --bpjs-color-gray-light-600: #909090;
36
+ --bpjs-color-gray-light-700: #737373;
37
+ --bpjs-color-gray-light-800: #575757;
38
+ --bpjs-color-gray-light-900: #3a3a3a;
39
+ --bpjs-color-gray-light-1000: #232323;
40
+ --bpjs-color-greens-10: #eaf7ef;
41
+ --bpjs-color-greens-50: #ccf0d9;
42
+ --bpjs-color-greens-100: #aae6c0;
43
+ --bpjs-color-greens-200: #80daa0;
44
+ --bpjs-color-greens-300: #55ce80;
45
+ --bpjs-color-greens-400: #2bc161;
46
+ --bpjs-color-greens-500: #00b541;
47
+ --bpjs-color-greens-600: #009736;
48
+ --bpjs-color-greens-700: #00792b;
49
+ --bpjs-color-greens-800: #005b21;
50
+ --bpjs-color-greens-900: #003c16;
51
+ --bpjs-color-greens-1000: #00240d;
52
+ --bpjs-color-red-10: #fdeded;
53
+ --bpjs-color-red-50: #facdcc;
54
+ --bpjs-color-red-100: #f7abaa;
55
+ --bpjs-color-red-200: #f28180;
56
+ --bpjs-color-red-300: #ee5855;
57
+ --bpjs-color-red-400: #ea2e2b;
58
+ --bpjs-color-red-500: #e60400;
59
+ --bpjs-color-red-600: #c00300;
60
+ --bpjs-color-red-700: #990300;
61
+ --bpjs-color-red-800: #730200;
62
+ --bpjs-color-red-900: #4d0100;
63
+ --bpjs-color-red-1000: #2e0100;
64
+ --bpjs-color-whites-500: #ffffff;
65
+ --bpjs-color-yellow-50: #fcecd6;
66
+ --bpjs-color-yellow-100: #fae0ba;
67
+ --bpjs-color-yellow-200: #f7d098;
68
+ --bpjs-color-yellow-300: #f5c076;
69
+ --bpjs-color-yellow-400: #f2b153;
70
+ --bpjs-color-yellow-500: #f0a131;
71
+ --bpjs-color-yellow-600: #c88629;
72
+ --bpjs-color-yellow-700: #a06b21;
73
+ --bpjs-color-yellow-800: #785119;
74
+ --bpjs-color-yellow-900: #503610;
75
+ --bpjs-display-2xl-font-size: 72px;
76
+ --bpjs-display-2xl-line-height: 90px;
77
+ --bpjs-display-lg-font-size: 48px;
78
+ --bpjs-display-lg-line-height: 60px;
79
+ --bpjs-display-md-font-size: 36px;
80
+ --bpjs-display-md-line-height: 44px;
81
+ --bpjs-display-sm-font-size: 30px;
82
+ --bpjs-display-sm-line-height: 38px;
83
+ --bpjs-display-xl-font-size: 60px;
84
+ --bpjs-display-xl-line-height: 72px;
85
+ --bpjs-display-xs-font-size: 24px;
86
+ --bpjs-display-xs-line-height: 32px;
87
+ --bpjs-font-family: "Plus Jakarta Sans", system-ui, sans-serif;
88
+ --bpjs-font-weight-black: 900;
89
+ --bpjs-font-weight-bold: 700;
90
+ --bpjs-font-weight-extra-bold: 800;
91
+ --bpjs-font-weight-medium: 500;
92
+ --bpjs-font-weight-regular: 400;
93
+ --bpjs-font-weight-semi-bold: 600;
94
+ --bpjs-number-0: 0px;
95
+ --bpjs-number-2: 2px;
96
+ --bpjs-number-4: 4px;
97
+ --bpjs-number-6: 6px;
98
+ --bpjs-number-8: 8px;
99
+ --bpjs-number-10: 10px;
100
+ --bpjs-number-12: 12px;
101
+ --bpjs-number-14: 14px;
102
+ --bpjs-number-16: 16px;
103
+ --bpjs-number-20: 20px;
104
+ --bpjs-number-24: 24px;
105
+ --bpjs-number-28: 28px;
106
+ --bpjs-number-32: 32px;
107
+ --bpjs-number-40: 40px;
108
+ --bpjs-number-48: 48px;
109
+ --bpjs-number-56: 56px;
110
+ --bpjs-number-64: 64px;
111
+ --bpjs-number-72: 72px;
112
+ --bpjs-number-80: 80px;
113
+ --bpjs-number-128: 128px;
114
+ --bpjs-number-999: 999px;
115
+ --bpjs-text-lg-font-size: 18px;
116
+ --bpjs-text-lg-line-height: 28px;
117
+ --bpjs-text-md-font-size: 16px;
118
+ --bpjs-text-md-line-height: 24px;
119
+ --bpjs-text-sm-font-size: 14px;
120
+ --bpjs-text-sm-line-height: 20px;
121
+ --bpjs-text-xl-font-size: 20px;
122
+ --bpjs-text-xl-line-height: 30px;
123
+ --bpjs-text-xs-font-size: 12px;
124
+ --bpjs-text-xs-line-height: 18px;
125
+ --bpjs-device-desktop-sm: 1440px;
126
+ --bpjs-device-desktop-xl: 1728px;
127
+ --bpjs-device-mobile: 390px;
128
+ --bpjs-device-tablet: 768px;
129
+ --bpjs-layout-grid-color: #ff000008;
130
+ --bpjs-layout-grid-desktop-columns: 12;
131
+ --bpjs-layout-grid-tablet-columns: 8;
132
+ --bpjs-layout-grid-mobile-columns: 4;
133
+ --bpjs-blue-10: var(--bpjs-color-blues-10);
134
+ --bpjs-blue-50: var(--bpjs-color-blues-50);
135
+ --bpjs-blue-100: var(--bpjs-color-blues-100);
136
+ --bpjs-blue-200: var(--bpjs-color-blues-200);
137
+ --bpjs-blue-300: var(--bpjs-color-blues-300);
138
+ --bpjs-blue-400: var(--bpjs-color-blues-400);
139
+ --bpjs-blue-500: var(--bpjs-color-blues-500);
140
+ --bpjs-blue-600: var(--bpjs-color-blues-600);
141
+ --bpjs-blue-700: var(--bpjs-color-blues-700);
142
+ --bpjs-blue-800: var(--bpjs-color-blues-800);
143
+ --bpjs-blue-900: var(--bpjs-color-blues-900);
144
+ --bpjs-blue-1000: var(--bpjs-color-blues-1000);
145
+ --bpjs-brand-10: var(--bpjs-color-blues-10);
146
+ --bpjs-brand-50: var(--bpjs-color-blues-50);
147
+ --bpjs-brand-100: var(--bpjs-color-blues-100);
148
+ --bpjs-brand-200: var(--bpjs-color-blues-200);
149
+ --bpjs-brand-300: var(--bpjs-color-blues-300);
150
+ --bpjs-brand-400: var(--bpjs-color-blues-400);
151
+ --bpjs-brand-500: var(--bpjs-color-blues-500);
152
+ --bpjs-brand-600: var(--bpjs-color-blues-600);
153
+ --bpjs-brand-700: var(--bpjs-color-blues-700);
154
+ --bpjs-brand-800: var(--bpjs-color-blues-800);
155
+ --bpjs-brand-900: var(--bpjs-color-blues-900);
156
+ --bpjs-brand-1000: var(--bpjs-color-blues-1000);
157
+ --bpjs-gray-dark-50: var(--bpjs-color-gray-dark-50);
158
+ --bpjs-gray-dark-100: var(--bpjs-color-gray-dark-100);
159
+ --bpjs-gray-dark-200: var(--bpjs-color-gray-dark-200);
160
+ --bpjs-gray-dark-300: var(--bpjs-color-gray-dark-300);
161
+ --bpjs-gray-dark-400: var(--bpjs-color-gray-dark-400);
162
+ --bpjs-gray-dark-500: var(--bpjs-color-gray-dark-500);
163
+ --bpjs-gray-dark-600: var(--bpjs-color-gray-dark-600);
164
+ --bpjs-gray-dark-700: var(--bpjs-color-gray-dark-700);
165
+ --bpjs-gray-dark-800: var(--bpjs-color-gray-dark-800);
166
+ --bpjs-gray-dark-900: var(--bpjs-color-gray-dark-900);
167
+ --bpjs-gray-light-50: var(--bpjs-color-gray-light-50);
168
+ --bpjs-gray-light-100: var(--bpjs-color-gray-light-100);
169
+ --bpjs-gray-light-200: var(--bpjs-color-gray-light-200);
170
+ --bpjs-gray-light-300: var(--bpjs-color-gray-light-300);
171
+ --bpjs-gray-light-400: var(--bpjs-color-gray-light-400);
172
+ --bpjs-gray-light-500: var(--bpjs-color-gray-light-500);
173
+ --bpjs-gray-light-600: var(--bpjs-color-gray-light-600);
174
+ --bpjs-gray-light-700: var(--bpjs-color-gray-light-700);
175
+ --bpjs-gray-light-800: var(--bpjs-color-gray-light-800);
176
+ --bpjs-gray-light-900: var(--bpjs-color-gray-light-900);
177
+ --bpjs-green-10: var(--bpjs-color-greens-10);
178
+ --bpjs-green-50: var(--bpjs-color-greens-50);
179
+ --bpjs-green-100: var(--bpjs-color-greens-100);
180
+ --bpjs-green-200: var(--bpjs-color-greens-200);
181
+ --bpjs-green-300: var(--bpjs-color-greens-300);
182
+ --bpjs-green-400: var(--bpjs-color-greens-400);
183
+ --bpjs-green-500: var(--bpjs-color-greens-500);
184
+ --bpjs-green-600: var(--bpjs-color-greens-600);
185
+ --bpjs-green-700: var(--bpjs-color-greens-700);
186
+ --bpjs-green-800: var(--bpjs-color-greens-800);
187
+ --bpjs-green-900: var(--bpjs-color-greens-900);
188
+ --bpjs-green-1000: var(--bpjs-color-greens-1000);
189
+ --bpjs-red-10: var(--bpjs-color-red-10);
190
+ --bpjs-red-50: var(--bpjs-color-red-50);
191
+ --bpjs-red-100: var(--bpjs-color-red-100);
192
+ --bpjs-red-200: var(--bpjs-color-red-200);
193
+ --bpjs-red-300: var(--bpjs-color-red-300);
194
+ --bpjs-red-400: var(--bpjs-color-red-400);
195
+ --bpjs-red-500: var(--bpjs-color-red-500);
196
+ --bpjs-red-600: var(--bpjs-color-red-600);
197
+ --bpjs-red-700: var(--bpjs-color-red-700);
198
+ --bpjs-red-800: var(--bpjs-color-red-800);
199
+ --bpjs-red-900: var(--bpjs-color-red-900);
200
+ --bpjs-red-1000: var(--bpjs-color-red-1000);
201
+ --bpjs-yellow-50: var(--bpjs-color-yellow-50);
202
+ --bpjs-yellow-100: var(--bpjs-color-yellow-100);
203
+ --bpjs-yellow-200: var(--bpjs-color-yellow-200);
204
+ --bpjs-yellow-300: var(--bpjs-color-yellow-300);
205
+ --bpjs-yellow-400: var(--bpjs-color-yellow-400);
206
+ --bpjs-yellow-500: var(--bpjs-color-yellow-500);
207
+ --bpjs-yellow-600: var(--bpjs-color-yellow-600);
208
+ --bpjs-yellow-700: var(--bpjs-color-yellow-700);
209
+ --bpjs-yellow-800: var(--bpjs-color-yellow-800);
210
+ --bpjs-yellow-900: var(--bpjs-color-yellow-900);
211
+ --bpjs-spacing-2xl: var(--bpjs-number-32);
212
+ --bpjs-spacing-2xs: var(--bpjs-number-2);
213
+ --bpjs-spacing-4xl: var(--bpjs-number-48);
214
+ --bpjs-spacing-5xl: var(--bpjs-number-56);
215
+ --bpjs-spacing-6: var(--bpjs-number-6);
216
+ --bpjs-spacing-6xl: var(--bpjs-number-64);
217
+ --bpjs-spacing-7xl: var(--bpjs-number-72);
218
+ --bpjs-spacing-10: var(--bpjs-number-10);
219
+ --bpjs-spacing-14: var(--bpjs-number-14);
220
+ --bpjs-spacing-20: var(--bpjs-number-20);
221
+ --bpjs-spacing-28: var(--bpjs-number-28);
222
+ --bpjs-spacing-40: var(--bpjs-number-40);
223
+ --bpjs-spacing-lg: var(--bpjs-number-16);
224
+ --bpjs-spacing-md: var(--bpjs-number-12);
225
+ --bpjs-spacing-none: var(--bpjs-number-0);
226
+ --bpjs-spacing-sm: var(--bpjs-number-8);
227
+ --bpjs-spacing-xl: var(--bpjs-number-24);
228
+ --bpjs-spacing-xs: var(--bpjs-number-4);
229
+ --bpjs-radius-2xl: var(--bpjs-number-16);
230
+ --bpjs-radius-2xs: var(--bpjs-number-2);
231
+ --bpjs-radius-lg: var(--bpjs-number-12);
232
+ --bpjs-radius-md: var(--bpjs-number-10);
233
+ --bpjs-radius-none: var(--bpjs-number-0);
234
+ --bpjs-radius-round: var(--bpjs-number-999);
235
+ --bpjs-radius-sm: var(--bpjs-number-8);
236
+ --bpjs-radius-xs: var(--bpjs-number-4);
237
+ --bpjs-display-2xl-bold: var(--bpjs-font-weight-bold) var(--bpjs-display-2xl-font-size)/var(--bpjs-display-2xl-line-height) var(--bpjs-font-family);
238
+ --bpjs-display-2xl-extra-bold: var(--bpjs-font-weight-extra-bold) var(--bpjs-display-2xl-font-size)/var(--bpjs-display-2xl-line-height) var(--bpjs-font-family);
239
+ --bpjs-display-2xl-medium: var(--bpjs-font-weight-medium) var(--bpjs-display-2xl-font-size)/var(--bpjs-display-2xl-line-height) var(--bpjs-font-family);
240
+ --bpjs-display-2xl-regular: var(--bpjs-font-weight-regular) var(--bpjs-display-2xl-font-size)/var(--bpjs-display-2xl-line-height) var(--bpjs-font-family);
241
+ --bpjs-display-2xl-semibold: var(--bpjs-font-weight-semi-bold) var(--bpjs-display-2xl-font-size)/var(--bpjs-display-2xl-line-height) var(--bpjs-font-family);
242
+ --bpjs-display-lg-bold: var(--bpjs-font-weight-bold) var(--bpjs-display-lg-font-size)/var(--bpjs-display-lg-line-height) var(--bpjs-font-family);
243
+ --bpjs-display-lg-extra-bold: var(--bpjs-font-weight-extra-bold) var(--bpjs-display-lg-font-size)/var(--bpjs-display-lg-line-height) var(--bpjs-font-family);
244
+ --bpjs-display-lg-medium: var(--bpjs-font-weight-medium) var(--bpjs-display-lg-font-size)/var(--bpjs-display-lg-line-height) var(--bpjs-font-family);
245
+ --bpjs-display-lg-regular: var(--bpjs-font-weight-regular) var(--bpjs-display-lg-font-size)/var(--bpjs-display-lg-line-height) var(--bpjs-font-family);
246
+ --bpjs-display-lg-semibold: var(--bpjs-font-weight-semi-bold) var(--bpjs-display-lg-font-size)/var(--bpjs-display-lg-line-height) var(--bpjs-font-family);
247
+ --bpjs-display-md-bold: var(--bpjs-font-weight-bold) var(--bpjs-display-md-font-size)/var(--bpjs-display-md-line-height) var(--bpjs-font-family);
248
+ --bpjs-display-md-extra-bold: var(--bpjs-font-weight-extra-bold) var(--bpjs-display-md-font-size)/var(--bpjs-display-md-line-height) var(--bpjs-font-family);
249
+ --bpjs-display-md-medium: var(--bpjs-font-weight-medium) var(--bpjs-display-md-font-size)/var(--bpjs-display-md-line-height) var(--bpjs-font-family);
250
+ --bpjs-display-md-regular: var(--bpjs-font-weight-regular) var(--bpjs-display-md-font-size)/var(--bpjs-display-md-line-height) var(--bpjs-font-family);
251
+ --bpjs-display-md-semibold: var(--bpjs-font-weight-semi-bold) var(--bpjs-display-md-font-size)/var(--bpjs-display-md-line-height) var(--bpjs-font-family);
252
+ --bpjs-display-sm-bold: var(--bpjs-font-weight-bold) var(--bpjs-display-sm-font-size)/var(--bpjs-display-sm-line-height) var(--bpjs-font-family);
253
+ --bpjs-display-sm-extra-bold: var(--bpjs-font-weight-extra-bold) var(--bpjs-display-sm-font-size)/var(--bpjs-display-sm-line-height) var(--bpjs-font-family);
254
+ --bpjs-display-sm-medium: var(--bpjs-font-weight-medium) var(--bpjs-display-sm-font-size)/var(--bpjs-display-sm-line-height) var(--bpjs-font-family);
255
+ --bpjs-display-sm-regular: var(--bpjs-font-weight-regular) var(--bpjs-display-sm-font-size)/var(--bpjs-display-sm-line-height) var(--bpjs-font-family);
256
+ --bpjs-display-sm-semibold: var(--bpjs-font-weight-semi-bold) var(--bpjs-display-sm-font-size)/var(--bpjs-display-sm-line-height) var(--bpjs-font-family);
257
+ --bpjs-display-xl-bold: var(--bpjs-font-weight-bold) var(--bpjs-display-xl-font-size)/var(--bpjs-display-xl-line-height) var(--bpjs-font-family);
258
+ --bpjs-display-xl-extra-bold: var(--bpjs-font-weight-extra-bold) var(--bpjs-display-xl-font-size)/var(--bpjs-display-xl-line-height) var(--bpjs-font-family);
259
+ --bpjs-display-xl-medium: var(--bpjs-font-weight-medium) var(--bpjs-display-xl-font-size)/var(--bpjs-display-xl-line-height) var(--bpjs-font-family);
260
+ --bpjs-display-xl-regular: var(--bpjs-font-weight-regular) var(--bpjs-display-xl-font-size)/var(--bpjs-display-xl-line-height) var(--bpjs-font-family);
261
+ --bpjs-display-xl-semibold: var(--bpjs-font-weight-semi-bold) var(--bpjs-display-xl-font-size)/var(--bpjs-display-xl-line-height) var(--bpjs-font-family);
262
+ --bpjs-display-xs-bold: var(--bpjs-font-weight-bold) var(--bpjs-display-xs-font-size)/var(--bpjs-display-xs-line-height) var(--bpjs-font-family);
263
+ --bpjs-display-xs-extra-bold: var(--bpjs-font-weight-extra-bold) var(--bpjs-display-xs-font-size)/var(--bpjs-display-xs-line-height) var(--bpjs-font-family);
264
+ --bpjs-display-xs-medium: var(--bpjs-font-weight-medium) var(--bpjs-display-xs-font-size)/var(--bpjs-display-xs-line-height) var(--bpjs-font-family);
265
+ --bpjs-display-xs-regular: var(--bpjs-font-weight-regular) var(--bpjs-display-xs-font-size)/var(--bpjs-display-xs-line-height) var(--bpjs-font-family);
266
+ --bpjs-display-xs-semibold: var(--bpjs-font-weight-semi-bold) var(--bpjs-display-xs-font-size)/var(--bpjs-display-xs-line-height) var(--bpjs-font-family);
267
+ --bpjs-text-lg-bold: var(--bpjs-font-weight-bold) var(--bpjs-text-lg-font-size)/var(--bpjs-text-lg-line-height) var(--bpjs-font-family);
268
+ --bpjs-text-lg-extra-bold: var(--bpjs-font-weight-extra-bold) var(--bpjs-text-lg-font-size)/var(--bpjs-text-lg-line-height) var(--bpjs-font-family);
269
+ --bpjs-text-lg-medium: var(--bpjs-font-weight-medium) var(--bpjs-text-lg-font-size)/var(--bpjs-text-lg-line-height) var(--bpjs-font-family);
270
+ --bpjs-text-lg-regular: var(--bpjs-font-weight-regular) var(--bpjs-text-lg-font-size)/var(--bpjs-text-lg-line-height) var(--bpjs-font-family);
271
+ --bpjs-text-lg-semibold: var(--bpjs-font-weight-semi-bold) var(--bpjs-text-lg-font-size)/var(--bpjs-text-lg-line-height) var(--bpjs-font-family);
272
+ --bpjs-text-md-bold: var(--bpjs-font-weight-bold) var(--bpjs-text-md-font-size)/var(--bpjs-text-md-line-height) var(--bpjs-font-family);
273
+ --bpjs-text-md-extra-bold: var(--bpjs-font-weight-extra-bold) var(--bpjs-text-md-font-size)/var(--bpjs-text-md-line-height) var(--bpjs-font-family);
274
+ --bpjs-text-md-medium: var(--bpjs-font-weight-medium) var(--bpjs-text-md-font-size)/var(--bpjs-text-md-line-height) var(--bpjs-font-family);
275
+ --bpjs-text-md-regular: var(--bpjs-font-weight-regular) var(--bpjs-text-md-font-size)/var(--bpjs-text-md-line-height) var(--bpjs-font-family);
276
+ --bpjs-text-md-semibold: var(--bpjs-font-weight-semi-bold) var(--bpjs-text-md-font-size)/var(--bpjs-text-md-line-height) var(--bpjs-font-family);
277
+ --bpjs-text-sm-bold: var(--bpjs-font-weight-bold) var(--bpjs-text-sm-font-size)/var(--bpjs-text-sm-line-height) var(--bpjs-font-family);
278
+ --bpjs-text-sm-extra-bold: var(--bpjs-font-weight-extra-bold) var(--bpjs-text-sm-font-size)/var(--bpjs-text-sm-line-height) var(--bpjs-font-family);
279
+ --bpjs-text-sm-medium: var(--bpjs-font-weight-medium) var(--bpjs-text-sm-font-size)/var(--bpjs-text-sm-line-height) var(--bpjs-font-family);
280
+ --bpjs-text-sm-regular: var(--bpjs-font-weight-regular) var(--bpjs-text-sm-font-size)/var(--bpjs-text-sm-line-height) var(--bpjs-font-family);
281
+ --bpjs-text-sm-semibold: var(--bpjs-font-weight-semi-bold) var(--bpjs-text-sm-font-size)/var(--bpjs-text-sm-line-height) var(--bpjs-font-family);
282
+ --bpjs-text-xl-bold: var(--bpjs-font-weight-bold) var(--bpjs-text-xl-font-size)/var(--bpjs-text-xl-line-height) var(--bpjs-font-family);
283
+ --bpjs-text-xl-extra-bold: var(--bpjs-font-weight-extra-bold) var(--bpjs-text-xl-font-size)/var(--bpjs-text-xl-line-height) var(--bpjs-font-family);
284
+ --bpjs-text-xl-medium: var(--bpjs-font-weight-medium) var(--bpjs-text-xl-font-size)/var(--bpjs-text-xl-line-height) var(--bpjs-font-family);
285
+ --bpjs-text-xl-regular: var(--bpjs-font-weight-regular) var(--bpjs-text-xl-font-size)/var(--bpjs-text-xl-line-height) var(--bpjs-font-family);
286
+ --bpjs-text-xl-semibold: var(--bpjs-font-weight-semi-bold) var(--bpjs-text-xl-font-size)/var(--bpjs-text-xl-line-height) var(--bpjs-font-family);
287
+ --bpjs-text-xs-bold: var(--bpjs-font-weight-bold) var(--bpjs-text-xs-font-size)/var(--bpjs-text-xs-line-height) var(--bpjs-font-family);
288
+ --bpjs-text-xs-extra-bold: var(--bpjs-font-weight-extra-bold) var(--bpjs-text-xs-font-size)/var(--bpjs-text-xs-line-height) var(--bpjs-font-family);
289
+ --bpjs-text-xs-medium: var(--bpjs-font-weight-medium) var(--bpjs-text-xs-font-size)/var(--bpjs-text-xs-line-height) var(--bpjs-font-family);
290
+ --bpjs-text-xs-regular: var(--bpjs-font-weight-regular) var(--bpjs-text-xs-font-size)/var(--bpjs-text-xs-line-height) var(--bpjs-font-family);
291
+ --bpjs-text-xs-semibold: var(--bpjs-font-weight-semi-bold) var(--bpjs-text-xs-font-size)/var(--bpjs-text-xs-line-height) var(--bpjs-font-family);
292
+ --bpjs-layout-grid-desktop-gutter: var(--bpjs-number-32);
293
+ --bpjs-layout-grid-desktop-margin: var(--bpjs-number-32);
294
+ --bpjs-layout-grid-tablet-gutter: var(--bpjs-number-24);
295
+ --bpjs-layout-grid-tablet-margin: var(--bpjs-number-24);
296
+ --bpjs-layout-grid-mobile-gutter: var(--bpjs-number-16);
297
+ --bpjs-layout-grid-mobile-margin: var(--bpjs-number-16);
298
+ --bpjs-icon-size-xs: var(--bpjs-number-12);
299
+ --bpjs-icon-size-sm: var(--bpjs-number-16);
300
+ --bpjs-icon-size-md: var(--bpjs-number-20);
301
+ --bpjs-icon-size-lg: var(--bpjs-number-24);
302
+ --bpjs-icon-size-xl: var(--bpjs-number-32);
303
+ --bpjs-brand-radius-components: var(--bpjs-radius-md);
304
+ }
305
+
306
+ :root, [data-theme="light"] {
307
+ color-scheme: light;
308
+ --bpjs-shadow-md: 0px 3px 14px 0px #00000014;
309
+ --bpjs-shadow-sm: 0px 1px 3px 0px #00000014, 0px 1px 2px -1px #00000014;
310
+ --bpjs-background-gradient-primary: linear-gradient(180deg, #0e64df 2.4%, #0752be 86.54%);
311
+ --bpjs-border-gradient-low: linear-gradient(180deg, #00000000 14.42%, #0000001a 100%);
312
+ --bpjs-border-gradient-primary: linear-gradient(180deg, #ffffff73 0%, #ffffff00 100%);
313
+ --bpjs-border-very-low: #d6d6d6b3;
314
+ --bpjs-shadow-border-gray: 0px 0px 0px 1px var(--bpjs-border-very-low);
315
+ --bpjs-background-black: var(--bpjs-color-gray-dark-900);
316
+ --bpjs-background-black-static: var(--bpjs-color-gray-dark-900);
317
+ --bpjs-background-gray: var(--bpjs-color-gray-light-200);
318
+ --bpjs-background-high: var(--bpjs-color-gray-light-50);
319
+ --bpjs-background-low: var(--bpjs-color-gray-light-300);
320
+ --bpjs-background-medium: var(--bpjs-color-gray-light-100);
321
+ --bpjs-background-white: var(--bpjs-color-whites-500);
322
+ --bpjs-background-white-static: var(--bpjs-color-whites-500);
323
+ --bpjs-border-black: var(--bpjs-color-gray-dark-900);
324
+ --bpjs-border-black-static: var(--bpjs-color-gray-dark-900);
325
+ --bpjs-border-high: var(--bpjs-color-gray-light-600);
326
+ --bpjs-border-low: var(--bpjs-color-gray-light-400);
327
+ --bpjs-border-medium: var(--bpjs-color-gray-light-500);
328
+ --bpjs-border-white: var(--bpjs-color-whites-500);
329
+ --bpjs-border-white-static: var(--bpjs-color-whites-500);
330
+ --bpjs-text-white: var(--bpjs-color-whites-500);
331
+ --bpjs-background-gradient-danger: linear-gradient(180deg, var(--bpjs-red-500) 0%, var(--bpjs-red-600) 100%);
332
+ --bpjs-background-brand-primary: var(--bpjs-brand-500);
333
+ --bpjs-background-brand-primary-soft: var(--bpjs-brand-200);
334
+ --bpjs-background-brand-secondary: var(--bpjs-brand-700);
335
+ --bpjs-background-danger-hard: var(--bpjs-red-500);
336
+ --bpjs-background-danger-soft: var(--bpjs-red-10);
337
+ --bpjs-background-info-hard: var(--bpjs-blue-500);
338
+ --bpjs-background-info-soft: var(--bpjs-blue-10);
339
+ --bpjs-background-success-hard: var(--bpjs-green-500);
340
+ --bpjs-background-success-soft: var(--bpjs-green-10);
341
+ --bpjs-background-warning-hard: var(--bpjs-yellow-500);
342
+ --bpjs-background-warning-soft: var(--bpjs-yellow-50);
343
+ --bpjs-border-brand-primary: var(--bpjs-brand-500);
344
+ --bpjs-border-brand-secondary: var(--bpjs-brand-700);
345
+ --bpjs-border-danger-hard: var(--bpjs-red-500);
346
+ --bpjs-border-danger-soft: var(--bpjs-red-300);
347
+ --bpjs-border-info-hard: var(--bpjs-blue-500);
348
+ --bpjs-border-info-soft: var(--bpjs-blue-300);
349
+ --bpjs-border-success-hard: var(--bpjs-green-500);
350
+ --bpjs-border-success-soft: var(--bpjs-green-300);
351
+ --bpjs-border-warning-hard: var(--bpjs-yellow-500);
352
+ --bpjs-border-warning-soft: var(--bpjs-yellow-300);
353
+ --bpjs-focus-danger: var(--bpjs-red-100);
354
+ --bpjs-focus-normal: var(--bpjs-brand-100);
355
+ --bpjs-text-black: var(--bpjs-gray-dark-900);
356
+ --bpjs-text-brand: var(--bpjs-brand-500);
357
+ --bpjs-text-danger: var(--bpjs-red-500);
358
+ --bpjs-text-high: var(--bpjs-gray-dark-900);
359
+ --bpjs-text-info: var(--bpjs-blue-500);
360
+ --bpjs-text-low: var(--bpjs-gray-light-600);
361
+ --bpjs-text-medium: var(--bpjs-gray-light-700);
362
+ --bpjs-text-success: var(--bpjs-green-600);
363
+ --bpjs-text-very-low: var(--bpjs-gray-light-500);
364
+ --bpjs-text-warning: var(--bpjs-yellow-600);
365
+ --bpjs-shadow-border-brand: 0px 0px 0px 1px var(--bpjs-border-brand-primary);
366
+ --bpjs-shadow-focus: 0px 0px 0px 2px var(--bpjs-focus-normal);
367
+ --bpjs-shadow-focus-danger: 0px 0px 0px 2px var(--bpjs-focus-danger);
368
+ }
369
+
370
+ [data-theme="dark"] {
371
+ color-scheme: dark;
372
+ --bpjs-shadow-md: 0px 3px 14px 0px #00000014;
373
+ --bpjs-shadow-sm: 0px 1px 3px 0px #00000014, 0px 1px 2px -1px #00000014;
374
+ --bpjs-background-gradient-primary: linear-gradient(180deg, #0e64df 2.4%, #0752be 86.54%);
375
+ --bpjs-border-gradient-low: linear-gradient(180deg, #00000000 14.42%, #0000001a 100%);
376
+ --bpjs-border-gradient-primary: linear-gradient(180deg, #ffffff73 0%, #ffffff00 100%);
377
+ --bpjs-border-very-low: #26282bb3;
378
+ --bpjs-shadow-border-gray: 0px 0px 0px 1px var(--bpjs-border-very-low);
379
+ --bpjs-background-black: var(--bpjs-color-whites-500);
380
+ --bpjs-background-black-static: var(--bpjs-color-gray-dark-900);
381
+ --bpjs-background-high: var(--bpjs-color-gray-dark-700);
382
+ --bpjs-background-low: var(--bpjs-color-gray-dark-900);
383
+ --bpjs-background-medium: var(--bpjs-color-gray-dark-800);
384
+ --bpjs-background-warning-hard: var(--bpjs-color-yellow-400);
385
+ --bpjs-background-white: var(--bpjs-color-gray-dark-900);
386
+ --bpjs-background-white-static: var(--bpjs-color-whites-500);
387
+ --bpjs-border-black: var(--bpjs-color-whites-500);
388
+ --bpjs-border-black-static: var(--bpjs-color-gray-dark-900);
389
+ --bpjs-border-brand-primary: var(--bpjs-color-blues-500);
390
+ --bpjs-border-brand-secondary: var(--bpjs-color-blues-700);
391
+ --bpjs-border-high: var(--bpjs-color-gray-dark-200);
392
+ --bpjs-border-low: var(--bpjs-color-gray-dark-400);
393
+ --bpjs-border-medium: var(--bpjs-color-gray-dark-300);
394
+ --bpjs-border-white: var(--bpjs-color-gray-dark-900);
395
+ --bpjs-border-white-static: var(--bpjs-color-whites-500);
396
+ --bpjs-text-white: var(--bpjs-color-whites-500);
397
+ --bpjs-shadow-border-brand: 0px 0px 0px 1px var(--bpjs-border-brand-primary);
398
+ --bpjs-background-gradient-danger: linear-gradient(180deg, var(--bpjs-red-500) 0%, var(--bpjs-red-600) 100%);
399
+ --bpjs-background-brand-primary: var(--bpjs-brand-500);
400
+ --bpjs-background-brand-primary-soft: var(--bpjs-brand-800);
401
+ --bpjs-background-brand-secondary: var(--bpjs-brand-700);
402
+ --bpjs-background-danger-hard: var(--bpjs-red-500);
403
+ --bpjs-background-danger-soft: var(--bpjs-red-1000);
404
+ --bpjs-background-gray: var(--bpjs-gray-dark-300);
405
+ --bpjs-background-info-hard: var(--bpjs-blue-400);
406
+ --bpjs-background-info-soft: var(--bpjs-blue-1000);
407
+ --bpjs-background-success-hard: var(--bpjs-green-600);
408
+ --bpjs-background-success-soft: var(--bpjs-green-1000);
409
+ --bpjs-background-warning-soft: var(--bpjs-yellow-900);
410
+ --bpjs-border-danger-hard: var(--bpjs-red-400);
411
+ --bpjs-border-danger-soft: var(--bpjs-red-800);
412
+ --bpjs-border-info-hard: var(--bpjs-blue-400);
413
+ --bpjs-border-info-soft: var(--bpjs-blue-800);
414
+ --bpjs-border-success-hard: var(--bpjs-green-400);
415
+ --bpjs-border-success-soft: var(--bpjs-green-800);
416
+ --bpjs-border-warning-hard: var(--bpjs-yellow-400);
417
+ --bpjs-border-warning-soft: var(--bpjs-yellow-800);
418
+ --bpjs-focus-danger: var(--bpjs-red-800);
419
+ --bpjs-focus-normal: var(--bpjs-brand-800);
420
+ --bpjs-text-black: var(--bpjs-gray-dark-900);
421
+ --bpjs-text-brand: var(--bpjs-brand-400);
422
+ --bpjs-text-danger: var(--bpjs-red-400);
423
+ --bpjs-text-high: var(--bpjs-gray-light-50);
424
+ --bpjs-text-info: var(--bpjs-blue-400);
425
+ --bpjs-text-low: var(--bpjs-gray-light-600);
426
+ --bpjs-text-medium: var(--bpjs-gray-light-400);
427
+ --bpjs-text-success: var(--bpjs-green-400);
428
+ --bpjs-text-very-low: var(--bpjs-gray-light-700);
429
+ --bpjs-text-warning: var(--bpjs-yellow-500);
430
+ --bpjs-shadow-focus: 0px 0px 0px 2px var(--bpjs-focus-normal);
431
+ --bpjs-shadow-focus-danger: 0px 0px 0px 2px var(--bpjs-focus-danger);
432
+ }