@brady_h/styles 1.0.4 → 1.0.6

package/README.md

@@ -0,0 +1,371 @@
+# @brady_h/styles
+
+A reusable SCSS foundation providing shared design tokens, responsive breakpoints, Sass functions, mixins, and utility classes for web projects.
+
+Designed to keep styling consistent across multiple applications while reducing duplicated SCSS code.
+
+## Installation
+
+```bash
+npm install @brady_h/styles
+```
+
+## Getting Started
+
+The package provides two ways to use its styling resources:
+
+- **Sass APIs:** Variables, maps, functions, breakpoints, and mixins.
+- **Utility classes:** Predefined global CSS classes for common styling needs.
+
+### Sass Variables, Functions & Mixins
+
+Import the package into any SCSS file:
+
+```scss
+@use "@brady_h/styles" as *;
+
+.container {
+  @include flex-center;
+
+  @include mobile-query {
+    flex-direction: column;
+  }
+}
+```
+
+Using a namespace is also supported:
+
+```scss
+@use "@brady_h/styles" as styles;
+
+.container {
+  @include styles.flex-center;
+  padding: styles.to-rem(24px);
+}
+```
+
+## Available Features
+
+### Variables
+
+Reusable design tokens and Sass maps.
+
+| Variable          | Description                  |
+| ----------------- | ---------------------------- |
+| `$spacing`        | Spacing scale                |
+| `$sizing`         | Sizing values                |
+| `$border-radius`  | Border radius values         |
+| `$border-width`   | Border widths                |
+| `$border-style`   | Border styles                |
+| `$z-index`        | Z-index scale                |
+| `$font-size`      | Font sizes                   |
+| `$font-weight`    | Font weights                 |
+| `$line-height`    | Line heights                 |
+| `$letter-spacing` | Letter spacing               |
+| `$opacity`        | Opacity values               |
+| `$box-shadow`     | Box shadow presets           |
+| `$breakpoints`    | Responsive breakpoint values |
+
+Example:
+
+```scss
+@use "sass:map";
+@use "@brady_h/styles" as *;
+
+.card {
+  padding: map.get($spacing, 4);
+  border-radius: map.get($border-radius, md);
+  box-shadow: map.get($box-shadow, md);
+}
+```
+
+### Breakpoints
+
+Responsive breakpoint values and helper functions.
+
+Default breakpoints:
+
+| Name  |  Width |
+| ----- | -----: |
+| `xs`  |  320px |
+| `sm`  |  576px |
+| `md`  |  768px |
+| `lg`  |  992px |
+| `xl`  | 1200px |
+| `xxl` | 1400px |
+
+Example:
+
+```scss
+@use "@brady_h/styles" as *;
+
+.container {
+  width: 100%;
+
+  @include respond-up(md) {
+    width: 80%;
+  }
+}
+```
+
+### Mixins
+
+Reusable styling patterns for common layouts and responsive behavior.
+
+Examples include:
+
+- `flex-center`
+- `flex-between`
+- `flex-start`
+- `flex-end`
+- `flex-column`
+- `flex-column-center`
+- `grid-center`
+- `grid-auto-fit`
+- `grid-auto-fill`
+- `text-truncate`
+- `visually-hidden`
+- `focus-ring`
+- `mobile-query`
+- `not-mobile-query`
+- `respond-up`
+- `respond-down`
+- `touch-query`
+- `pointer-query`
+- `scrollbar-hide`
+- `no-transition`
+
+Example:
+
+```scss
+@use "@brady_h/styles" as *;
+
+.card {
+  @include flex-column;
+  @include focus-ring;
+}
+```
+
+### Functions
+
+Reusable Sass functions for working with design tokens, units, colors, sizing, and calculations.
+
+Examples include:
+
+- `to-rem()`
+- `to-em()`
+- `to-px()`
+- `strip-unit()`
+- `spacing()`
+- `radius()`
+- `font-size()`
+- `font-weight()`
+- `line-height()`
+- `shadow()`
+- `z-index()`
+- `fluid-size()`
+- `fluid-spacing()`
+- `clamp-value()`
+- `color-opacity()`
+- `lighten-color()`
+- `darken-color()`
+
+Example:
+
+```scss
+@use "@brady_h/styles" as *;
+
+.heading {
+  font-size: to-rem(32px);
+}
+```
+
+## Utility Classes
+
+The package also provides predefined utility classes for common styling requirements.
+
+### Installation
+
+Import the utility stylesheet once in your application's global SCSS file:
+
+```scss
+@use "@brady_h/styles/src/classes";
+```
+
+These classes are global and can be used throughout your application.
+
+### Display
+
+```jsx
+<div className="u-flex">...</div>
+<div className="u-grid">...</div>
+<div className="u-hidden">...</div>
+```
+
+Available classes include:
+
+- `u-block`
+- `u-inline`
+- `u-inline-block`
+- `u-flex`
+- `u-inline-flex`
+- `u-grid`
+- `u-inline-grid`
+- `u-hidden`
+
+### Flexbox
+
+```jsx
+<div className="u-flex u-items-center u-justify-between">...</div>
+```
+
+Examples:
+
+- `u-flex-center`
+- `u-flex-between`
+- `u-flex-column`
+- `u-flex-wrap`
+- `u-flex-nowrap`
+- `u-flex-grow`
+- `u-flex-shrink-0`
+- `u-items-center`
+- `u-justify-center`
+- `u-justify-between`
+
+### Grid
+
+```jsx
+<div className="u-grid u-grid-cols-3 u-gap-4">...</div>
+```
+
+Examples:
+
+- `u-grid-center`
+- `u-grid-auto-fit`
+- `u-grid-auto-fill`
+- `u-grid-cols-1`
+- `u-grid-cols-2`
+- `u-grid-cols-3`
+- `u-grid-cols-4`
+- `u-grid-cols-6`
+- `u-grid-cols-12`
+
+### Spacing
+
+Spacing utilities are generated from the shared spacing map.
+
+Examples:
+
+- `u-p-4`
+- `u-px-4`
+- `u-py-4`
+- `u-m-4`
+- `u-mx-auto`
+- `u-mt-4`
+- `u-gap-4`
+- `u-gap-x-4`
+- `u-gap-y-4`
+
+### Typography
+
+```jsx
+<h1 className="u-text-center u-font-bold u-leading-tight">Heading</h1>
+```
+
+Examples:
+
+- `u-text-center`
+- `u-text-left`
+- `u-text-uppercase`
+- `u-text-italic`
+- `u-text-truncate`
+- `u-font-bold`
+- `u-font-semibold`
+- `u-leading-normal`
+
+Font-size utilities use the `u-font-size-*` prefix.
+
+### Borders & Shadows
+
+```jsx
+<div className="u-rounded-lg u-shadow-md">...</div>
+```
+
+Examples:
+
+- `u-rounded-none`
+- `u-rounded-sm`
+- `u-rounded-md`
+- `u-rounded-lg`
+- `u-rounded-full`
+- `u-border`
+- `u-border-none`
+- `u-border-solid`
+- `u-shadow-sm`
+- `u-shadow-md`
+- `u-shadow-lg`
+
+### Sizing & Layout
+
+Examples:
+
+- `u-w-full`
+- `u-w-auto`
+- `u-h-full`
+- `u-h-screen`
+- `u-min-w-0`
+- `u-max-w-full`
+- `u-relative`
+- `u-absolute`
+- `u-fixed`
+- `u-sticky`
+- `u-overflow-hidden`
+- `u-overflow-auto`
+
+### Responsive Utilities
+
+Responsive utility classes use a mobile-first approach and are generated for each configured breakpoint.
+
+Example:
+
+```jsx
+<div className="u-flex u-flex-column u-md-flex-row u-gap-3 u-lg-gap-5">...</div>
+```
+
+The breakpoint prefix applies the utility at that breakpoint and above.
+
+Examples:
+
+- `u-sm-flex`
+- `u-md-hidden`
+- `u-md-flex-row`
+- `u-lg-grid`
+- `u-lg-grid-cols-3`
+- `u-xl-text-center`
+
+## Package Structure
+
+```text
+styles/
+├── src/
+│   ├── _index.scss
+│   ├── _variables.scss
+│   ├── _breakpoints.scss
+│   ├── _functions.scss
+│   ├── _mixins.scss
+│   └── _classes.scss
+├── package.json
+└── README.md
+```
+
+## Notes
+
+- Sass variables, functions, breakpoints, and mixins are imported through the main package entry point.
+- Utility classes must be imported separately into a global stylesheet.
+- Utility classes are globally scoped, not CSS-module scoped.
+- Projects can customize their own colors, fonts, and application-specific design tokens.
+- The package provides reusable styling foundations rather than a complete design system.
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brady_h/styles",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Shared SCSS styling foundation for projects",
   "license": "MIT",
   "files": [

package/src/_classes.scss

@@ -1,1011 +0,0 @@
-@use "sass:map";
-@use "./mixins" as *;
-@use "./variables" as vars;
-@use "./breakpoints" as bp;
-
-$utility-spacing: vars.$spacing;
-
-$utility-display: (
-  block: block,
-  inline: inline,
-  inline-block: inline-block,
-  flex: flex,
-  inline-flex: inline-flex,
-  grid: grid,
-  inline-grid: inline-grid,
-  hidden: none,
-);
-
-$utility-font-sizes: vars.$font-size;
-$utility-font-weights: vars.$font-weight;
-$utility-line-heights: vars.$line-height;
-$utility-radii: vars.$border-radius;
-$utility-shadows: vars.$box-shadow;
-
-$utility-opacity: (
-  0: 0,
-  10: 0.1,
-  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,
-  100: 1,
-);
-
-$utility-z-index: vars.$z-index;
-
-@each $name, $value in $utility-display {
-  .u-#{$name} {
-    display: $value;
-  }
-}
-
-.u-visible {
-  visibility: visible;
-}
-
-.u-invisible {
-  visibility: hidden;
-}
-
-.u-collapse {
-  visibility: collapse;
-}
-
-.u-flex-center {
-  @include flex-center;
-}
-
-.u-flex-between {
-  @include flex-between;
-}
-
-.u-flex-start {
-  @include flex-start;
-}
-
-.u-flex-end {
-  @include flex-end;
-}
-
-.u-flex-column {
-  @include flex-column;
-}
-
-.u-flex-column-center {
-  @include flex-column-center;
-}
-
-.u-flex-wrap {
-  flex-wrap: wrap;
-}
-
-.u-flex-nowrap {
-  flex-wrap: nowrap;
-}
-
-.u-flex-wrap-reverse {
-  flex-wrap: wrap-reverse;
-}
-
-.u-flex-1 {
-  flex: 1;
-}
-
-.u-flex-auto {
-  flex: auto;
-}
-
-.u-flex-none {
-  flex: none;
-}
-
-.u-flex-grow {
-  flex-grow: 1;
-}
-
-.u-flex-grow-0 {
-  flex-grow: 0;
-}
-
-.u-flex-shrink {
-  flex-shrink: 1;
-}
-
-.u-flex-shrink-0 {
-  flex-shrink: 0;
-}
-
-.u-flex-row {
-  flex-direction: row;
-}
-
-.u-flex-row-reverse {
-  flex-direction: row-reverse;
-}
-
-.u-flex-column-reverse {
-  flex-direction: column-reverse;
-}
-
-.u-items-start {
-  align-items: flex-start;
-}
-
-.u-items-center {
-  align-items: center;
-}
-
-.u-items-end {
-  align-items: flex-end;
-}
-
-.u-items-stretch {
-  align-items: stretch;
-}
-
-.u-items-baseline {
-  align-items: baseline;
-}
-
-.u-justify-start {
-  justify-content: flex-start;
-}
-
-.u-justify-center {
-  justify-content: center;
-}
-
-.u-justify-end {
-  justify-content: flex-end;
-}
-
-.u-justify-between {
-  justify-content: space-between;
-}
-
-.u-justify-around {
-  justify-content: space-around;
-}
-
-.u-justify-evenly {
-  justify-content: space-evenly;
-}
-
-.u-self-auto {
-  align-self: auto;
-}
-
-.u-self-start {
-  align-self: flex-start;
-}
-
-.u-self-center {
-  align-self: center;
-}
-
-.u-self-end {
-  align-self: flex-end;
-}
-
-.u-self-stretch {
-  align-self: stretch;
-}
-
-.u-grid-center {
-  @include grid-center;
-}
-
-.u-grid-auto-fit {
-  @include grid-auto-fit;
-}
-
-.u-grid-auto-fill {
-  @include grid-auto-fill;
-}
-
-.u-grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
-.u-grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.u-grid-cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.u-grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.u-grid-cols-6 {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
-.u-grid-cols-12 {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-.u-grid-cols-none {
-  grid-template-columns: none;
-}
-
-.u-col-span-1 {
-  grid-column: span 1 / span 1;
-}
-
-.u-col-span-2 {
-  grid-column: span 2 / span 2;
-}
-
-.u-col-span-3 {
-  grid-column: span 3 / span 3;
-}
-
-.u-col-span-full {
-  grid-column: 1 / -1;
-}
-
-.u-w-auto {
-  width: auto;
-}
-
-.u-w-full {
-  width: 100%;
-}
-
-.u-w-screen {
-  width: 100vw;
-}
-
-.u-w-fit {
-  width: fit-content;
-}
-
-.u-w-max {
-  width: max-content;
-}
-
-.u-w-min {
-  width: min-content;
-}
-
-.u-h-auto {
-  height: auto;
-}
-
-.u-h-full {
-  height: 100%;
-}
-
-.u-h-screen {
-  height: 100vh;
-}
-
-.u-h-dvh {
-  height: 100dvh;
-}
-
-.u-h-fit {
-  height: fit-content;
-}
-
-.u-min-w-0 {
-  min-width: 0;
-}
-
-.u-min-h-0 {
-  min-height: 0;
-}
-
-.u-min-w-full {
-  min-width: 100%;
-}
-
-.u-min-h-full {
-  min-height: 100%;
-}
-
-.u-max-w-full {
-  max-width: 100%;
-}
-
-.u-max-h-full {
-  max-height: 100%;
-}
-
-.u-max-w-screen {
-  max-width: 100vw;
-}
-
-.u-max-h-screen {
-  max-height: 100vh;
-}
-
-.u-m-auto {
-  margin: auto;
-}
-
-.u-mx-auto {
-  margin-inline: auto;
-}
-
-.u-my-auto {
-  margin-block: auto;
-}
-
-.u-m-0 {
-  margin: 0;
-}
-
-.u-p-0 {
-  padding: 0;
-}
-
-@each $key, $value in $utility-spacing {
-  .u-gap-#{$key} {
-    gap: $value;
-  }
-
-  .u-gap-x-#{$key} {
-    column-gap: $value;
-  }
-
-  .u-gap-y-#{$key} {
-    row-gap: $value;
-  }
-
-  .u-p-#{$key} {
-    padding: $value;
-  }
-
-  .u-px-#{$key} {
-    padding-inline: $value;
-  }
-
-  .u-py-#{$key} {
-    padding-block: $value;
-  }
-
-  .u-pt-#{$key} {
-    padding-top: $value;
-  }
-
-  .u-pr-#{$key} {
-    padding-right: $value;
-  }
-
-  .u-pb-#{$key} {
-    padding-bottom: $value;
-  }
-
-  .u-pl-#{$key} {
-    padding-left: $value;
-  }
-
-  .u-m-#{$key} {
-    margin: $value;
-  }
-
-  .u-mx-#{$key} {
-    margin-inline: $value;
-  }
-
-  .u-my-#{$key} {
-    margin-block: $value;
-  }
-
-  .u-mt-#{$key} {
-    margin-top: $value;
-  }
-
-  .u-mr-#{$key} {
-    margin-right: $value;
-  }
-
-  .u-mb-#{$key} {
-    margin-bottom: $value;
-  }
-
-  .u-ml-#{$key} {
-    margin-left: $value;
-  }
-
-  .u-inset-#{$key} {
-    inset: $value;
-  }
-}
-
-.u-text-left {
-  text-align: left;
-}
-
-.u-text-center {
-  text-align: center;
-}
-
-.u-text-right {
-  text-align: right;
-}
-
-.u-text-justify {
-  text-align: justify;
-}
-
-.u-text-start {
-  text-align: start;
-}
-
-.u-text-end {
-  text-align: end;
-}
-
-.u-text-uppercase {
-  text-transform: uppercase;
-}
-
-.u-text-lowercase {
-  text-transform: lowercase;
-}
-
-.u-text-capitalize {
-  text-transform: capitalize;
-}
-
-.u-text-normal {
-  text-transform: none;
-}
-
-.u-text-italic {
-  font-style: italic;
-}
-
-.u-text-not-italic {
-  font-style: normal;
-}
-
-.u-text-underline {
-  text-decoration: underline;
-}
-
-.u-text-no-underline {
-  text-decoration: none;
-}
-
-.u-text-line-through {
-  text-decoration: line-through;
-}
-
-.u-text-truncate {
-  @include text-truncate;
-}
-
-.u-text-wrap {
-  white-space: normal;
-}
-
-.u-text-nowrap {
-  white-space: nowrap;
-}
-
-.u-text-balance {
-  text-wrap: balance;
-}
-
-.u-text-pretty {
-  text-wrap: pretty;
-}
-
-.u-text-break {
-  overflow-wrap: break-word;
-}
-
-.u-text-break-all {
-  word-break: break-all;
-}
-
-@each $key, $value in $utility-font-sizes {
-  .u-text-#{$key} {
-    font-size: $value;
-  }
-}
-
-@each $key, $value in $utility-font-weights {
-  .u-font-#{$key} {
-    font-weight: $value;
-  }
-}
-
-@each $key, $value in $utility-line-heights {
-  .u-leading-#{$key} {
-    line-height: $value;
-  }
-}
-
-.u-font-normal {
-  font-weight: 400;
-}
-
-.u-font-medium {
-  font-weight: 500;
-}
-
-.u-font-semibold {
-  font-weight: 600;
-}
-
-.u-font-bold {
-  font-weight: 700;
-}
-
-.u-leading-none {
-  line-height: 1;
-}
-
-.u-leading-tight {
-  line-height: 1.25;
-}
-
-.u-leading-normal {
-  line-height: 1.5;
-}
-
-.u-leading-loose {
-  line-height: 2;
-}
-
-.u-relative {
-  position: relative;
-}
-
-.u-absolute {
-  position: absolute;
-}
-
-.u-fixed {
-  position: fixed;
-}
-
-.u-sticky {
-  position: sticky;
-}
-
-.u-inset-0 {
-  inset: 0;
-}
-
-.u-top-0 {
-  top: 0;
-}
-
-.u-right-0 {
-  right: 0;
-}
-
-.u-bottom-0 {
-  bottom: 0;
-}
-
-.u-left-0 {
-  left: 0;
-}
-
-.u-overflow-hidden {
-  overflow: hidden;
-}
-
-.u-overflow-auto {
-  overflow: auto;
-}
-
-.u-overflow-scroll {
-  overflow: scroll;
-}
-
-.u-overflow-visible {
-  overflow: visible;
-}
-
-.u-overflow-x-auto {
-  overflow-x: auto;
-}
-
-.u-overflow-y-auto {
-  overflow-y: auto;
-}
-
-.u-overflow-x-hidden {
-  overflow-x: hidden;
-}
-
-.u-overflow-y-hidden {
-  overflow-y: hidden;
-}
-
-@each $key, $value in $utility-radii {
-  .u-rounded-#{$key} {
-    border-radius: $value;
-  }
-}
-
-.u-rounded {
-  border-radius: map.get($utility-radii, md);
-}
-
-.u-rounded-full {
-  border-radius: 9999px;
-}
-
-.u-rounded-none {
-  border-radius: 0;
-}
-
-.u-border {
-  border-style: solid;
-  border-width: 1px;
-}
-
-.u-border-0 {
-  border-width: 0;
-}
-
-.u-border-none {
-  border: none;
-}
-
-.u-border-solid {
-  border-style: solid;
-}
-
-.u-border-dashed {
-  border-style: dashed;
-}
-
-.u-border-dotted {
-  border-style: dotted;
-}
-
-.u-shadow {
-  box-shadow: map.get($utility-shadows, md);
-}
-
-@each $key, $value in $utility-shadows {
-  .u-shadow-#{$key} {
-    box-shadow: $value;
-  }
-}
-
-.u-shadow-none {
-  box-shadow: none;
-}
-
-.u-cursor-pointer {
-  cursor: pointer;
-}
-
-.u-cursor-default {
-  cursor: default;
-}
-
-.u-cursor-not-allowed {
-  cursor: not-allowed;
-}
-
-.u-cursor-grab {
-  cursor: grab;
-}
-
-.u-cursor-grabbing {
-  cursor: grabbing;
-}
-
-.u-pointer {
-  cursor: pointer;
-}
-
-.u-pointer-events-none {
-  pointer-events: none;
-}
-
-.u-pointer-events-auto {
-  pointer-events: auto;
-}
-
-.u-select-none {
-  user-select: none;
-}
-
-.u-select-text {
-  user-select: text;
-}
-
-.u-select-all {
-  user-select: all;
-}
-
-.u-sr-only {
-  @include visually-hidden;
-}
-
-.u-focus-ring {
-  @include focus-ring;
-}
-
-.u-no-transition {
-  @include no-transition;
-}
-
-.u-scrollbar-hide {
-  @include scrollbar-hide;
-}
-
-.u-scroll-smooth {
-  scroll-behavior: smooth;
-}
-
-.u-scroll-auto {
-  scroll-behavior: auto;
-}
-
-.u-list-none {
-  list-style: none;
-}
-
-.u-list-disc {
-  list-style: disc;
-}
-
-.u-list-decimal {
-  list-style: decimal;
-}
-
-.u-bg-transparent {
-  background-color: transparent;
-}
-
-.u-bg-current {
-  background-color: currentColor;
-}
-
-.u-opacity-0 {
-  opacity: 0;
-}
-
-@each $key, $value in $utility-opacity {
-  .u-opacity-#{$key} {
-    opacity: $value;
-  }
-}
-
-.u-transition {
-  transition: all 200ms ease;
-}
-
-.u-transition-none {
-  transition: none;
-}
-
-.u-transition-colors {
-  transition:
-    color 200ms ease,
-    background-color 200ms ease,
-    border-color 200ms ease;
-}
-
-.u-transition-transform {
-  transition: transform 200ms ease;
-}
-
-.u-transform-none {
-  transform: none;
-}
-
-.u-scale-95 {
-  transform: scale(0.95);
-}
-
-.u-scale-100 {
-  transform: scale(1);
-}
-
-.u-scale-105 {
-  transform: scale(1.05);
-}
-
-.u-rotate-90 {
-  transform: rotate(90deg);
-}
-
-.u-rotate-180 {
-  transform: rotate(180deg);
-}
-
-.u-rotate-270 {
-  transform: rotate(270deg);
-}
-
-.u-z-auto {
-  z-index: auto;
-}
-
-@each $key, $value in $utility-z-index {
-  .u-z-#{$key} {
-    z-index: $value;
-  }
-}
-
-.u-aspect-square {
-  aspect-ratio: 1 / 1;
-}
-
-.u-aspect-video {
-  aspect-ratio: 16 / 9;
-}
-
-.u-aspect-portrait {
-  aspect-ratio: 3 / 4;
-}
-
-.u-object-cover {
-  object-fit: cover;
-}
-
-.u-object-contain {
-  object-fit: contain;
-}
-
-.u-object-fill {
-  object-fit: fill;
-}
-
-.u-object-none {
-  object-fit: none;
-}
-
-.u-object-center {
-  object-position: center;
-}
-
-.u-object-top {
-  object-position: top;
-}
-
-.u-object-bottom {
-  object-position: bottom;
-}
-
-.u-mobile-hidden {
-  @include bp.respond-down(md) {
-    display: none;
-  }
-}
-
-.u-mobile-block {
-  @include bp.respond-down(md) {
-    display: block;
-  }
-}
-
-.u-mobile-flex {
-  @include bp.respond-down(md) {
-    display: flex;
-  }
-}
-
-.u-mobile-grid {
-  @include bp.respond-down(md) {
-    display: grid;
-  }
-}
-
-.u-desktop-hidden {
-  @include bp.respond-up(md) {
-    display: none;
-  }
-}
-
-.u-desktop-block {
-  @include bp.respond-up(md) {
-    display: block;
-  }
-}
-
-.u-desktop-flex {
-  @include bp.respond-up(md) {
-    display: flex;
-  }
-}
-
-.u-desktop-grid {
-  @include bp.respond-up(md) {
-    display: grid;
-  }
-}
-
-@each $breakpoint-name, $breakpoint-value in bp.$breakpoints {
-  @media (min-width: #{$breakpoint-value}) {
-    @each $name, $value in $utility-display {
-      .u-#{$breakpoint-name}-#{$name} {
-        display: $value;
-      }
-    }
-
-    .u-#{$breakpoint-name}-flex-row {
-      flex-direction: row;
-    }
-
-    .u-#{$breakpoint-name}-flex-column {
-      flex-direction: column;
-    }
-
-    .u-#{$breakpoint-name}-flex-wrap {
-      flex-wrap: wrap;
-    }
-
-    .u-#{$breakpoint-name}-flex-nowrap {
-      flex-wrap: nowrap;
-    }
-
-    .u-#{$breakpoint-name}-items-center {
-      align-items: center;
-    }
-
-    .u-#{$breakpoint-name}-justify-center {
-      justify-content: center;
-    }
-
-    .u-#{$breakpoint-name}-justify-between {
-      justify-content: space-between;
-    }
-
-    .u-#{$breakpoint-name}-text-left {
-      text-align: left;
-    }
-
-    .u-#{$breakpoint-name}-text-center {
-      text-align: center;
-    }
-
-    .u-#{$breakpoint-name}-text-right {
-      text-align: right;
-    }
-
-    @each $key, $value in $utility-spacing {
-      .u-#{$breakpoint-name}-gap-#{$key} {
-        gap: $value;
-      }
-
-      .u-#{$breakpoint-name}-p-#{$key} {
-        padding: $value;
-      }
-
-      .u-#{$breakpoint-name}-px-#{$key} {
-        padding-inline: $value;
-      }
-
-      .u-#{$breakpoint-name}-py-#{$key} {
-        padding-block: $value;
-      }
-
-      .u-#{$breakpoint-name}-m-#{$key} {
-        margin: $value;
-      }
-
-      .u-#{$breakpoint-name}-mx-#{$key} {
-        margin-inline: $value;
-      }
-
-      .u-#{$breakpoint-name}-my-#{$key} {
-        margin-block: $value;
-      }
-    }
-  }
-}

package/src/_index.scss

@@ -1,5 +1,4 @@
 @forward "variables";
 @forward "breakpoints";
+@forward "functions" hide breakpoint;
 @forward "mixins";
-@forward "classes";
-@forward "functions";