feat(theme): add class in theme

src/theme/_fill-color.scss

@@ -0,0 +1,32 @@
+@use './variables/colors' as T;
+
+$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
+);
+
+@each $name, $color in $fill-colors {
+  .fill-#{$name} {
+    fill: $color;
+  }
+}

src/theme/_index.scss

@@ -1,6 +1,6 @@
 @forward './variables/animations';
-@forward './variables/borderRadius';
-@forward './variables/boxShadows';
+@forward './variables/border-radius';
+@forward './variables/box-shadows';
 @forward './variables/breakpoints';
 @forward './variables/colors';
 @forward './variables/fonts';

src/theme/_opacity.scss

@@ -0,0 +1,5 @@
+@for $i from 0 through 20 {
+  .opacity-#{5 * $i} {
+    opacity: $i * 0.05;
+  }
+}

src/theme/_shadow.scss

@@ -0,0 +1,39 @@
+.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);
+}
+
+.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-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);
+}
+
+.shadow-none {
+  box-shadow: none;
+}

src/theme/_size.scss

@@ -0,0 +1,30 @@
+@use './variables/spacings' as T;
+
+$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
+);
+
+@each $name, $value in $sizes {
+  .size-#{$name} {
+    width: $value;
+    min-width: $value;
+    height: $value;
+    min-height: $value;
+  }
+}

src/theme/_z-index.scss

@@ -0,0 +1,18 @@
+@use './variables/zIndex' as T;
+
+$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
+);
+
+@each $name, $value in $z-indexes {
+  .#{$name} {
+    z-index: $value;
+  }
+}

src/theme/align/align-content.scss → src/theme/align/_align-content.scss

@@ -1,35 +1,35 @@
-.content-normal {
+.ac-normal {
   align-content: normal;
 }
 
-.content-center {
+.ac-center {
   align-content: center;
 }
 
-.content-start {
+.ac-start {
   align-content: flex-start;
 }
 
-.content-end {
+.ac-end {
   align-content: flex-end;
 }
 
-.content-between {
+.ac-between {
   align-content: space-between;
 }
 
-.content-around {
+.ac-around {
   align-content: space-around;
 }
 
-.content-evenly {
+.ac-evenly {
   align-content: space-evenly;
 }
 
-.content-baseline {
+.ac-baseline {
   align-content: baseline;
 }
 
-.content-stretch {
+.ac-stretch {
   align-content: stretch;
 }

src/theme/align/_align-items.scss

@@ -1,19 +1,19 @@
-.items-start {
+.ai-start {
   align-items: flex-start;
 }
 
-.items-end {
+.ai-end {
   align-items: flex-end;
 }
 
-.items-center {
+.ai-center {
   align-items: center;
 }
 
-.items-baseline {
+.ai-baseline {
   align-items: baseline;
 }
 
-.items-stretch {
+.ai-stretch {
   align-items: stretch;
 }

src/theme/align/_align-self.scss

@@ -1,23 +1,23 @@
-.self-auto {
+.as-auto {
   align-self: auto;
 }
 
-.self-start {
+.as-start {
   align-self: flex-start;
 }
 
-.self-end {
+.as-end {
   align-self: flex-end;
 }
 
-.self-center {
+.as-center {
   align-self: center;
 }
 
-.self-stretch {
+.as-stretch {
   align-self: stretch;
 }
 
-.self-baseline {
+.as-baseline {
   align-self: baseline;
 }

src/theme/background/_bg-utilities.scss

@@ -0,0 +1,109 @@
+// background-attachment
+
+.bg-fixed {
+  background-attachment: fixed;
+}
+
+.bg-local {
+  background-attachment: local;
+}
+
+.bg-scroll {
+  background-attachment: scroll;
+}
+
+// background-clip
+
+.bg-clip-border {
+  background-clip: border-box;
+}
+
+.bg-clip-padding {
+  background-clip: padding-box;
+}
+
+.bg-clip-content {
+  background-clip: content-box;
+}
+
+.bg-clip-text {
+  background-clip: text;
+}
+
+// background-position
+
+.bg-bottom {
+  background-position: bottom;
+}
+
+.bg-center {
+  background-position: center;
+}
+
+.bg-left {
+  background-position: left;
+}
+
+.bg-left-bottom {
+  background-position: left bottom;
+}
+
+.bg-left-top {
+  background-position: left top;
+}
+
+.bg-right {
+  background-position: right;
+}
+
+.bg-right-bottom {
+  background-position: right bottom;
+}
+
+.bg-right-top {
+  background-position: right top;
+}
+
+.bg-top {
+  background-position: top;
+}
+
+// background-repeat
+
+.bg-repeat {
+  background-repeat: repeat;
+}
+
+.bg-no-repeat {
+  background-repeat: no-repeat;
+}
+
+.bg-repeat-x {
+  background-repeat: repeat-x;
+}
+
+.bg-repeat-y {
+  background-repeat: repeat-y;
+}
+
+.bg-repeat-round {
+  background-repeat: round;
+}
+
+.bg-repeat-space {
+  background-repeat: space;
+}
+
+// background-size
+
+.bg-auto {
+  background-size: auto;
+}
+
+.bg-cover {
+  background-size: cover;
+}
+
+.bg-contain {
+  background-size: contain;
+}

src/theme/border/_border.scss

@@ -0,0 +1,21 @@
+@use '../variables/colors' as T;
+
+.border-none {
+  border: 0;
+}
+
+.border-error {
+  border: 1.5px solid T.$color-error;
+}
+
+.border-white {
+  border: 2px solid T.$color-white;
+}
+
+.border-secondary {
+  border: 1.5px solid T.$color-secondary;
+}
+
+.border-grey-light {
+  border: 1px solid T.$color-grey-light;
+}