@use '../functions/units';

$default-variables: (
  /* Shadows */
  "shadow--s": 0 units.calc-em(2) units.calc-em(14) rgba(var(--color--shadow-rgb), 0.08),
  "shadow--m": 0 units.calc-em(4) units.calc-em(21) rgba(var(--color--shadow-rgb), 0.12),
  "shadow--l": 0 units.calc-em(6) units.calc-em(28) rgba(var(--color--shadow-rgb), 0.18),
  "shadow--xl": 0 units.calc-em(8) units.calc-em(42) rgba(var(--color--shadow-rgb), 0.24),

  /* Radii */
  "radius--none": 0,
  "radius--tiny": units.calc-em(2),
  "radius--small": units.calc-em(4),
  "radius--med": units.calc-em(6),
  "radius--large": units.calc-em(8),
  "radius--extra-large": units.calc-em(12),
  "radius--huge": units.calc-em(16),
  "radius--circle": 50%,
  "radius--pill": 50em,

  /* Fonts */
  "font--stack": (-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif),
  "font--monospace": ('Input Mono', Consolas, monospace),
  "font--emoji": ('Apple Color Emoji', 'Segoe UI Emoji', 'NotoColorEmoji', 'Segoe UI Symbol', 'Android Emoji', 'EmojiSymbols'),

  /* Font sizes */
  "font-size--xxs": 0.563em,
  "font-size--xs": 0.75em,
  "font-size--s": 0.875em,
  "font-size--base": 1em,
  "font-size--l": 1.2em,
  "font-size--xl": 1.44em,
  "font-size--xxl": 1.728em,
  "font-size--xxxl": 2.074em,
  "font-size--subheadline": 5em,
  "font-size--headline": 6em,

  /* Font weights */
  "font-weight--normal": 400,
  "font-weight--semibold": 600,
  "font-weight--bold": 700,

  /* Line heights */
  "line-height--copy": 1.5,
  "line-height--solid": 1,
  "line-height--title": 1.25,
  "line-height--loose": 2,

  /* Tracking */
  "tracked--tighter": -0.0625em,
  "tracked--tight": -0.03125em,
  "tracked--loose": 0.03125em,
  "tracked--looser": 0.0625em,
  "tracked--mega": 0.25em,

  /* Transition timings */
  "timing--click": 0.1s,
  "timing--hover": 0.2s,
  "timing--fade": 0.4s,
  "timing--rotate": 0.6s,

  /* Focus indicators */
  "focus--color": var(--color--blue-500),
  "focus--width": 2px,
  "focus--offset": 0,
  "focus--style": solid,

  /* Body variables */
  "base____font-family": var(--font--stack),
  "base____font-size": .875rem,
  "base____line-height": var(--line-height--copy)
);

@mixin generate-theme-variables($theme-variables: ()) {
  $variables: map-merge($default-variables, $theme-variables);

  @each $name, $value in $variables {
    --#{$name}: #{$value};
  }
}