@bpjs/design-system 0.0.0-stage → 0.0.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 +708 -2
- package/dist/bpjs.css +3275 -0
- package/dist/bpjs.d.ts +20 -0
- package/dist/bpjs.iife.js +1 -0
- package/dist/bpjs.js +157 -0
- package/dist/bpjs.min.css +2 -0
- package/dist/bpjs.nofont.css +3257 -0
- package/dist/bpjs.nofont.min.css +2 -0
- package/dist/fonts/OFL.txt +93 -0
- package/dist/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2 +0 -0
- package/dist/fonts/plus-jakarta-sans-latin-wght-normal.woff2 +0 -0
- package/dist/icons-map.d.ts +159 -0
- package/dist/icons-map.js +166 -0
- package/dist/icons.d.ts +155 -0
- package/dist/icons.js +157 -0
- package/dist/icons.svg +157 -0
- package/dist/tokens.css +432 -0
- package/dist/tokens.dark.json +359 -0
- package/dist/tokens.light.json +359 -0
- package/package.json +82 -4
|
@@ -0,0 +1,359 @@
|
|
|
1
|
+
{
|
|
2
|
+
"bpjs-color-blues-10": "#f3f8ff",
|
|
3
|
+
"bpjs-color-blues-50": "#cfe0f9",
|
|
4
|
+
"bpjs-color-blues-100": "#afcbf4",
|
|
5
|
+
"bpjs-color-blues-200": "#86b1ef",
|
|
6
|
+
"bpjs-color-blues-300": "#5e98ea",
|
|
7
|
+
"bpjs-color-blues-400": "#367ee4",
|
|
8
|
+
"bpjs-color-blues-500": "#0e64df",
|
|
9
|
+
"bpjs-color-blues-600": "#0c53ba",
|
|
10
|
+
"bpjs-color-blues-700": "#094395",
|
|
11
|
+
"bpjs-color-blues-800": "#073270",
|
|
12
|
+
"bpjs-color-blues-900": "#05214a",
|
|
13
|
+
"bpjs-color-blues-1000": "#03142d",
|
|
14
|
+
"bpjs-color-gray-dark-50": "#b9babb",
|
|
15
|
+
"bpjs-color-gray-dark-100": "#979899",
|
|
16
|
+
"bpjs-color-gray-dark-200": "#747577",
|
|
17
|
+
"bpjs-color-gray-dark-300": "#515355",
|
|
18
|
+
"bpjs-color-gray-dark-400": "#2e3033",
|
|
19
|
+
"bpjs-color-gray-dark-500": "#26282b",
|
|
20
|
+
"bpjs-color-gray-dark-600": "#1f2022",
|
|
21
|
+
"bpjs-color-gray-dark-700": "#17181a",
|
|
22
|
+
"bpjs-color-gray-dark-800": "#0f1011",
|
|
23
|
+
"bpjs-color-gray-dark-900": "#090a0a",
|
|
24
|
+
"bpjs-color-gray-light-50": "#fdfdfd",
|
|
25
|
+
"bpjs-color-gray-light-100": "#f4f4f4",
|
|
26
|
+
"bpjs-color-gray-light-200": "#d6d6d6",
|
|
27
|
+
"bpjs-color-gray-light-300": "#c8c8c8",
|
|
28
|
+
"bpjs-color-gray-light-400": "#bbbbbb",
|
|
29
|
+
"bpjs-color-gray-light-500": "#adadad",
|
|
30
|
+
"bpjs-color-gray-light-600": "#909090",
|
|
31
|
+
"bpjs-color-gray-light-700": "#737373",
|
|
32
|
+
"bpjs-color-gray-light-800": "#575757",
|
|
33
|
+
"bpjs-color-gray-light-900": "#3a3a3a",
|
|
34
|
+
"bpjs-color-gray-light-1000": "#232323",
|
|
35
|
+
"bpjs-color-greens-10": "#eaf7ef",
|
|
36
|
+
"bpjs-color-greens-50": "#ccf0d9",
|
|
37
|
+
"bpjs-color-greens-100": "#aae6c0",
|
|
38
|
+
"bpjs-color-greens-200": "#80daa0",
|
|
39
|
+
"bpjs-color-greens-300": "#55ce80",
|
|
40
|
+
"bpjs-color-greens-400": "#2bc161",
|
|
41
|
+
"bpjs-color-greens-500": "#00b541",
|
|
42
|
+
"bpjs-color-greens-600": "#009736",
|
|
43
|
+
"bpjs-color-greens-700": "#00792b",
|
|
44
|
+
"bpjs-color-greens-800": "#005b21",
|
|
45
|
+
"bpjs-color-greens-900": "#003c16",
|
|
46
|
+
"bpjs-color-greens-1000": "#00240d",
|
|
47
|
+
"bpjs-color-red-10": "#fdeded",
|
|
48
|
+
"bpjs-color-red-50": "#facdcc",
|
|
49
|
+
"bpjs-color-red-100": "#f7abaa",
|
|
50
|
+
"bpjs-color-red-200": "#f28180",
|
|
51
|
+
"bpjs-color-red-300": "#ee5855",
|
|
52
|
+
"bpjs-color-red-400": "#ea2e2b",
|
|
53
|
+
"bpjs-color-red-500": "#e60400",
|
|
54
|
+
"bpjs-color-red-600": "#c00300",
|
|
55
|
+
"bpjs-color-red-700": "#990300",
|
|
56
|
+
"bpjs-color-red-800": "#730200",
|
|
57
|
+
"bpjs-color-red-900": "#4d0100",
|
|
58
|
+
"bpjs-color-red-1000": "#2e0100",
|
|
59
|
+
"bpjs-color-whites-500": "#ffffff",
|
|
60
|
+
"bpjs-color-yellow-50": "#fcecd6",
|
|
61
|
+
"bpjs-color-yellow-100": "#fae0ba",
|
|
62
|
+
"bpjs-color-yellow-200": "#f7d098",
|
|
63
|
+
"bpjs-color-yellow-300": "#f5c076",
|
|
64
|
+
"bpjs-color-yellow-400": "#f2b153",
|
|
65
|
+
"bpjs-color-yellow-500": "#f0a131",
|
|
66
|
+
"bpjs-color-yellow-600": "#c88629",
|
|
67
|
+
"bpjs-color-yellow-700": "#a06b21",
|
|
68
|
+
"bpjs-color-yellow-800": "#785119",
|
|
69
|
+
"bpjs-color-yellow-900": "#503610",
|
|
70
|
+
"bpjs-display-2xl-font-size": "72px",
|
|
71
|
+
"bpjs-display-2xl-line-height": "90px",
|
|
72
|
+
"bpjs-display-lg-font-size": "48px",
|
|
73
|
+
"bpjs-display-lg-line-height": "60px",
|
|
74
|
+
"bpjs-display-md-font-size": "36px",
|
|
75
|
+
"bpjs-display-md-line-height": "44px",
|
|
76
|
+
"bpjs-display-sm-font-size": "30px",
|
|
77
|
+
"bpjs-display-sm-line-height": "38px",
|
|
78
|
+
"bpjs-display-xl-font-size": "60px",
|
|
79
|
+
"bpjs-display-xl-line-height": "72px",
|
|
80
|
+
"bpjs-display-xs-font-size": "24px",
|
|
81
|
+
"bpjs-display-xs-line-height": "32px",
|
|
82
|
+
"bpjs-font-family": "\"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
83
|
+
"bpjs-font-weight-black": 900,
|
|
84
|
+
"bpjs-font-weight-bold": 700,
|
|
85
|
+
"bpjs-font-weight-extra-bold": 800,
|
|
86
|
+
"bpjs-font-weight-medium": 500,
|
|
87
|
+
"bpjs-font-weight-regular": 400,
|
|
88
|
+
"bpjs-font-weight-semi-bold": 600,
|
|
89
|
+
"bpjs-number-0": "0px",
|
|
90
|
+
"bpjs-number-2": "2px",
|
|
91
|
+
"bpjs-number-4": "4px",
|
|
92
|
+
"bpjs-number-6": "6px",
|
|
93
|
+
"bpjs-number-8": "8px",
|
|
94
|
+
"bpjs-number-10": "10px",
|
|
95
|
+
"bpjs-number-12": "12px",
|
|
96
|
+
"bpjs-number-14": "14px",
|
|
97
|
+
"bpjs-number-16": "16px",
|
|
98
|
+
"bpjs-number-20": "20px",
|
|
99
|
+
"bpjs-number-24": "24px",
|
|
100
|
+
"bpjs-number-28": "28px",
|
|
101
|
+
"bpjs-number-32": "32px",
|
|
102
|
+
"bpjs-number-40": "40px",
|
|
103
|
+
"bpjs-number-48": "48px",
|
|
104
|
+
"bpjs-number-56": "56px",
|
|
105
|
+
"bpjs-number-64": "64px",
|
|
106
|
+
"bpjs-number-72": "72px",
|
|
107
|
+
"bpjs-number-80": "80px",
|
|
108
|
+
"bpjs-number-128": "128px",
|
|
109
|
+
"bpjs-number-999": "999px",
|
|
110
|
+
"bpjs-text-lg-font-size": "18px",
|
|
111
|
+
"bpjs-text-lg-line-height": "28px",
|
|
112
|
+
"bpjs-text-md-font-size": "16px",
|
|
113
|
+
"bpjs-text-md-line-height": "24px",
|
|
114
|
+
"bpjs-text-sm-font-size": "14px",
|
|
115
|
+
"bpjs-text-sm-line-height": "20px",
|
|
116
|
+
"bpjs-text-xl-font-size": "20px",
|
|
117
|
+
"bpjs-text-xl-line-height": "30px",
|
|
118
|
+
"bpjs-text-xs-font-size": "12px",
|
|
119
|
+
"bpjs-text-xs-line-height": "18px",
|
|
120
|
+
"bpjs-blue-10": "#f3f8ff",
|
|
121
|
+
"bpjs-blue-50": "#cfe0f9",
|
|
122
|
+
"bpjs-blue-100": "#afcbf4",
|
|
123
|
+
"bpjs-blue-200": "#86b1ef",
|
|
124
|
+
"bpjs-blue-300": "#5e98ea",
|
|
125
|
+
"bpjs-blue-400": "#367ee4",
|
|
126
|
+
"bpjs-blue-500": "#0e64df",
|
|
127
|
+
"bpjs-blue-600": "#0c53ba",
|
|
128
|
+
"bpjs-blue-700": "#094395",
|
|
129
|
+
"bpjs-blue-800": "#073270",
|
|
130
|
+
"bpjs-blue-900": "#05214a",
|
|
131
|
+
"bpjs-blue-1000": "#03142d",
|
|
132
|
+
"bpjs-brand-10": "#f3f8ff",
|
|
133
|
+
"bpjs-brand-50": "#cfe0f9",
|
|
134
|
+
"bpjs-brand-100": "#afcbf4",
|
|
135
|
+
"bpjs-brand-200": "#86b1ef",
|
|
136
|
+
"bpjs-brand-300": "#5e98ea",
|
|
137
|
+
"bpjs-brand-400": "#367ee4",
|
|
138
|
+
"bpjs-brand-500": "#0e64df",
|
|
139
|
+
"bpjs-brand-600": "#0c53ba",
|
|
140
|
+
"bpjs-brand-700": "#094395",
|
|
141
|
+
"bpjs-brand-800": "#073270",
|
|
142
|
+
"bpjs-brand-900": "#05214a",
|
|
143
|
+
"bpjs-brand-1000": "#03142d",
|
|
144
|
+
"bpjs-brand-radius-components": "10px",
|
|
145
|
+
"bpjs-gray-dark-50": "#b9babb",
|
|
146
|
+
"bpjs-gray-dark-100": "#979899",
|
|
147
|
+
"bpjs-gray-dark-200": "#747577",
|
|
148
|
+
"bpjs-gray-dark-300": "#515355",
|
|
149
|
+
"bpjs-gray-dark-400": "#2e3033",
|
|
150
|
+
"bpjs-gray-dark-500": "#26282b",
|
|
151
|
+
"bpjs-gray-dark-600": "#1f2022",
|
|
152
|
+
"bpjs-gray-dark-700": "#17181a",
|
|
153
|
+
"bpjs-gray-dark-800": "#0f1011",
|
|
154
|
+
"bpjs-gray-dark-900": "#090a0a",
|
|
155
|
+
"bpjs-gray-light-50": "#fdfdfd",
|
|
156
|
+
"bpjs-gray-light-100": "#f4f4f4",
|
|
157
|
+
"bpjs-gray-light-200": "#d6d6d6",
|
|
158
|
+
"bpjs-gray-light-300": "#c8c8c8",
|
|
159
|
+
"bpjs-gray-light-400": "#bbbbbb",
|
|
160
|
+
"bpjs-gray-light-500": "#adadad",
|
|
161
|
+
"bpjs-gray-light-600": "#909090",
|
|
162
|
+
"bpjs-gray-light-700": "#737373",
|
|
163
|
+
"bpjs-gray-light-800": "#575757",
|
|
164
|
+
"bpjs-gray-light-900": "#3a3a3a",
|
|
165
|
+
"bpjs-green-10": "#eaf7ef",
|
|
166
|
+
"bpjs-green-50": "#ccf0d9",
|
|
167
|
+
"bpjs-green-100": "#aae6c0",
|
|
168
|
+
"bpjs-green-200": "#80daa0",
|
|
169
|
+
"bpjs-green-300": "#55ce80",
|
|
170
|
+
"bpjs-green-400": "#2bc161",
|
|
171
|
+
"bpjs-green-500": "#00b541",
|
|
172
|
+
"bpjs-green-600": "#009736",
|
|
173
|
+
"bpjs-green-700": "#00792b",
|
|
174
|
+
"bpjs-green-800": "#005b21",
|
|
175
|
+
"bpjs-green-900": "#003c16",
|
|
176
|
+
"bpjs-green-1000": "#00240d",
|
|
177
|
+
"bpjs-red-10": "#fdeded",
|
|
178
|
+
"bpjs-red-50": "#facdcc",
|
|
179
|
+
"bpjs-red-100": "#f7abaa",
|
|
180
|
+
"bpjs-red-200": "#f28180",
|
|
181
|
+
"bpjs-red-300": "#ee5855",
|
|
182
|
+
"bpjs-red-400": "#ea2e2b",
|
|
183
|
+
"bpjs-red-500": "#e60400",
|
|
184
|
+
"bpjs-red-600": "#c00300",
|
|
185
|
+
"bpjs-red-700": "#990300",
|
|
186
|
+
"bpjs-red-800": "#730200",
|
|
187
|
+
"bpjs-red-900": "#4d0100",
|
|
188
|
+
"bpjs-red-1000": "#2e0100",
|
|
189
|
+
"bpjs-yellow-50": "#fcecd6",
|
|
190
|
+
"bpjs-yellow-100": "#fae0ba",
|
|
191
|
+
"bpjs-yellow-200": "#f7d098",
|
|
192
|
+
"bpjs-yellow-300": "#f5c076",
|
|
193
|
+
"bpjs-yellow-400": "#f2b153",
|
|
194
|
+
"bpjs-yellow-500": "#f0a131",
|
|
195
|
+
"bpjs-yellow-600": "#c88629",
|
|
196
|
+
"bpjs-yellow-700": "#a06b21",
|
|
197
|
+
"bpjs-yellow-800": "#785119",
|
|
198
|
+
"bpjs-yellow-900": "#503610",
|
|
199
|
+
"bpjs-spacing-2xl": "32px",
|
|
200
|
+
"bpjs-spacing-2xs": "2px",
|
|
201
|
+
"bpjs-spacing-4xl": "48px",
|
|
202
|
+
"bpjs-spacing-5xl": "56px",
|
|
203
|
+
"bpjs-spacing-6": "6px",
|
|
204
|
+
"bpjs-spacing-6xl": "64px",
|
|
205
|
+
"bpjs-spacing-7xl": "72px",
|
|
206
|
+
"bpjs-spacing-10": "10px",
|
|
207
|
+
"bpjs-spacing-14": "14px",
|
|
208
|
+
"bpjs-spacing-20": "20px",
|
|
209
|
+
"bpjs-spacing-28": "28px",
|
|
210
|
+
"bpjs-spacing-40": "40px",
|
|
211
|
+
"bpjs-spacing-lg": "16px",
|
|
212
|
+
"bpjs-spacing-md": "12px",
|
|
213
|
+
"bpjs-spacing-none": "0px",
|
|
214
|
+
"bpjs-spacing-sm": "8px",
|
|
215
|
+
"bpjs-spacing-xl": "24px",
|
|
216
|
+
"bpjs-spacing-xs": "4px",
|
|
217
|
+
"bpjs-radius-2xl": "16px",
|
|
218
|
+
"bpjs-radius-2xs": "2px",
|
|
219
|
+
"bpjs-radius-lg": "12px",
|
|
220
|
+
"bpjs-radius-md": "10px",
|
|
221
|
+
"bpjs-radius-none": "0px",
|
|
222
|
+
"bpjs-radius-round": "999px",
|
|
223
|
+
"bpjs-radius-sm": "8px",
|
|
224
|
+
"bpjs-radius-xs": "4px",
|
|
225
|
+
"bpjs-device-desktop-sm": "1440px",
|
|
226
|
+
"bpjs-device-desktop-xl": "1728px",
|
|
227
|
+
"bpjs-device-mobile": "390px",
|
|
228
|
+
"bpjs-device-tablet": "768px",
|
|
229
|
+
"bpjs-display-2xl-bold": "700 72px/90px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
230
|
+
"bpjs-display-2xl-extra-bold": "800 72px/90px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
231
|
+
"bpjs-display-2xl-medium": "500 72px/90px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
232
|
+
"bpjs-display-2xl-regular": "400 72px/90px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
233
|
+
"bpjs-display-2xl-semibold": "600 72px/90px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
234
|
+
"bpjs-display-lg-bold": "700 48px/60px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
235
|
+
"bpjs-display-lg-extra-bold": "800 48px/60px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
236
|
+
"bpjs-display-lg-medium": "500 48px/60px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
237
|
+
"bpjs-display-lg-regular": "400 48px/60px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
238
|
+
"bpjs-display-lg-semibold": "600 48px/60px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
239
|
+
"bpjs-display-md-bold": "700 36px/44px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
240
|
+
"bpjs-display-md-extra-bold": "800 36px/44px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
241
|
+
"bpjs-display-md-medium": "500 36px/44px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
242
|
+
"bpjs-display-md-regular": "400 36px/44px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
243
|
+
"bpjs-display-md-semibold": "600 36px/44px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
244
|
+
"bpjs-display-sm-bold": "700 30px/38px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
245
|
+
"bpjs-display-sm-extra-bold": "800 30px/38px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
246
|
+
"bpjs-display-sm-medium": "500 30px/38px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
247
|
+
"bpjs-display-sm-regular": "400 30px/38px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
248
|
+
"bpjs-display-sm-semibold": "600 30px/38px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
249
|
+
"bpjs-display-xl-bold": "700 60px/72px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
250
|
+
"bpjs-display-xl-extra-bold": "800 60px/72px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
251
|
+
"bpjs-display-xl-medium": "500 60px/72px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
252
|
+
"bpjs-display-xl-regular": "400 60px/72px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
253
|
+
"bpjs-display-xl-semibold": "600 60px/72px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
254
|
+
"bpjs-display-xs-bold": "700 24px/32px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
255
|
+
"bpjs-display-xs-extra-bold": "800 24px/32px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
256
|
+
"bpjs-display-xs-medium": "500 24px/32px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
257
|
+
"bpjs-display-xs-regular": "400 24px/32px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
258
|
+
"bpjs-display-xs-semibold": "600 24px/32px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
259
|
+
"bpjs-text-lg-bold": "700 18px/28px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
260
|
+
"bpjs-text-lg-extra-bold": "800 18px/28px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
261
|
+
"bpjs-text-lg-medium": "500 18px/28px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
262
|
+
"bpjs-text-lg-regular": "400 18px/28px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
263
|
+
"bpjs-text-lg-semibold": "600 18px/28px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
264
|
+
"bpjs-text-md-bold": "700 16px/24px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
265
|
+
"bpjs-text-md-extra-bold": "800 16px/24px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
266
|
+
"bpjs-text-md-medium": "500 16px/24px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
267
|
+
"bpjs-text-md-regular": "400 16px/24px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
268
|
+
"bpjs-text-md-semibold": "600 16px/24px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
269
|
+
"bpjs-text-sm-bold": "700 14px/20px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
270
|
+
"bpjs-text-sm-extra-bold": "800 14px/20px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
271
|
+
"bpjs-text-sm-medium": "500 14px/20px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
272
|
+
"bpjs-text-sm-regular": "400 14px/20px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
273
|
+
"bpjs-text-sm-semibold": "600 14px/20px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
274
|
+
"bpjs-text-xl-bold": "700 20px/30px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
275
|
+
"bpjs-text-xl-extra-bold": "800 20px/30px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
276
|
+
"bpjs-text-xl-medium": "500 20px/30px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
277
|
+
"bpjs-text-xl-regular": "400 20px/30px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
278
|
+
"bpjs-text-xl-semibold": "600 20px/30px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
279
|
+
"bpjs-text-xs-bold": "700 12px/18px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
280
|
+
"bpjs-text-xs-extra-bold": "800 12px/18px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
281
|
+
"bpjs-text-xs-medium": "500 12px/18px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
282
|
+
"bpjs-text-xs-regular": "400 12px/18px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
283
|
+
"bpjs-text-xs-semibold": "600 12px/18px \"Plus Jakarta Sans\", system-ui, sans-serif",
|
|
284
|
+
"bpjs-layout-grid-color": "#ff000008",
|
|
285
|
+
"bpjs-layout-grid-desktop-columns": 12,
|
|
286
|
+
"bpjs-layout-grid-desktop-gutter": "32px",
|
|
287
|
+
"bpjs-layout-grid-desktop-margin": "32px",
|
|
288
|
+
"bpjs-layout-grid-tablet-columns": 8,
|
|
289
|
+
"bpjs-layout-grid-tablet-gutter": "24px",
|
|
290
|
+
"bpjs-layout-grid-tablet-margin": "24px",
|
|
291
|
+
"bpjs-layout-grid-mobile-columns": 4,
|
|
292
|
+
"bpjs-layout-grid-mobile-gutter": "16px",
|
|
293
|
+
"bpjs-layout-grid-mobile-margin": "16px",
|
|
294
|
+
"bpjs-icon-size-xs": "12px",
|
|
295
|
+
"bpjs-icon-size-sm": "16px",
|
|
296
|
+
"bpjs-icon-size-md": "20px",
|
|
297
|
+
"bpjs-icon-size-lg": "24px",
|
|
298
|
+
"bpjs-icon-size-xl": "32px",
|
|
299
|
+
"bpjs-shadow-border-brand": "0px 0px 0px 1px #0e64df",
|
|
300
|
+
"bpjs-shadow-border-gray": "0px 0px 0px 1px #d6d6d6b3",
|
|
301
|
+
"bpjs-shadow-focus": "0px 0px 0px 2px #afcbf4",
|
|
302
|
+
"bpjs-shadow-focus-danger": "0px 0px 0px 2px #f7abaa",
|
|
303
|
+
"bpjs-shadow-md": "0px 3px 14px 0px #00000014",
|
|
304
|
+
"bpjs-shadow-sm": "0px 1px 3px 0px #00000014, 0px 1px 2px -1px #00000014",
|
|
305
|
+
"bpjs-background-gradient-danger": "linear-gradient(180deg, #e60400 0%, #c00300 100%)",
|
|
306
|
+
"bpjs-background-gradient-primary": "linear-gradient(180deg, #0e64df 2.4%, #0752be 86.54%)",
|
|
307
|
+
"bpjs-border-gradient-low": "linear-gradient(180deg, #00000000 14.42%, #0000001a 100%)",
|
|
308
|
+
"bpjs-border-gradient-primary": "linear-gradient(180deg, #ffffff73 0%, #ffffff00 100%)",
|
|
309
|
+
"bpjs-background-black": "#090a0a",
|
|
310
|
+
"bpjs-background-black-static": "#090a0a",
|
|
311
|
+
"bpjs-background-brand-primary": "#0e64df",
|
|
312
|
+
"bpjs-background-brand-primary-soft": "#86b1ef",
|
|
313
|
+
"bpjs-background-brand-secondary": "#094395",
|
|
314
|
+
"bpjs-background-danger-hard": "#e60400",
|
|
315
|
+
"bpjs-background-danger-soft": "#fdeded",
|
|
316
|
+
"bpjs-background-gray": "#d6d6d6",
|
|
317
|
+
"bpjs-background-high": "#fdfdfd",
|
|
318
|
+
"bpjs-background-info-hard": "#0e64df",
|
|
319
|
+
"bpjs-background-info-soft": "#f3f8ff",
|
|
320
|
+
"bpjs-background-low": "#c8c8c8",
|
|
321
|
+
"bpjs-background-medium": "#f4f4f4",
|
|
322
|
+
"bpjs-background-success-hard": "#00b541",
|
|
323
|
+
"bpjs-background-success-soft": "#eaf7ef",
|
|
324
|
+
"bpjs-background-warning-hard": "#f0a131",
|
|
325
|
+
"bpjs-background-warning-soft": "#fcecd6",
|
|
326
|
+
"bpjs-background-white": "#ffffff",
|
|
327
|
+
"bpjs-background-white-static": "#ffffff",
|
|
328
|
+
"bpjs-border-black": "#090a0a",
|
|
329
|
+
"bpjs-border-black-static": "#090a0a",
|
|
330
|
+
"bpjs-border-brand-primary": "#0e64df",
|
|
331
|
+
"bpjs-border-brand-secondary": "#094395",
|
|
332
|
+
"bpjs-border-danger-hard": "#e60400",
|
|
333
|
+
"bpjs-border-danger-soft": "#ee5855",
|
|
334
|
+
"bpjs-border-high": "#909090",
|
|
335
|
+
"bpjs-border-info-hard": "#0e64df",
|
|
336
|
+
"bpjs-border-info-soft": "#5e98ea",
|
|
337
|
+
"bpjs-border-low": "#bbbbbb",
|
|
338
|
+
"bpjs-border-medium": "#adadad",
|
|
339
|
+
"bpjs-border-success-hard": "#00b541",
|
|
340
|
+
"bpjs-border-success-soft": "#55ce80",
|
|
341
|
+
"bpjs-border-very-low": "#d6d6d6b3",
|
|
342
|
+
"bpjs-border-warning-hard": "#f0a131",
|
|
343
|
+
"bpjs-border-warning-soft": "#f5c076",
|
|
344
|
+
"bpjs-border-white": "#ffffff",
|
|
345
|
+
"bpjs-border-white-static": "#ffffff",
|
|
346
|
+
"bpjs-focus-danger": "#f7abaa",
|
|
347
|
+
"bpjs-focus-normal": "#afcbf4",
|
|
348
|
+
"bpjs-text-black": "#090a0a",
|
|
349
|
+
"bpjs-text-brand": "#0e64df",
|
|
350
|
+
"bpjs-text-danger": "#e60400",
|
|
351
|
+
"bpjs-text-high": "#090a0a",
|
|
352
|
+
"bpjs-text-info": "#0e64df",
|
|
353
|
+
"bpjs-text-low": "#909090",
|
|
354
|
+
"bpjs-text-medium": "#737373",
|
|
355
|
+
"bpjs-text-success": "#009736",
|
|
356
|
+
"bpjs-text-very-low": "#adadad",
|
|
357
|
+
"bpjs-text-warning": "#c88629",
|
|
358
|
+
"bpjs-text-white": "#ffffff"
|
|
359
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,84 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bpjs/design-system",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Framework-agnostic BPJS design system: design tokens, CSS components and plain-JS behaviors generated from Figma.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/irfnyas/bpjs-design-system-library.git"
|
|
10
|
+
},
|
|
11
|
+
"module": "./dist/bpjs.js",
|
|
12
|
+
"types": "./dist/bpjs.d.ts",
|
|
13
|
+
"unpkg": "./dist/bpjs.iife.js",
|
|
14
|
+
"jsdelivr": "./dist/bpjs.iife.js",
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"types": "./dist/bpjs.d.ts",
|
|
18
|
+
"import": "./dist/bpjs.js"
|
|
19
|
+
},
|
|
20
|
+
"./iife": "./dist/bpjs.iife.js",
|
|
21
|
+
"./icons": {
|
|
22
|
+
"types": "./dist/icons.d.ts",
|
|
23
|
+
"import": "./dist/icons.js"
|
|
24
|
+
},
|
|
25
|
+
"./icons/map": {
|
|
26
|
+
"types": "./dist/icons-map.d.ts",
|
|
27
|
+
"import": "./dist/icons-map.js"
|
|
28
|
+
},
|
|
29
|
+
"./icons.svg": "./dist/icons.svg",
|
|
30
|
+
"./css": "./dist/bpjs.css",
|
|
31
|
+
"./css/min": "./dist/bpjs.min.css",
|
|
32
|
+
"./css/nofont": "./dist/bpjs.nofont.css",
|
|
33
|
+
"./css/nofont/min": "./dist/bpjs.nofont.min.css",
|
|
34
|
+
"./fonts/*": "./dist/fonts/*",
|
|
35
|
+
"./tokens.css": "./dist/tokens.css",
|
|
36
|
+
"./tokens/light.json": "./dist/tokens.light.json",
|
|
37
|
+
"./tokens/dark.json": "./dist/tokens.dark.json",
|
|
38
|
+
"./package.json": "./package.json"
|
|
39
|
+
},
|
|
40
|
+
"files": [
|
|
41
|
+
"dist"
|
|
42
|
+
],
|
|
43
|
+
"publishConfig": {
|
|
44
|
+
"access": "public"
|
|
45
|
+
},
|
|
46
|
+
"sideEffects": [
|
|
47
|
+
"**/*.css",
|
|
48
|
+
"./dist/bpjs.iife.js"
|
|
49
|
+
],
|
|
50
|
+
"scripts": {
|
|
51
|
+
"tokens:convert": "node scripts/figma-to-dtcg.mjs",
|
|
52
|
+
"build:tokens": "node scripts/figma-to-dtcg.mjs && node scripts/build-tokens.mjs",
|
|
53
|
+
"build:icons": "node scripts/build-icons.mjs",
|
|
54
|
+
"build:fonts": "node scripts/build-fonts.mjs",
|
|
55
|
+
"build:css": "node scripts/build-css.mjs",
|
|
56
|
+
"build:js": "node scripts/build-js.mjs",
|
|
57
|
+
"prebuild": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
|
|
58
|
+
"build": "npm run build:tokens && npm run build:icons && npm run build:fonts && npm run build:css && npm run build:js",
|
|
59
|
+
"prepare": "npm run build",
|
|
60
|
+
"prepublishOnly": "npm test",
|
|
61
|
+
"pretest": "npm run build",
|
|
62
|
+
"test": "vitest run",
|
|
63
|
+
"storybook": "npm run build:tokens && npm run build:icons && npm run build:fonts && storybook dev -p 6006 --no-open",
|
|
64
|
+
"build-storybook": "npm run build:tokens && npm run build:icons && npm run build:fonts && storybook build",
|
|
65
|
+
"check:fonts": "node scripts/check-fonts.mjs"
|
|
66
|
+
},
|
|
67
|
+
"devDependencies": {
|
|
68
|
+
"@fontsource-variable/plus-jakarta-sans": "5.3.0",
|
|
69
|
+
"@storybook/addon-a11y": "10.6.6",
|
|
70
|
+
"@storybook/addon-docs": "10.6.6",
|
|
71
|
+
"@storybook/addon-themes": "10.6.6",
|
|
72
|
+
"@storybook/addon-vitest": "10.6.6",
|
|
73
|
+
"@storybook/html-vite": "10.6.6",
|
|
74
|
+
"@vitest/browser": "5.1.0",
|
|
75
|
+
"@vitest/browser-playwright": "5.1.0",
|
|
76
|
+
"jsdom": "31.0.0",
|
|
77
|
+
"lightningcss": "1.33.0",
|
|
78
|
+
"playwright": "1.65.0",
|
|
79
|
+
"storybook": "10.6.6",
|
|
80
|
+
"style-dictionary": "5.8.0",
|
|
81
|
+
"vite": "8.3.6",
|
|
82
|
+
"vitest": "5.1.0"
|
|
83
|
+
}
|
|
84
|
+
}
|