@brady_h/styles 1.0.2 → 1.0.3

package/src/_functions.scss

@@ -1,5 +1,212 @@
+@use "sass:color";
 @use "sass:math";
+@use "sass:map";
+@use "sass:meta";
+@use "./variables" as vars;
+@use "./breakpoints" as bp;
+
+@function map-value($collection, $key, $fallback: null) {
+  @if not map.has-key($collection, $key) {
+    @if $fallback != null {
+      @return $fallback;
+    }
+
+    @error "Key '#{$key}' does not exist in the supplied map.";
+  }
+
+  @return map.get($collection, $key);
+}
+
+@function spacing($key) {
+  @return map-value(vars.$spacing, $key);
+}
+
+@function radius($key) {
+  @return map-value(vars.$border-radius, $key);
+}
+
+@function font-size($key) {
+  @return map-value(vars.$font-size, $key);
+}
+
+@function font-weight($key) {
+  @return map-value(vars.$font-weight, $key);
+}
+
+@function line-height($key) {
+  @return map-value(vars.$line-height, $key);
+}
+
+@function shadow($key) {
+  @return map-value(vars.$box-shadow, $key);
+}
+
+@function z-index($key) {
+  @return map-value(vars.$z-index, $key);
+}
 
 @function to-rem($value, $base: 16px) {
+  @if math.is-unitless($value) {
+    $value: $value * 1px;
+  }
+
   @return math.div($value, $base) * 1rem;
 }
+
+@function to-em($value, $base: 16px) {
+  @if math.is-unitless($value) {
+    $value: $value * 1px;
+  }
+
+  @return math.div($value, $base) * 1em;
+}
+
+@function to-px($value, $base: 16px) {
+  @if math.is-unitless($value) {
+    @return $value * 1px;
+  }
+
+  @return math.div($value, 1rem) * $base;
+}
+
+@function strip-unit($value) {
+  @if math.is-unitless($value) {
+    @return $value;
+  }
+
+  @return math.div($value, $value * 0 + 1);
+}
+
+@function clamp-value($value, $min, $max) {
+  @return clamp($min, $value, $max);
+}
+
+@function fluid-size($min, $max, $min-viewport: 320px, $max-viewport: 1440px) {
+  $slope: math.div($max - $min, $max-viewport - $min-viewport) * 100;
+  $intercept: $min - math.div($slope * $min-viewport, 100);
+
+  @return clamp($min, calc(#{$intercept} + #{$slope}vw), $max);
+}
+
+@function breakpoint($key) {
+  @return bp.breakpoint($key);
+}
+
+@function color-opacity($value, $opacity) {
+  @return color.change($value, $alpha: $opacity);
+}
+
+@function lighten-color($value, $amount: 10%) {
+  @return color.adjust($value, $lightness: $amount);
+}
+
+@function darken-color($value, $amount: 10%) {
+  @return color.adjust($value, $lightness: -$amount);
+}
+
+@function saturate-color($value, $amount: 10%) {
+  @return color.adjust($value, $saturation: $amount);
+}
+
+@function desaturate-color($value, $amount: 10%) {
+  @return color.adjust($value, $saturation: -$amount);
+}
+
+@function grayscale($value) {
+  @return color.grayscale($value);
+}
+
+@function invert-color($value) {
+  @return color.invert($value);
+}
+
+@function mix-colors($first, $second, $weight: 50%) {
+  @return color.mix($first, $second, $weight: $weight);
+}
+
+@function color-contrast($value, $light: #fff, $dark: #000) {
+  @return color.contrast($value, $light, $dark);
+}
+
+@function is-light($value) {
+  @return color.channel($value, "lightness", $space: hsl) > 50%;
+}
+
+@function is-dark($value) {
+  @return not is-light($value);
+}
+
+@function percentage-of($value, $total) {
+  @return math.percentage(math.div($value, $total));
+}
+
+@function ratio($value, $total) {
+  @return math.div($value, $total);
+}
+
+@function px-to-percent($value, $container) {
+  @return math.percentage(math.div($value, $container));
+}
+
+@function px-to-vw($value, $viewport: 1440px) {
+  @return math.div($value, $viewport) * 100vw;
+}
+
+@function px-to-vh($value, $viewport: 900px) {
+  @return math.div($value, $viewport) * 100vh;
+}
+
+@function negative($value) {
+  @return -$value;
+}
+
+@function half($value) {
+  @return math.div($value, 2);
+}
+
+@function double($value) {
+  @return $value * 2;
+}
+
+@function triple($value) {
+  @return $value * 3;
+}
+
+@function power($value, $exponent) {
+  $result: 1;
+
+  @if $exponent < 0 {
+    @return math.div(1, power($value, -$exponent));
+  }
+
+  @for $i from 1 through $exponent {
+    $result: $result * $value;
+  }
+
+  @return $result;
+}
+
+@function fluid-spacing(
+  $min,
+  $max,
+  $min-viewport: 320px,
+  $max-viewport: 1440px
+) {
+  @return fluid-size($min, $max, $min-viewport, $max-viewport);
+}
+
+@function aspect-ratio-height($width, $ratio-width: 16, $ratio-height: 9) {
+  @return math.div($width * $ratio-height, $ratio-width);
+}
+
+@function aspect-ratio-width($height, $ratio-width: 16, $ratio-height: 9) {
+  @return math.div($height * $ratio-width, $ratio-height);
+}
+
+@function alpha($value, $opacity) {
+  @return color-opacity($value, $opacity);
+}
+
+@function map-contains($collection, $key) {
+  @return map.has-key($collection, $key);
+}

package/src/_mixins.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "./breakpoints" as bp;
 
 @mixin respond-down($breakpoint: md) {
@@ -12,6 +13,12 @@
   }
 }
 
+@mixin respond-between($min, $max) {
+  @media (min-width: bp.breakpoint($min)) and (max-width: bp.breakpoint($max)) {
+    @content;
+  }
+}
+
 @mixin touch-query($breakpoint: md) {
   @media (max-width: bp.breakpoint($breakpoint)) and (pointer: coarse) and (hover: none) {
     @content;
@@ -38,6 +45,32 @@
   }
 }
 
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+@mixin dark-mode {
+  @media (prefers-color-scheme: dark) {
+    @content;
+  }
+}
+
+@mixin light-mode {
+  @media (prefers-color-scheme: light) {
+    @content;
+  }
+}
+
+@mixin hover-supported {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @content;
+    }
+  }
+}
+
 @mixin flex-center {
   display: flex;
   align-items: center;
@@ -50,12 +83,186 @@
   justify-content: space-between;
 }
 
+@mixin flex-start {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+@mixin flex-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin flex-column-center {
+  @include flex-center;
+  flex-direction: column;
+}
+
+@mixin flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@mixin flex-inline-center {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-gap($gap: 16px) {
+  display: flex;
+  gap: $gap;
+}
+
+@mixin grid-center {
+  display: grid;
+  place-items: center;
+}
+
+@mixin grid-columns($columns: 2, $gap: 16px) {
+  display: grid;
+  grid-template-columns: repeat($columns, minmax(0, 1fr));
+  gap: $gap;
+}
+
+@mixin grid-auto-fit($min-width: 250px, $gap: 16px) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, $min-width), 1fr));
+  gap: $gap;
+}
+
+@mixin grid-auto-fill($min-width: 250px, $gap: 16px) {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, $min-width), 1fr));
+  gap: $gap;
+}
+
+@mixin grid-areas($areas, $columns: 1fr, $rows: auto, $gap: 16px) {
+  display: grid;
+  grid-template-areas: $areas;
+  grid-template-columns: $columns;
+  grid-template-rows: $rows;
+  gap: $gap;
+}
+
+@mixin center-block {
+  display: block;
+  margin-inline: auto;
+}
+
+@mixin container($max-width: 1200px, $padding: 16px) {
+  width: 100%;
+  max-width: $max-width;
+  margin-inline: auto;
+  padding-inline: $padding;
+}
+
+@mixin absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin absolute-fill {
+  position: absolute;
+  inset: 0;
+}
+
+@mixin fixed-fill {
+  position: fixed;
+  inset: 0;
+}
+
+@mixin sticky-top($top: 0) {
+  position: sticky;
+  top: $top;
+}
+
+@mixin aspect-ratio($width: 16, $height: 9) {
+  aspect-ratio: #{$width} / #{$height};
+}
+
+@mixin circle($size) {
+  width: $size;
+  height: $size;
+  flex: 0 0 $size;
+  border-radius: 50%;
+}
+
+@mixin square($size) {
+  width: $size;
+  height: $size;
+}
+
 @mixin text-truncate {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
+@mixin text-truncate-lines($lines: 2) {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+  line-clamp: $lines;
+}
+
+@mixin text-balance {
+  text-wrap: balance;
+}
+
+@mixin text-pretty {
+  text-wrap: pretty;
+}
+
+@mixin heading-reset {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+@mixin paragraph-reset {
+  margin: 0;
+}
+
+@mixin list-reset {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+@mixin button-reset {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+@mixin link-reset {
+  color: inherit;
+  text-decoration: none;
+}
+
+@mixin appearance-reset {
+  appearance: none;
+  border: 0;
+  background: none;
+  font: inherit;
+}
+
 @mixin visually-hidden {
   position: absolute;
   width: 1px;
@@ -68,9 +275,198 @@
   border: 0;
 }
 
-@mixin focus-ring($color: currentColor) {
+@mixin focus-ring($color: currentColor, $width: 2px, $offset: 3px) {
   &:focus-visible {
-    outline: 2px solid $color;
-    outline-offset: 3px;
+    outline: $width solid $color;
+    outline-offset: $offset;
+  }
+}
+
+@mixin focus-within-ring($color: currentColor, $width: 2px, $offset: 3px) {
+  &:focus-within {
+    outline: $width solid $color;
+    outline-offset: $offset;
+  }
+}
+
+@mixin no-focus-outline {
+  &:focus {
+    outline: none;
+  }
+}
+
+@mixin hover-lift($distance: 3px) {
+  transition: transform 200ms ease;
+
+  @include hover-supported {
+    transform: translateY(-$distance);
+  }
+
+  @include reduced-motion {
+    transition: none;
+  }
+}
+
+@mixin hover-scale($scale: 1.03) {
+  transition: transform 200ms ease;
+
+  @include hover-supported {
+    transform: scale($scale);
+  }
+
+  @include reduced-motion {
+    transition: none;
+  }
+}
+
+@mixin transition($properties: all, $duration: 200ms, $timing: ease) {
+  transition: $properties $duration $timing;
+}
+
+@mixin transition-colors($duration: 200ms, $timing: ease) {
+  transition:
+    color $duration $timing,
+    background-color $duration $timing,
+    border-color $duration $timing;
+}
+
+@mixin no-transition {
+  transition: none;
+}
+
+@mixin shadow($value: 0 4px 12px rgba(0, 0, 0, 0.1)) {
+  box-shadow: $value;
+}
+
+@mixin overlay($color: rgba(0, 0, 0, 0.5)) {
+  position: absolute;
+  inset: 0;
+  background: $color;
+}
+
+@mixin gradient-overlay(
+  $direction: to bottom,
+  $start: rgba(0, 0, 0, 0.65),
+  $end: transparent
+) {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient($direction, $start, $end);
+}
+
+@mixin background-cover($position: center) {
+  background-position: $position;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+@mixin background-contain($position: center) {
+  background-position: $position;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+@mixin border($color: currentColor, $width: 1px, $style: solid) {
+  border: $width $style $color;
+}
+
+@mixin divider($color: currentColor, $direction: horizontal, $width: 1px) {
+  @if $direction == horizontal {
+    height: $width;
+    width: 100%;
+  } @else {
+    width: $width;
+    height: 100%;
+  }
+
+  background: $color;
+}
+
+@mixin scrollbar-hide {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@mixin scrollbar-style(
+  $width: 8px,
+  $track: transparent,
+  $thumb: rgba(128, 128, 128, 0.5)
+) {
+  scrollbar-width: thin;
+  scrollbar-color: $thumb $track;
+
+  &::-webkit-scrollbar {
+    width: $width;
+    height: $width;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $track;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $thumb;
+    border-radius: 999px;
+  }
+}
+
+@mixin selection($background, $color: inherit) {
+  &::selection {
+    background: $background;
+    color: $color;
+  }
+}
+
+@mixin placeholder($color: currentColor) {
+  &::placeholder {
+    color: $color;
+    opacity: 1;
+  }
+}
+
+@mixin disabled-state {
+  &:disabled,
+  &[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+@mixin loading-state {
+  &[aria-busy="true"] {
+    cursor: progress;
+  }
+}
+
+@mixin reduced-motion-safe {
+  @include reduced-motion {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@mixin print {
+  @media print {
+    @content;
+  }
+}
+
+@mixin print-hidden {
+  @media print {
+    display: none !important;
+  }
+}
+
+@mixin print-visible {
+  display: none;
+
+  @media print {
+    display: block !important;
   }
 }