@mild-ui/tokens 0.0.0-stage → 1.2.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 (20) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +132 -2
  3. package/dist/_tokens.scss +315 -0
  4. package/dist/tokens.css +318 -0
  5. package/dist/tokens.json +314 -0
  6. package/dist/tokens.ts +404 -0
  7. package/package.json +56 -3
  8. package/src/primitives/animation.json +21 -0
  9. package/src/primitives/breakpoints.json +12 -0
  10. package/src/primitives/colors.json +267 -0
  11. package/src/primitives/dimensions.json +51 -0
  12. package/src/primitives/elevation.json +14 -0
  13. package/src/primitives/radius.json +15 -0
  14. package/src/primitives/spacing.json +46 -0
  15. package/src/primitives/typography.json +90 -0
  16. package/src/semantics/animation.json +12 -0
  17. package/src/semantics/colors.json +261 -0
  18. package/src/semantics/dark.json +77 -0
  19. package/src/semantics/high-contrast.json +77 -0
  20. package/src/semantics/light.json +77 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Muhamad Riyan
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 CHANGED
@@ -1,3 +1,133 @@
1
- # Temporary Holding Version
1
+ # @mild-ui/tokens
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
+ Design tokens for [mild-ui](https://github.com/CodeWithRiyan/mild-ui) as plain JSON. They hold the same values as the SCSS tokens in `@mild-ui/core`, so tools that don't read Sass (Style Dictionary, Figma plugins, JS theming, docs) can use them.
4
+
5
+ ```bash
6
+ npm install @mild-ui/tokens
7
+ ```
8
+
9
+ ## Layers
10
+
11
+ | Layer | Path | What it holds |
12
+ | ------------ | ------------------ | ----------------------------------------------------------------------- |
13
+ | `primitives` | `src/primitives/*` | Raw values: palettes, spacing, type scale, radius, shadows, motion |
14
+ | `semantics` | `src/semantics/*` | Named roles that point at primitives (`primary`, `danger`, transitions) |
15
+ | `components` | `src/components/*` | Per-component tokens (none yet, so not exported) |
16
+
17
+ | File | Top-level groups |
18
+ | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
19
+ | `primitives/colors` | `color.{blue,gray,red,green,yellow}.{50…950}` |
20
+ | `primitives/typography` | `font.family`, `font.size`, `font.weight`, `line-height`, `letter-spacing` |
21
+ | `primitives/spacing` | `space`, `space-base` |
22
+ | `primitives/dimensions` | `dimension` (fractional widths such as `1-2` = `50%`) |
23
+ | `primitives/elevation` | `shadow` |
24
+ | `primitives/radius` | `radius` |
25
+ | `primitives/breakpoints` | `breakpoint` |
26
+ | `primitives/animation` | `duration`, `easing` |
27
+ | `semantics/colors` | `color.{primary,secondary,success,warning,danger,error}.{50…950}` |
28
+ | `semantics/animation` | `transition` |
29
+ | `semantics/light` | `background`, `foreground`, `muted(-foreground)`, `border`, `input`, `ring`, `card(-foreground)`, `popover(-foreground)`, `accent(-foreground)`, `destructive(-foreground)` |
30
+ | `semantics/dark` | Same roles as `semantics/light` |
31
+ | `semantics/high-contrast` | Same roles as `semantics/light` |
32
+
33
+ ## Format
34
+
35
+ The files use the [Design Tokens Community Group](https://www.designtokens.org/) layout. Every token is an object with a `$value`. Groups can set `$type` and `$description`, and the tokens inside a group inherit its `$type`.
36
+
37
+ ```json
38
+ {
39
+ "color": {
40
+ "blue": {
41
+ "$type": "color",
42
+ "500": { "$value": "#0ea5e9" }
43
+ }
44
+ }
45
+ }
46
+ ```
47
+
48
+ Values are CSS strings as `@mild-ui/core` emits them (`"0.25rem"`, `"150ms"`, `"cubic-bezier(0.4, 0, 0.2, 1)"`). There are two exceptions: font weights and line heights are numbers, and font families are arrays. Shadows, easings, transitions and percentage dimensions are plain CSS strings, so they have no `$type`.
49
+
50
+ Semantic tokens refer to primitives with `{group.path}` references. A semantic file has to be resolved together with the primitives it refers to:
51
+
52
+ ```json
53
+ { "color": { "primary": { "500": { "$value": "{color.blue.500}" } } } }
54
+ ```
55
+
56
+ ```json
57
+ { "transition": { "colors": { "$value": "color {duration.150} {easing.in-out}" } } }
58
+ ```
59
+
60
+ ## Usage
61
+
62
+ Each file is exported without its `.json` extension:
63
+
64
+ ```js
65
+ import colors from "@mild-ui/tokens/primitives/colors" with { type: "json" };
66
+
67
+ colors.color.blue[500].$value; // "#0ea5e9"
68
+ ```
69
+
70
+ With Style Dictionary, point `source` at the package so references are resolved across layers:
71
+
72
+ ```js
73
+ export default {
74
+ source: ["node_modules/@mild-ui/tokens/src/**/*.json"],
75
+ platforms: {
76
+ css: { transformGroup: "css", files: [{ destination: "tokens.css", format: "css/variables" }] },
77
+ },
78
+ };
79
+ ```
80
+
81
+ ## Build
82
+
83
+ `pnpm build` runs [Style Dictionary](https://styledictionary.com/) (`style-dictionary.config.mjs`) over `src/**/*.json` and writes:
84
+
85
+ | File | Contents |
86
+ | ------------------- | --------------------------------------------------------------------------------------- |
87
+ | `dist/tokens.css` | CSS custom properties (`--mild-*`), aliases as `var(...)` |
88
+ | `dist/_tokens.scss` | The same variables as Sass (`$mild-*`, `!default`), importable by `@mild-ui/core` |
89
+ | `dist/tokens.json` | The same values, flattened to `{ "mild-color-primary-500": "#0ea5e9", ... }` |
90
+ | `dist/tokens.ts` | The same values, nested like the source JSON, as `export const tokens = {...} as const` |
91
+
92
+ All four are generated from the same resolved tokens, so `--mild-color-primary-500`, `mild-color-primary-500` and `tokens.color.primary["500"]` are always the same value. One cosmetic difference: Style Dictionary quotes multi-word font names (`'Segoe UI'`), `@mild-ui/core`'s own Sass build does not; both are valid CSS.
93
+
94
+ These exports resolve to the built files:
95
+
96
+ ```js
97
+ import "@mild-ui/tokens/css"; // dist/tokens.css
98
+ import tokens from "@mild-ui/tokens/json"; // dist/tokens.json
99
+ import { tokens } from "@mild-ui/tokens/ts"; // dist/tokens.ts
100
+ ```
101
+
102
+ ```scss
103
+ @use "@mild-ui/tokens/scss" as tokens; // dist/_tokens.scss
104
+ ```
105
+
106
+ ## Themes and contrast
107
+
108
+ `src/semantics/{light,dark,high-contrast}.json` each define the same 15 roles (`background`, `foreground`, `muted`, `muted-foreground`, `border`, `input`, `ring`, `card`, `card-foreground`, `popover`, `popover-foreground`, `accent`, `accent-foreground`, `destructive`, `destructive-foreground`). `light.json` and `dark.json` mirror `packages/core/src/sass/themes/{light,dark}.scss`; `high-contrast.json` is new. They are parallel, self-contained token sets, not merged with each other (they all define the same keys, e.g. `background`) or built by `style-dictionary.config.mjs` yet.
109
+
110
+ `scripts/check-contrast.ts` checks, in every theme, the pairs a UI actually renders text or a boundary on:
111
+
112
+ | Pair | Kind | Minimum (WCAG) |
113
+ | ---------------------------------------- | ---- | ---------------------- |
114
+ | `foreground` / `background` | text | 4.5:1 (1.4.3 AA) |
115
+ | `muted-foreground` / `background` | text | 4.5:1 |
116
+ | `muted-foreground` / `muted` | text | 4.5:1 |
117
+ | `card-foreground` / `card` | text | 4.5:1 |
118
+ | `popover-foreground` / `popover` | text | 4.5:1 |
119
+ | `accent-foreground` / `accent` | text | 4.5:1 |
120
+ | `destructive-foreground` / `destructive` | text | 4.5:1 |
121
+ | `border` / `background` | ui | 3:1 (1.4.11, non-text) |
122
+ | `input` / `background` | ui | 3:1 |
123
+ | `ring` / `background` | ui | 3:1 |
124
+
125
+ Run it with `pnpm --filter @mild-ui/tokens test` (or `pnpm test` from the repo root, which runs every package's `test` script). It resolves every `{color...}` reference, computes the WCAG contrast ratio for all 10 pairs in all 3 themes, prints each ratio against its required minimum (and whether it also clears the AAA 7:1 bar for text), and exits non-zero if anything is below its minimum. A few of the values in `light.json`/`dark.json` are intentionally different from `@mild-ui/core`'s current theme SCSS, because the original values don't pass; each changed token's `$description` says what changed and why, and links back to this check.
126
+
127
+ ## Naming differences from `@mild-ui/core`
128
+
129
+ Most token paths match the CSS custom property names in `@mild-ui/core` (`color.blue.500` is `--mild-color-blue-500`). The exception is `dimension.*`. Core emits these as `--mild-space-*`, the same prefix as the spacing scale. Here they get their own group so they don't collide with `space.1-5`, `space.2-5` and `space.3-5`.
130
+
131
+ ## License
132
+
133
+ MIT
package/dist/_tokens.scss ADDED
@@ -0,0 +1,315 @@
1
+
2
+ // Do not edit directly, this file was auto-generated.
3
+
4
+ $mild-duration-75: 75ms !default;
5
+ $mild-duration-100: 100ms !default;
6
+ $mild-duration-150: 150ms !default;
7
+ $mild-duration-200: 200ms !default;
8
+ $mild-duration-300: 300ms !default;
9
+ $mild-duration-500: 500ms !default;
10
+ $mild-duration-700: 700ms !default;
11
+ $mild-duration-1000: 1000ms !default;
12
+ $mild-easing-linear: linear !default;
13
+ $mild-easing-in: cubic-bezier(0.4, 0, 1, 1) !default;
14
+ $mild-easing-out: cubic-bezier(0, 0, 0.2, 1) !default;
15
+ $mild-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1) !default;
16
+ $mild-breakpoint-xs: 0 !default;
17
+ $mild-breakpoint-sm: 640px !default;
18
+ $mild-breakpoint-md: 768px !default;
19
+ $mild-breakpoint-lg: 1024px !default;
20
+ $mild-breakpoint-xl: 1280px !default;
21
+ $mild-breakpoint-2xl: 1536px !default;
22
+ $mild-color-blue-50: #f0f9ff !default;
23
+ $mild-color-blue-100: #e0f2fe !default;
24
+ $mild-color-blue-200: #bae6fd !default;
25
+ $mild-color-blue-300: #7dd3fc !default;
26
+ $mild-color-blue-400: #38bdf8 !default;
27
+ $mild-color-blue-500: #0ea5e9 !default;
28
+ $mild-color-blue-600: #0284c7 !default;
29
+ $mild-color-blue-700: #0369a1 !default;
30
+ $mild-color-blue-800: #075985 !default;
31
+ $mild-color-blue-900: #0c4a6e !default;
32
+ $mild-color-blue-950: #082f49 !default;
33
+ $mild-color-gray-50: #f9fafb !default;
34
+ $mild-color-gray-100: #f3f4f6 !default;
35
+ $mild-color-gray-200: #e5e7eb !default;
36
+ $mild-color-gray-300: #d1d5db !default;
37
+ $mild-color-gray-400: #9ca3af !default;
38
+ $mild-color-gray-500: #6b7280 !default;
39
+ $mild-color-gray-600: #4b5563 !default;
40
+ $mild-color-gray-700: #374151 !default;
41
+ $mild-color-gray-800: #1f2937 !default;
42
+ $mild-color-gray-900: #111827 !default;
43
+ $mild-color-gray-950: #030712 !default;
44
+ $mild-color-red-50: #fef2f2 !default;
45
+ $mild-color-red-100: #fee2e2 !default;
46
+ $mild-color-red-200: #fecaca !default;
47
+ $mild-color-red-300: #fca5a5 !default;
48
+ $mild-color-red-400: #f87171 !default;
49
+ $mild-color-red-500: #ef4444 !default;
50
+ $mild-color-red-600: #dc2626 !default;
51
+ $mild-color-red-700: #b91c1c !default;
52
+ $mild-color-red-800: #991b1b !default;
53
+ $mild-color-red-900: #7f1d1d !default;
54
+ $mild-color-red-950: #450a0a !default;
55
+ $mild-color-green-50: #f0fdf4 !default;
56
+ $mild-color-green-100: #dcfce7 !default;
57
+ $mild-color-green-200: #bbf7d0 !default;
58
+ $mild-color-green-300: #86efac !default;
59
+ $mild-color-green-400: #4ade80 !default;
60
+ $mild-color-green-500: #22c55e !default;
61
+ $mild-color-green-600: #16a34a !default;
62
+ $mild-color-green-700: #15803d !default;
63
+ $mild-color-green-800: #166534 !default;
64
+ $mild-color-green-900: #14532d !default;
65
+ $mild-color-green-950: #052e16 !default;
66
+ $mild-color-yellow-50: #fefce8 !default;
67
+ $mild-color-yellow-100: #fef9c3 !default;
68
+ $mild-color-yellow-200: #fef08a !default;
69
+ $mild-color-yellow-300: #fde047 !default;
70
+ $mild-color-yellow-400: #facc15 !default;
71
+ $mild-color-yellow-500: #eab308 !default;
72
+ $mild-color-yellow-600: #ca8a04 !default;
73
+ $mild-color-yellow-700: #a16207 !default;
74
+ $mild-color-yellow-800: #854d0e !default;
75
+ $mild-color-yellow-900: #713f12 !default;
76
+ $mild-color-yellow-950: #422006 !default;
77
+ $mild-color-white: #ffffff !default; // Source: $mild-color-white.
78
+ $mild-color-black: #000000 !default; // Source: $mild-color-black.
79
+ $mild-color-black-alpha-0: rgba(0, 0, 0, 0) !default;
80
+ $mild-color-black-alpha-10: rgba(0, 0, 0, 0.1) !default;
81
+ $mild-color-black-alpha-20: rgba(0, 0, 0, 0.2) !default;
82
+ $mild-color-black-alpha-30: rgba(0, 0, 0, 0.3) !default;
83
+ $mild-color-black-alpha-40: rgba(0, 0, 0, 0.4) !default;
84
+ $mild-color-black-alpha-50: rgba(0, 0, 0, 0.5) !default;
85
+ $mild-color-black-alpha-60: rgba(0, 0, 0, 0.6) !default;
86
+ $mild-color-black-alpha-70: rgba(0, 0, 0, 0.7) !default;
87
+ $mild-color-black-alpha-80: rgba(0, 0, 0, 0.8) !default;
88
+ $mild-color-black-alpha-90: rgba(0, 0, 0, 0.9) !default;
89
+ $mild-color-white-alpha-0: rgba(255, 255, 255, 0) !default;
90
+ $mild-color-white-alpha-10: rgba(255, 255, 255, 0.1) !default;
91
+ $mild-color-white-alpha-20: rgba(255, 255, 255, 0.2) !default;
92
+ $mild-color-white-alpha-30: rgba(255, 255, 255, 0.3) !default;
93
+ $mild-color-white-alpha-40: rgba(255, 255, 255, 0.4) !default;
94
+ $mild-color-white-alpha-50: rgba(255, 255, 255, 0.5) !default;
95
+ $mild-color-white-alpha-60: rgba(255, 255, 255, 0.6) !default;
96
+ $mild-color-white-alpha-70: rgba(255, 255, 255, 0.7) !default;
97
+ $mild-color-white-alpha-80: rgba(255, 255, 255, 0.8) !default;
98
+ $mild-color-white-alpha-90: rgba(255, 255, 255, 0.9) !default;
99
+ $mild-dimension-full: 100% !default;
100
+ $mild-dimension-1-2: 50% !default;
101
+ $mild-dimension-1-3: 33.333333% !default;
102
+ $mild-dimension-2-3: 66.666667% !default;
103
+ $mild-dimension-1-4: 25% !default;
104
+ $mild-dimension-3-4: 75% !default;
105
+ $mild-dimension-1-5: 20% !default;
106
+ $mild-dimension-2-5: 40% !default;
107
+ $mild-dimension-3-5: 60% !default;
108
+ $mild-dimension-4-5: 80% !default;
109
+ $mild-dimension-1-6: 16.666667% !default;
110
+ $mild-dimension-5-6: 83.333333% !default;
111
+ $mild-dimension-1-7: 14.285714% !default;
112
+ $mild-dimension-2-7: 28.571429% !default;
113
+ $mild-dimension-3-7: 42.857143% !default;
114
+ $mild-dimension-4-7: 57.142857% !default;
115
+ $mild-dimension-5-7: 71.428571% !default;
116
+ $mild-dimension-6-7: 85.714286% !default;
117
+ $mild-dimension-1-8: 12.5% !default;
118
+ $mild-dimension-3-8: 37.5% !default;
119
+ $mild-dimension-5-8: 62.5% !default;
120
+ $mild-dimension-7-8: 87.5% !default;
121
+ $mild-dimension-1-9: 11.111111% !default;
122
+ $mild-dimension-2-9: 22.222222% !default;
123
+ $mild-dimension-4-9: 44.444444% !default;
124
+ $mild-dimension-5-9: 55.555556% !default;
125
+ $mild-dimension-7-9: 77.777778% !default;
126
+ $mild-dimension-8-9: 88.888889% !default;
127
+ $mild-dimension-1-10: 10% !default;
128
+ $mild-dimension-3-10: 30% !default;
129
+ $mild-dimension-7-10: 70% !default;
130
+ $mild-dimension-9-10: 90% !default;
131
+ $mild-dimension-1-11: 9.090909% !default;
132
+ $mild-dimension-2-11: 18.181818% !default;
133
+ $mild-dimension-3-11: 27.272727% !default;
134
+ $mild-dimension-4-11: 36.363636% !default;
135
+ $mild-dimension-5-11: 45.454545% !default;
136
+ $mild-dimension-6-11: 54.545455% !default;
137
+ $mild-dimension-7-11: 63.636364% !default;
138
+ $mild-dimension-8-11: 72.727273% !default;
139
+ $mild-dimension-9-11: 81.818182% !default;
140
+ $mild-dimension-10-11: 90.909091% !default;
141
+ $mild-dimension-1-12: 8.333333% !default;
142
+ $mild-dimension-5-12: 41.666667% !default;
143
+ $mild-dimension-7-12: 58.333333% !default;
144
+ $mild-dimension-11-12: 91.666667% !default;
145
+ $mild-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
146
+ $mild-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.1) !default;
147
+ $mild-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !default;
148
+ $mild-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !default;
149
+ $mild-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !default;
150
+ $mild-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !default;
151
+ $mild-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !default;
152
+ $mild-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !default;
153
+ $mild-shadow-none: none !default;
154
+ $mild-radius-none: 0px !default;
155
+ $mild-radius-sm: 0.125rem !default;
156
+ $mild-radius-base: 0.25rem !default;
157
+ $mild-radius-md: 0.375rem !default;
158
+ $mild-radius-lg: 0.5rem !default;
159
+ $mild-radius-xl: 0.75rem !default;
160
+ $mild-radius-2xl: 1rem !default;
161
+ $mild-radius-3xl: 1.5rem !default;
162
+ $mild-radius-full: 9999px !default;
163
+ $mild-space-base: 0.25rem !default; // Base spacing unit (4px). Source: $mild-spacing-base.
164
+ $mild-space-0: 0px !default;
165
+ $mild-space-1: 0.25rem !default;
166
+ $mild-space-2: 0.5rem !default;
167
+ $mild-space-3: 0.75rem !default;
168
+ $mild-space-4: 1rem !default;
169
+ $mild-space-5: 1.25rem !default;
170
+ $mild-space-6: 1.5rem !default;
171
+ $mild-space-7: 1.75rem !default;
172
+ $mild-space-8: 2rem !default;
173
+ $mild-space-9: 2.25rem !default;
174
+ $mild-space-10: 2.5rem !default;
175
+ $mild-space-11: 2.75rem !default;
176
+ $mild-space-12: 3rem !default;
177
+ $mild-space-14: 3.5rem !default;
178
+ $mild-space-16: 4rem !default;
179
+ $mild-space-20: 5rem !default;
180
+ $mild-space-24: 6rem !default;
181
+ $mild-space-28: 7rem !default;
182
+ $mild-space-32: 8rem !default;
183
+ $mild-space-36: 9rem !default;
184
+ $mild-space-40: 10rem !default;
185
+ $mild-space-44: 11rem !default;
186
+ $mild-space-48: 12rem !default;
187
+ $mild-space-52: 13rem !default;
188
+ $mild-space-56: 14rem !default;
189
+ $mild-space-60: 15rem !default;
190
+ $mild-space-64: 16rem !default;
191
+ $mild-space-72: 18rem !default;
192
+ $mild-space-80: 20rem !default;
193
+ $mild-space-96: 24rem !default;
194
+ $mild-space-px: 1px !default;
195
+ $mild-space-0-5: 0.125rem !default;
196
+ $mild-space-1-5: 0.375rem !default;
197
+ $mild-space-2-5: 0.625rem !default;
198
+ $mild-space-3-5: 0.875rem !default;
199
+ $mild-font-family-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
200
+ $mild-font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif !default;
201
+ $mild-font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', source-code-pro, Menlo, Consolas, 'DejaVu Sans Mono', monospace !default;
202
+ $mild-font-size-xs: 0.75rem !default;
203
+ $mild-font-size-sm: 0.875rem !default;
204
+ $mild-font-size-base: 1rem !default;
205
+ $mild-font-size-lg: 1.125rem !default;
206
+ $mild-font-size-xl: 1.25rem !default;
207
+ $mild-font-size-2xl: 1.5rem !default;
208
+ $mild-font-size-3xl: 1.875rem !default;
209
+ $mild-font-size-4xl: 2.25rem !default;
210
+ $mild-font-size-5xl: 3rem !default;
211
+ $mild-font-size-6xl: 3.75rem !default;
212
+ $mild-font-size-7xl: 4.5rem !default;
213
+ $mild-font-size-8xl: 6rem !default;
214
+ $mild-font-size-9xl: 8rem !default;
215
+ $mild-font-weight-thin: 100 !default;
216
+ $mild-font-weight-extralight: 200 !default;
217
+ $mild-font-weight-light: 300 !default;
218
+ $mild-font-weight-normal: 400 !default;
219
+ $mild-font-weight-medium: 500 !default;
220
+ $mild-font-weight-semibold: 600 !default;
221
+ $mild-font-weight-bold: 700 !default;
222
+ $mild-font-weight-extrabold: 800 !default;
223
+ $mild-font-weight-black: 900 !default;
224
+ $mild-line-height-none: 1 !default;
225
+ $mild-line-height-tight: 1.25 !default;
226
+ $mild-line-height-snug: 1.375 !default;
227
+ $mild-line-height-normal: 1.5 !default;
228
+ $mild-line-height-relaxed: 1.625 !default;
229
+ $mild-line-height-loose: 2 !default;
230
+ $mild-letter-spacing-tighter: -0.05em !default;
231
+ $mild-letter-spacing-tight: -0.025em !default;
232
+ $mild-letter-spacing-normal: 0em !default;
233
+ $mild-letter-spacing-wide: 0.025em !default;
234
+ $mild-letter-spacing-wider: 0.05em !default;
235
+ $mild-letter-spacing-widest: 0.1em !default;
236
+ $mild-transition-none: none !default;
237
+ $mild-color-primary-50: $mild-color-blue-50 !default;
238
+ $mild-color-primary-100: $mild-color-blue-100 !default;
239
+ $mild-color-primary-200: $mild-color-blue-200 !default;
240
+ $mild-color-primary-300: $mild-color-blue-300 !default;
241
+ $mild-color-primary-400: $mild-color-blue-400 !default;
242
+ $mild-color-primary-500: $mild-color-blue-500 !default;
243
+ $mild-color-primary-600: $mild-color-blue-600 !default;
244
+ $mild-color-primary-700: $mild-color-blue-700 !default;
245
+ $mild-color-primary-800: $mild-color-blue-800 !default;
246
+ $mild-color-primary-900: $mild-color-blue-900 !default;
247
+ $mild-color-primary-950: $mild-color-blue-950 !default;
248
+ $mild-color-secondary-50: $mild-color-gray-50 !default;
249
+ $mild-color-secondary-100: $mild-color-gray-100 !default;
250
+ $mild-color-secondary-200: $mild-color-gray-200 !default;
251
+ $mild-color-secondary-300: $mild-color-gray-300 !default;
252
+ $mild-color-secondary-400: $mild-color-gray-400 !default;
253
+ $mild-color-secondary-500: $mild-color-gray-500 !default;
254
+ $mild-color-secondary-600: $mild-color-gray-600 !default;
255
+ $mild-color-secondary-700: $mild-color-gray-700 !default;
256
+ $mild-color-secondary-800: $mild-color-gray-800 !default;
257
+ $mild-color-secondary-900: $mild-color-gray-900 !default;
258
+ $mild-color-secondary-950: $mild-color-gray-950 !default;
259
+ $mild-color-success-50: $mild-color-green-50 !default;
260
+ $mild-color-success-100: $mild-color-green-100 !default;
261
+ $mild-color-success-200: $mild-color-green-200 !default;
262
+ $mild-color-success-300: $mild-color-green-300 !default;
263
+ $mild-color-success-400: $mild-color-green-400 !default;
264
+ $mild-color-success-500: $mild-color-green-500 !default;
265
+ $mild-color-success-600: $mild-color-green-600 !default;
266
+ $mild-color-success-700: $mild-color-green-700 !default;
267
+ $mild-color-success-800: $mild-color-green-800 !default;
268
+ $mild-color-success-900: $mild-color-green-900 !default;
269
+ $mild-color-success-950: $mild-color-green-950 !default;
270
+ $mild-color-warning-50: $mild-color-yellow-50 !default;
271
+ $mild-color-warning-100: $mild-color-yellow-100 !default;
272
+ $mild-color-warning-200: $mild-color-yellow-200 !default;
273
+ $mild-color-warning-300: $mild-color-yellow-300 !default;
274
+ $mild-color-warning-400: $mild-color-yellow-400 !default;
275
+ $mild-color-warning-500: $mild-color-yellow-500 !default;
276
+ $mild-color-warning-600: $mild-color-yellow-600 !default;
277
+ $mild-color-warning-700: $mild-color-yellow-700 !default;
278
+ $mild-color-warning-800: $mild-color-yellow-800 !default;
279
+ $mild-color-warning-900: $mild-color-yellow-900 !default;
280
+ $mild-color-warning-950: $mild-color-yellow-950 !default;
281
+ $mild-color-danger-50: $mild-color-red-50 !default;
282
+ $mild-color-danger-100: $mild-color-red-100 !default;
283
+ $mild-color-danger-200: $mild-color-red-200 !default;
284
+ $mild-color-danger-300: $mild-color-red-300 !default;
285
+ $mild-color-danger-400: $mild-color-red-400 !default;
286
+ $mild-color-danger-500: $mild-color-red-500 !default;
287
+ $mild-color-danger-600: $mild-color-red-600 !default;
288
+ $mild-color-danger-700: $mild-color-red-700 !default;
289
+ $mild-color-danger-800: $mild-color-red-800 !default;
290
+ $mild-color-danger-900: $mild-color-red-900 !default;
291
+ $mild-color-danger-950: $mild-color-red-950 !default;
292
+ $mild-color-error-50: $mild-color-red-50 !default;
293
+ $mild-color-error-100: $mild-color-red-100 !default;
294
+ $mild-color-error-200: $mild-color-red-200 !default;
295
+ $mild-color-error-300: $mild-color-red-300 !default;
296
+ $mild-color-error-400: $mild-color-red-400 !default;
297
+ $mild-color-error-500: $mild-color-red-500 !default;
298
+ $mild-color-error-600: $mild-color-red-600 !default;
299
+ $mild-color-error-700: $mild-color-red-700 !default;
300
+ $mild-color-error-800: $mild-color-red-800 !default;
301
+ $mild-color-error-900: $mild-color-red-900 !default;
302
+ $mild-color-error-950: $mild-color-red-950 !default;
303
+ $mild-color-accent-foreground: $mild-color-white !default; // Text and icons on top of the accent. Source: the :root block of packages/core/src/sass/index.scss.
304
+ $mild-transition-all: all $mild-duration-150 $mild-easing-in-out !default;
305
+ $mild-transition-default: all $mild-duration-150 $mild-easing-in-out !default;
306
+ $mild-transition-colors: color $mild-duration-150 $mild-easing-in-out !default;
307
+ $mild-transition-opacity: opacity $mild-duration-150 $mild-easing-in-out !default;
308
+ $mild-transition-shadow: box-shadow $mild-duration-150 $mild-easing-in-out !default;
309
+ $mild-transition-transform: transform $mild-duration-150 $mild-easing-in-out !default;
310
+ $mild-color-accent: $mild-color-primary-500 !default; // The brand color behind primary buttons, checked controls, focus rings and active tabs. Override this (and the shades below) to re-theme. Source: the :root block of packages/core/src/sass/index.scss.
311
+ $mild-color-accent-hover: $mild-color-primary-600 !default; // Accent on hover. Source: the :root block of packages/core/src/sass/index.scss.
312
+ $mild-color-accent-active: $mild-color-primary-700 !default; // Accent while pressed. Source: the :root block of packages/core/src/sass/index.scss.
313
+ $mild-color-accent-soft: $mild-color-primary-300 !default; // Accent-tinted borders, e.g. hover on a checkbox. Source: the :root block of packages/core/src/sass/index.scss.
314
+ $mild-color-accent-subtle: $mild-color-primary-50 !default; // Accent-tinted backgrounds, e.g. hover on a ghost button. Source: the :root block of packages/core/src/sass/index.scss.
315
+ $mild-color-accent-muted: $mild-color-primary-100 !default; // Stronger accent-tinted backgrounds, e.g. a pressed ghost button. Source: the :root block of packages/core/src/sass/index.scss.