@grantcodes/style-dictionary 1.3.0 → 1.3.1

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 (78) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/css/grantcodes/grantcodes.css +367 -0
  3. package/dist/css/grantcodes/tokens.css +367 -0
  4. package/dist/css/todomap/todomap.css +200 -0
  5. package/dist/css/todomap/tokens.css +200 -0
  6. package/dist/css/wireframe/tokens.css +426 -0
  7. package/dist/css/wireframe/wireframe.css +426 -0
  8. package/dist/js/grantcodes/style-dictionary.d.ts +361 -0
  9. package/dist/js/grantcodes/style-dictionary.js +386 -0
  10. package/dist/js/todomap/style-dictionary.d.ts +202 -0
  11. package/dist/js/todomap/style-dictionary.js +220 -0
  12. package/dist/js/wireframe/style-dictionary.d.ts +414 -0
  13. package/dist/js/wireframe/style-dictionary.js +427 -0
  14. package/dist/json/grantcodes/tokens.json +351 -0
  15. package/dist/json/todomap/tokens.json +200 -0
  16. package/dist/json/wireframe/tokens.json +404 -0
  17. package/package.json +66 -61
  18. package/.turbo/turbo-build.log +0 -45
  19. package/.turbo/turbo-lint.log +0 -10
  20. package/AGENTS.md +0 -67
  21. package/biome.json +0 -9
  22. package/build.js +0 -10
  23. package/config.js +0 -509
  24. package/demo.html +0 -171
  25. package/lib/color-generator.js +0 -13
  26. package/lib/get-style-dictionary-config.js +0 -223
  27. package/lib/get-themes.js +0 -10
  28. package/lib/index.js +0 -3
  29. package/tests/tokens.test.js +0 -87
  30. package/tokens/core/tier-1-definitions/colors.json +0 -174
  31. package/tokens/core/tier-1-definitions/z-index.json +0 -28
  32. package/tokens/grantcodes/tier-1-definitions/animation.json +0 -26
  33. package/tokens/grantcodes/tier-1-definitions/borders.json +0 -35
  34. package/tokens/grantcodes/tier-1-definitions/colors.json +0 -35
  35. package/tokens/grantcodes/tier-1-definitions/shadows.json +0 -38
  36. package/tokens/grantcodes/tier-1-definitions/spacing.json +0 -49
  37. package/tokens/grantcodes/tier-1-definitions/typography.json +0 -142
  38. package/tokens/grantcodes/tier-2-usage/00-colors-background.json +0 -71
  39. package/tokens/grantcodes/tier-2-usage/00-colors-border.json +0 -41
  40. package/tokens/grantcodes/tier-2-usage/00-colors-content.json +0 -44
  41. package/tokens/grantcodes/tier-2-usage/animation.json +0 -23
  42. package/tokens/grantcodes/tier-2-usage/borders.json +0 -26
  43. package/tokens/grantcodes/tier-2-usage/shadows.json +0 -38
  44. package/tokens/grantcodes/tier-2-usage/spacing.json +0 -25
  45. package/tokens/grantcodes/tier-2-usage/typography-usage.json +0 -276
  46. package/tokens/grantcodes/tier-3-components/button.json +0 -94
  47. package/tokens/grantcodes/tier-3-components/focus-ring.json +0 -25
  48. package/tokens/grantcodes/tier-3-components/form.json +0 -69
  49. package/tokens/grantcodes/tier-3-components/link.json +0 -38
  50. package/tokens/todomap/tier-1-definitions/colors.json +0 -91
  51. package/tokens/todomap/tier-1-definitions/spacing.json +0 -49
  52. package/tokens/todomap/tier-1-definitions/typography.json +0 -12
  53. package/tokens/todomap/tier-2-usage/00-colors-background.json +0 -35
  54. package/tokens/todomap/tier-2-usage/00-colors-content.json +0 -32
  55. package/tokens/todomap/tier-2-usage/spacing.json +0 -25
  56. package/tokens/todomap/tier-2-usage/typography-usage.json +0 -20
  57. package/tokens/todomap/tier-3-components/button.json +0 -140
  58. package/tokens/todomap/tier-3-components/focus-ring.json +0 -25
  59. package/tokens/todomap/tier-3-components/form.json +0 -69
  60. package/tokens/todomap/tier-3-components/link.json +0 -38
  61. package/tokens/wireframe/tier-1-definitions/animation.json +0 -17
  62. package/tokens/wireframe/tier-1-definitions/borders.json +0 -41
  63. package/tokens/wireframe/tier-1-definitions/colors.json +0 -35
  64. package/tokens/wireframe/tier-1-definitions/shadows.json +0 -38
  65. package/tokens/wireframe/tier-1-definitions/spacing.json +0 -49
  66. package/tokens/wireframe/tier-1-definitions/typography.json +0 -130
  67. package/tokens/wireframe/tier-2-usage/00-colors-background.json +0 -85
  68. package/tokens/wireframe/tier-2-usage/00-colors-border.json +0 -41
  69. package/tokens/wireframe/tier-2-usage/00-colors-content.json +0 -44
  70. package/tokens/wireframe/tier-2-usage/animation.json +0 -23
  71. package/tokens/wireframe/tier-2-usage/borders.json +0 -32
  72. package/tokens/wireframe/tier-2-usage/shadows.json +0 -38
  73. package/tokens/wireframe/tier-2-usage/spacing.json +0 -25
  74. package/tokens/wireframe/tier-2-usage/typography-usage.json +0 -444
  75. package/tokens/wireframe/tier-3-components/button.json +0 -94
  76. package/tokens/wireframe/tier-3-components/focus-ring.json +0 -25
  77. package/tokens/wireframe/tier-3-components/form.json +0 -69
  78. package/tokens/wireframe/tier-3-components/link.json +0 -38
package/demo.html DELETED
@@ -1,171 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Style Dictionary Demo</title>
7
- <link rel="stylesheet" href="./dist/css/grantcodes/tokens.css" />
8
- <style>
9
- .color {
10
- display: flex;
11
- align-items: center;
12
- justify-content: center;
13
- padding: 1rem;
14
- min-height: 12rem;
15
- }
16
- </style>
17
- </head>
18
- <body>
19
- <h1>Style Dictionary Demo</h1>
20
- <p>This is a demo of the Style Dictionary design tokens.</p>
21
-
22
- <h2>Colors</h2>
23
- <span
24
- class="color"
25
- style="
26
- background-color: var(--g-theme-color-background-default);
27
- color: var(--g-theme-color-content-default);
28
- "
29
- >Default</span
30
- >
31
- <span
32
- class="color"
33
- style="
34
- background-color: var(--g-theme-color-background-default-hover);
35
- color: var(--g-theme-color-content-default-hover);
36
- "
37
- >Default Hover</span
38
- >
39
- <span
40
- class="color"
41
- style="
42
- background-color: var(--g-theme-color-background-subtle);
43
- color: var(--g-theme-color-content-subtle);
44
- "
45
- >Subtle</span
46
- >
47
- <span
48
- class="color"
49
- style="
50
- background-color: var(--g-theme-color-background-subtle-hover);
51
- color: var(--g-theme-color-content-subtle-hover);
52
- "
53
- >Subtle Hover</span
54
- >
55
- <span
56
- class="color"
57
- style="
58
- background-color: var(--g-theme-color-background-knockout);
59
- color: var(--g-theme-color-content-knockout);
60
- "
61
- >Knockout</span
62
- >
63
- <span
64
- class="color"
65
- style="
66
- background-color: var(--g-theme-color-background-brand);
67
- color: var(--g-theme-color-content-brand);
68
- "
69
- >Brand</span
70
- >
71
- <span
72
- class="color"
73
- style="
74
- background-color: var(--g-theme-color-background-brand-hover);
75
- color: var(--g-theme-color-content-brand-hover);
76
- "
77
- >Brand Hover</span
78
- >
79
- <span
80
- class="color"
81
- style="
82
- background-color: var(--g-theme-color-background-brand-knockout);
83
- color: var(--g-theme-color-content-brand-knockout);
84
- "
85
- >Brand Knockout</span
86
- >
87
- <span
88
- class="color"
89
- style="
90
- background-color: var(--g-theme-color-background-brand-knockout-hover);
91
- color: var(--g-theme-color-content-brand-knockout-hover);
92
- "
93
- >Brand Knockout Hover</span
94
- >
95
- <span
96
- class="color"
97
- style="
98
- background-color: var(--g-theme-color-background-utility-error);
99
- color: var(--g-theme-color-content-utility-error);
100
- "
101
- >Utility Error</span
102
- >
103
- <span
104
- class="color"
105
- style="
106
- background-color: var(--g-theme-color-background-utility-warning);
107
- color: var(--g-theme-color-content-utility-warning);
108
- "
109
- >Utility Warning</span
110
- >
111
- <span
112
- class="color"
113
- style="
114
- background-color: var(--g-theme-color-background-utility-success);
115
- color: var(--g-theme-color-content-utility-success);
116
- "
117
- >Utility Success</span
118
- >
119
- <span
120
- class="color"
121
- style="
122
- background-color: var(--g-theme-color-background-utility-info);
123
- color: var(--g-theme-color-content-utility-info);
124
- "
125
- >Utility Info</span
126
- >
127
- <span
128
- class="color"
129
- style="
130
- background-color: var(--g-theme-color-background-disabled);
131
- color: var(--g-theme-color-content-disabled);
132
- "
133
- >Disabled</span
134
- >
135
- <span
136
- class="color"
137
- style="
138
- background-color: var(--g-theme-color-background-transparent);
139
- color: var(--g-theme-color-content-transparent);
140
- "
141
- >Transparent</span
142
- >
143
- <span
144
- class="color"
145
- style="
146
- background-color: var(--g-theme-color-background-transparent-strong);
147
- color: var(--g-theme-color-content-transparent-strong);
148
- "
149
- >Transparent Strong</span
150
- >
151
-
152
- <h2>Typography</h2>
153
- <p style="font: var(--g-theme-typography-display-default)">
154
- Display Default
155
- </p>
156
- <p style="font: var(--g-theme-typography-display-sm)">Display Small</p>
157
- <p style="font: var(--g-theme-typography-headline-lg)">Headline Large</p>
158
- <p style="font: var(--g-theme-typography-headline-default)">
159
- Headline Default
160
- </p>
161
- <p style="font: var(--g-theme-typography-headline-sm)">Headline Small</p>
162
- <p style="font: var(--g-theme-typography-title-lg)">Title Large</p>
163
- <p style="font: var(--g-theme-typography-title-default)">Title Default</p>
164
- <p style="font: var(--g-theme-typography-title-sm)">Title Small</p>
165
- <p style="font: var(--g-theme-typography-label-lg)">Label Large</p>
166
- <p style="font: var(--g-theme-typography-label-default)">Label Default</p>
167
- <p style="font: var(--g-theme-typography-label-sm)">Label Small</p>
168
- <p style="font: var(--g-theme-typography-body-lg)">Body Large</p>
169
- <p style="font: var(--g-theme-typography-body-default)">Body Default</p>
170
- </body>
171
- </html>
package/lib/color-generator.js DELETED
@@ -1,13 +0,0 @@
1
- /**
2
- * Get a scale of lightness values
3
- * @param {number} min - The minimum lightness value
4
- * @param {number} max - The maximum lightness value
5
- * @param {number} steps - The number of steps in the scale
6
- * @returns {number[]} - The lightness steps
7
- */
8
- const getLightnessScale = (min = 26, max = 97, steps = 9) => {
9
- const step = (max - min) / steps;
10
- return Array.from({ length: steps }, (_, i) => Math.round(min + step * i));
11
- };
12
-
13
- export { getLightnessScale };
package/lib/get-style-dictionary-config.js DELETED
@@ -1,223 +0,0 @@
1
- import { join } from "node:path";
2
- import { SYSTEM } from "../config.js";
3
-
4
- console.log("get style dictionary config");
5
-
6
- /**
7
- * Get a style dictionary config for the given brand.
8
- *
9
- * @param {string} brand The brand folder name
10
- *
11
- * @return {import("style-dictionary").Config} The style dictionary config
12
- */
13
- const getStyleDictionaryConfig = (theme) => ({
14
- source: [
15
- join(import.meta.dirname, "../tokens/core/tier-1-definitions/**/*.js"),
16
- // join(import.meta.dirname, "../tokens/tier-2-usage/**/*.js"),
17
- // join(import.meta.dirname, "../tokens/tier-3-components/**/*.js"),
18
- join(
19
- import.meta.dirname,
20
- `../tokens/themes/${theme}/tier-1-definitions/**/*.js`,
21
- ),
22
- join(import.meta.dirname, `../tokens/themes/${theme}/tier-2-usage/**/*.js`),
23
- join(
24
- import.meta.dirname,
25
- `../tokens/themes/${theme}/tier-3-components/**/*.js`,
26
- ),
27
- ],
28
- log: {
29
- verbosity: "verbose",
30
- },
31
- platforms: {
32
- css: {
33
- transformGroup: "css",
34
- buildPath: `dist/css/${theme}/`,
35
- prefix: SYSTEM,
36
- files: [
37
- {
38
- destination: "style-dictionary.css",
39
- format: "css/variables",
40
- options: {
41
- outputReferences: true,
42
- },
43
- },
44
- // {
45
- // destination: 'fonts.css',
46
- // format: 'css/fonts.css',
47
- // options: {
48
- // outputReferences: true,
49
- // },
50
- // },
51
- ],
52
- },
53
- scss: {
54
- transformGroup: "scss",
55
- buildPath: `dist/scss/${theme}/`,
56
- prefix: SYSTEM,
57
- files: [
58
- {
59
- destination: "_style-dictionary.scss",
60
- format: "css/variables",
61
- options: {
62
- outputReferences: true,
63
- selector: "@mixin css-variables",
64
- },
65
- },
66
- // {
67
- // destination: '_fonts.scss',
68
- // format: 'css/fonts.css',
69
- // options: {
70
- // outputReferences: true,
71
- // },
72
- // },
73
- ],
74
- },
75
- js: {
76
- transformGroup: "js",
77
- buildPath: `dist/js/${theme}/`,
78
- prefix: SYSTEM,
79
- files: [
80
- {
81
- format: "javascript/es6",
82
- destination: "style-dictionary.js",
83
- },
84
- ],
85
- },
86
- // android: {
87
- // transformGroup: 'android',
88
- // buildPath: `dist/android/${theme}/`,
89
- // files: [
90
- // {
91
- // destination: 'font_dimens.xml',
92
- // format: 'android/fontDimens',
93
- // },
94
- // {
95
- // destination: 'colors.xml',
96
- // format: 'android/colors',
97
- // },
98
- // ],
99
- // },
100
- // compose: {
101
- // transformGroup: 'compose',
102
- // buildPath: `dist/compose/${theme}/`,
103
- // files: [
104
- // {
105
- // destination: 'StyleDictionaryColor.kt',
106
- // format: 'compose/object',
107
- // className: 'StyleDictionaryColor',
108
- // packageName: 'StyleDictionaryColor',
109
- // filter: {
110
- // attributes: {
111
- // category: 'color',
112
- // },
113
- // },
114
- // },
115
- // {
116
- // destination: 'StyleDictionarySize.kt',
117
- // format: 'compose/object',
118
- // className: 'StyleDictionarySize',
119
- // packageName: 'StyleDictionarySize',
120
- // type: 'float',
121
- // filter: {
122
- // attributes: {
123
- // category: 'size',
124
- // },
125
- // },
126
- // },
127
- // ],
128
- // },
129
- // ios: {
130
- // transformGroup: 'ios',
131
- // buildPath: `dist/ios/${theme}/`,
132
- // files: [
133
- // {
134
- // destination: 'StyleDictionaryColor.h',
135
- // format: 'ios/colors.h',
136
- // className: 'StyleDictionaryColor',
137
- // type: 'StyleDictionaryColorName',
138
- // filter: {
139
- // attributes: {
140
- // category: 'color',
141
- // },
142
- // },
143
- // },
144
- // {
145
- // destination: 'StyleDictionaryColor.m',
146
- // format: 'ios/colors.m',
147
- // className: 'StyleDictionaryColor',
148
- // type: 'StyleDictionaryColorName',
149
- // filter: {
150
- // attributes: {
151
- // category: 'color',
152
- // },
153
- // },
154
- // },
155
- // {getStyleDictionaryConfig
156
- // destination: 'StyleDictionarySize.h',
157
- // format: 'ios/static.h',
158
- // className: 'StyleDictionarySize',
159
- // type: 'float',
160
- // filter: {
161
- // attributes: {
162
- // category: 'size',
163
- // },
164
- // },
165
- // },
166
- // {
167
- // destination: 'StyleDictionarySize.m',
168
- // format: 'ios/static.m',
169
- // className: 'StyleDictionarySize',
170
- // type: 'float',
171
- // filter: {
172
- // attributes: {
173
- // category: 'size',
174
- // },
175
- // },
176
- // },
177
- // ],
178
- // },
179
- // 'ios-swift': {
180
- // transformGroup: 'ios-swift',
181
- // buildPath: `dist/ios-swift/${theme}/`,
182
- // files: [
183
- // {
184
- // destination: 'StyleDictionary.swift',
185
- // format: 'ios-swift/class.swift',
186
- // className: 'StyleDictionary',
187
- // filter: {},
188
- // },
189
- // ],
190
- // },
191
- // 'ios-swift-separate-enums': {
192
- // transformGroup: 'ios-swift-separate',
193
- // buildPath: `dist/ios-swift/${theme}/`,
194
- // files: [
195
- // {
196
- // destination: 'StyleDictionaryColor.swift',
197
- // format: 'ios-swift/enum.swift',
198
- // className: 'StyleDictionaryColor',
199
- // filter: {
200
- // attributes: {
201
- // category: 'color',
202
- // },
203
- // },
204
- // },
205
- // {
206
- // destination: 'StyleDictionarySize.swift',
207
- // format: 'ios-swift/enum.swift',
208
- // className: 'StyleDictionarySize',
209
- // type: 'float',
210
- // filter: {
211
- // attributes: {
212
- // category: 'size',
213
- // },
214
- // },
215
- // },
216
- // ],
217
- // },
218
- },
219
- });
220
-
221
- console.log("get style dictionary config");
222
-
223
- export { getStyleDictionaryConfig };
package/lib/get-themes.js DELETED
@@ -1,10 +0,0 @@
1
- import { readdirSync } from "node:fs";
2
-
3
- /**
4
- * Helper functions to get a list of supported brands.
5
- *
6
- * @return {string[]} List of brands found in the tokens/brands folder
7
- */
8
- const getThemes = () => readdirSync("./tokens/themes");
9
-
10
- export { getThemes };
package/lib/index.js DELETED
@@ -1,3 +0,0 @@
1
- export * from "./color-generator.js";
2
- export * from "./get-themes.js";
3
- export * from "./get-style-dictionary-config.js";
package/tests/tokens.test.js DELETED
@@ -1,87 +0,0 @@
1
- import { describe, it } from "node:test";
2
- import test from "node:test";
3
- import assert from "node:assert";
4
- import StyleDictionaryPackage from "style-dictionary";
5
-
6
- import { TOKEN_TREE } from "../config.js";
7
- import { getThemes, getStyleDictionaryConfig } from "../lib/index.js";
8
-
9
- const getTokens = async () => {
10
- const themes = getThemes();
11
-
12
- const tokens = {};
13
-
14
- for (const brand of brands) {
15
- const config = getStyleDictionaryConfig(brand);
16
- const dictionary = new StyleDictionaryPackage(config);
17
- const brandTokens = await dictionary.getPlatformTokens("css");
18
-
19
- tokens[brand] = brandTokens.allTokens;
20
- }
21
-
22
- return tokens;
23
- };
24
-
25
- const tokens = await getTokens();
26
-
27
- describe("Token formatting", () => {
28
- it("Should have multiple tokens", () => {
29
- for (const brandTokens of Object.values(tokens)) {
30
- assert.ok(Object.keys(brandTokens).length > 1);
31
- }
32
- });
33
-
34
- it("Should be prefixed", () => {
35
- if (SYSTEM) {
36
- for (const brandTokens of Object.values(tokens)) {
37
- const tokenNames = brandTokens.map((token) => token.name);
38
- for (const tokenName of tokenNames) {
39
- assert.ok(tokenName.startsWith(`${SYSTEM}-`));
40
- }
41
- }
42
- }
43
- });
44
-
45
- it("Should have a category", () => {
46
- for (const brandTokens of Object.values(tokens)) {
47
- for (const token of brandTokens) {
48
- assert.ok(
49
- TOKEN_LEVELS.category.includes(token?.attributes?.category),
50
- `The token ${token.name} has the category ${token?.attributes?.category} which is not in the defined categories (${TOKEN_LEVELS.category.join(", ")}).`,
51
- );
52
- }
53
- }
54
- });
55
-
56
- it("Should have a valid css value", () => {
57
- for (const brandTokens of Object.values(tokens)) {
58
- for (const token of brandTokens) {
59
- const tokenType = typeof token.value;
60
-
61
- assert.ok(
62
- ["string", "number"].includes(tokenType),
63
- `The token ${token.name} has an invalid type (${tokenType}).`,
64
- );
65
- }
66
- }
67
- });
68
-
69
- // it("Should have valid references", () => {
70
- // for (const brandTokens of Object.values(tokens)) {
71
- // for (const token of brandTokens) {
72
- // if (token?.original?.value?.includes?.("{")) {
73
- // const references = token.original.value
74
- // .replace(/{/g, "")
75
- // .replace(/}/g, "")
76
- // .trim()
77
- // .split(", ");
78
- // console.log(reference);
79
- // // assert.ok(
80
- // // brandTokens.find((t) => t.name === token.attributes.reference),
81
- // // `The token ${token.name} references a token that does not exist (${token.attributes.reference}).`,
82
- // // );
83
- // }
84
- // }
85
- // }
86
- // });
87
- });
package/tokens/core/tier-1-definitions/colors.json DELETED
@@ -1,174 +0,0 @@
1
- {
2
- "color": {
3
- "neutral": {
4
- "white": {
5
- "value": "oklch(100% 0 0)"
6
- },
7
- "100": {
8
- "value": "oklch(95% 0 0)"
9
- },
10
- "200": {
11
- "value": "oklch(90% 0 0)"
12
- },
13
- "300": {
14
- "value": "oklch(80% 0 0)"
15
- },
16
- "400": {
17
- "value": "oklch(70% 0 0)"
18
- },
19
- "500": {
20
- "value": "oklch(60% 0 0)"
21
- },
22
- "600": {
23
- "value": "oklch(50% 0 0)"
24
- },
25
- "700": {
26
- "value": "oklch(40% 0 0)"
27
- },
28
- "800": {
29
- "value": "oklch(30% 0 0)"
30
- },
31
- "900": {
32
- "value": "oklch(20% 0 0)"
33
- },
34
- "black": {
35
- "value": "oklch(0% 0 0)"
36
- }
37
- },
38
- "utility": {
39
- "green": {
40
- "100": {
41
- "value": "oklch(96.73% 0.0537 129.1)"
42
- },
43
- "200": {
44
- "value": "oklch(93.45% 0.107 131.96)"
45
- },
46
- "300": {
47
- "value": "oklch(87.97% 0.1546 135.05)"
48
- },
49
- "400": {
50
- "value": "oklch(81.78% 0.1827 137.62)"
51
- },
52
- "500": {
53
- "value": "oklch(74.01% 0.2132 139.87)"
54
- },
55
- "600": {
56
- "value": "oklch(65.44% 0.1981 141.12)"
57
- },
58
- "700": {
59
- "value": "oklch(57.11% 0.1795 142.12)"
60
- },
61
- "800": {
62
- "value": "oklch(48.67% 0.1572 142.68)"
63
- },
64
- "900": {
65
- "value": "oklch(42.59% 0.1358 143.3)"
66
- }
67
- },
68
- "blue": {
69
- "100": {
70
- "value": "oklch(95.86% 0.0542 179.13)"
71
- },
72
- "200": {
73
- "value": "oklch(92.82% 0.0973 184.41)"
74
- },
75
- "300": {
76
- "value": "oklch(90.54% 0.1282 189.63)"
77
- },
78
- "500": {
79
- "value": "oklch(81.86% 0.141005 208.7047)"
80
- },
81
- "600": {
82
- "value": "oklch(68.89% 0.125872 220.4932)"
83
- },
84
- "700": {
85
- "value": "oklch(56.7% 0.116289 232.4331)"
86
- },
87
- "800": {
88
- "value": "oklch(45.75% 0.107158 241.2805)"
89
- },
90
- "900": {
91
- "value": "oklch(37.55% 0.1037 249.04)"
92
- }
93
- },
94
- "yellow": {
95
- "100": {
96
- "value": "oklch(97.66% 0.0606 103.43)"
97
- },
98
- "200": {
99
- "value": "oklch(95.72% 0.1147 103.53)"
100
- },
101
- "300": {
102
- "value": "oklch(93.47% 0.1552 102.21)"
103
- },
104
- "400": {
105
- "value": "oklch(91.68% 0.1745 101.08)"
106
- },
107
- "500": {
108
- "value": "oklch(88.99% 0.183778 97.6996)"
109
- },
110
- "600": {
111
- "value": "oklch(78.68% 0.162 96.43)"
112
- },
113
- "700": {
114
- "value": "oklch(68.35% 0.14027 94.7302)"
115
- },
116
- "800": {
117
- "value": "oklch(58.04% 0.1189 93.71)"
118
- },
119
- "900": {
120
- "value": "oklch(50.09% 0.1025 92.6)"
121
- }
122
- },
123
- "red": {
124
- "100": {
125
- "value": "oklch(94.96% 0.0395 73.45)"
126
- },
127
- "200": {
128
- "value": "oklch(89.21% 0.076552 65.9429)"
129
- },
130
- "300": {
131
- "value": "oklch(82.67% 0.1156 57.65)"
132
- },
133
- "400": {
134
- "value": "oklch(77.04% 0.1486 49.15)"
135
- },
136
- "500": {
137
- "value": "oklch(69.31% 0.203172 39.994)"
138
- },
139
- "600": {
140
- "value": "oklch(60.03% 0.1938 35.81)"
141
- },
142
- "700": {
143
- "value": "oklch(51.18% 0.1802 32.56)"
144
- },
145
- "800": {
146
- "value": "oklch(42.79% 0.16 30.38)"
147
- },
148
- "900": {
149
- "value": "oklch(36.89% 0.1443 28.98)"
150
- }
151
- }
152
- },
153
- "transparent": {
154
- "0": {
155
- "value": "oklch(100% 0 0 / 0)"
156
- },
157
- "10": {
158
- "value": "oklch(100% 0 0 / 0.1)"
159
- },
160
- "25": {
161
- "value": "oklch(100% 0 0 / 0.25)"
162
- },
163
- "50": {
164
- "value": "oklch(100% 0 0 / 0.5)"
165
- },
166
- "75": {
167
- "value": "oklch(100% 0 0 / 0.75)"
168
- },
169
- "90": {
170
- "value": "oklch(100% 0 0 / 0.9)"
171
- }
172
- }
173
- }
174
- }