@serenis/design-tokens 0.21.0

package/LICENSE

@@ -0,0 +1,130 @@
+PolyForm Noncommercial License 1.0.0
+
+Required Notice: Copyright (c) 2026 Serenis Health S.r.l.
+
+<https://polyformproject.org/licenses/noncommercial/1.0.0>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree
+to them as both strict obligations and conditions to all
+your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the
+software to do everything you might do with the software
+that would otherwise infringe the licensor's copyright
+in it for any permitted purpose. However, you may
+only distribute the software according to Distribution
+License and make changes or new works based on the software
+according to Changes and New Works License.
+
+## Distribution License
+
+The licensor grants you an additional copyright license
+to distribute copies of the software. Your license
+to distribute covers distributing the software with
+changes and new works permitted by Changes and New Works
+License.
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of
+the software from you also gets a copy of these terms or the
+URL for them above, as well as copies of any plain-text lines
+beginning with `Required Notice:` that the licensor provided
+with the software.
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to
+make changes and new works based on the software for any
+permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that
+covers patent claims the licensor can license, or becomes able
+to license, that you would infringe by using the software.
+
+## Noncommercial Purposes
+
+Any noncommercial purpose is a permitted purpose.
+
+## Personal Uses
+
+Personal use for research, experiment, and testing for
+the benefit of public knowledge, personal study, private
+entertainment, hobby projects, amateur pursuits, or religious
+observance, without any anticipated commercial application,
+is use for a permitted purpose.
+
+## Noncommercial Organizations
+
+Use by any charitable organization, educational institution,
+public research organization, public safety or health
+organization, environmental protection organization,
+or government institution is use for a permitted purpose
+regardless of the source of funding or obligations resulting
+from the funding.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the
+law. These terms do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of
+your licenses to anyone else, or prevent the licensor from
+granting licenses to anyone else. These terms do not imply
+any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or
+contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If
+your company makes such a claim, your patent license ends
+immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have
+violated any of these terms, or done anything with the software
+not covered by your licenses, your licenses can nonetheless
+continue if you come into full compliance with these terms,
+and take practical steps to correct past violations, within
+32 days of receiving notice. Otherwise, all your licenses
+end immediately.
+
+## No Liability
+
+As far as the law allows, the software comes as is, without
+any warranty or condition, and the licensor will not be liable
+to you for any damages arising out of these terms or the use
+or nature of the software, under any kind of legal claim.
+
+## Definitions
+
+The "licensor" is the individual or entity offering these
+terms, and the "software" is the software the licensor makes
+available under these terms.
+
+"You" refers to the individual or entity agreeing to these
+terms.
+
+"Your company" is any legal entity, sole proprietorship,
+or other kind of organization that you work for, plus all
+organizations that have control over, are under the control of,
+or are under common control with that organization. "Control"
+means ownership of substantially all the assets of an entity,
+or the power to direct its management and policies by vote,
+contract, or otherwise. Control can be direct or indirect.
+
+"Your licenses" are all the licenses granted to you for the
+software under these terms.
+
+"Use" means anything you do with the software requiring one
+of your licenses.

package/README.md

@@ -0,0 +1,284 @@
+# design-tokens
+
+Design tokens for the Serenis design system. Generates typed JS constants, CSS custom properties, cssvar accessor helpers, and CSS utility classes — all from a single set of [DTCG](https://tr.designtokens.org/format/) JSON files.
+
+See [ADR-0011](../../docs/adr/0011-design-tokens-architecture.md) for architectural decisions.
+
+## Install
+
+```bash
+npm install @serenis/design-tokens
+```
+
+Peer dependencies (must be installed by the consuming app):
+
+- `react` >= 19.0.0 (for Storybook stories only; not required at runtime for CSS/JS constants)
+
+Import the CSS bundle in your app entry point:
+
+```ts
+import '@serenis/design-tokens/css'
+```
+
+Sub-paths for advanced use cases: `@serenis/design-tokens/css/base`, `css/serenis-light`, `css/serenis-dark`, `utilities`.
+
+## Quick start
+
+```bash
+# Build all outputs (codegen + CSS + JS bundle)
+yarn workspace design-tokens build
+
+# Run tests (includes golden snapshot tests)
+yarn workspace design-tokens test
+
+# Update golden snapshots after intentional changes
+yarn workspace design-tokens test -- -u
+```
+
+## Directory structure
+
+```text
+libraries/design-tokens/
+├── tokens/                    # DTCG JSON source files
+│   ├── root.json              # Base tokens (all types)
+│   ├── serenis-light.json     # Light theme overrides
+│   ├── serenis-dark.json      # Dark theme overrides
+│   ├── aliases.json           # Semantic alias tokens
+│   ├── tablet.json            # Responsive overrides (≥601px)
+│   └── desktop.json           # Responsive overrides (≥1025px)
+├── src/
+│   ├── stories/               # Storybook stories and documentation (colocated)
+│   │   ├── Breakpoints/
+│   │   ├── Color/             # Color stories + Overview.mdx doc page
+│   │   ├── Dimensions/
+│   │   ├── Effects/
+│   │   ├── Typography/
+│   │   ├── UtilityClasses/
+│   │   ├── components/        # Shared story helper components
+│   │   └── docs/              # Domain-specific doc helpers for MDX pages
+│   │       ├── components/    # Category-specific doc components (ColorPairing, etc.)
+│   │       └── utils/         # Token description extractors (reads $description from JSON)
+│   └── utils/                 # Hand-written runtime helpers (compiled → dist/utils/)
+├── scripts/
+│   ├── pipeline/              # Build pipeline entry + Style Dictionary config
+│   ├── codegen/               # TypeScript module generators
+│   ├── cssUtilities/          # CSS utility class generator
+│   └── shared/                # JSON reader, token key sorting
+├── dist/                      # Generated JS/DTS modules + CSS (gitignored)
+│   ├── types/                 # Token name arrays + union types
+│   ├── constants/             # UPPER_SNAKE_CASE constants (var refs + raw values)
+│   ├── cssvar/                # Typed accessor functions
+│   ├── utils/                 # Compiled from src/utils/
+│   └── *.css                  # CSS custom properties + utility classes
+└── package.json
+```
+
+## Documentation pages
+
+MDX files under `src/stories/` are picked up by Storybook as doc pages (configured in `apps/design-system/.storybook/main.ts`). These pages use design-token-based typography via `docs-reset.css`, which overrides Storybook's built-in styles.
+
+Reusable building blocks for doc pages (`SectionIntro`, `DosDonts`, `Table`/`Row`, `CodeExample`) come from the `storybook-docs` library. Category-specific visual components (e.g. `ColorPairing`) live in `src/stories/docs/components/`. Token `$description` metadata is read by `src/stories/docs/utils/tokenDescriptions.ts`, so doc pages stay in sync with the JSON source automatically.
+
+Story sort order puts "Overview" pages first, then "Playground", then everything else.
+
+### Writing an Overview page
+
+Every token category should have an `Overview.mdx` file that follows a consistent structure. Use `Color/Overview.mdx` as the reference implementation.
+
+**Expected sections:**
+
+1. **Title + intro** — Category name as `# heading`, one-line summary, then `<SectionIntro>` pulling `$description` from the token JSON source.
+2. **Theme and responsive behavior** — How these tokens behave across themes and viewports. Every Overview page includes this section for consistency.
+3. **Conceptual model** — How the tokens in this category are organized (layers, scales, naming logic). Use `<Table>` for structured breakdowns.
+4. **Token-by-token guide with code examples** — Walk through the main tokens/groups with usage guidance, rendered values, `<CodeExample>` blocks, and `<DosDonts>`. Code examples and guidelines are interleaved within each token subsection rather than gathered at the end.
+5. **Accessibility / pairing notes** (when relevant) — Contrast, motion, sizing, or other a11y considerations for this category. Not every category needs a dedicated section.
+
+**Imports:**
+
+```tsx
+import { Meta } from '@storybook/addon-docs/blocks'
+import { CodeExample, DosDonts, Row, SectionIntro, Table } from 'storybook-docs'
+import { rootDescriptions } from '../docs'
+// For themed tokens (Color, Effects):
+import { rootDescriptions, lightDescriptions, darkDescriptions } from '../docs'
+```
+
+Generic building blocks (`SectionIntro`, `DosDonts`, `Table`/`Row`, `CodeExample`) come from the `storybook-docs` library. Category-specific components (e.g. `ColorPairing`) live in `src/stories/docs/components/`. Token descriptions are pre-computed maps in `src/stories/docs/utils/tokenDescriptions.ts` — use `rootDescriptions.spacing`, `lightDescriptions.color`, etc. to get `$description` strings. This keeps docs in sync with the JSON source automatically.
+
+## How to consume
+
+### 1. JS constants (styled-components)
+
+```tsx
+import { COLOR_PRIMARY, SPACING_MD, BORDER_RADIUS_LG } from '@serenis/design-tokens'
+
+const Card = styled.div`
+  background: ${COLOR_PRIMARY};
+  padding: ${SPACING_MD};
+  border-radius: ${BORDER_RADIUS_LG};
+`
+```
+
+Each constant resolves to `var(--srns-spacing-md)`. A `_VALUE` companion holds the raw CSS value:
+
+```ts
+SPACING_MD // "var(--srns-spacing-md)"
+SPACING_MD_VALUE // "16px"
+```
+
+### 2. CSS custom properties
+
+```css
+@import '@serenis/design-tokens/css'; /* base + both themes + utility classes */
+/* or granular: */
+@import '@serenis/design-tokens/css/base'; /* root + responsive overrides */
+@import '@serenis/design-tokens/css/serenis-light'; /* base + light theme (standalone) */
+@import '@serenis/design-tokens/css/serenis-dark'; /* base + dark theme (standalone) */
+```
+
+All variables are prefixed `--srns-` and scoped to `:root` (base) or `.srns-serenis-light` / `.srns-serenis-dark` (themes).
+
+### 3. Cssvar accessor helpers
+
+```ts
+import { cssvarSpacing } from '@serenis/design-tokens'
+
+cssvarSpacing('md')
+// → { name: 'srns-spacing-md', value: 'var(--srns-spacing-md)' }
+```
+
+Typed: `cssvarSpacing` only accepts valid `SpacingName` values.
+
+### 4. CSS utility classes
+
+```css
+/* app.css */
+@import '@serenis/design-tokens/utilities';
+```
+
+This gives you utility classes mapped to design tokens: `bg-primary-50`, `p-md`, `px-lg`, `mb-sm`, `rounded-lg`, `elevation-sm`, `font-600`, etc. Typography composites are available as `typography-paragraph`, `typography-public-h1`, etc. Directional spacing uses short Tailwind-style names (`px`/`py`/`pl`/`pr`/`pt`/`pb` for padding, `mx`/`my`/`ml`/`mr`/`mt`/`mb` for margin), mapped to CSS logical properties under the hood. No external CSS framework required; the output is plain CSS compatible with Safari 16+.
+
+#### Responsive variants
+
+Some utility classes are available with a mobile-first breakpoint prefix, following the pattern `{bp}\:{utility}`. Three breakpoints are supported:
+
+| Prefix | Media query         |
+| ------ | ------------------- |
+| `md`   | `min-width: 601px`  |
+| `lg`   | `min-width: 1025px` |
+| `xl`   | `min-width: 1441px` |
+
+For example, `md\:flex` applies `display: flex` when the viewport is at least 601px wide.
+
+**Utilities with responsive variants:**
+
+- Spacing padding (`p-*`, `px-*`, `py-*`, `pl-*`, `pr-*`, `pt-*`, `pb-*`)
+- Spacing margin (`m-*`, `mx-*`, `my-*`, `ml-*`, `mr-*`, `mt-*`, `mb-*`)
+- Spacing gap (`gap-*`, `gap-x-*`, `gap-y-*`)
+- Display (`flex`, `grid`, `block`, `inline-flex`, `inline-block`, `hidden`)
+- Flex direction (`flex-row`, `flex-col`)
+- Alignment (`items-center`, `items-start`, `items-end`)
+- Justify (`justify-center`, `justify-between`, `justify-start`, `justify-end`)
+
+**Utilities without responsive variants:** spacing sizing (`w-*`, `h-*`, `size-*`), border radius (`rounded-*`), colors (`bg-*`, `text-{color}`, `border-{color}`), border width (`border-*`), elevation (`elevation-*`), font weight, font family, opacity (`opacity-*`), typography composites (`typography-*`), position, overflow, text-align, flex-wrap, border-style, and transition.
+
+#### `cx` helper
+
+The build also generates a `cx()` helper for composing utility classes. It is typed via `UtilityClassName`, so you get autocomplete and compile-time checks. It also accepts object arguments for conditional classes — keys whose value is truthy are included in the output:
+
+```tsx
+import { cx } from '@serenis/design-tokens'
+;<div className={cx('p-md', 'bg-primary-50', 'rounded-lg')} />
+;<div className={cx('pt-md', { [cx('pt-0', 'bg-primary-50')]: isLarge })} />
+```
+
+**Linting:** Two ESLint rules enforce `cx()` usage across the monorepo. `enforce-cx-classname` requires `cx()` for all `className` composition (no raw strings or template literals). `cx-classnames-order` enforces a deterministic CSS-property-based ordering of class arguments and removes duplicates — this rule is auto-fixable.
+
+## How to add a token
+
+1. **Add to JSON**: Edit the appropriate file in `tokens/` (usually `root.json`). Follow the DTCG format:
+
+   ```json
+   {
+     "my-branch": {
+       "$type": "dimension",
+       "$description": "Description of this token group",
+       "my-token": { "$value": { "value": 8, "unit": "px" } }
+     }
+   }
+   ```
+
+2. **Build**: Run `yarn workspace design-tokens build`. The pipeline auto-discovers branches by `$type`.
+
+3. **Update snapshots**: Run `yarn workspace design-tokens test -- -u` to update golden snapshots.
+
+4. The new token is immediately available as:
+   - JS constant: `MY_BRANCH_MY_TOKEN` / `MY_BRANCH_MY_TOKEN_VALUE`
+   - CSS variable: `--srns-my-branch-my-token`
+   - CSS utility class (e.g. `my-branch-my-token`)
+
+## How to add a theme
+
+1. Create a new JSON file in `tokens/` with color/elevation overrides.
+2. Register it in `scripts/pipeline/themeTokenRegistry.ts`:
+
+   ```ts
+   { id: 'my-theme', tokenJsonFileName: 'my-theme.json', colorScheme: 'light' }
+   ```
+
+3. Rebuild. The pipeline produces `dist/my-theme.css` and theme-specific JS constants automatically.
+
+## Token types
+
+| DTCG `$type` | Token branches                                                                                      | Codegen                  |
+| ------------ | --------------------------------------------------------------------------------------------------- | ------------------------ |
+| `dimension`  | spacing, container, border-radius, border-width, font-size, line-height, letter-spacing, breakpoint | Registry (simple)        |
+| `duration`   | time                                                                                                | Registry (simple)        |
+| `fontFamily` | font-family                                                                                         | Registry (simple)        |
+| `fontWeight` | font-weight                                                                                         | Registry (simple)        |
+| `number`     | opacity                                                                                             | Registry (simple)        |
+| `string`     | media-query                                                                                         | Registry (simple)        |
+| `shadow`     | elevation                                                                                           | Dedicated (theme layers) |
+| `color`      | color                                                                                               | Dedicated (theme layers) |
+| `typography` | typography, typography.public                                                                       | Dedicated (composite)    |
+
+"Registry (simple)" types share a unified codegen path via `SIMPLE_TOKEN_RESOLVERS`. Adding a new simple type means adding one entry to the registry in `scripts/codegen/tokenTypeResolvers.ts`.
+
+## Build pipeline
+
+```text
+tokens/*.json
+    │
+    ├──▶ Custom codegen ──▶ dist/{types,constants,cssvar,utils}/*.{js,d.ts}
+    │       │
+    │       └──▶ esbuild CJS bundle ──▶ dist/index.cjs
+    │
+    ├──▶ Style Dictionary ──▶ dist/root.css, dist/{theme}.css, dist/tablet.css, dist/desktop.css
+    │       │
+    │       └──▶ Minify + assemble ──▶ dist/base.css, dist/serenis-light.css, dist/serenis-dark.css
+    │
+    ├──▶ Style Dictionary (utility classes format) ──▶ dist/utilities.css
+    │       │
+    │       └──▶ Extract class names ──▶ dist/types/utility-class.{js,d.ts} (UtilityClassName)
+    │                                  + dist/utils/cx.{js,d.ts} (cx helper)
+    │
+    └──▶ Concat base + themes + utilities + minify ──▶ dist/index.css
+```
+
+## Scripts
+
+| Command          | Description                                            |
+| ---------------- | ------------------------------------------------------ |
+| `build`          | Full build: codegen + Style Dictionary CSS + JS bundle |
+| `test`           | Run all tests (includes golden snapshot tests)         |
+| `test:watch`     | Watch mode                                             |
+| `typecheck`      | TypeScript validation                                  |
+| `lint`           | ESLint                                                 |
+| `lint:fix`       | ESLint with auto-fix                                   |
+| `prettify`       | Prettier formatting                                    |
+| `prettify:check` | Check Prettier formatting without writing              |
+| `clean`          | Remove `.turbo`, `build`, `dist`, `node_modules`       |
+
+## License
+
+PolyForm Noncommercial 1.0.0 — see [LICENSE](./LICENSE) for the full text.

package/dist/base.css

@@ -0,0 +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-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}}

package/dist/constants/border-radius.d.ts

@@ -0,0 +1,47 @@
+/** `0` */
+export declare const BORDER_RADIUS_0: 'var(--srns-border-radius-0)'
+export declare const BORDER_RADIUS_0_VALUE: '0'
+
+/** `2px` */
+export declare const BORDER_RADIUS_4XS: 'var(--srns-border-radius-4xs)'
+export declare const BORDER_RADIUS_4XS_VALUE: '2px'
+
+/** `4px` */
+export declare const BORDER_RADIUS_3XS: 'var(--srns-border-radius-3xs)'
+export declare const BORDER_RADIUS_3XS_VALUE: '4px'
+
+/** `6px` */
+export declare const BORDER_RADIUS_2XS: 'var(--srns-border-radius-2xs)'
+export declare const BORDER_RADIUS_2XS_VALUE: '6px'
+
+/** `8px` */
+export declare const BORDER_RADIUS_XS: 'var(--srns-border-radius-xs)'
+export declare const BORDER_RADIUS_XS_VALUE: '8px'
+
+/** `12px` */
+export declare const BORDER_RADIUS_SM: 'var(--srns-border-radius-sm)'
+export declare const BORDER_RADIUS_SM_VALUE: '12px'
+
+/** `16px` */
+export declare const BORDER_RADIUS_MD: 'var(--srns-border-radius-md)'
+export declare const BORDER_RADIUS_MD_VALUE: '16px'
+
+/** `24px` */
+export declare const BORDER_RADIUS_LG: 'var(--srns-border-radius-lg)'
+export declare const BORDER_RADIUS_LG_VALUE: '24px'
+
+/** `32px` */
+export declare const BORDER_RADIUS_XL: 'var(--srns-border-radius-xl)'
+export declare const BORDER_RADIUS_XL_VALUE: '32px'
+
+/** `40px` */
+export declare const BORDER_RADIUS_2XL: 'var(--srns-border-radius-2xl)'
+export declare const BORDER_RADIUS_2XL_VALUE: '40px'
+
+/** `48px` */
+export declare const BORDER_RADIUS_3XL: 'var(--srns-border-radius-3xl)'
+export declare const BORDER_RADIUS_3XL_VALUE: '48px'
+
+/** `9999px` */
+export declare const BORDER_RADIUS_CIRCLE: 'var(--srns-border-radius-circle)'
+export declare const BORDER_RADIUS_CIRCLE_VALUE: '9999px'

package/dist/constants/border-radius.js

@@ -0,0 +1,47 @@
+/** `0` */
+export const BORDER_RADIUS_0 = 'var(--srns-border-radius-0)'
+export const BORDER_RADIUS_0_VALUE = '0'
+
+/** `2px` */
+export const BORDER_RADIUS_4XS = 'var(--srns-border-radius-4xs)'
+export const BORDER_RADIUS_4XS_VALUE = '2px'
+
+/** `4px` */
+export const BORDER_RADIUS_3XS = 'var(--srns-border-radius-3xs)'
+export const BORDER_RADIUS_3XS_VALUE = '4px'
+
+/** `6px` */
+export const BORDER_RADIUS_2XS = 'var(--srns-border-radius-2xs)'
+export const BORDER_RADIUS_2XS_VALUE = '6px'
+
+/** `8px` */
+export const BORDER_RADIUS_XS = 'var(--srns-border-radius-xs)'
+export const BORDER_RADIUS_XS_VALUE = '8px'
+
+/** `12px` */
+export const BORDER_RADIUS_SM = 'var(--srns-border-radius-sm)'
+export const BORDER_RADIUS_SM_VALUE = '12px'
+
+/** `16px` */
+export const BORDER_RADIUS_MD = 'var(--srns-border-radius-md)'
+export const BORDER_RADIUS_MD_VALUE = '16px'
+
+/** `24px` */
+export const BORDER_RADIUS_LG = 'var(--srns-border-radius-lg)'
+export const BORDER_RADIUS_LG_VALUE = '24px'
+
+/** `32px` */
+export const BORDER_RADIUS_XL = 'var(--srns-border-radius-xl)'
+export const BORDER_RADIUS_XL_VALUE = '32px'
+
+/** `40px` */
+export const BORDER_RADIUS_2XL = 'var(--srns-border-radius-2xl)'
+export const BORDER_RADIUS_2XL_VALUE = '40px'
+
+/** `48px` */
+export const BORDER_RADIUS_3XL = 'var(--srns-border-radius-3xl)'
+export const BORDER_RADIUS_3XL_VALUE = '48px'
+
+/** `9999px` */
+export const BORDER_RADIUS_CIRCLE = 'var(--srns-border-radius-circle)'
+export const BORDER_RADIUS_CIRCLE_VALUE = '9999px'

package/dist/constants/border-width.d.ts

@@ -0,0 +1,19 @@
+/** `0` */
+export declare const BORDER_WIDTH_0: 'var(--srns-border-width-0)'
+export declare const BORDER_WIDTH_0_VALUE: '0'
+
+/** `0.5px` */
+export declare const BORDER_WIDTH_05: 'var(--srns-border-width-05)'
+export declare const BORDER_WIDTH_05_VALUE: '0.5px'
+
+/** `1px` */
+export declare const BORDER_WIDTH_1: 'var(--srns-border-width-1)'
+export declare const BORDER_WIDTH_1_VALUE: '1px'
+
+/** `2px` */
+export declare const BORDER_WIDTH_2: 'var(--srns-border-width-2)'
+export declare const BORDER_WIDTH_2_VALUE: '2px'
+
+/** `4px` */
+export declare const BORDER_WIDTH_4: 'var(--srns-border-width-4)'
+export declare const BORDER_WIDTH_4_VALUE: '4px'

package/dist/constants/border-width.js

@@ -0,0 +1,19 @@
+/** `0` */
+export const BORDER_WIDTH_0 = 'var(--srns-border-width-0)'
+export const BORDER_WIDTH_0_VALUE = '0'
+
+/** `0.5px` */
+export const BORDER_WIDTH_05 = 'var(--srns-border-width-05)'
+export const BORDER_WIDTH_05_VALUE = '0.5px'
+
+/** `1px` */
+export const BORDER_WIDTH_1 = 'var(--srns-border-width-1)'
+export const BORDER_WIDTH_1_VALUE = '1px'
+
+/** `2px` */
+export const BORDER_WIDTH_2 = 'var(--srns-border-width-2)'
+export const BORDER_WIDTH_2_VALUE = '2px'
+
+/** `4px` */
+export const BORDER_WIDTH_4 = 'var(--srns-border-width-4)'
+export const BORDER_WIDTH_4_VALUE = '4px'

package/dist/constants/breakpoint.d.ts

@@ -0,0 +1,15 @@
+/** `0` */
+export declare const BREAKPOINT_SM: 'var(--srns-breakpoint-sm)'
+export declare const BREAKPOINT_SM_VALUE: '0'
+
+/** `601px` */
+export declare const BREAKPOINT_MD: 'var(--srns-breakpoint-md)'
+export declare const BREAKPOINT_MD_VALUE: '601px'
+
+/** `1025px` */
+export declare const BREAKPOINT_LG: 'var(--srns-breakpoint-lg)'
+export declare const BREAKPOINT_LG_VALUE: '1025px'
+
+/** `1441px` */
+export declare const BREAKPOINT_XL: 'var(--srns-breakpoint-xl)'
+export declare const BREAKPOINT_XL_VALUE: '1441px'

package/dist/constants/breakpoint.js

@@ -0,0 +1,15 @@
+/** `0` */
+export const BREAKPOINT_SM = 'var(--srns-breakpoint-sm)'
+export const BREAKPOINT_SM_VALUE = '0'
+
+/** `601px` */
+export const BREAKPOINT_MD = 'var(--srns-breakpoint-md)'
+export const BREAKPOINT_MD_VALUE = '601px'
+
+/** `1025px` */
+export const BREAKPOINT_LG = 'var(--srns-breakpoint-lg)'
+export const BREAKPOINT_LG_VALUE = '1025px'
+
+/** `1441px` */
+export const BREAKPOINT_XL = 'var(--srns-breakpoint-xl)'
+export const BREAKPOINT_XL_VALUE = '1441px'