My Basic CSS Template
I'm in the middle of changing some of this up for my new colors.alanwsmith.com color picker. The goal is to point to it as the place to grab everything since it'll include colors directly.
Introduction
I make a lot of web pages by hand1. This is is a quick-start CSS I can copy/paste to get a new one rolling.
The colors come from color-picker.alanwsmith.com. (the have been renamed from -alfa, -bravo, -charlie to -primary, -secondary, -alt-1, etc. Plan is to make the tool use those names.)
Current Colors
The current color set is:
primary
secondary
alt-1
alt-2
alt-3
alt-4
There are versions of each color with opacity reduced by 10% between each iteration. I don't need all of them for any given project. I prefer to start with them all in and remove cruft compared to having to add them.
Block Widths
xxsmall
xsmall
small
medium
large
xlarge
full
Wrapper Widths
xxsmall
xsmall
small
medium
large
xlarge
full
CSS
:root {
color-scheme: light dark;
--color-background: oklch(96.778% 0.04773 212.121);
--color-bw-match: rgb(255 255 255);
--color-bw-match-90: rgb(255 255 255 / 90%);
--color-bw-match-80: rgb(255 255 255 / 80%);
--color-bw-match-70: rgb(255 255 255 / 70%);
--color-bw-match-60: rgb(255 255 255 / 60%);
--color-bw-match-50: rgb(255 255 255 / 50%);
--color-bw-match-40: rgb(255 255 255 / 40%);
--color-bw-match-30: rgb(255 255 255 / 30%);
--color-bw-match-20: rgb(255 255 255 / 20%);
--color-bw-match-10: rgb(255 255 255 / 10%);
--color-bw-reverse: rgb(0 0 0);
--color-bw-reverse-90: rgb(0 0 0 / 90%);
--color-bw-reverse-80: rgb(0 0 0 / 80%);
--color-bw-reverse-70: rgb(0 0 0 / 70%);
--color-bw-reverse-60: rgb(0 0 0 / 60%);
--color-bw-reverse-50: rgb(0 0 0 / 50%);
--color-bw-reverse-40: rgb(0 0 0 / 40%);
--color-bw-reverse-30: rgb(0 0 0 / 30%);
--color-bw-reverse-20: rgb(0 0 0 / 20%);
--color-bw-reverse-10: rgb(0 0 0 / 10%);
--color-primary: oklch(36.778% 0.04773 332.121);
--color-primary-90: oklch(36.778% 0.04773 332.121 / 90%);
--color-primary-80: oklch(36.778% 0.04773 332.121 / 80%);
--color-primary-70: oklch(36.778% 0.04773 332.121 / 70%);
--color-primary-60: oklch(36.778% 0.04773 332.121 / 60%);
--color-primary-50: oklch(36.778% 0.04773 332.121 / 50%);
--color-primary-40: oklch(36.778% 0.04773 332.121 / 40%);
--color-primary-30: oklch(36.778% 0.04773 332.121 / 30%);
--color-primary-20: oklch(36.778% 0.04773 332.121 / 20%);
--color-primary-10: oklch(36.778% 0.04773 332.121 / 10%);
--color-secondary: oklch(16.778% 0.34773 32.121);
--color-secondary-90: oklch(16.778% 0.34773 32.121 / 90%);
--color-secondary-80: oklch(16.778% 0.34773 32.121 / 80%);
--color-secondary-70: oklch(16.778% 0.34773 32.121 / 70%);
--color-secondary-60: oklch(16.778% 0.34773 32.121 / 60%);
--color-secondary-50: oklch(16.778% 0.34773 32.121 / 50%);
--color-secondary-40: oklch(16.778% 0.34773 32.121 / 40%);
--color-secondary-30: oklch(16.778% 0.34773 32.121 / 30%);
--color-secondary-20: oklch(16.778% 0.34773 32.121 / 20%);
--color-secondary-10: oklch(16.778% 0.34773 32.121 / 10%);
--color-alt-1: oklch(56.778% 0.44773 92.121);
--color-alt-1-90: oklch(56.778% 0.44773 92.121 / 90%);
--color-alt-1-80: oklch(56.778% 0.44773 92.121 / 80%);
--color-alt-1-70: oklch(56.778% 0.44773 92.121 / 70%);
--color-alt-1-60: oklch(56.778% 0.44773 92.121 / 60%);
--color-alt-1-50: oklch(56.778% 0.44773 92.121 / 50%);
--color-alt-1-40: oklch(56.778% 0.44773 92.121 / 40%);
--color-alt-1-30: oklch(56.778% 0.44773 92.121 / 30%);
--color-alt-1-20: oklch(56.778% 0.44773 92.121 / 20%);
--color-alt-1-10: oklch(56.778% 0.44773 92.121 / 10%);
--color-alt-2: oklch(56.778% 0.14773 92.121);
--color-alt-2-90: oklch(56.778% 0.14773 92.121 / 90%);
--color-alt-2-80: oklch(56.778% 0.14773 92.121 / 80%);
--color-alt-2-70: oklch(56.778% 0.14773 92.121 / 70%);
--color-alt-2-60: oklch(56.778% 0.14773 92.121 / 60%);
--color-alt-2-50: oklch(56.778% 0.14773 92.121 / 50%);
--color-alt-2-40: oklch(56.778% 0.14773 92.121 / 40%);
--color-alt-2-30: oklch(56.778% 0.14773 92.121 / 30%);
--color-alt-2-20: oklch(56.778% 0.14773 92.121 / 20%);
--color-alt-2-10: oklch(56.778% 0.14773 92.121 / 10%);
--color-alt-3: oklch(36.778% 0.24773 152.121);
--color-alt-3-90: oklch(36.778% 0.24773 152.121 / 90%);
--color-alt-3-80: oklch(36.778% 0.24773 152.121 / 80%);
--color-alt-3-70: oklch(36.778% 0.24773 152.121 / 70%);
--color-alt-3-60: oklch(36.778% 0.24773 152.121 / 60%);
--color-alt-3-50: oklch(36.778% 0.24773 152.121 / 50%);
--color-alt-3-40: oklch(36.778% 0.24773 152.121 / 40%);
--color-alt-3-30: oklch(36.778% 0.24773 152.121 / 30%);
--color-alt-3-20: oklch(36.778% 0.24773 152.121 / 20%);
--color-alt-3-10: oklch(36.778% 0.24773 152.121 / 10%);
--color-alt-4: oklch(16.778% 0.34773 152.121);
--color-alt-4-90: oklch(16.778% 0.34773 152.121 / 90%);
--color-alt-4-80: oklch(16.778% 0.34773 152.121 / 80%);
--color-alt-4-70: oklch(16.778% 0.34773 152.121 / 70%);
--color-alt-4-60: oklch(16.778% 0.34773 152.121 / 60%);
--color-alt-4-50: oklch(16.778% 0.34773 152.121 / 50%);
--color-alt-4-40: oklch(16.778% 0.34773 152.121 / 40%);
--color-alt-4-30: oklch(16.778% 0.34773 152.121 / 30%);
--color-alt-4-20: oklch(16.778% 0.34773 152.121 / 20%);
--color-alt-4-10: oklch(16.778% 0.34773 152.121 / 10%);
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: oklch(24.878% 0.04943 177.569);
--color-bw-match: rgb(0 0 0);
--color-bw-match-90: rgb(0 0 0 / 90%);
--color-bw-match-80: rgb(0 0 0 / 80%);
--color-bw-match-70: rgb(0 0 0 / 70%);
--color-bw-match-60: rgb(0 0 0 / 60%);
--color-bw-match-50: rgb(0 0 0 / 50%);
--color-bw-match-40: rgb(0 0 0 / 40%);
--color-bw-match-30: rgb(0 0 0 / 30%);
--color-bw-match-20: rgb(0 0 0 / 20%);
--color-bw-match-10: rgb(0 0 0 / 10%);
--color-bw-reverse: rgb(255 255 255);
--color-bw-reverse-90: rgb(255 255 255 / 90%);
--color-bw-reverse-80: rgb(255 255 255 / 80%);
--color-bw-reverse-70: rgb(255 255 255 / 70%);
--color-bw-reverse-60: rgb(255 255 255 / 60%);
--color-bw-reverse-50: rgb(255 255 255 / 50%);
--color-bw-reverse-40: rgb(255 255 255 / 40%);
--color-bw-reverse-30: rgb(255 255 255 / 30%);
--color-bw-reverse-20: rgb(255 255 255 / 20%);
--color-bw-reverse-10: rgb(255 255 255 / 10%);
--color-primary: oklch(84.878% 0.04943 117.569);
--color-primary-90: oklch(84.878% 0.04943 117.569 / 90%);
--color-primary-80: oklch(84.878% 0.04943 117.569 / 80%);
--color-primary-70: oklch(84.878% 0.04943 117.569 / 70%);
--color-primary-60: oklch(84.878% 0.04943 117.569 / 60%);
--color-primary-50: oklch(84.878% 0.04943 117.569 / 50%);
--color-primary-40: oklch(84.878% 0.04943 117.569 / 40%);
--color-primary-30: oklch(84.878% 0.04943 117.569 / 30%);
--color-primary-20: oklch(84.878% 0.04943 117.569 / 20%);
--color-primary-10: oklch(84.878% 0.04943 117.569 / 10%);
--color-secondary: oklch(64.878% 0.14943 57.569);
--color-secondary-90: oklch(64.878% 0.14943 57.569 / 90%);
--color-secondary-80: oklch(64.878% 0.14943 57.569 / 80%);
--color-secondary-70: oklch(64.878% 0.14943 57.569 / 70%);
--color-secondary-60: oklch(64.878% 0.14943 57.569 / 60%);
--color-secondary-50: oklch(64.878% 0.14943 57.569 / 50%);
--color-secondary-40: oklch(64.878% 0.14943 57.569 / 40%);
--color-secondary-30: oklch(64.878% 0.14943 57.569 / 30%);
--color-secondary-20: oklch(64.878% 0.14943 57.569 / 20%);
--color-secondary-10: oklch(64.878% 0.14943 57.569 / 10%);
--color-alt-1: oklch(64.878% 0.44943 357.569);
--color-alt-1-90: oklch(64.878% 0.44943 357.569 / 90%);
--color-alt-1-80: oklch(64.878% 0.44943 357.569 / 80%);
--color-alt-1-70: oklch(64.878% 0.44943 357.569 / 70%);
--color-alt-1-60: oklch(64.878% 0.44943 357.569 / 60%);
--color-alt-1-50: oklch(64.878% 0.44943 357.569 / 50%);
--color-alt-1-40: oklch(64.878% 0.44943 357.569 / 40%);
--color-alt-1-30: oklch(64.878% 0.44943 357.569 / 30%);
--color-alt-1-20: oklch(64.878% 0.44943 357.569 / 20%);
--color-alt-1-10: oklch(64.878% 0.44943 357.569 / 10%);
--color-alt-2: oklch(64.878% 0.14943 357.569);
--color-alt-2-90: oklch(64.878% 0.14943 357.569 / 90%);
--color-alt-2-80: oklch(64.878% 0.14943 357.569 / 80%);
--color-alt-2-70: oklch(64.878% 0.14943 357.569 / 70%);
--color-alt-2-60: oklch(64.878% 0.14943 357.569 / 60%);
--color-alt-2-50: oklch(64.878% 0.14943 357.569 / 50%);
--color-alt-2-40: oklch(64.878% 0.14943 357.569 / 40%);
--color-alt-2-30: oklch(64.878% 0.14943 357.569 / 30%);
--color-alt-2-20: oklch(64.878% 0.14943 357.569 / 20%);
--color-alt-2-10: oklch(64.878% 0.14943 357.569 / 10%);
--color-alt-3: oklch(84.878% 0.24943 237.569);
--color-alt-3-90: oklch(84.878% 0.24943 237.569 / 90%);
--color-alt-3-80: oklch(84.878% 0.24943 237.569 / 80%);
--color-alt-3-70: oklch(84.878% 0.24943 237.569 / 70%);
--color-alt-3-60: oklch(84.878% 0.24943 237.569 / 60%);
--color-alt-3-50: oklch(84.878% 0.24943 237.569 / 50%);
--color-alt-3-40: oklch(84.878% 0.24943 237.569 / 40%);
--color-alt-3-30: oklch(84.878% 0.24943 237.569 / 30%);
--color-alt-3-20: oklch(84.878% 0.24943 237.569 / 20%);
--color-alt-3-10: oklch(84.878% 0.24943 237.569 / 10%);
--color-alt-4: oklch(64.878% 0.14943 237.569);
--color-alt-4-90: oklch(64.878% 0.14943 237.569 / 90%);
--color-alt-4-80: oklch(64.878% 0.14943 237.569 / 80%);
--color-alt-4-70: oklch(64.878% 0.14943 237.569 / 70%);
--color-alt-4-60: oklch(64.878% 0.14943 237.569 / 60%);
--color-alt-4-50: oklch(64.878% 0.14943 237.569 / 50%);
--color-alt-4-40: oklch(64.878% 0.14943 237.569 / 40%);
--color-alt-4-30: oklch(64.878% 0.14943 237.569 / 30%);
--color-alt-4-20: oklch(64.878% 0.14943 237.569 / 20%);
--color-alt-4-10: oklch(64.878% 0.14943 237.569 / 10%);
}
}
:root {
--border-primary: 1px solid var(--color-primary);
--border-primary-90: 1px solid var(--color-primary-90);
--border-primary-80: 1px solid var(--color-primary-80);
--border-primary-70: 1px solid var(--color-primary-70);
--border-primary-60: 1px solid var(--color-primary-60);
--border-primary-50: 1px solid var(--color-primary-50);
--border-primary-40: 1px solid var(--color-primary-40);
--border-primary-30: 1px solid var(--color-primary-30);
--border-primary-20: 1px solid var(--color-primary-20);
--border-primary-10: 1px solid var(--color-primary-10);
--border-secondary: 1px solid var(--color-secondary);
--border-secondary-90: 1px solid var(--color-secondary-90);
--border-secondary-80: 1px solid var(--color-secondary-80);
--border-secondary-70: 1px solid var(--color-secondary-70);
--border-secondary-60: 1px solid var(--color-secondary-60);
--border-secondary-50: 1px solid var(--color-secondary-50);
--border-secondary-40: 1px solid var(--color-secondary-40);
--border-secondary-30: 1px solid var(--color-secondary-30);
--border-secondary-20: 1px solid var(--color-secondary-20);
--border-secondary-10: 1px solid var(--color-secondary-10);
--border-alt-1: 1px solid var(--color-alt-1);
--border-alt-1-90: 1px solid var(--color-alt-1-90);
--border-alt-1-80: 1px solid var(--color-alt-1-80);
--border-alt-1-70: 1px solid var(--color-alt-1-70);
--border-alt-1-60: 1px solid var(--color-alt-1-60);
--border-alt-1-50: 1px solid var(--color-alt-1-50);
--border-alt-1-40: 1px solid var(--color-alt-1-40);
--border-alt-1-30: 1px solid var(--color-alt-1-30);
--border-alt-1-20: 1px solid var(--color-alt-1-20);
--border-alt-1-10: 1px solid var(--color-alt-1-10);
--border-alt-2: 1px solid var(--color-alt-2);
--border-alt-2-90: 1px solid var(--color-alt-2-90);
--border-alt-2-80: 1px solid var(--color-alt-2-80);
--border-alt-2-70: 1px solid var(--color-alt-2-70);
--border-alt-2-60: 1px solid var(--color-alt-2-60);
--border-alt-2-50: 1px solid var(--color-alt-2-50);
--border-alt-2-40: 1px solid var(--color-alt-2-40);
--border-alt-2-30: 1px solid var(--color-alt-2-30);
--border-alt-2-20: 1px solid var(--color-alt-2-20);
--border-alt-2-10: 1px solid var(--color-alt-2-10);
--border-alt-3: 1px solid var(--color-alt-3);
--border-alt-3-90: 1px solid var(--color-alt-3-90);
--border-alt-3-80: 1px solid var(--color-alt-3-80);
--border-alt-3-70: 1px solid var(--color-alt-3-70);
--border-alt-3-60: 1px solid var(--color-alt-3-60);
--border-alt-3-50: 1px solid var(--color-alt-3-50);
--border-alt-3-40: 1px solid var(--color-alt-3-40);
--border-alt-3-30: 1px solid var(--color-alt-3-30);
--border-alt-3-20: 1px solid var(--color-alt-3-20);
--border-alt-3-10: 1px solid var(--color-alt-3-10);
--border-alt-4: 1px solid var(--color-alt-4);
--border-alt-4-90: 1px solid var(--color-alt-4-90);
--border-alt-4-80: 1px solid var(--color-alt-4-80);
--border-alt-4-70: 1px solid var(--color-alt-4-70);
--border-alt-4-60: 1px solid var(--color-alt-4-60);
--border-alt-4-50: 1px solid var(--color-alt-4-50);
--border-alt-4-40: 1px solid var(--color-alt-4-40);
--border-alt-4-30: 1px solid var(--color-alt-4-30);
--border-alt-4-20: 1px solid var(--color-alt-4-20);
--border-alt-4-10: 1px solid var(--color-alt-4-10);
--border-radius-xxsmall: 0.1rem;
--border-radius-xsmall: 0.2rem;
--border-radius-small: 0.3rem;
--border-radius-medium: 0.4rem;
--border-radius-large: 0.5rem;
--border-radius-xlarge: 0.6rem;
--border-radius-xxlarge: 0.7rem;
--font-family-primary: system-ui, sans-serif;
--font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--font-size-xsmall: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
--font-size-small: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
--font-size-medium: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
--font-size-large: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
--font-size-xlarge: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
--font-size-xxlarge: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
--font-size-xxxlarge: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
--font-size-xxxxlarge: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
--margin-xxsmall: var(--padding-xxsmall);
--margin-xsmall: var(--padding-xsmall);
--margin-small: var(--padding-small);
--margin-medium: var(--padding-medium);
--margin-large: var(--padding-large);
--margin-xlarge: var(--padding-xlarge);
--margin-xxlarge: var(--padding-xxlarge);
--padding-xxsmall: 0.1rem;
--padding-xsmall: 0.3rem;
--padding-small: 0.4rem;
--padding-medium: 0.6rem;
--padding-large: 1.2rem;
--padding-xlarge: 3.1rem;
--padding-xxlarge: 5.2rem;
--width-xxsmall: min(100vw - 1.4rem, 9rem);
--width-xsmall: min(100vw - 1.4rem, 19rem);
--width-small: min(100vw - 1.4rem, 29rem);
--width-medium: min(100vw - 1.4rem, 39rem);
--width-large: min(100vw - 1.4rem, 50rem);
--width-xlarge: min(100vw - 1.4rem, 60rem);
--width-full: calc(100vw - 1.4rem);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
::marker {
color: var(--color-primary);
}
a {
text-decoration: none;
color: var(--color-alt-4);
}
a:hover, a:focus {
color: var(--color-alt-2);
}
.background-color-primary { background-color: var(--color-primary); }
.background-color-primary-90 { background-color: var(--color-primary-90); }
.background-color-primary-80 { background-color: var(--color-primary-80); }
.background-color-primary-70 { background-color: var(--color-primary-70); }
.background-color-primary-60 { background-color: var(--color-primary-60); }
.background-color-primary-50 { background-color: var(--color-primary-50); }
.background-color-primary-40 { background-color: var(--color-primary-40); }
.background-color-primary-30 { background-color: var(--color-primary-30); }
.background-color-primary-20 { background-color: var(--color-primary-20); }
.background-color-primary-10 { background-color: var(--color-primary-10); }
.background-color-secondary { background-color: var(--color-secondary); }
.background-color-secondary-90 { background-color: var(--color-secondary-90); }
.background-color-secondary-80 { background-color: var(--color-secondary-80); }
.background-color-secondary-70 { background-color: var(--color-secondary-70); }
.background-color-secondary-60 { background-color: var(--color-secondary-60); }
.background-color-secondary-50 { background-color: var(--color-secondary-50); }
.background-color-secondary-40 { background-color: var(--color-secondary-40); }
.background-color-secondary-30 { background-color: var(--color-secondary-30); }
.background-color-secondary-20 { background-color: var(--color-secondary-20); }
.background-color-secondary-10 { background-color: var(--color-secondary-10); }
.background-color-alt-1 { background-color: var(--color-alt-1); }
.background-color-alt-1-90 { background-color: var(--color-alt-1-90); }
.background-color-alt-1-80 { background-color: var(--color-alt-1-80); }
.background-color-alt-1-70 { background-color: var(--color-alt-1-70); }
.background-color-alt-1-60 { background-color: var(--color-alt-1-60); }
.background-color-alt-1-50 { background-color: var(--color-alt-1-50); }
.background-color-alt-1-40 { background-color: var(--color-alt-1-40); }
.background-color-alt-1-30 { background-color: var(--color-alt-1-30); }
.background-color-alt-1-20 { background-color: var(--color-alt-1-20); }
.background-color-alt-1-10 { background-color: var(--color-alt-1-10); }
.background-color-alt-2 { background-color: var(--color-alt-2); }
.background-color-alt-2-90 { background-color: var(--color-alt-2-90); }
.background-color-alt-2-80 { background-color: var(--color-alt-2-80); }
.background-color-alt-2-70 { background-color: var(--color-alt-2-70); }
.background-color-alt-2-60 { background-color: var(--color-alt-2-60); }
.background-color-alt-2-50 { background-color: var(--color-alt-2-50); }
.background-color-alt-2-40 { background-color: var(--color-alt-2-40); }
.background-color-alt-2-30 { background-color: var(--color-alt-2-30); }
.background-color-alt-2-20 { background-color: var(--color-alt-2-20); }
.background-color-alt-2-10 { background-color: var(--color-alt-2-10); }
.background-color-alt-3 { background-color: var(--color-alt-3); }
.background-color-alt-3-90 { background-color: var(--color-alt-3-90); }
.background-color-alt-3-80 { background-color: var(--color-alt-3-80); }
.background-color-alt-3-70 { background-color: var(--color-alt-3-70); }
.background-color-alt-3-60 { background-color: var(--color-alt-3-60); }
.background-color-alt-3-50 { background-color: var(--color-alt-3-50); }
.background-color-alt-3-40 { background-color: var(--color-alt-3-40); }
.background-color-alt-3-30 { background-color: var(--color-alt-3-30); }
.background-color-alt-3-20 { background-color: var(--color-alt-3-20); }
.background-color-alt-3-10 { background-color: var(--color-alt-3-10); }
.background-color-alt-4 { background-color: var(--color-alt-4); }
.background-color-alt-4-90 { background-color: var(--color-alt-4-90); }
.background-color-alt-4-80 { background-color: var(--color-alt-4-80); }
.background-color-alt-4-70 { background-color: var(--color-alt-4-70); }
.background-color-alt-4-60 { background-color: var(--color-alt-4-60); }
.background-color-alt-4-50 { background-color: var(--color-alt-4-50); }
.background-color-alt-4-40 { background-color: var(--color-alt-4-40); }
.background-color-alt-4-30 { background-color: var(--color-alt-4-30); }
.background-color-alt-4-20 { background-color: var(--color-alt-4-20); }
.background-color-alt-4-10 { background-color: var(--color-alt-4-10); }
body {
background-color: var(--color-background);
color: var(--color-primary);
font-family: var(--font-family-primary);
font-size: var(--font-size-medium);
line-height: 1.5;
}
.border-color-primary { border: 1px solid var(--color-primary); }
.border-color-primary-90 { border: 1px solid var(--color-primary-90); }
.border-color-primary-80 { border: 1px solid var(--color-primary-80); }
.border-color-primary-70 { border: 1px solid var(--color-primary-70); }
.border-color-primary-60 { border: 1px solid var(--color-primary-60); }
.border-color-primary-50 { border: 1px solid var(--color-primary-50); }
.border-color-primary-40 { border: 1px solid var(--color-primary-40); }
.border-color-primary-30 { border: 1px solid var(--color-primary-30); }
.border-color-primary-20 { border: 1px solid var(--color-primary-20); }
.border-color-primary-10 { border: 1px solid var(--color-primary-10); }
.border-bottom-color-primary { border-bottom: 1px solid var(--color-primary); }
.border-bottom-color-primary-90 { border-bottom: 1px solid var(--color-primary-90); }
.border-bottom-color-primary-80 { border-bottom: 1px solid var(--color-primary-80); }
.border-bottom-color-primary-70 { border-bottom: 1px solid var(--color-primary-70); }
.border-bottom-color-primary-60 { border-bottom: 1px solid var(--color-primary-60); }
.border-bottom-color-primary-50 { border-bottom: 1px solid var(--color-primary-50); }
.border-bottom-color-primary-40 { border-bottom: 1px solid var(--color-primary-40); }
.border-bottom-color-primary-30 { border-bottom: 1px solid var(--color-primary-30); }
.border-bottom-color-primary-20 { border-bottom: 1px solid var(--color-primary-20); }
.border-bottom-color-primary-10 { border-bottom: 1px solid var(--color-primary-10); }
.border-left-color-primary { border-left: 1px solid var(--color-primary); }
.border-left-color-primary-90 { border-left: 1px solid var(--color-primary-90); }
.border-left-color-primary-80 { border-left: 1px solid var(--color-primary-80); }
.border-left-color-primary-70 { border-left: 1px solid var(--color-primary-70); }
.border-left-color-primary-60 { border-left: 1px solid var(--color-primary-60); }
.border-left-color-primary-50 { border-left: 1px solid var(--color-primary-50); }
.border-left-color-primary-40 { border-left: 1px solid var(--color-primary-40); }
.border-left-color-primary-30 { border-left: 1px solid var(--color-primary-30); }
.border-left-color-primary-20 { border-left: 1px solid var(--color-primary-20); }
.border-left-color-primary-10 { border-left: 1px solid var(--color-primary-10); }
.border-right-color-primary { border-right: 1px solid var(--color-primary); }
.border-right-color-primary-90 { border-right: 1px solid var(--color-primary-90); }
.border-right-color-primary-80 { border-right: 1px solid var(--color-primary-80); }
.border-right-color-primary-70 { border-right: 1px solid var(--color-primary-70); }
.border-right-color-primary-60 { border-right: 1px solid var(--color-primary-60); }
.border-right-color-primary-50 { border-right: 1px solid var(--color-primary-50); }
.border-right-color-primary-40 { border-right: 1px solid var(--color-primary-40); }
.border-right-color-primary-30 { border-right: 1px solid var(--color-primary-30); }
.border-right-color-primary-20 { border-right: 1px solid var(--color-primary-20); }
.border-right-color-primary-10 { border-right: 1px solid var(--color-primary-10); }
.border-top-color-primary { border-top: 1px solid var(--color-primary); }
.border-top-color-primary-90 { border-top: 1px solid var(--color-primary-90); }
.border-top-color-primary-80 { border-top: 1px solid var(--color-primary-80); }
.border-top-color-primary-70 { border-top: 1px solid var(--color-primary-70); }
.border-top-color-primary-60 { border-top: 1px solid var(--color-primary-60); }
.border-top-color-primary-50 { border-top: 1px solid var(--color-primary-50); }
.border-top-color-primary-40 { border-top: 1px solid var(--color-primary-40); }
.border-top-color-primary-30 { border-top: 1px solid var(--color-primary-30); }
.border-top-color-primary-20 { border-top: 1px solid var(--color-primary-20); }
.border-top-color-primary-10 { border-top: 1px solid var(--color-primary-10); }
.border-color-secondary { border: 1px solid var(--color-secondary); }
.border-color-secondary-90 { border: 1px solid var(--color-secondary-90); }
.border-color-secondary-80 { border: 1px solid var(--color-secondary-80); }
.border-color-secondary-70 { border: 1px solid var(--color-secondary-70); }
.border-color-secondary-60 { border: 1px solid var(--color-secondary-60); }
.border-color-secondary-50 { border: 1px solid var(--color-secondary-50); }
.border-color-secondary-40 { border: 1px solid var(--color-secondary-40); }
.border-color-secondary-30 { border: 1px solid var(--color-secondary-30); }
.border-color-secondary-20 { border: 1px solid var(--color-secondary-20); }
.border-color-secondary-10 { border: 1px solid var(--color-secondary-10); }
.border-bottom-color-secondary { border-bottom: 1px solid var(--color-secondary); }
.border-bottom-color-secondary-90 { border-bottom: 1px solid var(--color-secondary-90); }
.border-bottom-color-secondary-80 { border-bottom: 1px solid var(--color-secondary-80); }
.border-bottom-color-secondary-70 { border-bottom: 1px solid var(--color-secondary-70); }
.border-bottom-color-secondary-60 { border-bottom: 1px solid var(--color-secondary-60); }
.border-bottom-color-secondary-50 { border-bottom: 1px solid var(--color-secondary-50); }
.border-bottom-color-secondary-40 { border-bottom: 1px solid var(--color-secondary-40); }
.border-bottom-color-secondary-30 { border-bottom: 1px solid var(--color-secondary-30); }
.border-bottom-color-secondary-20 { border-bottom: 1px solid var(--color-secondary-20); }
.border-bottom-color-secondary-10 { border-bottom: 1px solid var(--color-secondary-10); }
.border-left-color-secondary { border-left: 1px solid var(--color-secondary); }
.border-left-color-secondary-90 { border-left: 1px solid var(--color-secondary-90); }
.border-left-color-secondary-80 { border-left: 1px solid var(--color-secondary-80); }
.border-left-color-secondary-70 { border-left: 1px solid var(--color-secondary-70); }
.border-left-color-secondary-60 { border-left: 1px solid var(--color-secondary-60); }
.border-left-color-secondary-50 { border-left: 1px solid var(--color-secondary-50); }
.border-left-color-secondary-40 { border-left: 1px solid var(--color-secondary-40); }
.border-left-color-secondary-30 { border-left: 1px solid var(--color-secondary-30); }
.border-left-color-secondary-20 { border-left: 1px solid var(--color-secondary-20); }
.border-left-color-secondary-10 { border-left: 1px solid var(--color-secondary-10); }
.border-right-color-secondary { border-right: 1px solid var(--color-secondary); }
.border-right-color-secondary-90 { border-right: 1px solid var(--color-secondary-90); }
.border-right-color-secondary-80 { border-right: 1px solid var(--color-secondary-80); }
.border-right-color-secondary-70 { border-right: 1px solid var(--color-secondary-70); }
.border-right-color-secondary-60 { border-right: 1px solid var(--color-secondary-60); }
.border-right-color-secondary-50 { border-right: 1px solid var(--color-secondary-50); }
.border-right-color-secondary-40 { border-right: 1px solid var(--color-secondary-40); }
.border-right-color-secondary-30 { border-right: 1px solid var(--color-secondary-30); }
.border-right-color-secondary-20 { border-right: 1px solid var(--color-secondary-20); }
.border-right-color-secondary-10 { border-right: 1px solid var(--color-secondary-10); }
.border-top-color-secondary { border-top: 1px solid var(--color-secondary); }
.border-top-color-secondary-90 { border-top: 1px solid var(--color-secondary-90); }
.border-top-color-secondary-80 { border-top: 1px solid var(--color-secondary-80); }
.border-top-color-secondary-70 { border-top: 1px solid var(--color-secondary-70); }
.border-top-color-secondary-60 { border-top: 1px solid var(--color-secondary-60); }
.border-top-color-secondary-50 { border-top: 1px solid var(--color-secondary-50); }
.border-top-color-secondary-40 { border-top: 1px solid var(--color-secondary-40); }
.border-top-color-secondary-30 { border-top: 1px solid var(--color-secondary-30); }
.border-top-color-secondary-20 { border-top: 1px solid var(--color-secondary-20); }
.border-top-color-secondary-10 { border-top: 1px solid var(--color-secondary-10); }
.border-color-alt-1 { border: 1px solid var(--color-alt-1); }
.border-color-alt-1-90 { border: 1px solid var(--color-alt-1-90); }
.border-color-alt-1-80 { border: 1px solid var(--color-alt-1-80); }
.border-color-alt-1-70 { border: 1px solid var(--color-alt-1-70); }
.border-color-alt-1-60 { border: 1px solid var(--color-alt-1-60); }
.border-color-alt-1-50 { border: 1px solid var(--color-alt-1-50); }
.border-color-alt-1-40 { border: 1px solid var(--color-alt-1-40); }
.border-color-alt-1-30 { border: 1px solid var(--color-alt-1-30); }
.border-color-alt-1-20 { border: 1px solid var(--color-alt-1-20); }
.border-color-alt-1-10 { border: 1px solid var(--color-alt-1-10); }
.border-bottom-color-alt-1 { border-bottom: 1px solid var(--color-alt-1); }
.border-bottom-color-alt-1-90 { border-bottom: 1px solid var(--color-alt-1-90); }
.border-bottom-color-alt-1-80 { border-bottom: 1px solid var(--color-alt-1-80); }
.border-bottom-color-alt-1-70 { border-bottom: 1px solid var(--color-alt-1-70); }
.border-bottom-color-alt-1-60 { border-bottom: 1px solid var(--color-alt-1-60); }
.border-bottom-color-alt-1-50 { border-bottom: 1px solid var(--color-alt-1-50); }
.border-bottom-color-alt-1-40 { border-bottom: 1px solid var(--color-alt-1-40); }
.border-bottom-color-alt-1-30 { border-bottom: 1px solid var(--color-alt-1-30); }
.border-bottom-color-alt-1-20 { border-bottom: 1px solid var(--color-alt-1-20); }
.border-bottom-color-alt-1-10 { border-bottom: 1px solid var(--color-alt-1-10); }
.border-left-color-alt-1 { border-left: 1px solid var(--color-alt-1); }
.border-left-color-alt-1-90 { border-left: 1px solid var(--color-alt-1-90); }
.border-left-color-alt-1-80 { border-left: 1px solid var(--color-alt-1-80); }
.border-left-color-alt-1-70 { border-left: 1px solid var(--color-alt-1-70); }
.border-left-color-alt-1-60 { border-left: 1px solid var(--color-alt-1-60); }
.border-left-color-alt-1-50 { border-left: 1px solid var(--color-alt-1-50); }
.border-left-color-alt-1-40 { border-left: 1px solid var(--color-alt-1-40); }
.border-left-color-alt-1-30 { border-left: 1px solid var(--color-alt-1-30); }
.border-left-color-alt-1-20 { border-left: 1px solid var(--color-alt-1-20); }
.border-left-color-alt-1-10 { border-left: 1px solid var(--color-alt-1-10); }
.border-right-color-alt-1 { border-right: 1px solid var(--color-alt-1); }
.border-right-color-alt-1-90 { border-right: 1px solid var(--color-alt-1-90); }
.border-right-color-alt-1-80 { border-right: 1px solid var(--color-alt-1-80); }
.border-right-color-alt-1-70 { border-right: 1px solid var(--color-alt-1-70); }
.border-right-color-alt-1-60 { border-right: 1px solid var(--color-alt-1-60); }
.border-right-color-alt-1-50 { border-right: 1px solid var(--color-alt-1-50); }
.border-right-color-alt-1-40 { border-right: 1px solid var(--color-alt-1-40); }
.border-right-color-alt-1-30 { border-right: 1px solid var(--color-alt-1-30); }
.border-right-color-alt-1-20 { border-right: 1px solid var(--color-alt-1-20); }
.border-right-color-alt-1-10 { border-right: 1px solid var(--color-alt-1-10); }
.border-top-color-alt-1 { border-top: 1px solid var(--color-alt-1); }
.border-top-color-alt-1-90 { border-top: 1px solid var(--color-alt-1-90); }
.border-top-color-alt-1-80 { border-top: 1px solid var(--color-alt-1-80); }
.border-top-color-alt-1-70 { border-top: 1px solid var(--color-alt-1-70); }
.border-top-color-alt-1-60 { border-top: 1px solid var(--color-alt-1-60); }
.border-top-color-alt-1-50 { border-top: 1px solid var(--color-alt-1-50); }
.border-top-color-alt-1-40 { border-top: 1px solid var(--color-alt-1-40); }
.border-top-color-alt-1-30 { border-top: 1px solid var(--color-alt-1-30); }
.border-top-color-alt-1-20 { border-top: 1px solid var(--color-alt-1-20); }
.border-top-color-alt-1-10 { border-top: 1px solid var(--color-alt-1-10); }
.border-color-alt-2 { border: 1px solid var(--color-alt-2); }
.border-color-alt-2-90 { border: 1px solid var(--color-alt-2-90); }
.border-color-alt-2-80 { border: 1px solid var(--color-alt-2-80); }
.border-color-alt-2-70 { border: 1px solid var(--color-alt-2-70); }
.border-color-alt-2-60 { border: 1px solid var(--color-alt-2-60); }
.border-color-alt-2-50 { border: 1px solid var(--color-alt-2-50); }
.border-color-alt-2-40 { border: 1px solid var(--color-alt-2-40); }
.border-color-alt-2-30 { border: 1px solid var(--color-alt-2-30); }
.border-color-alt-2-20 { border: 1px solid var(--color-alt-2-20); }
.border-color-alt-2-10 { border: 1px solid var(--color-alt-2-10); }
.border-bottom-color-alt-2 { border-bottom: 1px solid var(--color-alt-2); }
.border-bottom-color-alt-2-90 { border-bottom: 1px solid var(--color-alt-2-90); }
.border-bottom-color-alt-2-80 { border-bottom: 1px solid var(--color-alt-2-80); }
.border-bottom-color-alt-2-70 { border-bottom: 1px solid var(--color-alt-2-70); }
.border-bottom-color-alt-2-60 { border-bottom: 1px solid var(--color-alt-2-60); }
.border-bottom-color-alt-2-50 { border-bottom: 1px solid var(--color-alt-2-50); }
.border-bottom-color-alt-2-40 { border-bottom: 1px solid var(--color-alt-2-40); }
.border-bottom-color-alt-2-30 { border-bottom: 1px solid var(--color-alt-2-30); }
.border-bottom-color-alt-2-20 { border-bottom: 1px solid var(--color-alt-2-20); }
.border-bottom-color-alt-2-10 { border-bottom: 1px solid var(--color-alt-2-10); }
.border-left-color-alt-2 { border-left: 1px solid var(--color-alt-2); }
.border-left-color-alt-2-90 { border-left: 1px solid var(--color-alt-2-90); }
.border-left-color-alt-2-80 { border-left: 1px solid var(--color-alt-2-80); }
.border-left-color-alt-2-70 { border-left: 1px solid var(--color-alt-2-70); }
.border-left-color-alt-2-60 { border-left: 1px solid var(--color-alt-2-60); }
.border-left-color-alt-2-50 { border-left: 1px solid var(--color-alt-2-50); }
.border-left-color-alt-2-40 { border-left: 1px solid var(--color-alt-2-40); }
.border-left-color-alt-2-30 { border-left: 1px solid var(--color-alt-2-30); }
.border-left-color-alt-2-20 { border-left: 1px solid var(--color-alt-2-20); }
.border-left-color-alt-2-10 { border-left: 1px solid var(--color-alt-2-10); }
.border-right-color-alt-2 { border-right: 1px solid var(--color-alt-2); }
.border-right-color-alt-2-90 { border-right: 1px solid var(--color-alt-2-90); }
.border-right-color-alt-2-80 { border-right: 1px solid var(--color-alt-2-80); }
.border-right-color-alt-2-70 { border-right: 1px solid var(--color-alt-2-70); }
.border-right-color-alt-2-60 { border-right: 1px solid var(--color-alt-2-60); }
.border-right-color-alt-2-50 { border-right: 1px solid var(--color-alt-2-50); }
.border-right-color-alt-2-40 { border-right: 1px solid var(--color-alt-2-40); }
.border-right-color-alt-2-30 { border-right: 1px solid var(--color-alt-2-30); }
.border-right-color-alt-2-20 { border-right: 1px solid var(--color-alt-2-20); }
.border-right-color-alt-2-10 { border-right: 1px solid var(--color-alt-2-10); }
.border-top-color-alt-2 { border-top: 1px solid var(--color-alt-2); }
.border-top-color-alt-2-90 { border-top: 1px solid var(--color-alt-2-90); }
.border-top-color-alt-2-80 { border-top: 1px solid var(--color-alt-2-80); }
.border-top-color-alt-2-70 { border-top: 1px solid var(--color-alt-2-70); }
.border-top-color-alt-2-60 { border-top: 1px solid var(--color-alt-2-60); }
.border-top-color-alt-2-50 { border-top: 1px solid var(--color-alt-2-50); }
.border-top-color-alt-2-40 { border-top: 1px solid var(--color-alt-2-40); }
.border-top-color-alt-2-30 { border-top: 1px solid var(--color-alt-2-30); }
.border-top-color-alt-2-20 { border-top: 1px solid var(--color-alt-2-20); }
.border-top-color-alt-2-10 { border-top: 1px solid var(--color-alt-2-10); }
.border-color-alt-3 { border: 1px solid var(--color-alt-3); }
.border-color-alt-3-90 { border: 1px solid var(--color-alt-3-90); }
.border-color-alt-3-80 { border: 1px solid var(--color-alt-3-80); }
.border-color-alt-3-70 { border: 1px solid var(--color-alt-3-70); }
.border-color-alt-3-60 { border: 1px solid var(--color-alt-3-60); }
.border-color-alt-3-50 { border: 1px solid var(--color-alt-3-50); }
.border-color-alt-3-40 { border: 1px solid var(--color-alt-3-40); }
.border-color-alt-3-30 { border: 1px solid var(--color-alt-3-30); }
.border-color-alt-3-20 { border: 1px solid var(--color-alt-3-20); }
.border-color-alt-3-10 { border: 1px solid var(--color-alt-3-10); }
.border-bottom-color-alt-3 { border-bottom: 1px solid var(--color-alt-3); }
.border-bottom-color-alt-3-90 { border-bottom: 1px solid var(--color-alt-3-90); }
.border-bottom-color-alt-3-80 { border-bottom: 1px solid var(--color-alt-3-80); }
.border-bottom-color-alt-3-70 { border-bottom: 1px solid var(--color-alt-3-70); }
.border-bottom-color-alt-3-60 { border-bottom: 1px solid var(--color-alt-3-60); }
.border-bottom-color-alt-3-50 { border-bottom: 1px solid var(--color-alt-3-50); }
.border-bottom-color-alt-3-40 { border-bottom: 1px solid var(--color-alt-3-40); }
.border-bottom-color-alt-3-30 { border-bottom: 1px solid var(--color-alt-3-30); }
.border-bottom-color-alt-3-20 { border-bottom: 1px solid var(--color-alt-3-20); }
.border-bottom-color-alt-3-10 { border-bottom: 1px solid var(--color-alt-3-10); }
.border-left-color-alt-3 { border-left: 1px solid var(--color-alt-3); }
.border-left-color-alt-3-90 { border-left: 1px solid var(--color-alt-3-90); }
.border-left-color-alt-3-80 { border-left: 1px solid var(--color-alt-3-80); }
.border-left-color-alt-3-70 { border-left: 1px solid var(--color-alt-3-70); }
.border-left-color-alt-3-60 { border-left: 1px solid var(--color-alt-3-60); }
.border-left-color-alt-3-50 { border-left: 1px solid var(--color-alt-3-50); }
.border-left-color-alt-3-40 { border-left: 1px solid var(--color-alt-3-40); }
.border-left-color-alt-3-30 { border-left: 1px solid var(--color-alt-3-30); }
.border-left-color-alt-3-20 { border-left: 1px solid var(--color-alt-3-20); }
.border-left-color-alt-3-10 { border-left: 1px solid var(--color-alt-3-10); }
.border-right-color-alt-3 { border-right: 1px solid var(--color-alt-3); }
.border-right-color-alt-3-90 { border-right: 1px solid var(--color-alt-3-90); }
.border-right-color-alt-3-80 { border-right: 1px solid var(--color-alt-3-80); }
.border-right-color-alt-3-70 { border-right: 1px solid var(--color-alt-3-70); }
.border-right-color-alt-3-60 { border-right: 1px solid var(--color-alt-3-60); }
.border-right-color-alt-3-50 { border-right: 1px solid var(--color-alt-3-50); }
.border-right-color-alt-3-40 { border-right: 1px solid var(--color-alt-3-40); }
.border-right-color-alt-3-30 { border-right: 1px solid var(--color-alt-3-30); }
.border-right-color-alt-3-20 { border-right: 1px solid var(--color-alt-3-20); }
.border-right-color-alt-3-10 { border-right: 1px solid var(--color-alt-3-10); }
.border-top-color-alt-3 { border-top: 1px solid var(--color-alt-3); }
.border-top-color-alt-3-90 { border-top: 1px solid var(--color-alt-3-90); }
.border-top-color-alt-3-80 { border-top: 1px solid var(--color-alt-3-80); }
.border-top-color-alt-3-70 { border-top: 1px solid var(--color-alt-3-70); }
.border-top-color-alt-3-60 { border-top: 1px solid var(--color-alt-3-60); }
.border-top-color-alt-3-50 { border-top: 1px solid var(--color-alt-3-50); }
.border-top-color-alt-3-40 { border-top: 1px solid var(--color-alt-3-40); }
.border-top-color-alt-3-30 { border-top: 1px solid var(--color-alt-3-30); }
.border-top-color-alt-3-20 { border-top: 1px solid var(--color-alt-3-20); }
.border-top-color-alt-3-10 { border-top: 1px solid var(--color-alt-3-10); }
.border-color-alt-4 { border: 1px solid var(--color-alt-4); }
.border-color-alt-4-90 { border: 1px solid var(--color-alt-4-90); }
.border-color-alt-4-80 { border: 1px solid var(--color-alt-4-80); }
.border-color-alt-4-70 { border: 1px solid var(--color-alt-4-70); }
.border-color-alt-4-60 { border: 1px solid var(--color-alt-4-60); }
.border-color-alt-4-50 { border: 1px solid var(--color-alt-4-50); }
.border-color-alt-4-40 { border: 1px solid var(--color-alt-4-40); }
.border-color-alt-4-30 { border: 1px solid var(--color-alt-4-30); }
.border-color-alt-4-20 { border: 1px solid var(--color-alt-4-20); }
.border-color-alt-4-10 { border: 1px solid var(--color-alt-4-10); }
.border-bottom-color-alt-4 { border-bottom: 1px solid var(--color-alt-4); }
.border-bottom-color-alt-4-90 { border-bottom: 1px solid var(--color-alt-4-90); }
.border-bottom-color-alt-4-80 { border-bottom: 1px solid var(--color-alt-4-80); }
.border-bottom-color-alt-4-70 { border-bottom: 1px solid var(--color-alt-4-70); }
.border-bottom-color-alt-4-60 { border-bottom: 1px solid var(--color-alt-4-60); }
.border-bottom-color-alt-4-50 { border-bottom: 1px solid var(--color-alt-4-50); }
.border-bottom-color-alt-4-40 { border-bottom: 1px solid var(--color-alt-4-40); }
.border-bottom-color-alt-4-30 { border-bottom: 1px solid var(--color-alt-4-30); }
.border-bottom-color-alt-4-20 { border-bottom: 1px solid var(--color-alt-4-20); }
.border-bottom-color-alt-4-10 { border-bottom: 1px solid var(--color-alt-4-10); }
.border-left-color-alt-4 { border-left: 1px solid var(--color-alt-4); }
.border-left-color-alt-4-90 { border-left: 1px solid var(--color-alt-4-90); }
.border-left-color-alt-4-80 { border-left: 1px solid var(--color-alt-4-80); }
.border-left-color-alt-4-70 { border-left: 1px solid var(--color-alt-4-70); }
.border-left-color-alt-4-60 { border-left: 1px solid var(--color-alt-4-60); }
.border-left-color-alt-4-50 { border-left: 1px solid var(--color-alt-4-50); }
.border-left-color-alt-4-40 { border-left: 1px solid var(--color-alt-4-40); }
.border-left-color-alt-4-30 { border-left: 1px solid var(--color-alt-4-30); }
.border-left-color-alt-4-20 { border-left: 1px solid var(--color-alt-4-20); }
.border-left-color-alt-4-10 { border-left: 1px solid var(--color-alt-4-10); }
.border-right-color-alt-4 { border-right: 1px solid var(--color-alt-4); }
.border-right-color-alt-4-90 { border-right: 1px solid var(--color-alt-4-90); }
.border-right-color-alt-4-80 { border-right: 1px solid var(--color-alt-4-80); }
.border-right-color-alt-4-70 { border-right: 1px solid var(--color-alt-4-70); }
.border-right-color-alt-4-60 { border-right: 1px solid var(--color-alt-4-60); }
.border-right-color-alt-4-50 { border-right: 1px solid var(--color-alt-4-50); }
.border-right-color-alt-4-40 { border-right: 1px solid var(--color-alt-4-40); }
.border-right-color-alt-4-30 { border-right: 1px solid var(--color-alt-4-30); }
.border-right-color-alt-4-20 { border-right: 1px solid var(--color-alt-4-20); }
.border-right-color-alt-4-10 { border-right: 1px solid var(--color-alt-4-10); }
.border-top-color-alt-4 { border-top: 1px solid var(--color-alt-4); }
.border-top-color-alt-4-90 { border-top: 1px solid var(--color-alt-4-90); }
.border-top-color-alt-4-80 { border-top: 1px solid var(--color-alt-4-80); }
.border-top-color-alt-4-70 { border-top: 1px solid var(--color-alt-4-70); }
.border-top-color-alt-4-60 { border-top: 1px solid var(--color-alt-4-60); }
.border-top-color-alt-4-50 { border-top: 1px solid var(--color-alt-4-50); }
.border-top-color-alt-4-40 { border-top: 1px solid var(--color-alt-4-40); }
.border-top-color-alt-4-30 { border-top: 1px solid var(--color-alt-4-30); }
.border-top-color-alt-4-20 { border-top: 1px solid var(--color-alt-4-20); }
.border-top-color-alt-4-10 { border-top: 1px solid var(--color-alt-4-10); }
.border-color-3-primary { border: 3px solid var(--color-primary); }
.border-color-3-primary-90 { border: 3px solid var(--color-primary-90); }
.border-color-3-primary-80 { border: 3px solid var(--color-primary-80); }
.border-color-3-primary-70 { border: 3px solid var(--color-primary-70); }
.border-color-3-primary-60 { border: 3px solid var(--color-primary-60); }
.border-color-3-primary-50 { border: 3px solid var(--color-primary-50); }
.border-color-3-primary-40 { border: 3px solid var(--color-primary-40); }
.border-color-3-primary-30 { border: 3px solid var(--color-primary-30); }
.border-color-3-primary-20 { border: 3px solid var(--color-primary-20); }
.border-color-3-primary-10 { border: 3px solid var(--color-primary-10); }
.border-bottom-3-color-primary { border-bottom: 3px solid var(--color-primary); }
.border-bottom-3-color-primary-90 { border-bottom: 3px solid var(--color-primary-90); }
.border-bottom-3-color-primary-80 { border-bottom: 3px solid var(--color-primary-80); }
.border-bottom-3-color-primary-70 { border-bottom: 3px solid var(--color-primary-70); }
.border-bottom-3-color-primary-60 { border-bottom: 3px solid var(--color-primary-60); }
.border-bottom-3-color-primary-50 { border-bottom: 3px solid var(--color-primary-50); }
.border-bottom-3-color-primary-40 { border-bottom: 3px solid var(--color-primary-40); }
.border-bottom-3-color-primary-30 { border-bottom: 3px solid var(--color-primary-30); }
.border-bottom-3-color-primary-20 { border-bottom: 3px solid var(--color-primary-20); }
.border-bottom-3-color-primary-10 { border-bottom: 3px solid var(--color-primary-10); }
.border-left-3-color-primary { border-left: 3px solid var(--color-primary); }
.border-left-3-color-primary-90 { border-left: 3px solid var(--color-primary-90); }
.border-left-3-color-primary-80 { border-left: 3px solid var(--color-primary-80); }
.border-left-3-color-primary-70 { border-left: 3px solid var(--color-primary-70); }
.border-left-3-color-primary-60 { border-left: 3px solid var(--color-primary-60); }
.border-left-3-color-primary-50 { border-left: 3px solid var(--color-primary-50); }
.border-left-3-color-primary-40 { border-left: 3px solid var(--color-primary-40); }
.border-left-3-color-primary-30 { border-left: 3px solid var(--color-primary-30); }
.border-left-3-color-primary-20 { border-left: 3px solid var(--color-primary-20); }
.border-left-3-color-primary-10 { border-left: 3px solid var(--color-primary-10); }
.border-right-3-color-primary { border-right: 3px solid var(--color-primary); }
.border-right-3-color-primary-90 { border-right: 3px solid var(--color-primary-90); }
.border-right-3-color-primary-80 { border-right: 3px solid var(--color-primary-80); }
.border-right-3-color-primary-70 { border-right: 3px solid var(--color-primary-70); }
.border-right-3-color-primary-60 { border-right: 3px solid var(--color-primary-60); }
.border-right-3-color-primary-50 { border-right: 3px solid var(--color-primary-50); }
.border-right-3-color-primary-40 { border-right: 3px solid var(--color-primary-40); }
.border-right-3-color-primary-30 { border-right: 3px solid var(--color-primary-30); }
.border-right-3-color-primary-20 { border-right: 3px solid var(--color-primary-20); }
.border-right-3-color-primary-10 { border-right: 3px solid var(--color-primary-10); }
.border-top-3-color-primary { border-top: 3px solid var(--color-primary); }
.border-top-3-color-primary-90 { border-top: 3px solid var(--color-primary-90); }
.border-top-3-color-primary-80 { border-top: 3px solid var(--color-primary-80); }
.border-top-3-color-primary-70 { border-top: 3px solid var(--color-primary-70); }
.border-top-3-color-primary-60 { border-top: 3px solid var(--color-primary-60); }
.border-top-3-color-primary-50 { border-top: 3px solid var(--color-primary-50); }
.border-top-3-color-primary-40 { border-top: 3px solid var(--color-primary-40); }
.border-top-3-color-primary-30 { border-top: 3px solid var(--color-primary-30); }
.border-top-3-color-primary-20 { border-top: 3px solid var(--color-primary-20); }
.border-top-3-color-primary-10 { border-top: 3px solid var(--color-primary-10); }
.border-color-3-secondary { border: 3px solid var(--color-secondary); }
.border-color-3-secondary-90 { border: 3px solid var(--color-secondary-90); }
.border-color-3-secondary-80 { border: 3px solid var(--color-secondary-80); }
.border-color-3-secondary-70 { border: 3px solid var(--color-secondary-70); }
.border-color-3-secondary-60 { border: 3px solid var(--color-secondary-60); }
.border-color-3-secondary-50 { border: 3px solid var(--color-secondary-50); }
.border-color-3-secondary-40 { border: 3px solid var(--color-secondary-40); }
.border-color-3-secondary-30 { border: 3px solid var(--color-secondary-30); }
.border-color-3-secondary-20 { border: 3px solid var(--color-secondary-20); }
.border-color-3-secondary-10 { border: 3px solid var(--color-secondary-10); }
.border-bottom-3-color-secondary { border-bottom: 3px solid var(--color-secondary); }
.border-bottom-3-color-secondary-90 { border-bottom: 3px solid var(--color-secondary-90); }
.border-bottom-3-color-secondary-80 { border-bottom: 3px solid var(--color-secondary-80); }
.border-bottom-3-color-secondary-70 { border-bottom: 3px solid var(--color-secondary-70); }
.border-bottom-3-color-secondary-60 { border-bottom: 3px solid var(--color-secondary-60); }
.border-bottom-3-color-secondary-50 { border-bottom: 3px solid var(--color-secondary-50); }
.border-bottom-3-color-secondary-40 { border-bottom: 3px solid var(--color-secondary-40); }
.border-bottom-3-color-secondary-30 { border-bottom: 3px solid var(--color-secondary-30); }
.border-bottom-3-color-secondary-20 { border-bottom: 3px solid var(--color-secondary-20); }
.border-bottom-3-color-secondary-10 { border-bottom: 3px solid var(--color-secondary-10); }
.border-left-3-color-secondary { border-left: 3px solid var(--color-secondary); }
.border-left-3-color-secondary-90 { border-left: 3px solid var(--color-secondary-90); }
.border-left-3-color-secondary-80 { border-left: 3px solid var(--color-secondary-80); }
.border-left-3-color-secondary-70 { border-left: 3px solid var(--color-secondary-70); }
.border-left-3-color-secondary-60 { border-left: 3px solid var(--color-secondary-60); }
.border-left-3-color-secondary-50 { border-left: 3px solid var(--color-secondary-50); }
.border-left-3-color-secondary-40 { border-left: 3px solid var(--color-secondary-40); }
.border-left-3-color-secondary-30 { border-left: 3px solid var(--color-secondary-30); }
.border-left-3-color-secondary-20 { border-left: 3px solid var(--color-secondary-20); }
.border-left-3-color-secondary-10 { border-left: 3px solid var(--color-secondary-10); }
.border-right-3-color-secondary { border-right: 3px solid var(--color-secondary); }
.border-right-3-color-secondary-90 { border-right: 3px solid var(--color-secondary-90); }
.border-right-3-color-secondary-80 { border-right: 3px solid var(--color-secondary-80); }
.border-right-3-color-secondary-70 { border-right: 3px solid var(--color-secondary-70); }
.border-right-3-color-secondary-60 { border-right: 3px solid var(--color-secondary-60); }
.border-right-3-color-secondary-50 { border-right: 3px solid var(--color-secondary-50); }
.border-right-3-color-secondary-40 { border-right: 3px solid var(--color-secondary-40); }
.border-right-3-color-secondary-30 { border-right: 3px solid var(--color-secondary-30); }
.border-right-3-color-secondary-20 { border-right: 3px solid var(--color-secondary-20); }
.border-right-3-color-secondary-10 { border-right: 3px solid var(--color-secondary-10); }
.border-top-3-color-secondary { border-top: 3px solid var(--color-secondary); }
.border-top-3-color-secondary-90 { border-top: 3px solid var(--color-secondary-90); }
.border-top-3-color-secondary-80 { border-top: 3px solid var(--color-secondary-80); }
.border-top-3-color-secondary-70 { border-top: 3px solid var(--color-secondary-70); }
.border-top-3-color-secondary-60 { border-top: 3px solid var(--color-secondary-60); }
.border-top-3-color-secondary-50 { border-top: 3px solid var(--color-secondary-50); }
.border-top-3-color-secondary-40 { border-top: 3px solid var(--color-secondary-40); }
.border-top-3-color-secondary-30 { border-top: 3px solid var(--color-secondary-30); }
.border-top-3-color-secondary-20 { border-top: 3px solid var(--color-secondary-20); }
.border-top-3-color-secondary-10 { border-top: 3px solid var(--color-secondary-10); }
.border-color-3-alt-1 { border: 3px solid var(--color-alt-1); }
.border-color-3-alt-1-90 { border: 3px solid var(--color-alt-1-90); }
.border-color-3-alt-1-80 { border: 3px solid var(--color-alt-1-80); }
.border-color-3-alt-1-70 { border: 3px solid var(--color-alt-1-70); }
.border-color-3-alt-1-60 { border: 3px solid var(--color-alt-1-60); }
.border-color-3-alt-1-50 { border: 3px solid var(--color-alt-1-50); }
.border-color-3-alt-1-40 { border: 3px solid var(--color-alt-1-40); }
.border-color-3-alt-1-30 { border: 3px solid var(--color-alt-1-30); }
.border-color-3-alt-1-20 { border: 3px solid var(--color-alt-1-20); }
.border-color-3-alt-1-10 { border: 3px solid var(--color-alt-1-10); }
.border-bottom-3-color-alt-1 { border-bottom: 3px solid var(--color-alt-1); }
.border-bottom-3-color-alt-1-90 { border-bottom: 3px solid var(--color-alt-1-90); }
.border-bottom-3-color-alt-1-80 { border-bottom: 3px solid var(--color-alt-1-80); }
.border-bottom-3-color-alt-1-70 { border-bottom: 3px solid var(--color-alt-1-70); }
.border-bottom-3-color-alt-1-60 { border-bottom: 3px solid var(--color-alt-1-60); }
.border-bottom-3-color-alt-1-50 { border-bottom: 3px solid var(--color-alt-1-50); }
.border-bottom-3-color-alt-1-40 { border-bottom: 3px solid var(--color-alt-1-40); }
.border-bottom-3-color-alt-1-30 { border-bottom: 3px solid var(--color-alt-1-30); }
.border-bottom-3-color-alt-1-20 { border-bottom: 3px solid var(--color-alt-1-20); }
.border-bottom-3-color-alt-1-10 { border-bottom: 3px solid var(--color-alt-1-10); }
.border-left-3-color-alt-1 { border-left: 3px solid var(--color-alt-1); }
.border-left-3-color-alt-1-90 { border-left: 3px solid var(--color-alt-1-90); }
.border-left-3-color-alt-1-80 { border-left: 3px solid var(--color-alt-1-80); }
.border-left-3-color-alt-1-70 { border-left: 3px solid var(--color-alt-1-70); }
.border-left-3-color-alt-1-60 { border-left: 3px solid var(--color-alt-1-60); }
.border-left-3-color-alt-1-50 { border-left: 3px solid var(--color-alt-1-50); }
.border-left-3-color-alt-1-40 { border-left: 3px solid var(--color-alt-1-40); }
.border-left-3-color-alt-1-30 { border-left: 3px solid var(--color-alt-1-30); }
.border-left-3-color-alt-1-20 { border-left: 3px solid var(--color-alt-1-20); }
.border-left-3-color-alt-1-10 { border-left: 3px solid var(--color-alt-1-10); }
.border-right-3-color-alt-1 { border-right: 3px solid var(--color-alt-1); }
.border-right-3-color-alt-1-90 { border-right: 3px solid var(--color-alt-1-90); }
.border-right-3-color-alt-1-80 { border-right: 3px solid var(--color-alt-1-80); }
.border-right-3-color-alt-1-70 { border-right: 3px solid var(--color-alt-1-70); }
.border-right-3-color-alt-1-60 { border-right: 3px solid var(--color-alt-1-60); }
.border-right-3-color-alt-1-50 { border-right: 3px solid var(--color-alt-1-50); }
.border-right-3-color-alt-1-40 { border-right: 3px solid var(--color-alt-1-40); }
.border-right-3-color-alt-1-30 { border-right: 3px solid var(--color-alt-1-30); }
.border-right-3-color-alt-1-20 { border-right: 3px solid var(--color-alt-1-20); }
.border-right-3-color-alt-1-10 { border-right: 3px solid var(--color-alt-1-10); }
.border-top-3-color-alt-1 { border-top: 3px solid var(--color-alt-1); }
.border-top-3-color-alt-1-90 { border-top: 3px solid var(--color-alt-1-90); }
.border-top-3-color-alt-1-80 { border-top: 3px solid var(--color-alt-1-80); }
.border-top-3-color-alt-1-70 { border-top: 3px solid var(--color-alt-1-70); }
.border-top-3-color-alt-1-60 { border-top: 3px solid var(--color-alt-1-60); }
.border-top-3-color-alt-1-50 { border-top: 3px solid var(--color-alt-1-50); }
.border-top-3-color-alt-1-40 { border-top: 3px solid var(--color-alt-1-40); }
.border-top-3-color-alt-1-30 { border-top: 3px solid var(--color-alt-1-30); }
.border-top-3-color-alt-1-20 { border-top: 3px solid var(--color-alt-1-20); }
.border-top-3-color-alt-1-10 { border-top: 3px solid var(--color-alt-1-10); }
.border-color-3-alt-2 { border: 3px solid var(--color-alt-2); }
.border-color-3-alt-2-90 { border: 3px solid var(--color-alt-2-90); }
.border-color-3-alt-2-80 { border: 3px solid var(--color-alt-2-80); }
.border-color-3-alt-2-70 { border: 3px solid var(--color-alt-2-70); }
.border-color-3-alt-2-60 { border: 3px solid var(--color-alt-2-60); }
.border-color-3-alt-2-50 { border: 3px solid var(--color-alt-2-50); }
.border-color-3-alt-2-40 { border: 3px solid var(--color-alt-2-40); }
.border-color-3-alt-2-30 { border: 3px solid var(--color-alt-2-30); }
.border-color-3-alt-2-20 { border: 3px solid var(--color-alt-2-20); }
.border-color-3-alt-2-10 { border: 3px solid var(--color-alt-2-10); }
.border-bottom-3-color-alt-2 { border-bottom: 3px solid var(--color-alt-2); }
.border-bottom-3-color-alt-2-90 { border-bottom: 3px solid var(--color-alt-2-90); }
.border-bottom-3-color-alt-2-80 { border-bottom: 3px solid var(--color-alt-2-80); }
.border-bottom-3-color-alt-2-70 { border-bottom: 3px solid var(--color-alt-2-70); }
.border-bottom-3-color-alt-2-60 { border-bottom: 3px solid var(--color-alt-2-60); }
.border-bottom-3-color-alt-2-50 { border-bottom: 3px solid var(--color-alt-2-50); }
.border-bottom-3-color-alt-2-40 { border-bottom: 3px solid var(--color-alt-2-40); }
.border-bottom-3-color-alt-2-30 { border-bottom: 3px solid var(--color-alt-2-30); }
.border-bottom-3-color-alt-2-20 { border-bottom: 3px solid var(--color-alt-2-20); }
.border-bottom-3-color-alt-2-10 { border-bottom: 3px solid var(--color-alt-2-10); }
.border-left-3-color-alt-2 { border-left: 3px solid var(--color-alt-2); }
.border-left-3-color-alt-2-90 { border-left: 3px solid var(--color-alt-2-90); }
.border-left-3-color-alt-2-80 { border-left: 3px solid var(--color-alt-2-80); }
.border-left-3-color-alt-2-70 { border-left: 3px solid var(--color-alt-2-70); }
.border-left-3-color-alt-2-60 { border-left: 3px solid var(--color-alt-2-60); }
.border-left-3-color-alt-2-50 { border-left: 3px solid var(--color-alt-2-50); }
.border-left-3-color-alt-2-40 { border-left: 3px solid var(--color-alt-2-40); }
.border-left-3-color-alt-2-30 { border-left: 3px solid var(--color-alt-2-30); }
.border-left-3-color-alt-2-20 { border-left: 3px solid var(--color-alt-2-20); }
.border-left-3-color-alt-2-10 { border-left: 3px solid var(--color-alt-2-10); }
.border-right-3-color-alt-2 { border-right: 3px solid var(--color-alt-2); }
.border-right-3-color-alt-2-90 { border-right: 3px solid var(--color-alt-2-90); }
.border-right-3-color-alt-2-80 { border-right: 3px solid var(--color-alt-2-80); }
.border-right-3-color-alt-2-70 { border-right: 3px solid var(--color-alt-2-70); }
.border-right-3-color-alt-2-60 { border-right: 3px solid var(--color-alt-2-60); }
.border-right-3-color-alt-2-50 { border-right: 3px solid var(--color-alt-2-50); }
.border-right-3-color-alt-2-40 { border-right: 3px solid var(--color-alt-2-40); }
.border-right-3-color-alt-2-30 { border-right: 3px solid var(--color-alt-2-30); }
.border-right-3-color-alt-2-20 { border-right: 3px solid var(--color-alt-2-20); }
.border-right-3-color-alt-2-10 { border-right: 3px solid var(--color-alt-2-10); }
.border-top-3-color-alt-2 { border-top: 3px solid var(--color-alt-2); }
.border-top-3-color-alt-2-90 { border-top: 3px solid var(--color-alt-2-90); }
.border-top-3-color-alt-2-80 { border-top: 3px solid var(--color-alt-2-80); }
.border-top-3-color-alt-2-70 { border-top: 3px solid var(--color-alt-2-70); }
.border-top-3-color-alt-2-60 { border-top: 3px solid var(--color-alt-2-60); }
.border-top-3-color-alt-2-50 { border-top: 3px solid var(--color-alt-2-50); }
.border-top-3-color-alt-2-40 { border-top: 3px solid var(--color-alt-2-40); }
.border-top-3-color-alt-2-30 { border-top: 3px solid var(--color-alt-2-30); }
.border-top-3-color-alt-2-20 { border-top: 3px solid var(--color-alt-2-20); }
.border-top-3-color-alt-2-10 { border-top: 3px solid var(--color-alt-2-10); }
.border-color-3-alt-3 { border: 3px solid var(--color-alt-3); }
.border-color-3-alt-3-90 { border: 3px solid var(--color-alt-3-90); }
.border-color-3-alt-3-80 { border: 3px solid var(--color-alt-3-80); }
.border-color-3-alt-3-70 { border: 3px solid var(--color-alt-3-70); }
.border-color-3-alt-3-60 { border: 3px solid var(--color-alt-3-60); }
.border-color-3-alt-3-50 { border: 3px solid var(--color-alt-3-50); }
.border-color-3-alt-3-40 { border: 3px solid var(--color-alt-3-40); }
.border-color-3-alt-3-30 { border: 3px solid var(--color-alt-3-30); }
.border-color-3-alt-3-20 { border: 3px solid var(--color-alt-3-20); }
.border-color-3-alt-3-10 { border: 3px solid var(--color-alt-3-10); }
.border-bottom-3-color-alt-3 { border-bottom: 3px solid var(--color-alt-3); }
.border-bottom-3-color-alt-3-90 { border-bottom: 3px solid var(--color-alt-3-90); }
.border-bottom-3-color-alt-3-80 { border-bottom: 3px solid var(--color-alt-3-80); }
.border-bottom-3-color-alt-3-70 { border-bottom: 3px solid var(--color-alt-3-70); }
.border-bottom-3-color-alt-3-60 { border-bottom: 3px solid var(--color-alt-3-60); }
.border-bottom-3-color-alt-3-50 { border-bottom: 3px solid var(--color-alt-3-50); }
.border-bottom-3-color-alt-3-40 { border-bottom: 3px solid var(--color-alt-3-40); }
.border-bottom-3-color-alt-3-30 { border-bottom: 3px solid var(--color-alt-3-30); }
.border-bottom-3-color-alt-3-20 { border-bottom: 3px solid var(--color-alt-3-20); }
.border-bottom-3-color-alt-3-10 { border-bottom: 3px solid var(--color-alt-3-10); }
.border-left-3-color-alt-3 { border-left: 3px solid var(--color-alt-3); }
.border-left-3-color-alt-3-90 { border-left: 3px solid var(--color-alt-3-90); }
.border-left-3-color-alt-3-80 { border-left: 3px solid var(--color-alt-3-80); }
.border-left-3-color-alt-3-70 { border-left: 3px solid var(--color-alt-3-70); }
.border-left-3-color-alt-3-60 { border-left: 3px solid var(--color-alt-3-60); }
.border-left-3-color-alt-3-50 { border-left: 3px solid var(--color-alt-3-50); }
.border-left-3-color-alt-3-40 { border-left: 3px solid var(--color-alt-3-40); }
.border-left-3-color-alt-3-30 { border-left: 3px solid var(--color-alt-3-30); }
.border-left-3-color-alt-3-20 { border-left: 3px solid var(--color-alt-3-20); }
.border-left-3-color-alt-3-10 { border-left: 3px solid var(--color-alt-3-10); }
.border-right-3-color-alt-3 { border-right: 3px solid var(--color-alt-3); }
.border-right-3-color-alt-3-90 { border-right: 3px solid var(--color-alt-3-90); }
.border-right-3-color-alt-3-80 { border-right: 3px solid var(--color-alt-3-80); }
.border-right-3-color-alt-3-70 { border-right: 3px solid var(--color-alt-3-70); }
.border-right-3-color-alt-3-60 { border-right: 3px solid var(--color-alt-3-60); }
.border-right-3-color-alt-3-50 { border-right: 3px solid var(--color-alt-3-50); }
.border-right-3-color-alt-3-40 { border-right: 3px solid var(--color-alt-3-40); }
.border-right-3-color-alt-3-30 { border-right: 3px solid var(--color-alt-3-30); }
.border-right-3-color-alt-3-20 { border-right: 3px solid var(--color-alt-3-20); }
.border-right-3-color-alt-3-10 { border-right: 3px solid var(--color-alt-3-10); }
.border-top-3-color-alt-3 { border-top: 3px solid var(--color-alt-3); }
.border-top-3-color-alt-3-90 { border-top: 3px solid var(--color-alt-3-90); }
.border-top-3-color-alt-3-80 { border-top: 3px solid var(--color-alt-3-80); }
.border-top-3-color-alt-3-70 { border-top: 3px solid var(--color-alt-3-70); }
.border-top-3-color-alt-3-60 { border-top: 3px solid var(--color-alt-3-60); }
.border-top-3-color-alt-3-50 { border-top: 3px solid var(--color-alt-3-50); }
.border-top-3-color-alt-3-40 { border-top: 3px solid var(--color-alt-3-40); }
.border-top-3-color-alt-3-30 { border-top: 3px solid var(--color-alt-3-30); }
.border-top-3-color-alt-3-20 { border-top: 3px solid var(--color-alt-3-20); }
.border-top-3-color-alt-3-10 { border-top: 3px solid var(--color-alt-3-10); }
.border-color-3-alt-4 { border: 3px solid var(--color-alt-4); }
.border-color-3-alt-4-90 { border: 3px solid var(--color-alt-4-90); }
.border-color-3-alt-4-80 { border: 3px solid var(--color-alt-4-80); }
.border-color-3-alt-4-70 { border: 3px solid var(--color-alt-4-70); }
.border-color-3-alt-4-60 { border: 3px solid var(--color-alt-4-60); }
.border-color-3-alt-4-50 { border: 3px solid var(--color-alt-4-50); }
.border-color-3-alt-4-40 { border: 3px solid var(--color-alt-4-40); }
.border-color-3-alt-4-30 { border: 3px solid var(--color-alt-4-30); }
.border-color-3-alt-4-20 { border: 3px solid var(--color-alt-4-20); }
.border-color-3-alt-4-10 { border: 3px solid var(--color-alt-4-10); }
.border-bottom-3-color-alt-4 { border-bottom: 3px solid var(--color-alt-4); }
.border-bottom-3-color-alt-4-90 { border-bottom: 3px solid var(--color-alt-4-90); }
.border-bottom-3-color-alt-4-80 { border-bottom: 3px solid var(--color-alt-4-80); }
.border-bottom-3-color-alt-4-70 { border-bottom: 3px solid var(--color-alt-4-70); }
.border-bottom-3-color-alt-4-60 { border-bottom: 3px solid var(--color-alt-4-60); }
.border-bottom-3-color-alt-4-50 { border-bottom: 3px solid var(--color-alt-4-50); }
.border-bottom-3-color-alt-4-40 { border-bottom: 3px solid var(--color-alt-4-40); }
.border-bottom-3-color-alt-4-30 { border-bottom: 3px solid var(--color-alt-4-30); }
.border-bottom-3-color-alt-4-20 { border-bottom: 3px solid var(--color-alt-4-20); }
.border-bottom-3-color-alt-4-10 { border-bottom: 3px solid var(--color-alt-4-10); }
.border-left-3-color-alt-4 { border-left: 3px solid var(--color-alt-4); }
.border-left-3-color-alt-4-90 { border-left: 3px solid var(--color-alt-4-90); }
.border-left-3-color-alt-4-80 { border-left: 3px solid var(--color-alt-4-80); }
.border-left-3-color-alt-4-70 { border-left: 3px solid var(--color-alt-4-70); }
.border-left-3-color-alt-4-60 { border-left: 3px solid var(--color-alt-4-60); }
.border-left-3-color-alt-4-50 { border-left: 3px solid var(--color-alt-4-50); }
.border-left-3-color-alt-4-40 { border-left: 3px solid var(--color-alt-4-40); }
.border-left-3-color-alt-4-30 { border-left: 3px solid var(--color-alt-4-30); }
.border-left-3-color-alt-4-20 { border-left: 3px solid var(--color-alt-4-20); }
.border-left-3-color-alt-4-10 { border-left: 3px solid var(--color-alt-4-10); }
.border-right-3-color-alt-4 { border-right: 3px solid var(--color-alt-4); }
.border-right-3-color-alt-4-90 { border-right: 3px solid var(--color-alt-4-90); }
.border-right-3-color-alt-4-80 { border-right: 3px solid var(--color-alt-4-80); }
.border-right-3-color-alt-4-70 { border-right: 3px solid var(--color-alt-4-70); }
.border-right-3-color-alt-4-60 { border-right: 3px solid var(--color-alt-4-60); }
.border-right-3-color-alt-4-50 { border-right: 3px solid var(--color-alt-4-50); }
.border-right-3-color-alt-4-40 { border-right: 3px solid var(--color-alt-4-40); }
.border-right-3-color-alt-4-30 { border-right: 3px solid var(--color-alt-4-30); }
.border-right-3-color-alt-4-20 { border-right: 3px solid var(--color-alt-4-20); }
.border-right-3-color-alt-4-10 { border-right: 3px solid var(--color-alt-4-10); }
.border-top-3-color-alt-4 { border-top: 3px solid var(--color-alt-4); }
.border-top-3-color-alt-4-90 { border-top: 3px solid var(--color-alt-4-90); }
.border-top-3-color-alt-4-80 { border-top: 3px solid var(--color-alt-4-80); }
.border-top-3-color-alt-4-70 { border-top: 3px solid var(--color-alt-4-70); }
.border-top-3-color-alt-4-60 { border-top: 3px solid var(--color-alt-4-60); }
.border-top-3-color-alt-4-50 { border-top: 3px solid var(--color-alt-4-50); }
.border-top-3-color-alt-4-40 { border-top: 3px solid var(--color-alt-4-40); }
.border-top-3-color-alt-4-30 { border-top: 3px solid var(--color-alt-4-30); }
.border-top-3-color-alt-4-20 { border-top: 3px solid var(--color-alt-4-20); }
.border-top-3-color-alt-4-10 { border-top: 3px solid var(--color-alt-4-10); }
.border-radius-xxsmall {
border-radius: var(--border-radius-xxsmall);
}
.border-radius-xsmall {
border-radius: var(--border-radius-xsmall);
}
.border-radius-small {
border-radius: var(--border-radius-small);
}
.border-radius-medium{
border-radius: var(--border-radius-medium);
}
.border-radius-large{
border-radius: var(--border-radius-large);
}
.border-radius-xlarge{
border-radius: var(--border-radius-xlarge);
}
.border-radius-xxlarge{
border-radius: var(--border-radius-xxlarge);
}
canvas {
display: block;
max-width: 100%;
}
code {
font-family: var(--font-family-monospace);
font-size: var(--font-size-small);
color: var(--color-secondary-50);
}
.color-primary {color: var(--color-primary);}
.color-primary-10 {color: var(--color-primary-10);}
.color-primary-20 {color: var(--color-primary-20);}
.color-primary-30 {color: var(--color-primary-30);}
.color-primary-40 {color: var(--color-primary-40);}
.color-primary-50 {color: var(--color-primary-50);}
.color-primary-60 {color: var(--color-primary-60);}
.color-primary-70 {color: var(--color-primary-70);}
.color-primary-80 {color: var(--color-primary-80);}
.color-primary-90 {color: var(--color-primary-90);}
.color-secondary {color: var(--color-secondary);}
.color-secondary-10 {color: var(--color-secondary-10);}
.color-secondary-20 {color: var(--color-secondary-20);}
.color-secondary-30 {color: var(--color-secondary-30);}
.color-secondary-40 {color: var(--color-secondary-40);}
.color-secondary-50 {color: var(--color-secondary-50);}
.color-secondary-60 {color: var(--color-secondary-60);}
.color-secondary-70 {color: var(--color-secondary-70);}
.color-secondary-80 {color: var(--color-secondary-80);}
.color-secondary-90 {color: var(--color-secondary-90);}
.color-alt-1 {color: var(--color-alt-1);}
.color-alt-1-10 {color: var(--color-alt-1-10);}
.color-alt-1-20 {color: var(--color-alt-1-20);}
.color-alt-1-30 {color: var(--color-alt-1-30);}
.color-alt-1-40 {color: var(--color-alt-1-40);}
.color-alt-1-50 {color: var(--color-alt-1-50);}
.color-alt-1-60 {color: var(--color-alt-1-60);}
.color-alt-1-70 {color: var(--color-alt-1-70);}
.color-alt-1-80 {color: var(--color-alt-1-80);}
.color-alt-1-90 {color: var(--color-alt-1-90);}
.color-alt-2 {color: var(--color-alt-2);}
.color-alt-2-10 {color: var(--color-alt-2-10);}
.color-alt-2-20 {color: var(--color-alt-2-20);}
.color-alt-2-30 {color: var(--color-alt-2-30);}
.color-alt-2-40 {color: var(--color-alt-2-40);}
.color-alt-2-50 {color: var(--color-alt-2-50);}
.color-alt-2-60 {color: var(--color-alt-2-60);}
.color-alt-2-70 {color: var(--color-alt-2-70);}
.color-alt-2-80 {color: var(--color-alt-2-80);}
.color-alt-2-90 {color: var(--color-alt-2-90);}
.color-alt-3 {color: var(--color-alt-3);}
.color-alt-3-10 {color: var(--color-alt-3-10);}
.color-alt-3-20 {color: var(--color-alt-3-20);}
.color-alt-3-30 {color: var(--color-alt-3-30);}
.color-alt-3-40 {color: var(--color-alt-3-40);}
.color-alt-3-50 {color: var(--color-alt-3-50);}
.color-alt-3-60 {color: var(--color-alt-3-60);}
.color-alt-3-70 {color: var(--color-alt-3-70);}
.color-alt-3-80 {color: var(--color-alt-3-80);}
.color-alt-3-90 {color: var(--color-alt-3-90);}
.color-alt-4 {color: var(--color-alt-4);}
.color-alt-4-10 {color: var(--color-alt-4-10);}
.color-alt-4-20 {color: var(--color-alt-4-20);}
.color-alt-4-30 {color: var(--color-alt-4-30);}
.color-alt-4-40 {color: var(--color-alt-4-40);}
.color-alt-4-50 {color: var(--color-alt-4-50);}
.color-alt-4-60 {color: var(--color-alt-4-60);}
.color-alt-4-70 {color: var(--color-alt-4-70);}
.color-alt-4-80 {color: var(--color-alt-4-80);}
.color-alt-4-90 {color: var(--color-alt-4-90);}
.flow > :where(:not(:first-child)) {
margin-top: var(--flow-space, 1em);
}
.font-size-xsmall { font-size: var(--font-size-xsmall); }
.font-size-small { font-size: var(--font-size-small); }
.font-size-medium { font-size: var(--font-size-medium); }
.font-size-large { font-size: var(--font-size-large); }
.font-size-xlarge { font-size: var(--font-size-xlarge); }
.font-size-xxlarge { font-size: var(--font-size-xxlarge); }
.font-size-xxxlarge { font-size: var(--font-size-xxxlarge); }
footer {
border-top: var(--border-alt-4-20);
color: var(--color-primary-40);
display: grid;
grid-template-columns: 1fr 1fr;
font-size: var(--font-size-small);
margin-inline: auto;
margin-bottom: var(--margin-small);
margin-top: var(--margin-xlarge);
padding: var(--padding-large);
width: var(--width-medium);
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.1;
color: var(--color-secondary);
text-wrap: balance;
}
h1 {
border-bottom: var(--border-alt-1-30);
font-size: var(--font-size-xxxlarge);
margin-top: 1em;
}
h2 {
border-bottom: var(--border-alt-2-20);
font-size: var(--font-size-xxlarge);
--flow-space: 1.3em;
}
h3 {
font-size: var(--font-size-xlarge);
--flow-space: 1.0em;
}
h4 {
font-size: var(--font-size-large);
--flow-space: 1.0em;
}
h5 {
font-size: var(--font-size-medium);
--flow-space: 1.0em;
}
h6 {
font-size: var(--font-size-small);
--flow-space: 1.0em;
}
iframe {
max-width: 100%;
display: block;
}
img {
max-width: 100%;
display: block;
}
input {
margin-inline: var(--margin-xxsmall);
}
kbd {
background-color: var(--color-alt-secondary-20);
border: var(--border-primary);
border-radius: var(--border-radius-xxsmall);
padding-inline: var(--padding-xxsmall);
}
li > :where(:not(:first-child)) {
margin-top: 1em;
}
.margin-xxsmall {margin: var(--margin-xxsmall);}
.margin-xsmall {margin: var(--margin-xsmall);}
.margin-small {margin: var(--margin-small);}
.margin-medium {margin: var(--margin-medium);}
.margin-large {margin: var(--margin-large);}
.margin-xlarge {margin: var(--margin-xlarge);}
.margin-xxlarge {margin: var(--margin-xxlarge);}
.margin-block-xxsmall {margin-block: var(--margin-xxsmall);}
.margin-block-xsmall {margin-block: var(--margin-xsmall);}
.margin-block-small {margin-block: var(--margin-small);}
.margin-block-medium {margin-block: var(--margin-medium);}
.margin-block-large {margin-block: var(--margin-large);}
.margin-block-xlarge {margin-block: var(--margin-xlarge);}
.margin-block-xxlarge {margin-block: var(--margin-xxlarge);}
.margin-bottom-xxsmall {margin-bottom: var(--margin-xxsmall);}
.margin-bottom-xsmall {margin-bottom: var(--margin-xsmall);}
.margin-bottom-small {margin-bottom: var(--margin-small);}
.margin-bottom-medium {margin-bottom: var(--margin-medium);}
.margin-bottom-large {margin-bottom: var(--margin-large);}
.margin-bottom-xlarge {margin-bottom: var(--margin-xlarge);}
.margin-bottom-xxlarge {margin-bottom: var(--margin-xxlarge);}
.margin-inline-xxsmall {margin-inline: var(--margin-xxsmall);}
.margin-inline-xsmall {margin-inline: var(--margin-xsmall);}
.margin-inline-small {margin-inline: var(--margin-small);}
.margin-inline-medium {margin-inline: var(--margin-medium);}
.margin-inline-large {margin-inline: var(--margin-large);}
.margin-inline-xlarge {margin-inline: var(--margin-xlarge);}
.margin-inline-xxlarge {margin-inline: var(--margin-xxlarge);}
.margin-top-xxsmall {margin-top: var(--margin-xxsmall);}
.margin-top-xsmall {margin-top: var(--margin-xsmall);}
.margin-top-small {margin-top: var(--margin-small);}
.margin-top-medium {margin-top: var(--margin-medium);}
.margin-top-large {margin-top: var(--margin-large);}
.margin-top-xlarge {margin-top: var(--margin-xlarge);}
.margin-top-xxlarge {margin-top: var(--margin-xxlarge);}
ol > :where(:not(:first-child)) {
margin-top: 1em;
}
.padding-xxsmall {padding: var(--padding-xxsmall);}
.padding-xsmall {padding: var(--padding-xsmall);}
.padding-small {padding: var(--padding-small);}
.padding-medium {padding: var(--padding-medium);}
.padding-large {padding: var(--padding-large);}
.padding-xlarge {padding: var(--padding-xlarge);}
.padding-xxlarge {padding: var(--padding-xxlarge);}
.padding-block-xxsmall {padding-block: var(--padding-xxsmall);}
.padding-block-xsmall {padding-block: var(--padding-xsmall);}
.padding-block-small {padding-block: var(--padding-small);}
.padding-block-medium {padding-block: var(--padding-medium);}
.padding-block-large {padding-block: var(--padding-large);}
.padding-block-xlarge {padding-block: var(--padding-xlarge);}
.padding-block-xxlarge {padding-block: var(--padding-xxlarge);}
.padding-bottom-xxsmall {padding-bottom: var(--padding-xxsmall);}
.padding-bottom-xsmall {padding-bottom: var(--padding-xsmall);}
.padding-bottom-small {padding-bottom: var(--padding-small);}
.padding-bottom-medium {padding-bottom: var(--padding-medium);}
.padding-bottom-large {padding-bottom: var(--padding-large);}
.padding-bottom-xlarge {padding-bottom: var(--padding-xlarge);}
.padding-bottom-xxlarge {padding-bottom: var(--padding-xxlarge);}
.padding-inline-xxsmall {padding-inline: var(--padding-xxsmall);}
.padding-inline-xsmall {padding-inline: var(--padding-xsmall);}
.padding-inline-small {padding-inline: var(--padding-small);}
.padding-inline-medium {padding-inline: var(--padding-medium);}
.padding-inline-large {padding-inline: var(--padding-large);}
.padding-inline-xlarge {padding-inline: var(--padding-xlarge);}
.padding-inline-xxlarge {padding-inline: var(--padding-xxlarge);}
.padding-top-xxsmall {padding-top: var(--padding-xxsmall);}
.padding-top-xsmall {padding-top: var(--padding-xsmall);}
.padding-top-small {padding-top: var(--padding-small);}
.padding-top-medium {padding-top: var(--padding-medium);}
.padding-top-large {padding-top: var(--padding-large);}
.padding-top-xlarge {padding-top: var(--padding-xlarge);}
.padding-top-xxlarge {padding-top: var(--padding-xxlarge);}
picture {
max-width: 100%;
display: block;
}
svg {
max-width: 100%;
display: block;
}
.text-align-center { text-align: center; }
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }
ul > :where(:not(:first-child)) {
margin-top: 1em;
}
.vertical-align-top {
vertical-align: baseline;
}
.vertical-align-bottom {
vertical-align: bottom;
}
.vertical-align-middle {
vertical-align: middle ;
}
.vertical-align-sub {
vertical-align: sub;
}
.vertical-align-super {
vertical-align: super;
}
.vertical-align-text-top {
vertical-align: text-top;
}
.vertical-align-text-bottom {
vertical-align: text-bottom;
}
.vertical-align-top {
vertical-align: top;
}
video {
max-width: 100%;
display: block;
}
.width-xxsmall {
width: var(--width-xxsmall);
}
.width-xsmall {
width: var(--width-xsmall);
}
.width-small {
width: var(--width-small);
}
.width-medium{
width: var(--width-medium);
}
.width-large{
width: var(--width-large);
}
.width-xlarge{
width: var(--width-xlarge);
}
.width-full{
width: var(--width-full);
}
.wrapper-xxsmall {
width: var(--width-xxsmall);
margin-inline: auto;
}
.wrapper-xxsmall > :where(:not(:first-child)) {
margin-top: var(--flow-space, 1em);
}
.wrapper-xsmall {
width: var(--width-xsmall);
margin-inline: auto;
}
.wrapper-xsmall > :where(:not(:first-child)) {
margin-top: var(--flow-space, 1em);
}
.wrapper-small {
width: var(--width-small);
margin-inline: auto;
}
.wrapper-small > :where(:not(:first-child)) {
margin-top: var(--flow-space, 1em);
}
.wrapper-medium {
width: var(--width-medium);
margin-inline: auto;
}
.wrapper-medium > :where(:not(:first-child)) {
margin-top: var(--flow-space, 1em);
}
.wrapper-large {
width: var(--width-large);
margin-inline: auto;
}
.wrapper-large > :where(:not(:first-child)) {
margin-top: var(--flow-space, 1em);
}
.wrapper-xlarge {
width: var(--width-xlarge);
margin-inline: auto;
}
.wrapper-xlarge > :where(:not(:first-child)) {
margin-top: var(--flow-space, 1em);
}
.wrapper-full {
width: var(--width-full);
margin-inline: auto;
}
.wrapper-full > :where(:not(:first-child)) {
margin-top: var(--flow-space, 1em);
}Going With The Flow
The .flow approach came from Kevin Powell's How to make a nice site with less CSS video. I've been using it for everything I do since learning about it.
-a
Work In Progress
This is the new code I'm working on based partially off colors.alanwsmith.com
NOTE; This was the prototype. The code itself resides in the colors.alanwsmith.com tool.
modes = [
# Name, Category
['light', 'light'],
['hc-light', 'light'],
['dark', 'dark'],
['hc-dark', 'dark'],
]
default_mode = modes[0][0]
sizes = [
# Name
['xxxsmall'],
['xxsmall'],
['xsmall'],
['small'],
['default'],
['large'],
['xlarge'],
['xxlarge'],
['xxxlarge']
]
directions = [
# Name, Append name to property?
['-full', False],
['-left', True],
['-right', True],
['-top', True],
['-bottom', True],
['-inline', True],
['-block', True]
]
# TODO: Split these up to their own things
basics = [
['font-size'],
['border-radius'],
['width'],
]
paddings = [
['0.1'],
['0.2'],
['0.3'],
['0.4'],
['0.5'],
['0.8'],
['1.3'],
['1.9'],
['2.4'],
]
faded_types = [
#key, Alpha
['', ''],
['-faded', ' / .3'],
['-faded2', ' / .1'],
]
bw_types = [
['black', { 'light': 0, 'dark': 0 }],
['white', { 'light': 100, 'dark': 100 }],
['matched', { 'light': 100, 'dark': 0 }],
['reversed', { 'light': 0, 'dark': 100 }],
]
color_bg_types = [
['text', 'color'],
['background', 'background-color']
]
spacing_types = [
['padding'],
['margin']
]
flows = [
['0.1'],
['0.3'],
['0.5'],
['0.7'],
['1'],
['1.8'],
['2.9'],
['4.3'],
['6.5'],
]
text_aligns = [
'start',
'end',
'center',
'justify',
'left',
'right'
]
widths = [
['min(100vw - 1.4rem, 3rem)'],
['min(100vw - 1.4rem, 7rem)'],
['min(100vw - 1.4rem, 16rem)'],
['min(100vw - 1.4rem, 33rem)'],
['min(100vw - 1.4rem, 36rem)'],
['min(100vw - 1.4rem, 42rem)'],
['min(100vw - 1.4rem, 48rem)'],
['min(100vw - 1.4rem, 56rem)'],
['min(100vw - 1.4rem, 64rem)'],
]
border_radai = [
['0.1rem'],
['0.2rem'],
['0.3rem'],
['0.4rem'],
['0.5rem'],
['0.6rem'],
['0.8rem'],
['1rem'],
['1.2rem'],
]
font_sizes = [
['clamp(0.58rem, calc(0.57rem + 0.03vw), 0.60rem)'],
['clamp(0.68rem, calc(0.67rem + 0.03vw), 0.70rem)'],
['clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem)'],
['clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem)'],
['clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem)'],
['clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem)'],
['clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem)'],
['clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem)'],
['clamp(2.03rem, calc(2.0rem + 1.25vw), 2.7rem)'],
['clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem)'],
]
def ln(text):
return f"{text}\n"
sections = []
# BW Vars
def bw_mode_var(mode, name, num, base, percent):
return f"--{mode}__{name}{num}: oklch({base}% 0 0{percent});"
def bw_active_var(mode, name, num):
return f"--{name}{num}: var(--{mode}__{name}{num});"
def add_bw_vars():
lines = []
for mode in modes:
for index, t in enumerate(bw_types):
for faded in faded_types:
lines.append(bw_mode_var(mode[0], t[0], faded[0], t[1][mode[1]], faded[1]))
for t in bw_types:
for faded in faded_types:
lines.append(bw_active_var(default_mode, t[0], faded[0]))
sections.append({
"class": "bw-vars",
"name": "Black and White Variables",
"type": "vars",
"lines": lines,
"editable": "no",
"deployable": "yes",
})
# BW Classes
def bw_class(key, fade, cbg):
return f".{key}{fade}-{cbg[0]} {{ {cbg[1]}: var(--{key}{fade}); }}"
def add_bw_classes():
lines = []
for t in bw_types:
for faded in faded_types:
for cbg in color_bg_types:
lines.append(bw_class(t[0], faded[0], cbg))
sections.append({
"class": "bw-color-bg-classes",
"name": "Black and White Color and Background Classes",
"type": "classes",
"lines": lines,
"editable": "no",
"deployable": "yes",
})
# BW Borders
def bw_border_class(key, fade, direction):
ext = direction[0]
if direction[1] == False:
ext = ""
return f".{key}{fade}{direction[0]}-border {{ border{ext}: 1px solid var(--{key}{fade}); }}"
def add_bw_border_classes():
lines = []
for t in bw_types:
for faded in faded_types:
for direction in directions:
lines.append(bw_border_class(t[0], faded[0], direction))
sections.append({
"class": "bw-border-classes",
"name": "Black and White Border Classes",
"type": "classes",
"lines": lines,
"editable": "no",
"deployable": "yes",
})
# Spacing Vars
def spacing_var(size, t, amount):
return f"--{size}-{t}: {amount}rem;"
def add_spacing_vars():
lines = []
for t in spacing_types:
for index, size in [
(index, size[0])
for index, size in enumerate(sizes)
]:
lines.append(spacing_var(size, t[0], paddings[index][0]))
sections.append({
"class": "spacing-vars",
"name": "Spacing Variables",
"type": "vars",
"lines": lines,
"editable": "yes",
"deployable": "yes",
})
# Spacing Classes
def spacing_class(size, t, dir, ext, amount):
return f".{size}{dir}-{t} {{ {t}{ext}: var(--{size}-{t}); }}"
def add_spacing_classes():
lines = []
for t in spacing_types:
for index, size in [
(index, size[0])
for index, size in enumerate(sizes)
]:
for direction in directions:
ext = direction[0]
if direction[1] == False:
ext = ""
lines.append(spacing_class(size, t[0], direction[0], ext, paddings[index][0]))
sections.append({
"class": "spacing-vars",
"name": "Spacing Variables",
"type": "classes",
"lines": lines,
"editable": "no",
"deployable": "yes",
})
# Flow Classes
# TODO: Split out flow variables to their own things
def flow_class(size, amount):
return f""".{size}-flow > :where(:not(:first-child)) {{
margin-top: var(--flow-space, {amount}em);
}}"""
def add_flow_classes():
lines = []
for index, size in [
(index, size[0])
for index, size in enumerate(sizes)
]:
lines.append(flow_class(size, flows[index][0]))
sections.append({
"class": "flow-classes",
"name": "Flow Classes",
"type": "classes",
"lines": lines,
"editable": "yes",
"deployable": "yes",
})
def add_text_align():
lines = []
for align in text_aligns:
lines.append(f".align-{align} {{ text-align: {align}; }}")
sections.append({
"class": "align-text-classes",
"name": "Align Text Classes",
"type": "classes",
"lines": lines,
"editable": "no",
"deployable": "yes",
})
def add_width_vars():
lines = []
for index, size in [
(index, size[0])
for index, size in enumerate(sizes)
]:
lines.append(f"--{size}-width: {widths[index][0]};")
lines.append(f"--full-width: calc(100vw - 1.4rem);")
sections.append({
"class": "width-vars",
"name": "Width Variables",
"type": "vars",
"lines": lines,
"editable": "yes",
"deployable": "yes",
})
def add_width_classes():
lines = []
for index, size in [
(index, size[0])
for index, size in enumerate(sizes)
]:
lines.append(f".{size}-width {{ width: var(--{size}-width); }}")
lines.append(f".full-width {{ width: calc(100vw - 1.4rem); }}")
sections.append({
"class": "width-classes",
"name": "Width Classes",
"type": "classes",
"lines": lines,
"editable": "no",
"deployable": "yes",
})
def add_wrapper_classes():
lines = []
for index, size in [
(index, size[0])
for index, size in enumerate(sizes)
]:
lines.append(f".{size}-wrapper {{ width: var(--{size}-width); margin-inline: auto; }}")
lines.append(f".full-width {{ width: calc(100vw - 1.4rem); }}")
sections.append({
"class": "wrapper-classes",
"name": "Wrapper Classes",
"type": "classes",
"lines": lines,
"editable": "no",
"deployable": "yes",
})
def add_border_radius_vars():
lines = []
for index, size in [
(index, size[0])
for index, size in enumerate(sizes)
]:
lines.append(f"--{size}-radius: {border_radai[index][0]};")
sections.append({
"class": "border-radius-vars",
"name": "Border Radius Variables",
"type": "vars",
"lines": lines,
"editable": "yes",
"deployable": "yes",
})
def add_border_radius_classes():
lines = []
for index, size in [
(index, size[0])
for index, size in enumerate(sizes)
]:
lines.append(f".{size}-radius {{ border-radius: var(--{size}-radius); }}")
sections.append({
"class": "border-radius-classes",
"name": "Border Radius Classes",
"type": "classes",
"lines": lines,
"editable": "no",
"deployable": "yes",
})
def add_font_size_vars():
lines = []
for index, size in [
(index, size[0])
for index, size in enumerate(sizes)
]:
lines.append(f"--{size}-font-size: {font_sizes[index][0]};")
sections.append({
"class": "font-size-vars",
"name": "Font Size Variables",
"type": "vars",
"lines": lines,
"editable": "yes",
"deployable": "yes",
})
def add_font_size_classes():
lines = []
for index, size in [
(index, size[0])
for index, size in enumerate(sizes)
]:
lines.append(f".{size}-font-size {{ font-size: var(--{size}-font); }}")
sections.append({
"class": "font-size-classes",
"name": "Font Size Classes",
"type": "classes",
"lines": lines,
"editable": "no",
"deployable": "yes",
})
def getDataKey(name):
return name.replace(" ", "-").lower()
def output_color_picker_file():
with open("/Users/alan/workshop/colors.alanwsmith.com/workshop/styles.html", "w") as _out:
_out.write("\n\n\n\n\n<!" + "-" + "-" + " START GENERATED STYLES " + "-" + "-" + ">" + "\n\n\n\n")
for section in sections:
name = section["name"]
key = getDataKey(name)
editable = section["editable"]
deployable = section["deployable"]
_out.write(ln(f"""<style
data-key="{key}"
data-name="{section["name"]}"
data-editable="{editable}"
data-deployable="{deployable}"
>"""))
if section["type"] == "vars":
_out.write(ln(f""":root {{"""))
for line in section["lines"]:
_out.write(ln(line))
if section["type"] == "vars":
_out.write(ln(f"""}}"""))
_out.write(ln(f"""</style>"""))
_out.write(ln(""))
_out.write("\n\n\n\n\n<!" + "-" + "-" + " END GENERATED STYLES " + "-" + "-" + ">" + "\n\n\n\n")
# TODO: Come up with bold variables
# maybe bold, bolder, boldest, thin, thinner, thinnest
# and then maybe normal as the replacement for default
add_bw_vars()
add_bw_classes()
add_bw_border_classes()
add_spacing_vars()
add_spacing_classes()
add_flow_classes()
add_text_align()
add_width_vars()
add_width_classes()
add_wrapper_classes()
add_border_radius_vars()
add_border_radius_classes()
add_font_size_vars()
add_font_size_classes()
output_color_picker_file()
print("done")Output:
done-- end of line --
Endnotes
Quick script to help generate stuff
sizes = [
'xsmall', 'small', 'medium', 'large',
'xlarge', 'xxlarge', 'xxxlarge'
]
for size in sizes:
print(f".font-size-{size} {{ font-size: var(--font-size-{size}); }}")Output:
.font-size-xsmall { font-size: var(--font-size-xsmall); }
.font-size-small { font-size: var(--font-size-small); }
.font-size-medium { font-size: var(--font-size-medium); }
.font-size-large { font-size: var(--font-size-large); }
.font-size-xlarge { font-size: var(--font-size-xlarge); }
.font-size-xxlarge { font-size: var(--font-size-xxlarge); }
.font-size-xxxlarge { font-size: var(--font-size-xxxlarge); }References
Footnotes
For example, at least half the ones on my projects/link page are hand built.