@nectary/styles 0.0.0-stage → 1.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 (7) hide show
  1. package/README.md +85 -2
  2. package/TOKENS.md +400 -0
  3. package/dark.css +81 -0
  4. package/fonts.css +78 -0
  5. package/index.css +301 -0
  6. package/light.css +221 -0
  7. package/package.json +24 -4
package/README.md CHANGED
@@ -1,3 +1,86 @@
1
- # Temporary Holding Version
1
+ # @nectary/styles
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ Nectary design tokens as global CSS custom properties — every `--sinch-ref-*`
4
+ and `--sinch-sys-*` variable, for light and dark themes. No components, no
5
+ component (`comp`) tokens, no JavaScript.
6
+
7
+ The full list of variables, their values and what each sys token is for lives in
8
+ [TOKENS.md](./TOKENS.md).
9
+
10
+ ## Install
11
+
12
+ ```bash
13
+ pnpm add @nectary/styles
14
+ ```
15
+
16
+ ## Use
17
+
18
+ ```css
19
+ @import "@nectary/styles"; /* ref + light + dark */
20
+ @import "@nectary/styles/fonts.css"; /* optional: DM Sans / DM Mono @font-face (no icon fonts) */
21
+ ```
22
+
23
+ or from JavaScript with a bundler:
24
+
25
+ ```js
26
+ import '@nectary/styles'
27
+ ```
28
+
29
+ Then style with sys tokens:
30
+
31
+ ```css
32
+ .panel {
33
+ background: var(--sinch-sys-color-surface-primary-default);
34
+ border: 1px solid var(--sinch-sys-color-border-default);
35
+ border-radius: var(--sinch-sys-shape-radius-l);
36
+ color: var(--sinch-sys-color-text-default);
37
+ font: var(--sinch-sys-font-body-m);
38
+ }
39
+ ```
40
+
41
+ ### Dark theme
42
+
43
+ Light values apply on `:root`. Switch a page or any subtree to dark with
44
+ `data-theme="dark"` (or the `nectary-theme-dark` class); switch back inside it
45
+ with `data-theme="light"`.
46
+
47
+ ```html
48
+ <html data-theme="dark">
49
+ ```
50
+
51
+ `index.css` declares the dark block after the light one, so `data-theme="dark"`
52
+ on `<html>` wins over `:root`. When loading the blocks separately, load
53
+ `dark.css` after `light.css`.
54
+
55
+ ### With Nectary components
56
+
57
+ The component themes (`@nectary/theme-base` and friends) declare sys tokens on
58
+ the `.nectary-theme-base` class. That class is more specific than these global
59
+ blocks, so inside it the theme's own values win, and `data-theme="dark"` alone
60
+ does not switch Nectary components to dark. On those elements, also add the
61
+ theme's dark class:
62
+
63
+ ```html
64
+ <body class="nectary-theme-base nectary-theme-dark">
65
+ ```
66
+
67
+ | Entry point | Contains |
68
+ | --- | --- |
69
+ | `@nectary/styles` (`index.css`) | ref + light sys + dark sys |
70
+ | `@nectary/styles/light.css` | ref + light sys |
71
+ | `@nectary/styles/dark.css` | dark sys only (load after `light.css`) |
72
+ | `@nectary/styles/fonts.css` | `@font-face` rules |
73
+
74
+ ## Contributing
75
+
76
+ Every file except `descriptions.json` and `scripts/` is generated from the
77
+ processed themes (`themes/base`, `themes/dark`). Do not edit them by hand.
78
+
79
+ ```bash
80
+ pnpm tokens # rebuilds themes, then this package
81
+ pnpm styles # rebuild this package only
82
+ pnpm styles:check # fail if generated files or descriptions are out of sync (part of pnpm lint)
83
+ ```
84
+
85
+ When a sys token is added or renamed, add its explanation to
86
+ `descriptions.json` — generation fails until every sys token has one.
package/TOKENS.md ADDED
@@ -0,0 +1,400 @@
1
+ <!-- Auto-generated by packages/nectary-styles/scripts/generate.ts — do not edit. Run `pnpm styles`. -->
2
+
3
+ # Nectary tokens
4
+
5
+ Every CSS custom property shipped by `@nectary/styles`.
6
+
7
+ - **Sys** tokens are semantic. Use them in product UI — they follow the theme (light / dark).
8
+ - **Ref** tokens are the raw palette and scales that sys tokens point to. Avoid them in product UI.
9
+
10
+ Light values apply on `:root` and `[data-theme="light"]`; dark values on `[data-theme="dark"]` and `.nectary-theme-dark`.
11
+ `↳` shows the token a value is aliased to.
12
+
13
+ ## Sys tokens (76)
14
+
15
+ ### Color Text
16
+
17
+ Foreground colors for text and icons.
18
+
19
+ | Variable | Light | Dark | Use for |
20
+ | --- | --- | --- | --- |
21
+ | `--sinch-sys-color-text-default` | `#1A2126`<br>↳ ref-color-neutral-900 | `#F7F9FA`<br>↳ ref-color-neutral-50 | Body text, input values, headings — all regular text. |
22
+ | `--sinch-sys-color-text-caption` | `#4B575E`<br>↳ ref-color-neutral-700 | `#C9D1D6`<br>↳ ref-color-neutral-300 | Captions, helper text, image descriptions, secondary icons, non-essential text. |
23
+ | `--sinch-sys-color-text-muted` | `#626C73`<br>↳ ref-color-neutral-600 | `#9EA9B0`<br>↳ ref-color-neutral-400 | Placeholders and other low-emphasis, non-meaningful text. |
24
+ | `--sinch-sys-color-text-disabled` | `#9EA9B0`<br>↳ ref-color-neutral-400 | `#626C73`<br>↳ ref-color-neutral-600 | Text and icons in a disabled state. |
25
+
26
+ ### Color Border
27
+
28
+ Strokes, dividers and outlines.
29
+
30
+ | Variable | Light | Dark | Use for |
31
+ | --- | --- | --- | --- |
32
+ | `--sinch-sys-color-border-default` | `#B7C1C7`<br>↳ ref-color-neutral-350 | `#4B575E`<br>↳ ref-color-neutral-700 | Default divider, card outline and table header border. |
33
+ | `--sinch-sys-color-border-subtle` | `#DCE2E5`<br>↳ ref-color-neutral-200 | `#272F36`<br>↳ ref-color-neutral-800 | Light separators: popovers, code blocks, table cells. |
34
+ | `--sinch-sys-color-border-strong` | `#9EA9B0`<br>↳ ref-color-neutral-400 | `#626C73`<br>↳ ref-color-neutral-600 | Form control strokes: inputs, checkboxes, radios. |
35
+ | `--sinch-sys-color-border-disabled` | `#EBEEF0`<br>↳ ref-color-neutral-100 | `#1A2126`<br>↳ ref-color-neutral-900 | Stroke of disabled form controls. |
36
+
37
+ ### Color Surface
38
+
39
+ Backgrounds. Surfaces stack canvas → primary → secondary → tertiary; each level has hover / active / disabled states for interactive elements placed on it. Surface levels are independent from elevation (shadows).
40
+
41
+ | Variable | Light | Dark | Use for |
42
+ | --- | --- | --- | --- |
43
+ | `--sinch-sys-color-surface-canvas` | `#EBEEF0`<br>↳ ref-color-neutral-100 | `#1A2126`<br>↳ ref-color-neutral-900 | The application background behind everything else. |
44
+ | `--sinch-sys-color-surface-primary-default` | `#FFFFFF`<br>↳ sys-color-basic-pure | `#000000`<br>↳ sys-color-basic-pure | Main content surface (cards, panels, dialogs) — most content lives here. |
45
+ | `--sinch-sys-color-surface-primary-hover` | `#F7F9FA`<br>↳ ref-color-neutral-50 | `#14181C`<br>↳ ref-color-neutral-950 | Hover background for interactive items placed on the primary surface. |
46
+ | `--sinch-sys-color-surface-primary-active` | `#EBEEF0`<br>↳ ref-color-neutral-100 | `#1A2126`<br>↳ ref-color-neutral-900 | Pressed / selected background for interactive items on the primary surface. |
47
+ | `--sinch-sys-color-surface-primary-disabled` | `#FFFFFF`<br>↳ sys-color-basic-pure | `#000000`<br>↳ sys-color-basic-pure | Background of disabled interactive items on the primary surface. |
48
+ | `--sinch-sys-color-surface-secondary-default` | `#F7F9FA`<br>↳ ref-color-neutral-50 | `#14181C`<br>↳ ref-color-neutral-950 | Content that should stand apart from the primary surface (e.g. a nested section). |
49
+ | `--sinch-sys-color-surface-secondary-hover` | `#EBEEF0`<br>↳ ref-color-neutral-100 | `#1A2126`<br>↳ ref-color-neutral-900 | Hover background for interactive items on the secondary surface. |
50
+ | `--sinch-sys-color-surface-secondary-active` | `#DCE2E5`<br>↳ ref-color-neutral-200 | `#272F36`<br>↳ ref-color-neutral-800 | Pressed / selected background for interactive items on the secondary surface. |
51
+ | `--sinch-sys-color-surface-secondary-disabled` | `#F7F9FA`<br>↳ ref-color-neutral-50 | `#14181C`<br>↳ ref-color-neutral-950 | Background of disabled interactive items on the secondary surface. |
52
+ | `--sinch-sys-color-surface-tertiary-default` | `#EBEEF0`<br>↳ ref-color-neutral-100 | `#1A2126`<br>↳ ref-color-neutral-900 | Content that should stand apart from the secondary surface. |
53
+ | `--sinch-sys-color-surface-tertiary-hover` | `#DCE2E5`<br>↳ ref-color-neutral-200 | `#272F36`<br>↳ ref-color-neutral-800 | Hover background for interactive items on the tertiary surface. |
54
+ | `--sinch-sys-color-surface-tertiary-active` | `#C9D1D6`<br>↳ ref-color-neutral-300 | `#4B575E`<br>↳ ref-color-neutral-700 | Pressed / selected background for interactive items on the tertiary surface. |
55
+ | `--sinch-sys-color-surface-tertiary-disabled` | `#F7F9FA`<br>↳ ref-color-neutral-50 | `#1A2126`<br>↳ ref-color-neutral-900 | Background of disabled interactive items on the tertiary surface. |
56
+ | `--sinch-sys-color-surface-transparent-default` | `transparent`<br>↳ sys-color-basic-transparent | — | Transparent background for ghost / subtle interactive items on any surface. |
57
+ | `--sinch-sys-color-surface-transparent-hover` | `#1A21261A` | `#EBEEF01A` | Translucent hover overlay for ghost items; works on any surface. |
58
+ | `--sinch-sys-color-surface-transparent-active` | `#1A212633` | `#EBEEF033` | Translucent pressed / selected overlay for ghost items; works on any surface. |
59
+ | `--sinch-sys-color-surface-transparent-disabled` | `transparent`<br>↳ sys-color-basic-transparent | — | Background of disabled ghost items. |
60
+
61
+ ### Color Primary
62
+
63
+ The interactive brand color for main actions and selected controls.
64
+
65
+ | Variable | Light | Dark | Use for |
66
+ | --- | --- | --- | --- |
67
+ | `--sinch-sys-color-primary-default` | `#006063`<br>↳ ref-color-tropical-700 | `#06998B`<br>↳ ref-color-tropical-500 | Primary buttons, checked checkboxes / radios / toggles, and other main or active controls. |
68
+ | `--sinch-sys-color-primary-hover` | `#007874`<br>↳ ref-color-tropical-600 | `#51B8A6`<br>↳ ref-color-tropical-400 | Hover state of primary-colored controls. |
69
+ | `--sinch-sys-color-primary-active` | `#0C333B`<br>↳ ref-color-tropical-800 | `#007874`<br>↳ ref-color-tropical-600 | Pressed state of primary-colored controls. |
70
+ | `--sinch-sys-color-primary-disabled` | `#51B8A6`<br>↳ ref-color-tropical-400 | `#006063`<br>↳ ref-color-tropical-700 | Disabled state of primary-colored controls. |
71
+ | `--sinch-sys-color-primary-foreground` | `#FFFFFF`<br>↳ sys-color-basic-pure | `#000000`<br>↳ sys-color-basic-pure | Text and icons placed on a primary-colored background. |
72
+
73
+ ### Color Feedback
74
+
75
+ Status colors. `default` for icons and accents, `subtle` for tinted backgrounds, `strong` for text on a subtle background.
76
+
77
+ | Variable | Light | Dark | Use for |
78
+ | --- | --- | --- | --- |
79
+ | `--sinch-sys-color-feedback-info-default` | `#3089F0`<br>↳ ref-color-ocean-500 | — | Informational status: keeps the user informed, no action required. |
80
+ | `--sinch-sys-color-feedback-info-subtle` | `#C7E5FF`<br>↳ ref-color-ocean-200 | `#112F57`<br>↳ ref-color-ocean-800 | Background for informational messages and badges. |
81
+ | `--sinch-sys-color-feedback-info-strong` | `#1454A8`<br>↳ ref-color-ocean-700 | `#A8D4FF`<br>↳ ref-color-ocean-300 | Text / icons on an info-subtle background. |
82
+ | `--sinch-sys-color-feedback-success-default` | `#53BD69`<br>↳ ref-color-grass-400 | — | Success status: an action or task completed successfully. |
83
+ | `--sinch-sys-color-feedback-success-subtle` | `#C2EDC5`<br>↳ ref-color-grass-200 | `#163323`<br>↳ ref-color-grass-800 | Background for success messages and badges. |
84
+ | `--sinch-sys-color-feedback-success-strong` | `#23613C`<br>↳ ref-color-grass-700 | `#99E0A2`<br>↳ ref-color-grass-300 | Text / icons on a success-subtle background. |
85
+ | `--sinch-sys-color-feedback-warning-default` | `#F58B4E`<br>↳ ref-color-pumpkin-400 | — | Warning status: something may happen depending on the user's response. |
86
+ | `--sinch-sys-color-feedback-warning-subtle` | `#FFD9BD`<br>↳ ref-color-pumpkin-200 | `#4D2215`<br>↳ ref-color-pumpkin-800 | Background for warning messages and badges. |
87
+ | `--sinch-sys-color-feedback-warning-strong` | `#8F3D1F`<br>↳ ref-color-pumpkin-700 | `#FFC299`<br>↳ ref-color-pumpkin-300 | Text / icons on a warning-subtle background. |
88
+ | `--sinch-sys-color-feedback-danger-default` | `#D63F3F` | — | Error / danger status: validation errors, destructive actions, critical info. |
89
+ | `--sinch-sys-color-feedback-danger-subtle` | `#FFD8D6`<br>↳ ref-color-raspberry-200 | `#57181C`<br>↳ ref-color-raspberry-800 | Background for error messages and badges. |
90
+ | `--sinch-sys-color-feedback-danger-strong` | `#993138`<br>↳ ref-color-raspberry-700 | `#FFBDBD`<br>↳ ref-color-raspberry-300 | Text / icons on a danger-subtle background. |
91
+ | `--sinch-sys-color-feedback-neutral-default` | `#808A91`<br>↳ ref-color-neutral-500 | — | Neutral status: informative but static, no action required. |
92
+ | `--sinch-sys-color-feedback-neutral-subtle` | `#DCE2E5`<br>↳ ref-color-neutral-200 | `#272F36`<br>↳ ref-color-neutral-800 | Background for neutral messages and badges. |
93
+ | `--sinch-sys-color-feedback-neutral-strong` | `#4B575E`<br>↳ ref-color-neutral-700 | `#C9D1D6`<br>↳ ref-color-neutral-300 | Text / icons on a neutral-subtle background. |
94
+
95
+ ### Color Focus
96
+
97
+ Keyboard focus indication.
98
+
99
+ | Variable | Light | Dark | Use for |
100
+ | --- | --- | --- | --- |
101
+ | `--sinch-sys-color-focus` | `#61ABFF`<br>↳ ref-color-ocean-400 | — | Focus rings: outlines, borders and inner shadows for keyboard focus. |
102
+
103
+ ### Color Basic
104
+
105
+ Absolute colors that flip between light and dark themes. Prefer semantic tokens above; use these only when nothing semantic fits.
106
+
107
+ | Variable | Light | Dark | Use for |
108
+ | --- | --- | --- | --- |
109
+ | `--sinch-sys-color-basic-pure` | `#FFFFFF` | `#000000` | Pure white in light theme, pure black in dark theme. |
110
+ | `--sinch-sys-color-basic-pure-inverted` | `#000000` | `#FFFFFF` | Opposite of basic-pure: black in light theme, white in dark theme. |
111
+ | `--sinch-sys-color-basic-transparent` | `transparent` | — | Fully transparent color. |
112
+
113
+ ### Font
114
+
115
+ Typography shorthands for the CSS `font` property (`weight size/line-height family`). Use as `font: var(--sinch-sys-font-body-m);`.
116
+
117
+ | Variable | Light | Dark | Use for |
118
+ | --- | --- | --- | --- |
119
+ | `--sinch-sys-font-desktop-title-hero` | `400 56px/72px "DM Sans", "Arial", sans-serif` | — | Hero / marketing headline. One per page at most. |
120
+ | `--sinch-sys-font-desktop-title-xl` | `400 40px/48px "DM Sans", "Arial", sans-serif` | — | Extra large page title. |
121
+ | `--sinch-sys-font-desktop-title-l` | `500 24px/32px "DM Sans", "Arial", sans-serif` | — | Page title (h1). |
122
+ | `--sinch-sys-font-desktop-title-m` | `500 20px/24px "DM Sans", "Arial", sans-serif` | — | Section title (h2). |
123
+ | `--sinch-sys-font-desktop-title-s` | `500 16px/24px "DM Sans", "Arial", sans-serif` | — | Subsection / card title (h3). |
124
+ | `--sinch-sys-font-desktop-title-xs` | `500 14px/22px "DM Sans", "Arial", sans-serif` | — | Small title, e.g. group or table headers (h4). |
125
+ | `--sinch-sys-font-body-m` | `400 16px/24px "DM Sans", "Arial", sans-serif` | — | Default body text. |
126
+ | `--sinch-sys-font-body-s` | `400 14px/22px "DM Sans", "Arial", sans-serif` | — | Compact body text: dense UIs, tables, secondary content. |
127
+ | `--sinch-sys-font-body-xs` | `400 12px/20px "DM Sans", "Arial", sans-serif` | — | Captions, helper and meta text. |
128
+ | `--sinch-sys-font-body-xxs` | `400 10px/16px "DM Sans", "Arial", sans-serif` | — | Tiny labels. Only for rare exceptions. |
129
+ | `--sinch-sys-font-body-emphasize` | `700 16px/24px "DM Sans", "Arial", sans-serif` | — | Bold variant of body-m for emphasis within text. |
130
+ | `--sinch-sys-font-body-emphasize-s` | `700 14px/22px "DM Sans", "Arial", sans-serif` | — | Bold variant of body-s. |
131
+ | `--sinch-sys-font-body-emphasize-xs` | `700 12px/20px "DM Sans", "Arial", sans-serif` | — | Bold variant of body-xs. |
132
+ | `--sinch-sys-font-body-link` | `400 16px/24px "DM Sans", "Arial", sans-serif` | — | Inline links in body text (pair with an underline). |
133
+ | `--sinch-sys-font-body-monospace-m` | `400 16px/24px "DM Mono", monospace` | — | Code, IDs and other fixed-width content at body-m size. |
134
+ | `--sinch-sys-font-body-monospace-s` | `400 14px/22px "DM Mono", monospace` | — | Monospace at body-s size. |
135
+ | `--sinch-sys-font-body-monospace-xs` | `400 12px/20px "DM Mono", monospace` | — | Monospace at body-xs size. |
136
+ | `--sinch-sys-font-body-monospace-xxs` | `400 10px/16px "DM Mono", monospace` | — | Monospace at body-xxs size. Rare exceptions only. |
137
+
138
+ ### Shape Radius
139
+
140
+ Corner radii for `border-radius`.
141
+
142
+ | Variable | Light | Dark | Use for |
143
+ | --- | --- | --- | --- |
144
+ | `--sinch-sys-shape-radius-xs` | `2px` | — | Tiny elements: code tags, tooltips, the smallest buttons. |
145
+ | `--sinch-sys-shape-radius-s` | `6px` | — | Small controls: checkboxes, small inputs and buttons, segmented controls. |
146
+ | `--sinch-sys-shape-radius-m` | `10px` | — | Default for buttons, inputs and popovers. |
147
+ | `--sinch-sys-shape-radius-l` | `14px` | — | Containers: cards, dialogs, code snippets, chat bubbles. |
148
+ | `--sinch-sys-shape-radius-full` | `9999px` | — | Pills and circles: avatars, badges, chips, tags. |
149
+
150
+ ### Size
151
+
152
+ Standard control heights (buttons, inputs, selects) — match these so custom controls line up with Nectary components.
153
+
154
+ | Variable | Light | Dark | Use for |
155
+ | --- | --- | --- | --- |
156
+ | `--sinch-sys-size-xs` | `24px` | — | Extra small control height. |
157
+ | `--sinch-sys-size-s` | `32px` | — | Small control height. |
158
+ | `--sinch-sys-size-m` | `40px` | — | Default control height. |
159
+ | `--sinch-sys-size-l` | `48px` | — | Large control height. |
160
+
161
+ ## Ref tokens (137)
162
+
163
+ Ref tokens are the same in light and dark themes.
164
+
165
+ ### Color
166
+
167
+ Raw color palettes. Do not use directly in product UI — reach for a sys token so the value follows the theme. Use ref colors only for data visualisation, illustrations or other cases with no semantic meaning.
168
+
169
+ #### Color Candy
170
+
171
+ | Variable | Value |
172
+ | --- | --- |
173
+ | `--sinch-ref-color-candy-50` | `#FFF5FC` |
174
+ | `--sinch-ref-color-candy-100` | `#FFE5F7` |
175
+ | `--sinch-ref-color-candy-200` | `#FFD6F3` |
176
+ | `--sinch-ref-color-candy-300` | `#FFBDEC` |
177
+ | `--sinch-ref-color-candy-350` | `#FAA5E3` |
178
+ | `--sinch-ref-color-candy-400` | `#EB83CF` |
179
+ | `--sinch-ref-color-candy-500` | `#D15CB4` |
180
+ | `--sinch-ref-color-candy-600` | `#A3488E` |
181
+ | `--sinch-ref-color-candy-700` | `#8A3778` |
182
+ | `--sinch-ref-color-candy-800` | `#472140` |
183
+ | `--sinch-ref-color-candy-900` | `#2E192A` |
184
+
185
+ #### Color Grass
186
+
187
+ | Variable | Value |
188
+ | --- | --- |
189
+ | `--sinch-ref-color-grass-50` | `#ECFFEB` |
190
+ | `--sinch-ref-color-grass-100` | `#D7F5D7` |
191
+ | `--sinch-ref-color-grass-200` | `#C2EDC5` |
192
+ | `--sinch-ref-color-grass-300` | `#99E0A2` |
193
+ | `--sinch-ref-color-grass-350` | `#77D486` |
194
+ | `--sinch-ref-color-grass-400` | `#53BD69` |
195
+ | `--sinch-ref-color-grass-500` | `#3D9956` |
196
+ | `--sinch-ref-color-grass-600` | `#2B7845` |
197
+ | `--sinch-ref-color-grass-700` | `#23613C` |
198
+ | `--sinch-ref-color-grass-800` | `#163323` |
199
+ | `--sinch-ref-color-grass-900` | `#102419` |
200
+
201
+ #### Color Honey
202
+
203
+ | Variable | Value |
204
+ | --- | --- |
205
+ | `--sinch-ref-color-honey-50` | `#FFF9EB` |
206
+ | `--sinch-ref-color-honey-100` | `#FCECCB` |
207
+ | `--sinch-ref-color-honey-200` | `#FFDD99` |
208
+ | `--sinch-ref-color-honey-300` | `#FFCA61` |
209
+ | `--sinch-ref-color-honey-350` | `#FFBE3C` |
210
+ | `--sinch-ref-color-honey-400` | `#EB9605` |
211
+ | `--sinch-ref-color-honey-500` | `#C77904` |
212
+ | `--sinch-ref-color-honey-600` | `#9E5A00` |
213
+ | `--sinch-ref-color-honey-700` | `#824703` |
214
+ | `--sinch-ref-color-honey-800` | `#472706` |
215
+ | `--sinch-ref-color-honey-900` | `#331B06` |
216
+
217
+ #### Color Neutral
218
+
219
+ | Variable | Value |
220
+ | --- | --- |
221
+ | `--sinch-ref-color-neutral-50` | `#F7F9FA` |
222
+ | `--sinch-ref-color-neutral-100` | `#EBEEF0` |
223
+ | `--sinch-ref-color-neutral-200` | `#DCE2E5` |
224
+ | `--sinch-ref-color-neutral-300` | `#C9D1D6` |
225
+ | `--sinch-ref-color-neutral-350` | `#B7C1C7` |
226
+ | `--sinch-ref-color-neutral-400` | `#9EA9B0` |
227
+ | `--sinch-ref-color-neutral-500` | `#808A91` |
228
+ | `--sinch-ref-color-neutral-600` | `#626C73` |
229
+ | `--sinch-ref-color-neutral-700` | `#4B575E` |
230
+ | `--sinch-ref-color-neutral-800` | `#272F36` |
231
+ | `--sinch-ref-color-neutral-900` | `#1A2126` |
232
+ | `--sinch-ref-color-neutral-950` | `#14181C` |
233
+
234
+ #### Color Ocean
235
+
236
+ | Variable | Value |
237
+ | --- | --- |
238
+ | `--sinch-ref-color-ocean-50` | `#F2F9FF` |
239
+ | `--sinch-ref-color-ocean-100` | `#E0F1FF` |
240
+ | `--sinch-ref-color-ocean-200` | `#C7E5FF` |
241
+ | `--sinch-ref-color-ocean-300` | `#A8D4FF` |
242
+ | `--sinch-ref-color-ocean-350` | `#8AC4FF` |
243
+ | `--sinch-ref-color-ocean-400` | `#61ABFF` |
244
+ | `--sinch-ref-color-ocean-500` | `#3089F0` |
245
+ | `--sinch-ref-color-ocean-600` | `#0D68D1` |
246
+ | `--sinch-ref-color-ocean-700` | `#1454A8` |
247
+ | `--sinch-ref-color-ocean-800` | `#112F57` |
248
+ | `--sinch-ref-color-ocean-900` | `#0F2138` |
249
+
250
+ #### Color Pumpkin
251
+
252
+ | Variable | Value |
253
+ | --- | --- |
254
+ | `--sinch-ref-color-pumpkin-50` | `#FFF7F0` |
255
+ | `--sinch-ref-color-pumpkin-100` | `#FFE9D6` |
256
+ | `--sinch-ref-color-pumpkin-200` | `#FFD9BD` |
257
+ | `--sinch-ref-color-pumpkin-300` | `#FFC299` |
258
+ | `--sinch-ref-color-pumpkin-350` | `#FFAD75` |
259
+ | `--sinch-ref-color-pumpkin-400` | `#F58B4E` |
260
+ | `--sinch-ref-color-pumpkin-500` | `#D66A33` |
261
+ | `--sinch-ref-color-pumpkin-600` | `#AD4E24` |
262
+ | `--sinch-ref-color-pumpkin-700` | `#8F3D1F` |
263
+ | `--sinch-ref-color-pumpkin-800` | `#4D2215` |
264
+ | `--sinch-ref-color-pumpkin-900` | `#361811` |
265
+
266
+ #### Color Raspberry
267
+
268
+ | Variable | Value |
269
+ | --- | --- |
270
+ | `--sinch-ref-color-raspberry-50` | `#FFF6F5` |
271
+ | `--sinch-ref-color-raspberry-100` | `#FFE5E3` |
272
+ | `--sinch-ref-color-raspberry-200` | `#FFD8D6` |
273
+ | `--sinch-ref-color-raspberry-300` | `#FFBDBD` |
274
+ | `--sinch-ref-color-raspberry-350` | `#FFA8A8` |
275
+ | `--sinch-ref-color-raspberry-400` | `#FF8080` |
276
+ | `--sinch-ref-color-raspberry-500` | `#EB5454` |
277
+ | `--sinch-ref-color-raspberry-600` | `#BD3C41` |
278
+ | `--sinch-ref-color-raspberry-700` | `#993138` |
279
+ | `--sinch-ref-color-raspberry-800` | `#57181C` |
280
+ | `--sinch-ref-color-raspberry-900` | `#3D1215` |
281
+
282
+ #### Color Tropical
283
+
284
+ | Variable | Value |
285
+ | --- | --- |
286
+ | `--sinch-ref-color-tropical-50` | `#F0FAF4` |
287
+ | `--sinch-ref-color-tropical-100` | `#E2F0E8` |
288
+ | `--sinch-ref-color-tropical-200` | `#CEE5DA` |
289
+ | `--sinch-ref-color-tropical-300` | `#AFDBCD` |
290
+ | `--sinch-ref-color-tropical-350` | `#80CFBC` |
291
+ | `--sinch-ref-color-tropical-400` | `#51B8A6` |
292
+ | `--sinch-ref-color-tropical-500` | `#06998B` |
293
+ | `--sinch-ref-color-tropical-600` | `#007874` |
294
+ | `--sinch-ref-color-tropical-700` | `#006063` |
295
+ | `--sinch-ref-color-tropical-800` | `#0C333B` |
296
+ | `--sinch-ref-color-tropical-900` | `#0E2329` |
297
+
298
+ #### Color Violet
299
+
300
+ | Variable | Value |
301
+ | --- | --- |
302
+ | `--sinch-ref-color-violet-50` | `#F8F5FF` |
303
+ | `--sinch-ref-color-violet-100` | `#EFEBFF` |
304
+ | `--sinch-ref-color-violet-200` | `#E2DBFF` |
305
+ | `--sinch-ref-color-violet-300` | `#D0C8FA` |
306
+ | `--sinch-ref-color-violet-350` | `#C1B6FA` |
307
+ | `--sinch-ref-color-violet-400` | `#A89BFA` |
308
+ | `--sinch-ref-color-violet-500` | `#857AEB` |
309
+ | `--sinch-ref-color-violet-600` | `#645DC2` |
310
+ | `--sinch-ref-color-violet-700` | `#4D4AA8` |
311
+ | `--sinch-ref-color-violet-800` | `#2A2A54` |
312
+ | `--sinch-ref-color-violet-900` | `#1E1E33` |
313
+
314
+ ### Shadow
315
+
316
+ Elevation shadows for `box-shadow`. Level 0 is flat; higher levels for content floating above the page (cards → popovers → dialogs).
317
+
318
+ | Variable | Value |
319
+ | --- | --- |
320
+ | `--sinch-ref-shadow-level-0` | `none` |
321
+ | `--sinch-ref-shadow-level-1` | `1px 2px 6px #0A273D1A` |
322
+ | `--sinch-ref-shadow-level-2` | `1px 4px 8px #0A273D1A` |
323
+ | `--sinch-ref-shadow-level-3` | `1px 6px 12px #0A273D26` |
324
+ | `--sinch-ref-shadow-level-4` | `0 8px 16px #0A273D1A` |
325
+
326
+ ### Typography
327
+
328
+ Raw type scale. Prefer the `--sinch-sys-font-*` shorthands; use these when you need a single property (e.g. only `font-family` or `font-weight`).
329
+
330
+ #### Typography Font Family
331
+
332
+ | Variable | Value |
333
+ | --- | --- |
334
+ | `--sinch-ref-typography-font-family-main` | `"DM Sans", "Arial", sans-serif` |
335
+ | `--sinch-ref-typography-font-family-mono` | `"DM Mono", monospace` |
336
+
337
+ #### Typography Font Size
338
+
339
+ | Variable | Value |
340
+ | --- | --- |
341
+ | `--sinch-ref-typography-font-size-10` | `10px` |
342
+ | `--sinch-ref-typography-font-size-12` | `12px` |
343
+ | `--sinch-ref-typography-font-size-14` | `14px` |
344
+ | `--sinch-ref-typography-font-size-16` | `16px` |
345
+ | `--sinch-ref-typography-font-size-18` | `18px` |
346
+ | `--sinch-ref-typography-font-size-20` | `20px` |
347
+ | `--sinch-ref-typography-font-size-24` | `24px` |
348
+ | `--sinch-ref-typography-font-size-40` | `40px` |
349
+ | `--sinch-ref-typography-font-size-56` | `56px` |
350
+
351
+ #### Typography Font Weight
352
+
353
+ | Variable | Value |
354
+ | --- | --- |
355
+ | `--sinch-ref-typography-font-weight-300` | `300` |
356
+ | `--sinch-ref-typography-font-weight-400` | `400` |
357
+ | `--sinch-ref-typography-font-weight-500` | `500` |
358
+ | `--sinch-ref-typography-font-weight-600` | `600` |
359
+ | `--sinch-ref-typography-font-weight-700` | `700` |
360
+
361
+ #### Typography Letter Spacing
362
+
363
+ | Variable | Value |
364
+ | --- | --- |
365
+ | `--sinch-ref-typography-letter-spacing-body` | `0` |
366
+ | `--sinch-ref-typography-letter-spacing-title` | `-2%` |
367
+
368
+ #### Typography Line Height
369
+
370
+ | Variable | Value |
371
+ | --- | --- |
372
+ | `--sinch-ref-typography-line-height-14` | `14px` |
373
+ | `--sinch-ref-typography-line-height-16` | `16px` |
374
+ | `--sinch-ref-typography-line-height-20` | `20px` |
375
+ | `--sinch-ref-typography-line-height-22` | `22px` |
376
+ | `--sinch-ref-typography-line-height-24` | `24px` |
377
+ | `--sinch-ref-typography-line-height-28` | `28px` |
378
+ | `--sinch-ref-typography-line-height-32` | `32px` |
379
+ | `--sinch-ref-typography-line-height-48` | `48px` |
380
+ | `--sinch-ref-typography-line-height-72` | `72px` |
381
+
382
+ #### Typography Paragraph Spacing
383
+
384
+ | Variable | Value |
385
+ | --- | --- |
386
+ | `--sinch-ref-typography-paragraph-spacing-0` | `0` |
387
+ | `--sinch-ref-typography-paragraph-spacing-1` | `12` |
388
+
389
+ #### Typography Text Case
390
+
391
+ | Variable | Value |
392
+ | --- | --- |
393
+ | `--sinch-ref-typography-text-case-none` | `none` |
394
+
395
+ #### Typography Text Decoration
396
+
397
+ | Variable | Value |
398
+ | --- | --- |
399
+ | `--sinch-ref-typography-text-decoration-none` | `none` |
400
+ | `--sinch-ref-typography-text-decoration-underline` | `underline` |
package/dark.css ADDED
@@ -0,0 +1,81 @@
1
+ /* Auto-generated by packages/nectary-styles/scripts/generate.ts — do not edit. Run `pnpm styles`. */
2
+
3
+ [data-theme="dark"],
4
+ .nectary-theme-dark {
5
+ --sinch-sys-color-basic-pure: #000000;
6
+ --sinch-sys-color-basic-pure-inverted: #FFFFFF;
7
+ --sinch-sys-color-basic-transparent: transparent;
8
+ --sinch-sys-color-border-default: var(--sinch-ref-color-neutral-700);
9
+ --sinch-sys-color-border-disabled: var(--sinch-ref-color-neutral-900);
10
+ --sinch-sys-color-border-strong: var(--sinch-ref-color-neutral-600);
11
+ --sinch-sys-color-border-subtle: var(--sinch-ref-color-neutral-800);
12
+ --sinch-sys-color-feedback-danger-default: #D63F3F;
13
+ --sinch-sys-color-feedback-danger-strong: var(--sinch-ref-color-raspberry-300);
14
+ --sinch-sys-color-feedback-danger-subtle: var(--sinch-ref-color-raspberry-800);
15
+ --sinch-sys-color-feedback-info-default: var(--sinch-ref-color-ocean-500);
16
+ --sinch-sys-color-feedback-info-strong: var(--sinch-ref-color-ocean-300);
17
+ --sinch-sys-color-feedback-info-subtle: var(--sinch-ref-color-ocean-800);
18
+ --sinch-sys-color-feedback-neutral-default: var(--sinch-ref-color-neutral-500);
19
+ --sinch-sys-color-feedback-neutral-strong: var(--sinch-ref-color-neutral-300);
20
+ --sinch-sys-color-feedback-neutral-subtle: var(--sinch-ref-color-neutral-800);
21
+ --sinch-sys-color-feedback-success-default: var(--sinch-ref-color-grass-400);
22
+ --sinch-sys-color-feedback-success-strong: var(--sinch-ref-color-grass-300);
23
+ --sinch-sys-color-feedback-success-subtle: var(--sinch-ref-color-grass-800);
24
+ --sinch-sys-color-feedback-warning-default: var(--sinch-ref-color-pumpkin-400);
25
+ --sinch-sys-color-feedback-warning-strong: var(--sinch-ref-color-pumpkin-300);
26
+ --sinch-sys-color-feedback-warning-subtle: var(--sinch-ref-color-pumpkin-800);
27
+ --sinch-sys-color-focus: var(--sinch-ref-color-ocean-400);
28
+ --sinch-sys-color-primary-active: var(--sinch-ref-color-tropical-600);
29
+ --sinch-sys-color-primary-default: var(--sinch-ref-color-tropical-500);
30
+ --sinch-sys-color-primary-disabled: var(--sinch-ref-color-tropical-700);
31
+ --sinch-sys-color-primary-foreground: var(--sinch-sys-color-basic-pure);
32
+ --sinch-sys-color-primary-hover: var(--sinch-ref-color-tropical-400);
33
+ --sinch-sys-color-surface-canvas: var(--sinch-ref-color-neutral-900);
34
+ --sinch-sys-color-surface-primary-active: var(--sinch-ref-color-neutral-900);
35
+ --sinch-sys-color-surface-primary-default: var(--sinch-sys-color-basic-pure);
36
+ --sinch-sys-color-surface-primary-disabled: var(--sinch-sys-color-basic-pure);
37
+ --sinch-sys-color-surface-primary-hover: var(--sinch-ref-color-neutral-950);
38
+ --sinch-sys-color-surface-secondary-active: var(--sinch-ref-color-neutral-800);
39
+ --sinch-sys-color-surface-secondary-default: var(--sinch-ref-color-neutral-950);
40
+ --sinch-sys-color-surface-secondary-disabled: var(--sinch-ref-color-neutral-950);
41
+ --sinch-sys-color-surface-secondary-hover: var(--sinch-ref-color-neutral-900);
42
+ --sinch-sys-color-surface-tertiary-active: var(--sinch-ref-color-neutral-700);
43
+ --sinch-sys-color-surface-tertiary-default: var(--sinch-ref-color-neutral-900);
44
+ --sinch-sys-color-surface-tertiary-disabled: var(--sinch-ref-color-neutral-900);
45
+ --sinch-sys-color-surface-tertiary-hover: var(--sinch-ref-color-neutral-800);
46
+ --sinch-sys-color-surface-transparent-active: #EBEEF033;
47
+ --sinch-sys-color-surface-transparent-default: var(--sinch-sys-color-basic-transparent);
48
+ --sinch-sys-color-surface-transparent-disabled: var(--sinch-sys-color-basic-transparent);
49
+ --sinch-sys-color-surface-transparent-hover: #EBEEF01A;
50
+ --sinch-sys-color-text-caption: var(--sinch-ref-color-neutral-300);
51
+ --sinch-sys-color-text-default: var(--sinch-ref-color-neutral-50);
52
+ --sinch-sys-color-text-disabled: var(--sinch-ref-color-neutral-600);
53
+ --sinch-sys-color-text-muted: var(--sinch-ref-color-neutral-400);
54
+ --sinch-sys-font-body-emphasize: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
55
+ --sinch-sys-font-body-emphasize-s: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
56
+ --sinch-sys-font-body-emphasize-xs: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
57
+ --sinch-sys-font-body-link: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
58
+ --sinch-sys-font-body-m: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
59
+ --sinch-sys-font-body-monospace-m: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-mono);
60
+ --sinch-sys-font-body-monospace-s: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-mono);
61
+ --sinch-sys-font-body-monospace-xs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-mono);
62
+ --sinch-sys-font-body-monospace-xxs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-16) var(--sinch-ref-typography-font-family-mono);
63
+ --sinch-sys-font-body-s: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
64
+ --sinch-sys-font-body-xs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
65
+ --sinch-sys-font-body-xxs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-16) var(--sinch-ref-typography-font-family-main);
66
+ --sinch-sys-font-desktop-title-hero: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-56)/var(--sinch-ref-typography-line-height-72) var(--sinch-ref-typography-font-family-main);
67
+ --sinch-sys-font-desktop-title-l: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-24)/var(--sinch-ref-typography-line-height-32) var(--sinch-ref-typography-font-family-main);
68
+ --sinch-sys-font-desktop-title-m: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-20)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
69
+ --sinch-sys-font-desktop-title-s: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
70
+ --sinch-sys-font-desktop-title-xl: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-40)/var(--sinch-ref-typography-line-height-48) var(--sinch-ref-typography-font-family-main);
71
+ --sinch-sys-font-desktop-title-xs: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
72
+ --sinch-sys-shape-radius-full: 9999px;
73
+ --sinch-sys-shape-radius-l: 14px;
74
+ --sinch-sys-shape-radius-m: 10px;
75
+ --sinch-sys-shape-radius-s: 6px;
76
+ --sinch-sys-shape-radius-xs: 2px;
77
+ --sinch-sys-size-l: 48px;
78
+ --sinch-sys-size-m: 40px;
79
+ --sinch-sys-size-s: 32px;
80
+ --sinch-sys-size-xs: 24px;
81
+ }
package/fonts.css ADDED
@@ -0,0 +1,78 @@
1
+ /* Auto-generated by packages/nectary-styles/scripts/generate.ts — do not edit. Run `pnpm styles`. */
2
+
3
+ @font-face {
4
+ font-family: "DM Sans";
5
+ font-weight: 400;
6
+ font-style: normal;
7
+ font-display: swap;
8
+ src:
9
+ local("DMSans-Regular"),
10
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff2") format("woff2"),
11
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff") format("woff");
12
+ }
13
+
14
+ @font-face {
15
+ font-family: "DM Sans";
16
+ font-weight: 500;
17
+ font-style: normal;
18
+ font-display: swap;
19
+ src:
20
+ local("DMSans-Medium"),
21
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff2") format("woff2"),
22
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff") format("woff");
23
+ }
24
+
25
+ @font-face {
26
+ font-family: "DM Sans";
27
+ font-weight: 700;
28
+ font-style: normal;
29
+ font-display: swap;
30
+ src:
31
+ local("DMSans-Bold"),
32
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff2") format("woff2"),
33
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff") format("woff");
34
+ }
35
+
36
+ @font-face {
37
+ font-family: "DM Sans";
38
+ font-weight: 400;
39
+ font-style: italic;
40
+ font-display: swap;
41
+ src:
42
+ local("DMSans-Italic"),
43
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400-italic.woff2") format("woff2"),
44
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400-italic.woff") format("woff");
45
+ }
46
+
47
+ @font-face {
48
+ font-family: "DM Sans";
49
+ font-weight: 500;
50
+ font-style: italic;
51
+ font-display: swap;
52
+ src:
53
+ local("DMSans-MediumItalic"),
54
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500-italic.woff2") format("woff2"),
55
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500-italic.woff") format("woff");
56
+ }
57
+
58
+ @font-face {
59
+ font-family: "DM Sans";
60
+ font-weight: 700;
61
+ font-style: italic;
62
+ font-display: swap;
63
+ src:
64
+ local("DMSans-BoldItalic"),
65
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700-italic.woff2") format("woff2"),
66
+ url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700-italic.woff") format("woff");
67
+ }
68
+
69
+ @font-face {
70
+ font-family: "DM Mono";
71
+ font-weight: 400;
72
+ font-style: normal;
73
+ font-display: swap;
74
+ src:
75
+ local("DMMono-Regular"),
76
+ url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff2") format("woff2"),
77
+ url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff") format("woff");
78
+ }
package/index.css ADDED
@@ -0,0 +1,301 @@
1
+ /* Auto-generated by packages/nectary-styles/scripts/generate.ts — do not edit. Run `pnpm styles`. */
2
+
3
+ :root {
4
+ --sinch-ref-color-candy-50: #FFF5FC;
5
+ --sinch-ref-color-candy-100: #FFE5F7;
6
+ --sinch-ref-color-candy-200: #FFD6F3;
7
+ --sinch-ref-color-candy-300: #FFBDEC;
8
+ --sinch-ref-color-candy-350: #FAA5E3;
9
+ --sinch-ref-color-candy-400: #EB83CF;
10
+ --sinch-ref-color-candy-500: #D15CB4;
11
+ --sinch-ref-color-candy-600: #A3488E;
12
+ --sinch-ref-color-candy-700: #8A3778;
13
+ --sinch-ref-color-candy-800: #472140;
14
+ --sinch-ref-color-candy-900: #2E192A;
15
+ --sinch-ref-color-grass-50: #ECFFEB;
16
+ --sinch-ref-color-grass-100: #D7F5D7;
17
+ --sinch-ref-color-grass-200: #C2EDC5;
18
+ --sinch-ref-color-grass-300: #99E0A2;
19
+ --sinch-ref-color-grass-350: #77D486;
20
+ --sinch-ref-color-grass-400: #53BD69;
21
+ --sinch-ref-color-grass-500: #3D9956;
22
+ --sinch-ref-color-grass-600: #2B7845;
23
+ --sinch-ref-color-grass-700: #23613C;
24
+ --sinch-ref-color-grass-800: #163323;
25
+ --sinch-ref-color-grass-900: #102419;
26
+ --sinch-ref-color-honey-50: #FFF9EB;
27
+ --sinch-ref-color-honey-100: #FCECCB;
28
+ --sinch-ref-color-honey-200: #FFDD99;
29
+ --sinch-ref-color-honey-300: #FFCA61;
30
+ --sinch-ref-color-honey-350: #FFBE3C;
31
+ --sinch-ref-color-honey-400: #EB9605;
32
+ --sinch-ref-color-honey-500: #C77904;
33
+ --sinch-ref-color-honey-600: #9E5A00;
34
+ --sinch-ref-color-honey-700: #824703;
35
+ --sinch-ref-color-honey-800: #472706;
36
+ --sinch-ref-color-honey-900: #331B06;
37
+ --sinch-ref-color-neutral-50: #F7F9FA;
38
+ --sinch-ref-color-neutral-100: #EBEEF0;
39
+ --sinch-ref-color-neutral-200: #DCE2E5;
40
+ --sinch-ref-color-neutral-300: #C9D1D6;
41
+ --sinch-ref-color-neutral-350: #B7C1C7;
42
+ --sinch-ref-color-neutral-400: #9EA9B0;
43
+ --sinch-ref-color-neutral-500: #808A91;
44
+ --sinch-ref-color-neutral-600: #626C73;
45
+ --sinch-ref-color-neutral-700: #4B575E;
46
+ --sinch-ref-color-neutral-800: #272F36;
47
+ --sinch-ref-color-neutral-900: #1A2126;
48
+ --sinch-ref-color-neutral-950: #14181C;
49
+ --sinch-ref-color-ocean-50: #F2F9FF;
50
+ --sinch-ref-color-ocean-100: #E0F1FF;
51
+ --sinch-ref-color-ocean-200: #C7E5FF;
52
+ --sinch-ref-color-ocean-300: #A8D4FF;
53
+ --sinch-ref-color-ocean-350: #8AC4FF;
54
+ --sinch-ref-color-ocean-400: #61ABFF;
55
+ --sinch-ref-color-ocean-500: #3089F0;
56
+ --sinch-ref-color-ocean-600: #0D68D1;
57
+ --sinch-ref-color-ocean-700: #1454A8;
58
+ --sinch-ref-color-ocean-800: #112F57;
59
+ --sinch-ref-color-ocean-900: #0F2138;
60
+ --sinch-ref-color-pumpkin-50: #FFF7F0;
61
+ --sinch-ref-color-pumpkin-100: #FFE9D6;
62
+ --sinch-ref-color-pumpkin-200: #FFD9BD;
63
+ --sinch-ref-color-pumpkin-300: #FFC299;
64
+ --sinch-ref-color-pumpkin-350: #FFAD75;
65
+ --sinch-ref-color-pumpkin-400: #F58B4E;
66
+ --sinch-ref-color-pumpkin-500: #D66A33;
67
+ --sinch-ref-color-pumpkin-600: #AD4E24;
68
+ --sinch-ref-color-pumpkin-700: #8F3D1F;
69
+ --sinch-ref-color-pumpkin-800: #4D2215;
70
+ --sinch-ref-color-pumpkin-900: #361811;
71
+ --sinch-ref-color-raspberry-50: #FFF6F5;
72
+ --sinch-ref-color-raspberry-100: #FFE5E3;
73
+ --sinch-ref-color-raspberry-200: #FFD8D6;
74
+ --sinch-ref-color-raspberry-300: #FFBDBD;
75
+ --sinch-ref-color-raspberry-350: #FFA8A8;
76
+ --sinch-ref-color-raspberry-400: #FF8080;
77
+ --sinch-ref-color-raspberry-500: #EB5454;
78
+ --sinch-ref-color-raspberry-600: #BD3C41;
79
+ --sinch-ref-color-raspberry-700: #993138;
80
+ --sinch-ref-color-raspberry-800: #57181C;
81
+ --sinch-ref-color-raspberry-900: #3D1215;
82
+ --sinch-ref-color-tropical-50: #F0FAF4;
83
+ --sinch-ref-color-tropical-100: #E2F0E8;
84
+ --sinch-ref-color-tropical-200: #CEE5DA;
85
+ --sinch-ref-color-tropical-300: #AFDBCD;
86
+ --sinch-ref-color-tropical-350: #80CFBC;
87
+ --sinch-ref-color-tropical-400: #51B8A6;
88
+ --sinch-ref-color-tropical-500: #06998B;
89
+ --sinch-ref-color-tropical-600: #007874;
90
+ --sinch-ref-color-tropical-700: #006063;
91
+ --sinch-ref-color-tropical-800: #0C333B;
92
+ --sinch-ref-color-tropical-900: #0E2329;
93
+ --sinch-ref-color-violet-50: #F8F5FF;
94
+ --sinch-ref-color-violet-100: #EFEBFF;
95
+ --sinch-ref-color-violet-200: #E2DBFF;
96
+ --sinch-ref-color-violet-300: #D0C8FA;
97
+ --sinch-ref-color-violet-350: #C1B6FA;
98
+ --sinch-ref-color-violet-400: #A89BFA;
99
+ --sinch-ref-color-violet-500: #857AEB;
100
+ --sinch-ref-color-violet-600: #645DC2;
101
+ --sinch-ref-color-violet-700: #4D4AA8;
102
+ --sinch-ref-color-violet-800: #2A2A54;
103
+ --sinch-ref-color-violet-900: #1E1E33;
104
+ --sinch-ref-shadow-level-0: none;
105
+ --sinch-ref-shadow-level-1: 1px 2px 6px #0A273D1A;
106
+ --sinch-ref-shadow-level-2: 1px 4px 8px #0A273D1A;
107
+ --sinch-ref-shadow-level-3: 1px 6px 12px #0A273D26;
108
+ --sinch-ref-shadow-level-4: 0 8px 16px #0A273D1A;
109
+ --sinch-ref-typography-font-family-main: "DM Sans", "Arial", sans-serif;
110
+ --sinch-ref-typography-font-family-mono: "DM Mono", monospace;
111
+ --sinch-ref-typography-font-size-10: 10px;
112
+ --sinch-ref-typography-font-size-12: 12px;
113
+ --sinch-ref-typography-font-size-14: 14px;
114
+ --sinch-ref-typography-font-size-16: 16px;
115
+ --sinch-ref-typography-font-size-18: 18px;
116
+ --sinch-ref-typography-font-size-20: 20px;
117
+ --sinch-ref-typography-font-size-24: 24px;
118
+ --sinch-ref-typography-font-size-40: 40px;
119
+ --sinch-ref-typography-font-size-56: 56px;
120
+ --sinch-ref-typography-font-weight-300: 300;
121
+ --sinch-ref-typography-font-weight-400: 400;
122
+ --sinch-ref-typography-font-weight-500: 500;
123
+ --sinch-ref-typography-font-weight-600: 600;
124
+ --sinch-ref-typography-font-weight-700: 700;
125
+ --sinch-ref-typography-letter-spacing-body: 0;
126
+ --sinch-ref-typography-letter-spacing-title: -2%;
127
+ --sinch-ref-typography-line-height-14: 14px;
128
+ --sinch-ref-typography-line-height-16: 16px;
129
+ --sinch-ref-typography-line-height-20: 20px;
130
+ --sinch-ref-typography-line-height-22: 22px;
131
+ --sinch-ref-typography-line-height-24: 24px;
132
+ --sinch-ref-typography-line-height-28: 28px;
133
+ --sinch-ref-typography-line-height-32: 32px;
134
+ --sinch-ref-typography-line-height-48: 48px;
135
+ --sinch-ref-typography-line-height-72: 72px;
136
+ --sinch-ref-typography-paragraph-spacing-0: 0;
137
+ --sinch-ref-typography-paragraph-spacing-1: 12;
138
+ --sinch-ref-typography-text-case-none: none;
139
+ --sinch-ref-typography-text-decoration-none: none;
140
+ --sinch-ref-typography-text-decoration-underline: underline;
141
+ }
142
+
143
+ :root,
144
+ [data-theme="light"] {
145
+ --sinch-sys-color-basic-pure: #FFFFFF;
146
+ --sinch-sys-color-basic-pure-inverted: #000000;
147
+ --sinch-sys-color-basic-transparent: transparent;
148
+ --sinch-sys-color-border-default: var(--sinch-ref-color-neutral-350);
149
+ --sinch-sys-color-border-disabled: var(--sinch-ref-color-neutral-100);
150
+ --sinch-sys-color-border-strong: var(--sinch-ref-color-neutral-400);
151
+ --sinch-sys-color-border-subtle: var(--sinch-ref-color-neutral-200);
152
+ --sinch-sys-color-feedback-danger-default: #D63F3F;
153
+ --sinch-sys-color-feedback-danger-strong: var(--sinch-ref-color-raspberry-700);
154
+ --sinch-sys-color-feedback-danger-subtle: var(--sinch-ref-color-raspberry-200);
155
+ --sinch-sys-color-feedback-info-default: var(--sinch-ref-color-ocean-500);
156
+ --sinch-sys-color-feedback-info-strong: var(--sinch-ref-color-ocean-700);
157
+ --sinch-sys-color-feedback-info-subtle: var(--sinch-ref-color-ocean-200);
158
+ --sinch-sys-color-feedback-neutral-default: var(--sinch-ref-color-neutral-500);
159
+ --sinch-sys-color-feedback-neutral-strong: var(--sinch-ref-color-neutral-700);
160
+ --sinch-sys-color-feedback-neutral-subtle: var(--sinch-ref-color-neutral-200);
161
+ --sinch-sys-color-feedback-success-default: var(--sinch-ref-color-grass-400);
162
+ --sinch-sys-color-feedback-success-strong: var(--sinch-ref-color-grass-700);
163
+ --sinch-sys-color-feedback-success-subtle: var(--sinch-ref-color-grass-200);
164
+ --sinch-sys-color-feedback-warning-default: var(--sinch-ref-color-pumpkin-400);
165
+ --sinch-sys-color-feedback-warning-strong: var(--sinch-ref-color-pumpkin-700);
166
+ --sinch-sys-color-feedback-warning-subtle: var(--sinch-ref-color-pumpkin-200);
167
+ --sinch-sys-color-focus: var(--sinch-ref-color-ocean-400);
168
+ --sinch-sys-color-primary-active: var(--sinch-ref-color-tropical-800);
169
+ --sinch-sys-color-primary-default: var(--sinch-ref-color-tropical-700);
170
+ --sinch-sys-color-primary-disabled: var(--sinch-ref-color-tropical-400);
171
+ --sinch-sys-color-primary-foreground: var(--sinch-sys-color-basic-pure);
172
+ --sinch-sys-color-primary-hover: var(--sinch-ref-color-tropical-600);
173
+ --sinch-sys-color-surface-canvas: var(--sinch-ref-color-neutral-100);
174
+ --sinch-sys-color-surface-primary-active: var(--sinch-ref-color-neutral-100);
175
+ --sinch-sys-color-surface-primary-default: var(--sinch-sys-color-basic-pure);
176
+ --sinch-sys-color-surface-primary-disabled: var(--sinch-sys-color-basic-pure);
177
+ --sinch-sys-color-surface-primary-hover: var(--sinch-ref-color-neutral-50);
178
+ --sinch-sys-color-surface-secondary-active: var(--sinch-ref-color-neutral-200);
179
+ --sinch-sys-color-surface-secondary-default: var(--sinch-ref-color-neutral-50);
180
+ --sinch-sys-color-surface-secondary-disabled: var(--sinch-ref-color-neutral-50);
181
+ --sinch-sys-color-surface-secondary-hover: var(--sinch-ref-color-neutral-100);
182
+ --sinch-sys-color-surface-tertiary-active: var(--sinch-ref-color-neutral-300);
183
+ --sinch-sys-color-surface-tertiary-default: var(--sinch-ref-color-neutral-100);
184
+ --sinch-sys-color-surface-tertiary-disabled: var(--sinch-ref-color-neutral-50);
185
+ --sinch-sys-color-surface-tertiary-hover: var(--sinch-ref-color-neutral-200);
186
+ --sinch-sys-color-surface-transparent-active: #1A212633;
187
+ --sinch-sys-color-surface-transparent-default: var(--sinch-sys-color-basic-transparent);
188
+ --sinch-sys-color-surface-transparent-disabled: var(--sinch-sys-color-basic-transparent);
189
+ --sinch-sys-color-surface-transparent-hover: #1A21261A;
190
+ --sinch-sys-color-text-caption: var(--sinch-ref-color-neutral-700);
191
+ --sinch-sys-color-text-default: var(--sinch-ref-color-neutral-900);
192
+ --sinch-sys-color-text-disabled: var(--sinch-ref-color-neutral-400);
193
+ --sinch-sys-color-text-muted: var(--sinch-ref-color-neutral-600);
194
+ --sinch-sys-font-body-emphasize: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
195
+ --sinch-sys-font-body-emphasize-s: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
196
+ --sinch-sys-font-body-emphasize-xs: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
197
+ --sinch-sys-font-body-link: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
198
+ --sinch-sys-font-body-m: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
199
+ --sinch-sys-font-body-monospace-m: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-mono);
200
+ --sinch-sys-font-body-monospace-s: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-mono);
201
+ --sinch-sys-font-body-monospace-xs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-mono);
202
+ --sinch-sys-font-body-monospace-xxs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-16) var(--sinch-ref-typography-font-family-mono);
203
+ --sinch-sys-font-body-s: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
204
+ --sinch-sys-font-body-xs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
205
+ --sinch-sys-font-body-xxs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-16) var(--sinch-ref-typography-font-family-main);
206
+ --sinch-sys-font-desktop-title-hero: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-56)/var(--sinch-ref-typography-line-height-72) var(--sinch-ref-typography-font-family-main);
207
+ --sinch-sys-font-desktop-title-l: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-24)/var(--sinch-ref-typography-line-height-32) var(--sinch-ref-typography-font-family-main);
208
+ --sinch-sys-font-desktop-title-m: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-20)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
209
+ --sinch-sys-font-desktop-title-s: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
210
+ --sinch-sys-font-desktop-title-xl: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-40)/var(--sinch-ref-typography-line-height-48) var(--sinch-ref-typography-font-family-main);
211
+ --sinch-sys-font-desktop-title-xs: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
212
+ --sinch-sys-shape-radius-full: 9999px;
213
+ --sinch-sys-shape-radius-l: 14px;
214
+ --sinch-sys-shape-radius-m: 10px;
215
+ --sinch-sys-shape-radius-s: 6px;
216
+ --sinch-sys-shape-radius-xs: 2px;
217
+ --sinch-sys-size-l: 48px;
218
+ --sinch-sys-size-m: 40px;
219
+ --sinch-sys-size-s: 32px;
220
+ --sinch-sys-size-xs: 24px;
221
+ }
222
+
223
+ [data-theme="dark"],
224
+ .nectary-theme-dark {
225
+ --sinch-sys-color-basic-pure: #000000;
226
+ --sinch-sys-color-basic-pure-inverted: #FFFFFF;
227
+ --sinch-sys-color-basic-transparent: transparent;
228
+ --sinch-sys-color-border-default: var(--sinch-ref-color-neutral-700);
229
+ --sinch-sys-color-border-disabled: var(--sinch-ref-color-neutral-900);
230
+ --sinch-sys-color-border-strong: var(--sinch-ref-color-neutral-600);
231
+ --sinch-sys-color-border-subtle: var(--sinch-ref-color-neutral-800);
232
+ --sinch-sys-color-feedback-danger-default: #D63F3F;
233
+ --sinch-sys-color-feedback-danger-strong: var(--sinch-ref-color-raspberry-300);
234
+ --sinch-sys-color-feedback-danger-subtle: var(--sinch-ref-color-raspberry-800);
235
+ --sinch-sys-color-feedback-info-default: var(--sinch-ref-color-ocean-500);
236
+ --sinch-sys-color-feedback-info-strong: var(--sinch-ref-color-ocean-300);
237
+ --sinch-sys-color-feedback-info-subtle: var(--sinch-ref-color-ocean-800);
238
+ --sinch-sys-color-feedback-neutral-default: var(--sinch-ref-color-neutral-500);
239
+ --sinch-sys-color-feedback-neutral-strong: var(--sinch-ref-color-neutral-300);
240
+ --sinch-sys-color-feedback-neutral-subtle: var(--sinch-ref-color-neutral-800);
241
+ --sinch-sys-color-feedback-success-default: var(--sinch-ref-color-grass-400);
242
+ --sinch-sys-color-feedback-success-strong: var(--sinch-ref-color-grass-300);
243
+ --sinch-sys-color-feedback-success-subtle: var(--sinch-ref-color-grass-800);
244
+ --sinch-sys-color-feedback-warning-default: var(--sinch-ref-color-pumpkin-400);
245
+ --sinch-sys-color-feedback-warning-strong: var(--sinch-ref-color-pumpkin-300);
246
+ --sinch-sys-color-feedback-warning-subtle: var(--sinch-ref-color-pumpkin-800);
247
+ --sinch-sys-color-focus: var(--sinch-ref-color-ocean-400);
248
+ --sinch-sys-color-primary-active: var(--sinch-ref-color-tropical-600);
249
+ --sinch-sys-color-primary-default: var(--sinch-ref-color-tropical-500);
250
+ --sinch-sys-color-primary-disabled: var(--sinch-ref-color-tropical-700);
251
+ --sinch-sys-color-primary-foreground: var(--sinch-sys-color-basic-pure);
252
+ --sinch-sys-color-primary-hover: var(--sinch-ref-color-tropical-400);
253
+ --sinch-sys-color-surface-canvas: var(--sinch-ref-color-neutral-900);
254
+ --sinch-sys-color-surface-primary-active: var(--sinch-ref-color-neutral-900);
255
+ --sinch-sys-color-surface-primary-default: var(--sinch-sys-color-basic-pure);
256
+ --sinch-sys-color-surface-primary-disabled: var(--sinch-sys-color-basic-pure);
257
+ --sinch-sys-color-surface-primary-hover: var(--sinch-ref-color-neutral-950);
258
+ --sinch-sys-color-surface-secondary-active: var(--sinch-ref-color-neutral-800);
259
+ --sinch-sys-color-surface-secondary-default: var(--sinch-ref-color-neutral-950);
260
+ --sinch-sys-color-surface-secondary-disabled: var(--sinch-ref-color-neutral-950);
261
+ --sinch-sys-color-surface-secondary-hover: var(--sinch-ref-color-neutral-900);
262
+ --sinch-sys-color-surface-tertiary-active: var(--sinch-ref-color-neutral-700);
263
+ --sinch-sys-color-surface-tertiary-default: var(--sinch-ref-color-neutral-900);
264
+ --sinch-sys-color-surface-tertiary-disabled: var(--sinch-ref-color-neutral-900);
265
+ --sinch-sys-color-surface-tertiary-hover: var(--sinch-ref-color-neutral-800);
266
+ --sinch-sys-color-surface-transparent-active: #EBEEF033;
267
+ --sinch-sys-color-surface-transparent-default: var(--sinch-sys-color-basic-transparent);
268
+ --sinch-sys-color-surface-transparent-disabled: var(--sinch-sys-color-basic-transparent);
269
+ --sinch-sys-color-surface-transparent-hover: #EBEEF01A;
270
+ --sinch-sys-color-text-caption: var(--sinch-ref-color-neutral-300);
271
+ --sinch-sys-color-text-default: var(--sinch-ref-color-neutral-50);
272
+ --sinch-sys-color-text-disabled: var(--sinch-ref-color-neutral-600);
273
+ --sinch-sys-color-text-muted: var(--sinch-ref-color-neutral-400);
274
+ --sinch-sys-font-body-emphasize: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
275
+ --sinch-sys-font-body-emphasize-s: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
276
+ --sinch-sys-font-body-emphasize-xs: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
277
+ --sinch-sys-font-body-link: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
278
+ --sinch-sys-font-body-m: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
279
+ --sinch-sys-font-body-monospace-m: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-mono);
280
+ --sinch-sys-font-body-monospace-s: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-mono);
281
+ --sinch-sys-font-body-monospace-xs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-mono);
282
+ --sinch-sys-font-body-monospace-xxs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-16) var(--sinch-ref-typography-font-family-mono);
283
+ --sinch-sys-font-body-s: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
284
+ --sinch-sys-font-body-xs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
285
+ --sinch-sys-font-body-xxs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-16) var(--sinch-ref-typography-font-family-main);
286
+ --sinch-sys-font-desktop-title-hero: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-56)/var(--sinch-ref-typography-line-height-72) var(--sinch-ref-typography-font-family-main);
287
+ --sinch-sys-font-desktop-title-l: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-24)/var(--sinch-ref-typography-line-height-32) var(--sinch-ref-typography-font-family-main);
288
+ --sinch-sys-font-desktop-title-m: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-20)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
289
+ --sinch-sys-font-desktop-title-s: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
290
+ --sinch-sys-font-desktop-title-xl: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-40)/var(--sinch-ref-typography-line-height-48) var(--sinch-ref-typography-font-family-main);
291
+ --sinch-sys-font-desktop-title-xs: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
292
+ --sinch-sys-shape-radius-full: 9999px;
293
+ --sinch-sys-shape-radius-l: 14px;
294
+ --sinch-sys-shape-radius-m: 10px;
295
+ --sinch-sys-shape-radius-s: 6px;
296
+ --sinch-sys-shape-radius-xs: 2px;
297
+ --sinch-sys-size-l: 48px;
298
+ --sinch-sys-size-m: 40px;
299
+ --sinch-sys-size-s: 32px;
300
+ --sinch-sys-size-xs: 24px;
301
+ }
package/light.css ADDED
@@ -0,0 +1,221 @@
1
+ /* Auto-generated by packages/nectary-styles/scripts/generate.ts — do not edit. Run `pnpm styles`. */
2
+
3
+ :root {
4
+ --sinch-ref-color-candy-50: #FFF5FC;
5
+ --sinch-ref-color-candy-100: #FFE5F7;
6
+ --sinch-ref-color-candy-200: #FFD6F3;
7
+ --sinch-ref-color-candy-300: #FFBDEC;
8
+ --sinch-ref-color-candy-350: #FAA5E3;
9
+ --sinch-ref-color-candy-400: #EB83CF;
10
+ --sinch-ref-color-candy-500: #D15CB4;
11
+ --sinch-ref-color-candy-600: #A3488E;
12
+ --sinch-ref-color-candy-700: #8A3778;
13
+ --sinch-ref-color-candy-800: #472140;
14
+ --sinch-ref-color-candy-900: #2E192A;
15
+ --sinch-ref-color-grass-50: #ECFFEB;
16
+ --sinch-ref-color-grass-100: #D7F5D7;
17
+ --sinch-ref-color-grass-200: #C2EDC5;
18
+ --sinch-ref-color-grass-300: #99E0A2;
19
+ --sinch-ref-color-grass-350: #77D486;
20
+ --sinch-ref-color-grass-400: #53BD69;
21
+ --sinch-ref-color-grass-500: #3D9956;
22
+ --sinch-ref-color-grass-600: #2B7845;
23
+ --sinch-ref-color-grass-700: #23613C;
24
+ --sinch-ref-color-grass-800: #163323;
25
+ --sinch-ref-color-grass-900: #102419;
26
+ --sinch-ref-color-honey-50: #FFF9EB;
27
+ --sinch-ref-color-honey-100: #FCECCB;
28
+ --sinch-ref-color-honey-200: #FFDD99;
29
+ --sinch-ref-color-honey-300: #FFCA61;
30
+ --sinch-ref-color-honey-350: #FFBE3C;
31
+ --sinch-ref-color-honey-400: #EB9605;
32
+ --sinch-ref-color-honey-500: #C77904;
33
+ --sinch-ref-color-honey-600: #9E5A00;
34
+ --sinch-ref-color-honey-700: #824703;
35
+ --sinch-ref-color-honey-800: #472706;
36
+ --sinch-ref-color-honey-900: #331B06;
37
+ --sinch-ref-color-neutral-50: #F7F9FA;
38
+ --sinch-ref-color-neutral-100: #EBEEF0;
39
+ --sinch-ref-color-neutral-200: #DCE2E5;
40
+ --sinch-ref-color-neutral-300: #C9D1D6;
41
+ --sinch-ref-color-neutral-350: #B7C1C7;
42
+ --sinch-ref-color-neutral-400: #9EA9B0;
43
+ --sinch-ref-color-neutral-500: #808A91;
44
+ --sinch-ref-color-neutral-600: #626C73;
45
+ --sinch-ref-color-neutral-700: #4B575E;
46
+ --sinch-ref-color-neutral-800: #272F36;
47
+ --sinch-ref-color-neutral-900: #1A2126;
48
+ --sinch-ref-color-neutral-950: #14181C;
49
+ --sinch-ref-color-ocean-50: #F2F9FF;
50
+ --sinch-ref-color-ocean-100: #E0F1FF;
51
+ --sinch-ref-color-ocean-200: #C7E5FF;
52
+ --sinch-ref-color-ocean-300: #A8D4FF;
53
+ --sinch-ref-color-ocean-350: #8AC4FF;
54
+ --sinch-ref-color-ocean-400: #61ABFF;
55
+ --sinch-ref-color-ocean-500: #3089F0;
56
+ --sinch-ref-color-ocean-600: #0D68D1;
57
+ --sinch-ref-color-ocean-700: #1454A8;
58
+ --sinch-ref-color-ocean-800: #112F57;
59
+ --sinch-ref-color-ocean-900: #0F2138;
60
+ --sinch-ref-color-pumpkin-50: #FFF7F0;
61
+ --sinch-ref-color-pumpkin-100: #FFE9D6;
62
+ --sinch-ref-color-pumpkin-200: #FFD9BD;
63
+ --sinch-ref-color-pumpkin-300: #FFC299;
64
+ --sinch-ref-color-pumpkin-350: #FFAD75;
65
+ --sinch-ref-color-pumpkin-400: #F58B4E;
66
+ --sinch-ref-color-pumpkin-500: #D66A33;
67
+ --sinch-ref-color-pumpkin-600: #AD4E24;
68
+ --sinch-ref-color-pumpkin-700: #8F3D1F;
69
+ --sinch-ref-color-pumpkin-800: #4D2215;
70
+ --sinch-ref-color-pumpkin-900: #361811;
71
+ --sinch-ref-color-raspberry-50: #FFF6F5;
72
+ --sinch-ref-color-raspberry-100: #FFE5E3;
73
+ --sinch-ref-color-raspberry-200: #FFD8D6;
74
+ --sinch-ref-color-raspberry-300: #FFBDBD;
75
+ --sinch-ref-color-raspberry-350: #FFA8A8;
76
+ --sinch-ref-color-raspberry-400: #FF8080;
77
+ --sinch-ref-color-raspberry-500: #EB5454;
78
+ --sinch-ref-color-raspberry-600: #BD3C41;
79
+ --sinch-ref-color-raspberry-700: #993138;
80
+ --sinch-ref-color-raspberry-800: #57181C;
81
+ --sinch-ref-color-raspberry-900: #3D1215;
82
+ --sinch-ref-color-tropical-50: #F0FAF4;
83
+ --sinch-ref-color-tropical-100: #E2F0E8;
84
+ --sinch-ref-color-tropical-200: #CEE5DA;
85
+ --sinch-ref-color-tropical-300: #AFDBCD;
86
+ --sinch-ref-color-tropical-350: #80CFBC;
87
+ --sinch-ref-color-tropical-400: #51B8A6;
88
+ --sinch-ref-color-tropical-500: #06998B;
89
+ --sinch-ref-color-tropical-600: #007874;
90
+ --sinch-ref-color-tropical-700: #006063;
91
+ --sinch-ref-color-tropical-800: #0C333B;
92
+ --sinch-ref-color-tropical-900: #0E2329;
93
+ --sinch-ref-color-violet-50: #F8F5FF;
94
+ --sinch-ref-color-violet-100: #EFEBFF;
95
+ --sinch-ref-color-violet-200: #E2DBFF;
96
+ --sinch-ref-color-violet-300: #D0C8FA;
97
+ --sinch-ref-color-violet-350: #C1B6FA;
98
+ --sinch-ref-color-violet-400: #A89BFA;
99
+ --sinch-ref-color-violet-500: #857AEB;
100
+ --sinch-ref-color-violet-600: #645DC2;
101
+ --sinch-ref-color-violet-700: #4D4AA8;
102
+ --sinch-ref-color-violet-800: #2A2A54;
103
+ --sinch-ref-color-violet-900: #1E1E33;
104
+ --sinch-ref-shadow-level-0: none;
105
+ --sinch-ref-shadow-level-1: 1px 2px 6px #0A273D1A;
106
+ --sinch-ref-shadow-level-2: 1px 4px 8px #0A273D1A;
107
+ --sinch-ref-shadow-level-3: 1px 6px 12px #0A273D26;
108
+ --sinch-ref-shadow-level-4: 0 8px 16px #0A273D1A;
109
+ --sinch-ref-typography-font-family-main: "DM Sans", "Arial", sans-serif;
110
+ --sinch-ref-typography-font-family-mono: "DM Mono", monospace;
111
+ --sinch-ref-typography-font-size-10: 10px;
112
+ --sinch-ref-typography-font-size-12: 12px;
113
+ --sinch-ref-typography-font-size-14: 14px;
114
+ --sinch-ref-typography-font-size-16: 16px;
115
+ --sinch-ref-typography-font-size-18: 18px;
116
+ --sinch-ref-typography-font-size-20: 20px;
117
+ --sinch-ref-typography-font-size-24: 24px;
118
+ --sinch-ref-typography-font-size-40: 40px;
119
+ --sinch-ref-typography-font-size-56: 56px;
120
+ --sinch-ref-typography-font-weight-300: 300;
121
+ --sinch-ref-typography-font-weight-400: 400;
122
+ --sinch-ref-typography-font-weight-500: 500;
123
+ --sinch-ref-typography-font-weight-600: 600;
124
+ --sinch-ref-typography-font-weight-700: 700;
125
+ --sinch-ref-typography-letter-spacing-body: 0;
126
+ --sinch-ref-typography-letter-spacing-title: -2%;
127
+ --sinch-ref-typography-line-height-14: 14px;
128
+ --sinch-ref-typography-line-height-16: 16px;
129
+ --sinch-ref-typography-line-height-20: 20px;
130
+ --sinch-ref-typography-line-height-22: 22px;
131
+ --sinch-ref-typography-line-height-24: 24px;
132
+ --sinch-ref-typography-line-height-28: 28px;
133
+ --sinch-ref-typography-line-height-32: 32px;
134
+ --sinch-ref-typography-line-height-48: 48px;
135
+ --sinch-ref-typography-line-height-72: 72px;
136
+ --sinch-ref-typography-paragraph-spacing-0: 0;
137
+ --sinch-ref-typography-paragraph-spacing-1: 12;
138
+ --sinch-ref-typography-text-case-none: none;
139
+ --sinch-ref-typography-text-decoration-none: none;
140
+ --sinch-ref-typography-text-decoration-underline: underline;
141
+ }
142
+
143
+ :root,
144
+ [data-theme="light"] {
145
+ --sinch-sys-color-basic-pure: #FFFFFF;
146
+ --sinch-sys-color-basic-pure-inverted: #000000;
147
+ --sinch-sys-color-basic-transparent: transparent;
148
+ --sinch-sys-color-border-default: var(--sinch-ref-color-neutral-350);
149
+ --sinch-sys-color-border-disabled: var(--sinch-ref-color-neutral-100);
150
+ --sinch-sys-color-border-strong: var(--sinch-ref-color-neutral-400);
151
+ --sinch-sys-color-border-subtle: var(--sinch-ref-color-neutral-200);
152
+ --sinch-sys-color-feedback-danger-default: #D63F3F;
153
+ --sinch-sys-color-feedback-danger-strong: var(--sinch-ref-color-raspberry-700);
154
+ --sinch-sys-color-feedback-danger-subtle: var(--sinch-ref-color-raspberry-200);
155
+ --sinch-sys-color-feedback-info-default: var(--sinch-ref-color-ocean-500);
156
+ --sinch-sys-color-feedback-info-strong: var(--sinch-ref-color-ocean-700);
157
+ --sinch-sys-color-feedback-info-subtle: var(--sinch-ref-color-ocean-200);
158
+ --sinch-sys-color-feedback-neutral-default: var(--sinch-ref-color-neutral-500);
159
+ --sinch-sys-color-feedback-neutral-strong: var(--sinch-ref-color-neutral-700);
160
+ --sinch-sys-color-feedback-neutral-subtle: var(--sinch-ref-color-neutral-200);
161
+ --sinch-sys-color-feedback-success-default: var(--sinch-ref-color-grass-400);
162
+ --sinch-sys-color-feedback-success-strong: var(--sinch-ref-color-grass-700);
163
+ --sinch-sys-color-feedback-success-subtle: var(--sinch-ref-color-grass-200);
164
+ --sinch-sys-color-feedback-warning-default: var(--sinch-ref-color-pumpkin-400);
165
+ --sinch-sys-color-feedback-warning-strong: var(--sinch-ref-color-pumpkin-700);
166
+ --sinch-sys-color-feedback-warning-subtle: var(--sinch-ref-color-pumpkin-200);
167
+ --sinch-sys-color-focus: var(--sinch-ref-color-ocean-400);
168
+ --sinch-sys-color-primary-active: var(--sinch-ref-color-tropical-800);
169
+ --sinch-sys-color-primary-default: var(--sinch-ref-color-tropical-700);
170
+ --sinch-sys-color-primary-disabled: var(--sinch-ref-color-tropical-400);
171
+ --sinch-sys-color-primary-foreground: var(--sinch-sys-color-basic-pure);
172
+ --sinch-sys-color-primary-hover: var(--sinch-ref-color-tropical-600);
173
+ --sinch-sys-color-surface-canvas: var(--sinch-ref-color-neutral-100);
174
+ --sinch-sys-color-surface-primary-active: var(--sinch-ref-color-neutral-100);
175
+ --sinch-sys-color-surface-primary-default: var(--sinch-sys-color-basic-pure);
176
+ --sinch-sys-color-surface-primary-disabled: var(--sinch-sys-color-basic-pure);
177
+ --sinch-sys-color-surface-primary-hover: var(--sinch-ref-color-neutral-50);
178
+ --sinch-sys-color-surface-secondary-active: var(--sinch-ref-color-neutral-200);
179
+ --sinch-sys-color-surface-secondary-default: var(--sinch-ref-color-neutral-50);
180
+ --sinch-sys-color-surface-secondary-disabled: var(--sinch-ref-color-neutral-50);
181
+ --sinch-sys-color-surface-secondary-hover: var(--sinch-ref-color-neutral-100);
182
+ --sinch-sys-color-surface-tertiary-active: var(--sinch-ref-color-neutral-300);
183
+ --sinch-sys-color-surface-tertiary-default: var(--sinch-ref-color-neutral-100);
184
+ --sinch-sys-color-surface-tertiary-disabled: var(--sinch-ref-color-neutral-50);
185
+ --sinch-sys-color-surface-tertiary-hover: var(--sinch-ref-color-neutral-200);
186
+ --sinch-sys-color-surface-transparent-active: #1A212633;
187
+ --sinch-sys-color-surface-transparent-default: var(--sinch-sys-color-basic-transparent);
188
+ --sinch-sys-color-surface-transparent-disabled: var(--sinch-sys-color-basic-transparent);
189
+ --sinch-sys-color-surface-transparent-hover: #1A21261A;
190
+ --sinch-sys-color-text-caption: var(--sinch-ref-color-neutral-700);
191
+ --sinch-sys-color-text-default: var(--sinch-ref-color-neutral-900);
192
+ --sinch-sys-color-text-disabled: var(--sinch-ref-color-neutral-400);
193
+ --sinch-sys-color-text-muted: var(--sinch-ref-color-neutral-600);
194
+ --sinch-sys-font-body-emphasize: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
195
+ --sinch-sys-font-body-emphasize-s: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
196
+ --sinch-sys-font-body-emphasize-xs: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
197
+ --sinch-sys-font-body-link: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
198
+ --sinch-sys-font-body-m: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
199
+ --sinch-sys-font-body-monospace-m: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-mono);
200
+ --sinch-sys-font-body-monospace-s: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-mono);
201
+ --sinch-sys-font-body-monospace-xs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-mono);
202
+ --sinch-sys-font-body-monospace-xxs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-16) var(--sinch-ref-typography-font-family-mono);
203
+ --sinch-sys-font-body-s: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
204
+ --sinch-sys-font-body-xs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
205
+ --sinch-sys-font-body-xxs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-16) var(--sinch-ref-typography-font-family-main);
206
+ --sinch-sys-font-desktop-title-hero: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-56)/var(--sinch-ref-typography-line-height-72) var(--sinch-ref-typography-font-family-main);
207
+ --sinch-sys-font-desktop-title-l: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-24)/var(--sinch-ref-typography-line-height-32) var(--sinch-ref-typography-font-family-main);
208
+ --sinch-sys-font-desktop-title-m: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-20)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
209
+ --sinch-sys-font-desktop-title-s: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
210
+ --sinch-sys-font-desktop-title-xl: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-40)/var(--sinch-ref-typography-line-height-48) var(--sinch-ref-typography-font-family-main);
211
+ --sinch-sys-font-desktop-title-xs: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
212
+ --sinch-sys-shape-radius-full: 9999px;
213
+ --sinch-sys-shape-radius-l: 14px;
214
+ --sinch-sys-shape-radius-m: 10px;
215
+ --sinch-sys-shape-radius-s: 6px;
216
+ --sinch-sys-shape-radius-xs: 2px;
217
+ --sinch-sys-size-l: 48px;
218
+ --sinch-sys-size-m: 40px;
219
+ --sinch-sys-size-s: 32px;
220
+ --sinch-sys-size-xs: 24px;
221
+ }
package/package.json CHANGED
@@ -1,6 +1,26 @@
1
1
  {
2
2
  "name": "@nectary/styles",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "1.0.0",
4
+ "description": "Nectary design tokens (ref + sys) as global CSS custom properties",
5
+ "main": "index.css",
6
+ "style": "index.css",
7
+ "exports": {
8
+ ".": "./index.css",
9
+ "./index.css": "./index.css",
10
+ "./light.css": "./light.css",
11
+ "./dark.css": "./dark.css",
12
+ "./fonts.css": "./fonts.css",
13
+ "./TOKENS.md": "./TOKENS.md",
14
+ "./package.json": "./package.json"
15
+ },
16
+ "files": [
17
+ "*.css",
18
+ "TOKENS.md"
19
+ ],
20
+ "sideEffects": [
21
+ "*.css"
22
+ ],
23
+ "publishConfig": {
24
+ "access": "public"
25
+ }
26
+ }