@brady_h/styles 1.0.1 → 1.0.3

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@brady_h/styles",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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,82 @@
+@use "sass:map";
+@use "sass:list";
+
+$breakpoints: (
+  xs: 320px,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+);
+
+@function breakpoint($name) {
+  @if not map.has-key($breakpoints, $name) {
+    @error "Unknown breakpoint '#{$name}'. Available breakpoints: #{map.keys($breakpoints)}.";
+  }
+
+  @return map.get($breakpoints, $name);
+}
+
+@function breakpoint-next($name) {
+  $keys: map.keys($breakpoints);
+  $index: list.index($keys, $name);
+
+  @if $index == null {
+    @error "Unknown breakpoint '#{$name}'.";
+  }
+
+  @if $index == list.length($keys) {
+    @return null;
+  }
+
+  @return map.get($breakpoints, list.nth($keys, $index + 1));
+}
+
+@function breakpoint-previous($name) {
+  $keys: map.keys($breakpoints);
+  $index: list.index($keys, $name);
+
+  @if $index == null {
+    @error "Unknown breakpoint '#{$name}'.";
+  }
+
+  @if $index == 1 {
+    @return null;
+  }
+
+  @return map.get($breakpoints, list.nth($keys, $index - 1));
+}
+
+@function breakpoint-min($name) {
+  @return breakpoint($name);
+}
+
+@function breakpoint-max($name) {
+  $next: breakpoint-next($name);
+
+  @if $next == null {
+    @return null;
+  }
+
+  @return $next - 0.02px;
+}
+
+@function breakpoint-between($min, $max) {
+  $min-value: breakpoint($min);
+  $max-value: breakpoint-max($max);
+
+  @if $max-value == null {
+    @return "(min-width: #{$min-value})";
+  }
+
+  @if $min-value >= $max-value {
+    @error "The minimum breakpoint must be smaller than the maximum breakpoint.";
+  }
+
+  @return "(min-width: #{$min-value}) and (max-width: #{$max-value})";
+}
+
+@function breakpoint-keys() {
+  @return map.keys($breakpoints);
+}