@growth-angels/ds-core 1.6.3 → 1.6.5

package/dist/index.css

@@ -0,0 +1 @@
+.ga-ds-button:not(div){padding:var(--ga-button-padding);border:none;font-size:var(--ga-font-sizes-base);font-weight:var(--ga-font-weight-base);font-family:var(--ga-font-family-button);border-radius:var(--ga-button-radius, 0);cursor:pointer}.ga-ds-button--primary:not(div){background-color:var(--ga-button-background-primary, #eee);color:var(--ga-button-color-primary, #000)}.ga-ds-button--secondary:not(div){background-color:var(--ga-button-background-secondary, #424242);color:var(--ga-button-color-secondary, #fff)}.ga-ds-button--link:not(div){background-color:var(--ga-button-background-link, transparent);color:var(--ga-button-color-link, purple)}.ga-ds-button--icon:not(div){--ga-button-padding: 0.8rem 1.2rem;display:flex;justify-content:center;align-items:center}.ga-ds-button--light:not(div){background-color:var(--ga-button-background-light, #fbfbff);color:var(--ga-button-color-light, #070921)}.ga-ds-text{font-size:var(--font-size, 1.6rem)}.ga-ds-text--heading{font-weight:var(--ga-font-weight-heading);font-family:var(--ga-font-family-heading)}.ga-ds-text--paragraph{font-weight:var(--ga-font-weight-body)}.ga-ds-text--center{text-align:center}.ga-ds-text--right{text-align:right}.ga-ds-text--size-88{font-size:clamp(4.8rem,3.3915492958rem + 0.3755868545vw,8.8rem)}.ga-ds-text--size-72{font-size:clamp(4rem,2.8732394366rem + 0.3004694836vw,7.2rem)}.ga-ds-text--size-64{font-size:clamp(4rem,3.1549295775rem + 0.2253521127vw,6.4rem)}.ga-ds-text--size-56{font-size:clamp(4rem,3.4366197183rem + 0.1502347418vw,5.6rem)}.ga-ds-text--size-48{font-size:clamp(3.6rem,3.1774647887rem + 0.1126760563vw,4.8rem)}.ga-ds-text--size-40{font-size:clamp(3.2rem,2.9183098592rem + 0.0751173709vw,4rem)}.ga-ds-text--size-32{font-size:clamp(2.8rem,2.6591549296rem + 0.0375586854vw,3.2rem)}.ga-ds-text--size-24{font-size:calc(24/10*1rem)}.ga-ds-text--size-20{font-size:calc(20/10*1rem)}.ga-ds-text--size-18{font-size:calc(18/10*1rem)}.ga-ds-text--size-16{font-size:calc(16/10*1rem)}.ga-ds-text--size-14{font-size:calc(14/10*1rem)}.ga-ds-text--size-12{font-size:calc(12/10*1rem)}.ga-ds-text--weight-400{font-weight:400}.ga-ds-text--weight-500{font-weight:500}.ga-ds-text--weight-600{font-weight:600}.ga-ds-text--weight-700{font-weight:700}.ga-ds-icon{width:var(--icon-size, 2.4rem);height:var(--icon-size, 2.4rem)}.ga-ds-icon--sm{width:var(--icon-size-sm, 1.8rem);height:var(--icon-size-sm, 1.8rem)}.ga-ds-icon--md{width:var(--icon-size-md, 3rem);height:var(--icon-size-md, 3rem)}.ga-ds-icon--lg{width:var(--icon-size-lg, 4rem);height:var(--icon-size-lg, 4rem)}.ga-ds-btn-group{display:flex;gap:.8rem;justify-content:var(--alignment, flex-start)}.ga-ds-spoiler{overflow:hidden}.ga-ds-spoiler__summary{cursor:pointer;font-weight:var(--ga-ds-spoiler--summary-weight, 500);padding:var(--ga-ds-spoiler--summary-padding, 0rem);font-size:var(--ga-ds-spoiler--summary-font-size, 1.6rem);user-select:none;display:flex;align-items:center;justify-content:space-between;outline:none}.ga-ds-spoiler__content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease;overflow:hidden}.ga-ds-spoiler__indicator{transition:transform .3s ease;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;width:var(--indicator-size, 2.8rem);height:var(--indicator-size, 2.8rem);transform:rotate(-90deg);transform-origin:center center}.ga-ds-spoiler__body{overflow:hidden}.ga-ds-spoiler.is-open .ga-ds-spoiler__indicator{transform:rotate(90deg)}.ga-ds-spoiler.is-open .ga-ds-spoiler__content{grid-template-rows:1fr}.ga-ds-card{--card-spacing: var(--ga-card-spacing);width:100%;height:auto;display:flex;flex-direction:column;gap:var(--ga-card-gap-global)}.ga-ds-card__header{overflow:hidden}.ga-ds-card__content{gap:var(--ga-card-gap-content);display:flex;flex-direction:column}.ga-ds-card__title,.ga-ds-card__content,.ga-ds-card__footer{padding-left:var(--card-spacing);padding-right:var(--card-spacing)}.ga-ds-card__footer{padding-bottom:var(--card-spacing)}.ga-ds-card:not(.ga-ds-card--editorial){border-radius:var(--ga-card-radius, 0);overflow:hidden}.ga-ds-card:not(.ga-ds-card--editorial):not(:has(.ga-ds-card__footer)){padding-bottom:var(--card-spacing)}.ga-ds-card:not(.ga-ds-card--editorial):not(:has(.ga-ds-card__header)):not(.ga-ds-card--background-image){padding-top:var(--card-spacing)}.ga-ds-card:not(.ga-ds-card--editorial).ga-ds-card--primary{background-color:var(--ga-card-background-primary)}.ga-ds-card--default .ga-ds-card__header{height:var(--card-header-height, 24rem)}.ga-ds-card--default .ga-ds-card__header figure{width:100%;height:100%}.ga-ds-card--default .ga-ds-card__header img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.ga-ds-card--default .ga-ds-card--primary{background-color:var(--ga-card-background-primary);color:var(--ga-card-background-primary-reverted)}.ga-ds-card--default .ga-ds-card--secondary{background-color:var(--ga-card-background-secondary);color:var(--ga-card-background-secondary-reverted)}.ga-ds-card--editorial{--ga-card-spacing: 0}.ga-ds-card--icon{border-radius:var(--ga-card-radius, 0);overflow:hidden}.ga-ds-card--icon .ga-ds-card__header{padding-top:var(--card-spacing);padding-left:var(--card-spacing);padding-right:var(--card-spacing)}.ga-ds-card--background-image{position:relative;padding-top:var(--card-background-image-height, 17.3rem);z-index:1}.ga-ds-card--background-image>img{position:absolute;top:0;left:0;width:100%;z-index:-1;height:auto}.ga-ds-carousel{overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:2rem}.ga-ds-carousel__track{--ga-ds-slides-per-view: 1;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--ga-ds-space-between, 1rem)*(var(--ga-ds-slides-per-view, 3) - 1))/var(--ga-ds-slides-per-view, 3));gap:var(--ga-ds-space-between, 1rem);scroll-snap-align:start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;box-sizing:border-box;width:100%}.ga-ds-carousel__track::-webkit-scrollbar{display:none}@media screen and (min-width: 576px){.ga-ds-carousel__track{--ga-ds-slides-per-view: var(--ga-ds-slides-per-view-sm)}}@media screen and (min-width: 768px){.ga-ds-carousel__track{--ga-ds-slides-per-view: var(--ga-ds-slides-per-view-md)}}@media screen and (min-width: 992px){.ga-ds-carousel__track{--ga-ds-slides-per-view: var(--ga-ds-slides-per-view-lg)}}@media screen and (min-width: 1200px){.ga-ds-carousel__track{--ga-ds-slides-per-view: var(--ga-ds-slides-per-view-xl)}}.ga-ds-carousel__slide{flex:0 0 auto;width:100%;scroll-snap-align:start}.ga-ds-carousel__arrows{display:flex}.ga-ds-carousel__arrows.left{justify-content:flex-start}.ga-ds-carousel__arrows.right{justify-content:flex-end}.ga-ds-carousel__arrows.center{justify-content:center}.ga-ds-carousel__navigation:has(.ga-ds-carousel__arrows):has(.ga-ds-carousel__dots){display:flex;justify-content:space-between;align-items:center}.ga-ds-carousel__dots{display:flex;gap:var(--ga-ds-gap, 1rem)}.ga-ds-carousel__dots .ga-ds-carousel__dot{display:block;width:1rem;height:1rem;border-radius:50%;background-color:#e2e2e2}.ga-ds-carousel__dots .ga-ds-carousel__dot--active{background-color:#424242}.ga-ds-spoiler-list{display:flex;flex-direction:column;gap:var(--list--gap, 1.6rem)}.ga-ds-tabs__list{display:flex}.ga-ds-tabs__list .ga-ds-tabs__tab{background:none;border:none;font-size:inherit;padding:inherit;cursor:pointer}.ga-ds-tabs__panel{height:0;visibility:hidden;overflow:hidden;clip-path:inset(100% 0 0 0)}.ga-ds-tabs__panel--active{height:auto;visibility:visible;overflow:visible;clip-path:none}.ga-ds-container{display:flex;flex-direction:column;align-items:stretch}.ga-ds-container:not(.ga-ds-container--full){padding-left:var(--ga-container-safe-zone, 2.4rem);padding-right:var(--ga-container-safe-zone, 2.4rem)}@media screen and (min-width: 1200px){.ga-ds-container.ga-ds-container-stretch--right{padding-right:0}}@media screen and (min-width: 1200px){.ga-ds-container.ga-ds-container-stretch--left{padding-left:0}}.ga-ds-container:has(.ga-ds-grid){overflow:hidden}@media screen and (min-width: 768px){.ga-ds-container--small:not(.ga-ds-container-stretch--right){padding-right:calc((100% - 768px)/2)}.ga-ds-container--small:not(.ga-ds-container-stretch--left){padding-left:calc((100% - 768px)/2)}}@media screen and (min-width: 992px){.ga-ds-container--medium:not(.ga-ds-container-stretch--right){padding-right:calc((100% - 1024px)/2)}.ga-ds-container--medium:not(.ga-ds-container-stretch--left){padding-left:calc((100% - 1024px)/2)}}@media screen and (min-width: 1200px){.ga-ds-container--large:not(.ga-ds-container-stretch--right){padding-right:calc((100% - 1400px)/2)}.ga-ds-container--large:not(.ga-ds-container-stretch--left){padding-left:calc((100% - 1400px)/2)}}.ga-ds-grid-item{--flex-size: var(--ga-ds-grid-item-size-xs);flex:0 0 calc(100%*var(--flex-size)/12);padding-left:2rem;padding-right:2rem;margin-bottom:4rem}@media screen and (min-width: 768px){.ga-ds-grid-item{--flex-size: var(--ga-ds-grid-item-size-sm)}}@media screen and (min-width: 992px){.ga-ds-grid-item{--flex-size: var(--ga-ds-grid-item-size-md)}}@media screen and (min-width: 1200px){.ga-ds-grid-item{--flex-size: var(--ga-ds-grid-item-size-lg)}}.ga-ds-grid-item>figure{width:100%}.ga-ds-grid-item>figure img{width:100%;height:auto}.ga-ds-grid{display:flex;margin-left:-2rem;margin-right:-2rem;margin-bottom:-4rem;flex-wrap:wrap}.ga-ds-flex-col{display:flex;flex-direction:column;gap:var(--ga-flex-col-gap, 0)}.ga-ds-flex-block{display:flex;gap:var(--ga-flex-block-gap, 0)}.ga-ds-util-padding--xsmall{padding-top:var(--ga-spacings-padding-xsmall);padding-bottom:var(--ga-spacings-padding-xsmall)}.ga-ds-util-padding--small{padding-top:var(--ga-spacings-padding-small);padding-bottom:var(--ga-spacings-padding-small)}.ga-ds-util-padding--medium{padding-top:var(--ga-spacings-padding-medium);padding-bottom:var(--ga-spacings-padding-medium)}.ga-ds-util-padding--large{padding-top:var(--ga-spacings-padding-large);padding-bottom:var(--ga-spacings-padding-large)}.ga-ds-util-padding--xlarge{padding-top:var(--ga-spacings-padding-xlarge);padding-bottom:var(--ga-spacings-padding-xlarge)}.ga-ds-util-margin--small{margin-top:var(--ga-spacings-margin-small);margin-bottom:var(--ga-spacings-margin-small)}.ga-ds-util-margin--medium{margin-top:var(--ga-spacings-margin-medium);margin-bottom:var(--ga-spacings-margin-medium)}.ga-ds-util-margin--large{margin-top:var(--ga-spacings-margin-large);margin-bottom:var(--ga-spacings-margin-large)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,
@@ -27,13 +27,13 @@
   "scripts": {
     "clean": "rm -rf dist",
     "dev": "concurrently \"tsc --watch --preserveWatchOutput\" \"storybook dev -p 6006\"",
-    "build": "tsc",
+    "build": "tsc && sass --load-path=node_modules src/index.scss dist/index.css --no-source-map --style=compressed",
     "prepublishOnly": "pnpm build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@growth-angels/foundation": "1.2.0"
+    "@growth-angels/foundation": "1.2.2"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/atoms/Text/Text.scss

@@ -1,5 +1,6 @@
 @use "@growth-angels/foundation/config" as *;
 @use "sass:map";
+@use "sass:math";
 
 $weights: map.get($fonts, "weights");
 $sizes: map.get($fonts, "sizes");
@@ -27,27 +28,28 @@ $responsive-sizes: map.get($fonts, "responsive-sizes");
 }
 
 @function strip-unit($value) {
-  @return $value / ($value * 0 + 1);
+  @return math.div($value, ($value * 0 + 1));
 }
 
 @function clamp-calc($min-size, $max-size) {
-  $min-viewport: 375px;
-  $max-viewport: 1440px;
+  $min-viewport: 375;
+  $max-viewport: 1440;
 
   $min-value: strip-unit($min-size);
   $max-value: strip-unit($max-size);
-  $viewport-diff: strip-unit($max-viewport - $min-viewport);
+  $viewport-diff: $max-viewport - $min-viewport;
 
-  $slope: ($max-value - $min-value) / $viewport-diff;
-  $intercept: $min-value - ($slope * strip-unit($min-viewport));
+  $slope: math.div($max-value - $min-value, $viewport-diff);
+  $intercept: $min-value - ($slope * $min-viewport);
 
   @return clamp(#{$min-size}, #{$intercept}rem + #{$slope * 100}vw, #{$max-size});
 }
 
 @each $size in $sizes {
   .ga-ds-text--size-#{$size} {
-    @if map.has-key($responsive-sizes, $size) {
-      $config: map.get($responsive-sizes, $size);
+    $config: map.get($responsive-sizes, $size);
+
+    @if $config {
       $min: map.get($config, "min");
       $max: map.get($config, "max");