@medyll/cssfabric 0.2.1-beta.5 → 0.2.1-beta.6

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 (47) hide show
  1. package/README.md +42 -34
  2. package/dist/fabric/CssFabric.d.ts +46 -0
  3. package/dist/{cssFabric → fabric}/CssFabric.js +26 -0
  4. package/dist/{cssFabric → fabric}/CssFabricBuilder.js +1 -0
  5. package/dist/{cssFabric → fabric}/CssFabricExport.d.ts +1 -0
  6. package/dist/{cssFabric → fabric}/CssFabricExport.js +24 -2
  7. package/dist/fabric/bin/exports.js +13 -0
  8. package/dist/fabric/css/css-fabric-sheet.css +15366 -0
  9. package/dist/fabric/css/css-fabric-vars-colors.css +387 -0
  10. package/dist/fabric/css/cssFabric-sheet.json +1 -0
  11. package/dist/fabric/css/cssFabric-vars-colors.json +1 -0
  12. package/dist/{cssFabric → fabric}/cssProperties.js +0 -1
  13. package/dist/index.d.ts +14 -14
  14. package/dist/index.js +14 -14
  15. package/dist/{scripts → legacy/scripts}/cssfabric.js +1 -1
  16. package/dist/{scripts → legacy/scripts}/cssfabricClassNames.js +50 -30
  17. package/package.json +2 -1
  18. package/dist/cssFabric/CssFabric.d.ts +0 -20
  19. package/dist/cssFabric/bin/exports.js +0 -14
  20. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/.vscode/launch.json +0 -0
  21. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/.vscodeignore +0 -0
  22. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/CHANGELOG.md +0 -0
  23. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/README.md +0 -0
  24. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/language-configuration.json +0 -0
  25. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/package.json +0 -0
  26. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/syntaxes/cssf.tmLanguage.json +0 -0
  27. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/test.cssf +0 -0
  28. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/vsc-extension-quickstart.md +0 -0
  29. /package/dist/{cssFabric → fabric}/CssFabricBuilder.d.ts +0 -0
  30. /package/dist/{cssFabric → fabric}/bin/exports.d.ts +0 -0
  31. /package/dist/{cssFabric → fabric}/config.d.ts +0 -0
  32. /package/dist/{cssFabric → fabric}/config.js +0 -0
  33. /package/dist/{cssFabric → fabric}/cssFabricSheet.d.ts +0 -0
  34. /package/dist/{cssFabric → fabric}/cssFabricSheet.js +0 -0
  35. /package/dist/{cssFabric → fabric}/cssProperties.d.ts +0 -0
  36. /package/dist/{cssFabric → fabric}/cssVariationsAi.d.ts +0 -0
  37. /package/dist/{cssFabric → fabric}/cssVariationsAi.js +0 -0
  38. /package/dist/{cssFabric → fabric}/index.d.ts +0 -0
  39. /package/dist/{cssFabric → fabric}/index.js +0 -0
  40. /package/dist/{cssFabric → fabric}/types.d.ts +0 -0
  41. /package/dist/{cssFabric → fabric}/types.js +0 -0
  42. /package/dist/{scripts → legacy/scripts}/cssfabric.d.ts +0 -0
  43. /package/dist/{scripts → legacy/scripts}/cssfabricClassNames.d.ts +0 -0
  44. /package/dist/{scripts → legacy/scripts}/index.d.ts +0 -0
  45. /package/dist/{scripts → legacy/scripts}/index.js +0 -0
  46. /package/dist/{scripts → legacy/scripts}/utils.d.ts +0 -0
  47. /package/dist/{scripts → legacy/scripts}/utils.js +0 -0
package/dist/fabric/css/css-fabric-vars-colors.css ADDED
@@ -0,0 +1,387 @@
1
+ :root{
2
+
3
+ /* base */
4
+ /* primary */
5
+ --cssfab-primary: #9E3902;
6
+ /* secondary */
7
+ --cssfab-secondary: #5C5844;
8
+ /* accent */
9
+ --cssfab-accent: #239010;
10
+ /* neutral */
11
+ --cssfab-neutral: #544F4C;
12
+ /* error */
13
+ --cssfab-error: #BB2211;
14
+ /* gray */
15
+ --cssfab-gray: #323130;
16
+ /* palette */
17
+ /* yellow */
18
+ --cssfab-palette-yellow: #ffb900;
19
+ /* orange */
20
+ --cssfab-palette-orange: #d83b01;
21
+ /* red */
22
+ --cssfab-palette-red: #d13438;
23
+ /* magenta */
24
+ --cssfab-palette-magenta: #b4009e;
25
+ /* purple */
26
+ --cssfab-palette-purple: #5c2d91;
27
+ /* green */
28
+ --cssfab-palette-green: #107c10;
29
+ /* teal */
30
+ --cssfab-palette-teal: #008272;
31
+ /* blue */
32
+ --cssfab-palette-blue: #0078d4;
33
+ /* dark */
34
+ --cssfab-palette-dark: #323232;
35
+ /* presets */
36
+ /* primary */
37
+ /* light */
38
+ --cssfab-presets-primary-light: color-mix(in srgb, var(--cssfab--color-primary) white ##%);
39
+ /* lighter */
40
+ --cssfab-presets-primary-lighter: color-mix(in srgb, var(--cssfab--color-primary) white ##%);
41
+ /* dark */
42
+ --cssfab-presets-primary-dark: color-mix(in srgb, var(--cssfab--color-primary) black ##%);
43
+ /* darker */
44
+ --cssfab-presets-primary-darker: color-mix(in srgb, var(--cssfab--color-primary) black ##%);
45
+ /* complement */
46
+ --cssfab-presets-primary-complement: color-mix(in srgb, var(--cssfab--color-primary) black ##%);
47
+ /* invert */
48
+ --cssfab-presets-primary-invert: color-mix(in srgb, var(--cssfab--color-primary) black ##%);
49
+ /* alpha-low */
50
+ --cssfab-presets-primary-alpha-low: color-mix(in srgb, var(--cssfab--color-primary) transparent ##%);
51
+ /* alpha */
52
+ --cssfab-presets-primary-alpha: color-mix(in srgb, var(--cssfab--color-primary) transparent ##%);
53
+ /* alpha-high */
54
+ --cssfab-presets-primary-alpha-high: color-mix(in srgb, var(--cssfab--color-primary) transparent ##%);
55
+ /* secondary */
56
+ /* light */
57
+ --cssfab-presets-secondary-light: color-mix(in srgb, var(--cssfab--color-secondary) white ##%);
58
+ /* lighter */
59
+ --cssfab-presets-secondary-lighter: color-mix(in srgb, var(--cssfab--color-secondary) white ##%);
60
+ /* dark */
61
+ --cssfab-presets-secondary-dark: color-mix(in srgb, var(--cssfab--color-secondary) black ##%);
62
+ /* darker */
63
+ --cssfab-presets-secondary-darker: color-mix(in srgb, var(--cssfab--color-secondary) black ##%);
64
+ /* complement */
65
+ --cssfab-presets-secondary-complement: color-mix(in srgb, var(--cssfab--color-secondary) black ##%);
66
+ /* invert */
67
+ --cssfab-presets-secondary-invert: color-mix(in srgb, var(--cssfab--color-secondary) black ##%);
68
+ /* alpha-low */
69
+ --cssfab-presets-secondary-alpha-low: color-mix(in srgb, var(--cssfab--color-secondary) transparent ##%);
70
+ /* alpha */
71
+ --cssfab-presets-secondary-alpha: color-mix(in srgb, var(--cssfab--color-secondary) transparent ##%);
72
+ /* alpha-high */
73
+ --cssfab-presets-secondary-alpha-high: color-mix(in srgb, var(--cssfab--color-secondary) transparent ##%);
74
+ /* tertiary */
75
+ /* light */
76
+ --cssfab-presets-tertiary-light: color-mix(in srgb, var(--cssfab--color-tertiary) white ##%);
77
+ /* lighter */
78
+ --cssfab-presets-tertiary-lighter: color-mix(in srgb, var(--cssfab--color-tertiary) white ##%);
79
+ /* dark */
80
+ --cssfab-presets-tertiary-dark: color-mix(in srgb, var(--cssfab--color-tertiary) black ##%);
81
+ /* darker */
82
+ --cssfab-presets-tertiary-darker: color-mix(in srgb, var(--cssfab--color-tertiary) black ##%);
83
+ /* complement */
84
+ --cssfab-presets-tertiary-complement: color-mix(in srgb, var(--cssfab--color-tertiary) black ##%);
85
+ /* invert */
86
+ --cssfab-presets-tertiary-invert: color-mix(in srgb, var(--cssfab--color-tertiary) black ##%);
87
+ /* alpha-low */
88
+ --cssfab-presets-tertiary-alpha-low: color-mix(in srgb, var(--cssfab--color-tertiary) transparent ##%);
89
+ /* alpha */
90
+ --cssfab-presets-tertiary-alpha: color-mix(in srgb, var(--cssfab--color-tertiary) transparent ##%);
91
+ /* alpha-high */
92
+ --cssfab-presets-tertiary-alpha-high: color-mix(in srgb, var(--cssfab--color-tertiary) transparent ##%);
93
+ /* accent */
94
+ /* light */
95
+ --cssfab-presets-accent-light: color-mix(in srgb, var(--cssfab--color-accent) white ##%);
96
+ /* lighter */
97
+ --cssfab-presets-accent-lighter: color-mix(in srgb, var(--cssfab--color-accent) white ##%);
98
+ /* dark */
99
+ --cssfab-presets-accent-dark: color-mix(in srgb, var(--cssfab--color-accent) black ##%);
100
+ /* darker */
101
+ --cssfab-presets-accent-darker: color-mix(in srgb, var(--cssfab--color-accent) black ##%);
102
+ /* complement */
103
+ --cssfab-presets-accent-complement: color-mix(in srgb, var(--cssfab--color-accent) black ##%);
104
+ /* invert */
105
+ --cssfab-presets-accent-invert: color-mix(in srgb, var(--cssfab--color-accent) black ##%);
106
+ /* alpha-low */
107
+ --cssfab-presets-accent-alpha-low: color-mix(in srgb, var(--cssfab--color-accent) transparent ##%);
108
+ /* alpha */
109
+ --cssfab-presets-accent-alpha: color-mix(in srgb, var(--cssfab--color-accent) transparent ##%);
110
+ /* alpha-high */
111
+ --cssfab-presets-accent-alpha-high: color-mix(in srgb, var(--cssfab--color-accent) transparent ##%);
112
+ /* status */
113
+ /* discrete */
114
+ --cssfab-status-discrete: #ccc;
115
+ /* success */
116
+ --cssfab-status-success: green;
117
+ /* info */
118
+ --cssfab-status-info: #FFDD57FF;
119
+ /* warning */
120
+ --cssfab-status-warning: hsl(48, 96%, 46%);
121
+ /* alert */
122
+ --cssfab-status-alert: hsl(27, 100%, 50%);
123
+ /* error */
124
+ --cssfab-status-error: #d13438;
125
+ /* out */
126
+ /* primary */
127
+ /* lighten */
128
+ --cssfab-primary-lighten-0: color-mix(in srgb, var(--cssfab-primary) white 0%);
129
+ --cssfab-primary-lighten-5: color-mix(in srgb, var(--cssfab-primary) white 5%);
130
+ --cssfab-primary-lighten-10: color-mix(in srgb, var(--cssfab-primary) white 10%);
131
+ --cssfab-primary-lighten-15: color-mix(in srgb, var(--cssfab-primary) white 15%);
132
+ --cssfab-primary-lighten-20: color-mix(in srgb, var(--cssfab-primary) white 20%);
133
+ --cssfab-primary-lighten-30: color-mix(in srgb, var(--cssfab-primary) white 30%);
134
+ --cssfab-primary-lighten-40: color-mix(in srgb, var(--cssfab-primary) white 40%);
135
+ --cssfab-primary-lighten-50: color-mix(in srgb, var(--cssfab-primary) white 50%);
136
+ --cssfab-primary-lighten-60: color-mix(in srgb, var(--cssfab-primary) white 60%);
137
+ --cssfab-primary-lighten-70: color-mix(in srgb, var(--cssfab-primary) white 70%);
138
+ --cssfab-primary-lighten-80: color-mix(in srgb, var(--cssfab-primary) white 80%);
139
+ --cssfab-primary-lighten-85: color-mix(in srgb, var(--cssfab-primary) white 85%);
140
+ --cssfab-primary-lighten-90: color-mix(in srgb, var(--cssfab-primary) white 90%);
141
+ --cssfab-primary-lighten-95: color-mix(in srgb, var(--cssfab-primary) white 95%);
142
+ --cssfab-primary-lighten-100: color-mix(in srgb, var(--cssfab-primary) white 100%);
143
+ /* darken */
144
+ --cssfab-primary-darken-0: color-mix(in srgb, var(--cssfab-primary) black 0%);
145
+ --cssfab-primary-darken-5: color-mix(in srgb, var(--cssfab-primary) black 5%);
146
+ --cssfab-primary-darken-10: color-mix(in srgb, var(--cssfab-primary) black 10%);
147
+ --cssfab-primary-darken-15: color-mix(in srgb, var(--cssfab-primary) black 15%);
148
+ --cssfab-primary-darken-20: color-mix(in srgb, var(--cssfab-primary) black 20%);
149
+ --cssfab-primary-darken-30: color-mix(in srgb, var(--cssfab-primary) black 30%);
150
+ --cssfab-primary-darken-40: color-mix(in srgb, var(--cssfab-primary) black 40%);
151
+ --cssfab-primary-darken-50: color-mix(in srgb, var(--cssfab-primary) black 50%);
152
+ --cssfab-primary-darken-60: color-mix(in srgb, var(--cssfab-primary) black 60%);
153
+ --cssfab-primary-darken-70: color-mix(in srgb, var(--cssfab-primary) black 70%);
154
+ --cssfab-primary-darken-80: color-mix(in srgb, var(--cssfab-primary) black 80%);
155
+ --cssfab-primary-darken-85: color-mix(in srgb, var(--cssfab-primary) black 85%);
156
+ --cssfab-primary-darken-90: color-mix(in srgb, var(--cssfab-primary) black 90%);
157
+ --cssfab-primary-darken-95: color-mix(in srgb, var(--cssfab-primary) black 95%);
158
+ --cssfab-primary-darken-100: color-mix(in srgb, var(--cssfab-primary) black 100%);
159
+ /* opacity */
160
+ --cssfab-primary-opacity-0: color-mix(in srgb, var(--cssfab-primary) transparent 0%);
161
+ --cssfab-primary-opacity-5: color-mix(in srgb, var(--cssfab-primary) transparent 5%);
162
+ --cssfab-primary-opacity-10: color-mix(in srgb, var(--cssfab-primary) transparent 10%);
163
+ --cssfab-primary-opacity-15: color-mix(in srgb, var(--cssfab-primary) transparent 15%);
164
+ --cssfab-primary-opacity-20: color-mix(in srgb, var(--cssfab-primary) transparent 20%);
165
+ --cssfab-primary-opacity-30: color-mix(in srgb, var(--cssfab-primary) transparent 30%);
166
+ --cssfab-primary-opacity-40: color-mix(in srgb, var(--cssfab-primary) transparent 40%);
167
+ --cssfab-primary-opacity-50: color-mix(in srgb, var(--cssfab-primary) transparent 50%);
168
+ --cssfab-primary-opacity-60: color-mix(in srgb, var(--cssfab-primary) transparent 60%);
169
+ --cssfab-primary-opacity-70: color-mix(in srgb, var(--cssfab-primary) transparent 70%);
170
+ --cssfab-primary-opacity-80: color-mix(in srgb, var(--cssfab-primary) transparent 80%);
171
+ --cssfab-primary-opacity-85: color-mix(in srgb, var(--cssfab-primary) transparent 85%);
172
+ --cssfab-primary-opacity-90: color-mix(in srgb, var(--cssfab-primary) transparent 90%);
173
+ --cssfab-primary-opacity-95: color-mix(in srgb, var(--cssfab-primary) transparent 95%);
174
+ --cssfab-primary-opacity-100: color-mix(in srgb, var(--cssfab-primary) transparent 100%);
175
+ /* secondary */
176
+ /* lighten */
177
+ --cssfab-secondary-lighten-0: color-mix(in srgb, var(--cssfab-secondary) white 0%);
178
+ --cssfab-secondary-lighten-5: color-mix(in srgb, var(--cssfab-secondary) white 5%);
179
+ --cssfab-secondary-lighten-10: color-mix(in srgb, var(--cssfab-secondary) white 10%);
180
+ --cssfab-secondary-lighten-15: color-mix(in srgb, var(--cssfab-secondary) white 15%);
181
+ --cssfab-secondary-lighten-20: color-mix(in srgb, var(--cssfab-secondary) white 20%);
182
+ --cssfab-secondary-lighten-30: color-mix(in srgb, var(--cssfab-secondary) white 30%);
183
+ --cssfab-secondary-lighten-40: color-mix(in srgb, var(--cssfab-secondary) white 40%);
184
+ --cssfab-secondary-lighten-50: color-mix(in srgb, var(--cssfab-secondary) white 50%);
185
+ --cssfab-secondary-lighten-60: color-mix(in srgb, var(--cssfab-secondary) white 60%);
186
+ --cssfab-secondary-lighten-70: color-mix(in srgb, var(--cssfab-secondary) white 70%);
187
+ --cssfab-secondary-lighten-80: color-mix(in srgb, var(--cssfab-secondary) white 80%);
188
+ --cssfab-secondary-lighten-85: color-mix(in srgb, var(--cssfab-secondary) white 85%);
189
+ --cssfab-secondary-lighten-90: color-mix(in srgb, var(--cssfab-secondary) white 90%);
190
+ --cssfab-secondary-lighten-95: color-mix(in srgb, var(--cssfab-secondary) white 95%);
191
+ --cssfab-secondary-lighten-100: color-mix(in srgb, var(--cssfab-secondary) white 100%);
192
+ /* darken */
193
+ --cssfab-secondary-darken-0: color-mix(in srgb, var(--cssfab-secondary) black 0%);
194
+ --cssfab-secondary-darken-5: color-mix(in srgb, var(--cssfab-secondary) black 5%);
195
+ --cssfab-secondary-darken-10: color-mix(in srgb, var(--cssfab-secondary) black 10%);
196
+ --cssfab-secondary-darken-15: color-mix(in srgb, var(--cssfab-secondary) black 15%);
197
+ --cssfab-secondary-darken-20: color-mix(in srgb, var(--cssfab-secondary) black 20%);
198
+ --cssfab-secondary-darken-30: color-mix(in srgb, var(--cssfab-secondary) black 30%);
199
+ --cssfab-secondary-darken-40: color-mix(in srgb, var(--cssfab-secondary) black 40%);
200
+ --cssfab-secondary-darken-50: color-mix(in srgb, var(--cssfab-secondary) black 50%);
201
+ --cssfab-secondary-darken-60: color-mix(in srgb, var(--cssfab-secondary) black 60%);
202
+ --cssfab-secondary-darken-70: color-mix(in srgb, var(--cssfab-secondary) black 70%);
203
+ --cssfab-secondary-darken-80: color-mix(in srgb, var(--cssfab-secondary) black 80%);
204
+ --cssfab-secondary-darken-85: color-mix(in srgb, var(--cssfab-secondary) black 85%);
205
+ --cssfab-secondary-darken-90: color-mix(in srgb, var(--cssfab-secondary) black 90%);
206
+ --cssfab-secondary-darken-95: color-mix(in srgb, var(--cssfab-secondary) black 95%);
207
+ --cssfab-secondary-darken-100: color-mix(in srgb, var(--cssfab-secondary) black 100%);
208
+ /* opacity */
209
+ --cssfab-secondary-opacity-0: color-mix(in srgb, var(--cssfab-secondary) transparent 0%);
210
+ --cssfab-secondary-opacity-5: color-mix(in srgb, var(--cssfab-secondary) transparent 5%);
211
+ --cssfab-secondary-opacity-10: color-mix(in srgb, var(--cssfab-secondary) transparent 10%);
212
+ --cssfab-secondary-opacity-15: color-mix(in srgb, var(--cssfab-secondary) transparent 15%);
213
+ --cssfab-secondary-opacity-20: color-mix(in srgb, var(--cssfab-secondary) transparent 20%);
214
+ --cssfab-secondary-opacity-30: color-mix(in srgb, var(--cssfab-secondary) transparent 30%);
215
+ --cssfab-secondary-opacity-40: color-mix(in srgb, var(--cssfab-secondary) transparent 40%);
216
+ --cssfab-secondary-opacity-50: color-mix(in srgb, var(--cssfab-secondary) transparent 50%);
217
+ --cssfab-secondary-opacity-60: color-mix(in srgb, var(--cssfab-secondary) transparent 60%);
218
+ --cssfab-secondary-opacity-70: color-mix(in srgb, var(--cssfab-secondary) transparent 70%);
219
+ --cssfab-secondary-opacity-80: color-mix(in srgb, var(--cssfab-secondary) transparent 80%);
220
+ --cssfab-secondary-opacity-85: color-mix(in srgb, var(--cssfab-secondary) transparent 85%);
221
+ --cssfab-secondary-opacity-90: color-mix(in srgb, var(--cssfab-secondary) transparent 90%);
222
+ --cssfab-secondary-opacity-95: color-mix(in srgb, var(--cssfab-secondary) transparent 95%);
223
+ --cssfab-secondary-opacity-100: color-mix(in srgb, var(--cssfab-secondary) transparent 100%);
224
+ /* tertiary */
225
+ /* lighten */
226
+ --cssfab-tertiary-lighten-0: color-mix(in srgb, var(--cssfab-tertiary) white 0%);
227
+ --cssfab-tertiary-lighten-5: color-mix(in srgb, var(--cssfab-tertiary) white 5%);
228
+ --cssfab-tertiary-lighten-10: color-mix(in srgb, var(--cssfab-tertiary) white 10%);
229
+ --cssfab-tertiary-lighten-15: color-mix(in srgb, var(--cssfab-tertiary) white 15%);
230
+ --cssfab-tertiary-lighten-20: color-mix(in srgb, var(--cssfab-tertiary) white 20%);
231
+ --cssfab-tertiary-lighten-30: color-mix(in srgb, var(--cssfab-tertiary) white 30%);
232
+ --cssfab-tertiary-lighten-40: color-mix(in srgb, var(--cssfab-tertiary) white 40%);
233
+ --cssfab-tertiary-lighten-50: color-mix(in srgb, var(--cssfab-tertiary) white 50%);
234
+ --cssfab-tertiary-lighten-60: color-mix(in srgb, var(--cssfab-tertiary) white 60%);
235
+ --cssfab-tertiary-lighten-70: color-mix(in srgb, var(--cssfab-tertiary) white 70%);
236
+ --cssfab-tertiary-lighten-80: color-mix(in srgb, var(--cssfab-tertiary) white 80%);
237
+ --cssfab-tertiary-lighten-85: color-mix(in srgb, var(--cssfab-tertiary) white 85%);
238
+ --cssfab-tertiary-lighten-90: color-mix(in srgb, var(--cssfab-tertiary) white 90%);
239
+ --cssfab-tertiary-lighten-95: color-mix(in srgb, var(--cssfab-tertiary) white 95%);
240
+ --cssfab-tertiary-lighten-100: color-mix(in srgb, var(--cssfab-tertiary) white 100%);
241
+ /* darken */
242
+ --cssfab-tertiary-darken-0: color-mix(in srgb, var(--cssfab-tertiary) black 0%);
243
+ --cssfab-tertiary-darken-5: color-mix(in srgb, var(--cssfab-tertiary) black 5%);
244
+ --cssfab-tertiary-darken-10: color-mix(in srgb, var(--cssfab-tertiary) black 10%);
245
+ --cssfab-tertiary-darken-15: color-mix(in srgb, var(--cssfab-tertiary) black 15%);
246
+ --cssfab-tertiary-darken-20: color-mix(in srgb, var(--cssfab-tertiary) black 20%);
247
+ --cssfab-tertiary-darken-30: color-mix(in srgb, var(--cssfab-tertiary) black 30%);
248
+ --cssfab-tertiary-darken-40: color-mix(in srgb, var(--cssfab-tertiary) black 40%);
249
+ --cssfab-tertiary-darken-50: color-mix(in srgb, var(--cssfab-tertiary) black 50%);
250
+ --cssfab-tertiary-darken-60: color-mix(in srgb, var(--cssfab-tertiary) black 60%);
251
+ --cssfab-tertiary-darken-70: color-mix(in srgb, var(--cssfab-tertiary) black 70%);
252
+ --cssfab-tertiary-darken-80: color-mix(in srgb, var(--cssfab-tertiary) black 80%);
253
+ --cssfab-tertiary-darken-85: color-mix(in srgb, var(--cssfab-tertiary) black 85%);
254
+ --cssfab-tertiary-darken-90: color-mix(in srgb, var(--cssfab-tertiary) black 90%);
255
+ --cssfab-tertiary-darken-95: color-mix(in srgb, var(--cssfab-tertiary) black 95%);
256
+ --cssfab-tertiary-darken-100: color-mix(in srgb, var(--cssfab-tertiary) black 100%);
257
+ /* opacity */
258
+ --cssfab-tertiary-opacity-0: color-mix(in srgb, var(--cssfab-tertiary) transparent 0%);
259
+ --cssfab-tertiary-opacity-5: color-mix(in srgb, var(--cssfab-tertiary) transparent 5%);
260
+ --cssfab-tertiary-opacity-10: color-mix(in srgb, var(--cssfab-tertiary) transparent 10%);
261
+ --cssfab-tertiary-opacity-15: color-mix(in srgb, var(--cssfab-tertiary) transparent 15%);
262
+ --cssfab-tertiary-opacity-20: color-mix(in srgb, var(--cssfab-tertiary) transparent 20%);
263
+ --cssfab-tertiary-opacity-30: color-mix(in srgb, var(--cssfab-tertiary) transparent 30%);
264
+ --cssfab-tertiary-opacity-40: color-mix(in srgb, var(--cssfab-tertiary) transparent 40%);
265
+ --cssfab-tertiary-opacity-50: color-mix(in srgb, var(--cssfab-tertiary) transparent 50%);
266
+ --cssfab-tertiary-opacity-60: color-mix(in srgb, var(--cssfab-tertiary) transparent 60%);
267
+ --cssfab-tertiary-opacity-70: color-mix(in srgb, var(--cssfab-tertiary) transparent 70%);
268
+ --cssfab-tertiary-opacity-80: color-mix(in srgb, var(--cssfab-tertiary) transparent 80%);
269
+ --cssfab-tertiary-opacity-85: color-mix(in srgb, var(--cssfab-tertiary) transparent 85%);
270
+ --cssfab-tertiary-opacity-90: color-mix(in srgb, var(--cssfab-tertiary) transparent 90%);
271
+ --cssfab-tertiary-opacity-95: color-mix(in srgb, var(--cssfab-tertiary) transparent 95%);
272
+ --cssfab-tertiary-opacity-100: color-mix(in srgb, var(--cssfab-tertiary) transparent 100%);
273
+ /* gray */
274
+ --cssfab-color-gray-0: color-mix(in srgb, --cssfab-color-gray #333 0%);
275
+ --cssfab-color-gray-5: color-mix(in srgb, --cssfab-color-gray #333 5%);
276
+ --cssfab-color-gray-10: color-mix(in srgb, --cssfab-color-gray #333 10%);
277
+ --cssfab-color-gray-15: color-mix(in srgb, --cssfab-color-gray #333 15%);
278
+ --cssfab-color-gray-20: color-mix(in srgb, --cssfab-color-gray #333 20%);
279
+ --cssfab-color-gray-30: color-mix(in srgb, --cssfab-color-gray #333 30%);
280
+ --cssfab-color-gray-40: color-mix(in srgb, --cssfab-color-gray #333 40%);
281
+ --cssfab-color-gray-50: color-mix(in srgb, --cssfab-color-gray #333 50%);
282
+ --cssfab-color-gray-60: color-mix(in srgb, --cssfab-color-gray #333 60%);
283
+ --cssfab-color-gray-70: color-mix(in srgb, --cssfab-color-gray #333 70%);
284
+ --cssfab-color-gray-80: color-mix(in srgb, --cssfab-color-gray #333 80%);
285
+ --cssfab-color-gray-85: color-mix(in srgb, --cssfab-color-gray #333 85%);
286
+ --cssfab-color-gray-90: color-mix(in srgb, --cssfab-color-gray #333 90%);
287
+ --cssfab-color-gray-95: color-mix(in srgb, --cssfab-color-gray #333 95%);
288
+ --cssfab-color-gray-100: color-mix(in srgb, --cssfab-color-gray #333 100%);
289
+ /* out2 */
290
+ /* foreground */
291
+ /* lighten */
292
+ --cssfab-foreground-lighten-0: color-mix(in srgb, var(--cssfab-foreground) white 0%);
293
+ --cssfab-foreground-lighten-5: color-mix(in srgb, var(--cssfab-foreground) white 5%);
294
+ --cssfab-foreground-lighten-10: color-mix(in srgb, var(--cssfab-foreground) white 10%);
295
+ --cssfab-foreground-lighten-15: color-mix(in srgb, var(--cssfab-foreground) white 15%);
296
+ --cssfab-foreground-lighten-20: color-mix(in srgb, var(--cssfab-foreground) white 20%);
297
+ --cssfab-foreground-lighten-30: color-mix(in srgb, var(--cssfab-foreground) white 30%);
298
+ --cssfab-foreground-lighten-40: color-mix(in srgb, var(--cssfab-foreground) white 40%);
299
+ --cssfab-foreground-lighten-50: color-mix(in srgb, var(--cssfab-foreground) white 50%);
300
+ --cssfab-foreground-lighten-60: color-mix(in srgb, var(--cssfab-foreground) white 60%);
301
+ --cssfab-foreground-lighten-70: color-mix(in srgb, var(--cssfab-foreground) white 70%);
302
+ --cssfab-foreground-lighten-80: color-mix(in srgb, var(--cssfab-foreground) white 80%);
303
+ --cssfab-foreground-lighten-85: color-mix(in srgb, var(--cssfab-foreground) white 85%);
304
+ --cssfab-foreground-lighten-90: color-mix(in srgb, var(--cssfab-foreground) white 90%);
305
+ --cssfab-foreground-lighten-95: color-mix(in srgb, var(--cssfab-foreground) white 95%);
306
+ --cssfab-foreground-lighten-100: color-mix(in srgb, var(--cssfab-foreground) white 100%);
307
+ /* darken */
308
+ --cssfab-foreground-darken-0: color-mix(in srgb, var(--cssfab-foreground) black 0%);
309
+ --cssfab-foreground-darken-5: color-mix(in srgb, var(--cssfab-foreground) black 5%);
310
+ --cssfab-foreground-darken-10: color-mix(in srgb, var(--cssfab-foreground) black 10%);
311
+ --cssfab-foreground-darken-15: color-mix(in srgb, var(--cssfab-foreground) black 15%);
312
+ --cssfab-foreground-darken-20: color-mix(in srgb, var(--cssfab-foreground) black 20%);
313
+ --cssfab-foreground-darken-30: color-mix(in srgb, var(--cssfab-foreground) black 30%);
314
+ --cssfab-foreground-darken-40: color-mix(in srgb, var(--cssfab-foreground) black 40%);
315
+ --cssfab-foreground-darken-50: color-mix(in srgb, var(--cssfab-foreground) black 50%);
316
+ --cssfab-foreground-darken-60: color-mix(in srgb, var(--cssfab-foreground) black 60%);
317
+ --cssfab-foreground-darken-70: color-mix(in srgb, var(--cssfab-foreground) black 70%);
318
+ --cssfab-foreground-darken-80: color-mix(in srgb, var(--cssfab-foreground) black 80%);
319
+ --cssfab-foreground-darken-85: color-mix(in srgb, var(--cssfab-foreground) black 85%);
320
+ --cssfab-foreground-darken-90: color-mix(in srgb, var(--cssfab-foreground) black 90%);
321
+ --cssfab-foreground-darken-95: color-mix(in srgb, var(--cssfab-foreground) black 95%);
322
+ --cssfab-foreground-darken-100: color-mix(in srgb, var(--cssfab-foreground) black 100%);
323
+ /* opacity */
324
+ --cssfab-foreground-opacity-0: color-mix(in srgb, var(--cssfab-foreground) transparent 0%);
325
+ --cssfab-foreground-opacity-5: color-mix(in srgb, var(--cssfab-foreground) transparent 5%);
326
+ --cssfab-foreground-opacity-10: color-mix(in srgb, var(--cssfab-foreground) transparent 10%);
327
+ --cssfab-foreground-opacity-15: color-mix(in srgb, var(--cssfab-foreground) transparent 15%);
328
+ --cssfab-foreground-opacity-20: color-mix(in srgb, var(--cssfab-foreground) transparent 20%);
329
+ --cssfab-foreground-opacity-30: color-mix(in srgb, var(--cssfab-foreground) transparent 30%);
330
+ --cssfab-foreground-opacity-40: color-mix(in srgb, var(--cssfab-foreground) transparent 40%);
331
+ --cssfab-foreground-opacity-50: color-mix(in srgb, var(--cssfab-foreground) transparent 50%);
332
+ --cssfab-foreground-opacity-60: color-mix(in srgb, var(--cssfab-foreground) transparent 60%);
333
+ --cssfab-foreground-opacity-70: color-mix(in srgb, var(--cssfab-foreground) transparent 70%);
334
+ --cssfab-foreground-opacity-80: color-mix(in srgb, var(--cssfab-foreground) transparent 80%);
335
+ --cssfab-foreground-opacity-85: color-mix(in srgb, var(--cssfab-foreground) transparent 85%);
336
+ --cssfab-foreground-opacity-90: color-mix(in srgb, var(--cssfab-foreground) transparent 90%);
337
+ --cssfab-foreground-opacity-95: color-mix(in srgb, var(--cssfab-foreground) transparent 95%);
338
+ --cssfab-foreground-opacity-100: color-mix(in srgb, var(--cssfab-foreground) transparent 100%);
339
+ /* bg */
340
+ /* lighten */
341
+ --cssfab-bg-lighten-0: color-mix(in srgb, var(--cssfab-bg) white 0%);
342
+ --cssfab-bg-lighten-5: color-mix(in srgb, var(--cssfab-bg) white 5%);
343
+ --cssfab-bg-lighten-10: color-mix(in srgb, var(--cssfab-bg) white 10%);
344
+ --cssfab-bg-lighten-15: color-mix(in srgb, var(--cssfab-bg) white 15%);
345
+ --cssfab-bg-lighten-20: color-mix(in srgb, var(--cssfab-bg) white 20%);
346
+ --cssfab-bg-lighten-30: color-mix(in srgb, var(--cssfab-bg) white 30%);
347
+ --cssfab-bg-lighten-40: color-mix(in srgb, var(--cssfab-bg) white 40%);
348
+ --cssfab-bg-lighten-50: color-mix(in srgb, var(--cssfab-bg) white 50%);
349
+ --cssfab-bg-lighten-60: color-mix(in srgb, var(--cssfab-bg) white 60%);
350
+ --cssfab-bg-lighten-70: color-mix(in srgb, var(--cssfab-bg) white 70%);
351
+ --cssfab-bg-lighten-80: color-mix(in srgb, var(--cssfab-bg) white 80%);
352
+ --cssfab-bg-lighten-85: color-mix(in srgb, var(--cssfab-bg) white 85%);
353
+ --cssfab-bg-lighten-90: color-mix(in srgb, var(--cssfab-bg) white 90%);
354
+ --cssfab-bg-lighten-95: color-mix(in srgb, var(--cssfab-bg) white 95%);
355
+ --cssfab-bg-lighten-100: color-mix(in srgb, var(--cssfab-bg) white 100%);
356
+ /* darken */
357
+ --cssfab-bg-darken-0: color-mix(in srgb, var(--cssfab-bg) black 0%);
358
+ --cssfab-bg-darken-5: color-mix(in srgb, var(--cssfab-bg) black 5%);
359
+ --cssfab-bg-darken-10: color-mix(in srgb, var(--cssfab-bg) black 10%);
360
+ --cssfab-bg-darken-15: color-mix(in srgb, var(--cssfab-bg) black 15%);
361
+ --cssfab-bg-darken-20: color-mix(in srgb, var(--cssfab-bg) black 20%);
362
+ --cssfab-bg-darken-30: color-mix(in srgb, var(--cssfab-bg) black 30%);
363
+ --cssfab-bg-darken-40: color-mix(in srgb, var(--cssfab-bg) black 40%);
364
+ --cssfab-bg-darken-50: color-mix(in srgb, var(--cssfab-bg) black 50%);
365
+ --cssfab-bg-darken-60: color-mix(in srgb, var(--cssfab-bg) black 60%);
366
+ --cssfab-bg-darken-70: color-mix(in srgb, var(--cssfab-bg) black 70%);
367
+ --cssfab-bg-darken-80: color-mix(in srgb, var(--cssfab-bg) black 80%);
368
+ --cssfab-bg-darken-85: color-mix(in srgb, var(--cssfab-bg) black 85%);
369
+ --cssfab-bg-darken-90: color-mix(in srgb, var(--cssfab-bg) black 90%);
370
+ --cssfab-bg-darken-95: color-mix(in srgb, var(--cssfab-bg) black 95%);
371
+ --cssfab-bg-darken-100: color-mix(in srgb, var(--cssfab-bg) black 100%);
372
+ /* opacity */
373
+ --cssfab-bg-opacity-0: color-mix(in srgb, var(--cssfab-bg) transparent 0%);
374
+ --cssfab-bg-opacity-5: color-mix(in srgb, var(--cssfab-bg) transparent 5%);
375
+ --cssfab-bg-opacity-10: color-mix(in srgb, var(--cssfab-bg) transparent 10%);
376
+ --cssfab-bg-opacity-15: color-mix(in srgb, var(--cssfab-bg) transparent 15%);
377
+ --cssfab-bg-opacity-20: color-mix(in srgb, var(--cssfab-bg) transparent 20%);
378
+ --cssfab-bg-opacity-30: color-mix(in srgb, var(--cssfab-bg) transparent 30%);
379
+ --cssfab-bg-opacity-40: color-mix(in srgb, var(--cssfab-bg) transparent 40%);
380
+ --cssfab-bg-opacity-50: color-mix(in srgb, var(--cssfab-bg) transparent 50%);
381
+ --cssfab-bg-opacity-60: color-mix(in srgb, var(--cssfab-bg) transparent 60%);
382
+ --cssfab-bg-opacity-70: color-mix(in srgb, var(--cssfab-bg) transparent 70%);
383
+ --cssfab-bg-opacity-80: color-mix(in srgb, var(--cssfab-bg) transparent 80%);
384
+ --cssfab-bg-opacity-85: color-mix(in srgb, var(--cssfab-bg) transparent 85%);
385
+ --cssfab-bg-opacity-90: color-mix(in srgb, var(--cssfab-bg) transparent 90%);
386
+ --cssfab-bg-opacity-95: color-mix(in srgb, var(--cssfab-bg) transparent 95%);
387
+ --cssfab-bg-opacity-100: color-mix(in srgb, var(--cssfab-bg) transparent 100%);}