@underlayerdev/ui 0.6.2 → 0.6.4

package/breakpoints/_breakpoints.scss

@@ -0,0 +1,169 @@
+@use './values' as *;
+
+/// Creates a mobile-first media query that applies styles from the specified breakpoint and up
+/// @param {String} $breakpoint - Breakpoint name: 'xs', 'sm', 'md', 'lg', or 'xl'
+/// @example
+///   @include up('md') {
+///     // styles for medium screens and larger
+///   }
+@mixin up($breakpoint) {
+  @if $breakpoint == 'xs' {
+    @media (min-width: $breakpoint-xs) {
+      @content;
+    }
+  } @else if $breakpoint == 'sm' {
+    @media (min-width: $breakpoint-sm) {
+      @content;
+    }
+  } @else if $breakpoint == 'md' {
+    @media (min-width: $breakpoint-md) {
+      @content;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media (min-width: $breakpoint-lg) {
+      @content;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media (min-width: $breakpoint-xl) {
+      @content;
+    }
+  }
+}
+
+/// Creates a desktop-first media query covering the named tier *and everything
+/// below it* — `down('md')` includes the md tier itself, so it ends at
+/// `$breakpoint-lg - 1`, not `$breakpoint-md - 1`.
+///
+/// IMPORTANT: `down($bp)` is therefore NOT the complement of `up($bp)` — both
+/// include the $bp tier, so they overlap. Pairing them on one property means
+/// the result is decided by source order, which is almost never intended.
+/// When you want "the part `up($bp)` does not cover", use `below($bp)`.
+///
+/// @param {String} $breakpoint - Breakpoint name: 'xs', 'sm', 'md', or 'lg'
+/// @example
+///   @include down('lg') {
+///     // styles for large screens and smaller
+///   }
+@mixin down($breakpoint) {
+  @if $breakpoint == 'xs' {
+    @media (max-width: ($breakpoint-sm - 1)) {
+      @content;
+    }
+  } @else if $breakpoint == 'sm' {
+    @media (max-width: ($breakpoint-md - 1)) {
+      @content;
+    }
+  } @else if $breakpoint == 'md' {
+    @media (max-width: ($breakpoint-lg - 1)) {
+      @content;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media (max-width: ($breakpoint-xl - 1)) {
+      @content;
+    }
+  }
+}
+
+/// Creates a media query for everything strictly *below* the named tier — the
+/// exact complement of `up($breakpoint)`, so the two never overlap. Use this
+/// (not `down()`) to split one property into a mobile and a desktop value.
+/// @param {String} $breakpoint - Breakpoint name: 'sm', 'md', 'lg', or 'xl'
+/// @example
+///   // ul-dock: visible only where the desktop navbar is not
+///   @include below('md') {
+///     display: flex;
+///   }
+@mixin below($breakpoint) {
+  @if $breakpoint == 'sm' {
+    @media (max-width: ($breakpoint-sm - 1)) {
+      @content;
+    }
+  } @else if $breakpoint == 'md' {
+    @media (max-width: ($breakpoint-md - 1)) {
+      @content;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media (max-width: ($breakpoint-lg - 1)) {
+      @content;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media (max-width: ($breakpoint-xl - 1)) {
+      @content;
+    }
+  } @else {
+    @error "below() expects 'sm', 'md', 'lg', or 'xl' — got '#{$breakpoint}'. "
+      + "There is nothing below 'xs' (it starts at 0).";
+  }
+}
+
+/// Creates a media query that applies styles between two breakpoints
+/// @param {String} $lower - Lower breakpoint name: 'xs', 'sm', 'md', 'lg', or 'xl'
+/// @param {String} $upper - Upper breakpoint name: 'sm', 'md', 'lg', or 'xl'
+/// @example
+///   @include between('sm', 'lg') {
+///     // styles that apply only between small and large screens
+///   }
+@mixin between($lower, $upper) {
+  $min: null;
+  $max: null;
+
+  // Set minimum breakpoint
+  @if $lower == 'xs' {
+    $min: $breakpoint-xs;
+  } @else if $lower == 'sm' {
+    $min: $breakpoint-sm;
+  } @else if $lower == 'md' {
+    $min: $breakpoint-md;
+  } @else if $lower == 'lg' {
+    $min: $breakpoint-lg;
+  } @else if $lower == 'xl' {
+    $min: $breakpoint-xl;
+  }
+
+  // Set maximum breakpoint
+  @if $upper == 'sm' {
+    $max: ($breakpoint-sm - 1);
+  } @else if $upper == 'md' {
+    $max: ($breakpoint-md - 1);
+  } @else if $upper == 'lg' {
+    $max: ($breakpoint-lg - 1);
+  } @else if $upper == 'xl' {
+    $max: ($breakpoint-xl - 1);
+  }
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  }
+}
+
+/// Creates a media query that applies styles only at a specific breakpoint range
+/// @param {String} $breakpoint - Breakpoint name: 'xs', 'sm', 'md', 'lg', or 'xl'
+/// @example
+///   @include only('md') {
+///     // styles that apply only to medium screens
+///   }
+@mixin only($breakpoint) {
+  @if $breakpoint == 'xs' {
+    @include between('xs', 'sm') {
+      @content;
+    }
+  } @else if $breakpoint == 'sm' {
+    @include between('sm', 'md') {
+      @content;
+    }
+  } @else if $breakpoint == 'md' {
+    @include between('md', 'lg') {
+      @content;
+    }
+  } @else if $breakpoint == 'lg' {
+    @include between('lg', 'xl') {
+      @content;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media (min-width: $breakpoint-xl) {
+      @content;
+    }
+  }
+}

package/breakpoints/_index.scss

@@ -0,0 +1,17 @@
+/**
+ * Public Sass entry point for @underlayerdev/ui breakpoint media queries.
+ *
+ * Consuming apps can import this via the `pkg:` importer:
+ *
+ *   @use 'pkg:@underlayerdev/ui/breakpoints' as bp;
+ *
+ *   .my-component {
+ *     @include bp.up('md') {
+ *       display: flex;
+ *     }
+ *   }
+ *
+ * Requires Dart Sass with the Node package importer enabled (supported by
+ * @angular/build out of the box since Angular CLI 20+).
+ */
+@forward './breakpoints';

package/breakpoints/_values.scss

@@ -0,0 +1,12 @@
+// Keep in sync with design-tokens/_variables.scss $breakpoint-*.
+//
+// Duplicated (not imported from ../core / ../design-tokens) so the
+// published `./breakpoints` package export stays self-contained: Node's
+// package "exports" boundaries block relative imports that cross from one
+// exported subpath into a different one, so this file can't reach outside
+// its own foundations/breakpoints/ directory once published.
+$breakpoint-xs: 0px !default;
+$breakpoint-sm: 768px !default;
+$breakpoint-md: 1024px !default;
+$breakpoint-lg: 1280px !default;
+$breakpoint-xl: 1600px !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underlayerdev/ui",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "peerDependencies": {
     "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.0.0",
@@ -21,7 +21,8 @@
       "types": "./types/underlayerdev-ui.d.ts",
       "default": "./fesm2022/underlayerdev-ui.mjs"
     },
-    "./design-tokens/*": "./design-tokens/*"
+    "./design-tokens/*": "./design-tokens/*",
+    "./breakpoints/*": "./breakpoints/*"
   },
   "type": "module"
 }

package/styles/foundations.css

@@ -15,6 +15,22 @@
  * - modal: dialogs
  * - toast: notifications
  */
+/**
+ * Public Sass entry point for @underlayerdev/ui breakpoint media queries.
+ *
+ * Consuming apps can import this via the `pkg:` importer:
+ *
+ *   @use 'pkg:@underlayerdev/ui/breakpoints' as bp;
+ *
+ *   .my-component {
+ *     @include bp.up('md') {
+ *       display: flex;
+ *     }
+ *   }
+ *
+ * Requires Dart Sass with the Node package importer enabled (supported by
+ * @angular/build out of the box since Angular CLI 20+).
+ */
 .ul-rich-text {
   font-family: Ultra Nunito Sans;
   line-height: 28px;