feat(theme): add breakpoints in class

src/theme/_columns.scss

@@ -1,9 +1,23 @@
+@use './variables/breakpoints' as T;
+
 @for $i from 1 through 12 {
   .columns-#{$i} {
     columns: $i;
   }
+
+  @each $breakpoint, $_ in T.$breakpoints {
+    .#{$breakpoint}:columns-#{$i} {
+      columns: $i;
+    }
+  }
 }
 
 .columns-auto {
   columns: auto;
 }
+
+@each $breakpoint, $_ in T.$breakpoints {
+  .#{$breakpoint}:columns-auto {
+    columns: auto;
+  }
+}

src/theme/_fill-color.scss

@@ -1,32 +1,39 @@
-@use './variables/colors' as T;
+@use './variables/breakpoints' as T;
+@use './variables/colors' as colors;
 
 $fill-colors: (
-  primary: T.$color-primary,
-  primary-dark-translucent: T.$color-primary-dark-translucent,
-  secondary: T.$color-secondary,
-  dark: T.$color-dark,
-  dark-translucency: T.$color-dark-translucency,
-  white: T.$color-white,
-  ultra-light: T.$color-ultra-light,
-  neutral-light-lavender: T.$color-neutral-light-lavender,
-  light-blue-hint: T.$color-light-blue-hint,
-  soft-white-blue: T.$color-soft-white-blue,
-  green: T.$color-green,
-  cherry: T.$color-cherry,
-  grey-dark: T.$color-grey-dark,
-  grey: T.$color-grey,
-  grey-light: T.$color-grey-light,
-  grey-ultra-light: T.$color-grey-ultra-light,
-  error: T.$color-error,
-  success: T.$color-success,
-  warning: T.$color-warning,
-  info: T.$color-info,
-  focus: T.$color-focus,
-  transparent: T.$color-transparent
+  primary: colors.$color-primary,
+  primary-dark-translucent: colors.$color-primary-dark-translucent,
+  secondary: colors.$color-secondary,
+  dark: colors.$color-dark,
+  dark-translucency: colors.$color-dark-translucency,
+  white: colors.$color-white,
+  ultra-light: colors.$color-ultra-light,
+  neutral-light-lavender: colors.$color-neutral-light-lavender,
+  light-blue-hint: colors.$color-light-blue-hint,
+  soft-white-blue: colors.$color-soft-white-blue,
+  green: colors.$color-green,
+  cherry: colors.$color-cherry,
+  grey-dark: colors.$color-grey-dark,
+  grey: colors.$color-grey,
+  grey-light: colors.$color-grey-light,
+  grey-ultra-light: colors.$color-grey-ultra-light,
+  error: colors.$color-error,
+  success: colors.$color-success,
+  warning: colors.$color-warning,
+  info: colors.$color-info,
+  focus: colors.$color-focus,
+  transparent: colors.$color-transparent
 );
 
 @each $name, $color in $fill-colors {
   .fill-#{$name} {
     fill: $color;
   }
+
+  @each $breakpoint, $_ in T.$breakpoints {
+    .#{$breakpoint}:fill-#{$name} {
+      fill: $color;
+    }
+  }
 }

src/theme/_opacity.scss

@@ -1,5 +1,13 @@
+@use './variables/breakpoints' as T;
+
 @for $i from 0 through 20 {
   .opacity-#{5 * $i} {
     opacity: $i * 0.05;
   }
+
+  @each $breakpoint, $_ in T.$breakpoints {
+    .#{$breakpoint}:opacity-#{5 * $i} {
+      opacity: $i * 0.05;
+    }
+  }
 }

src/theme/_place-content.scss

@@ -1,31 +1,24 @@
-.place-content-center {
-  place-content: center;
-}
-
-.place-content-start {
-  place-content: start;
-}
+@use './variables/breakpoints' as T;
 
-.place-content-end {
-  place-content: end;
-}
-
-.place-content-between {
-  place-content: space-between;
-}
+$place-content-values: (
+  center: center,
+  start: start,
+  end: end,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly,
+  baseline: baseline,
+  stretch: stretch
+);
 
-.place-content-around {
-  place-content: space-around;
-}
-
-.place-content-evenly {
-  place-content: space-evenly;
-}
-
-.place-content-baseline {
-  place-content: baseline;
-}
+@each $name, $value in $place-content-values {
+  .place-content-#{$name} {
+    place-content: $value;
+  }
 
-.place-content-stretch {
-  place-content: stretch;
+  @each $breakpoint, $_ in T.$breakpoints {
+    .#{$breakpoint}:place-content-#{$name} {
+      place-content: $value;
+    }
+  }
 }

src/theme/_shadow.scss

@@ -1,39 +1,24 @@
-.shadow {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px -1px rgba(0, 0, 0, 0.1);
-}
-
-.shadow-sm {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-}
+@use './variables/breakpoints' as T;
 
-.shadow-md {
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -2px rgba(0, 0, 0, 0.1);
-}
-
-.shadow-lg {
-  box-shadow:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -4px rgba(0, 0, 0, 0.1);
-}
+$shadow-values: (
+  none: none,
+  sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05),
+  md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+  lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+  2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
+  inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05),
+  default: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
+);
 
-.shadow-xl {
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 8px 10px -6px rgba(0, 0, 0, 0.1);
-}
-
-.shadow-2xl {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-}
-
-.shadow-inner {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
-}
+@each $name, $value in $shadow-values {
+  .shadow-#{$name} {
+    box-shadow: $value;
+  }
 
-.shadow-none {
-  box-shadow: none;
+  @each $breakpoint, $_ in T.$breakpoints {
+    .#{$breakpoint}:shadow-#{$name} {
+      box-shadow: $value;
+    }
+  }
 }

src/theme/_size.scss

@@ -1,23 +1,24 @@
-@use './variables/spacings' as T;
+@use './variables/breakpoints' as T;
+@use './variables/spacings' as spacings;
 
 $sizes: (
-  96: T.$spacing-96,
-  60: T.$spacing-60,
-  48: T.$spacing-48,
-  40: T.$spacing-40,
-  36: T.$spacing-36,
-  32: T.$spacing-32,
-  28: T.$spacing-28,
-  24: T.$spacing-24,
-  20: T.$spacing-20,
-  16: T.$spacing-16,
-  12: T.$spacing-12,
-  8: T.$spacing-8,
-  6: T.$spacing-6,
-  4: T.$spacing-4,
-  2: T.$spacing-2,
-  1: T.$spacing-1,
-  0: T.$spacing-0
+  96: spacings.$spacing-96,
+  60: spacings.$spacing-60,
+  48: spacings.$spacing-48,
+  40: spacings.$spacing-40,
+  36: spacings.$spacing-36,
+  32: spacings.$spacing-32,
+  28: spacings.$spacing-28,
+  24: spacings.$spacing-24,
+  20: spacings.$spacing-20,
+  16: spacings.$spacing-16,
+  12: spacings.$spacing-12,
+  8: spacings.$spacing-8,
+  6: spacings.$spacing-6,
+  4: spacings.$spacing-4,
+  2: spacings.$spacing-2,
+  1: spacings.$spacing-1,
+  0: spacings.$spacing-0
 );
 
 @each $name, $value in $sizes {
@@ -27,4 +28,13 @@ $sizes: (
     height: $value;
     min-height: $value;
   }
+
+  @each $breakpoint, $_ in T.$breakpoints {
+    .#{$breakpoint}:size-#{$name} {
+      width: $value;
+      min-width: $value;
+      height: $value;
+      min-height: $value;
+    }
+  }
 }

src/theme/_spacing.scss

@@ -1,23 +1,24 @@
-@use './variables/spacings' as T;
+@use './variables/breakpoints' as T;
+@use './variables/spacings' as spacings;
 
 $spacings: (
-  96: T.$spacing-96,
-  60: T.$spacing-60,
-  48: T.$spacing-48,
-  40: T.$spacing-40,
-  36: T.$spacing-36,
-  32: T.$spacing-32,
-  28: T.$spacing-28,
-  24: T.$spacing-24,
-  20: T.$spacing-20,
-  16: T.$spacing-16,
-  12: T.$spacing-12,
-  8: T.$spacing-8,
-  6: T.$spacing-6,
-  4: T.$spacing-4,
-  2: T.$spacing-2,
-  1: T.$spacing-1,
-  0: T.$spacing-0
+  96: spacings.$spacing-96,
+  60: spacings.$spacing-60,
+  48: spacings.$spacing-48,
+  40: spacings.$spacing-40,
+  36: spacings.$spacing-36,
+  32: spacings.$spacing-32,
+  28: spacings.$spacing-28,
+  24: spacings.$spacing-24,
+  20: spacings.$spacing-20,
+  16: spacings.$spacing-16,
+  12: spacings.$spacing-12,
+  8: spacings.$spacing-8,
+  6: spacings.$spacing-6,
+  4: spacings.$spacing-4,
+  2: spacings.$spacing-2,
+  1: spacings.$spacing-1,
+  0: spacings.$spacing-0
 );
 
 $sides: (
@@ -49,6 +50,15 @@ $axes: (
     .m#{$prefix}-#{$size} {
       #{$propName}: $value;
     }
+
+    @each $breakpoint, $_ in T.$breakpoints {
+      .#{$breakpoint}:p#{$prefix}-#{$size} {
+        #{$propName}: $value;
+      }
+      .#{$breakpoint}:m#{$prefix}-#{$size} {
+        #{$propName}: $value;
+      }
+    }
   }
 
   @each $axis, $dirs in $axes {
@@ -59,6 +69,15 @@ $axes: (
       .m#{$axis}-#{$size} {
         margin-#{$dir}: $value;
       }
+
+      @each $breakpoint, $_ in T.$breakpoints {
+        .#{$breakpoint}:p#{$axis}-#{$size} {
+          padding-#{$dir}: $value;
+        }
+        .#{$breakpoint}:m#{$axis}-#{$size} {
+          margin-#{$dir}: $value;
+        }
+      }
     }
   }
 
@@ -73,4 +92,16 @@ $axes: (
   .gap-row-#{$size} {
     row-gap: $value;
   }
+
+  @each $breakpoint, $_ in T.$breakpoints {
+    .#{$breakpoint}:gap-#{$size} {
+      gap: $value;
+    }
+    .#{$breakpoint}:gap-col-#{$size} {
+      column-gap: $value;
+    }
+    .#{$breakpoint}:gap-row-#{$size} {
+      row-gap: $value;
+    }
+  }
 }

src/theme/_z-index.scss

@@ -1,18 +1,25 @@
-@use './variables/zIndex' as T;
+@use './variables/breakpoints' as T;
+@use './variables/zIndex' as zIndex;
 
 $z-indexes: (
-  z-bottom-bar: T.$z-index-bottom-bar,
-  z-header: T.$z-index-header,
-  z-overlay: T.$z-index-overlay,
-  z-modal: T.$z-index-modal,
-  z-always-on-top: T.$z-index-always-on-top,
-  z-sidebar: T.$z-index-sidebar,
-  z-elevation: T.$z-index-elevation,
-  z-base: T.$z-index-base
+  z-bottom-bar: zIndex.$z-index-bottom-bar,
+  z-header: zIndex.$z-index-header,
+  z-overlay: zIndex.$z-index-overlay,
+  z-modal: zIndex.$z-index-modal,
+  z-always-on-top: zIndex.$z-index-always-on-top,
+  z-sidebar: zIndex.$z-index-sidebar,
+  z-elevation: zIndex.$z-index-elevation,
+  z-base: zIndex.$z-index-base
 );
 
 @each $name, $value in $z-indexes {
   .#{$name} {
     z-index: $value;
   }
+
+  @each $breakpoint, $_ in T.$breakpoints {
+    .#{$breakpoint}:#{$name} {
+      z-index: $value;
+    }
+  }
 }