refactor: Update shared base styles

7 files changed, 167 insertions, 158 deletions

diff --git a/apps/web-shared/src/styles/custom-style/_buttons.scss b/apps/web-shared/src/styles/custom-style/_buttons.scss
index 6d8e867..2145acc 100644
--- a/apps/web-shared/src/styles/custom-style/_buttons.scss
+++ b/apps/web-shared/src/styles/custom-style/_buttons.scss
@@ -7,35 +7,29 @@
 // --------------------------------
 
 :root {
-  --btn-font-size: 1em;
+  --btn-font-size: 1rem;
   --btn-padding-x: var(--space-xs);
   --btn-padding-y: var(--space-xxxs);
-  --btn-radius: var(--radius-sm);
+  --btn-radius: 5px;
 }
 
 .btn {
   background: var(--color-bg-dark);
   color: var(--color-contrast-higher);
   cursor: pointer;
+  font-family: var(--font-primary);
+  font-weight: 400;
   text-decoration: none;
-  line-height: 1.2;
+  line-height: 0.8;
   @include fontSmooth;
-  will-change: transform;
+  outline: none;
 
-  &:focus {
-    box-shadow: 0px 0px 0px 2px alpha(var(--color-contrast-higher), 0.15);
-    outline: none;
+  &:hover {
+    background: var(--color-bg-darker);
   }
-}
-
-.btn--link {
-  @include reset;
-  color: inherit;
-  cursor: pointer;
-  text-decoration: none;
 
-  &:hover {
-    color: var(--color-primary);
+  &:focus {
+    outline: 1px solid var(--color-contrast-lower);
   }
 }
 
@@ -46,36 +40,26 @@
 
   &:hover {
     background: var(--color-primary-light);
+    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-primary-darker), 0.25), 0px 1px 4px alpha(var(--color-primary-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-primary-darker), 0.25);
   }
 }
 
 .btn--subtle {
-  background: var(--color-bg-light);
+  background: var(--color-bg-lighter);
   color: var(--color-contrast-higher);
-  box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), var(--shadow-xs);
 
   &:hover {
-    background: var(--color-bg-lighter);
-    box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), var(--shadow-sm);
-  }
-
-  &:focus {
-    box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), 0px 0px 0px 2px alpha(var(--color-contrast-higher), 0.05);
+    background: var(--color-bg-light);
   }
 }
 
 .btn--accent {
   background: var(--color-accent);
   color: var(--color-white);
-  box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-xs);
 
   &:hover {
     background: var(--color-accent-light);
-    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-sm);
-  }
-
-  &:focus {
-    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 0px 0px 2px alpha(var(--color-accent), 0.2);
+    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-accent-darker), 0.25), 0px 1px 4px alpha(var(--color-accent-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-accent-darker), 0.1);
   }
 }
 
@@ -87,19 +71,19 @@
 
 // size
 .btn--sm {
-  font-size: 0.8em;
+  font-size: 0.8rem;
 }
 
 .btn--md {
-  font-size: 1.2em;
+  font-size: 1.2rem;
 }
 
 .btn--lg {
-  font-size: 1.4em;
+  font-size: 1.4rem;
 }
 
 // --------------------------------
 
 // (END) Global editor code
 
-// --------------------------------
+// --------------------------------
\ No newline at end of file
diff --git a/apps/web-shared/src/styles/custom-style/_colors.scss b/apps/web-shared/src/styles/custom-style/_colors.scss
index 76d3fa6..97b620f 100644
--- a/apps/web-shared/src/styles/custom-style/_colors.scss
+++ b/apps/web-shared/src/styles/custom-style/_colors.scss
@@ -8,33 +8,33 @@
 
 :root, [data-theme="default"] {
   // main
-  @include defineColorHSL(--color-primary-darker, 250, 84%, 38%);
-  @include defineColorHSL(--color-primary-dark, 250, 84%, 46%);
-  @include defineColorHSL(--color-primary, 250, 84%, 54%);
-  @include defineColorHSL(--color-primary-light, 250, 84%, 60%);
-  @include defineColorHSL(--color-primary-lighter, 250, 84%, 67%);
+  @include defineColorHSL(--color-primary-darker, 210, 92%, 32%);
+  @include defineColorHSL(--color-primary-dark, 210, 92%, 38%);
+  @include defineColorHSL(--color-primary, 210, 92%, 44%);
+  @include defineColorHSL(--color-primary-light, 210, 92%, 50%);
+  @include defineColorHSL(--color-primary-lighter, 210, 92%, 56%);
 
-  @include defineColorHSL(--color-accent-darker, 342, 89%, 38%);
-  @include defineColorHSL(--color-accent-dark, 342, 89%, 43%);
-  @include defineColorHSL(--color-accent, 342, 89%, 48%);
-  @include defineColorHSL(--color-accent-light, 342, 89%, 56%);
-  @include defineColorHSL(--color-accent-lighter, 342, 89%, 62%);
+  @include defineColorHSL(--color-accent-darker, 350, 47%, 30%);
+  @include defineColorHSL(--color-accent-dark, 350, 47%, 36%);
+  @include defineColorHSL(--color-accent, 350, 47%, 42%);
+  @include defineColorHSL(--color-accent-light, 350, 47%, 48%);
+  @include defineColorHSL(--color-accent-lighter, 350, 47%, 54%);
 
-  @include defineColorHSL(--color-black, 204, 28%, 7%);
+  @include defineColorHSL(--color-black, 0, 0%, 10%);
   @include defineColorHSL(--color-white, 0, 0%, 100%);
 
   // feedback
-  @include defineColorHSL(--color-warning-darker, 46, 100%, 47%);
-  @include defineColorHSL(--color-warning-dark, 46, 100%, 50%);
-  @include defineColorHSL(--color-warning, 46, 100%, 61%);
-  @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
-  @include defineColorHSL(--color-warning-lighter, 46, 100%, 80%);
+  @include defineColorHSL(--color-warning-darker, 25, 75%, 60%);
+  @include defineColorHSL(--color-warning-dark, 25, 75%, 66%);
+  @include defineColorHSL(--color-warning, 25, 75%, 72%);
+  @include defineColorHSL(--color-warning-light, 25, 75%, 78%);
+  @include defineColorHSL(--color-warning-lighter, 25, 75%, 84%);
 
-  @include defineColorHSL(--color-success-darker, 122, 50%, 47%);
-  @include defineColorHSL(--color-success-dark, 122, 50%, 52%);
-  @include defineColorHSL(--color-success, 122, 50%, 60%);
-  @include defineColorHSL(--color-success-light, 122, 50%, 69%);
-  @include defineColorHSL(--color-success-lighter, 122, 50%, 76%);
+  @include defineColorHSL(--color-success-darker, 143, 45%, 59%);
+  @include defineColorHSL(--color-success-dark, 143, 45%, 65%);
+  @include defineColorHSL(--color-success, 143, 45%, 71%);
+  @include defineColorHSL(--color-success-light, 143, 45%, 77%);
+  @include defineColorHSL(--color-success-lighter, 143, 45%, 83%);
 
   @include defineColorHSL(--color-error-darker, 342, 89%, 38%);
   @include defineColorHSL(--color-error-dark, 342, 89%, 43%);
@@ -43,27 +43,27 @@
   @include defineColorHSL(--color-error-lighter, 342, 89%, 62%);
 
   // background
-  @include defineColorHSL(--color-bg-darker, 210, 4%, 89%);
-  @include defineColorHSL(--color-bg-dark, 180, 3%, 94%);
-  @include defineColorHSL(--color-bg, 210, 17%, 98%);
-  @include defineColorHSL(--color-bg-light, 180, 3%, 100%);
-  @include defineColorHSL(--color-bg-lighter, 210, 4%, 100%);
+  @include defineColorHSL(--color-bg-darker, 240, 2%, 90%);
+  @include defineColorHSL(--color-bg-dark, 240, 3%, 94%);
+  @include defineColorHSL(--color-bg, 0, 0%, 100%);
+  @include defineColorHSL(--color-bg-light, 240, 3%, 100%);
+  @include defineColorHSL(--color-bg-lighter, 240, 2%, 100%);
 
   // color contrasts
-  @include defineColorHSL(--color-contrast-lower, 180, 1%, 84%);
-  @include defineColorHSL(--color-contrast-low, 210, 2%, 64%);
-  @include defineColorHSL(--color-contrast-medium, 204, 2%, 46%);
-  @include defineColorHSL(--color-contrast-high, 210, 7%, 21%);
-  @include defineColorHSL(--color-contrast-higher, 204, 28%, 7%);
+  @include defineColorHSL(--color-contrast-lower, 240, 1%, 85%);
+  @include defineColorHSL(--color-contrast-low, 240, 2%, 66%);
+  @include defineColorHSL(--color-contrast-medium, 230, 2%, 48%);
+  @include defineColorHSL(--color-contrast-high, 223, 6%, 25%);
+  @include defineColorHSL(--color-contrast-higher, 225, 14%, 11%);
 }
 
 [data-theme="dark"] {
   // main
-  @include defineColorHSL(--color-primary-darker, 250, 93%, 57%);
-  @include defineColorHSL(--color-primary-dark, 250, 93%, 61%);
-  @include defineColorHSL(--color-primary, 250, 93%, 65%);
-  @include defineColorHSL(--color-primary-light, 250, 93%, 69%);
-  @include defineColorHSL(--color-primary-lighter, 250, 93%, 72%);
+  @include defineColorHSL(--color-primary-darker, 250, 100%, 60%);
+  @include defineColorHSL(--color-primary-dark, 250, 100%, 64%);
+  @include defineColorHSL(--color-primary, 250, 100%, 69%);
+  @include defineColorHSL(--color-primary-light, 250, 100%, 72%);
+  @include defineColorHSL(--color-primary-lighter, 250, 100%, 76%);
 
   @include defineColorHSL(--color-accent-darker, 342, 92%, 41%);
   @include defineColorHSL(--color-accent-dark, 342, 92%, 47%);
@@ -71,21 +71,21 @@
   @include defineColorHSL(--color-accent-light, 342, 92%, 60%);
   @include defineColorHSL(--color-accent-lighter, 342, 92%, 65%);
 
-  @include defineColorHSL(--color-black, 204, 28%, 7%);
+  @include defineColorHSL(--color-black, 230, 13%, 9%);
   @include defineColorHSL(--color-white, 0, 0%, 100%);
 
   // feedback
-  @include defineColorHSL(--color-warning-darker, 46, 100%, 47%);
-  @include defineColorHSL(--color-warning-dark, 46, 100%, 50%);
-  @include defineColorHSL(--color-warning, 46, 100%, 61%);
-  @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
-  @include defineColorHSL(--color-warning-lighter, 46, 100%, 80%);
+  @include defineColorHSL(--color-warning-darker, 35, 79%, 48%);
+  @include defineColorHSL(--color-warning-dark, 35, 79%, 56%);
+  @include defineColorHSL(--color-warning, 35, 79%, 66%);
+  @include defineColorHSL(--color-warning-light, 35, 79%, 74%);
+  @include defineColorHSL(--color-warning-lighter, 35, 79%, 82%);
 
-  @include defineColorHSL(--color-success-darker, 122, 50%, 47%);
-  @include defineColorHSL(--color-success-dark, 122, 50%, 52%);
-  @include defineColorHSL(--color-success, 122, 50%, 60%);
-  @include defineColorHSL(--color-success-light, 122, 50%, 69%);
-  @include defineColorHSL(--color-success-lighter, 122, 50%, 76%);
+  @include defineColorHSL(--color-success-darker, 170, 78%, 26%);
+  @include defineColorHSL(--color-success-dark, 170, 78%, 31%);
+  @include defineColorHSL(--color-success, 170, 78%, 36%);
+  @include defineColorHSL(--color-success-light, 170, 78%, 42%);
+  @include defineColorHSL(--color-success-lighter, 170, 78%, 47%);
 
   @include defineColorHSL(--color-error-darker, 342, 92%, 41%);
   @include defineColorHSL(--color-error-dark, 342, 92%, 47%);
@@ -94,17 +94,17 @@
   @include defineColorHSL(--color-error-lighter, 342, 92%, 65%);
 
   // background
-  @include defineColorHSL(--color-bg-darker, 204, 15%, 6%);
-  @include defineColorHSL(--color-bg-dark, 203, 18%, 9%);
-  @include defineColorHSL(--color-bg, 203, 24%, 13%);
-  @include defineColorHSL(--color-bg-light, 203, 18%, 17%);
-  @include defineColorHSL(--color-bg-lighter, 204, 15%, 20%);
+  @include defineColorHSL(--color-bg-darker, 232, 7%, 8%);
+  @include defineColorHSL(--color-bg-dark, 233, 8%, 11%);
+  @include defineColorHSL(--color-bg, 232, 11%, 15%);
+  @include defineColorHSL(--color-bg-light, 233, 8%, 19%);
+  @include defineColorHSL(--color-bg-lighter, 232, 7%, 22%);
 
   // color contrasts
-  @include defineColorHSL(--color-contrast-lower, 208, 12%, 24%);
-  @include defineColorHSL(--color-contrast-low, 208, 6%, 40%);
-  @include defineColorHSL(--color-contrast-medium, 213, 5%, 56%);
-  @include defineColorHSL(--color-contrast-high, 223, 8%, 82%);
+  @include defineColorHSL(--color-contrast-lower, 240, 6%, 26%);
+  @include defineColorHSL(--color-contrast-low, 240, 3%, 41%);
+  @include defineColorHSL(--color-contrast-medium, 213, 3%, 57%);
+  @include defineColorHSL(--color-contrast-high, 240, 5%, 82%);
   @include defineColorHSL(--color-contrast-higher, 240, 100%, 99%);
 
   // font rendering
@@ -116,4 +116,4 @@
 
 // (END) Global editor code
 
-// --------------------------------
+// --------------------------------
\ No newline at end of file
diff --git a/apps/web-shared/src/styles/custom-style/_forms.scss b/apps/web-shared/src/styles/custom-style/_forms.scss
index 0048941..871e405 100644
--- a/apps/web-shared/src/styles/custom-style/_forms.scss
+++ b/apps/web-shared/src/styles/custom-style/_forms.scss
@@ -7,50 +7,52 @@
 // --------------------------------
 
 :root {
-  --form-control-font-size: 1em;
+  --form-control-font-size: 1rem;
   --form-control-padding-x: var(--space-xs);
   --form-control-padding-y: var(--space-xxs);
-  --form-control-radius: var(--radius-sm);
+  --form-control-radius: 3px;
 }
 
 .form-control {
   background: var(--color-bg-dark);
-  line-height: 1.2;
-  box-shadow: inset 0 0 0 1px var(--color-contrast-lower);
+  cursor: auto;
+  font-family: var(--font-primary);
+  font-weight: 400;
+  line-height: 1;
+  @include fontSmooth;
+  outline: 1px solid var(--color-contrast-high);
 
   &::placeholder {
-    opacity: 1;
+    opacity: 1;  
     color: var(--color-contrast-low);
   }
 
-  &:focus {
+  &:focus, &:focus-within {
     background: var(--color-bg);
-    box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 1px var(--color-primary);
+    box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-primary), 0px 1px 3px alpha(var(--color-black), 0.2);
     outline: none;
   }
 }
 
 .form-control--disabled, .form-control[disabled], .form-control[readonly] {
-  opacity: 0.5;
+  opacity: 0.3;
   cursor: not-allowed;
 }
 
 .form-control[aria-invalid="true"], .form-control.form-control--error {
-  box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error);
+  outline: 1px solid var(--color-error-dark);
 
-  &:focus {
-    box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error), var(--shadow-sm);
+  &:focus, &:focus-within {
+    box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error), 0px 1px 3px var(--color-error);
   }
 }
 
-.form-legend {
-}
+.form-legend {}
 
-.form-label {
-}
+.form-label {}
 
 // --------------------------------
 
 // (END) Global editor code
 
-// --------------------------------
+// --------------------------------
\ No newline at end of file
diff --git a/apps/web-shared/src/styles/custom-style/_shared-styles.scss b/apps/web-shared/src/styles/custom-style/_shared-styles.scss
index c685b46..313fc69 100644
--- a/apps/web-shared/src/styles/custom-style/_shared-styles.scss
+++ b/apps/web-shared/src/styles/custom-style/_shared-styles.scss
@@ -1,16 +1,35 @@
 @use '../base' as *;
 
 :root {
-  --radius: 0.25em; // border radius base size
-  --radius-sm: calc(var(--radius) / 2);
-  --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) * 2);
-  --shadow-xs: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  --shadow-sm: 0;
-  --shadow-md: 0;
-  --shadow-lg: 0;
-  --shadow-xl: 0;
+  // radius
+  --radius: 0.375em; // border radius base size
+  // 👇 uncomment to modify default radius values
+  // --radius-sm: calc(var(--radius)/2);
+  // --radius-md: var(--radius);
+  // --radius-lg: calc(var(--radius)*2);
+
+  // box shadow - 👇 uncomment to modify default shadow values
+  // --shadow-xs:  0 0.1px 0.3px rgba(0, 0, 0, 0.06),
+  //               0 1px 2px rgba(0, 0, 0, 0.12);
+  // --shadow-sm:  0 0.3px 0.4px rgba(0, 0, 0, 0.025),
+  //               0 0.9px 1.5px rgba(0, 0, 0, 0.05), 
+  //               0 3.5px 6px rgba(0, 0, 0, 0.1);
+  // --shadow-md:  0 0.9px 1.5px rgba(0, 0, 0, 0.03), 
+  //               0 3.1px 5.5px rgba(0, 0, 0, 0.08), 
+  //               0 14px 25px rgba(0, 0, 0, 0.12);
+  // --shadow-lg:  0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 
+  //               0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 
+  //               0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 
+  //               0 30px 42px -1px rgba(0, 0, 0, 0.15);
+  // --shadow-xl:  0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012), 
+  //               0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035), 
+  //               0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07), 
+  //               0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117), 
+  //               0 46px 60px -6px rgba(0, 0, 0, 0.2);
+  // --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
+  // --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075);
 }
+
 // --------------------------------
 
 // (START) Global editor code https://codyhouse.co/ds/globals/shared-styles
@@ -25,13 +44,6 @@
   }
 }
 
-.hover\:scale {
-
-  &:hover {
-    transform: scale(1.1);
-  }
-}
-
 .hover\:elevate {
   box-shadow: var(--shadow-sm);
 
@@ -55,4 +67,4 @@
 
 // (END) Global editor code
 
-// --------------------------------
+// --------------------------------
\ No newline at end of file
diff --git a/apps/web-shared/src/styles/custom-style/_spacing.scss b/apps/web-shared/src/styles/custom-style/_spacing.scss
index 56cd451..d78d897 100644
--- a/apps/web-shared/src/styles/custom-style/_spacing.scss
+++ b/apps/web-shared/src/styles/custom-style/_spacing.scss
@@ -11,20 +11,20 @@
 //   --space-unit:  1rem;
 // }
 
- :root, * {
-   --space-xxxxs: calc(0.125 * var(--space-unit)); 
-   --space-xxxs:  calc(0.25 * var(--space-unit));
-   --space-xxs:   calc(0.375 * var(--space-unit));
-   --space-xs:    calc(0.5 * var(--space-unit));
-   --space-sm:    calc(0.75 * var(--space-unit));
-   --space-md:    calc(1.25 * var(--space-unit));
-   --space-lg:    calc(2 * var(--space-unit));
-   --space-xl:    calc(3.25 * var(--space-unit));
-   --space-xxl:   calc(5.25 * var(--space-unit));
-   --space-xxxl:  calc(8.5 * var(--space-unit));
-   --space-xxxxl: calc(13.75 * var(--space-unit));
-   --component-padding: var(--space-sm);
- }
+// :root, * {
+//   --space-xxxxs: calc(0.125 * var(--space-unit)); 
+//   --space-xxxs:  calc(0.25 * var(--space-unit));
+//   --space-xxs:   calc(0.375 * var(--space-unit));
+//   --space-xs:    calc(0.5 * var(--space-unit));
+//   --space-sm:    calc(0.75 * var(--space-unit));
+//   --space-md:    calc(1.25 * var(--space-unit));
+//   --space-lg:    calc(2 * var(--space-unit));
+//   --space-xl:    calc(3.25 * var(--space-unit));
+//   --space-xxl:   calc(5.25 * var(--space-unit));
+//   --space-xxxl:  calc(8.5 * var(--space-unit));
+//   --space-xxxxl: calc(13.75 * var(--space-unit));
+//   --component-padding: var(--space-md);
+// }
 
 @include breakpoint(md) {
   :root, * {
@@ -46,4 +46,4 @@
 
 // (END) Global editor code
 
-// --------------------------------
+// --------------------------------
\ No newline at end of file
diff --git a/apps/web-shared/src/styles/custom-style/_typography.scss b/apps/web-shared/src/styles/custom-style/_typography.scss
index d0bb431..3bf56a6 100644
--- a/apps/web-shared/src/styles/custom-style/_typography.scss
+++ b/apps/web-shared/src/styles/custom-style/_typography.scss
@@ -8,25 +8,25 @@
 
 :root {
   // font family
-  //--font-primary: Inter, system-ui, sans-serif;
-  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
   // font size
-  --text-base-size: 1.25rem; // body font-size
-  --text-scale-ratio: 1.1; // multiplier used to generate the type scale values 👇
+  --text-base-size: 1rem; // body font-size
+  --text-scale-ratio: 1.2; // multiplier used to generate the type scale values 👇
   
   // line-height
-  --body-line-height: 1.2;
-  --heading-line-height: 1.34;
+  --body-line-height: 1.4;
+  --heading-line-height: 1;
   
   // capital letters - used in combo with the lhCrop mixin
   --font-primary-capital-letter: 1;
 
   // unit - don't modify unless you want to change the typography unit (e.g., from Rem to Em units)
-  --text-unit: var(--text-base-size); // if Em units → --text-unit: var(--text-base-size);
+  --text-unit: var(--text-base-size); // if Em units → --text-unit: 1em;
 }
 
 :root, * {
+  // type scale
   --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio));
   --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
   --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
@@ -37,6 +37,14 @@
   --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio));
 }
 
+
+@include breakpoint(md) {
+  :root {
+    --text-base-size: 1.25rem;
+    --text-scale-ratio: 1.25;
+  }
+}
+
 body {
   font-family: var(--font-primary);
 }
@@ -64,10 +72,13 @@ mark {
 }
 
 .text-component {
-  --text-unit: 1em;
-  --space-unit: 1em;
   --line-height-multiplier: 1;
   --text-space-y-multiplier: 1;
+  
+  > * { // use Em units
+    --text-unit: 1em;
+    --space-unit: 1em;
+  }
 
   blockquote {
     padding-left: 1em;
@@ -89,4 +100,4 @@ mark {
 .article { // e.g., blog posts
   --body-line-height: 1.58; // set body line-height
   --text-space-y-multiplier: 1.2; // control vertical spacing
-}
+}
\ No newline at end of file
diff --git a/apps/web-shared/src/styles/custom-style/_util.scss b/apps/web-shared/src/styles/custom-style/_util.scss
index 5677630..5d976a4 100644
--- a/apps/web-shared/src/styles/custom-style/_util.scss
+++ b/apps/web-shared/src/styles/custom-style/_util.scss
@@ -9,15 +9,15 @@
 .border-none {
   border: none !important;
 }
+// }
 
-@each $breakpoint, $value in $breakpoints {
-  @include breakpoint(#{$breakpoint}) {
-    .border-none\@#{$breakpoint} {
-      border: none !important;
-    }
-  }
-}
-
+// 👇 (optional) create responsive variations - edit only [my-util-class, property, value]
+// @each $breakpoint, $value in $breakpoints { 
+//   @include breakpoint(#{$breakpoint}) {
+//     .my-util-class\@#{$breakpoint} {
+//       property: value;
+//     }
+//   }
 .left-unset {
   left: unset !important;
 }
@@ -38,4 +38,4 @@
   &:active {
     color: var(--color-white) !important;
   }
-}
+}
\ No newline at end of file