Color-scheme

Source file

src/css/color-scheme.css

View on GitHub

https://github.com/pmbrown/ming-css/blob/main/src/css/color-scheme.css

Included with:

• ming.css
• ming.min.css
• ming.mono.css
• ming.mono.min.css
• ming.restart.css
• ming.restart.min.css

Colors (anchor)

The text, links and background color values are used in the typography, the surface colors are used for borders, backgrounds and other color properties in the styles.

:where(html) {
  --text: light-dark(#000, #fff);
  --background: light-dark(#eaecee, #1f2428);
  --link: light-dark(#1c3db5, #9fbfdf);
  --link-visited: light-dark(#4f6fe3, #b3cce6);
  --link-hover: light-dark(#385de0, #c6d8ec);
  --surf-1: color-mix(in srgb, CanvasText 5%, var(--background));
  --surf-2: color-mix(in srgb, CanvasText 10%, var(--background));
  --surf-3: color-mix(in srgb, CanvasText 20%, var(--background));
}

Surface colors (anchor)

The surfaces colors are designed as accents for the current page background color:

They're used as fallback values so unique elements can still be customized with higher specificity tokens:

// Button color values
var(--btn-bg, var(--surf-1))
var(--btn-hover, var(--surf-2))
var(--btn-bd-color, var(--surf-3))
var(--btn-outline-color, var(--surf-3))

Default values for other style properties like font sizes and weights, style margins and padding, border width and radius are also designed using fallbacks so have the same flexibility for customizing.