@dss-kit/ui-kit 0.0.18 → 0.0.20

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 (3) hide show
  1. package/dist/index.d.ts.map +1 -1
  2. package/dist/root.css +346 -0
  3. package/package.json +5 -2
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAEnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAC;AAEnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
package/dist/root.css ADDED
@@ -0,0 +1,346 @@
1
+ @charset "UTF-8";
2
+ :root {
3
+ --accent-10: #001033;
4
+ --accent-20: #002166;
5
+ --accent-30: #003199;
6
+ --accent-40: #0042cc;
7
+ --accent-50: #0052ff;
8
+ --accent-50-8: rgba(0, 82, 255, .08);
9
+ --accent-50-12: rgba(0, 82, 255, .12);
10
+ --accent-60: #3375ff;
11
+ --accent-70: #6697ff;
12
+ --accent-80: #99baff;
13
+ --accent-90: #ccdcff;
14
+ --accent-96: #ebf1ff;
15
+ --accent-98: #f5f8ff;
16
+ --neutral-10: #131720;
17
+ --neutral-15: #1c2230;
18
+ --neutral-20: #262e40;
19
+ --neutral-30: #394560;
20
+ --neutral-40: #4c5c80;
21
+ --neutral-50: #5f73a0;
22
+ --neutral-60: #7f8fb3;
23
+ --neutral-60-8: rgba(127, 143, 179, .08);
24
+ --neutral-60-12: rgba(127, 143, 179, .12);
25
+ --neutral-60-16: rgba(127, 143, 179, .16);
26
+ --neutral-70: #9fabc6;
27
+ --neutral-80: #bfc7d9;
28
+ --neutral-86: #d2d8e4;
29
+ --neutral-90: #dfe3ec;
30
+ --neutral-90-10: rgba(223, 227, 236, .1);
31
+ --neutral-90-15: rgba(223, 227, 236, .15);
32
+ --neutral-90-20: rgba(223, 227, 236, .2);
33
+ --neutral-92: #e5e9f0;
34
+ --neutral-96: #f2f4f7;
35
+ --neutral-98: #f9f9fb;
36
+ --neutral-100: #ffffff;
37
+ --negative-10: #320101;
38
+ --negative-20: #640202;
39
+ --negative-30: #950404;
40
+ --negative-40: #c70505;
41
+ --negative-50: #f90606;
42
+ --negative-60: #fa3838;
43
+ --negative-60-8: rgba(250, 56, 56, .08);
44
+ --negative-60-12: rgba(250, 56, 56, .12);
45
+ --negative-70: #fb6a6a;
46
+ --negative-80: #fd9b9b;
47
+ --negative-90: #fecdcd;
48
+ --negative-92: #fed7d7;
49
+ --negative-96: #ffebeb;
50
+ --negative-98: #fff5f5;
51
+ --positive-10: #11270c;
52
+ --positive-20: #234e18;
53
+ --positive-30: #347425;
54
+ --positive-40: #469b31;
55
+ --positive-50: #57c23d;
56
+ --positive-50-8: rgba(87, 194, 61, .08);
57
+ --positive-50-12: rgba(87, 194, 61, .12);
58
+ --positive-60: #79ce64;
59
+ --positive-70: #9ada8b;
60
+ --positive-80: #bce7b1;
61
+ --positive-90: #ddf3d8;
62
+ --positive-92: #e4f5e0;
63
+ --positive-96: #f2faef;
64
+ --warning-10: #663d00;
65
+ --warning-20: #663d00;
66
+ --warning-30: #985b01;
67
+ --warning-40: #cb7a01;
68
+ --warning-50: #fe9801;
69
+ --warning-60: #fead34;
70
+ --warning-60-8: rgba(254, 173, 52, .08);
71
+ --warning-60-12: rgba(254, 173, 52, .12);
72
+ --warning-70: #fec167;
73
+ --warning-80: #ffd699;
74
+ --warning-90: #ffeacc;
75
+ --warning-92: #ffefd6;
76
+ --warning-96: #fff7eb;
77
+ --border-accent-primary: var(--accent-60);
78
+ --border-accent-primary-hover: var(--accent-50);
79
+ --border-accent-secondary: var(--accent-90);
80
+ --border-accent-secondary-hover: var(--accent-80);
81
+ --border-negative-primary: var(--negative-60);
82
+ --border-negative-primary-hover: var(--negative-50);
83
+ --border-negative-secondary: var(--negative-90);
84
+ --border-negative-secondary-hover: var(--negative-80);
85
+ --border-positive-primary: var(--positive-60);
86
+ --border-positive-primary-hover: var(--positive-50);
87
+ --border-positive-secondary: var(--positive-90);
88
+ --border-positive-secondary-hover: var(--positive-80);
89
+ --border-warning-primary: var(--warning-60);
90
+ --border-warning-primary-hover: var(--warning-50);
91
+ --border-warning-secondary: var(--warning-90);
92
+ --border-warning-secondary-hover: var(--warning-80);
93
+ --border-neutral-primary: var(--neutral-60);
94
+ --border-neutral-primary-hover: var(--neutral-50);
95
+ --border-neutral-alpha-basic: var(--neutral-60-12);
96
+ --border-neutral-alpha-low: var(--neutral-60-8);
97
+ --border-neutral-alpha-high: var(--neutral-60-16);
98
+ --text-primary: var(--neutral-20);
99
+ --text-primary-hover: var(--neutral-15);
100
+ --text-secondary: var(--neutral-40);
101
+ --text-secondary-hover: var(--neutral-30);
102
+ --text-tertiary: var(--neutral-60);
103
+ --text-tertiary-hover: var(--neutral-50);
104
+ --text-positive: var(--positive-50);
105
+ --text-positive-hover: var(--positive-40);
106
+ --text-negative: var(--negative-60);
107
+ --text-negative-hover: var(--negative-50);
108
+ --text-warning: var(--warning-60);
109
+ --text-warning-hover: var(--warning-50);
110
+ --text-accent: var(--accent-60);
111
+ --text-accent-hover: var(--accent-50);
112
+ --text-inverse: var(--neutral-100);
113
+ --icon-primary: var(--neutral-20);
114
+ --icon-primary-hover: var(--neutral-15);
115
+ --icon-secondary: var(--neutral-40);
116
+ --icon-secondary-hover: var(--neutral-30);
117
+ --icon-tertiary: var(--neutral-60);
118
+ --icon-tertiary-hover: var(--neutral-50);
119
+ --icon-positive: var(--positive-50);
120
+ --icon-positive-hover: var(--positive-40);
121
+ --icon-negative: var(--negative-60);
122
+ --icon-negative-hover: var(--negative-50);
123
+ --icon-warning: var(--warning-60);
124
+ --icon-warning-hover: var(--warning-50);
125
+ --icon-accent: var(--accent-60);
126
+ --icon-accent-hover: var(--accent-50);
127
+ --icon-inverse: var(--neutral-100);
128
+ --fill-accent-primary: var(--accent-60);
129
+ --fill-accent-primary-hover: var(--accent-50);
130
+ --fill-accent-secondary: var(--accent-96);
131
+ --fill-accent-secondary-hover: var(--accent-90);
132
+ --fill-accent-tint: var(--accent-50-12);
133
+ --fill-accent-tint-low: var(--accent-50-8);
134
+ --fill-positive-primary: var(--positive-60);
135
+ --fill-positive-primary-hover: var(--positive-50);
136
+ --fill-positive-secondary: var(--positive-96);
137
+ --fill-positive-secondary-hover: var(--positive-90);
138
+ --fill-positive-tint: var(--positive-50-12);
139
+ --fill-positive-tint-low: var(--positive-50-8);
140
+ --fill-negative-primary: var(--negative-60);
141
+ --fill-negative-primary-hover: var(--negative-50);
142
+ --fill-negative-secondary: var(--negative-96);
143
+ --fill-negative-secondary-hover: var(--negative-92);
144
+ --fill-negative-tint: var(--negative-60-12);
145
+ --fill-negative-tint-low: var(--negative-60-8);
146
+ --fill-warning-primary: var(--warning-60);
147
+ --fill-warning-primary-hover: var(--warning-50);
148
+ --fill-warning-secondary: var(--warning-96);
149
+ --fill-warning-secondary-hover: var(--warning-90);
150
+ --fill-warning-tint: var(--warning-60-12);
151
+ --fill-warning-tint-low: var(--warning-60-8);
152
+ --fill-neutral-secondary: var(--neutral-96);
153
+ --fill-neutral-secondary-hover: var(--neutral-90);
154
+ --fill-bg-primary: var(--neutral-100);
155
+ --fill-bg-secondary: var(--neutral-98);
156
+ --fill-bg-tertiary: var(--neutral-96);
157
+ --fill-bg-elevation-primary: var(--neutral-90-20);
158
+ --fill-bg-elevation-secondary: var(--neutral-90-15);
159
+ --fill-bg-elevation-tertiary: var(--neutral-90-10);
160
+ --status-accent: var(--accent-50);
161
+ --status-accent-tint: var(--accent-50-12);
162
+ --status-accent-tint-low: var(--accent-50-8);
163
+ --status-negative: var(--negative-60);
164
+ --status-negative-tint: var(--negative-60-12);
165
+ --status-negative-tint-low: var(--negative-60-8);
166
+ --status-positive: var(--positive-50);
167
+ --status-positive-tint: var(--positive-50-12);
168
+ --status-positive-tint-low: var(--positive-50-8);
169
+ --status-warning: var(--warning-60);
170
+ --status-warning-tint: var(--warning-60-12);
171
+ --status-warning-tint-low: var(--warning-60-8);
172
+ --status-neutral: var(--neutral-60);
173
+ --status-neutral-tint: var(--neutral-60-12);
174
+ --status-neutral-tint-low: var(--neutral-60-8);
175
+ --corner-zero: 0;
176
+ --corner-xs: 4px;
177
+ --corner-sm: 8px;
178
+ --corner-md: 12px;
179
+ --corner-lg: 16px;
180
+ --corner-xl: 20px;
181
+ --corner-2xl: 24px;
182
+ --corner-3xl: 32px;
183
+ --corner-4xl: 40px;
184
+ --corner-5xl: 48px;
185
+ --corner-6xl: 56px;
186
+ --corner-full-round: 1000px;
187
+ --height-button-xs: 32px;
188
+ --height-button-sm: 40px;
189
+ --height-button-md: 48px;
190
+ --height-button-lg: 56px;
191
+ --height-avatar-sm: 32px;
192
+ --height-avatar-md: 40px;
193
+ --height-avatar-lg: 48px;
194
+ --height-icon-xs: 16px;
195
+ --height-icon-sm: 20px;
196
+ --height-icon-md: 24px;
197
+ --height-icon-lg: 32px;
198
+ --height-icon-xl: 64px;
199
+ --opacity-primary: 100;
200
+ --opacity-secondary: 80;
201
+ --opacity-tertiary: 60;
202
+ --spacing-zero: 0;
203
+ --spacing-xs: 4px;
204
+ --spacing-sm: 8px;
205
+ --spacing-md: 12px;
206
+ --spacing-lg: 16px;
207
+ --spacing-xl: 20px;
208
+ --spacing-2xl: 24px;
209
+ --spacing-3xl: 32px;
210
+ --spacing-4xl: 40px;
211
+ --spacing-5xl: 48px;
212
+ --spacing-6xl: 56px;
213
+ --spacing-7xl: 64px;
214
+ --spacing-8xl: 72px;
215
+ --spacing-9xl: 80px;
216
+ --spacing-10xl: 96px;
217
+ --transition-general: all .3s ease-in-out;
218
+ font-family: Inter, sans-serif;
219
+ word-break: break-word;
220
+ font-size: 16px;
221
+ line-height: 24px;
222
+ font-weight: 400;
223
+ color: var(--text-primary)
224
+ }
225
+
226
+ @layer reset {
227
+ :root *, :root *:before, :root *:after {
228
+ box-sizing: border-box;
229
+ margin: 0;
230
+ color: unset
231
+ }
232
+
233
+ :root ul[class], :root ol[class] {
234
+ padding: 0
235
+ }
236
+
237
+ :root body, :root h1, :root h2, :root h3, :root h4, :root p, :root label, :root ul[class], :root ol[class], :root li, :root figure, :root figcaption, :root blockquote, :root dl, :root dd {
238
+ margin: 0
239
+ }
240
+
241
+ :root label {
242
+ display: block
243
+ }
244
+
245
+ :root html {
246
+ scroll-behavior: smooth
247
+ }
248
+
249
+ :root body {
250
+ min-height: 100dvh;
251
+ text-rendering: optimizeSpeed;
252
+ line-height: 1.5;
253
+ margin: 0 !important
254
+ }
255
+
256
+ :root ul[class], :root ol[class] {
257
+ list-style: none
258
+ }
259
+
260
+ :root a:not([class]) {
261
+ text-decoration-skip-ink: auto
262
+ }
263
+
264
+ :root a, :root a:hover, :root a:checked {
265
+ text-decoration: none;
266
+ color: inherit
267
+ }
268
+
269
+ :root img {
270
+ max-width: 100%;
271
+ display: block
272
+ }
273
+
274
+ :root input, :root button, :root textarea, :root select, :root pre {
275
+ font: inherit
276
+ }
277
+
278
+ :root input, :root textarea {
279
+ outline: none;
280
+ border: none;
281
+ padding: 0
282
+ }
283
+
284
+ @media (prefers-reduced-motion: reduce) {
285
+ :root * {
286
+ animation-duration: .01ms !important;
287
+ animation-iteration-count: 1 !important;
288
+ transition-duration: .01ms !important;
289
+ scroll-behavior: auto !important
290
+ }
291
+ }:root input::-webkit-outer-spin-button, :root input::-webkit-inner-spin-button {
292
+ -webkit-appearance: none;
293
+ margin: 0
294
+ }
295
+
296
+ :root input[type=number] {
297
+ -moz-appearance: textfield
298
+ }
299
+
300
+ :root html {
301
+ overflow-x: hidden;
302
+ margin-right: calc(-1 * (100vw - 100%))
303
+ }
304
+
305
+ :root a:focus, :root button:focus, :root input:focus, :root textarea:focus {
306
+ outline: none
307
+ }
308
+
309
+ :root button {
310
+ cursor: pointer;
311
+ padding: 0;
312
+ background: transparent
313
+ }
314
+
315
+ :root button {
316
+ border: none;
317
+ outline: none
318
+ }
319
+
320
+ :root fieldset {
321
+ border: 0;
322
+ padding: 0;
323
+ margin: 0;
324
+ min-width: 0
325
+ }
326
+
327
+ :root div {
328
+ outline: none
329
+ }
330
+
331
+ :root input[type=search]::-ms-clear {
332
+ display: none;
333
+ width: 0;
334
+ height: 0
335
+ }
336
+
337
+ :root input[type=search]::-ms-reveal {
338
+ display: none;
339
+ width: 0;
340
+ height: 0
341
+ }
342
+
343
+ :root input[type=search]::-webkit-search-decoration, :root input[type=search]::-webkit-search-cancel-button, :root input[type=search]::-webkit-search-results-button, :root input[type=search]::-webkit-search-results-decoration {
344
+ display: none
345
+ }
346
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dss-kit/ui-kit",
3
- "version": "0.0.18",
3
+ "version": "0.0.20",
4
4
  "type": "module",
5
5
  "main": "./dist/ui-kit.cjs.js",
6
6
  "module": "./dist/ui-kit.es.js",
@@ -11,6 +11,7 @@
11
11
  "require": "./dist/ui-kit.cjs.js"
12
12
  },
13
13
  "./ui-kit.css": "./dist/ui-kit.css",
14
+ "./root.css": "./dist/root.css",
14
15
  "./styles/utils": "./dist/styles/utils/index.scss"
15
16
  },
16
17
  "files": [
@@ -18,7 +19,9 @@
18
19
  ],
19
20
  "sideEffects": false,
20
21
  "scripts": {
21
- "build": "vite build",
22
+ "build:base": "vite build",
23
+ "build:root": "vite build --config vite.config.root.ts",
24
+ "build": "npm run build:base && npm run build:root",
22
25
  "dev": "vite",
23
26
  "type-check": "tsc --noEmit",
24
27
  "lint": "eslint --ext \".js,.ts,.tsx\" --ignore-path .gitignore .",