@growth-angels/ds-core 1.6.4 → 1.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css ADDED
@@ -0,0 +1 @@
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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@growth-angels/ds-core",
3
- "version": "1.6.4",
3
+ "version": "1.6.6",
4
4
  "description": "Design system by Growth Angels",
5
5
  "license": "MIT",
6
6
  "private": false,
@@ -27,13 +27,13 @@
27
27
  "scripts": {
28
28
  "clean": "rm -rf dist",
29
29
  "dev": "concurrently \"tsc --watch --preserveWatchOutput\" \"storybook dev -p 6006\"",
30
- "build": "tsc",
30
+ "build": "tsc && sass --load-path=node_modules src/index.scss dist/index.css --no-source-map --style=compressed",
31
31
  "prepublishOnly": "pnpm build",
32
32
  "storybook": "storybook dev -p 6006",
33
33
  "build-storybook": "storybook build"
34
34
  },
35
35
  "dependencies": {
36
- "@growth-angels/foundation": "1.2.1"
36
+ "@growth-angels/foundation": "1.2.3"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "react": ">=18"
@@ -39,10 +39,11 @@ $responsive-sizes: map.get($fonts, "responsive-sizes");
39
39
  $max-value: strip-unit($max-size);
40
40
  $viewport-diff: $max-viewport - $min-viewport;
41
41
 
42
- $slope: math.div($max-value - $min-value, $viewport-diff);
43
- $intercept: $min-value - ($slope * $min-viewport);
42
+ // Calculate slope per viewport unit (in vw)
43
+ $slope: math.div(($max-value - $min-value) * 100, $viewport-diff);
44
+ $intercept: $min-value - math.div($slope * $min-viewport, 100);
44
45
 
45
- @return clamp(#{$min-size}, #{$intercept}rem + #{$slope * 100}vw, #{$max-size});
46
+ @return clamp(#{$min-size}, #{$intercept}rem + #{$slope}vw, #{$max-size});
46
47
  }
47
48
 
48
49
  @each $size in $sizes {