@growth-angels/ds-core 1.6.2 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,
@@ -33,7 +33,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@growth-angels/foundation": "1.1.1"
+    "@growth-angels/foundation": "1.2.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/atoms/Button/Button-mixins.scss

@@ -24,6 +24,7 @@
 }
 
 @mixin button--link {
+  background-color: var(--ga-button-background-link, transparent);
   color: var(--ga-button-color-link, purple);
 }
 

package/src/atoms/Text/Text.scss

@@ -1,6 +1,10 @@
 @use "@growth-angels/foundation/config" as *;
 @use "sass:map";
 
+$weights: map.get($fonts, "weights");
+$sizes: map.get($fonts, "sizes");
+$responsive-sizes: map.get($fonts, "responsive-sizes");
+
 .ga-ds-text {
   font-size: var(--font-size, 1.6rem);
 }
@@ -22,27 +26,42 @@
   text-align: right;
 }
 
-$sizes: map.get($fonts, "sizes");
+@function strip-unit($value) {
+  @return $value / ($value * 0 + 1);
+}
+
+@function clamp-calc($min-size, $max-size) {
+  $min-viewport: 375px;
+  $max-viewport: 1440px;
+
+  $min-value: strip-unit($min-size);
+  $max-value: strip-unit($max-size);
+  $viewport-diff: strip-unit($max-viewport - $min-viewport);
+
+  $slope: ($max-value - $min-value) / $viewport-diff;
+  $intercept: $min-value - ($slope * strip-unit($min-viewport));
+
+  @return clamp(#{$min-size}, #{$intercept}rem + #{$slope * 100}vw, #{$max-size});
+}
 
 @each $size in $sizes {
   .ga-ds-text--size-#{$size} {
-    @if $size == 72 {
-      font-size: calc(11.2rem - clamp(4rem, 2.8732rem + 3.0047vw, calc(#{$size} / 10 * 1rem)));
-    } @else if $size == 56 {
-      font-size: calc(9.6rem - clamp(4rem, 3.4366rem + 1.5023vw, calc(#{$size} / 10 * 1rem)));
-    } @else if $size == 48 {
-      font-size: calc(8.4rem - clamp(3.6rem, 3.1775rem + 1.1268vw, calc(#{$size} / 10 * 1rem)));
-    } @else if $size == 40 {
-      font-size: calc(7.2rem - clamp(3.2rem, 2.9183rem + 0.7512vw, calc(#{$size} / 10 * 1rem)));
-    } @else if $size == 32 {
-      font-size: calc(6rem - clamp(2.8rem, 2.6592rem + 0.3756vw, calc(#{$size} / 10 * 1rem)));
+    @if map.has-key($responsive-sizes, $size) {
+      $config: map.get($responsive-sizes, $size);
+      $min: map.get($config, "min");
+      $max: map.get($config, "max");
+
+      @if $min == $max {
+        font-size: $min;
+      } @else {
+        font-size: clamp-calc($min, $max);
+      }
     } @else {
       font-size: calc(#{$size} / 10 * 1rem);
     }
   }
 }
 
-$weights: map.get($fonts, "weights");
 @each $weight in $weights {
   .ga-ds-text--weight-#{$weight} {
     font-weight: #{$weight};