home ~ projects ~ socials

Quick Scripts To Make Some CSS

Go, Go, Gadget Python

I'm updating My Basic CSS Template. These are quick scripts to build some of the lines.

Border Vars

tokens = [
  'primary', 'secondary',
  'alt-1', 'alt-2', 'alt-3',
  'alt-4'
]

for token in tokens:
  print(f"--border-{token}: 1px solid var(--color-{token});")
  for n in range(9,0,-1):
    num = n * 10
    print(f"--border-{token}-{num}: 1px solid var(--color-{token}-{num});")
Output:
--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);

Padding And Margins

tokens = ['padding', 'margin']
directions = ['', '-block', '-bottom', '-inline', '-top']
sizes = ['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge']

for token in tokens:
  print("")
  for direction in directions:
    for size in sizes:
      print(
        f".{token}{direction}-{size} " + 
        "{" + 
        f"{token}{direction}: var(--{token}-{size});" +
        "}"
        )
Output:
.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);}

.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);}

Colors

colors = [
  'primary', 'secondary', 'alt-1', 
  'alt-2', 'alt-3', 'alt-4'
]

for color in colors:
  print(f".color-{color} {{color: var(--color-{color});}}")
  for n in range(1,10):
    num = n * 10
    print(f".color-{color}-{num} {{color: var(--color-{color}-{num});}}")
Output:
.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);}

Border Classes

tokens = [
  'primary', 'secondary',
  'alt-1', 'alt-2', 'alt-3',
  'alt-4'
]

directions = ['', '-bottom', '-left', '-right', '-top']

for token in tokens:
  for direction in directions:
    print(f".border{direction}-{token} {{ border{direction}: 1px solid var(--color-{token}); }}")
    for n in range(9,0,-1):
      num = n * 10
      print(f".border{direction}-{token}-{num} {{ border{direction}: 1px solid var(--color-{token}-{num}); }}")
Output:
.border-primary { border: 1px solid var(--color-primary); }
.border-primary-90 { border: 1px solid var(--color-primary-90); }
.border-primary-80 { border: 1px solid var(--color-primary-80); }
.border-primary-70 { border: 1px solid var(--color-primary-70); }
.border-primary-60 { border: 1px solid var(--color-primary-60); }
.border-primary-50 { border: 1px solid var(--color-primary-50); }
.border-primary-40 { border: 1px solid var(--color-primary-40); }
.border-primary-30 { border: 1px solid var(--color-primary-30); }
.border-primary-20 { border: 1px solid var(--color-primary-20); }
.border-primary-10 { border: 1px solid var(--color-primary-10); }
.border-bottom-primary { border-bottom: 1px solid var(--color-primary); }
.border-bottom-primary-90 { border-bottom: 1px solid var(--color-primary-90); }
.border-bottom-primary-80 { border-bottom: 1px solid var(--color-primary-80); }
.border-bottom-primary-70 { border-bottom: 1px solid var(--color-primary-70); }
.border-bottom-primary-60 { border-bottom: 1px solid var(--color-primary-60); }
.border-bottom-primary-50 { border-bottom: 1px solid var(--color-primary-50); }
.border-bottom-primary-40 { border-bottom: 1px solid var(--color-primary-40); }
.border-bottom-primary-30 { border-bottom: 1px solid var(--color-primary-30); }
.border-bottom-primary-20 { border-bottom: 1px solid var(--color-primary-20); }
.border-bottom-primary-10 { border-bottom: 1px solid var(--color-primary-10); }
.border-left-primary { border-left: 1px solid var(--color-primary); }
.border-left-primary-90 { border-left: 1px solid var(--color-primary-90); }
.border-left-primary-80 { border-left: 1px solid var(--color-primary-80); }
.border-left-primary-70 { border-left: 1px solid var(--color-primary-70); }
.border-left-primary-60 { border-left: 1px solid var(--color-primary-60); }
.border-left-primary-50 { border-left: 1px solid var(--color-primary-50); }
.border-left-primary-40 { border-left: 1px solid var(--color-primary-40); }
.border-left-primary-30 { border-left: 1px solid var(--color-primary-30); }
.border-left-primary-20 { border-left: 1px solid var(--color-primary-20); }
.border-left-primary-10 { border-left: 1px solid var(--color-primary-10); }
.border-right-primary { border-right: 1px solid var(--color-primary); }
.border-right-primary-90 { border-right: 1px solid var(--color-primary-90); }
.border-right-primary-80 { border-right: 1px solid var(--color-primary-80); }
.border-right-primary-70 { border-right: 1px solid var(--color-primary-70); }
.border-right-primary-60 { border-right: 1px solid var(--color-primary-60); }
.border-right-primary-50 { border-right: 1px solid var(--color-primary-50); }
.border-right-primary-40 { border-right: 1px solid var(--color-primary-40); }
.border-right-primary-30 { border-right: 1px solid var(--color-primary-30); }
.border-right-primary-20 { border-right: 1px solid var(--color-primary-20); }
.border-right-primary-10 { border-right: 1px solid var(--color-primary-10); }
.border-top-primary { border-top: 1px solid var(--color-primary); }
.border-top-primary-90 { border-top: 1px solid var(--color-primary-90); }
.border-top-primary-80 { border-top: 1px solid var(--color-primary-80); }
.border-top-primary-70 { border-top: 1px solid var(--color-primary-70); }
.border-top-primary-60 { border-top: 1px solid var(--color-primary-60); }
.border-top-primary-50 { border-top: 1px solid var(--color-primary-50); }
.border-top-primary-40 { border-top: 1px solid var(--color-primary-40); }
.border-top-primary-30 { border-top: 1px solid var(--color-primary-30); }
.border-top-primary-20 { border-top: 1px solid var(--color-primary-20); }
.border-top-primary-10 { border-top: 1px solid var(--color-primary-10); }
.border-secondary { border: 1px solid var(--color-secondary); }
.border-secondary-90 { border: 1px solid var(--color-secondary-90); }
.border-secondary-80 { border: 1px solid var(--color-secondary-80); }
.border-secondary-70 { border: 1px solid var(--color-secondary-70); }
.border-secondary-60 { border: 1px solid var(--color-secondary-60); }
.border-secondary-50 { border: 1px solid var(--color-secondary-50); }
.border-secondary-40 { border: 1px solid var(--color-secondary-40); }
.border-secondary-30 { border: 1px solid var(--color-secondary-30); }
.border-secondary-20 { border: 1px solid var(--color-secondary-20); }
.border-secondary-10 { border: 1px solid var(--color-secondary-10); }
.border-bottom-secondary { border-bottom: 1px solid var(--color-secondary); }
.border-bottom-secondary-90 { border-bottom: 1px solid var(--color-secondary-90); }
.border-bottom-secondary-80 { border-bottom: 1px solid var(--color-secondary-80); }
.border-bottom-secondary-70 { border-bottom: 1px solid var(--color-secondary-70); }
.border-bottom-secondary-60 { border-bottom: 1px solid var(--color-secondary-60); }
.border-bottom-secondary-50 { border-bottom: 1px solid var(--color-secondary-50); }
.border-bottom-secondary-40 { border-bottom: 1px solid var(--color-secondary-40); }
.border-bottom-secondary-30 { border-bottom: 1px solid var(--color-secondary-30); }
.border-bottom-secondary-20 { border-bottom: 1px solid var(--color-secondary-20); }
.border-bottom-secondary-10 { border-bottom: 1px solid var(--color-secondary-10); }
.border-left-secondary { border-left: 1px solid var(--color-secondary); }
.border-left-secondary-90 { border-left: 1px solid var(--color-secondary-90); }
.border-left-secondary-80 { border-left: 1px solid var(--color-secondary-80); }
.border-left-secondary-70 { border-left: 1px solid var(--color-secondary-70); }
.border-left-secondary-60 { border-left: 1px solid var(--color-secondary-60); }
.border-left-secondary-50 { border-left: 1px solid var(--color-secondary-50); }
.border-left-secondary-40 { border-left: 1px solid var(--color-secondary-40); }
.border-left-secondary-30 { border-left: 1px solid var(--color-secondary-30); }
.border-left-secondary-20 { border-left: 1px solid var(--color-secondary-20); }
.border-left-secondary-10 { border-left: 1px solid var(--color-secondary-10); }
.border-right-secondary { border-right: 1px solid var(--color-secondary); }
.border-right-secondary-90 { border-right: 1px solid var(--color-secondary-90); }
.border-right-secondary-80 { border-right: 1px solid var(--color-secondary-80); }
.border-right-secondary-70 { border-right: 1px solid var(--color-secondary-70); }
.border-right-secondary-60 { border-right: 1px solid var(--color-secondary-60); }
.border-right-secondary-50 { border-right: 1px solid var(--color-secondary-50); }
.border-right-secondary-40 { border-right: 1px solid var(--color-secondary-40); }
.border-right-secondary-30 { border-right: 1px solid var(--color-secondary-30); }
.border-right-secondary-20 { border-right: 1px solid var(--color-secondary-20); }
.border-right-secondary-10 { border-right: 1px solid var(--color-secondary-10); }
.border-top-secondary { border-top: 1px solid var(--color-secondary); }
.border-top-secondary-90 { border-top: 1px solid var(--color-secondary-90); }
.border-top-secondary-80 { border-top: 1px solid var(--color-secondary-80); }
.border-top-secondary-70 { border-top: 1px solid var(--color-secondary-70); }
.border-top-secondary-60 { border-top: 1px solid var(--color-secondary-60); }
.border-top-secondary-50 { border-top: 1px solid var(--color-secondary-50); }
.border-top-secondary-40 { border-top: 1px solid var(--color-secondary-40); }
.border-top-secondary-30 { border-top: 1px solid var(--color-secondary-30); }
.border-top-secondary-20 { border-top: 1px solid var(--color-secondary-20); }
.border-top-secondary-10 { border-top: 1px solid var(--color-secondary-10); }
.border-alt-1 { border: 1px solid var(--color-alt-1); }
.border-alt-1-90 { border: 1px solid var(--color-alt-1-90); }
.border-alt-1-80 { border: 1px solid var(--color-alt-1-80); }
.border-alt-1-70 { border: 1px solid var(--color-alt-1-70); }
.border-alt-1-60 { border: 1px solid var(--color-alt-1-60); }
.border-alt-1-50 { border: 1px solid var(--color-alt-1-50); }
.border-alt-1-40 { border: 1px solid var(--color-alt-1-40); }
.border-alt-1-30 { border: 1px solid var(--color-alt-1-30); }
.border-alt-1-20 { border: 1px solid var(--color-alt-1-20); }
.border-alt-1-10 { border: 1px solid var(--color-alt-1-10); }
.border-bottom-alt-1 { border-bottom: 1px solid var(--color-alt-1); }
.border-bottom-alt-1-90 { border-bottom: 1px solid var(--color-alt-1-90); }
.border-bottom-alt-1-80 { border-bottom: 1px solid var(--color-alt-1-80); }
.border-bottom-alt-1-70 { border-bottom: 1px solid var(--color-alt-1-70); }
.border-bottom-alt-1-60 { border-bottom: 1px solid var(--color-alt-1-60); }
.border-bottom-alt-1-50 { border-bottom: 1px solid var(--color-alt-1-50); }
.border-bottom-alt-1-40 { border-bottom: 1px solid var(--color-alt-1-40); }
.border-bottom-alt-1-30 { border-bottom: 1px solid var(--color-alt-1-30); }
.border-bottom-alt-1-20 { border-bottom: 1px solid var(--color-alt-1-20); }
.border-bottom-alt-1-10 { border-bottom: 1px solid var(--color-alt-1-10); }
.border-left-alt-1 { border-left: 1px solid var(--color-alt-1); }
.border-left-alt-1-90 { border-left: 1px solid var(--color-alt-1-90); }
.border-left-alt-1-80 { border-left: 1px solid var(--color-alt-1-80); }
.border-left-alt-1-70 { border-left: 1px solid var(--color-alt-1-70); }
.border-left-alt-1-60 { border-left: 1px solid var(--color-alt-1-60); }
.border-left-alt-1-50 { border-left: 1px solid var(--color-alt-1-50); }
.border-left-alt-1-40 { border-left: 1px solid var(--color-alt-1-40); }
.border-left-alt-1-30 { border-left: 1px solid var(--color-alt-1-30); }
.border-left-alt-1-20 { border-left: 1px solid var(--color-alt-1-20); }
.border-left-alt-1-10 { border-left: 1px solid var(--color-alt-1-10); }
.border-right-alt-1 { border-right: 1px solid var(--color-alt-1); }
.border-right-alt-1-90 { border-right: 1px solid var(--color-alt-1-90); }
.border-right-alt-1-80 { border-right: 1px solid var(--color-alt-1-80); }
.border-right-alt-1-70 { border-right: 1px solid var(--color-alt-1-70); }
.border-right-alt-1-60 { border-right: 1px solid var(--color-alt-1-60); }
.border-right-alt-1-50 { border-right: 1px solid var(--color-alt-1-50); }
.border-right-alt-1-40 { border-right: 1px solid var(--color-alt-1-40); }
.border-right-alt-1-30 { border-right: 1px solid var(--color-alt-1-30); }
.border-right-alt-1-20 { border-right: 1px solid var(--color-alt-1-20); }
.border-right-alt-1-10 { border-right: 1px solid var(--color-alt-1-10); }
.border-top-alt-1 { border-top: 1px solid var(--color-alt-1); }
.border-top-alt-1-90 { border-top: 1px solid var(--color-alt-1-90); }
.border-top-alt-1-80 { border-top: 1px solid var(--color-alt-1-80); }
.border-top-alt-1-70 { border-top: 1px solid var(--color-alt-1-70); }
.border-top-alt-1-60 { border-top: 1px solid var(--color-alt-1-60); }
.border-top-alt-1-50 { border-top: 1px solid var(--color-alt-1-50); }
.border-top-alt-1-40 { border-top: 1px solid var(--color-alt-1-40); }
.border-top-alt-1-30 { border-top: 1px solid var(--color-alt-1-30); }
.border-top-alt-1-20 { border-top: 1px solid var(--color-alt-1-20); }
.border-top-alt-1-10 { border-top: 1px solid var(--color-alt-1-10); }
.border-alt-2 { border: 1px solid var(--color-alt-2); }
.border-alt-2-90 { border: 1px solid var(--color-alt-2-90); }
.border-alt-2-80 { border: 1px solid var(--color-alt-2-80); }
.border-alt-2-70 { border: 1px solid var(--color-alt-2-70); }
.border-alt-2-60 { border: 1px solid var(--color-alt-2-60); }
.border-alt-2-50 { border: 1px solid var(--color-alt-2-50); }
.border-alt-2-40 { border: 1px solid var(--color-alt-2-40); }
.border-alt-2-30 { border: 1px solid var(--color-alt-2-30); }
.border-alt-2-20 { border: 1px solid var(--color-alt-2-20); }
.border-alt-2-10 { border: 1px solid var(--color-alt-2-10); }
.border-bottom-alt-2 { border-bottom: 1px solid var(--color-alt-2); }
.border-bottom-alt-2-90 { border-bottom: 1px solid var(--color-alt-2-90); }
.border-bottom-alt-2-80 { border-bottom: 1px solid var(--color-alt-2-80); }
.border-bottom-alt-2-70 { border-bottom: 1px solid var(--color-alt-2-70); }
.border-bottom-alt-2-60 { border-bottom: 1px solid var(--color-alt-2-60); }
.border-bottom-alt-2-50 { border-bottom: 1px solid var(--color-alt-2-50); }
.border-bottom-alt-2-40 { border-bottom: 1px solid var(--color-alt-2-40); }
.border-bottom-alt-2-30 { border-bottom: 1px solid var(--color-alt-2-30); }
.border-bottom-alt-2-20 { border-bottom: 1px solid var(--color-alt-2-20); }
.border-bottom-alt-2-10 { border-bottom: 1px solid var(--color-alt-2-10); }
.border-left-alt-2 { border-left: 1px solid var(--color-alt-2); }
.border-left-alt-2-90 { border-left: 1px solid var(--color-alt-2-90); }
.border-left-alt-2-80 { border-left: 1px solid var(--color-alt-2-80); }
.border-left-alt-2-70 { border-left: 1px solid var(--color-alt-2-70); }
.border-left-alt-2-60 { border-left: 1px solid var(--color-alt-2-60); }
.border-left-alt-2-50 { border-left: 1px solid var(--color-alt-2-50); }
.border-left-alt-2-40 { border-left: 1px solid var(--color-alt-2-40); }
.border-left-alt-2-30 { border-left: 1px solid var(--color-alt-2-30); }
.border-left-alt-2-20 { border-left: 1px solid var(--color-alt-2-20); }
.border-left-alt-2-10 { border-left: 1px solid var(--color-alt-2-10); }
.border-right-alt-2 { border-right: 1px solid var(--color-alt-2); }
.border-right-alt-2-90 { border-right: 1px solid var(--color-alt-2-90); }
.border-right-alt-2-80 { border-right: 1px solid var(--color-alt-2-80); }
.border-right-alt-2-70 { border-right: 1px solid var(--color-alt-2-70); }
.border-right-alt-2-60 { border-right: 1px solid var(--color-alt-2-60); }
.border-right-alt-2-50 { border-right: 1px solid var(--color-alt-2-50); }
.border-right-alt-2-40 { border-right: 1px solid var(--color-alt-2-40); }
.border-right-alt-2-30 { border-right: 1px solid var(--color-alt-2-30); }
.border-right-alt-2-20 { border-right: 1px solid var(--color-alt-2-20); }
.border-right-alt-2-10 { border-right: 1px solid var(--color-alt-2-10); }
.border-top-alt-2 { border-top: 1px solid var(--color-alt-2); }
.border-top-alt-2-90 { border-top: 1px solid var(--color-alt-2-90); }
.border-top-alt-2-80 { border-top: 1px solid var(--color-alt-2-80); }
.border-top-alt-2-70 { border-top: 1px solid var(--color-alt-2-70); }
.border-top-alt-2-60 { border-top: 1px solid var(--color-alt-2-60); }
.border-top-alt-2-50 { border-top: 1px solid var(--color-alt-2-50); }
.border-top-alt-2-40 { border-top: 1px solid var(--color-alt-2-40); }
.border-top-alt-2-30 { border-top: 1px solid var(--color-alt-2-30); }
.border-top-alt-2-20 { border-top: 1px solid var(--color-alt-2-20); }
.border-top-alt-2-10 { border-top: 1px solid var(--color-alt-2-10); }
.border-alt-3 { border: 1px solid var(--color-alt-3); }
.border-alt-3-90 { border: 1px solid var(--color-alt-3-90); }
.border-alt-3-80 { border: 1px solid var(--color-alt-3-80); }
.border-alt-3-70 { border: 1px solid var(--color-alt-3-70); }
.border-alt-3-60 { border: 1px solid var(--color-alt-3-60); }
.border-alt-3-50 { border: 1px solid var(--color-alt-3-50); }
.border-alt-3-40 { border: 1px solid var(--color-alt-3-40); }
.border-alt-3-30 { border: 1px solid var(--color-alt-3-30); }
.border-alt-3-20 { border: 1px solid var(--color-alt-3-20); }
.border-alt-3-10 { border: 1px solid var(--color-alt-3-10); }
.border-bottom-alt-3 { border-bottom: 1px solid var(--color-alt-3); }
.border-bottom-alt-3-90 { border-bottom: 1px solid var(--color-alt-3-90); }
.border-bottom-alt-3-80 { border-bottom: 1px solid var(--color-alt-3-80); }
.border-bottom-alt-3-70 { border-bottom: 1px solid var(--color-alt-3-70); }
.border-bottom-alt-3-60 { border-bottom: 1px solid var(--color-alt-3-60); }
.border-bottom-alt-3-50 { border-bottom: 1px solid var(--color-alt-3-50); }
.border-bottom-alt-3-40 { border-bottom: 1px solid var(--color-alt-3-40); }
.border-bottom-alt-3-30 { border-bottom: 1px solid var(--color-alt-3-30); }
.border-bottom-alt-3-20 { border-bottom: 1px solid var(--color-alt-3-20); }
.border-bottom-alt-3-10 { border-bottom: 1px solid var(--color-alt-3-10); }
.border-left-alt-3 { border-left: 1px solid var(--color-alt-3); }
.border-left-alt-3-90 { border-left: 1px solid var(--color-alt-3-90); }
.border-left-alt-3-80 { border-left: 1px solid var(--color-alt-3-80); }
.border-left-alt-3-70 { border-left: 1px solid var(--color-alt-3-70); }
.border-left-alt-3-60 { border-left: 1px solid var(--color-alt-3-60); }
.border-left-alt-3-50 { border-left: 1px solid var(--color-alt-3-50); }
.border-left-alt-3-40 { border-left: 1px solid var(--color-alt-3-40); }
.border-left-alt-3-30 { border-left: 1px solid var(--color-alt-3-30); }
.border-left-alt-3-20 { border-left: 1px solid var(--color-alt-3-20); }
.border-left-alt-3-10 { border-left: 1px solid var(--color-alt-3-10); }
.border-right-alt-3 { border-right: 1px solid var(--color-alt-3); }
.border-right-alt-3-90 { border-right: 1px solid var(--color-alt-3-90); }
.border-right-alt-3-80 { border-right: 1px solid var(--color-alt-3-80); }
.border-right-alt-3-70 { border-right: 1px solid var(--color-alt-3-70); }
.border-right-alt-3-60 { border-right: 1px solid var(--color-alt-3-60); }
.border-right-alt-3-50 { border-right: 1px solid var(--color-alt-3-50); }
.border-right-alt-3-40 { border-right: 1px solid var(--color-alt-3-40); }
.border-right-alt-3-30 { border-right: 1px solid var(--color-alt-3-30); }
.border-right-alt-3-20 { border-right: 1px solid var(--color-alt-3-20); }
.border-right-alt-3-10 { border-right: 1px solid var(--color-alt-3-10); }
.border-top-alt-3 { border-top: 1px solid var(--color-alt-3); }
.border-top-alt-3-90 { border-top: 1px solid var(--color-alt-3-90); }
.border-top-alt-3-80 { border-top: 1px solid var(--color-alt-3-80); }
.border-top-alt-3-70 { border-top: 1px solid var(--color-alt-3-70); }
.border-top-alt-3-60 { border-top: 1px solid var(--color-alt-3-60); }
.border-top-alt-3-50 { border-top: 1px solid var(--color-alt-3-50); }
.border-top-alt-3-40 { border-top: 1px solid var(--color-alt-3-40); }
.border-top-alt-3-30 { border-top: 1px solid var(--color-alt-3-30); }
.border-top-alt-3-20 { border-top: 1px solid var(--color-alt-3-20); }
.border-top-alt-3-10 { border-top: 1px solid var(--color-alt-3-10); }
.border-alt-4 { border: 1px solid var(--color-alt-4); }
.border-alt-4-90 { border: 1px solid var(--color-alt-4-90); }
.border-alt-4-80 { border: 1px solid var(--color-alt-4-80); }
.border-alt-4-70 { border: 1px solid var(--color-alt-4-70); }
.border-alt-4-60 { border: 1px solid var(--color-alt-4-60); }
.border-alt-4-50 { border: 1px solid var(--color-alt-4-50); }
.border-alt-4-40 { border: 1px solid var(--color-alt-4-40); }
.border-alt-4-30 { border: 1px solid var(--color-alt-4-30); }
.border-alt-4-20 { border: 1px solid var(--color-alt-4-20); }
.border-alt-4-10 { border: 1px solid var(--color-alt-4-10); }
.border-bottom-alt-4 { border-bottom: 1px solid var(--color-alt-4); }
.border-bottom-alt-4-90 { border-bottom: 1px solid var(--color-alt-4-90); }
.border-bottom-alt-4-80 { border-bottom: 1px solid var(--color-alt-4-80); }
.border-bottom-alt-4-70 { border-bottom: 1px solid var(--color-alt-4-70); }
.border-bottom-alt-4-60 { border-bottom: 1px solid var(--color-alt-4-60); }
.border-bottom-alt-4-50 { border-bottom: 1px solid var(--color-alt-4-50); }
.border-bottom-alt-4-40 { border-bottom: 1px solid var(--color-alt-4-40); }
.border-bottom-alt-4-30 { border-bottom: 1px solid var(--color-alt-4-30); }
.border-bottom-alt-4-20 { border-bottom: 1px solid var(--color-alt-4-20); }
.border-bottom-alt-4-10 { border-bottom: 1px solid var(--color-alt-4-10); }
.border-left-alt-4 { border-left: 1px solid var(--color-alt-4); }
.border-left-alt-4-90 { border-left: 1px solid var(--color-alt-4-90); }
.border-left-alt-4-80 { border-left: 1px solid var(--color-alt-4-80); }
.border-left-alt-4-70 { border-left: 1px solid var(--color-alt-4-70); }
.border-left-alt-4-60 { border-left: 1px solid var(--color-alt-4-60); }
.border-left-alt-4-50 { border-left: 1px solid var(--color-alt-4-50); }
.border-left-alt-4-40 { border-left: 1px solid var(--color-alt-4-40); }
.border-left-alt-4-30 { border-left: 1px solid var(--color-alt-4-30); }
.border-left-alt-4-20 { border-left: 1px solid var(--color-alt-4-20); }
.border-left-alt-4-10 { border-left: 1px solid var(--color-alt-4-10); }
.border-right-alt-4 { border-right: 1px solid var(--color-alt-4); }
.border-right-alt-4-90 { border-right: 1px solid var(--color-alt-4-90); }
.border-right-alt-4-80 { border-right: 1px solid var(--color-alt-4-80); }
.border-right-alt-4-70 { border-right: 1px solid var(--color-alt-4-70); }
.border-right-alt-4-60 { border-right: 1px solid var(--color-alt-4-60); }
.border-right-alt-4-50 { border-right: 1px solid var(--color-alt-4-50); }
.border-right-alt-4-40 { border-right: 1px solid var(--color-alt-4-40); }
.border-right-alt-4-30 { border-right: 1px solid var(--color-alt-4-30); }
.border-right-alt-4-20 { border-right: 1px solid var(--color-alt-4-20); }
.border-right-alt-4-10 { border-right: 1px solid var(--color-alt-4-10); }
.border-top-alt-4 { border-top: 1px solid var(--color-alt-4); }
.border-top-alt-4-90 { border-top: 1px solid var(--color-alt-4-90); }
.border-top-alt-4-80 { border-top: 1px solid var(--color-alt-4-80); }
.border-top-alt-4-70 { border-top: 1px solid var(--color-alt-4-70); }
.border-top-alt-4-60 { border-top: 1px solid var(--color-alt-4-60); }
.border-top-alt-4-50 { border-top: 1px solid var(--color-alt-4-50); }
.border-top-alt-4-40 { border-top: 1px solid var(--color-alt-4-40); }
.border-top-alt-4-30 { border-top: 1px solid var(--color-alt-4-30); }
.border-top-alt-4-20 { border-top: 1px solid var(--color-alt-4-20); }
.border-top-alt-4-10 { border-top: 1px solid var(--color-alt-4-10); }

Background Colors

tokens = [
  'primary', 'secondary',
  'alt-1', 'alt-2', 'alt-3',
  'alt-4'
]


for token in tokens:
  print(f".background-color-{token} {{ background-color: var(--color-{token}); }}")
  for n in range(9,0,-1):
    num = n * 10
    print(f".background-color-{token}-{num} {{ background-color: var(--color-{token}-{num}); }}")
Output:
.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); }
-- end of line --