Root

Overview

The :root stylesheet currently contains references for breakpoints, sizes and very basic colour values but may expand further in the future. These breakpoint references are purely informative because css does not have the abilty to use variables in @media statements.

Files

https://github.com/davidbrooksio/cwf-lite/blob/master/style/bases/root.css

• Directorystyle

  • Directorybases

    • root.css

Stylesheet

:root {
  --breakpoint-xs: 320px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-rg: 1024px;
  --breakpoint-lg: 1216px;
  --breakpoint-xl: 1408px;

  /* Sizing / Spacing Scale (rem-based for font-family swap safety) */
  --size-0: 0;
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 0.75rem;
  --size-4: 1rem;
  --size-5: 1.25rem;
  --size-6: 1.5rem;
  --size-7: 2rem;
  --size-8: 2.5rem;
  --size-9: 3rem;

  /* Global Overridable Theme Tokens (Tier 1) */
  --color-red: hsl(0 72% 50%);
  --color-green: hsl(140 70% 45%);
  --color-blue: hsl(220 90% 56%);
  --color-yellow: hsl(49 100% 57%);

  --color-primary: var(--color-blue);
  --color-background: hsl(0 0% 100%);
  --color-text: hsl(215 16% 16%);
  --color-border: hsl(210 20% 90%);
  --color-neutral-hover: hsl(210 20% 96%);

  --body-background: var(--color-background);
  --html-color: var(--color-text);

  /* Shared Form Control & Button Sizing */
  --control-line-height: 1;
  --control-padding-y: var(--size-3);
  --control-height: calc(
    var(--control-line-height) * 1em + var(--control-padding-y) * 2 + 2px
  );

  color-scheme: light;
  --color-mode: "light";
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-mode: "dark";
  }
}

:root[color-scheme="dark"] {
  color-scheme: dark;

  /* Accessible Premium Dark Theme (Slate Palette) */
  --color-background: hsl(222 47% 11%);
  --color-text: hsl(210 40% 98%);
  --color-border: hsl(217 32% 17%);
  --color-neutral-hover: hsl(217 32% 15%);
}