@datrix-team-product/website-ds 0.2.0 → 0.2.2
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.
- package/dist/bricks-preview.css +2105 -55
- package/package.json +1 -1
- package/src/acss-live.json +33 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@datrix-team-product/website-ds",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "Design tokens for the Datrix website design system \u2014 evidence-based reconstruction (AGENTS.md). Scoped name confirmed (Gate G3 D10).",
|
|
5
5
|
"license": "SEE LICENSE IN ../../LICENSE",
|
|
6
6
|
"type": "module",
|
package/src/acss-live.json
CHANGED
|
@@ -1,6 +1,33 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-10-
|
|
3
|
-
"source": "data/raw/assets/datrixgroup.com/wp-content/uploads/automatic-css/automatic.css",
|
|
2
|
+
"generatedAt": "2026-10-23T11:07:45.432Z",
|
|
3
|
+
"source": "data/raw/assets/datrixgroup.com/wp-content/uploads/automatic-css/{automatic,automatic-bricks}.css + captures/home inline vars",
|
|
4
|
+
"inline": {
|
|
5
|
+
"--mm-pad-v": "var(--space-m)",
|
|
6
|
+
"--mm-pad-h": "var(--gutter)",
|
|
7
|
+
"--brxe-toggle-scale": "1",
|
|
8
|
+
"--pure-white": "#FFFFFF",
|
|
9
|
+
"--white": "#F8F8F8",
|
|
10
|
+
"--black": "#0f0f0f",
|
|
11
|
+
"--fill-white": "var(--white)",
|
|
12
|
+
"--semi-dark-medium": "#595959",
|
|
13
|
+
"--btn-icon-size": "1.4rem",
|
|
14
|
+
"--accordion-icon-size": "2.4rem",
|
|
15
|
+
"--list-icon-size": "2.4rem",
|
|
16
|
+
"--square-icon": "clamp(3rem, 1.2rem + 6vw, 6rem)",
|
|
17
|
+
"--T1": "clamp(5rem, 3.857rem + 3.571vw, 9rem)",
|
|
18
|
+
"--T2": "clamp(4.2rem, 3.571rem + 1.964vw, 6.4rem)",
|
|
19
|
+
"--space-xs": "clamp(0.4rem, 0.4rem, 0.4rem)",
|
|
20
|
+
"--space-s": "clamp(0.8rem, 0.8rem, 0.8rem)",
|
|
21
|
+
"--space-m": "clamp(1.2rem, calc(0.52vw + 1.05rem), 1.6rem)",
|
|
22
|
+
"--space-l": "clamp(1.6rem, calc(0.52vw + 1.45rem), 2.0rem)",
|
|
23
|
+
"--space-xl": "clamp(1.8rem, calc(0.78vw + 1.58rem), 2.4rem)",
|
|
24
|
+
"--space-xxl": "clamp(2.4rem, calc(1.04vw + 2.11rem), 3.2rem)",
|
|
25
|
+
"--space-48": "clamp(2.8rem, calc(2.09vw + 2.15rem), 4.8rem)",
|
|
26
|
+
"--space-60": "clamp(3.2rem, calc(3.65vw + 1.83rem), 6.0rem)",
|
|
27
|
+
"--space-80": "clamp(4.0rem, calc(5.22vw + 2.05rem), 8.0rem)",
|
|
28
|
+
"--section-padding-block": "clamp(4rem, calc(5.22vw + 2rem), 8rem)",
|
|
29
|
+
"--website-max-width": "2000px"
|
|
30
|
+
},
|
|
4
31
|
"root": {
|
|
5
32
|
"--primary-hex": "#053fbb",
|
|
6
33
|
"--primary-hsl": "221 95% 38%",
|
|
@@ -834,5 +861,9 @@
|
|
|
834
861
|
"--section-padding-x": "6rem",
|
|
835
862
|
"--gutter": "6rem"
|
|
836
863
|
}
|
|
864
|
+
},
|
|
865
|
+
"rules": {
|
|
866
|
+
"base": "html {\nfont-size: var(--root-font-size) !important;\n scroll-behavior: smooth;\n}\n\n*, *::before, *::after {\nbox-sizing: border-box;\n}\n\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n -webkit-animation-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n -webkit-animation-iteration-count: 1 !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\nbody {\n font-family: \"Outfit\";\n font-weight: 300;\n}\n\ninput, button, textarea, select {\nfont: inherit;\n}\n\nbody:where(:not(.block-editor-writing-flow, .editor-styles-wrapper)) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {\nmargin-block: 0;\n}\n\n:where(section:not(section section)) {\npadding-block: var(--section-padding-block);\n padding-inline: var(--gutter);\n}\n\nbody:where(.bricks-is-frontend), body:where(:not(.bricks-is-frontend)) {\ncolor: var(--body-color, var(--neutral-dark));\n}\n\n[class*=\"btn--\"]:where(:not(.btn--none, .wp-block-button)) {\nbackground: var(--btn-background);\n color: var(--btn-text-color);\n padding-block: var(--btn-padding-block);\n padding-inline: var(--btn-padding-inline);\n min-inline-size: var(--btn-min-width);\n line-height: var(--btn-line-height);\n font-size: var(--btn-font-size, var(--text-m));\n font-weight: var(--btn-font-weight);\n font-style: var(--btn-font-style);\n text-transform: var(--btn-text-transform);\n letter-spacing: var(--btn-letter-spacing);\n text-decoration: var(--btn-text-decoration);\n border-width: var(--btn-border-width);\n border-style: var(--btn-border-style);\n border-radius: var(--btn-radius);\n border-color: var(--btn-border-color);\n transition: var(--btn-transition, var(--transition));\n justify-content: var(--btn-justify-content, center);\n text-align: var(--btn-text-align, center);\n}\n\n@media (hover: hover) and (pointer: fine) {\n [class*=\"btn--\"]:where(:not(.btn--none, .wp-block-button)):hover {\n background: var(--btn-background-hover);\n color: var(--btn-text-color-hover);\n border-color: var(--btn-border-color-hover);\n text-decoration: var(--btn-text-decoration-hover);\n }\n}\n\n[class*=\"btn--\"]:where(:not(.btn--none, .wp-block-button)):focus {\noutline-style: solid;\n outline-color: var(--focus-color);\n outline-width: var(--focus-width);\n outline-offset: var(--focus-offset);\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-family: \"Outfit\";\n font-weight: 300;\n}\nh1 {\n font-weight: 200;\n font-family: \"Outfit\";\n}\na {\n color: inherit;\n}",
|
|
867
|
+
"utilities": ".bg--primary {\nbackground-color: var(--primary);\n}\n\n.bg--primary-hover {\nbackground-color: var(--primary-hover);\n}\n\n.bg--primary-ultra-light {\nbackground-color: var(--primary-ultra-light);\n}\n\n.bg--primary-light {\nbackground-color: var(--primary-light);\n}\n\n.bg--primary-semi-light {\nbackground-color: var(--primary-semi-light);\n}\n\n.bg--primary-semi-dark {\nbackground-color: var(--primary-semi-dark);\n}\n\n.bg--primary-dark {\nbackground-color: var(--primary-dark);\n}\n\n.bg--primary-ultra-dark {\nbackground-color: var(--primary-ultra-dark);\n}\n\n.bg--primary-comp {\nbackground-color: var(--primary-comp);\n}\n\n.bg--primary-medium {\nbackground-color: var(--primary-medium);\n}\n\n.bg--primary-trans-10 {\nbackground-color: var(--primary-trans-10);\n}\n\n.bg--primary-trans-20 {\nbackground-color: var(--primary-trans-20);\n}\n\n.bg--primary-trans-30 {\nbackground-color: var(--primary-trans-30);\n}\n\n.bg--primary-trans-40 {\nbackground-color: var(--primary-trans-40);\n}\n\n.bg--primary-trans-50 {\nbackground-color: var(--primary-trans-50);\n}\n\n.bg--primary-trans-60 {\nbackground-color: var(--primary-trans-60);\n}\n\n.bg--primary-trans-70 {\nbackground-color: var(--primary-trans-70);\n}\n\n.bg--primary-trans-80 {\nbackground-color: var(--primary-trans-80);\n}\n\n.bg--primary-trans-90 {\nbackground-color: var(--primary-trans-90);\n}\n\n.bg--primary-light-trans-10 {\nbackground-color: var(--primary-light-trans-10);\n}\n\n.bg--primary-light-trans-20 {\nbackground-color: var(--primary-light-trans-20);\n}\n\n.bg--primary-light-trans-30 {\nbackground-color: var(--primary-light-trans-30);\n}\n\n.bg--primary-light-trans-40 {\nbackground-color: var(--primary-light-trans-40);\n}\n\n.bg--primary-light-trans-50 {\nbackground-color: var(--primary-light-trans-50);\n}\n\n.bg--primary-light-trans-60 {\nbackground-color: var(--primary-light-trans-60);\n}\n\n.bg--primary-light-trans-70 {\nbackground-color: var(--primary-light-trans-70);\n}\n\n.bg--primary-light-trans-80 {\nbackground-color: var(--primary-light-trans-80);\n}\n\n.bg--primary-light-trans-90 {\nbackground-color: var(--primary-light-trans-90);\n}\n\n.bg--primary-dark-trans-10 {\nbackground-color: var(--primary-dark-trans-10);\n}\n\n.bg--primary-dark-trans-20 {\nbackground-color: var(--primary-dark-trans-20);\n}\n\n.bg--primary-dark-trans-30 {\nbackground-color: var(--primary-dark-trans-30);\n}\n\n.bg--primary-dark-trans-40 {\nbackground-color: var(--primary-dark-trans-40);\n}\n\n.bg--primary-dark-trans-50 {\nbackground-color: var(--primary-dark-trans-50);\n}\n\n.bg--primary-dark-trans-60 {\nbackground-color: var(--primary-dark-trans-60);\n}\n\n.bg--primary-dark-trans-70 {\nbackground-color: var(--primary-dark-trans-70);\n}\n\n.bg--primary-dark-trans-80 {\nbackground-color: var(--primary-dark-trans-80);\n}\n\n.bg--primary-dark-trans-90 {\nbackground-color: var(--primary-dark-trans-90);\n}\n\n.bg--primary-ultra-dark-trans-10 {\nbackground-color: var(--primary-ultra-dark-trans-10);\n}\n\n.bg--primary-ultra-dark-trans-20 {\nbackground-color: var(--primary-ultra-dark-trans-20);\n}\n\n.bg--primary-ultra-dark-trans-30 {\nbackground-color: var(--primary-ultra-dark-trans-30);\n}\n\n.bg--primary-ultra-dark-trans-40 {\nbackground-color: var(--primary-ultra-dark-trans-40);\n}\n\n.bg--primary-ultra-dark-trans-50 {\nbackground-color: var(--primary-ultra-dark-trans-50);\n}\n\n.bg--primary-ultra-dark-trans-60 {\nbackground-color: var(--primary-ultra-dark-trans-60);\n}\n\n.bg--primary-ultra-dark-trans-70 {\nbackground-color: var(--primary-ultra-dark-trans-70);\n}\n\n.bg--primary-ultra-dark-trans-80 {\nbackground-color: var(--primary-ultra-dark-trans-80);\n}\n\n.bg--primary-ultra-dark-trans-90 {\nbackground-color: var(--primary-ultra-dark-trans-90);\n}\n\n.bg--secondary {\nbackground-color: var(--secondary);\n}\n\n.bg--secondary-hover {\nbackground-color: var(--secondary-hover);\n}\n\n.bg--secondary-ultra-light {\nbackground-color: var(--secondary-ultra-light);\n}\n\n.bg--secondary-light {\nbackground-color: var(--secondary-light);\n}\n\n.bg--secondary-semi-light {\nbackground-color: var(--secondary-semi-light);\n}\n\n.bg--secondary-semi-dark {\nbackground-color: var(--secondary-semi-dark);\n}\n\n.bg--secondary-dark {\nbackground-color: var(--secondary-dark);\n}\n\n.bg--secondary-ultra-dark {\nbackground-color: var(--secondary-ultra-dark);\n}\n\n.bg--secondary-comp {\nbackground-color: var(--secondary-comp);\n}\n\n.bg--secondary-medium {\nbackground-color: var(--secondary-medium);\n}\n\n.bg--secondary-trans-10 {\nbackground-color: var(--secondary-trans-10);\n}\n\n.bg--secondary-trans-20 {\nbackground-color: var(--secondary-trans-20);\n}\n\n.bg--secondary-trans-30 {\nbackground-color: var(--secondary-trans-30);\n}\n\n.bg--secondary-trans-40 {\nbackground-color: var(--secondary-trans-40);\n}\n\n.bg--secondary-trans-50 {\nbackground-color: var(--secondary-trans-50);\n}\n\n.bg--secondary-trans-60 {\nbackground-color: var(--secondary-trans-60);\n}\n\n.bg--secondary-trans-70 {\nbackground-color: var(--secondary-trans-70);\n}\n\n.bg--secondary-trans-80 {\nbackground-color: var(--secondary-trans-80);\n}\n\n.bg--secondary-trans-90 {\nbackground-color: var(--secondary-trans-90);\n}\n\n.bg--secondary-light-trans-10 {\nbackground-color: var(--secondary-light-trans-10);\n}\n\n.bg--secondary-light-trans-20 {\nbackground-color: var(--secondary-light-trans-20);\n}\n\n.bg--secondary-light-trans-30 {\nbackground-color: var(--secondary-light-trans-30);\n}\n\n.bg--secondary-light-trans-40 {\nbackground-color: var(--secondary-light-trans-40);\n}\n\n.bg--secondary-light-trans-50 {\nbackground-color: var(--secondary-light-trans-50);\n}\n\n.bg--secondary-light-trans-60 {\nbackground-color: var(--secondary-light-trans-60);\n}\n\n.bg--secondary-light-trans-70 {\nbackground-color: var(--secondary-light-trans-70);\n}\n\n.bg--secondary-light-trans-80 {\nbackground-color: var(--secondary-light-trans-80);\n}\n\n.bg--secondary-light-trans-90 {\nbackground-color: var(--secondary-light-trans-90);\n}\n\n.bg--secondary-dark-trans-10 {\nbackground-color: var(--secondary-dark-trans-10);\n}\n\n.bg--secondary-dark-trans-20 {\nbackground-color: var(--secondary-dark-trans-20);\n}\n\n.bg--secondary-dark-trans-30 {\nbackground-color: var(--secondary-dark-trans-30);\n}\n\n.bg--secondary-dark-trans-40 {\nbackground-color: var(--secondary-dark-trans-40);\n}\n\n.bg--secondary-dark-trans-50 {\nbackground-color: var(--secondary-dark-trans-50);\n}\n\n.bg--secondary-dark-trans-60 {\nbackground-color: var(--secondary-dark-trans-60);\n}\n\n.bg--secondary-dark-trans-70 {\nbackground-color: var(--secondary-dark-trans-70);\n}\n\n.bg--secondary-dark-trans-80 {\nbackground-color: var(--secondary-dark-trans-80);\n}\n\n.bg--secondary-dark-trans-90 {\nbackground-color: var(--secondary-dark-trans-90);\n}\n\n.bg--secondary-ultra-dark-trans-10 {\nbackground-color: var(--secondary-ultra-dark-trans-10);\n}\n\n.bg--secondary-ultra-dark-trans-20 {\nbackground-color: var(--secondary-ultra-dark-trans-20);\n}\n\n.bg--secondary-ultra-dark-trans-30 {\nbackground-color: var(--secondary-ultra-dark-trans-30);\n}\n\n.bg--secondary-ultra-dark-trans-40 {\nbackground-color: var(--secondary-ultra-dark-trans-40);\n}\n\n.bg--secondary-ultra-dark-trans-50 {\nbackground-color: var(--secondary-ultra-dark-trans-50);\n}\n\n.bg--secondary-ultra-dark-trans-60 {\nbackground-color: var(--secondary-ultra-dark-trans-60);\n}\n\n.bg--secondary-ultra-dark-trans-70 {\nbackground-color: var(--secondary-ultra-dark-trans-70);\n}\n\n.bg--secondary-ultra-dark-trans-80 {\nbackground-color: var(--secondary-ultra-dark-trans-80);\n}\n\n.bg--secondary-ultra-dark-trans-90 {\nbackground-color: var(--secondary-ultra-dark-trans-90);\n}\n\n.bg--accent {\nbackground-color: var(--accent);\n}\n\n.bg--accent-hover {\nbackground-color: var(--accent-hover);\n}\n\n.bg--accent-ultra-light {\nbackground-color: var(--accent-ultra-light);\n}\n\n.bg--accent-light {\nbackground-color: var(--accent-light);\n}\n\n.bg--accent-semi-light {\nbackground-color: var(--accent-semi-light);\n}\n\n.bg--accent-semi-dark {\nbackground-color: var(--accent-semi-dark);\n}\n\n.bg--accent-dark {\nbackground-color: var(--accent-dark);\n}\n\n.bg--accent-ultra-dark {\nbackground-color: var(--accent-ultra-dark);\n}\n\n.bg--accent-comp {\nbackground-color: var(--accent-comp);\n}\n\n.bg--accent-medium {\nbackground-color: var(--accent-medium);\n}\n\n.bg--neutral {\nbackground-color: var(--neutral);\n}\n\n.bg--neutral-hover {\nbackground-color: var(--neutral-hover);\n}\n\n.bg--neutral-ultra-light {\nbackground-color: var(--neutral-ultra-light);\n}\n\n.bg--neutral-light {\nbackground-color: var(--neutral-light);\n}\n\n.bg--neutral-semi-light {\nbackground-color: var(--neutral-semi-light);\n}\n\n.bg--neutral-semi-dark {\nbackground-color: var(--neutral-semi-dark);\n}\n\n.bg--neutral-dark {\nbackground-color: var(--neutral-dark);\n}\n\n.bg--neutral-ultra-dark {\nbackground-color: var(--neutral-ultra-dark);\n}\n\n.bg--neutral-comp {\nbackground-color: var(--neutral-comp);\n}\n\n.bg--neutral-medium {\nbackground-color: var(--neutral-medium);\n}\n\n.bg--neutral-trans-10 {\nbackground-color: var(--neutral-trans-10);\n}\n\n.bg--neutral-trans-20 {\nbackground-color: var(--neutral-trans-20);\n}\n\n.bg--neutral-trans-30 {\nbackground-color: var(--neutral-trans-30);\n}\n\n.bg--neutral-trans-40 {\nbackground-color: var(--neutral-trans-40);\n}\n\n.bg--neutral-trans-50 {\nbackground-color: var(--neutral-trans-50);\n}\n\n.bg--neutral-trans-60 {\nbackground-color: var(--neutral-trans-60);\n}\n\n.bg--neutral-trans-70 {\nbackground-color: var(--neutral-trans-70);\n}\n\n.bg--neutral-trans-80 {\nbackground-color: var(--neutral-trans-80);\n}\n\n.bg--neutral-trans-90 {\nbackground-color: var(--neutral-trans-90);\n}\n\n.bg--neutral-light-trans-10 {\nbackground-color: var(--neutral-light-trans-10);\n}\n\n.bg--neutral-light-trans-20 {\nbackground-color: var(--neutral-light-trans-20);\n}\n\n.bg--neutral-light-trans-30 {\nbackground-color: var(--neutral-light-trans-30);\n}\n\n.bg--neutral-light-trans-40 {\nbackground-color: var(--neutral-light-trans-40);\n}\n\n.bg--neutral-light-trans-50 {\nbackground-color: var(--neutral-light-trans-50);\n}\n\n.bg--neutral-light-trans-60 {\nbackground-color: var(--neutral-light-trans-60);\n}\n\n.bg--neutral-light-trans-70 {\nbackground-color: var(--neutral-light-trans-70);\n}\n\n.bg--neutral-light-trans-80 {\nbackground-color: var(--neutral-light-trans-80);\n}\n\n.bg--neutral-light-trans-90 {\nbackground-color: var(--neutral-light-trans-90);\n}\n\n.bg--white {\nbackground-color: var(--white);\n}\n\n.bg--black {\nbackground-color: var(--black);\n}\n\n.bg--white-trans-10 {\nbackground-color: var(--white-trans-10);\n}\n\n.bg--white-trans-20 {\nbackground-color: var(--white-trans-20);\n}\n\n.bg--white-trans-30 {\nbackground-color: var(--white-trans-30);\n}\n\n.bg--white-trans-40 {\nbackground-color: var(--white-trans-40);\n}\n\n.bg--white-trans-50 {\nbackground-color: var(--white-trans-50);\n}\n\n.bg--white-trans-60 {\nbackground-color: var(--white-trans-60);\n}\n\n.bg--white-trans-70 {\nbackground-color: var(--white-trans-70);\n}\n\n.bg--white-trans-80 {\nbackground-color: var(--white-trans-80);\n}\n\n.bg--white-trans-90 {\nbackground-color: var(--white-trans-90);\n}\n\n.bg--black-trans-10 {\nbackground-color: var(--black-trans-10);\n}\n\n.bg--black-trans-20 {\nbackground-color: var(--black-trans-20);\n}\n\n.bg--black-trans-30 {\nbackground-color: var(--black-trans-30);\n}\n\n.bg--black-trans-40 {\nbackground-color: var(--black-trans-40);\n}\n\n.bg--black-trans-50 {\nbackground-color: var(--black-trans-50);\n}\n\n.bg--black-trans-60 {\nbackground-color: var(--black-trans-60);\n}\n\n.bg--black-trans-70 {\nbackground-color: var(--black-trans-70);\n}\n\n.bg--black-trans-80 {\nbackground-color: var(--black-trans-80);\n}\n\n.bg--black-trans-90 {\nbackground-color: var(--black-trans-90);\n}\n\n.bg--danger {\nbackground-color: var(--danger);\n}\n\n.bg--danger-hover {\nbackground-color: var(--danger-hover);\n}\n\n.bg--danger-ultra-light {\nbackground-color: var(--danger-ultra-light);\n}\n\n.bg--danger-light {\nbackground-color: var(--danger-light);\n}\n\n.bg--danger-semi-light {\nbackground-color: var(--danger-semi-light);\n}\n\n.bg--danger-semi-dark {\nbackground-color: var(--danger-semi-dark);\n}\n\n.bg--danger-dark {\nbackground-color: var(--danger-dark);\n}\n\n.bg--danger-ultra-dark {\nbackground-color: var(--danger-ultra-dark);\n}\n\n.bg--danger-comp {\nbackground-color: var(--danger-comp);\n}\n\n.bg--danger-medium {\nbackground-color: var(--danger-medium);\n}\n\n.bg--success {\nbackground-color: var(--success);\n}\n\n.bg--success-hover {\nbackground-color: var(--success-hover);\n}\n\n.bg--success-ultra-light {\nbackground-color: var(--success-ultra-light);\n}\n\n.bg--success-light {\nbackground-color: var(--success-light);\n}\n\n.bg--success-semi-light {\nbackground-color: var(--success-semi-light);\n}\n\n.bg--success-semi-dark {\nbackground-color: var(--success-semi-dark);\n}\n\n.bg--success-dark {\nbackground-color: var(--success-dark);\n}\n\n.bg--success-ultra-dark {\nbackground-color: var(--success-ultra-dark);\n}\n\n.bg--success-comp {\nbackground-color: var(--success-comp);\n}\n\n.bg--success-medium {\nbackground-color: var(--success-medium);\n}\n\n.bg--ultra-light {\nbackground-color: var(--bg-ultra-light);\n}\n\n.bg--light {\nbackground-color: var(--bg-light);\n}\n\n.bg--dark {\nbackground-color: var(--bg-dark);\n}\n\n.bg--ultra-dark {\nbackground-color: var(--bg-ultra-dark);\n}\n\n.bg--ultra-light :where(h1, h2, h3, h4, h5, h6) {\n--heading-color: var(--bg-ultra-light-heading);\n --h1-color: var(--bg-ultra-light-heading);\n --h2-color: var(--bg-ultra-light-heading);\n --h3-color: var(--bg-ultra-light-heading);\n --h4-color: var(--bg-ultra-light-heading);\n --h5-color: var(--bg-ultra-light-heading);\n --h6-color: var(--bg-ultra-light-heading);\n color: var(--bg-ultra-light-heading);\n}\n\n.bg--light :where(h1, h2, h3, h4, h5, h6) {\n--heading-color: var(--bg-light-heading);\n --h1-color: var(--bg-light-heading);\n --h2-color: var(--bg-light-heading);\n --h3-color: var(--bg-light-heading);\n --h4-color: var(--bg-light-heading);\n --h5-color: var(--bg-light-heading);\n --h6-color: var(--bg-light-heading);\n color: var(--bg-light-heading);\n}\n\n.bg--dark :where(h1, h2, h3, h4, h5, h6), .texture-1 :where(h1, h2, h3, h4, h5, h6), .overlay-1 :where(h1, h2, h3, h4, h5, h6) {\n--heading-color: var(--bg-dark-heading);\n --h1-color: var(--bg-dark-heading);\n --h2-color: var(--bg-dark-heading);\n --h3-color: var(--bg-dark-heading);\n --h4-color: var(--bg-dark-heading);\n --h5-color: var(--bg-dark-heading);\n --h6-color: var(--bg-dark-heading);\n color: var(--bg-dark-heading);\n}\n\n.bg--ultra-dark :where(h1, h2, h3, h4, h5, h6) {\n--heading-color: var(--bg-ultra-dark-heading);\n --h1-color: var(--bg-ultra-dark-heading);\n --h2-color: var(--bg-ultra-dark-heading);\n --h3-color: var(--bg-ultra-dark-heading);\n --h4-color: var(--bg-ultra-dark-heading);\n --h5-color: var(--bg-ultra-dark-heading);\n --h6-color: var(--bg-ultra-dark-heading);\n color: var(--bg-ultra-dark-heading);\n}\n\n.bg--ultra-light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {\ncolor: var(--bg-ultra-light-link);\n}\n\n.bg--ultra-light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {\ncolor: var(--bg-ultra-light-link-hover);\n}\n\n.bg--light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {\ncolor: var(--bg-light-link);\n}\n\n.bg--light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {\ncolor: var(--bg-light-link-hover);\n}\n\n.bg--dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)), .texture-1 :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)), .overlay-1 :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {\ncolor: var(--bg-dark-link);\n}\n\n.bg--dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover, .texture-1 :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover, .overlay-1 :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {\ncolor: var(--bg-dark-link-hover);\n}\n\n.bg--ultra-dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {\ncolor: var(--bg-ultra-dark-link);\n}\n\n.bg--ultra-dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {\ncolor: var(--bg-ultra-dark-link-hover);\n}\n\n.bg--ultra-light [class*=\"btn--\"] {\n--btn-background: var(--primary);\n --btn-background-hover: var(--primary);\n --btn-text-color: var(--white);\n --btn-text-color-hover: var(--white);\n --btn-border-color: var(--primary);\n --btn-border-color-hover: var(--primary);\n --focus-color: var(--danger);\n}\n\n.bg--ultra-light [class*=\"btn--\"].btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--primary-hover);\n --btn-text-color: var(--primary);\n --btn-text-color-hover: var(--primary-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--primary);\n --btn-border-color-hover: var(--primary-hover);\n --focus-color: var(--danger);\n}\n\n.bg--light [class*=\"btn--\"] {\n--btn-background: var(--primary);\n --btn-background-hover: var(--primary);\n --btn-text-color: var(--white);\n --btn-text-color-hover: var(--white);\n --btn-border-color: var(--primary);\n --btn-border-color-hover: var(--primary);\n --focus-color: var(--danger);\n}\n\n.bg--light [class*=\"btn--\"].btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--primary-hover);\n --btn-text-color: var(--primary);\n --btn-text-color-hover: var(--primary-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--primary);\n --btn-border-color-hover: var(--primary-hover);\n --focus-color: var(--danger);\n}\n\n.bg--ultra-dark [class*=\"btn--\"] {\n--btn-background: var(--accent);\n --btn-background-hover: var(--accent-hover);\n --btn-text-color: var(--white);\n --btn-text-color-hover: var(--accent-ultra-light);\n --btn-border-color: var(--accent);\n --btn-border-color-hover: var(--accent-hover);\n --focus-color: var(--accent-dark);\n}\n\n.btn--primary {\n--btn-background: var(--primary);\n --btn-background-hover: var(--primary);\n --btn-text-color: var(--white);\n --btn-text-color-hover: var(--white);\n --btn-border-color: var(--primary);\n --btn-border-color-hover: var(--primary);\n --focus-color: var(--danger);\n}\n\n.btn--primary-dark {\n--btn-background: var(--primary-dark);\n --btn-background-hover: var(--primary-ultra-dark);\n --btn-text-color: var(--primary-ultra-light);\n --btn-text-color-hover: var(--primary-ultra-light);\n --btn-border-color: var(--primary-dark);\n --btn-border-color-hover: var(--primary-ultra-dark);\n --focus-color: var(--primary-semi-dark);\n}\n\n.btn--primary-light {\n--btn-background: var(--primary-ultra-light);\n --btn-background-hover: var(--primary-light);\n --btn-text-color: var(--primary);\n --btn-text-color-hover: var(--primary-ultra-dark);\n --btn-border-color: var(--primary-ultra-light);\n --btn-border-color-hover: var(--primary-light);\n --focus-color: var(--primary-light);\n}\n\n.btn--primary.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--primary-hover);\n --btn-text-color: var(--primary);\n --btn-text-color-hover: var(--primary-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--primary);\n --btn-border-color-hover: var(--primary-hover);\n --focus-color: var(--danger);\n}\n\n.btn--primary-dark.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--primary-dark);\n --btn-text-color: var(--primary-dark);\n --btn-text-color-hover: var(--primary-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--primary-dark);\n --btn-border-color-hover: var(--primary-dark);\n --focus-color: var(--danger);\n}\n\n.btn--primary-light.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--primary-light);\n --btn-text-color: var(--primary-light);\n --btn-text-color-hover: var(--primary-dark);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--primary-light);\n --btn-border-color-hover: var(--primary-light);\n --focus-color: var(--danger);\n}\n\n.btn--secondary {\n--btn-background: var(--secondary);\n --btn-background-hover: var(--secondary-hover);\n --btn-text-color: var(--secondary-ultra-light);\n --btn-text-color-hover: var(--secondary-ultra-light);\n --btn-border-color: var(--secondary);\n --btn-border-color-hover: var(--secondary-hover);\n --focus-color: var(--secondary-dark);\n}\n\n.btn--secondary-dark {\n--btn-background: var(--secondary-dark);\n --btn-background-hover: var(--secondary-ultra-dark);\n --btn-text-color: var(--secondary-ultra-light);\n --btn-text-color-hover: var(--secondary-ultra-light);\n --btn-border-color: var(--secondary-dark);\n --btn-border-color-hover: var(--secondary-ultra-dark);\n --focus-color: var(--secondary-semi-dark);\n}\n\n.btn--secondary-light {\n--btn-background: var(--secondary-ultra-light);\n --btn-background-hover: var(--secondary-light);\n --btn-text-color: var(--secondary);\n --btn-text-color-hover: var(--secondary-ultra-dark);\n --btn-border-color: var(--secondary-ultra-light);\n --btn-border-color-hover: var(--secondary-light);\n --focus-color: var(--secondary-light);\n}\n\n.btn--secondary.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--secondary-hover);\n --btn-text-color: var(--secondary);\n --btn-text-color-hover: var(--secondary-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--secondary);\n --btn-border-color-hover: var(--secondary-hover);\n --focus-color: var(--secondary-dark);\n}\n\n.btn--secondary-dark.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--secondary-dark);\n --btn-text-color: var(--secondary-dark);\n --btn-text-color-hover: var(--secondary-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--secondary-dark);\n --btn-border-color-hover: var(--secondary-dark);\n --focus-color: var(--secondary-dark);\n}\n\n.btn--secondary-light.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--secondary-light);\n --btn-text-color: var(--secondary-light);\n --btn-text-color-hover: var(--secondary-dark);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--secondary-light);\n --btn-border-color-hover: var(--secondary-light);\n --focus-color: var(--secondary-dark);\n}\n\n.btn--tertiary {\n--btn-background: var(--tertiary);\n --btn-background-hover: var(--tertiary-hover);\n --btn-text-color: var(--tertiary-ultra-light);\n --btn-text-color-hover: var(--tertiary-ultra-light);\n --btn-border-color: var(--tertiary);\n --btn-border-color-hover: var(--tertiary-hover);\n --focus-color: var(--tertiary-light);\n}\n\n.btn--accent {\n--btn-background: var(--accent);\n --btn-background-hover: var(--accent-hover);\n --btn-text-color: var(--white);\n --btn-text-color-hover: var(--accent-ultra-light);\n --btn-border-color: var(--accent);\n --btn-border-color-hover: var(--accent-hover);\n --focus-color: var(--accent-dark);\n}\n\n.btn--accent-dark {\n--btn-background: var(--accent-dark);\n --btn-background-hover: var(--accent-ultra-dark);\n --btn-text-color: var(--accent-ultra-light);\n --btn-text-color-hover: var(--accent-ultra-light);\n --btn-border-color: var(--accent-dark);\n --btn-border-color-hover: var(--accent-ultra-dark);\n --focus-color: var(--accent-semi-dark);\n}\n\n.btn--accent-light {\n--btn-background: var(--accent-ultra-light);\n --btn-background-hover: var(--accent-light);\n --btn-text-color: var(--accent);\n --btn-text-color-hover: var(--accent-ultra-dark);\n --btn-border-color: var(--accent-ultra-light);\n --btn-border-color-hover: var(--accent-light);\n --focus-color: var(--accent-light);\n}\n\n.btn--base {\n--btn-background: var(--base);\n --btn-background-hover: var(--base-hover);\n --btn-text-color: var(--base-ultra-light);\n --btn-text-color-hover: var(--base-ultra-light);\n --btn-border-color: var(--base);\n --btn-border-color-hover: var(--base-hover);\n --focus-color: var(--base-dark);\n}\n\n.btn--base-dark {\n--btn-background: var(--base-ultra-dark);\n --btn-background-hover: var(--base-ultra-dark);\n --btn-text-color: var(--white);\n --btn-text-color-hover: var(--base-ultra-light);\n --btn-border-color: var(--base-ultra-dark);\n --btn-border-color-hover: var(--base-ultra-dark);\n --focus-color: var(--base-semi-dark);\n}\n\n.btn--base-light {\n--btn-background: var(--base-ultra-light);\n --btn-background-hover: var(--base-light);\n --btn-text-color: var(--base);\n --btn-text-color-hover: var(--base-ultra-dark);\n --btn-border-color: var(--base-ultra-light);\n --btn-border-color-hover: var(--base-light);\n --focus-color: var(--base-light);\n}\n\n.btn--neutral {\n--btn-background: var(--neutral);\n --btn-background-hover: var(--neutral);\n --btn-text-color: var(--neutral-ultra-light);\n --btn-text-color-hover: var(--primary);\n --btn-border-color: var(--neutral);\n --btn-border-color-hover: var(--primary);\n --focus-color: var(--danger);\n}\n\n.btn--neutral.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: transparent;\n --btn-text-color: var(--neutral);\n --btn-text-color-hover: var(--primary);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--neutral);\n --btn-border-color-hover: var(--primary);\n --focus-color: var(--neutral-semi-light);\n}\n\n.btn--neutral-light.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--neutral-light);\n --btn-text-color: var(--neutral-light);\n --btn-text-color-hover: var(--neutral-dark);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--neutral-light);\n --btn-border-color-hover: var(--neutral-light);\n --focus-color: var(--neutral-light);\n}\n\n.btn--warning {\n--btn-background: var(--warning);\n --btn-background-hover: var(--warning-hover);\n --btn-text-color: var(--warning-ultra-light);\n --btn-text-color-hover: var(--warning-ultra-light);\n --btn-border-color: var(--warning);\n --btn-border-color-hover: var(--warning-hover);\n --focus-color: var(--warning-light);\n}\n\n.btn--info {\n--btn-background: var(--info);\n --btn-background-hover: var(--info-hover);\n --btn-text-color: var(--info-ultra-light);\n --btn-text-color-hover: var(--info-ultra-light);\n --btn-border-color: var(--info);\n --btn-border-color-hover: var(--info-hover);\n --focus-color: var(--info-light);\n}\n\n.btn--danger {\n--btn-background: var(--danger);\n --btn-background-hover: var(--danger-hover);\n --btn-text-color: var(--danger-ultra-light);\n --btn-text-color-hover: var(--danger-ultra-light);\n --btn-border-color: var(--danger);\n --btn-border-color-hover: var(--danger-hover);\n --focus-color: var(--danger-light);\n}\n\n.btn--success {\n--btn-background: var(--success);\n --btn-background-hover: var(--success-hover);\n --btn-text-color: var(--success-ultra-light);\n --btn-text-color-hover: var(--success-ultra-light);\n --btn-border-color: var(--success);\n --btn-border-color-hover: var(--success-hover);\n --focus-color: var(--success-light);\n}\n\n.btn--action {\n--btn-background: var(--action);\n --btn-background-hover: var(--action-hover);\n --btn-text-color: var(--action-ultra-light);\n --btn-text-color-hover: var(--action-ultra-light);\n --btn-border-color: var(--action);\n --btn-border-color-hover: var(--action-hover);\n --focus-color: var(--action-dark);\n}\n\n.btn--action.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--action-hover);\n --btn-text-color: var(--action);\n --btn-text-color-hover: var(--action-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--action);\n --btn-border-color-hover: var(--action-hover);\n --focus-color: var(--action-dark);\n}\n\n.btn--shade {\n--btn-background: var(--shade);\n --btn-background-hover: var(--shade-hover);\n --btn-text-color: var(--shade-ultra-light);\n --btn-text-color-hover: var(--shade-ultra-light);\n --btn-border-color: var(--shade);\n --btn-border-color-hover: var(--shade-hover);\n --focus-color: var(--shade-light);\n}\n\n.btn--shade.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--shade-hover);\n --btn-text-color: var(--shade);\n --btn-text-color-hover: var(--shade-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--shade);\n --btn-border-color-hover: var(--shade-hover);\n --focus-color: var(--shade-light);\n}\n\n.btn--white {\n--btn-background: var(--white);\n --btn-background-hover: var(--white);\n --btn-text-color: var(--black);\n --btn-text-color-hover: var(--black);\n --btn-border-color: var(--white);\n --btn-border-color-hover: var(--white);\n --focus-color: var(--action);\n}\n\n.btn--white.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--white-hover);\n --btn-text-color: var(--shade-white);\n --btn-text-color-hover: var(--action-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--white);\n --btn-border-color-hover: var(--white-hover);\n --focus-color: var(--action);\n}\n\n.btn--xs {\nfont-size: var(--text-xs);\n}\n\n.btn--s {\nfont-size: var(--text-s);\n}\n\n.btn--m {\nfont-size: var(--text-m);\n}\n\n.btn--l {\nfont-size: var(--text-l);\n}\n\n.btn--xl {\nfont-size: var(--text-xl);\n}\n\n.btn--xxl {\nfont-size: var(--text-xxl);\n}\n\n.btn--clear.btn--clear, .btn--none.btn--none {\nbackground: none;\n border: none;\n}"
|
|
837
868
|
}
|
|
838
869
|
}
|