veritheme 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 (12) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +145 -0
  3. package/README.txt +8 -0
  4. package/package.json +53 -0
  5. package/theme-manifest.json +20 -0
  6. package/themes/default.json +127 -0
  7. package/themes/editorial.json +127 -0
  8. package/themes/rounded-sans.json +127 -0
  9. package/veritheme.css +7346 -0
  10. package/veritheme.js +1108 -0
  11. package/veritheme.min.css +4442 -0
  12. package/veritheme.min.js +7 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Taras Tarasenko
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,145 @@
1
+ # veritheme
2
+
3
+ **75 beautifully designed UI components.** Pure CSS utility classes, semantic design tokens, dark mode, and a vanilla JS bundle — no framework, no build step required.
4
+
5
+ **[veritheme.com](https://veritheme.com)** · [Docs & live demos](https://veritheme.com) · [Theme Generator](https://veritheme.com/themes/)
6
+
7
+ ---
8
+
9
+ ## What is veritheme?
10
+
11
+ veritheme is a framework-agnostic UI component library delivered as plain CSS and vanilla JavaScript. You style your markup with `vt-` utility classes and drop in `data-*` attributes for interactive behavior — the JS bundle wires everything up automatically. No React, no Tailwind runtime, no bundler needed.
12
+
13
+ It's built around a **2-layer design token system** (raw palette → semantic tokens) that keeps colors, spacing, typography, and radii consistent across light/dark modes and across three shipped themes. The exact same token format powers the website, the Figma plugin, and exported custom themes — so design and code never drift apart.
14
+
15
+ ## Install
16
+
17
+ ```bash
18
+ npm install veritheme
19
+ ```
20
+
21
+ Or use it straight from a CDN with no install at all:
22
+
23
+ ```html
24
+ <!-- CSS -->
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/veritheme/veritheme.min.css">
26
+
27
+ <!-- JS (auto-initializes interactive components on DOMContentLoaded) -->
28
+ <script src="https://cdn.jsdelivr.net/npm/veritheme/veritheme.min.js"></script>
29
+ ```
30
+
31
+ With a bundler:
32
+
33
+ ```js
34
+ import 'veritheme/veritheme.min.css';
35
+ import 'veritheme'; // initializes interactive components
36
+ ```
37
+
38
+ ## What's in this package
39
+
40
+ | File | Description |
41
+ |------|-------------|
42
+ | `veritheme.min.css` / `veritheme.css` | All components + UC utility classes + design tokens (minified / readable) |
43
+ | `veritheme.min.js` / `veritheme.js` | Vanilla JS for interactive components, zero dependencies |
44
+ | `themes/*.json` | Theme token files — `default`, `editorial`, `rounded-sans` |
45
+ | `theme-manifest.json` | Index of available themes (name, label, font, dark-mode support) |
46
+
47
+ Package exports: `veritheme/css`, `veritheme/js/unminified`, `veritheme/themes/*`, `veritheme/theme-manifest`.
48
+
49
+ ## Usage
50
+
51
+ ### Utility classes
52
+
53
+ Every utility uses the `vt-` prefix:
54
+
55
+ ```html
56
+ <div class="vt-flex vt-items-center vt-gap-4 vt-p-4 vt-rounded-lg vt-bg-neutrals-surface">
57
+ <span class="vt-text-fg-primary vt-text-sm vt-font-medium">Hello</span>
58
+ </div>
59
+ ```
60
+
61
+ ### Dark mode
62
+
63
+ Add `.dark` to `<html>`:
64
+
65
+ ```html
66
+ <html class="dark">
67
+ ```
68
+
69
+ ### Themes
70
+
71
+ Add `data-theme` to `<html>` — choose `default`, `editorial`, or `rounded-sans`:
72
+
73
+ ```html
74
+ <html data-theme="editorial">
75
+ ```
76
+
77
+ ### Interactive components
78
+
79
+ Markup uses `data-*` attributes as hooks; the JS bundle initializes them automatically:
80
+
81
+ ```html
82
+ <div data-accordion="single">
83
+ <div data-accordion-item>
84
+ <button data-accordion-trigger>Title</button>
85
+ <div data-accordion-content>Content</div>
86
+ </div>
87
+ </div>
88
+ ```
89
+
90
+ ## Themes & the Theme Generator
91
+
92
+ Three themes ship in the box (each with a light and dark variant):
93
+
94
+ - **Default** — Inter, clean and neutral
95
+ - **Editorial** — Source Serif 4, editorial / long-form
96
+ - **Rounded Sans** — Manrope, soft and friendly
97
+
98
+ Want your own? The **[Theme Generator](https://veritheme.com/themes/)** lets you pick colors (light + dark), font, border radius, border width, and spacing scale — and watch every component restyle live. Export a ready-to-use CSS + JS bundle, or download a `theme.json` that drops straight into the Figma plugin so your design files re-theme to match. One file drives both code and design.
99
+
100
+ ## Figma plugin
101
+
102
+ **[veritheme — Design Tokens & UI Components](https://www.figma.com/community/plugin/1610343587499165100/veritheme-design-tokens-ui-components)** is a design system generator for Figma. Select the components you need, customize your theme, and generate production-ready design tokens and UI components directly into your file.
103
+
104
+ **What it does:**
105
+
106
+ - Generates Figma Variables — colors, typography, spacing, radius, borders, shadows
107
+ - Creates Light and Dark mode collections automatically
108
+ - Includes 24 UI components: buttons, form controls, navigation, feedback, and data display
109
+ - Lets you customize the theme — brand color, neutrals, typography, and semantic tokens — before generating
110
+ - Outputs a structured, token-driven component library ready to use in your designs
111
+
112
+ **Who it's for:** Designers and product teams who want a consistent, token-driven foundation without building a design system from scratch.
113
+
114
+ It shares the same `theme.json` format as the Theme Generator, so a theme designed in code re-themes your Figma library to match.
115
+
116
+ ## Use with AI agents (MCP)
117
+
118
+ veritheme ships an official MCP server, **[`@veritheme/mcp-server`](https://www.npmjs.com/package/@veritheme/mcp-server)** — AI assistants (Claude Code, Cursor, any MCP client) can query real components, design tokens, themes, and HTML snippets instead of guessing class names:
119
+
120
+ ```bash
121
+ # Claude Code
122
+ claude mcp add veritheme -- npx -y @veritheme/mcp-server
123
+ ```
124
+
125
+ ```json
126
+ // any MCP client config
127
+ { "mcpServers": { "veritheme": { "command": "npx", "args": ["-y", "@veritheme/mcp-server"] } } }
128
+ ```
129
+
130
+ Tools: `list_components`, `get_component`, `get_tokens`, `get_theme`, `get_snippet`, `search`.
131
+
132
+ The site also serves [veritheme.com/llms.txt](https://veritheme.com/llms.txt) — a compact, LLM-friendly map of the library for web-browsing agents.
133
+
134
+ ## The veritheme ecosystem
135
+
136
+ | Package / repo | What it is |
137
+ |----------------|-----------|
138
+ | [`veritheme`](https://www.npmjs.com/package/veritheme) | This package — the CSS + JS distribution bundle |
139
+ | [`@veritheme/mcp-server`](https://www.npmjs.com/package/@veritheme/mcp-server) | MCP server exposing components/tokens/themes to AI agents |
140
+ | [veritheme Figma plugin](https://www.figma.com/community/plugin/1610343587499165100/veritheme-design-tokens-ui-components) | Generate design tokens + 24 UI components into Figma |
141
+ | [veritheme.com](https://veritheme.com) | Docs, live demos, and the Theme Generator |
142
+
143
+ ## License
144
+
145
+ MIT © Siarhei Tarasenko
package/README.txt ADDED
@@ -0,0 +1,8 @@
1
+ Veritheme Design System Bundle
2
+
3
+ - veritheme.css: expanded bundle
4
+ - veritheme.min.css: minified bundle
5
+ - theme-manifest.json: selectable themes
6
+ - themes/: source theme json files
7
+
8
+ Include veritheme.css (or veritheme.min.css) in your app and set html[data-theme="<name>"] + html.dark for dark mode.
package/package.json ADDED
@@ -0,0 +1,53 @@
1
+ {
2
+ "name": "veritheme",
3
+ "version": "1.0.0",
4
+ "description": "UI component library — pure CSS utility classes, design tokens, dark mode, vanilla JS bundle.",
5
+ "license": "MIT",
6
+ "author": "Taras Tarasenko <by.tarasenko@gmail.com>",
7
+ "homepage": "https://veritheme.com",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/tarasenko-by/veritheme.git"
11
+ },
12
+ "bugs": {
13
+ "url": "https://github.com/tarasenko-by/veritheme/issues"
14
+ },
15
+ "keywords": [
16
+ "ui",
17
+ "css",
18
+ "design-system",
19
+ "components",
20
+ "design-tokens",
21
+ "dark-mode",
22
+ "figma"
23
+ ],
24
+ "main": "veritheme.min.js",
25
+ "style": "veritheme.min.css",
26
+ "exports": {
27
+ ".": {
28
+ "import": "./veritheme.min.js",
29
+ "default": "./veritheme.min.js"
30
+ },
31
+ "./css": "./veritheme.min.css",
32
+ "./css/unminified": "./veritheme.css",
33
+ "./js/unminified": "./veritheme.js",
34
+ "./theme-manifest": "./theme-manifest.json",
35
+ "./themes/*": "./themes/*"
36
+ },
37
+ "files": [
38
+ "veritheme.css",
39
+ "veritheme.min.css",
40
+ "veritheme.js",
41
+ "veritheme.min.js",
42
+ "theme-manifest.json",
43
+ "themes",
44
+ "README.md",
45
+ "LICENSE"
46
+ ],
47
+ "publishConfig": {
48
+ "access": "public"
49
+ },
50
+ "sideEffects": [
51
+ "*.css"
52
+ ]
53
+ }
package/theme-manifest.json ADDED
@@ -0,0 +1,20 @@
1
+ [
2
+ {
3
+ "name": "default",
4
+ "label": "Default",
5
+ "fontFamily": "Inter, system-ui, sans-serif",
6
+ "hasDark": true
7
+ },
8
+ {
9
+ "name": "editorial",
10
+ "label": "Editorial",
11
+ "fontFamily": "'Source Serif 4', Georgia, serif",
12
+ "hasDark": true
13
+ },
14
+ {
15
+ "name": "rounded-sans",
16
+ "label": "Rounded Sans",
17
+ "fontFamily": "Manrope, Inter, system-ui, sans-serif",
18
+ "hasDark": true
19
+ }
20
+ ]
package/themes/default.json ADDED
@@ -0,0 +1,127 @@
1
+ {
2
+ "name": "default",
3
+ "label": "Default",
4
+ "fontFamily": "Inter, system-ui, sans-serif",
5
+ "radius": {
6
+ "sm": "8px",
7
+ "lg": "12px",
8
+ "xl": "16px",
9
+ "2xl": "20px",
10
+ "3xl": "24px"
11
+ },
12
+ "borderWidth": {
13
+ "none": "0px",
14
+ "thin": "0.5px",
15
+ "default": "1px",
16
+ "medium": "1.5px",
17
+ "thick": "2px"
18
+ },
19
+ "spacing": {
20
+ "0": "0",
21
+ "0.5": "0.125rem",
22
+ "1": "0.25rem",
23
+ "1.5": "0.375rem",
24
+ "2": "0.5rem",
25
+ "3": "0.75rem",
26
+ "4": "1rem",
27
+ "5": "1.25rem",
28
+ "6": "1.5rem",
29
+ "8": "2rem",
30
+ "10": "2.5rem",
31
+ "12": "3rem",
32
+ "16": "4rem"
33
+ },
34
+ "fontSize": {
35
+ "xs": "0.75rem",
36
+ "sm": "0.875rem",
37
+ "base": "1rem",
38
+ "lg": "1.125rem",
39
+ "xl": "1.25rem",
40
+ "2xl": "1.5rem",
41
+ "3xl": "1.875rem",
42
+ "4xl": "2.25rem"
43
+ },
44
+ "fontWeight": {
45
+ "normal": "400",
46
+ "medium": "500",
47
+ "semibold": "600",
48
+ "bold": "700",
49
+ "extrabold": "800"
50
+ },
51
+ "lineHeight": {
52
+ "tight": "1.25",
53
+ "normal": "1.5",
54
+ "loose": "1.75"
55
+ },
56
+ "shadow": {
57
+ "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
58
+ "default": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
59
+ "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
60
+ "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
61
+ "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
62
+ },
63
+ "zIndex": {
64
+ "dropdown": "1000",
65
+ "sticky": "1020",
66
+ "fixed": "1030",
67
+ "drawer": "1040",
68
+ "modal": "1050",
69
+ "popover": "1060",
70
+ "tooltip": "1070"
71
+ },
72
+ "transition": {
73
+ "fast": "150ms ease",
74
+ "normal": "200ms ease",
75
+ "slow": "300ms ease"
76
+ },
77
+ "colors": {
78
+ "constantWhite": "0 0% 100%",
79
+ "constantBlack": "0 0% 0%",
80
+ "fgPrimary": "240 3% 6%",
81
+ "fgSecondary": "228 4% 25%",
82
+ "fgTertiary": "227 4% 43%",
83
+ "fgQuaternary": "231 6% 61%",
84
+ "neutralsBackground": "0 0% 98%",
85
+ "neutralsSurface": "0 0% 100%",
86
+ "neutralsSubtle": "0 0% 98%",
87
+ "neutralsMuted": "0 0% 96%",
88
+ "neutralsEmphasis": "0 5% 92%",
89
+ "borderDefault": "0 5% 92%",
90
+ "borderStrong": "245 10% 78%",
91
+ "accentsBrand": "213 87% 49%",
92
+ "accentsGreen": "162 86% 40%",
93
+ "accentsBlue": "219 88% 54%",
94
+ "accentsRed": "4 83% 55%",
95
+ "accentsOrange": "30 100% 55%",
96
+ "tintBrand": "213 40% 93%",
97
+ "tintRed": "0 100% 95%",
98
+ "tintGreen": "152 39% 89%",
99
+ "tintBlue": "217 100% 92%",
100
+ "tintOrange": "34 100% 95%"
101
+ },
102
+ "dark": {
103
+ "colors": {
104
+ "fgPrimary": "0 0% 98%",
105
+ "fgSecondary": "245 10% 78%",
106
+ "fgTertiary": "231 6% 61%",
107
+ "fgQuaternary": "227 4% 43%",
108
+ "neutralsBackground": "240 3% 6%",
109
+ "neutralsSurface": "0 0% 0%",
110
+ "neutralsSubtle": "240 4% 15%",
111
+ "neutralsMuted": "240 3% 6%",
112
+ "neutralsEmphasis": "228 4% 25%",
113
+ "borderDefault": "240 4% 15%",
114
+ "borderStrong": "228 4% 25%",
115
+ "accentsBrand": "213 87% 56%",
116
+ "accentsGreen": "162 86% 40%",
117
+ "accentsBlue": "219 88% 54%",
118
+ "accentsRed": "4 83% 55%",
119
+ "accentsOrange": "30 100% 55%",
120
+ "tintBrand": "213 50% 17%",
121
+ "tintRed": "356 89% 17%",
122
+ "tintGreen": "150 60% 3%",
123
+ "tintBlue": "216 82% 17%",
124
+ "tintOrange": "30 100% 10%"
125
+ }
126
+ }
127
+ }
package/themes/editorial.json ADDED
@@ -0,0 +1,127 @@
1
+ {
2
+ "name": "editorial",
3
+ "label": "Editorial",
4
+ "fontFamily": "'Source Serif 4', Georgia, serif",
5
+ "radius": {
6
+ "sm": "6px",
7
+ "lg": "10px",
8
+ "xl": "14px",
9
+ "2xl": "18px",
10
+ "3xl": "22px"
11
+ },
12
+ "borderWidth": {
13
+ "none": "0px",
14
+ "thin": "0.5px",
15
+ "default": "1px",
16
+ "medium": "1.5px",
17
+ "thick": "2px"
18
+ },
19
+ "spacing": {
20
+ "0": "0",
21
+ "0.5": "0.125rem",
22
+ "1": "0.25rem",
23
+ "1.5": "0.375rem",
24
+ "2": "0.5rem",
25
+ "3": "0.75rem",
26
+ "4": "1rem",
27
+ "5": "1.25rem",
28
+ "6": "1.5rem",
29
+ "8": "2rem",
30
+ "10": "2.5rem",
31
+ "12": "3rem",
32
+ "16": "4rem"
33
+ },
34
+ "fontSize": {
35
+ "xs": "0.75rem",
36
+ "sm": "0.875rem",
37
+ "base": "1rem",
38
+ "lg": "1.125rem",
39
+ "xl": "1.25rem",
40
+ "2xl": "1.5rem",
41
+ "3xl": "1.875rem",
42
+ "4xl": "2.25rem"
43
+ },
44
+ "fontWeight": {
45
+ "normal": "400",
46
+ "medium": "500",
47
+ "semibold": "600",
48
+ "bold": "700",
49
+ "extrabold": "800"
50
+ },
51
+ "lineHeight": {
52
+ "tight": "1.25",
53
+ "normal": "1.5",
54
+ "loose": "1.75"
55
+ },
56
+ "shadow": {
57
+ "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
58
+ "default": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
59
+ "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
60
+ "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
61
+ "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
62
+ },
63
+ "zIndex": {
64
+ "dropdown": "1000",
65
+ "sticky": "1020",
66
+ "fixed": "1030",
67
+ "drawer": "1040",
68
+ "modal": "1050",
69
+ "popover": "1060",
70
+ "tooltip": "1070"
71
+ },
72
+ "transition": {
73
+ "fast": "150ms ease",
74
+ "normal": "200ms ease",
75
+ "slow": "300ms ease"
76
+ },
77
+ "colors": {
78
+ "constantWhite": "0 0% 100%",
79
+ "constantBlack": "0 0% 0%",
80
+ "fgPrimary": "26 14% 16%",
81
+ "fgSecondary": "26 10% 28%",
82
+ "fgTertiary": "27 8% 44%",
83
+ "fgQuaternary": "28 6% 58%",
84
+ "neutralsBackground": "36 30% 97%",
85
+ "neutralsSurface": "38 30% 99%",
86
+ "neutralsSubtle": "36 26% 95%",
87
+ "neutralsMuted": "35 24% 93%",
88
+ "neutralsEmphasis": "34 18% 88%",
89
+ "borderDefault": "34 16% 86%",
90
+ "borderStrong": "31 14% 72%",
91
+ "accentsBrand": "213 87% 49%",
92
+ "accentsGreen": "155 58% 34%",
93
+ "accentsBlue": "211 74% 45%",
94
+ "accentsRed": "3 68% 52%",
95
+ "accentsOrange": "28 80% 49%",
96
+ "tintBrand": "213 40% 93%",
97
+ "tintRed": "0 100% 96%",
98
+ "tintGreen": "153 40% 90%",
99
+ "tintBlue": "212 100% 94%",
100
+ "tintOrange": "34 100% 95%"
101
+ },
102
+ "dark": {
103
+ "colors": {
104
+ "fgPrimary": "40 18% 94%",
105
+ "fgSecondary": "37 14% 80%",
106
+ "fgTertiary": "35 10% 64%",
107
+ "fgQuaternary": "33 7% 48%",
108
+ "neutralsBackground": "24 16% 10%",
109
+ "neutralsSurface": "22 16% 8%",
110
+ "neutralsSubtle": "24 12% 14%",
111
+ "neutralsMuted": "25 13% 11%",
112
+ "neutralsEmphasis": "23 10% 20%",
113
+ "borderDefault": "23 10% 19%",
114
+ "borderStrong": "25 10% 29%",
115
+ "accentsBrand": "213 87% 56%",
116
+ "accentsGreen": "155 58% 43%",
117
+ "accentsBlue": "211 74% 56%",
118
+ "accentsRed": "3 72% 60%",
119
+ "accentsOrange": "30 84% 57%",
120
+ "tintBrand": "213 50% 17%",
121
+ "tintRed": "356 60% 16%",
122
+ "tintGreen": "153 46% 11%",
123
+ "tintBlue": "211 53% 16%",
124
+ "tintOrange": "30 63% 14%"
125
+ }
126
+ }
127
+ }
package/themes/rounded-sans.json ADDED
@@ -0,0 +1,127 @@
1
+ {
2
+ "name": "rounded-sans",
3
+ "label": "Rounded Sans",
4
+ "fontFamily": "Manrope, Inter, system-ui, sans-serif",
5
+ "radius": {
6
+ "sm": "10px",
7
+ "lg": "14px",
8
+ "xl": "18px",
9
+ "2xl": "24px",
10
+ "3xl": "28px"
11
+ },
12
+ "borderWidth": {
13
+ "none": "0px",
14
+ "thin": "0.5px",
15
+ "default": "1px",
16
+ "medium": "1.5px",
17
+ "thick": "2px"
18
+ },
19
+ "spacing": {
20
+ "0": "0",
21
+ "0.5": "0.125rem",
22
+ "1": "0.25rem",
23
+ "1.5": "0.375rem",
24
+ "2": "0.5rem",
25
+ "3": "0.75rem",
26
+ "4": "1rem",
27
+ "5": "1.25rem",
28
+ "6": "1.5rem",
29
+ "8": "2rem",
30
+ "10": "2.5rem",
31
+ "12": "3rem",
32
+ "16": "4rem"
33
+ },
34
+ "fontSize": {
35
+ "xs": "0.75rem",
36
+ "sm": "0.875rem",
37
+ "base": "1rem",
38
+ "lg": "1.125rem",
39
+ "xl": "1.25rem",
40
+ "2xl": "1.5rem",
41
+ "3xl": "1.875rem",
42
+ "4xl": "2.25rem"
43
+ },
44
+ "fontWeight": {
45
+ "normal": "400",
46
+ "medium": "500",
47
+ "semibold": "600",
48
+ "bold": "700",
49
+ "extrabold": "800"
50
+ },
51
+ "lineHeight": {
52
+ "tight": "1.25",
53
+ "normal": "1.5",
54
+ "loose": "1.75"
55
+ },
56
+ "shadow": {
57
+ "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
58
+ "default": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
59
+ "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
60
+ "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
61
+ "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
62
+ },
63
+ "zIndex": {
64
+ "dropdown": "1000",
65
+ "sticky": "1020",
66
+ "fixed": "1030",
67
+ "drawer": "1040",
68
+ "modal": "1050",
69
+ "popover": "1060",
70
+ "tooltip": "1070"
71
+ },
72
+ "transition": {
73
+ "fast": "150ms ease",
74
+ "normal": "200ms ease",
75
+ "slow": "300ms ease"
76
+ },
77
+ "colors": {
78
+ "constantWhite": "0 0% 100%",
79
+ "constantBlack": "0 0% 0%",
80
+ "fgPrimary": "224 26% 15%",
81
+ "fgSecondary": "225 17% 28%",
82
+ "fgTertiary": "225 12% 45%",
83
+ "fgQuaternary": "226 10% 62%",
84
+ "neutralsBackground": "220 20% 98%",
85
+ "neutralsSurface": "0 0% 100%",
86
+ "neutralsSubtle": "220 20% 97%",
87
+ "neutralsMuted": "220 18% 95%",
88
+ "neutralsEmphasis": "220 16% 90%",
89
+ "borderDefault": "220 14% 90%",
90
+ "borderStrong": "221 15% 78%",
91
+ "accentsBrand": "213 87% 49%",
92
+ "accentsGreen": "160 84% 38%",
93
+ "accentsBlue": "221 84% 55%",
94
+ "accentsRed": "0 78% 56%",
95
+ "accentsOrange": "28 96% 56%",
96
+ "tintBrand": "213 40% 93%",
97
+ "tintRed": "0 100% 96%",
98
+ "tintGreen": "154 48% 91%",
99
+ "tintBlue": "214 100% 95%",
100
+ "tintOrange": "34 100% 95%"
101
+ },
102
+ "dark": {
103
+ "colors": {
104
+ "fgPrimary": "220 20% 96%",
105
+ "fgSecondary": "220 16% 83%",
106
+ "fgTertiary": "220 12% 66%",
107
+ "fgQuaternary": "220 10% 48%",
108
+ "neutralsBackground": "226 24% 10%",
109
+ "neutralsSurface": "226 24% 8%",
110
+ "neutralsSubtle": "224 19% 16%",
111
+ "neutralsMuted": "226 20% 12%",
112
+ "neutralsEmphasis": "224 16% 22%",
113
+ "borderDefault": "224 15% 20%",
114
+ "borderStrong": "224 13% 30%",
115
+ "accentsBrand": "213 87% 56%",
116
+ "accentsGreen": "160 84% 45%",
117
+ "accentsBlue": "221 84% 62%",
118
+ "accentsRed": "0 84% 63%",
119
+ "accentsOrange": "32 98% 62%",
120
+ "tintBrand": "213 50% 17%",
121
+ "tintRed": "355 76% 16%",
122
+ "tintGreen": "157 58% 11%",
123
+ "tintBlue": "219 63% 17%",
124
+ "tintOrange": "29 77% 15%"
125
+ }
126
+ }
127
+ }