@brady_h/styles 1.0.2 → 1.0.4

package/src/_variables.scss

@@ -8,20 +8,404 @@ $spacing: (
   6: 32px,
   7: 48px,
   8: 64px,
+  9: 80px,
+  10: 96px,
+  11: 128px,
+  12: 160px,
+  13: 192px,
+  14: 224px,
+  15: 256px,
+);
+
+$sizing: (
+  0: 0,
+  1: 4px,
+  2: 8px,
+  3: 12px,
+  4: 16px,
+  5: 24px,
+  6: 32px,
+  7: 48px,
+  8: 64px,
+  9: 80px,
+  10: 96px,
+  11: 128px,
+  auto: auto,
+  full: 100%,
+  screen: 100vw,
+  min: min-content,
+  max: max-content,
+  fit: fit-content,
 );
 
 $border-radius: (
+  none: 0,
+  xs: 2px,
   sm: 4px,
   md: 8px,
   lg: 12px,
   xl: 16px,
+  2xl: 24px,
+  3xl: 32px,
   full: 9999px,
 );
 
+$border-width: (
+  none: 0,
+  thin: 1px,
+  medium: 2px,
+  thick: 3px,
+  heavy: 4px,
+);
+
+$border-style: (
+  solid: solid,
+  dashed: dashed,
+  dotted: dotted,
+  double: double,
+  none: none,
+);
+
 $z-index: (
+  behind: -1,
+  base: 1,
   dropdown: 100,
   sticky: 200,
   overlay: 300,
   modal: 400,
-  tooltip: 500,
+  popover: 500,
+  tooltip: 600,
+  notification: 700,
+  maximum: 9999,
+);
+
+$font-size: (
+  xs: 12px,
+  sm: 14px,
+  md: 16px,
+  lg: 18px,
+  xl: 20px,
+  2xl: 24px,
+  3xl: 30px,
+  4xl: 36px,
+  5xl: 48px,
+  6xl: 60px,
+  7xl: 72px,
+  8xl: 96px,
+  9xl: 128px,
+);
+
+$font-weight: (
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900,
+);
+
+$line-height: (
+  none: 1,
+  tight: 1.2,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 1.75,
+  extra-loose: 2,
+);
+
+$letter-spacing: (
+  tighter: -0.05em,
+  tight: -0.025em,
+  normal: 0,
+  wide: 0.025em,
+  wider: 0.05em,
+  widest: 0.1em,
+);
+
+$text-measure: (
+  xs: 20ch,
+  sm: 30ch,
+  md: 45ch,
+  lg: 60ch,
+  xl: 75ch,
+  full: 100%,
+);
+
+$container-width: (
+  xs: 480px,
+  sm: 640px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1200px,
+  2xl: 1400px,
+  3xl: 1600px,
+  full: 100%,
+);
+
+$content-width: (
+  narrow: 640px,
+  normal: 768px,
+  wide: 1024px,
+  extra-wide: 1200px,
+  full: 100%,
+);
+
+$aspect-ratio: (
+  square: 1 / 1,
+  portrait: 3 / 4,
+  landscape: 4 / 3,
+  widescreen: 16 / 9,
+  ultrawide: 21 / 9,
+  golden: 1.618 / 1,
+);
+
+$opacity: (
+  0: 0,
+  5: 0.05,
+  10: 0.1,
+  15: 0.15,
+  20: 0.2,
+  25: 0.25,
+  30: 0.3,
+  40: 0.4,
+  50: 0.5,
+  60: 0.6,
+  70: 0.7,
+  75: 0.75,
+  80: 0.8,
+  90: 0.9,
+  95: 0.95,
+  100: 1,
+);
+
+$box-shadow: (
+  none: none,
+  xs: 0 1px 2px rgba(0, 0, 0, 0.05),
+  sm: 0 1px 3px rgba(0, 0, 0, 0.1),
+  md: 0 4px 6px rgba(0, 0, 0, 0.1),
+  lg: 0 10px 15px rgba(0, 0, 0, 0.1),
+  xl: 0 20px 25px rgba(0, 0, 0, 0.1),
+  2xl: 0 25px 50px rgba(0, 0, 0, 0.15),
+  inner: inset 0 2px 4px rgba(0, 0, 0, 0.06),
+);
+
+$outline-width: (
+  none: 0,
+  thin: 1px,
+  medium: 2px,
+  thick: 3px,
+);
+
+$outline-offset: (
+  none: 0,
+  sm: 2px,
+  md: 4px,
+  lg: 6px,
+);
+
+$transition-duration: (
+  instant: 0ms,
+  fast: 150ms,
+  normal: 250ms,
+  slow: 350ms,
+  slower: 500ms,
+  slowest: 750ms,
+);
+
+$transition-timing: (
+  default: ease,
+  linear: linear,
+  smooth: ease-in-out,
+  ease-in: ease-in,
+  ease-out: ease-out,
+  sharp: cubic-bezier(0.4, 0, 0.2, 1),
+  bounce: cubic-bezier(0.34, 1.56, 0.64, 1),
+);
+
+$transition-property: (
+  all: all,
+  colors: (
+    color,
+    background-color,
+    border-color,
+    fill,
+    stroke,
+  ),
+  opacity: opacity,
+  transform: transform,
+  shadow: box-shadow,
+  dimensions: (
+    width,
+    height,
+  ),
+);
+
+$motion-distance: (
+  xs: 2px,
+  sm: 4px,
+  md: 8px,
+  lg: 16px,
+  xl: 24px,
+  2xl: 32px,
+);
+
+$animation-iteration: (
+  once: 1,
+  twice: 2,
+  three-times: 3,
+  infinite: infinite,
+);
+
+$cursor: (
+  auto: auto,
+  default: default,
+  pointer: pointer,
+  wait: wait,
+  text: text,
+  move: move,
+  not-allowed: not-allowed,
+  grab: grab,
+  grabbing: grabbing,
+  crosshair: crosshair,
+);
+
+$overflow: (
+  visible: visible,
+  hidden: hidden,
+  clip: clip,
+  scroll: scroll,
+  auto: auto,
+);
+
+$position: (
+  static: static,
+  relative: relative,
+  absolute: absolute,
+  fixed: fixed,
+  sticky: sticky,
+);
+
+$display: (
+  none: none,
+  block: block,
+  inline: inline,
+  inline-block: inline-block,
+  flex: flex,
+  inline-flex: inline-flex,
+  grid: grid,
+  inline-grid: inline-grid,
+  contents: contents,
+);
+
+$flex-direction: (
+  row: row,
+  row-reverse: row-reverse,
+  column: column,
+  column-reverse: column-reverse,
+);
+
+$flex-wrap: (
+  nowrap: nowrap,
+  wrap: wrap,
+  wrap-reverse: wrap-reverse,
+);
+
+$grid-columns: (
+  1: repeat(1, minmax(0, 1fr)),
+  2: repeat(2, minmax(0, 1fr)),
+  3: repeat(3, minmax(0, 1fr)),
+  4: repeat(4, minmax(0, 1fr)),
+  5: repeat(5, minmax(0, 1fr)),
+  6: repeat(6, minmax(0, 1fr)),
+  12: repeat(12, minmax(0, 1fr)),
+);
+
+$grid-gap: (
+  none: 0,
+  xs: 4px,
+  sm: 8px,
+  md: 16px,
+  lg: 24px,
+  xl: 32px,
+  2xl: 48px,
+);
+
+$object-fit: (
+  fill: fill,
+  contain: contain,
+  cover: cover,
+  none: none,
+  scale-down: scale-down,
+);
+
+$object-position: (
+  center: center,
+  top: top,
+  bottom: bottom,
+  left: left,
+  right: right,
+  top-left: top left,
+  top-right: top right,
+  bottom-left: bottom left,
+  bottom-right: bottom right,
+);
+
+$pointer-events: (
+  auto: auto,
+  none: none,
+);
+
+$user-select: (
+  none: none,
+  text: text,
+  all: all,
+  auto: auto,
+);
+
+$white-space: (
+  normal: normal,
+  nowrap: nowrap,
+  pre: pre,
+  pre-wrap: pre-wrap,
+  pre-line: pre-line,
+  break-spaces: break-spaces,
+);
+
+$text-transform: (
+  none: none,
+  uppercase: uppercase,
+  lowercase: lowercase,
+  capitalize: capitalize,
+);
+
+$text-align: (
+  left: left,
+  center: center,
+  right: right,
+  justify: justify,
+  start: start,
+  end: end,
+);
+
+$vertical-align: (
+  baseline: baseline,
+  top: top,
+  middle: middle,
+  bottom: bottom,
+  text-top: text-top,
+  text-bottom: text-bottom,
+  sub: sub,
+  super: super,
+);
+
+$object-fit: (
+  fill: fill,
+  contain: contain,
+  cover: cover,
+  none: none,
+  scale-down: scale-down,
 );