CSS color variable name conventions

As I was redesiging my CSS color variable names, I wanted to share my old system, what it was based on, and what the new variable names are.

My old system

My old variable names were somewhat cryptic, especially the background colors.

  /* Surfaces (light) — sepia palette */
  --color-crust: ;
  --color-mantle: ;
  --color-surface: ;

  /* Text (light) */
  --color-text-primary: ;
  --color-text-secondary: ;
  --color-text-tertiary: ;

  /* Accent */
  --color-accent: ;
  --color-accent-alt: ;
  --color-accent-alt-transparent: ;
  --color-accent-burgundy: ;
  

They were inspired by the color names from the catppuccin color themes.

For examples:

Catppuccin

A CSS-adjacent notation, from the waybar theme repo:

  @define-color text #cdd6f4;
  @define-color subtext1 #bac2de;
  @define-color subtext0 #a6adc8;
  @define-color overlay2 #9399b2;
  @define-color overlay1 #7f849c;
  @define-color overlay0 #6c7086;
  @define-color surface2 #585b70;
  @define-color surface1 #45475a;
  @define-color surface0 #313244;
  @define-color base #1e1e2e;
  @define-color mantle #181825;
  @define-color crust #11111b;
  

My new system

Inspired by TobiasBergcss-theme-generator output:

  --bg-primary: oklch(0.950 0.016 66.2);
  --bg-secondary: oklch(0.863 0.047 66.2);
  --bg-tertiary: oklch(0.777 0.081 66.2);
  --bg-active: ;
  --text-primary: oklch(0.256 0.027 66.2);
  --text-secondary: oklch(0.343 0.036 66.2);
  --text-tertiary: oklch(0.430 0.045 66.2);
  --border-primary: ;
  --border-secondary: ;
  --success: #5cd69d;
  --error: #f25a5a;
  --warning: #fbca51;
  --accent-primary: #d98026;
  --accent-secondary: oklch(0.233 0.058 251.8);
  --accent-foreground: #7a2f2f;
  --accent-muted: rgba(38, 128, 217, 0.35);

I now need to further define what each colors are used for. for example, shoud the --bg-secondary be darker or lighter then the --bg-primary ?

So far, I have just translated directly from old to new names.

I also changed the color themes for syntax highlighting to gruvbox-light-soft and gruvbox-dark-soft. They work pretty well with the colors from my website.