@brady_h/styles 1.0.1 → 1.0.2

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@brady_h/styles",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Shared SCSS styling foundation for projects",
   "license": "MIT",
   "files": [
     "src"
   ],
   "sass": "./src/_index.scss",
-  "style": "./src/_index.scss"
+  "style": "./src/_index.scss",
+  "scripts": {
+    "release:patch": "npm version patch && npm publish --access public",
+    "release:minor": "npm version minor && npm publish --access public",
+    "release:major": "npm version major && npm publish --access public"
+  }
 }

package/src/_breakpoints.scss

@@ -0,0 +1,14 @@
+@use "sass:map";
+
+$breakpoints: (
+  xs: 320px,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+);
+
+@function breakpoint($name) {
+  @return map.get($breakpoints, $name);
+}

package/src/_classes.scss

@@ -0,0 +1,54 @@
+@use "./mixins" as *;
+
+.u-flex-center {
+  @include flex-center;
+}
+
+.u-flex-between {
+  @include flex-between;
+}
+
+.u-flex {
+  display: flex;
+}
+
+.u-flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.u-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.u-text-center {
+  text-align: center;
+}
+
+.u-text-truncate {
+  @include text-truncate;
+}
+
+.u-w-full {
+  width: 100%;
+}
+
+.u-h-full {
+  height: 100%;
+}
+
+.u-mx-auto {
+  margin-inline: auto;
+}
+
+.u-sr-only {
+  @include visually-hidden;
+}
+
+.u-pointer {
+  cursor: pointer;
+}
+
+.u-select-none {
+  user-select: none;
+}

package/src/_functions.scss

@@ -0,0 +1,5 @@
+@use "sass:math";
+
+@function to-rem($value, $base: 16px) {
+  @return math.div($value, $base) * 1rem;
+}

package/src/_mixins.scss

@@ -0,0 +1,76 @@
+@use "./breakpoints" as bp;
+
+@mixin respond-down($breakpoint: md) {
+  @media (max-width: bp.breakpoint($breakpoint)) {
+    @content;
+  }
+}
+
+@mixin respond-up($breakpoint: md) {
+  @media (min-width: bp.breakpoint($breakpoint)) {
+    @content;
+  }
+}
+
+@mixin touch-query($breakpoint: md) {
+  @media (max-width: bp.breakpoint($breakpoint)) and (pointer: coarse) and (hover: none) {
+    @content;
+  }
+}
+
+@mixin pointer-query($breakpoint: md) {
+  $min-width: bp.breakpoint($breakpoint) + 1px;
+
+  @media (min-width: #{$min-width}) and (hover: hover) and (pointer: fine) {
+    @content;
+  }
+}
+
+@mixin mobile-query($bp: md) {
+  @include touch-query($bp) {
+    @content;
+  }
+}
+
+@mixin not-mobile-query($bp: md) {
+  @include pointer-query($bp) {
+    @content;
+  }
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin text-truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@mixin focus-ring($color: currentColor) {
+  &:focus-visible {
+    outline: 2px solid $color;
+    outline-offset: 3px;
+  }
+}

package/src/_variables.scss

@@ -0,0 +1,27 @@
+$spacing: (
+  0: 0,
+  1: 4px,
+  2: 8px,
+  3: 12px,
+  4: 16px,
+  5: 24px,
+  6: 32px,
+  7: 48px,
+  8: 64px,
+);
+
+$border-radius: (
+  sm: 4px,
+  md: 8px,
+  lg: 12px,
+  xl: 16px,
+  full: 9999px,
+);
+
+$z-index: (
+  dropdown: 100,
+  sticky: 200,
+  overlay: 300,
+  modal: 400,
+  tooltip: 500,
+);