@massimo-cassandro/minimo 1.21.0 → 1.21.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.
@@ -63,6 +63,11 @@ const config = {
63
63
  // Comments at the end of custom properties are preserved, while full-line ones will be lost.
64
64
  mergeCustomProps: false,
65
65
 
66
+ // Wraps the generated custom properties inside a CSS `@layer` at-rule,
67
+ // e.g. addLayer: 'project' -> `@layer project { :root { ... } }`.
68
+ // Set to null, undefined or false (default) to emit no layer.
69
+ addLayer: 'project',
70
+
66
71
  // Named groups of custom properties. Properties whose first hyphen-separated
67
72
  // name segment matches one of a group's `prefixes` are pulled out, labelled
68
73
  // with the group's `name` and placed at the beginning of the output CSS
@@ -87,6 +87,11 @@ export const pxToRem = buildConfig.pxToRem !== false;
87
87
  // build-tokens-src/merge-css.mjs). Default: false.
88
88
  export const mergeCustomProps = buildConfig.mergeCustomProps === true;
89
89
 
90
+ // addLayer: wraps the generated custom properties inside a CSS `@layer`
91
+ // at-rule (see formats/css.mjs), e.g. `@layer project { :root { ... } }`.
92
+ // Set to null, undefined or false (default) to emit no layer.
93
+ export const addLayer = buildConfig.addLayer ? String(buildConfig.addLayer).trim() : null;
94
+
90
95
  // customPropsGroups: custom properties whose first hyphen-separated name
91
96
  // segment matches one of a group's prefixes are pulled out, labelled with
92
97
  // that group's name and moved to the beginning of the generated CSS file, in
@@ -324,6 +324,12 @@ StyleDictionary.registerFormat({
324
324
  appendBlock(restProps);
325
325
 
326
326
  customPropsCount = sortedProps.length;
327
- return `${selector} {\n${outLines.join('\n')}\n}\n`;
327
+ const block = `${selector} {\n${outLines.join('\n')}\n}\n`;
328
+
329
+ // addLayer: wraps the whole block inside `@layer <name> { ... }`.
330
+ // Indentation is left to stylelint's fix step (run right after the build).
331
+ return options.addLayer
332
+ ? `@layer ${options.addLayer} {\n\n${block}}\n`
333
+ : block;
328
334
  },
329
335
  });
@@ -47,6 +47,7 @@ const JSON_TRANSFORMS = [
47
47
  * @param {'keep'|'calc'|'resolve'} opts.jsonExpression How to handle math expressions in dimension tokens.
48
48
  * @param {{name: string, prefixes: string[]}[]} opts.customPropsGroups Named groups of name prefixes, moved to the top of the CSS output in list order.
49
49
  * @param {boolean} opts.pxToRem If false, skips the px→rem transform on the CSS platform. Default: true.
50
+ * @param {string|null} opts.addLayer Wraps the generated custom properties inside `@layer <addLayer> { ... }`. null = no layer.
50
51
  * @returns {Record<string, PlatformConfig>} platforms object ready for Style Dictionary config
51
52
  */
52
53
  export const buildPlatforms = ({
@@ -59,6 +60,7 @@ export const buildPlatforms = ({
59
60
  concreteFilePaths = [],
60
61
  customPropsGroups = [],
61
62
  pxToRem = true,
63
+ addLayer = null,
62
64
  }) => {
63
65
  const cssTransforms = pxToRem
64
66
  ? CSS_TRANSFORMS
@@ -77,6 +79,7 @@ export const buildPlatforms = ({
77
79
  outputReferences: true,
78
80
  showFileHeader: true,
79
81
  customPropsGroups,
82
+ addLayer,
80
83
  },
81
84
  },
82
85
  ],
@@ -34,6 +34,7 @@ import {
34
34
  mergeCustomProps,
35
35
  customPropsGroups,
36
36
  pxToRem,
37
+ addLayer,
37
38
  } from './build-tokens-src/config.mjs';
38
39
 
39
40
  // ── 2. Custom transforms ─────────────────────────────────────────────────────
@@ -107,6 +108,7 @@ const sd = new StyleDictionary({
107
108
  concreteFilePaths,
108
109
  customPropsGroups,
109
110
  pxToRem,
111
+ addLayer,
110
112
  }),
111
113
  });
112
114
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "1.21.0",
3
+ "version": "1.21.1",
4
4
  "description": "Light css framework & utilities",
5
5
  "type": "module",
6
6
  "main": "./index.js",
@@ -90,9 +90,9 @@
90
90
  "devDependencies": {
91
91
  "@massimo-cassandro/eslint-config": "^3.0.13",
92
92
  "@massimo-cassandro/stylelint-config": "^2.3.13",
93
- "@types/node": "^26.1.2",
93
+ "@types/node": "^26.2.0",
94
94
  "jsdom": "^29.1.1",
95
- "style-dictionary": "^5.5.0"
95
+ "style-dictionary": "^5.5.1"
96
96
  },
97
97
  "dependencies": {
98
98
  "@inquirer/input": "^5.1.2",
@@ -1,440 +1,443 @@
1
- :root {
2
- /** ****** COLORS ****** **/
3
- --accent: #567d0d;
4
- --accent-fg: #fff;
5
-
6
- --primary-100: #083865;
7
- --primary-100-fg: #fff;
8
-
9
- --secondary-100: #650853;
10
- --secondary-100-fg: #fff;
11
-
12
- --neutral-100: #666;
13
- --neutral-100-fg: #fff;
14
-
15
- /** ****** LAYOUT ****** **/
16
- --body-background-color: #fff;
17
- --body-text: var(--text-color);
18
-
19
- --layout-container-max-width: 80rem;
20
-
21
- /* ---------------------- */
22
-
23
- --alert-border-radius: var(--radius-sm);
24
- --alert-box-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
25
-
26
- --badge-background-color: var(--primary-100);
27
- --badge-color: var(--primary-100-fg);
28
- --badge-font-size: var(--font-size-xs);
29
- --badge-font-weight: var(--font-weight-semibold);
30
- --badge-lg-font-size: var(--font-size-base);
31
- --badge-lg-font-weight: var(--badge-font-weight);
32
-
33
- --box-shadow-base: 0 0 .75rem 0 rgb(0 0 0 / .25);
34
-
35
- --btn-border-radius: var(--form-control-border-radius);
36
- --btn-border-width: var(--form-control-border-width);
37
- --btn-close-active-background-color: var(--btn-close-background-color);
38
- --btn-close-active-icon-color: var(--link-active-color);
39
- --btn-close-background-color: var(--body-background-color);
40
- --btn-close-border-color: var(--btn-close-icon-color);
41
- --btn-close-border-radius: 50%;
42
- --btn-close-border-width: 2px;
43
- --btn-close-focus-outline-color: var(--link-focus-outline-color);
44
- --btn-close-focus-outline-offset: 2px;
45
- --btn-close-focus-outline-width: 2px;
46
- --btn-close-hover-background-color: var(--btn-close-icon-color);
47
- --btn-close-hover-border-color: var(--btn-close-icon-color);
48
- --btn-close-hover-icon-color: var(--btn-close-background-color);
49
- --btn-close-icon-bar-size: 2px;
50
- --btn-close-icon-color: var(--text-color);
51
- --btn-close-padding: 3px;
52
- --btn-close-size: 1.5rem;
53
- --btn-disabled-opacity: var(--form-control-disabled-opacity);
54
- --btn-focus-outline-width: var(--form-control-focus-outline-width);
55
- --btn-font-size: var(--form-control-font-size);
56
- --btn-font-style: var(--form-control-font-style);
57
- --btn-font-weight: var(--font-weight-semibold);
58
- --btn-hollow-border-width: calc(var(--btn-border-width) * 2);
59
- --btn-lg-focus-outline-width: 4px;
60
- --btn-lg-font-size: var(--font-size-lg);
61
- --btn-lg-padding-block: var(--size-base);
62
- --btn-lg-padding-inline: var(--size-md);
63
- --btn-link-disabled-color: var(--text-muted);
64
- --btn-link-disabled-font-style: italic;
65
- --btn-md-focus-outline-width: 3px;
66
- --btn-md-font-size: var(--font-size-md);
67
- --btn-md-padding-block: var(--size-xs);
68
- --btn-md-padding-inline: var(--size-sm);
69
- --btn-padding-block: var(--size-xs);
70
- --btn-padding-inline: var(--size-base);
71
- --btn-primary-active-background-color: color-mix(in srgb, var(--btn-primary-background-color) 60%, #000);
72
- --btn-primary-active-border-color: var(--btn-primary-active-background-color);
73
- --btn-primary-active-color: var(--btn-primary-color);
74
- --btn-primary-background-color: var(--primary-100);
75
- --btn-primary-border-color: var(--btn-primary-background-color);
76
- --btn-primary-color: var(--primary-100-fg);
77
- --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-background-color) 60%, transparent);
78
- --btn-primary-hollow-background-color: var(--btn-primary-color);
79
- --btn-primary-hollow-color: var(--btn-primary-background-color);
80
- --btn-primary-hollow-hover-background-color: var(--btn-primary-background-color);
81
- --btn-primary-hollow-hover-color: var(--btn-primary-color);
82
- --btn-primary-hover-background-color: var(--btn-primary-color);
83
- --btn-primary-hover-border-color: var(--btn-primary-hover-color);
84
- --btn-primary-hover-color: var(--btn-primary-background-color);
85
- --btn-secondary-active-background-color: color-mix(in srgb, var(--btn-secondary-background-color) 60%, #000);
86
- --btn-secondary-active-border-color: var(--btn-secondary-active-background-color);
87
- --btn-secondary-active-color: var(--btn-secondary-color);
88
- --btn-secondary-background-color: var(--secondary-100);
89
- --btn-secondary-border-color: var(--btn-secondary-background-color);
90
- --btn-secondary-color: var(--secondary-100-fg);
91
- --btn-secondary-focus-outline-color: color-mix(in srgb, var(--btn-secondary-background-color) 60%, transparent);
92
- --btn-secondary-hollow-background-color: var(--btn-secondary-color);
93
- --btn-secondary-hollow-color: var(--btn-secondary-background-color);
94
- --btn-secondary-hollow-hover-background-color: var(--btn-secondary-background-color);
95
- --btn-secondary-hollow-hover-color: var(--btn-secondary-color);
96
- --btn-secondary-hover-background-color: var(--btn-secondary-color);
97
- --btn-secondary-hover-border-color: var(--btn-secondary-hover-color);
98
- --btn-secondary-hover-color: var(--btn-secondary-background-color);
99
- --btn-sm-focus-outline-width: 2px;
100
- --btn-sm-font-size: var(--font-size-sm);
101
- --btn-sm-padding-block: var(--size-xxs);
102
- --btn-sm-padding-inline: var(--size-xs);
103
- --btn-xl-focus-outline-width: 6px;
104
- --btn-xl-font-size: var(--font-size-xl);
105
- --btn-xl-padding-block: var(--size-md);
106
- --btn-xl-padding-inline: var(--size-xl);
107
- --btn-xs-focus-outline-width: 1px;
108
- --btn-xs-font-size: var(--font-size-xs);
109
- --btn-xs-padding-block: var(--size-xxs);
110
- --btn-xs-padding-inline: var(--size-xxs);
111
-
112
- --flex-grid-gap: 1.5rem;
113
-
114
- --font-family: sans-serif;
115
- --font-family-mono: 'Monaspace Neon Var', 'Monaspace Neon', 'Aptos Mono', 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Andale Mono', 'Courier New', monospace;
116
- --font-size-2xl: clamp(2rem, .7692rem + 1.9231vw, 2.5rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMnJlbSIsIm1heEZvbnRTaXplIjoiMi41cmVtIn0%3D */
117
- --font-size-3xl: clamp(2.2rem, .2308rem + 3.0769vw, 3rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMi4ycmVtIiwibWF4Rm9udFNpemUiOiIzcmVtIn0%3D */
118
- --font-size-base: clamp(.9rem, .6538rem + .3846vw, 1rem); /* 64 to 90 rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiLjlyZW0iLCJtYXhGb250U2l6ZSI6IjFyZW0ifQ%3D%3D */
119
- --font-size-lg: clamp(1.2rem, .7077rem + .7692vw, 1.4rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS4ycmVtIiwibWF4Rm9udFNpemUiOiIxLjRyZW0ifQ%3D%3D */
120
- --font-size-md: clamp(1.05rem, .6808rem + .5769vw, 1.2rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS4wNXJlbSIsIm1heEZvbnRTaXplIjoiMS4ycmVtIn0%3D */
121
- --font-size-sm: clamp(.8rem, .5538rem + .3846vw, .9rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiLjhyZW0iLCJtYXhGb250U2l6ZSI6Ii45cmVtIn0%3D */
122
- --font-size-xl: clamp(1.6rem, 1.1077rem + .7692vw, 1.8rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS42cmVtIiwibWF4Rm9udFNpemUiOiIxLjhyZW0ifQ%3D%3D */
123
- --font-size-xs: clamp(.7rem, .4538rem + .3846vw, .8rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiLjdyZW0iLCJtYXhGb250U2l6ZSI6Ii44cmVtIn0%3D */
124
- --font-size-xxs: clamp(.6rem, .3538rem + .3846vw, .7rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiLjZyZW0iLCJtYXhGb250U2l6ZSI6Ii43cmVtIn0%3D */
125
- --font-style-base: normal;
126
- --font-weight-bold: 700;
127
- --font-weight-light: 300;
128
- --font-weight-medium: 500;
129
- --font-weight-regular: 400;
130
- --font-weight-semibold: 600;
131
- --font-weight-xbold: 900;
132
- --font-weight-xlight: 200;
133
- --font-weight-xxlight: 100;
134
-
135
- --form-control-background-color: var(--body-background-color);
136
- --form-control-border-color: #666;
137
- --form-control-border-radius: var(--radius-xxs);
138
- --form-control-border-style: solid;
139
- --form-control-border-width: 1px;
140
- --form-control-disabled-background-color: #ddd;
141
- --form-control-disabled-color: #999;
142
- --form-control-disabled-font-style: italic;
143
- --form-control-disabled-opacity: .7;
144
- --form-control-focus-color: hsl(205 69% 45% / .508);
145
- --form-control-focus-outline-offset: -2px;
146
- --form-control-focus-outline-width: 4px;
147
- --form-control-font-size: var(--font-size-base);
148
- --form-control-font-style: normal;
149
- --form-control-font-weight: var(--font-weight-regular);
150
- --form-control-lg-font-size: var(--font-size-lg);
151
- --form-control-lg-padding-block: var(--size-base);
152
- --form-control-lg-padding-inline: var(--size-md);
153
- --form-control-line-height: 1.2;
154
- --form-control-md-font-size: var(--font-size-md);
155
- --form-control-md-padding-block: var(--size-xs);
156
- --form-control-md-padding-inline: var(--size-sm);
157
- --form-control-padding-block: var(--size-xs);
158
- --form-control-padding-inline: var(--size-sm);
159
- --form-control-placeholder-color: #666;
160
- --form-control-placeholder-font-size: var(--form-control-font-size);
161
- --form-control-placeholder-font-style: italic;
162
- --form-control-placeholder-opacity: .8;
163
- --form-control-readonly-background-color: var(--form-control-background-color);
164
- --form-control-readonly-color: #666;
165
- --form-control-readonly-font-style: italic;
166
- --form-control-readonly-opacity: 1;
167
- --form-control-required-flag-color: #c00;
168
- --form-control-required-flag-content: '\002A';
169
- --form-control-required-flag-font-size: 2em;
170
- --form-control-required-flag-left: 0em;
171
- --form-control-required-flag-top: -.15em;
172
- --form-control-required-label-padding-inline-start: var(--size-base);
173
- --form-control-select-trigger-icon: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22rgb(5%2C%2048%2C%2056)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m2%205%206%206%206-6%22%2F%3E%3C%2Fsvg%3E');
174
- --form-control-sm-font-size: var(--font-size-sm);
175
- --form-control-sm-padding-block: var(--size-xxs);
176
- --form-control-sm-padding-inline: var(--size-xs);
177
- --form-control-static-background-color: transparent;
178
- --form-control-static-color: var(--form-control-text-color);
179
- --form-control-text-color: var(--text-color);
180
- --form-control-xl-font-size: var(--font-size-xl);
181
- --form-control-xl-padding-block: var(--size-md);
182
- --form-control-xl-padding-inline: var(--size-xl);
183
- --form-control-xs-font-size: var(--font-size-xs);
184
- --form-control-xs-padding-block: var(--size-xxs);
185
- --form-control-xs-padding-inline: var(--size-xxs);
186
- --form-end-margin-block-end: var(--size-base);
187
- --form-end-margin-block-start: var(--size-base);
188
- --form-fieldset-border-width: 1px;
189
- --form-group-padding-block: 0 var(--size-base);
190
- --form-input-group-background-color: transparent;
191
- --form-label-color: var(--text-color);
192
- --form-label-font-size: var(--font-size-sm);
193
- --form-label-font-weight: var(--font-weight-semibold);
194
- --form-legend-background-color: transparent;
195
- --form-legend-color: var(--text-color);
196
- --form-user-info-color: var(--text-muted);
197
- --form-user-info-font-size: var(--font-size-xs);
198
- --form-validation-outline-offset: -3px;
199
- --form-validation-outline-width: 3px;
200
-
201
- --grid-cols: 3;
202
- --grid-min-col-width: 6rem;
203
-
204
- --headings-color: var(--text-color);
205
- --headings-font-family: var(--font-family);
206
- --headings-font-weight: var(--font-weight-semibold);
207
- --headings-h1-font-size: var(--font-size-2xl);
208
- --headings-h1-font-weight: var(--headings-font-weight);
209
- --headings-h2-font-size: var(--font-size-xl);
210
- --headings-h3-font-size: var(--font-size-lg);
211
- --headings-h4-font-size: var(--font-size-md);
212
- --headings-line-height: var(--line-height-xs);
213
- --headings-text-align: inherit;
214
-
215
- --inner-nav-gap: var(--size-lg);
216
- --inner-nav-margin-block: var(--size-base);
217
-
218
- --line-height-base: 1.5;
219
- --line-height-sm: 1.4;
220
- --line-height-xs: 1.25;
221
-
222
- --link-active-background-color: var(--primary-100);
223
- --link-active-color: var(--body-background-color);
224
- --link-color: #0d12ae;
225
- --link-focus-outline-color: color-mix(in srgb, var(--link-color) 60%, transparent);
226
- --link-focus-outline-offset: 2px;
227
- --link-focus-outline-width: 2px;
228
- --link-font-weight: var(--font-weight-semibold);
229
- --link-hover-color: var(--link-color);
230
- --link-hover-text-decoration: underline;
231
- --link-hover-text-underline-offset: 2px;
232
- --link-text-decoration: none;
233
- --link-visited-color: #ae0da3;
234
-
235
- --malert-backdrop: rgb(0 0 0 / .7);
236
- --malert-background-color: #fff;
237
- --malert-border-radius: var(--radius-xs);
238
- --malert-box-shadow: 0 .025rem .25rem 0 color-mix(in srgb, var(--malert-box-shadow-color) 15%, transparent), -.01875rem .1875rem .20625rem -.03125rem color-mix(in srgb, var(--malert-box-shadow-color) 15%, transparent), -.03125rem .38125rem .4125rem -.05625rem color-mix(in srgb, var(--malert-box-shadow-color) 14%, transparent), -.05625rem .7rem .75625rem -.0875rem color-mix(in srgb, var(--malert-box-shadow-color) 14%, transparent), -.1rem 1.21875rem 1.31875rem -.11875rem color-mix(in srgb, var(--malert-box-shadow-color) 13%, transparent), -.16875rem 2.04375rem 2.2125rem -.14375rem color-mix(in srgb, var(--malert-box-shadow-color) 13%, transparent), -.26875rem 3.25rem 3.525rem -.175rem color-mix(in srgb, var(--malert-box-shadow-color) 12%, transparent);
239
- --malert-box-shadow-color: #000;
240
- --malert-confirm-bg: hsl(277deg 72% 45%);
241
- --malert-confirm-btn-active-bg: color-mix(in srgb, var(--malert-confirm-bg) 60%, #000);
242
- --malert-confirm-btn-active-border-color: var(--malert-confirm-btn-active-bg);
243
- --malert-confirm-btn-active-fg: var(--malert-confirm-fg);
244
- --malert-confirm-btn-bg: var(--malert-confirm-bg);
245
- --malert-confirm-btn-border-color: var(--malert-confirm-bg);
246
- --malert-confirm-btn-fg: var(--malert-confirm-fg);
247
- --malert-confirm-btn-focus-outline-color: color-mix(in srgb, var(--malert-confirm-bg) 60%, transparent);
248
- --malert-confirm-btn-focus-outline-width: var(--btn-focus-outline-width);
249
- --malert-confirm-btn-hollow-bg: var(--malert-confirm-fg);
250
- --malert-confirm-btn-hollow-fg: var(--malert-confirm-bg);
251
- --malert-confirm-btn-hollow-hover-bg: var(--malert-confirm-bg);
252
- --malert-confirm-btn-hollow-hover-fg: var(--malert-confirm-fg);
253
- --malert-confirm-btn-hover-bg: var(--malert-confirm-fg);
254
- --malert-confirm-btn-hover-border-color: var(--malert-confirm-btn-hover-fg);
255
- --malert-confirm-btn-hover-fg: var(--malert-confirm-bg);
256
- --malert-confirm-fg: #fff;
257
- --malert-error-bg: var(--status-danger-background-color);
258
- --malert-error-fg: var(--status-danger-fg);
259
- --malert-heading-font-family: var(--headings-font-family);
260
- --malert-heading-font-size: var(--headings-h2-font-size);
261
- --malert-heading-font-weight: var(--headings-font-weight);
262
- --malert-heading-line-height: var(--headings-line-height);
263
- --malert-info-bg: var(--status-info-background-color);
264
- --malert-info-fg: var(--status-info-fg);
265
- --malert-success-bg: var(--status-success-background-color);
266
- --malert-success-fg: var(--status-success-fg);
267
- --malert-text-font-family: var(--font-family);
268
- --malert-text-font-size: var(--font-size-base);
269
- --malert-warning-bg: var(--status-warning-background-color);
270
- --malert-warning-fg: var(--status-warning-fg);
271
-
272
- --mpopup-backdrop-color: rgb(0 0 0 / .6);
273
- --mpopup-background-color: var(--body-background-color);
274
- --mpopup-border-radius: var(--size-base);
275
- --mpopup-btn-close-size: 1.6rem;
276
- --mpopup-content-padding: var(--size-base) var(--size-sm) var(--size-sm);
277
- --mpopup-content-scrollbar-padding-i-end: var(--size-md);
278
- --mpopup-drop-shadow: 0 0 .75rem .125rem rgb(0 0 0 / .25);
279
- --mpopup-footer-background-color: #ddd;
280
- --mpopup-footer-color: var(--text-color);
281
- --mpopup-footer-font-size: var(--font-size-base);
282
- --mpopup-footer-padding: var(--size-xs);
283
- --mpopup-header-background-color: #ddd;
284
- --mpopup-header-color: var(--text-color);
285
- --mpopup-header-font-size: var(--font-size-xl);
286
- --mpopup-header-padding: var(--size-xs);
287
- --mpopup-height: max-content;
288
- --mpopup-max-height: 90dvh;
289
- --mpopup-max-width: 70dvw;
290
- --mpopup-min-height: 300px;
291
- --mpopup-min-width: 400px;
292
- --mpopup-width: max-content;
293
-
294
- --overlay-color: rgb(0 0 0 / .6);
295
-
296
- --radius-base: var(--size-base);
297
- --radius-lg: var(--size-lg);
298
- --radius-md: var(--size-md);
299
- --radius-pill: 9999rem;
300
- --radius-sm: var(--size-sm);
301
- --radius-xl: var(--size-xl);
302
- --radius-xs: var(--size-xs);
303
- --radius-xxs: var(--size-xxs);
304
-
305
- --sdt-hover-background-color: var(--btn-primary-background-color);
306
- --sdt-hover-color: var(--btn-primary-color);
307
- --sdt-pagination-border: var(--btn-border-width) var(--neutral-100);
308
- --sdt-pagination-padding-block: var(--size-xxs);
309
- --sdt-pagination-padding-inline: var(--size-xs);
310
- --sdt-thead-hover-background-color: color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent));
311
-
312
- --sf-macro-btn-close-background-color: var(--btn-close-background-color);
313
- --sf-macro-btn-close-position-bottom: auto;
314
- --sf-macro-btn-close-position-left: auto;
315
- --sf-macro-btn-close-position-right: -.5rem;
316
- --sf-macro-btn-close-position-top: -.5rem;
317
- --sf-macro-btn-close-size: var(--btn-close-size);
318
- --sf-macro-rows-border: 1px solid var(--neutral-100);
319
- --sf-macro-rows-border-radius: var(--radius-xs);
320
- --sf-macro-rows-even-background-color: var(--body-background-color);
321
- --sf-macro-rows-hover-background-color: color-mix(in srgb, var(--body-background-color) 95%, #000);
322
- --sf-macro-rows-margin-block-end: var(--size-base);
323
- --sf-macro-rows-padding: var(--size-xs);
324
-
325
- --size-2xl: 3rem;
326
- --size-3xl: 4rem;
327
- --size-base: 1rem;
328
- --size-lg: 1.5rem;
329
- --size-md: 1.2rem;
330
- --size-sm: .75rem;
331
- --size-xl: 2rem;
332
- --size-xs: .5rem;
333
- --size-xxs: .25rem;
334
-
335
- --slide-duration: 500ms;
336
-
337
- --snackbar-background-color: var(--secondary-100);
338
- --snackbar-border-radius: var(--radius-xs);
339
- --snackbar-btn-close-active-background-color: transparent;
340
- --snackbar-btn-close-active-icon-color: var(--snackbar-text-color);
341
- --snackbar-btn-close-background-color: transparent;
342
- --snackbar-btn-close-border-color: transparent;
343
- --snackbar-btn-close-border-radius: 50%;
344
- --snackbar-btn-close-border-width: var(--btn-close-border-width);
345
- --snackbar-btn-close-focus-outline-color: color-mix(in srgb, var(--snackbar-text-color) 50%, transparent);
346
- --snackbar-btn-close-focus-outline-offset: 2px;
347
- --snackbar-btn-close-focus-outline-width: 2px;
348
- --snackbar-btn-close-hover-background-color: color-mix(in srgb, var(--snackbar-text-color) 40%, transparent);
349
- --snackbar-btn-close-hover-border-color: transparent;
350
- --snackbar-btn-close-hover-icon-color: var(--snackbar-background-color);
351
- --snackbar-btn-close-icon-color: var(--snackbar-text-color);
352
- --snackbar-btn-close-size: 1rem;
353
- --snackbar-font-size: var(--font-size-sm);
354
- --snackbar-outer-background-color: var(--secondary-100);
355
- --snackbar-outer-border: none;
356
- --snackbar-outer-border-radius: var(--radius-xs);
357
- --snackbar-outer-drop-shadow: var(--box-shadow-base);
358
- --snackbar-outer-padding-block: 0;
359
- --snackbar-outer-padding-inline: 0;
360
- --snackbar-text-color: var(--secondary-100-fg);
361
-
362
- --spinner-color: var(--primary-100);
363
- --spinner-size: var(--size-lg);
364
- --spinner-stroke-width: 2px;
365
-
366
- --status-danger-background-color: var(--status-danger-color);
367
- --status-danger-border-color: var(--status-danger-color);
368
- --status-danger-color: #c00;
369
- --status-danger-fg: #fff;
370
- --status-info-background-color: var(--status-info-color);
371
- --status-info-border-color: var(--status-info-color);
372
- --status-info-color: #0665c5;
373
- --status-info-fg: #fff;
374
- --status-success-background-color: var(--status-success-color);
375
- --status-success-border-color: var(--status-success-color);
376
- --status-success-color: #046d19;
377
- --status-success-fg: #fff;
378
- --status-warning-background-color: var(--status-warning-color);
379
- --status-warning-border-color: var(--status-warning-color);
380
- --status-warning-color: #fc0;
381
- --status-warning-fg: #4f2900;
382
-
383
- --switch-background-color: var(--neutral-100);
384
- --switch-checked-background-color: var(--primary-100);
385
- --switch-cursor-background-color: var(--body-background-color);
386
-
387
- --table-body-border-width: 1px;
388
- --table-body-tr-alt-bg-color: #efefef;
389
- --table-body-tr-hover-bg-color: #cbcbcb;
390
- --table-border-color: #333;
391
- --table-cell-line-height: 1.3;
392
- --table-cell-padding-block: .3rem;
393
- --table-cell-padding-inline: .6rem;
394
- --table-tfoot-background-color: var(--table-thead-background-color);
395
- --table-tfoot-border-width: var(--table-thead-border-width);
396
- --table-tfoot-font-weight: var(--font-weight-semibold);
397
- --table-thead-background-color: #ddd;
398
- --table-thead-border-width: 3px;
399
-
400
- --text-color: #000;
401
- --text-dim: var(--text-muted);
402
- --text-muted: var(--neutral-100);
403
- --text-negative: #fff;
404
- --text-selected-background-color: #ddd;
405
- --text-selected-color: var(--body-text);
406
-
407
- --uspg-bg-color: hsl(0deg 0% 0% / .7);
408
- --uspg-credits-font-size: var(--font-size-xs);
409
- --uspg-credits-font-weight: var(--font-weight-regular);
410
- --uspg-credits-line-height: var(--line-height-xs);
411
- --uspg-font-family: var(--font-family);
412
- --uspg-font-size: var(--font-size-base);
413
- --uspg-font-variation-settings: unset;
414
- --uspg-font-weight: var(--font-weight-regular);
415
- --uspg-h1-color: var(--uspg-text-color);
416
- --uspg-h1-font-size: var(--font-size-xl);
417
- --uspg-h1-font-variation-settings: unset;
418
- --uspg-h1-font-weight: var(--font-weight-bold);
419
- --uspg-h1-line-height: var(--line-height-xs);
420
- --uspg-icon-box-bg: var(--uspg-link-color);
421
- --uspg-icon-fill-color: #333;
422
- --uspg-icon-hover-box-bg: #fff;
423
- --uspg-line-height: var(--line-height-sm);
424
- --uspg-link-active-color: #f49c29;
425
- --uspg-link-color: #fc0;
426
- --uspg-link-decoration: none;
427
- --uspg-link-focus-outline-color: var(--uspg-link-color);
428
- --uspg-link-focus-outline-offset: 2px;
429
- --uspg-link-focus-outline-style: solid;
430
- --uspg-link-focus-outline-width: 2px;
431
- --uspg-link-hover-background-color: transparent;
432
- --uspg-link-hover-color: var(--uspg-link-color);
433
- --uspg-link-hover-decoration: underline;
434
- --uspg-link-visited-color: #ff117b;
435
- --uspg-loader-color: hsl(0deg 0% 100% / .6);
436
- --uspg-text-color: #fff;
437
-
438
- --z-index-overlay: 99;
439
- --z-index-snackbar: 100;
1
+ @layer project {
2
+
3
+ :root {
4
+ /** ****** COLORS ****** **/
5
+ --accent: #567d0d;
6
+ --accent-fg: #fff;
7
+
8
+ --primary-100: #083865;
9
+ --primary-100-fg: #fff;
10
+
11
+ --secondary-100: #650853;
12
+ --secondary-100-fg: #fff;
13
+
14
+ --neutral-100: #666;
15
+ --neutral-100-fg: #fff;
16
+
17
+ /** ****** LAYOUT ****** **/
18
+ --body-background-color: #fff;
19
+ --body-text: var(--text-color);
20
+
21
+ --layout-container-max-width: 80rem;
22
+
23
+ /* ---------------------- */
24
+
25
+ --alert-border-radius: var(--radius-sm);
26
+ --alert-box-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
27
+
28
+ --badge-background-color: var(--primary-100);
29
+ --badge-color: var(--primary-100-fg);
30
+ --badge-font-size: var(--font-size-xs);
31
+ --badge-font-weight: var(--font-weight-semibold);
32
+ --badge-lg-font-size: var(--font-size-base);
33
+ --badge-lg-font-weight: var(--badge-font-weight);
34
+
35
+ --box-shadow-base: 0 0 .75rem 0 rgb(0 0 0 / .25);
36
+
37
+ --btn-border-radius: var(--form-control-border-radius);
38
+ --btn-border-width: var(--form-control-border-width);
39
+ --btn-close-active-background-color: var(--btn-close-background-color);
40
+ --btn-close-active-icon-color: var(--link-active-color);
41
+ --btn-close-background-color: var(--body-background-color);
42
+ --btn-close-border-color: var(--btn-close-icon-color);
43
+ --btn-close-border-radius: 50%;
44
+ --btn-close-border-width: 2px;
45
+ --btn-close-focus-outline-color: var(--link-focus-outline-color);
46
+ --btn-close-focus-outline-offset: 2px;
47
+ --btn-close-focus-outline-width: 2px;
48
+ --btn-close-hover-background-color: var(--btn-close-icon-color);
49
+ --btn-close-hover-border-color: var(--btn-close-icon-color);
50
+ --btn-close-hover-icon-color: var(--btn-close-background-color);
51
+ --btn-close-icon-bar-size: 2px;
52
+ --btn-close-icon-color: var(--text-color);
53
+ --btn-close-padding: 3px;
54
+ --btn-close-size: 1.5rem;
55
+ --btn-disabled-opacity: var(--form-control-disabled-opacity);
56
+ --btn-focus-outline-width: var(--form-control-focus-outline-width);
57
+ --btn-font-size: var(--form-control-font-size);
58
+ --btn-font-style: var(--form-control-font-style);
59
+ --btn-font-weight: var(--font-weight-semibold);
60
+ --btn-hollow-border-width: calc(var(--btn-border-width) * 2);
61
+ --btn-lg-focus-outline-width: 4px;
62
+ --btn-lg-font-size: var(--font-size-lg);
63
+ --btn-lg-padding-block: var(--size-base);
64
+ --btn-lg-padding-inline: var(--size-md);
65
+ --btn-link-disabled-color: var(--text-muted);
66
+ --btn-link-disabled-font-style: italic;
67
+ --btn-md-focus-outline-width: 3px;
68
+ --btn-md-font-size: var(--font-size-md);
69
+ --btn-md-padding-block: var(--size-xs);
70
+ --btn-md-padding-inline: var(--size-sm);
71
+ --btn-padding-block: var(--size-xs);
72
+ --btn-padding-inline: var(--size-base);
73
+ --btn-primary-active-background-color: color-mix(in srgb, var(--btn-primary-background-color) 60%, #000);
74
+ --btn-primary-active-border-color: var(--btn-primary-active-background-color);
75
+ --btn-primary-active-color: var(--btn-primary-color);
76
+ --btn-primary-background-color: var(--primary-100);
77
+ --btn-primary-border-color: var(--btn-primary-background-color);
78
+ --btn-primary-color: var(--primary-100-fg);
79
+ --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-background-color) 60%, transparent);
80
+ --btn-primary-hollow-background-color: var(--btn-primary-color);
81
+ --btn-primary-hollow-color: var(--btn-primary-background-color);
82
+ --btn-primary-hollow-hover-background-color: var(--btn-primary-background-color);
83
+ --btn-primary-hollow-hover-color: var(--btn-primary-color);
84
+ --btn-primary-hover-background-color: var(--btn-primary-color);
85
+ --btn-primary-hover-border-color: var(--btn-primary-hover-color);
86
+ --btn-primary-hover-color: var(--btn-primary-background-color);
87
+ --btn-secondary-active-background-color: color-mix(in srgb, var(--btn-secondary-background-color) 60%, #000);
88
+ --btn-secondary-active-border-color: var(--btn-secondary-active-background-color);
89
+ --btn-secondary-active-color: var(--btn-secondary-color);
90
+ --btn-secondary-background-color: var(--secondary-100);
91
+ --btn-secondary-border-color: var(--btn-secondary-background-color);
92
+ --btn-secondary-color: var(--secondary-100-fg);
93
+ --btn-secondary-focus-outline-color: color-mix(in srgb, var(--btn-secondary-background-color) 60%, transparent);
94
+ --btn-secondary-hollow-background-color: var(--btn-secondary-color);
95
+ --btn-secondary-hollow-color: var(--btn-secondary-background-color);
96
+ --btn-secondary-hollow-hover-background-color: var(--btn-secondary-background-color);
97
+ --btn-secondary-hollow-hover-color: var(--btn-secondary-color);
98
+ --btn-secondary-hover-background-color: var(--btn-secondary-color);
99
+ --btn-secondary-hover-border-color: var(--btn-secondary-hover-color);
100
+ --btn-secondary-hover-color: var(--btn-secondary-background-color);
101
+ --btn-sm-focus-outline-width: 2px;
102
+ --btn-sm-font-size: var(--font-size-sm);
103
+ --btn-sm-padding-block: var(--size-xxs);
104
+ --btn-sm-padding-inline: var(--size-xs);
105
+ --btn-xl-focus-outline-width: 6px;
106
+ --btn-xl-font-size: var(--font-size-xl);
107
+ --btn-xl-padding-block: var(--size-md);
108
+ --btn-xl-padding-inline: var(--size-xl);
109
+ --btn-xs-focus-outline-width: 1px;
110
+ --btn-xs-font-size: var(--font-size-xs);
111
+ --btn-xs-padding-block: var(--size-xxs);
112
+ --btn-xs-padding-inline: var(--size-xxs);
113
+
114
+ --flex-grid-gap: 1.5rem;
115
+
116
+ --font-family: sans-serif;
117
+ --font-family-mono: 'Monaspace Neon Var', 'Monaspace Neon', 'Aptos Mono', 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Andale Mono', 'Courier New', monospace;
118
+ --font-size-2xl: clamp(2rem, .7692rem + 1.9231vw, 2.5rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMnJlbSIsIm1heEZvbnRTaXplIjoiMi41cmVtIn0%3D */
119
+ --font-size-3xl: clamp(2.2rem, .2308rem + 3.0769vw, 3rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMi4ycmVtIiwibWF4Rm9udFNpemUiOiIzcmVtIn0%3D */
120
+ --font-size-base: clamp(.9rem, .6538rem + .3846vw, 1rem); /* 64 to 90 rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiLjlyZW0iLCJtYXhGb250U2l6ZSI6IjFyZW0ifQ%3D%3D */
121
+ --font-size-lg: clamp(1.2rem, .7077rem + .7692vw, 1.4rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS4ycmVtIiwibWF4Rm9udFNpemUiOiIxLjRyZW0ifQ%3D%3D */
122
+ --font-size-md: clamp(1.05rem, .6808rem + .5769vw, 1.2rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS4wNXJlbSIsIm1heEZvbnRTaXplIjoiMS4ycmVtIn0%3D */
123
+ --font-size-sm: clamp(.8rem, .5538rem + .3846vw, .9rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiLjhyZW0iLCJtYXhGb250U2l6ZSI6Ii45cmVtIn0%3D */
124
+ --font-size-xl: clamp(1.6rem, 1.1077rem + .7692vw, 1.8rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS42cmVtIiwibWF4Rm9udFNpemUiOiIxLjhyZW0ifQ%3D%3D */
125
+ --font-size-xs: clamp(.7rem, .4538rem + .3846vw, .8rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiLjdyZW0iLCJtYXhGb250U2l6ZSI6Ii44cmVtIn0%3D */
126
+ --font-size-xxs: clamp(.6rem, .3538rem + .3846vw, .7rem); /* 64-90rem: https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiLjZyZW0iLCJtYXhGb250U2l6ZSI6Ii43cmVtIn0%3D */
127
+ --font-style-base: normal;
128
+ --font-weight-bold: 700;
129
+ --font-weight-light: 300;
130
+ --font-weight-medium: 500;
131
+ --font-weight-regular: 400;
132
+ --font-weight-semibold: 600;
133
+ --font-weight-xbold: 900;
134
+ --font-weight-xlight: 200;
135
+ --font-weight-xxlight: 100;
136
+
137
+ --form-control-background-color: var(--body-background-color);
138
+ --form-control-border-color: #666;
139
+ --form-control-border-radius: var(--radius-xxs);
140
+ --form-control-border-style: solid;
141
+ --form-control-border-width: 1px;
142
+ --form-control-disabled-background-color: #ddd;
143
+ --form-control-disabled-color: #999;
144
+ --form-control-disabled-font-style: italic;
145
+ --form-control-disabled-opacity: .7;
146
+ --form-control-focus-color: hsl(205 69% 45% / .508);
147
+ --form-control-focus-outline-offset: -2px;
148
+ --form-control-focus-outline-width: 4px;
149
+ --form-control-font-size: var(--font-size-base);
150
+ --form-control-font-style: normal;
151
+ --form-control-font-weight: var(--font-weight-regular);
152
+ --form-control-lg-font-size: var(--font-size-lg);
153
+ --form-control-lg-padding-block: var(--size-base);
154
+ --form-control-lg-padding-inline: var(--size-md);
155
+ --form-control-line-height: 1.2;
156
+ --form-control-md-font-size: var(--font-size-md);
157
+ --form-control-md-padding-block: var(--size-xs);
158
+ --form-control-md-padding-inline: var(--size-sm);
159
+ --form-control-padding-block: var(--size-xs);
160
+ --form-control-padding-inline: var(--size-sm);
161
+ --form-control-placeholder-color: #666;
162
+ --form-control-placeholder-font-size: var(--form-control-font-size);
163
+ --form-control-placeholder-font-style: italic;
164
+ --form-control-placeholder-opacity: .8;
165
+ --form-control-readonly-background-color: var(--form-control-background-color);
166
+ --form-control-readonly-color: #666;
167
+ --form-control-readonly-font-style: italic;
168
+ --form-control-readonly-opacity: 1;
169
+ --form-control-required-flag-color: #c00;
170
+ --form-control-required-flag-content: '\002A';
171
+ --form-control-required-flag-font-size: 2em;
172
+ --form-control-required-flag-left: 0em;
173
+ --form-control-required-flag-top: -.15em;
174
+ --form-control-required-label-padding-inline-start: var(--size-base);
175
+ --form-control-select-trigger-icon: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22rgb(5%2C%2048%2C%2056)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m2%205%206%206%206-6%22%2F%3E%3C%2Fsvg%3E');
176
+ --form-control-sm-font-size: var(--font-size-sm);
177
+ --form-control-sm-padding-block: var(--size-xxs);
178
+ --form-control-sm-padding-inline: var(--size-xs);
179
+ --form-control-static-background-color: transparent;
180
+ --form-control-static-color: var(--form-control-text-color);
181
+ --form-control-text-color: var(--text-color);
182
+ --form-control-xl-font-size: var(--font-size-xl);
183
+ --form-control-xl-padding-block: var(--size-md);
184
+ --form-control-xl-padding-inline: var(--size-xl);
185
+ --form-control-xs-font-size: var(--font-size-xs);
186
+ --form-control-xs-padding-block: var(--size-xxs);
187
+ --form-control-xs-padding-inline: var(--size-xxs);
188
+ --form-end-margin-block-end: var(--size-base);
189
+ --form-end-margin-block-start: var(--size-base);
190
+ --form-fieldset-border-width: 1px;
191
+ --form-group-padding-block: 0 var(--size-base);
192
+ --form-input-group-background-color: transparent;
193
+ --form-label-color: var(--text-color);
194
+ --form-label-font-size: var(--font-size-sm);
195
+ --form-label-font-weight: var(--font-weight-semibold);
196
+ --form-legend-background-color: transparent;
197
+ --form-legend-color: var(--text-color);
198
+ --form-user-info-color: var(--text-muted);
199
+ --form-user-info-font-size: var(--font-size-xs);
200
+ --form-validation-outline-offset: -3px;
201
+ --form-validation-outline-width: 3px;
202
+
203
+ --grid-cols: 3;
204
+ --grid-min-col-width: 6rem;
205
+
206
+ --headings-color: var(--text-color);
207
+ --headings-font-family: var(--font-family);
208
+ --headings-font-weight: var(--font-weight-semibold);
209
+ --headings-h1-font-size: var(--font-size-2xl);
210
+ --headings-h1-font-weight: var(--headings-font-weight);
211
+ --headings-h2-font-size: var(--font-size-xl);
212
+ --headings-h3-font-size: var(--font-size-lg);
213
+ --headings-h4-font-size: var(--font-size-md);
214
+ --headings-line-height: var(--line-height-xs);
215
+ --headings-text-align: inherit;
216
+
217
+ --inner-nav-gap: var(--size-lg);
218
+ --inner-nav-margin-block: var(--size-base);
219
+
220
+ --line-height-base: 1.5;
221
+ --line-height-sm: 1.4;
222
+ --line-height-xs: 1.25;
223
+
224
+ --link-active-background-color: var(--primary-100);
225
+ --link-active-color: var(--body-background-color);
226
+ --link-color: #0d12ae;
227
+ --link-focus-outline-color: color-mix(in srgb, var(--link-color) 60%, transparent);
228
+ --link-focus-outline-offset: 2px;
229
+ --link-focus-outline-width: 2px;
230
+ --link-font-weight: var(--font-weight-semibold);
231
+ --link-hover-color: var(--link-color);
232
+ --link-hover-text-decoration: underline;
233
+ --link-hover-text-underline-offset: 2px;
234
+ --link-text-decoration: none;
235
+ --link-visited-color: #ae0da3;
236
+
237
+ --malert-backdrop: rgb(0 0 0 / .7);
238
+ --malert-background-color: #fff;
239
+ --malert-border-radius: var(--radius-xs);
240
+ --malert-box-shadow: 0 .025rem .25rem 0 color-mix(in srgb, var(--malert-box-shadow-color) 15%, transparent), -.01875rem .1875rem .20625rem -.03125rem color-mix(in srgb, var(--malert-box-shadow-color) 15%, transparent), -.03125rem .38125rem .4125rem -.05625rem color-mix(in srgb, var(--malert-box-shadow-color) 14%, transparent), -.05625rem .7rem .75625rem -.0875rem color-mix(in srgb, var(--malert-box-shadow-color) 14%, transparent), -.1rem 1.21875rem 1.31875rem -.11875rem color-mix(in srgb, var(--malert-box-shadow-color) 13%, transparent), -.16875rem 2.04375rem 2.2125rem -.14375rem color-mix(in srgb, var(--malert-box-shadow-color) 13%, transparent), -.26875rem 3.25rem 3.525rem -.175rem color-mix(in srgb, var(--malert-box-shadow-color) 12%, transparent);
241
+ --malert-box-shadow-color: #000;
242
+ --malert-confirm-bg: hsl(277deg 72% 45%);
243
+ --malert-confirm-btn-active-bg: color-mix(in srgb, var(--malert-confirm-bg) 60%, #000);
244
+ --malert-confirm-btn-active-border-color: var(--malert-confirm-btn-active-bg);
245
+ --malert-confirm-btn-active-fg: var(--malert-confirm-fg);
246
+ --malert-confirm-btn-bg: var(--malert-confirm-bg);
247
+ --malert-confirm-btn-border-color: var(--malert-confirm-bg);
248
+ --malert-confirm-btn-fg: var(--malert-confirm-fg);
249
+ --malert-confirm-btn-focus-outline-color: color-mix(in srgb, var(--malert-confirm-bg) 60%, transparent);
250
+ --malert-confirm-btn-focus-outline-width: var(--btn-focus-outline-width);
251
+ --malert-confirm-btn-hollow-bg: var(--malert-confirm-fg);
252
+ --malert-confirm-btn-hollow-fg: var(--malert-confirm-bg);
253
+ --malert-confirm-btn-hollow-hover-bg: var(--malert-confirm-bg);
254
+ --malert-confirm-btn-hollow-hover-fg: var(--malert-confirm-fg);
255
+ --malert-confirm-btn-hover-bg: var(--malert-confirm-fg);
256
+ --malert-confirm-btn-hover-border-color: var(--malert-confirm-btn-hover-fg);
257
+ --malert-confirm-btn-hover-fg: var(--malert-confirm-bg);
258
+ --malert-confirm-fg: #fff;
259
+ --malert-error-bg: var(--status-danger-background-color);
260
+ --malert-error-fg: var(--status-danger-fg);
261
+ --malert-heading-font-family: var(--headings-font-family);
262
+ --malert-heading-font-size: var(--headings-h2-font-size);
263
+ --malert-heading-font-weight: var(--headings-font-weight);
264
+ --malert-heading-line-height: var(--headings-line-height);
265
+ --malert-info-bg: var(--status-info-background-color);
266
+ --malert-info-fg: var(--status-info-fg);
267
+ --malert-success-bg: var(--status-success-background-color);
268
+ --malert-success-fg: var(--status-success-fg);
269
+ --malert-text-font-family: var(--font-family);
270
+ --malert-text-font-size: var(--font-size-base);
271
+ --malert-warning-bg: var(--status-warning-background-color);
272
+ --malert-warning-fg: var(--status-warning-fg);
273
+
274
+ --mpopup-backdrop-color: rgb(0 0 0 / .6);
275
+ --mpopup-background-color: var(--body-background-color);
276
+ --mpopup-border-radius: var(--size-base);
277
+ --mpopup-btn-close-size: 1.6rem;
278
+ --mpopup-content-padding: var(--size-base) var(--size-sm) var(--size-sm);
279
+ --mpopup-content-scrollbar-padding-i-end: var(--size-md);
280
+ --mpopup-drop-shadow: 0 0 .75rem .125rem rgb(0 0 0 / .25);
281
+ --mpopup-footer-background-color: #ddd;
282
+ --mpopup-footer-color: var(--text-color);
283
+ --mpopup-footer-font-size: var(--font-size-base);
284
+ --mpopup-footer-padding: var(--size-xs);
285
+ --mpopup-header-background-color: #ddd;
286
+ --mpopup-header-color: var(--text-color);
287
+ --mpopup-header-font-size: var(--font-size-xl);
288
+ --mpopup-header-padding: var(--size-xs);
289
+ --mpopup-height: max-content;
290
+ --mpopup-max-height: 90dvh;
291
+ --mpopup-max-width: 70dvw;
292
+ --mpopup-min-height: 300px;
293
+ --mpopup-min-width: 400px;
294
+ --mpopup-width: max-content;
295
+
296
+ --overlay-color: rgb(0 0 0 / .6);
297
+
298
+ --radius-base: var(--size-base);
299
+ --radius-lg: var(--size-lg);
300
+ --radius-md: var(--size-md);
301
+ --radius-pill: 9999rem;
302
+ --radius-sm: var(--size-sm);
303
+ --radius-xl: var(--size-xl);
304
+ --radius-xs: var(--size-xs);
305
+ --radius-xxs: var(--size-xxs);
306
+
307
+ --sdt-hover-background-color: var(--btn-primary-background-color);
308
+ --sdt-hover-color: var(--btn-primary-color);
309
+ --sdt-pagination-border: var(--btn-border-width) var(--neutral-100);
310
+ --sdt-pagination-padding-block: var(--size-xxs);
311
+ --sdt-pagination-padding-inline: var(--size-xs);
312
+ --sdt-thead-hover-background-color: color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent));
313
+
314
+ --sf-macro-btn-close-background-color: var(--btn-close-background-color);
315
+ --sf-macro-btn-close-position-bottom: auto;
316
+ --sf-macro-btn-close-position-left: auto;
317
+ --sf-macro-btn-close-position-right: -.5rem;
318
+ --sf-macro-btn-close-position-top: -.5rem;
319
+ --sf-macro-btn-close-size: var(--btn-close-size);
320
+ --sf-macro-rows-border: 1px solid var(--neutral-100);
321
+ --sf-macro-rows-border-radius: var(--radius-xs);
322
+ --sf-macro-rows-even-background-color: var(--body-background-color);
323
+ --sf-macro-rows-hover-background-color: color-mix(in srgb, var(--body-background-color) 95%, #000);
324
+ --sf-macro-rows-margin-block-end: var(--size-base);
325
+ --sf-macro-rows-padding: var(--size-xs);
326
+
327
+ --size-2xl: 3rem;
328
+ --size-3xl: 4rem;
329
+ --size-base: 1rem;
330
+ --size-lg: 1.5rem;
331
+ --size-md: 1.2rem;
332
+ --size-sm: .75rem;
333
+ --size-xl: 2rem;
334
+ --size-xs: .5rem;
335
+ --size-xxs: .25rem;
336
+
337
+ --slide-duration: 500ms;
338
+
339
+ --snackbar-background-color: var(--secondary-100);
340
+ --snackbar-border-radius: var(--radius-xs);
341
+ --snackbar-btn-close-active-background-color: transparent;
342
+ --snackbar-btn-close-active-icon-color: var(--snackbar-text-color);
343
+ --snackbar-btn-close-background-color: transparent;
344
+ --snackbar-btn-close-border-color: transparent;
345
+ --snackbar-btn-close-border-radius: 50%;
346
+ --snackbar-btn-close-border-width: var(--btn-close-border-width);
347
+ --snackbar-btn-close-focus-outline-color: color-mix(in srgb, var(--snackbar-text-color) 50%, transparent);
348
+ --snackbar-btn-close-focus-outline-offset: 2px;
349
+ --snackbar-btn-close-focus-outline-width: 2px;
350
+ --snackbar-btn-close-hover-background-color: color-mix(in srgb, var(--snackbar-text-color) 40%, transparent);
351
+ --snackbar-btn-close-hover-border-color: transparent;
352
+ --snackbar-btn-close-hover-icon-color: var(--snackbar-background-color);
353
+ --snackbar-btn-close-icon-color: var(--snackbar-text-color);
354
+ --snackbar-btn-close-size: 1rem;
355
+ --snackbar-font-size: var(--font-size-sm);
356
+ --snackbar-outer-background-color: var(--secondary-100);
357
+ --snackbar-outer-border: none;
358
+ --snackbar-outer-border-radius: var(--radius-xs);
359
+ --snackbar-outer-drop-shadow: var(--box-shadow-base);
360
+ --snackbar-outer-padding-block: 0;
361
+ --snackbar-outer-padding-inline: 0;
362
+ --snackbar-text-color: var(--secondary-100-fg);
363
+
364
+ --spinner-color: var(--primary-100);
365
+ --spinner-size: var(--size-lg);
366
+ --spinner-stroke-width: 2px;
367
+
368
+ --status-danger-background-color: var(--status-danger-color);
369
+ --status-danger-border-color: var(--status-danger-color);
370
+ --status-danger-color: #c00;
371
+ --status-danger-fg: #fff;
372
+ --status-info-background-color: var(--status-info-color);
373
+ --status-info-border-color: var(--status-info-color);
374
+ --status-info-color: #0665c5;
375
+ --status-info-fg: #fff;
376
+ --status-success-background-color: var(--status-success-color);
377
+ --status-success-border-color: var(--status-success-color);
378
+ --status-success-color: #046d19;
379
+ --status-success-fg: #fff;
380
+ --status-warning-background-color: var(--status-warning-color);
381
+ --status-warning-border-color: var(--status-warning-color);
382
+ --status-warning-color: #fc0;
383
+ --status-warning-fg: #4f2900;
384
+
385
+ --switch-background-color: var(--neutral-100);
386
+ --switch-checked-background-color: var(--primary-100);
387
+ --switch-cursor-background-color: var(--body-background-color);
388
+
389
+ --table-body-border-width: 1px;
390
+ --table-body-tr-alt-bg-color: #efefef;
391
+ --table-body-tr-hover-bg-color: #cbcbcb;
392
+ --table-border-color: #333;
393
+ --table-cell-line-height: 1.3;
394
+ --table-cell-padding-block: .3rem;
395
+ --table-cell-padding-inline: .6rem;
396
+ --table-tfoot-background-color: var(--table-thead-background-color);
397
+ --table-tfoot-border-width: var(--table-thead-border-width);
398
+ --table-tfoot-font-weight: var(--font-weight-semibold);
399
+ --table-thead-background-color: #ddd;
400
+ --table-thead-border-width: 3px;
401
+
402
+ --text-color: #000;
403
+ --text-dim: var(--text-muted);
404
+ --text-muted: var(--neutral-100);
405
+ --text-negative: #fff;
406
+ --text-selected-background-color: #ddd;
407
+ --text-selected-color: var(--body-text);
408
+
409
+ --uspg-bg-color: hsl(0deg 0% 0% / .7);
410
+ --uspg-credits-font-size: var(--font-size-xs);
411
+ --uspg-credits-font-weight: var(--font-weight-regular);
412
+ --uspg-credits-line-height: var(--line-height-xs);
413
+ --uspg-font-family: var(--font-family);
414
+ --uspg-font-size: var(--font-size-base);
415
+ --uspg-font-variation-settings: unset;
416
+ --uspg-font-weight: var(--font-weight-regular);
417
+ --uspg-h1-color: var(--uspg-text-color);
418
+ --uspg-h1-font-size: var(--font-size-xl);
419
+ --uspg-h1-font-variation-settings: unset;
420
+ --uspg-h1-font-weight: var(--font-weight-bold);
421
+ --uspg-h1-line-height: var(--line-height-xs);
422
+ --uspg-icon-box-bg: var(--uspg-link-color);
423
+ --uspg-icon-fill-color: #333;
424
+ --uspg-icon-hover-box-bg: #fff;
425
+ --uspg-line-height: var(--line-height-sm);
426
+ --uspg-link-active-color: #f49c29;
427
+ --uspg-link-color: #fc0;
428
+ --uspg-link-decoration: none;
429
+ --uspg-link-focus-outline-color: var(--uspg-link-color);
430
+ --uspg-link-focus-outline-offset: 2px;
431
+ --uspg-link-focus-outline-style: solid;
432
+ --uspg-link-focus-outline-width: 2px;
433
+ --uspg-link-hover-background-color: transparent;
434
+ --uspg-link-hover-color: var(--uspg-link-color);
435
+ --uspg-link-hover-decoration: underline;
436
+ --uspg-link-visited-color: #ff117b;
437
+ --uspg-loader-color: hsl(0deg 0% 100% / .6);
438
+ --uspg-text-color: #fff;
439
+
440
+ --z-index-overlay: 99;
441
+ --z-index-snackbar: 100;
442
+ }
440
443
  }
package/src/minimo.css CHANGED
@@ -1,4 +1,4 @@
1
- /* project e overrides sono destinati all'uso nel progetto che implementa minimo */
1
+ /* see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer */
2
2
  @layer reset, base, components, utilities, project, overrides;
3
3
 
4
4
  /* @import '@src/fonts.css'; */