WIP design tokens

variables.scss

:root {
  // ///////////////////////////////////////////////////////
  // Color Palettes
  // ///////////////////////////////////////////////////////
  //
  // Lighten/darken using perceptual lightness
  //
  // Lighten
  // color: color-mix(in oklch, var(--orange-600) 95%, white 5%);

  // Darken
  // color: color-mix(in oklch, var(--orange-600) 95%, black 5%);
  //
  //
  // Grayscale
  --white: oklch(1 0 0); // #ffffff
  --gray-50: oklch(0.96 0.002 260); // #f0f0f0
  --gray-100: oklch(0.98 0.001 260); // #fbfbfb
  --gray-200: oklch(0.93 0.003 260); // #e9e9e9
  --gray-300: oklch(0.79 0.003 260); // #bebebe
  --gray-400: oklch(0.69 0.003 260); // #999999
  --gray-500: oklch(0.53 0.003 260); // #666666
  --gray-600: oklch(0.47 0.004 260); // #555353
  --gray-700: oklch(0.4 0.004 260); // #444444
  --gray-800: oklch(0.35 0.003 260); // #333333
  --gray-900: oklch(0.28 0.003 260); // #222222
  --gray-950: oklch(0.19 0.002 260); // #111111
  --black: oklch(0 0 0); // #000000

  // Yellow Scale
  --yellow-100: oklch(0.93 0.07 93); // #faebb4
  --yellow-200: oklch(0.9 0.08 92); // #f8df96
  --yellow-300: oklch(0.88 0.1 90); // #f9db82
  --yellow-400: oklch(0.87 0.1 88); // #fad66d
  --yellow-500: oklch(0.85 0.12 85); // #fbd259
  --yellow-600: oklch(0.84 0.14 86); // #fcce44
  --yellow-700: oklch(0.83 0.15 85); // #fdc930
  --yellow-800: oklch(0.82 0.16 83); // #fec51b
  --yellow-900: oklch(0.8 0.13 82); // #ffc107
  --yellow-950: oklch(0.79 0.15 70); // #ffa500

  // Orange scale
  --orange-100: oklch(0.89 0.06 40); // #ffcebd
  --orange-200: oklch(0.83 0.08 40); // #f5b6a0
  --orange-300: oklch(0.77 0.1 40); // #eb9e84
  --orange-400: oklch(0.71 0.12 40); // #e18667
  --orange-500: oklch(0.65 0.15 40); // #d96a42
  --orange-600: oklch(0.64 0.19 40); // #e65719
  --orange-650: oklch(0.54 0.15 40); // #b4481e
  --orange-700: oklch(0.48 0.15 40); // #9f3501
  --orange-800: oklch(0.45 0.15 40); // #952c00
  --orange-900: oklch(0.43 0.15 40); // #8f2500

  // Colors
  // A nicer color palette for the web.
  // https://clrs.cc
  --clrs-navy: oklch(0.22 0.04 255); // #001f3f
  --clrs-blue: oklch(0.52 0.17 255); // #0074d9
  --clrs-aqua: oklch(0.81 0.12 230); // #7fdbff
  --clrs-teal: oklch(0.65 0.12 200); // #39cccc
  --clrs-olive: oklch(0.52 0.1 150); // #3d9970
  --clrs-green: oklch(0.7 0.13 145); // #2ecc40
  --clrs-lime: oklch(0.87 0.15 140); // #01ff70
  --clrs-yellow: oklch(0.9 0.14 95); // #ffdc00
  --clrs-orange: oklch(0.75 0.14 55); // #ff851b
  --clrs-red: oklch(0.64 0.23 28); // #ff4136
  --clrs-fuchsia: oklch(0.72 0.27 330); // #f012be
  --clrs-purple: oklch(0.53 0.25 315); // #b10dc9
  --clrs-maroon: oklch(0.34 0.12 10); // #85144b
  --clrs-white: oklch(1 0 0); // #ffffff
  --clrs-silver: oklch(0.86 0.01 260); // #dddddd
  --clrs-gray: oklch(0.7 0.01 260); // #aaaaaa
  --clrs-black: oklch(0.19 0.002 260); // #111111

  // ///////////////////////////////////////////////////////
  // Custom Colors
  // ///////////////////////////////////////////////////////
  --color-brand: var(--orange-650);
  --color-links: var(--orange-700);
  --color-brand-dark: var(--orange-600);
  --color-selection: var(--yellow-400);
  --color-selection-dark: var(--yellow-100);
  --color-warning: var(--yellow-500);
  --color-alert: var(--clrs-red);
  --color-body-text: var(--gray-800);
  --color-body-text-dark: var(--gray-300);
  --color-body-bg: var(--gray-100);
  --color-body-bg-dark: var(--gray-950);
  --color-focus-visible: var(--yellow-950);
  --color-skip-links-text: var(--white);
  --color-skip-links-bg: var(--clrs-blue);

  // ///////////////////////////////////////////////////////
  // Spacing
  // ///////////////////////////////////////////////////////
  // Grid System
  --grid-gap-s: 2.1rem;
  --grid-gap: 4.2rem;
  --grid-max-width: 129.5rem;
  // Foundation Elements
  --wrapper-max-width: 138rem;
  --width-tiny-max-width: 60rem;
  --width-mid-max-width: 100rem;
  --width-narrow-max-width: 85rem;
  // Carousel
  --carousel-max-width-base: 90rem;
  --carousel-max-width-l: 110rem;
  // Margins and Paddings
  --space-5: 0.5rem;
  --space-10: 0.1rem;
  --space-15: 0.15rem;
  --space-20: 0.2rem;
  --space-25: 0.25rem;
  --space-30: 0.3rem;
  --space-35: 0.35rem;
  --space-40: 0.4rem;
  --space-45: 0.45rem;
  --space-50: 0.5rem;
  --space-75: 0.75rem;
  --space-100: 1rem;
  --space-125: 1.25rem;
  --space-150: 1.5rem;
  --space-175: 1.75rem;
  --space-200: 2rem;
  --space-210: 2.1rem;
  --space-250: 2.5rem;
  --space-300: 3rem;
  --space-400: 4em;
  --space-450: 4.5rem;
  --space-500: 5rem;
  --space-600: 6rem;
  --space-700: 7rem;
  --space-750: 7.5rem;
  --space-800: 7rem;
  --space-900: 9rem;
  --space-1000: 10rem;
  --space-1100: 11rem;
  --space-1200: 12rem;

  // ///////////////////////////////////////////////////////
  // Borders
  // ///////////////////////////////////////////////////////
  --border-size-body-top-border: 1.5rem;

  // ///////////////////////////////////////////////////////
  // Border radius
  // ///////////////////////////////////////////////////////
  --border-radius-s: 0.3rem;
  --border-radius-base: 0.6rem;
  --border-radius-search: 3rem;
  --border-radius-rounded: 50%;
  --border-radius-max: 9999px;
  --border-radius-range-slider-thumb: 1.5rem;
  --border-radius-range-slider-thumb-l: 2.1rem;

  // ///////////////////////////////////////////////////////
  // Text Decoration
  // ///////////////////////////////////////////////////////
  --text-deco-offset-base: 0.4rem;
  --text-deco-offset-l: 0.6rem;
  --text-deco-thickness-s: 0.05rem;
  --text-deco-thickness-base: 0.15rem;

  // ///////////////////////////////////////////////////////
  // Texts
  // ///////////////////////////////////////////////////////
  //
  // Font Families
  --font-sans-serif:
    Cabin, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --font-monospace:
    'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif:
    Georgia, Times, 'Times New Roman', serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --font-h1:
    Catamaran, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  // Fluid Typography
  --body-font-size-flex: calc(1.7rem + 3 * ((100vw - 320px) / 680));
  --body-font-size-flex-max: 2rem;
  // Line Height
  --line-height-base: 1.5;
  // Font Weight
  --font-weight-h1: 800;
  // Font Size in %
  --font-size-root-rem: 62.5%;
  --font-size-xxs: 80%;
  --font-size-xs: 85%;
  --font-size-s: 90%;
  --font-size-base: 100%;
  --font-size-l: 110%;
  --font-size-xl: 120%;
  --font-size-xxl: 125%;
  --font-size-xxxl: 130%;
  --font-size-xxxxl: 135%;
  // Custom Font Sizes
  --font-size-monospace: 1.5rem;
  // General Headings
  --font-size-h1: 3.75rem;
  --font-size-h1-l: 4.25rem;
  --font-size-h2: 3rem;
  --font-size-h2-l: 3.5rem;
  --font-size-h3: 2.6rem;
  --font-size-h3-l: 3rem;
  --font-size-h4-h5-h6: 2rem;

  // Custom Headings
  --font-size-title-second: 3rem;
  --font-size-title-second-l: 3.5rem;
  --font-size-title-third: 2.6rem;
  // Responsive Headlines
  --font-size-headline-s: clamp(3.5rem, 6vw, 5rem);
  --font-size-headline: clamp(3.5rem, 6vw, 6rem);
  --font-size-headline-home: clamp(3.75rem, 6.5vw, 7rem);
  --font-size-display: clamp(3rem, 6vw, 3.5rem);
  // Characters lenght control
  --text-max-lenght-card-work-display: 40ch;
  --text-max-lenght-xs: 50ch;
  --text-max-lenght-s: 53ch;
  --text-max-lenght-base: 55ch;
  --text-max-lenght-l: 60ch;
  //
  --mark-bg: var(--yellow-800);
  --mark-bg-dark: var(--yellow-600);
  --ins-bg: var(--yellow-400);
  --ins-bg-dark: var(--yellow-200);

  // ///////////////////////////////////////////////////////
  // Transitions & Animations
  // ///////////////////////////////////////////////////////
  --trans-duration-slow: 0.25s;
  --trans-duration-base: 0.2s;
  --trans-style: ease-out;

  // ///////////////////////////////////////////////////////
  // Misc
  // ///////////////////////////////////////////////////////
  --debug-out-width-base: 0.1rem;
  --debug-out-width-base-l: 0.2rem;
  --debug-out-pink: oklch(0.7283 0.1971 351.99); // hotpink
  --debug-out-yellow: oklch(0.8868 0.182 95.3305); // intense yellow
}