Sircus

Install

npm install sircus-variables

CSS import

@import "sircus-variables";

CSS

:root {
  --gray-90: color(#000 lightness(10%));
  --gray-80: color(#000 lightness(20%));
  --gray-70: color(#000 lightness(30%));
  --gray-60: color(#000 lightness(40%));
  --gray-50: color(#000 lightness(50%));
  --gray-40: color(#000 lightness(60%));
  --gray-30: color(#000 lightness(70%));
  --gray-20: color(#000 lightness(80%));
  --gray-10: color(#000 lightness(90%));
  --gray-5: color(#000 lightness(95%));

  --primary: #1069c2;
  --primary-dark: color(var(--primary) lightness(30%));
  --primary-light: color(var(--primary) lightness(90%));

  --secondary: #df3c94;
  --secondary-dark: color(var(--secondary) lightness(30%));
  --secondary-light: color(var(--secondary) lightness(90%));

  --success: #00cc99;
  --success-dark: color(var(--success) lightness(30%));
  --success-light: color(var(--success) lightness(90%));

  --notice: #66ccff;
  --notice-dark: color(var(--notice) lightness(40%));
  --notice-light: color(var(--notice) lightness(90%));

  --warning: #ffcc00;
  --warning-dark: color(var(--warning) lightness(40%));
  --warning-light: color(var(--warning) lightness(90%));

  --error: #ef4c43;
  --error-dark: color(var(--error) lightness(40%));
  --error-light: color(var(--error) lightness(90%));

  --space-gt: 5rem;
  --space-hg: 4rem;
  --space-xl: 3rem;
  --space-lg: 2rem;
  --space-md: 1.5rem;
  --space-sm: 1rem;
  --space-xs: .75rem;
  --space-tn: .5rem;
  --space-mi: .25rem;
  --space: var(--space-md);

  --borderRadius-xl: 8px;
  --borderRadius-lg: 6px;
  --borderRadius-md: 4px;
  --borderRadius-sm: 3px;
  --borderRadius-xs: 2px;
  --borderRadius: var(--borderRadius-md);

  --shadow-color: color(#000 a(30%));
  --shadow-xs: 0 1px 4px 1px;
  --shadow-sm: 0 6px 10px 0;
  --shadow-md: 0 13px 25px 0;
  --shadow-lg: 0 20px 40px 0;
  --shadow-xl: 0 27px 55px 0;
  --shadow: var(--shadow-md);

  --lineHeight-xl: 2;
  --lineHeight-lg: 1.8;
  --lineHeight-md: 1.5;
  --lineHeight-sm: 1.2;
  --lineHeight-xs: 1.1;
  --lineHeight: var(--lineHeight-md);

  --letterSpacing-xl: .3em;
  --letterSpacing-lg: .15em;
  --letterSpacing-md: 0;
  --letterSpacing-sm: calc(0 - .04em);
  --letterSpacing-xs: calc(0 - .08em);
  --letterSpacing: var(--letterSpacing-md);

  --gutter: calc(var(--space) / 2);

  --fontFamily-sansEn: -apple-system, 'BlinkMacSystemFont', "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
  --fontFamily-sansJa: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --fontFamily-serifEn: Georgia, serif;
  --fontFamily-serifJa: "Hiragino Mincho ProN", "Yu Mincho", serif;
  --fontFamily-monospace: Roboto Mono, "Source Code Pro", Menlo, Consolas, monospace;
  --fontFamily: var(--fontFamily-sansEn);

  --fontSize-gt: 3rem;
  --fontSize-hg: 2rem;
  --fontSize-xl: 1.5rem;
  --fontSize-lg: 1.25rem;
  --fontSize-md: 1rem;
  --fontSize-sm: .875rem;
  --fontSize-xs: .75rem;
  --fontSize-tn: .6875rem;
  --fontSize-mi: .625rem;
  --fontSize: var(--fontSize-md);

  --fontWeight-normal: 400;
  --fontWeight-bold: 700;
  --fontWeight-lighter: 200;

  --borderColor: var(--gray-30);
  --borderStyle: solid;
  --borderSize : 1px;
  --border: var(--borderSize) var(--borderStyle) var(--borderColor);

  --controls-color: var(--gray-40);
  --controls-focus-color: #b9d7e6;
  --controls-borderSize: .0625rem;
  --controls-borderRadius: var(--borderRadius-md);
  --controls-height-sm: calc(1.5rem - var(--controls-borderSize));
  --controls-height-md: calc(2.25rem - var(--controls-borderSize));
  --controls-height-lg: calc(3rem - var(--controls-borderSize));
  --controls-height-xl: calc(3.75rem - var(--controls-borderSize));
  --controls-height: var(--controls-height-md);
  --controls-spaceV-xl: .75rem;
  --controls-spaceH-xl: 3rem;
  --controls-spaceV-lg: .5rem;
  --controls-spaceH-lg: 2rem;
  --controls-spaceV: .25rem;
  --controls-spaceH: 1rem;
  --controls-spaceV-sm: .125rem;
  --controls-spaceH-sm: .5rem;
}

@custom-media --viewport-sm (min-width: 40em);
@custom-media --viewport-md (min-width: 64em);
@custom-media --viewport-lg (min-width: 75em);