@cytario/design 8.0.0 → 9.0.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 (8) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.d.ts +114 -74
  3. package/dist/index.js +604 -483
  4. package/dist/index.js.map +1 -1
  5. package/package.json +2 -1
  6. package/src/styles/theme.css +29 -30
  7. package/src/styles/tokens.css +2 -0
  8. package/assets/logos/cytario-logo-on-purple.svg +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cytario/design",
3
- "version": "8.0.0",
3
+ "version": "9.0.0",
4
4
  "description": "Cytario design system and brand portal",
5
5
  "repository": {
6
6
  "type": "git",
@@ -62,6 +62,7 @@
62
62
  "@storybook/react": "10.2.10",
63
63
  "@storybook/react-vite": "10.2.10",
64
64
  "@tailwindcss/cli": "^4.2.1",
65
+ "@tailwindcss/typography": "^0.5.20",
65
66
  "@tailwindcss/vite": "4.2.1",
66
67
  "@testing-library/jest-dom": "6.9.1",
67
68
  "@testing-library/react": "16.3.2",
package/src/styles/theme.css CHANGED
@@ -29,6 +29,7 @@
29
29
 
30
30
  @import "tw-animate-css";
31
31
  @plugin "tailwindcss-react-aria-components";
32
+ @plugin "@tailwindcss/typography";
32
33
 
33
34
  @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
34
35
 
@@ -139,30 +140,6 @@
139
140
  --border-radius-xl: 16px;
140
141
  --border-radius-full: 9999px;
141
142
 
142
- /* ---- Primitives: font size ---- */
143
- --font-size-xs: 12px;
144
- --font-size-sm: 14px;
145
- --font-size-base: 16px;
146
- --font-size-lg: 18px;
147
- --font-size-xl: 20px;
148
- --font-size-2xl: 24px;
149
- --font-size-3xl: 30px;
150
- --font-size-4xl: 36px;
151
- --font-size-5xl: 48px;
152
-
153
- /* ---- Primitives: font weight ---- */
154
- --font-weight-light: 300;
155
- --font-weight-regular: 400;
156
- --font-weight-medium: 500;
157
- --font-weight-semibold: 600;
158
- --font-weight-bold: 700;
159
- --font-weight-extrabold: 800;
160
-
161
- /* ---- Primitives: line height ---- */
162
- --line-height-tight: 1.25;
163
- --line-height-normal: 1.5;
164
- --line-height-relaxed: 1.625;
165
-
166
143
  /* ---- Light-mode semantic tokens ---- */
167
144
  --color-background: var(--color-white);
168
145
  --color-foreground: var(--color-slate-900);
@@ -234,13 +211,14 @@
234
211
  --color-badge-slate-text: var(--color-slate-700);
235
212
  --color-badge-rose-bg: var(--color-rose-100);
236
213
  --color-badge-rose-text: var(--color-rose-700);
237
- --color-badge-neutral-bg: var(--color-slate-100);
238
- --color-badge-neutral-text: var(--color-slate-700);
239
214
  --color-badge-green-bg: var(--color-green-100);
240
215
  --color-badge-green-text: var(--color-green-700);
241
216
  --color-badge-amber-bg: var(--color-amber-100);
242
217
  --color-badge-amber-text: var(--color-amber-800);
243
218
 
219
+ --logo-fill: var(--color-primary);
220
+ --logo-highlight: var(--color-teal-500);
221
+
244
222
  --ds-color-text-body: rgb(55, 65, 81);
245
223
  --ds-gradient-brand: linear-gradient(135deg, #5c2483 0%, #4a1d6a 100%);
246
224
  --ds-gradient-brand-reverse: linear-gradient(
@@ -327,13 +305,14 @@
327
305
  --color-badge-slate-text: var(--color-slate-200);
328
306
  --color-badge-rose-bg: var(--color-rose-800);
329
307
  --color-badge-rose-text: var(--color-rose-200);
330
- --color-badge-neutral-bg: var(--color-slate-700);
331
- --color-badge-neutral-text: var(--color-slate-200);
332
308
  --color-badge-green-bg: var(--color-green-800);
333
309
  --color-badge-green-text: var(--color-green-200);
334
310
  --color-badge-amber-bg: var(--color-amber-800);
335
311
  --color-badge-amber-text: var(--color-amber-200);
336
312
 
313
+ --logo-fill: var(--color-primary-foreground);
314
+ --logo-highlight: var(--color-teal-500);
315
+
337
316
  --ds-color-text-body: rgb(209, 213, 219);
338
317
  --ds-gradient-brand: linear-gradient(135deg, #9b4fcb 0%, #7a2ea8 100%);
339
318
  --ds-gradient-brand-reverse: linear-gradient(
@@ -377,6 +356,26 @@
377
356
  }
378
357
  }
379
358
 
359
+ @keyframes logo-fade-in {
360
+ from {
361
+ opacity: 0;
362
+ }
363
+ to {
364
+ opacity: 1;
365
+ }
366
+ }
367
+
368
+ @media (prefers-reduced-motion: reduce) {
369
+ @keyframes logo-fade-in {
370
+ from {
371
+ opacity: 1;
372
+ }
373
+ to {
374
+ opacity: 1;
375
+ }
376
+ }
377
+ }
378
+
380
379
  /**
381
380
  * Tailwind v4 @theme inline — maps every color token to itself via var() so
382
381
  * that utilities like bg-primary, text-muted-foreground, bg-badge-purple-bg
@@ -392,6 +391,8 @@
392
391
  --radius-lg: 12px;
393
392
  --radius-xl: 16px;
394
393
 
394
+ /* Font sizes, weights, and line heights use Tailwind v4 defaults (rem-based, with line-height pairing). */
395
+
395
396
  --color-purple-50: var(--color-purple-50);
396
397
  --color-purple-100: var(--color-purple-100);
397
398
  --color-purple-200: var(--color-purple-200);
@@ -549,8 +550,6 @@
549
550
  --color-badge-slate-text: var(--color-badge-slate-text);
550
551
  --color-badge-rose-bg: var(--color-badge-rose-bg);
551
552
  --color-badge-rose-text: var(--color-badge-rose-text);
552
- --color-badge-neutral-bg: var(--color-badge-neutral-bg);
553
- --color-badge-neutral-text: var(--color-badge-neutral-text);
554
553
  --color-badge-green-bg: var(--color-badge-green-bg);
555
554
  --color-badge-green-text: var(--color-badge-green-text);
556
555
  --color-badge-amber-bg: var(--color-badge-amber-bg);
package/src/styles/tokens.css CHANGED
@@ -23,6 +23,8 @@
23
23
  --radius-lg: 12px;
24
24
  --radius-xl: 16px;
25
25
 
26
+ /* Font sizes, weights, and line heights use Tailwind v4 defaults (rem-based, with line-height pairing). */
27
+
26
28
  --color-purple-50: var(--color-purple-50);
27
29
  --color-purple-100: var(--color-purple-100);
28
30
  --color-purple-200: var(--color-purple-200);
package/assets/logos/cytario-logo-on-purple.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="319.783" height="146.484" viewBox="0 0 319.783 146.484"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M36 136.063h769.89V518.74H36Z"/></clipPath><clipPath id="b" clipPathUnits="userSpaceOnUse"><path d="M-338.072-186.979h769.89v382.677h-769.89Z"/></clipPath><clipPath id="c" clipPathUnits="userSpaceOnUse"><path d="M-344.75-207.048h769.89v382.677h-769.89Z"/></clipPath><clipPath id="d" clipPathUnits="userSpaceOnUse"><path d="M-373.196-187.062h769.89v382.677h-769.89Z"/></clipPath><clipPath id="e" clipPathUnits="userSpaceOnUse"><path d="M-387.107-195.61h769.89v382.677h-769.89Z"/></clipPath><clipPath id="f" clipPathUnits="userSpaceOnUse"><path d="M-398.916-207.048h769.89v382.677h-769.89Z"/></clipPath><clipPath id="g" clipPathUnits="userSpaceOnUse"><path d="M-408.95-207.13h769.89v382.677h-769.89Z"/></clipPath><clipPath id="h" clipPathUnits="userSpaceOnUse"><path d="M-427.617-190.325h769.89v382.677h-769.89Z"/></clipPath><clipPath id="i" clipPathUnits="userSpaceOnUse"><path d="M-443.355-204.527h769.89V178.15h-769.89Z"/></clipPath></defs><path d="M541.439 278.926H301.602v109.863h239.837z" clip-path="url(#a)" style="fill:#5c2483;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(1.33333 0 0 -1.33333 -402.136 518.385)"/><path d="M0 0c0-.21-.041-.295-.209-.335-1.34-.546-3.017-.672-4.651-.672-6.788 0-10.809 4.653-10.809 10.684 0 6.202 4.609 10.812 11.522 10.812 2.096 0 3.226-.21 3.938-.461.168-.083.209-.209.209-.461l-.041-3.728c0-.293-.168-.293-.335-.253-.88.335-1.97.546-3.603.546-3.814 0-6.496-2.264-6.496-6.286 0-4.569 3.31-6.327 6.536-6.327 1.509 0 2.809.127 3.646.42.209.082.293-.044.293-.211Z" clip-path="url(#b)" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(1.33333 0 0 -1.33333 96.626 87.663)"/><path d="M0 0c.167 0 .293-.041.376-.251C3.1-8.086 4.525-12.612 5.069-14.665c1.382 4.233 2.85 8.547 4.735 14.414.084.167.209.251.461.251h4.316c.251 0 .293-.125.251-.334-3.018-9.261-7.819-20.925-11.214-28.674-.084-.169-.208-.295-.543-.295l-4.59-.406c-.251 0-.309.139-.209.336a164 164 0 0 1 4.196 9.092c.084.253.125.379.041.672C1.382-16.844-2.64-6.872-5.154-.293c-.084.168.04.293.251.293Z" clip-path="url(#c)" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(1.33333 0 0 -1.33333 105.53 60.904)"/><path d="M0 0c0-.253-.041-.419-.251-.503-1.132-.42-2.179-.586-3.561-.586-3.436 0-5.49 1.675-5.49 5.824v11.019h-2.639c-.208.041-.294.127-.294.378v3.52c0 .25.086.334.335.334l2.598.009c.041 1.468 0 3.703 0 5.145.041.209.126.335.335.377l4.447.394c.2.02.293 0 .293-.209v-5.707l4.102-.009c.211 0 .293-.084.293-.293v-3.646c0-.208-.082-.293-.293-.293h-4.107V5.823c0-1.842.586-2.723 2.39-2.723.542 0 1.005.041 1.591.167.126.043.251 0 .251-.25Z" clip-path="url(#d)" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(1.33333 0 0 -1.33333 143.459 87.551)"/><path d="M0 0c-.63.084-1.342.126-2.305.126-3.311 0-4.776-1.089-4.776-2.891 0-1.551 1.088-2.891 4.104-2.891 1.091 0 2.054.126 2.977.502zm4.902-4.944c0-.921 0-1.76.084-2.64 0-.083 0-.125-.084-.169C1.467-9.218-.963-9.637-3.814-9.637c-4.567 0-8.212 2.137-8.212 6.872 0 4.441 3.98 6.663 9.428 6.663 1.256 0 2.219-.044 2.598-.084v.502c0 .965-.545 3.143-4.233 3.143-2.093 0-3.939-.42-5.49-1.175-.126-.04-.335 0-.335.253v3.645c0 .209.042.293.253.418 1.802.839 4.107 1.259 6.37 1.259 5.823 0 8.337-3.647 8.337-8.298z" clip-path="url(#e)" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(1.33333 0 0 -1.33333 162.006 76.155)"/><path d="M0 0c.252 0 .379-.084.461-.334.209-.545.376-1.594.42-2.515C2.305-1.088 4.582.419 7.473.419c.251 0 .446-.121.446-.433v-4.3c0-.211-.084-.295-.377-.295-2.974.084-5.446-.963-6.41-2.221v-13.491c0-.253-.125-.335-.378-.335h-4.358c-.291 0-.377.126-.377.335 0 0 .015 18.591.015 20.07 0 .21.042.251.253.251z" clip-path="url(#f)" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(1.33333 0 0 -1.33333 177.752 60.904)"/><path d="M0 0c0 .186.152.338.338.338a4.773 4.773 0 0 0 4.773-4.774v-15.972c0-.251-.086-.334-.379-.334H.419c-.293 0-.419.126-.419.377Z" clip-path="url(#g)" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(1.33333 0 0 -1.33333 191.13 60.794)"/><path d="M0 0a6.415 6.415 0 0 0-6.356 6.475 6.415 6.415 0 1 0 12.831-.119A6.415 6.415 0 0 0 0 0m1.573 16.958c-1.684.25-4.143.078-5.373.158-4.321.291-7.287 4.505-7.295 8.695-.001 3.185-1.797 4.984-4.168 5.418a5.08 5.08 0 0 1-4.086-1.023 5.08 5.08 0 0 1-1.845-3.785c-.066-2.409 1.322-4.539 4.439-5.198 4.098-.875 7.607-4.651 6.996-8.937-.177-1.22-.867-3.725-.969-5.425C-11.099.951-6.335-4.203-.305-4.331c2.655-.057 5.118.828 7.028 2.376s3.318 3.767 3.778 6.383c1.068 5.825-2.936 11.643-8.928 12.53" clip-path="url(#h)" style="fill:#35b7b8;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(1.33333 0 0 -1.33333 216.02 83.202)"/><path d="M0 0c0 .424-.31.73-.905.73h-.751V-.712h.751C-.31-.712 0-.443 0 0m-1.656-1.195v-1.481h-.538v3.887h1.289C-.018 1.211.559.75.559.018c0-.577-.367-.962-.905-1.115L.751-2.676H.114L-.887-1.195zm3.811.463c0 1.79-1.25 3.061-3.06 3.061-1.809 0-3.08-1.271-3.08-3.061 0-1.809 1.271-3.08 3.08-3.08s3.06 1.271 3.06 3.08m-6.68 0c0 2.06 1.523 3.581 3.62 3.581S2.714 1.328 2.714-.732c0-2.08-1.521-3.6-3.619-3.6-2.097 0-3.62 1.52-3.62 3.6" clip-path="url(#i)" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(1.33333 0 0 -1.33333 237.004 64.265)"/></svg>