Home

Quick Scripts To Make Some CSS

April 2025

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