@qasa/qds-ui 0.27.2 → 0.28.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 (6) hide show
  1. package/README.md +2 -5
  2. package/dist/index.d.ts +10 -14
  3. package/dist/index.js +2 -345
  4. package/dist/index.js.map +1 -1
  5. package/dist/preset.css +72 -4
  6. package/package.json +26 -31
package/dist/preset.css CHANGED
@@ -140,6 +140,66 @@
140
140
  0px 13px 31.3px 0px rgba(0, 0, 0, 0.0503), 0px 31px 75px 0px rgba(0, 0, 0, 0.07);
141
141
  }
142
142
 
143
+ @theme {
144
+ --text-color-strong: var(--color-black);
145
+ --text-color-default: var(--color-brown);
146
+ --text-color-subtle: var(--color-gray-60);
147
+ --text-color-disabled: var(--color-gray-50);
148
+ --text-color-negative: var(--color-red-60);
149
+ --text-color-warning: var(--color-yellow-90);
150
+ --text-color-positive: var(--color-green-70);
151
+ --text-color-onBrandPrimary: var(--color-brown);
152
+ --text-color-onBrandSecondary: var(--color-offWhite);
153
+ --text-color-onBrandTertiary: var(--color-brown);
154
+
155
+ --background-color-default: var(--color-white);
156
+ --background-color-brandPrimary: var(--color-uiPink);
157
+ --background-color-brandPrimary-hover: var(--color-uiPink-light);
158
+ --background-color-brandPrimary-active: var(--color-uiPink-dark);
159
+ --background-color-brandSecondary: var(--color-brown);
160
+ --background-color-brandSecondary-hover: var(--color-brown-light);
161
+ --background-color-brandSecondary-active: var(--color-brown-dark);
162
+ --background-color-brandTertiary: var(--color-offWhite);
163
+ --background-color-brandTertiary-hover: var(--color-offWhite-light);
164
+ --background-color-brandTertiary-active: var(--color-offWhite-dark);
165
+ --background-color-negative: var(--color-red-60);
166
+ --background-color-warning: var(--color-yellow-60);
167
+ --background-color-positive: var(--color-green-60);
168
+ --background-color-inset: var(--color-gray-10);
169
+
170
+ --border-color-strong: var(--color-gray-40);
171
+ --border-color-default: var(--color-gray-30);
172
+ --border-color-default-hover: var(--color-gray-40);
173
+ --border-color-default-active: var(--color-brown);
174
+ --border-color-subtle: var(--color-gray-20);
175
+ --border-color-negative: var(--color-red-60);
176
+ --border-color-warning: var(--color-yellow-60);
177
+ --border-color-positive: var(--color-green-60);
178
+
179
+ /* Stroke + Fill are the `icon` semantic tokens */
180
+ --stroke-strong: var(--color-black);
181
+ --stroke-default: var(--color-brown);
182
+ --stroke-subtle: var(--color-gray-60);
183
+ --stroke-disabled: var(--color-gray-50);
184
+ --stroke-negative: var(--color-red-60);
185
+ --stroke-warning: var(--color-yellow-70);
186
+ --stroke-positive: var(--color-green-70);
187
+ --stroke-onBrandPrimary: var(--color-brown);
188
+ --stroke-onBrandSecondary: var(--color-offWhite);
189
+ --stroke-onBrandTertiary: var(--color-brown);
190
+
191
+ --fill-strong: var(--color-black);
192
+ --fill-default: var(--color-brown);
193
+ --fill-subtle: var(--color-gray-60);
194
+ --fill-disabled: var(--color-gray-50);
195
+ --fill-negative: var(--color-red-60);
196
+ --fill-warning: var(--color-yellow-70);
197
+ --fill-positive: var(--color-green-70);
198
+ --fill-onBrandPrimary: var(--color-brown);
199
+ --fill-onBrandSecondary: var(--color-offWhite);
200
+ --fill-onBrandTertiary: var(--color-brown);
201
+ }
202
+
143
203
  @utility type-display-lg {
144
204
  font-family: var(--font-semi-mono);
145
205
  font-size: var(--text-6xl);
@@ -220,18 +280,26 @@
220
280
  }
221
281
  @utility type-label-md {
222
282
  font-size: var(--text-base);
223
- line-height: 1.25;
283
+ line-height: calc(1.25 / 1);
224
284
  font-weight: var(--font-weight-medium);
225
285
  letter-spacing: var(--tracking-tight);
226
286
  }
227
287
  @utility type-label-sm {
228
288
  font-size: var(--text-sm);
229
- line-height: 1.25;
289
+ line-height: calc(1.25 / 0.875);
230
290
  font-weight: var(--font-weight-medium);
231
291
  letter-spacing: var(--tracking-tight);
232
292
  }
233
293
 
234
294
  @layer base {
295
+ *,
296
+ ::after,
297
+ ::before,
298
+ ::backdrop,
299
+ ::file-selector-button {
300
+ border-color: var(--color-gray-30, currentColor);
301
+ }
302
+
235
303
  html {
236
304
  @apply antialiased;
237
305
  font-synthesis: none;
@@ -243,9 +311,9 @@
243
311
  button,
244
312
  a,
245
313
  [role='button'] {
246
- @apply ring-brown outline-none ring-offset-2;
314
+ @apply ring-brown outline-none;
247
315
  &:focus-visible {
248
- @apply ring-2;
316
+ @apply ring-2 ring-offset-2;
249
317
  }
250
318
  }
251
319
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qasa/qds-ui",
3
- "version": "0.27.2",
3
+ "version": "0.28.0",
4
4
  "license": "UNLICENSED",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,11 +32,11 @@
32
32
  "@emotion/styled": "^11.14.0",
33
33
  "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
34
34
  "@testing-library/jest-dom": "^6.6.3",
35
- "@testing-library/react": "^16.2.0",
36
- "@testing-library/user-event": "^14.6.0",
37
- "@types/node": "^22.13.5",
38
- "@types/react": "^19.0.10",
39
- "@types/react-dom": "^19.0.4",
35
+ "@testing-library/react": "^16.3.0",
36
+ "@testing-library/user-event": "^14.6.1",
37
+ "@types/node": "22.13.5",
38
+ "@types/react": "19.1.2",
39
+ "@types/react-dom": "19.1.3",
40
40
  "@typescript-eslint/eslint-plugin": "^8.28.0",
41
41
  "@typescript-eslint/parser": "^8.28.0",
42
42
  "@vitejs/plugin-react": "^4.3.4",
@@ -50,37 +50,32 @@
50
50
  "eslint-plugin-react": "^7.37.4",
51
51
  "eslint-plugin-react-hooks": "^5.2.0",
52
52
  "globby": "^14.0.2",
53
- "jsdom": "^26.0.0",
54
- "lucide-react": "^0.475.0",
53
+ "jsdom": "^26.1.0",
54
+ "lucide-react": "^0.507.0",
55
55
  "motion": "^12.4.7",
56
- "react": "^19.0.0",
57
- "react-dom": "^19.0.0",
58
- "rimraf": "^3.0.2",
59
- "tailwindcss": "^4.0.0",
60
- "tsup": "^8.0.2",
61
- "tsx": "^4.19.2",
62
- "typescript": "^5.8.2",
63
- "vitest": "<3",
64
- "vitest-axe": "1.0.0-pre.3",
65
- "vitest-matchmedia-mock": "^2.0.0"
56
+ "react": "19.1.0",
57
+ "react-dom": "19.1.0",
58
+ "rimraf": "^6.0.1",
59
+ "tailwindcss": "^4.1.5",
60
+ "tsup": "^8.4.0",
61
+ "tsx": "^4.19.4",
62
+ "typescript": "5.8.3",
63
+ "vitest": "3.1.2",
64
+ "vitest-axe": "1.0.0-pre.5",
65
+ "vitest-matchmedia-mock": "^2.0.3"
66
66
  },
67
67
  "peerDependencies": {
68
- "@emotion/cache": ">= 11.0.0",
69
- "@emotion/is-prop-valid": ">= 1.3.1",
70
- "@emotion/react": ">= 11.0.0",
71
- "@emotion/styled": ">= 11.0.0",
72
- "motion": ">=11.13.5",
73
- "react": ">=18.2.0",
74
- "react-dom": ">=18.2.0",
68
+ "@emotion/cache": ">=11.0.0",
69
+ "@emotion/is-prop-valid": ">=1.3.1",
70
+ "@emotion/react": ">=11.0.0",
71
+ "@emotion/styled": ">=11.0.0",
72
+ "motion": ">=12.0.0",
73
+ "react": ">=19.0.0",
74
+ "react-dom": ">=19.0.0",
75
75
  "tailwindcss": ">=4.0.0"
76
76
  },
77
77
  "dependencies": {
78
- "@radix-ui/react-avatar": "^1.1.3",
79
- "@radix-ui/react-checkbox": "^1.1.4",
80
- "@radix-ui/react-dropdown-menu": "^2.1.6",
81
- "@radix-ui/react-radio-group": "^1.2.3",
82
- "@radix-ui/react-switch": "^1.1.3",
83
- "@radix-ui/react-toast": "^1.2.6",
78
+ "radix-ui": "1.3.4",
84
79
  "class-variance-authority": "^0.7.1"
85
80
  },
86
81
  "scripts": {