@serenis/design-tokens 0.23.0 → 0.25.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.
- package/README.md +5 -2
- package/dist/css-design-tokens.d.ts +1 -0
- package/dist/css-global-style.d.ts +1 -0
- package/dist/design-tokens.css +1 -0
- package/dist/global-style.css +1 -0
- package/package.json +10 -1
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ Import the CSS bundle in your app entry point:
|
|
|
16
16
|
import '@serenis/design-tokens/css'
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
Sub-paths for advanced use cases: `@serenis/design-tokens/css/base`, `@serenis/design-tokens/css/serenis-light`, `@serenis/design-tokens/css/serenis-dark`, `@serenis/design-tokens/utilities`.
|
|
19
|
+
Sub-paths for advanced use cases: `@serenis/design-tokens/css/base`, `@serenis/design-tokens/css/design-tokens`, `@serenis/design-tokens/css/serenis-light`, `@serenis/design-tokens/css/serenis-dark`, `@serenis/design-tokens/css/global-style`, `@serenis/design-tokens/utilities`.
|
|
20
20
|
|
|
21
21
|
## Quick start
|
|
22
22
|
|
|
@@ -43,6 +43,7 @@ libraries/design-tokens/
|
|
|
43
43
|
│ ├── tablet.json # Responsive overrides (≥601px)
|
|
44
44
|
│ └── desktop.json # Responsive overrides (≥1025px)
|
|
45
45
|
├── src/
|
|
46
|
+
│ ├── global-style.css # Hand-written global reset + markdown semantic classes (→ dist/global-style.css)
|
|
46
47
|
│ ├── stories/ # Storybook stories and documentation (colocated)
|
|
47
48
|
│ │ ├── Breakpoints/
|
|
48
49
|
│ │ ├── Color/ # Color stories + Overview.mdx doc page
|
|
@@ -128,6 +129,7 @@ SPACING_MD_VALUE // "16px"
|
|
|
128
129
|
@import '@serenis/design-tokens/css'; /* base + both themes + utility classes */
|
|
129
130
|
/* or granular: */
|
|
130
131
|
@import '@serenis/design-tokens/css/base'; /* root + responsive overrides */
|
|
132
|
+
@import '@serenis/design-tokens/css/design-tokens'; /* base + both themes (no utilities; same as CDN bundle) */
|
|
131
133
|
@import '@serenis/design-tokens/css/serenis-light'; /* base + light theme (standalone) */
|
|
132
134
|
@import '@serenis/design-tokens/css/serenis-dark'; /* base + dark theme (standalone) */
|
|
133
135
|
```
|
|
@@ -261,7 +263,8 @@ tokens/*.json
|
|
|
261
263
|
│ └──▶ Extract class names ──▶ dist/types/utility-class.{js,d.ts} (UtilityClassName)
|
|
262
264
|
│ + dist/utils/cx.{js,d.ts} (cx helper)
|
|
263
265
|
│
|
|
264
|
-
└──▶ Concat base + themes +
|
|
266
|
+
└──▶ Concat base + themes + minify ──▶ dist/design-tokens.css
|
|
267
|
+
Concat base + themes + utilities + minify ──▶ dist/index.css
|
|
265
268
|
```
|
|
266
269
|
|
|
267
270
|
## Scripts
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--srns-font-family-degular-display: "Degular Display", degular-display, serif;--srns-font-family-mona-sans: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-font-family-monospace: monospace;--srns-font-size-10: 10px;--srns-font-size-12: 12px;--srns-font-size-14: 14px;--srns-font-size-16: 16px;--srns-font-size-18: 18px;--srns-font-size-20: 20px;--srns-font-size-24: 24px;--srns-font-size-32: 32px;--srns-font-size-40: 40px;--srns-font-size-48: 48px;--srns-font-size-56: 56px;--srns-font-size-64: 64px;--srns-font-size-72: 72px;--srns-line-height-12: 12px;--srns-line-height-14: 14px;--srns-line-height-16: 16px;--srns-line-height-20: 20px;--srns-line-height-24: 24px;--srns-line-height-32: 32px;--srns-line-height-40: 40px;--srns-line-height-48: 48px;--srns-line-height-56: 56px;--srns-line-height-64: 64px;--srns-line-height-72: 72px;--srns-font-weight-400: 400;--srns-font-weight-500: 500;--srns-font-weight-600: 600;--srns-letter-spacing-0: 0;--srns-letter-spacing-112: 1.12px;--srns-letter-spacing-128: 1.28px;--srns-letter-spacing-144: 1.44px;--srns-letter-spacing-020: .2px;--srns-letter-spacing-024: .24px;--srns-letter-spacing-028: .28px;--srns-letter-spacing-032: .32px;--srns-letter-spacing-036: .36px;--srns-letter-spacing-040: .4px;--srns-letter-spacing-048: .48px;--srns-letter-spacing-056: .56px;--srns-letter-spacing-064: .64px;--srns-letter-spacing-072: .72px;--srns-letter-spacing-080: .8px;--srns-letter-spacing-096: .96px;--srns-typography-public-h0-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h0-font-weight: 600;--srns-typography-public-h0-line-height: 56px;--srns-typography-public-h0-font-size: 56px;--srns-typography-public-h0-letter-spacing: 1.12px;--srns-typography-public-h1-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h1-font-weight: 600;--srns-typography-public-h1-line-height: 32px;--srns-typography-public-h1-font-size: 32px;--srns-typography-public-h1-letter-spacing: .64px;--srns-typography-public-h2-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h2-font-weight: 600;--srns-typography-public-h2-line-height: 24px;--srns-typography-public-h2-font-size: 24px;--srns-typography-public-h2-letter-spacing: .48px;--srns-typography-public-h3-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h3-font-weight: 400;--srns-typography-public-h3-line-height: 24px;--srns-typography-public-h3-font-size: 20px;--srns-typography-public-h3-letter-spacing: .4px;--srns-typography-public-paragraph-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-public-paragraph-font-weight: 400;--srns-typography-public-paragraph-line-height: 24px;--srns-typography-public-paragraph-font-size: 16px;--srns-typography-public-paragraph-letter-spacing: 0;--srns-typography-public-caption-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-public-caption-font-weight: 400;--srns-typography-public-caption-line-height: 24px;--srns-typography-public-caption-font-size: 14px;--srns-typography-public-caption-letter-spacing: 0;--srns-typography-public-footnote-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-public-footnote-font-weight: 500;--srns-typography-public-footnote-line-height: 24px;--srns-typography-public-footnote-font-size: 12px;--srns-typography-public-footnote-letter-spacing: 0;--srns-typography-public-micro-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-public-micro-font-weight: 500;--srns-typography-public-micro-line-height: 16px;--srns-typography-public-micro-font-size: 12px;--srns-typography-public-micro-letter-spacing: 0;--srns-typography-h0-font-family: "Degular Display", degular-display, serif;--srns-typography-h0-font-weight: 600;--srns-typography-h0-line-height: 56px;--srns-typography-h0-font-size: 56px;--srns-typography-h0-letter-spacing: 1.12px;--srns-typography-h1-font-family: "Degular Display", degular-display, serif;--srns-typography-h1-font-weight: 600;--srns-typography-h1-line-height: 32px;--srns-typography-h1-font-size: 32px;--srns-typography-h1-letter-spacing: .64px;--srns-typography-h2-font-family: "Degular Display", degular-display, serif;--srns-typography-h2-font-weight: 600;--srns-typography-h2-line-height: 24px;--srns-typography-h2-font-size: 24px;--srns-typography-h2-letter-spacing: .48px;--srns-typography-h3-font-family: "Degular Display", degular-display, serif;--srns-typography-h3-font-weight: 600;--srns-typography-h3-line-height: 24px;--srns-typography-h3-font-size: 20px;--srns-typography-h3-letter-spacing: .4px;--srns-typography-paragraph-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-paragraph-font-weight: 400;--srns-typography-paragraph-line-height: 24px;--srns-typography-paragraph-font-size: 16px;--srns-typography-paragraph-letter-spacing: 0;--srns-typography-caption-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-caption-font-weight: 400;--srns-typography-caption-line-height: 24px;--srns-typography-caption-font-size: 14px;--srns-typography-caption-letter-spacing: 0;--srns-typography-footnote-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-footnote-font-weight: 500;--srns-typography-footnote-line-height: 16px;--srns-typography-footnote-font-size: 12px;--srns-typography-footnote-letter-spacing: 0;--srns-typography-micro-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-micro-font-weight: 500;--srns-typography-micro-line-height: 14px;--srns-typography-micro-font-size: 10px;--srns-typography-micro-letter-spacing: 0;--srns-spacing-0: 0;--srns-spacing-4xs: 2px;--srns-spacing-3xs: 4px;--srns-spacing-2xs: 6px;--srns-spacing-xs: 8px;--srns-spacing-sm: 12px;--srns-spacing-md: 16px;--srns-spacing-lg: 24px;--srns-spacing-xl: 32px;--srns-spacing-2xl: 40px;--srns-spacing-3xl: 48px;--srns-spacing-4xl: 64px;--srns-spacing-5xl: 80px;--srns-spacing-6xl: 96px;--srns-spacing-7xl: 112px;--srns-container-3xs: 256px;--srns-container-2xs: 288px;--srns-container-xs: 320px;--srns-container-sm: 384px;--srns-container-md: 448px;--srns-container-lg: 512px;--srns-container-xl: 576px;--srns-container-2xl: 672px;--srns-container-3xl: 768px;--srns-container-4xl: 896px;--srns-container-5xl: 1024px;--srns-container-6xl: 1152px;--srns-container-7xl: 1280px;--srns-border-radius-0: 0;--srns-border-radius-4xs: 2px;--srns-border-radius-3xs: 4px;--srns-border-radius-2xs: 6px;--srns-border-radius-xs: 8px;--srns-border-radius-sm: 12px;--srns-border-radius-md: 16px;--srns-border-radius-lg: 24px;--srns-border-radius-xl: 32px;--srns-border-radius-2xl: 40px;--srns-border-radius-3xl: 48px;--srns-border-radius-circle: 9999px;--srns-opacity-0: 0;--srns-opacity-8: .08;--srns-opacity-16: .16;--srns-opacity-24: .24;--srns-opacity-32: .32;--srns-opacity-40: .4;--srns-opacity-48: .48;--srns-opacity-56: .56;--srns-opacity-64: .64;--srns-opacity-72: .72;--srns-opacity-80: .8;--srns-opacity-88: .88;--srns-opacity-96: .96;--srns-opacity-100: 1;--srns-z-index-0: 0;--srns-z-index-100: 100;--srns-z-index-200: 200;--srns-z-index-300: 300;--srns-z-index-400: 400;--srns-z-index-500: 500;--srns-z-index-9999: 9999;--srns-z-index--100: -100;--srns-time-0: 0ms;--srns-time-150: 150ms;--srns-time-300: 300ms;--srns-time-500: 500ms;--srns-time-700: 700ms;--srns-border-width-0: 0;--srns-border-width-1: 1px;--srns-border-width-2: 2px;--srns-border-width-4: 4px;--srns-border-width-05: .5px;--srns-elevation-0: 0px 0px 0px 0px #00000000;--srns-breakpoint-sm: 0;--srns-breakpoint-md: 601px;--srns-breakpoint-lg: 1025px;--srns-breakpoint-xl: 1441px;--srns-media-query-sm: (max-width: 600px );--srns-media-query-md: (min-width: 600px ) and (max-width: 1024px );--srns-media-query-lg: (min-width: 1024px ) and (max-width: 1440px );--srns-media-query-xl: (min-width: 1440px );--srns-media-query-gt-sm: (min-width: 601px);--srns-media-query-gt-md: (min-width: 1025px);--srns-media-query-gt-lg: (min-width: 1441px);--srns-media-query-lt-md: (max-width: 600px );--srns-media-query-lt-lg: (max-width: 1024px );--srns-media-query-lt-xl: (max-width: 1440px );--srns-color-white: #ffffff;--srns-color-black: #0b0b1e;--srns-color-transparent: rgba(0, 0, 0, 0);--srns-color-grey-10: #ffffff;--srns-color-grey-20: #f6f7fd;--srns-color-grey-30: #ecedf9;--srns-color-grey-40: #d7d7ea;--srns-color-grey-50: #a7a7d2;--srns-color-grey-60: #8686c1;--srns-color-grey-70: #7a7aae;--srns-color-grey-80: #5d5d98;--srns-color-grey-90: #3e3e79;--srns-color-grey-100: #2d2d58;--srns-color-grey-110: #1c1c36;--srns-color-grey-120: #0b0b1e;--srns-color-grey: #7a7aae;--srns-color-minttea-20: #cafacb;--srns-color-minttea-40: #179a92;--srns-color-minttea-60: #003b2e;--srns-color-minttea-80: #061a1d;--srns-color-minttea: #cafacb;--srns-color-medicine-20: #d0f9fd;--srns-color-medicine-40: #6be5f5;--srns-color-medicine-60: #0d99bb;--srns-color-medicine-80: #175d73;--srns-color-medicine: #0d99bb;--srns-color-mental-20: #f1d6ff;--srns-color-mental-40: #ce8ef2;--srns-color-mental-60: #ae4fdd;--srns-color-mental-80: #7a2c9d;--srns-color-mental: #ae4fdd;--srns-color-nutrition-20: #ccf5e0;--srns-color-nutrition-40: #83a8a4;--srns-color-nutrition-60: #225559;--srns-color-nutrition-80: #1f4042;--srns-color-nutrition: #225559}@media(min-width:601px){:root{--srns-typography-public-h0-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h0-font-weight: 600;--srns-typography-public-h0-line-height: 72px;--srns-typography-public-h0-font-size: 72px;--srns-typography-public-h0-letter-spacing: 1.44px;--srns-typography-public-h1-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h1-font-weight: 600;--srns-typography-public-h1-line-height: 48px;--srns-typography-public-h1-font-size: 48px;--srns-typography-public-h1-letter-spacing: .96px;--srns-typography-public-h2-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h2-font-weight: 600;--srns-typography-public-h2-line-height: 40px;--srns-typography-public-h2-font-size: 40px;--srns-typography-public-h2-letter-spacing: .8px}}@media(min-width:1025px){:root{--srns-typography-public-h0-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h0-font-weight: 600;--srns-typography-public-h0-line-height: 72px;--srns-typography-public-h0-font-size: 72px;--srns-typography-public-h0-letter-spacing: 1.44px;--srns-typography-public-h1-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h1-font-weight: 600;--srns-typography-public-h1-line-height: 48px;--srns-typography-public-h1-font-size: 48px;--srns-typography-public-h1-letter-spacing: .96px;--srns-typography-public-h2-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h2-font-weight: 600;--srns-typography-public-h2-line-height: 40px;--srns-typography-public-h2-font-size: 40px;--srns-typography-public-h2-letter-spacing: .8px}}.srns-serenis-light{--srns-elevation-2xs: inset 0px .5px 0px 0px #5D29D83D, inset 0px -.5px 0px 0px #5D29D852, 0px 0px 8px -2px #5D29D814, 0px 0px 2px 0px #5D29D83D, 0px 2px 2px -4px #5D29D8A3;--srns-elevation-xs: inset 0px .5px 0px 0px #5D29D83D, inset 0px -.5px 0px 0px #5D29D852, 0px 4px 16px -2px #5D29D814, 0px 0px 2px 0px #5D29D83D, 0px 2px 8px -4px #5D29D852;--srns-elevation-sm: inset 0px .5px 0px 0px #5D29D83D, inset 0px -.5px 0px 0px #5D29D852, 0px 0px 16px -2px #5D29D814, 0px 0px 8px -2px #5D29D83D, 0px 12px 8px -12px #5D29D83D;--srns-elevation-md: inset 0px .5px 0px 0px #5D29D83D, inset 0px -.5px 0px 0px #5D29D852, 0px 0px 16px -2px #5D29D814, 0px 0px 16px -4px #5D29D83D, 0px 16px 12px -16px #5D29D829;--srns-elevation-lg: inset 0px .5px 0px 0px #5D29D83D, inset 0px -.5px 0px 0px #5D29D852, 0px 0px 16px -2px #5D29D814, 0px 0px 24px -4px #5D29D829, 0px 16px 24px -16px #5D29D829;--srns-elevation-xl: inset 0px .5px 0px 0px #5D29D83D, inset 0px -.5px 0px 0px #5D29D852, 0px 0px 16px -2px #5D29D814, 0px 0px 32px -8px #5D29D829, 0px 32px 32px -24px #5D29D829;--srns-elevation-special: 0px 0px 8px 0px #7A59F5, 0px 0px 0px 4px #7A59F514, 0px 0px 0px 8px #7A59F514;--srns-color-lighter: #ffffff;--srns-color-darker: #1c1c36;--srns-color-neutral-10: #ffffff;--srns-color-neutral-20: #f6f7fd;--srns-color-neutral-30: #ecedf9;--srns-color-neutral-40: #d7d7ea;--srns-color-neutral-50: #a7a7d2;--srns-color-neutral-60: #8686c1;--srns-color-neutral-70: #7a7aae;--srns-color-neutral-80: #5d5d98;--srns-color-neutral-90: #3e3e79;--srns-color-neutral-100: #2d2d58;--srns-color-neutral-110: #1c1c36;--srns-color-neutral-120: #0b0b1e;--srns-color-neutral: #7a7aae;--srns-color-accent-10: #ffe9fd;--srns-color-accent-20: #ffd1fb;--srns-color-accent-30: #fea7f9;--srns-color-accent-40: #fd86f6;--srns-color-accent-50: #fc8dfe;--srns-color-accent-60: #e569dc;--srns-color-accent-70: #ca50b7;--srns-color-accent-80: #a83c94;--srns-color-accent: #fc8dfe;--srns-color-primary-10: #ebe9fe;--srns-color-primary-20: #d9d6fe;--srns-color-primary-30: #bdb5fd;--srns-color-primary-40: #9d8cf9;--srns-color-primary-50: #7a59f5;--srns-color-primary-60: #6b3bec;--srns-color-primary-70: #5d29d8;--srns-color-primary-80: #4d22b5;--srns-color-primary: #7a59f5;--srns-color-red-20: #ffe2d4;--srns-color-red-40: #ff796a;--srns-color-red-60: #e12d19;--srns-color-red-80: #bf2818;--srns-color-red: #e12d19;--srns-color-green-20: #c8eede;--srns-color-green-40: #7ad7af;--srns-color-green-60: #419f77;--srns-color-green-80: #227251;--srns-color-green: #419f77;--srns-color-yellow-20: #ffdf99;--srns-color-yellow-40: #ffca5c;--srns-color-yellow-60: #ffab00;--srns-color-yellow-80: #d05e06;--srns-color-yellow: #ffab00;--srns-color-blue-20: #cce7ff;--srns-color-blue-40: #66b8ff;--srns-color-blue-60: #007aff;--srns-color-blue-80: #004299;--srns-color-blue: #007aff;--srns-color-success: #419f77;--srns-color-warning: #ffab00;--srns-color-error: #e12d19;--srns-color-info: #007aff;color-scheme:light}.srns-serenis-dark{--srns-elevation-2xs: inset 0px .5px 0px 0px #5D5D98, inset 0px -.5px 0px 0px #0B0B1E, 0px 0px 8px -2px #0B0B1E52, 0px 0px 2px 0px #0B0B1E8F, 0px 2px 2px -4px #0B0B1EE0;--srns-elevation-xs: inset 0px .5px 0px 0px #5D5D98, inset 0px -.5px 0px 0px #0B0B1E, 0px 4px 16px -2px #0B0B1E52, 0px 0px 2px 0px #0B0B1E8F, 0px 2px 8px -4px #0B0B1EA3;--srns-elevation-sm: inset 0px .5px 0px 0px #5D5D98, inset 0px -.5px 0px 0px #0B0B1E, 0px 0px 16px -2px #0B0B1E52, 0px 0px 8px -2px #0B0B1E8F, 0px 12px 8px -12px #0B0B1E8F;--srns-elevation-md: inset 0px .5px 0px 0px #5D5D98, inset 0px -.5px 0px 0px #0B0B1E, 0px 0px 16px -2px #0B0B1E52, 0px 0px 16px -4px #0B0B1E8F, 0px 16px 12px -16px #0B0B1E7A;--srns-elevation-lg: inset 0px .5px 0px 0px #5D5D98, inset 0px -.5px 0px 0px #0B0B1E, 0px 0px 16px -2px #0B0B1E52, 0px 0px 24px -4px #0B0B1E7A, 0px 16px 24px -16px #0B0B1E7A;--srns-elevation-xl: inset 0px .5px 0px 0px #5D5D98, inset 0px -.5px 0px 0px #0B0B1E, 0px 0px 16px -2px #0B0B1E52, 0px 0px 32px -8px #0B0B1E52, 0px 32px 32px -24px #0B0B1E7A;--srns-elevation-special: 0px 0px 8px 0px #6A42FF, 0px 0px 0px 4px #6A42FF14, 0px 0px 0px 8px #6A42FF14;--srns-color-lighter: #1c1c36;--srns-color-darker: #ffffff;--srns-color-neutral-10: #0b0b1e;--srns-color-neutral-20: #1c1c36;--srns-color-neutral-30: #2d2d58;--srns-color-neutral-40: #3e3e79;--srns-color-neutral-50: #5d5d98;--srns-color-neutral-60: #7a7aae;--srns-color-neutral-70: #8686c1;--srns-color-neutral-80: #a7a7d2;--srns-color-neutral-90: #d7d7ea;--srns-color-neutral-100: #ecedf9;--srns-color-neutral-110: #f6f7fd;--srns-color-neutral-120: #ffffff;--srns-color-neutral: #8686c1;--srns-color-accent-10: #ffe8fa;--srns-color-accent-20: #ffd4f5;--srns-color-accent-30: #ffb1f1;--srns-color-accent-40: #ff86e8;--srns-color-accent-50: #fc56d8;--srns-color-accent-60: #e848c1;--srns-color-accent-70: #c6349d;--srns-color-accent-80: #a6297f;--srns-color-accent: #fc56d8;--srns-color-primary-10: #eae8ff;--srns-color-primary-20: #d7d4ff;--srns-color-primary-30: #bbb1ff;--srns-color-primary-40: #9985ff;--srns-color-primary-50: #6a42ff;--srns-color-primary-60: #6630f7;--srns-color-primary-70: #591ee3;--srns-color-primary-80: #4918bf;--srns-color-primary: #6a42ff;--srns-color-red-20: #ffe2d4;--srns-color-red-40: #ff796a;--srns-color-red-60: #e12d19;--srns-color-red-80: #bf2818;--srns-color-red: #e12d19;--srns-color-green-20: #c8eee3;--srns-color-green-40: #7ad7bd;--srns-color-green-60: #25a27f;--srns-color-green-80: #117363;--srns-color-green: #25a27f;--srns-color-yellow-20: #ffe599;--srns-color-yellow-40: #ffd65c;--srns-color-yellow-60: #ffbf00;--srns-color-yellow-80: #c66606;--srns-color-yellow: #ffbf00;--srns-color-blue-20: #dbedff;--srns-color-blue-40: #70c6ff;--srns-color-blue-60: #0a84ff;--srns-color-blue-80: #0a4299;--srns-color-blue: #0a84ff;--srns-color-success: #25a27f;--srns-color-warning: #ffbf00;--srns-color-error: #e12d19;--srns-color-info: #0a84ff;color-scheme:dark}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{vertical-align:baseline;margin:var(--srns-spacing-0);padding:var(--srns-spacing-0);border:var(--srns-spacing-0);font:inherit;font-size:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-rendering:optimizelegibility}html,body{background-color:var(--srns-color-lighter);color:var(--srns-color-darker);font-weight:var(--srns-typography-paragraph-font-weight);font-size:var(--srns-typography-paragraph-font-size);font-family:var(--srns-typography-paragraph-font-family);font-feature-settings:"ss03" on,"ss05" on,"liga" off;line-height:var(--srns-typography-paragraph-line-height);letter-spacing:var(--srns-typography-paragraph-letter-spacing)}a{color:var(--srns-color-primary-50);text-decoration:none;cursor:pointer}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-spacing:var(--srns-spacing-0);border-collapse:collapse}textarea{font-family:inherit}[aria-busy=true]{cursor:wait}.srns-h1{margin-block-end:var(--srns-spacing-md);font-weight:var(--srns-typography-h1-font-weight);font-size:var(--srns-typography-h1-font-size);font-family:var(--srns-typography-h1-font-family);line-height:var(--srns-typography-h1-line-height);letter-spacing:var(--srns-typography-h1-letter-spacing)}.srns-h2{margin-block-end:var(--srns-spacing-md);font-weight:var(--srns-typography-h2-font-weight);font-size:var(--srns-typography-h2-font-size);font-family:var(--srns-typography-h2-font-family);line-height:var(--srns-typography-h2-line-height);letter-spacing:var(--srns-typography-h2-letter-spacing)}.srns-h3{margin-block-end:var(--srns-spacing-md);font-weight:var(--srns-typography-h3-font-weight);font-size:var(--srns-typography-h3-font-size);font-family:var(--srns-typography-h3-font-family);line-height:var(--srns-typography-h3-line-height);letter-spacing:var(--srns-typography-h3-letter-spacing)}.srns-h4,.srns-h5,.srns-h6{margin-block-end:var(--srns-spacing-md);font-weight:var(--srns-font-weight-600);font-size:var(--srns-typography-paragraph-font-size);font-family:var(--srns-typography-paragraph-font-family);line-height:var(--srns-typography-paragraph-line-height);letter-spacing:var(--srns-typography-paragraph-letter-spacing)}.srns-p{margin-block-end:var(--srns-spacing-md)}.srns-p:last-child{margin-block-end:var(--srns-spacing-0)}.srns-a:hover{color:var(--srns-color-primary-80);text-decoration:underline}.srns-strong{font-weight:var(--srns-font-weight-600)}.srns-em{font-style:italic}.srns-del{text-decoration:line-through}.srns-blockquote{margin-block-end:var(--srns-spacing-md);padding-inline-start:var(--srns-spacing-md);border-inline-start:var(--srns-border-width-4) solid var(--srns-color-neutral-30);color:var(--srns-color-neutral-80);font-style:italic}.srns-blockquote :last-child{margin-block-end:var(--srns-spacing-0)}.srns-ul,.srns-ol{margin:var(--srns-spacing-0) var(--srns-spacing-lg) var(--srns-spacing-md)}.srns-li{margin-block-end:var(--srns-spacing-sm)}.srns-li .srns-li{margin-block-end:var(--srns-spacing-0)}.srns-li:last-child{margin-block-end:var(--srns-spacing-0)}.srns-pre{margin-block-end:var(--srns-spacing-md);padding:var(--srns-spacing-md);border-radius:var(--srns-border-radius-md);background-color:var(--srns-color-grey-90);color:var(--srns-color-white)}.srns-codespan{padding:var(--srns-spacing-4xs) var(--srns-spacing-3xs);border-radius:var(--srns-border-radius-3xs);background-color:var(--srns-color-neutral-30);color:var(--srns-color-darker);font-size:90%}.srns-table{margin-block-end:var(--srns-spacing-md)}.srns-tr{border-block-end:var(--srns-border-width-1) solid var(--srns-color-neutral-40);background-color:var(--srns-color-neutral-20)}.srns-tr:nth-child(2n){background-color:var(--srns-color-neutral-30)}.srns-tr:hover{background-color:var(--srns-color-neutral-40)}.srns-th{padding:var(--srns-spacing-sm) var(--srns-spacing-xs);background-color:var(--srns-color-primary-30);color:var(--srns-color-black)}.srns-td{padding:var(--srns-spacing-xs)}.srns-hr{width:100%;margin:var(--srns-spacing-md) var(--srns-spacing-0)}.srns-translation-line-break{display:block;margin-top:10px}code{font-family:ui-monospace,monospace}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@serenis/design-tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.25.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -22,6 +22,10 @@
|
|
|
22
22
|
"types": "./dist/css-base.d.ts",
|
|
23
23
|
"default": "./dist/base.css"
|
|
24
24
|
},
|
|
25
|
+
"./css/design-tokens": {
|
|
26
|
+
"types": "./dist/css-design-tokens.d.ts",
|
|
27
|
+
"default": "./dist/design-tokens.css"
|
|
28
|
+
},
|
|
25
29
|
"./css/serenis-dark": {
|
|
26
30
|
"types": "./dist/css-serenis-dark.d.ts",
|
|
27
31
|
"default": "./dist/serenis-dark.css"
|
|
@@ -30,6 +34,10 @@
|
|
|
30
34
|
"types": "./dist/css-serenis-light.d.ts",
|
|
31
35
|
"default": "./dist/serenis-light.css"
|
|
32
36
|
},
|
|
37
|
+
"./css/global-style": {
|
|
38
|
+
"types": "./dist/css-global-style.d.ts",
|
|
39
|
+
"default": "./dist/global-style.css"
|
|
40
|
+
},
|
|
33
41
|
"./utilities": {
|
|
34
42
|
"types": "./dist/utilities.d.ts",
|
|
35
43
|
"default": "./dist/utilities.css"
|
|
@@ -58,6 +66,7 @@
|
|
|
58
66
|
],
|
|
59
67
|
"devDependencies": {
|
|
60
68
|
"@storybook/nextjs": "10.3.4",
|
|
69
|
+
"@types/react": "19.2.18",
|
|
61
70
|
"esbuild": "0.27.0",
|
|
62
71
|
"prettier": "3.8.1",
|
|
63
72
|
"react": "19.2.4",
|