@itcase/ui 1.2.18 → 1.2.20

package/dist/css/mixins/mixin_typography.css

@@ -1,153 +1,174 @@
-@define-mixin h1-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-h1-min), var(--typography-h1-max), $minLetterSpacing,
-    var(--typography-h1-min-line-height), var(--typography-h1-max-line-height), $maxLetterSpacing,
-    var(--typography-h1-font);
+@define-mixin h1 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h1-min, 32px), var(--typography-h1-max, 38px),
+    $minLetterSpacing, var(--typography-h1-min-line-height, 64px),
+    var(--typography-h1-max-line-height, 80px), $maxLetterSpacing,
+    var(--typography-h1-font, system-ui);
 }
 
-@define-mixin h2-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-h2-min), var(--typography-h2-max), $minLetterSpacing,
-    var(--typography-h2-min-line-height), var(--typography-h2-max-line-height), $maxLetterSpacing,
-    var(--typography-h2-font);
+@define-mixin h2 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h2-min, 26px), var(--typography-h2-max, 32px),
+    $minLetterSpacing, var(--typography-h2-min-line-height, 46px),
+    var(--typography-h2-max-line-height, 58px), $maxLetterSpacing,
+    var(--typography-h2-font, system-ui);
 }
 
-@define-mixin h3-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-h3-min), var(--typography-h3-max), $minLetterSpacing,
-    var(--typography-h3-min-line-height), var(--typography-h3-max-line-height), $maxLetterSpacing,
-    var(--typography-h3-font);
+@define-mixin h3 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h3-min, 18px), var(--typography-h3-max, 24px),
+    $minLetterSpacing, var(--typography-h3-min-line-height, 32px),
+    var(--typography-h3-max-line-height, 40px), $maxLetterSpacing,
+    var(--typography-h3-font, system-ui);
 }
 
-@define-mixin h4-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-h4-min), var(--typography-h4-max), $minLetterSpacing,
-    var(--typography-h4-min-line-height), var(--typography-h4-max-line-height), $maxLetterSpacing,
-    var(--typography-h4-font);
+@define-mixin h4 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h4-min, 16px), var(--typography-h4-max, 18px),
+    $minLetterSpacing, var(--typography-h4-min-line-height, 24px),
+    var(--typography-h4-max-line-height, 30px), $maxLetterSpacing,
+    var(--typography-h4-font, system-ui);
 }
 
-@define-mixin h5-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-h5-min), var(--typography-h5-max), $minLetterSpacing,
-    var(--typography-h5-min-line-height), var(--typography-h5-max-line-height), $maxLetterSpacing,
-    var(--typography-h5-font);
+@define-mixin h5 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h5-min, 14px), var(--typography-h5-max, 16px),
+    $minLetterSpacing, var(--typography-h5-min-line-height, 18px),
+    var(--typography-h5-max-line-height, 26px), $maxLetterSpacing,
+    var(--typography-h5-font, system-ui);
 }
 
-@define-mixin h6-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-h6-min), var(--typography-h6-max), $minLetterSpacing,
-    var(--typography-h6-min-line-height), var(--typography-h6-max-line-height), $maxLetterSpacing,
-    var(--typography-h6-font);
+@define-mixin h6 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h6-min, 12px), var(--typography-h6-max, 18px),
+    $minLetterSpacing, var(--typography-h6-min-line-height, 16px),
+    var(--typography-h6-max-line-height, 24px), $maxLetterSpacing,
+    var(--typography-h6-font, system-ui);
 }
 
-@define-mixin p-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-p-min), var(--typography-p-max), $minLetterSpacing,
-    var(--typography-p-min-line-height), var(--typography-p-max-line-height), $maxLetterSpacing,
-    var(--typography-p-font);
+@define-mixin p $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-p-min, 16px), var(--typography-p-max, 24px),
+    $minLetterSpacing, var(--typography-p-min-line-height, 24px),
+    var(--typography-p-max-line-height, 36px), $maxLetterSpacing,
+    var(--typography-p-font, system-ui);
 }
 
-@define-mixin text-xxl-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-xxl-min), var(--typography-text-xxl-max),
-    $minLetterSpacing, var(--typography-text-xxl-min-line-height),
-    var(--typography-text-xxl-max-line-height), $maxLetterSpacing, var(--typography-text-xxl-font);
+@define-mixin text-xxl $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xxl-min, 24px), var(--typography-text-xxl-max, 28px),
+    $minLetterSpacing, var(--typography-text-xxl-min-line-height, 24px),
+    var(--typography-text-xxl-max-line-height, 28px), $maxLetterSpacing,
+    var(--typography-text-xxl-font, system-ui);
 }
 
-@define-mixin text-xl-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-xl-min), var(--typography-text-xl-max),
-    $minLetterSpacing, var(--typography-text-xl-min-line-height),
-    var(--typography-text-xl-max-line-height), $maxLetterSpacing, var(--typography-text-xl-font);
+@define-mixin text-xl $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xl-min, 20px), var(--typography-text-xl-max, 24px),
+    $minLetterSpacing, var(--typography-text-xl-min-line-height, 20px),
+    var(--typography-text-xl-max-line-height, 24px), $maxLetterSpacing,
+    var(--typography-text-xl-font, system-ui);
 }
 
-@define-mixin text-l-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-l-min), var(--typography-text-l-max), $minLetterSpacing,
-    var(--typography-text-l-min-line-height), var(--typography-text-l-max-line-height),
-    $maxLetterSpacing, var(--typography-text-l-font);
+@define-mixin text-l $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-l-min, 18px), var(--typography-text-l-max, 24px),
+    $minLetterSpacing, var(--typography-text-l-min-line-height, 18px),
+    var(--typography-text-l-max-line-height, 24px), $maxLetterSpacing,
+    var(--typography-text-l-font, system-ui);
 }
 
-@define-mixin text-m-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-m-min), var(--typography-text-m-max), $minLetterSpacing,
-    var(--typography-text-m-min-line-height), var(--typography-text-m-max-line-height),
-    $maxLetterSpacing, var(--typography-text-m-font);
+@define-mixin text-m $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-m-min, 16px), var(--typography-text-m-max, 18px),
+    $minLetterSpacing, var(--typography-text-m-min-line-height, 16px),
+    var(--typography-text-m-max-line-height, 20px), $maxLetterSpacing,
+    var(--typography-text-m-font, system-ui);
 }
 
-@define-mixin text-s-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-s-min), var(--typography-text-s-max), $minLetterSpacing,
-    var(--typography-text-s-min-line-height), var(--typography-text-s-max-line-height),
-    $maxLetterSpacing, var(--typography-text-s-font);
+@define-mixin text-s $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-s-min, 14px), var(--typography-text-s-max, 18px),
+    $minLetterSpacing, var(--typography-text-s-min-line-height, 14px),
+    var(--typography-text-s-max-line-height, 18px), $maxLetterSpacing,
+    var(--typography-text-s-font, system-ui);
 }
 
-@define-mixin text-xs-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-xs-min), var(--typography-text-xs-max),
-    $minLetterSpacing, var(--typography-text-xs-min-line-height),
-    var(--typography-text-xs-max-line-height), $maxLetterSpacing, var(--typography-text-xs-font);
+@define-mixin text-xs $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xs-min, 12px), var(--typography-text-xs-max, 16px),
+    $minLetterSpacing, var(--typography-text-xs-min-line-height, 12px),
+    var(--typography-text-xs-max-line-height, 16px), $maxLetterSpacing,
+    var(--typography-text-xs-font, system-ui);
 }
 
-@define-mixin text-xxs-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
-  @mixin font $weight, var(--typography-text-xxs-min), var(--typography-text-xxs-max),
-    $minLetterSpacing, var(--typography-text-xxs-min-line-height),
-    var(--typography-text-xxs-max-line-height), $maxLetterSpacing, var(--typography-text-xxs-font);
+@define-mixin text-xxs $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xxs-min, 10px), var(--typography-text-xxs-max, 14px),
+    $minLetterSpacing, var(--typography-text-xxs-min-line-height, 10px),
+    var(--typography-text-xxs-max-line-height, 14px), $maxLetterSpacing,
+    var(--typography-text-xxs-font, system-ui);
 }
 
 @define-mixin email-h1 $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-h1), $letterSpacing,
-    var(--typography-email-h1-line-height), var(--typography-email-h1-font);
+  @mixin font-fixed $weight, var(--typography-email-h1, 32px),
+    var(--typography-email-h1-line-height, 38px), var(--font-email);
 }
 
 @define-mixin email-h2 $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-h2), $letterSpacing,
-    var(--typography-email-h2-line-height), var(--typography-email-h2-font);
+  @mixin font-fixed $weight, var(--typography-email-h2, 26px),
+    var(--typography-email-h2-line-height, 32px), var(--font-email);
 }
 
 @define-mixin email-h3 $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-h3), $letterSpacing,
-    var(--typography-email-h3-line-height), var(--typography-email-h3-font);
+  @mixin font-fixed $weight, var(--typography-email-h3, 18px),
+    var(--typography-email-h3-line-height, 24px), var(--font-email);
 }
 
 @define-mixin email-h4 $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-h4), $letterSpacing,
-    var(--typography-email-h4-line-height), var(--typography-email-h4-font);
+  @mixin font-fixed $weight, var(--typography-email-h4, 24px),
+    var(--typography-email-h4-line-height, 30px), var(--font-email);
 }
 
 @define-mixin email-h5 $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-h5), $letterSpacing,
-    var(--typography-email-h5-line-height), var(--typography-email-h5-font);
+  @mixin font-fixed $weight, var(--typography-email-h5, 18px),
+    var(--typography-email-h5-line-height, 24px), var(--font-email);
 }
 
 @define-mixin email-h6 $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-h6), $letterSpacing,
-    var(--typography-email-h6-line-height), var(--typography-email-h6-font);
+  @mixin font-fixed $weight, var(--typography-email-h6, 12px),
+    var(--typography-email-h6-line-height, 18px), var(--font-email);
 }
 
 @define-mixin email-p $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-p), $letterSpacing,
-    var(--typography-email-p-line-height), var(--typography-email-p-font);
+  @mixin font-fixed $weight, var(--typography-email-p, 16px),
+    var(--typography-email-p-line-height, 24px), var(--font-email);
 }
 
 @define-mixin email-text-xxl $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-text-xxl), $letterSpacing,
-    var(--typography-email-text-xxl-line-height), var(--typography-email-text-xxl-font);
+  @mixin font-fixed $weight, var(--typography-email-text-xxl, 24px),
+    var(--typography-email-text-xxl-line-height, 28px), var(--font-email);
 }
 
 @define-mixin email-text-xl $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-text-xl), $letterSpacing,
-    var(--typography-email-text-xl-line-height), var(--typography-email-text-xl-font);
+  @mixin font-fixed $weight, var(--typography-email-text-xl, 20px),
+    var(--typography-email-text-xl-line-height, 24px), var(--font-email);
 }
 
 @define-mixin email-text-l $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-text-l), $letterSpacing,
-    var(--typography-email-text-l-line-height), var(--typography-email-text-l-font);
+  @mixin font-fixed $weight, var(--typography-email-text-l, 18px),
+    var(--typography-email-text-l-line-height, 24px), var(--font-email);
 }
 
 @define-mixin email-text-m $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-text-m), $letterSpacing,
-    var(--typography-email-text-m-line-height), var(--typography-email-text-m-font);
+  @mixin font-fixed $weight, var(--typography-email-text-m, 16px),
+    var(--typography-email-text-m-line-height, 18px), var(--font-email);
 }
 
 @define-mixin email-text-s $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-text-s), $letterSpacing,
-    var(--typography-email-text-s-line-height), var(--typography-email-text-s-font);
+  @mixin font-fixed $weight, var(--typography-email-text-s, 14px),
+    var(--typography-email-text-s-line-height, 18px), var(--font-email);
 }
 
 @define-mixin email-text-xs $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typographyemail-text-xs), $letterSpacing,
-    var(--typographyemail-text-xs-line-height), var(--typographyemail-text-xs-font);
+  @mixin font-fixed $weight, var(--typography-email-text-xs, 12px),
+    var(--typographyemail-text-xs-line-height, 16px), var(--font-email);
 }
 
 @define-mixin email-text-xxs $weight: normal {
-  @mixin font-fixed $weight, $weight, var(--typography-email-text-xxs), $letterSpacing,
-    var(--typography-email-text-xxs-line-height), var(--typography-email-text-xxs-font);
+  @mixin font-fixed $weight, var(--typography-email-text-xxs, 10px),
+    var(--typography-email-text-xxs-line-height, 14px), var(--font-email);
+}
+
+@define-mixin text-gradient-primary {
+  color: transparent;
+  background: linear-gradient(90deg, hsla(266, 100%, 64%, 1) 0%, hsla(213, 79%, 68%, 1) 50%);
+  background-clip: text;
+  text-fill-color: transparent;
 }

package/dist/css/mixins/mixin_utils.css

@@ -1,4 +1,4 @@
-@define-mixin font $fontWeight, $minFontSize, $minLineHeight, $minLetterSpacing, $maxFontSize,
+@define-mixin font $fontWeight, $minFontSize, $maxFontSize, $minLetterSpacing, $minLineHeight,
   $maxLineHeight, $maxLetterSpacing, $fontFamily {
   font-size: responsive $minFontSize $maxFontSize;
   font-range: var(--min-max);

package/dist/css/styles/border-color/border-color.css

@@ -1,8 +1,10 @@
 .border-color {
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error,
+    success, warning, info, danger, gradient {
     &_$(type) {
       &-border {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover, invert {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active,
+          disabled, hover, inverse {
           &-$(color) {
             border-width: 1px;
             border-color: var(--color-$(type)-border-$(color));

package/dist/css/styles/text-gradient/text-gradient.css

@@ -4,14 +4,19 @@
   }
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
-      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
+        hover {
         &-$(color) {
-          @each $direction in left, top, right, bottom  {
+          @each $direction in left, top, right, bottom {
             &-$(direction) {
-              background: linear-gradient(to $(direction), var(--color-$(type)-text-gradient-$(color)-start) 0%, var(--color-$(type)-text-gradient-$(color)-end) 100%);
+              color: transparent;
+              background: linear-gradient(
+                to $(direction),
+                var(--color-$(type)-text-gradient-$(color)-start) 0%,
+                var(--color-$(type)-text-gradient-$(color)-end) 100%
+              );
               background-clip: text;
               text-fill-color: transparent;
-              color: transparent;
             }
           }
         }

package/dist/css/styles/width/width.css

@@ -8,4 +8,4 @@
   &_auto {
     width: auto;
   }
-}
+}

package/dist/css/tokens/colors.css

@@ -0,0 +1,105 @@
+/* stylelint-disable custom-property-empty-line-before, value-keyword-case */
+
+:root {
+  --color-accent-primary: hsla(216, 99%, 63%, 1);
+  --color-accent-primary-hover: hsla(216, 99%, 55%, 1);
+
+  --color-accent-text-primary: hsla(0, 0%, 100%, 1);
+  --color-accent-text-secondary: hsla(216, 99%, 63%, 1);
+
+  --color-accent-item-primary: hsla(0, 0%, 100%, 1);
+  --color-accent-item-secondary: hsla(216, 99%, 63%, 1);
+
+  --color-accent-border-primary: hsla(216, 99%, 63%, 1);
+  --color-accent-border-primary-hover: hsla(216, 99%, 73%, 1);
+
+  --color-primary: hsla(0, 94%, 66%, 1);
+  --color-primary-primary: hsla(0, 94%, 66%, 1);
+  --color-primary-secondary: hsla(360, 94%, 80%, 1);
+  --color-primary-hover-primary: hsla(0, 94%, 66%, 1);
+  --color-primary-hover-secondary: hsla(0, 94%, 95%, 1);
+
+  --color-primary-text-primary: hsla(0, 0%, 100%, 1);
+  --color-primary-text-secondary: hsla(0, 94%, 66%, 1);
+
+  --color-primary-item-primary: hsla(0, 0%, 100%, 1);
+  --color-primary-item-secondary: hsla(0, 94%, 66%, 1);
+
+  --color-primary-border-primary: hsla(0, 0%, 100%, 1);
+  --color-primary-border-secondary: hsla(0, 94%, 66%, 1);
+
+  --color-secondary: hsla(210, 8%, 75%, 1);
+  --color-secondary-primary: hsla(210, 8%, 75%, 1);
+  --color-secondary-primary-hover: hsla(210, 8%, 1%, 1);
+
+  --color-secondary-secondary: hsla(210, 7%, 85%, 1);
+  --color-secondary-secondary-hover: hsla(210, 8%, 95%, 1);
+
+  --color-secondary-text-primary: hsla(0, 0%, 100%, 1);
+  --color-secondary-text-secondary: hsla(0, 0%, 59%, 1);
+  --color-secondary-text-tertiary: hsla(0, 0%, 34%, 1);
+
+  --color-secondary-item-primary: hsla(0, 0%, 100%, 1);
+  --color-secondary-item-secondary: hsla(0, 0%, 59%, 1);
+
+  --color-secondary-border-primary: hsla(0, 0%, 59%, 1);
+
+  --color-tertiary-primary: hsla(50, 100%, 62%, 1);
+  --color-tertiary-secondary: hsla(50, 100%, 77%, 1);
+
+  --color-tertiary-text-primary: hsla(0, 0%, 34%, 1);
+  --color-tertiary-text-secondary: hsla(50, 100%, 62%, 1);
+
+  --color-tertiary-item-primary: hsla(0, 0%, 34%, 1);
+
+  --color-surface-primary: hsla(0, 0%, 100%, 1);
+  --color-surface-primary-hover: hsla(0, 0%, 98%, 1);
+
+  --color-surface-secondary: hsla(220, 14%, 96%, 1);
+  --color-surface-secondary-hover: hsla(0, 0%, 98%, 1);
+
+  --color-surface-tertiary: hsla(0, 0%, 85%, 1);
+  --color-surface-tertiary-hover: hsla(0, 0%, 95%, 1);
+
+  --color-surface-quaternary: hsla(0, 0%, 97%, 1);
+  --color-surface-quaternary-hover: hsla(0, 0%, 95%, 1);
+
+  --color-surface-text-primary: hsla(0, 0%, 34%, 1);
+  --color-surface-text-primary-hover: hsla(216, 99%, 63%, 1);
+  --color-surface-text-secondary: hsla(210, 9%, 56%, 1);
+  --color-surface-text-tertiary: hsla(210, 12%, 76%, 1);
+  --color-surface-text-quaternary: hsla(0, 94%, 66%, 1);
+
+  --color-surface-text-accent: hsla(216, 99%, 63%, 1);
+  --color-surface-text-accent-hover: hsla(216, 99%, 43%, 1);
+
+  --color-surface-item-primary: hsla(0, 0%, 34%, 1);
+  --color-surface-item-secondary: hsla(210, 8%, 75%, 1);
+  --color-surface-item-accent: hsla(216, 99%, 63%, 1);
+
+  --color-surface-border-primary: hsla(0, 0%, 34%, 1);
+  --color-surface-border-secondary: hsla(0, 0%, 59%, 1);
+  --color-surface-border-tertiary: hsla(210, 5%, 89%, 1);
+  --color-surface-border-accent: hsla(216, 99%, 63%, 1);
+
+  --color-gradient-primary: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
+
+  --color-success: hsla(107, 100%, 34%, 1);
+
+  --color-success-item-primary: hsla(0, 0%, 100%, 1);
+
+  --color-success-text-primary: hsla(107, 100%, 34%, 1);
+  --color-success-text-secondary: hsla(0, 0%, 100%, 1);
+
+  --color-success-border-primary: hsla(107, 100%, 34%, 1);
+
+  --color-error-primary: hsla(6, 99%, 57%, 1);
+  --color-error-text-primary: hsla(0, 0%, 100%, 1);
+  --color-error-text-secondary: hsla(6, 99%, 57%, 1);
+
+  --color-error-item-primary: hsla(0, 0%, 100%, 1);
+
+  --color-error-border-primary: hsla(6, 99%, 57%, 1);
+
+  --color-fader: hsla(0, 0%, 59%, 0.2);
+}

package/dist/css/tokens/elevation.css

@@ -0,0 +1,10 @@
+:root {
+  --elevation-1: 0px 1px 1px rgba(0, 0, 0, 0.24);
+  --elevation-2: 0px 2px 4px rgba(0, 0, 0, 0.24);
+  --elevation-4: 0px 2px 6px rgba(0, 0, 0, 0.24);
+  --elevation-6: 0px 2px 6px rgba(0, 0, 0, 0.24);
+  --elevation-8: 0px 4px 8px rgba(0, 0, 0, 0.16);
+  --elevation-12: 0px 6px 12px rgba(0, 0, 0, 0.16);
+  --elevation-16: 0px 8px 16px rgba(0, 0, 0, 0.16);
+  --elevation-24: 0px 16px 24px rgba(0, 0, 0, 0.12);
+}

package/dist/css/tokens/settings.css

@@ -0,0 +1,31 @@
+/* stylelint-disable custom-property-empty-line-before, value-keyword-case */
+
+:root {
+  --min-max: 375px 1440px;
+  --min: 320px;
+  --max: 1440px;
+}
+
+@media (--mobile) {
+  :root {
+    --wrapper-margin: 16px;
+  }
+}
+
+@media (--tablet), (--desktop-small), (--desktop-medium) {
+  :root {
+    --wrapper-margin: 24px;
+  }
+}
+
+@media (--desktop-normal) {
+  :root {
+    --wrapper-margin: 40px;
+  }
+}
+
+@media (--desktop) {
+  :root {
+    --wrapper-margin: 96px;
+  }
+}

package/dist/css/tokens/typography.css

@@ -0,0 +1,127 @@
+:root {
+  --typography-h1-min: 32px;
+  --typography-h1-max: 38px;
+  --typography-h1-min-line-height: 64px;
+  --typography-h1-max-line-height: 80px;
+  --typography-h1-font: var(--font-primary);
+
+  --typography-h2-min: 26px;
+  --typography-h2-max: 32px;
+  --typography-h2-min-line-height: 46px;
+  --typography-h2-max-line-height: 58px;
+  --typography-h2-font: var(--font-primary);
+
+  --typography-h3-min: 18px;
+  --typography-h3-max: 24px;
+  --typography-h3-min-line-height: 32px;
+  --typography-h3-max-line-height: 40px;
+  --typography-h3-font: var(--font-primary);
+
+  --typography-h4-min: 16px;
+  --typography-h4-max: 18px;
+  --typography-h4-min-line-height: 24px;
+  --typography-h4-max-line-height: 30px;
+  --typography-h4-font: var(--font-primary);
+
+  --typography-h5-min: 14px;
+  --typography-h5-max: 16px;
+  --typography-h5-min-line-height: 18px;
+  --typography-h5-max-line-height: 26px;
+  --typography-h5-font: var(--font-primary);
+
+  --typography-h6-min: 12px;
+  --typography-h6-max: 18px;
+  --typography-h6-min-line-height: 16px;
+  --typography-h6-max-line-height: 24px;
+  --typography-h6-font: var(--font-primary);
+
+  --typography-p-min: 16px;
+  --typography-p-max: 24px;
+  --typography-p-min-line-height: 24px;
+  --typography-p-max-line-height: 36px;
+  --typography-p-font: var(--font-primary);
+
+  --typography-text-xxl-min: 24px;
+  --typography-text-xxl-max: 28px;
+  --typography-text-xxl-min-line-height: 24px;
+  --typography-text-xxl-max-line-height: 28px;
+  --typography-text-xxl-font: var(--font-primary);
+
+  --typography-text-xl-min: 20px;
+  --typography-text-xl-max: 24px;
+  --typography-text-xl-min-line-height: 20px;
+  --typography-text-xl-max-line-height: 24px;
+  --typography-text-xl-font: var(--font-primary);
+
+  --typography-text-l-min: 18px;
+  --typography-text-l-max: 24px;
+  --typography-text-l-min-line-height: 18px;
+  --typography-text-l-max-line-height: 24px;
+  --typography-text-l-font: var(--font-primary);
+
+  --typography-text-m-min: 16px;
+  --typography-text-m-max: 18px;
+  --typography-text-m-min-line-height: 16px;
+  --typography-text-m-max-line-height: 20px;
+  --typography-text-m-font: var(--font-primary);
+
+  --typography-text-s-min: 14px;
+  --typography-text-s-max: 18px;
+  --typography-text-s-min-line-height: 14px;
+  --typography-text-s-max-line-height: 18px;
+  --typography-text-s-font: var(--font-primary);
+
+  --typography-text-xs-min: 12px;
+  --typography-text-xs-max: 16px;
+  --typography-text-xs-min-line-height: 12px;
+  --typography-text-xs-max-line-height: 16px;
+  --typography-text-xs-font: var(--font-primary);
+
+  --typography-text-xxs-min: 10px;
+  --typography-text-xxs-max: 14px;
+  --typography-text-xxs-min-line-height: 10px;
+  --typography-text-xxs-max-line-height: 14px;
+  --typography-text-xxs-font: var(--font-primary);
+
+  --typography-email-h1: 32px;
+  --typography-email-h1-line-height: 38px;
+
+  --typography-email-h2: 26px;
+  --typography-email-h2-line-height: 32px;
+
+  --typography-email-h3: 18px;
+  --typography-email-h3-line-height: 24px;
+
+  --typography-email-h4: 24px;
+  --typography-email-h4-line-height: 30px;
+
+  --typography-email-h5: 18px;
+  --typography-email-h5-line-height: 24px;
+
+  --typography-email-h6: 12px;
+  --typography-email-h6-line-height: 18px;
+
+  --typography-email-p: 16px;
+  --typography-email-p-line-height: 24px;
+
+  --typography-email-text-xxl: 24px;
+  --typography-email-text-xxl-line-height: 28px;
+
+  --typography-email-text-xl: 20px;
+  --typography-email-text-xl-line-height: 24px;
+
+  --typography-email-text-l: 18px;
+  --typography-email-text-l-line-height: 24px;
+
+  --typography-email-text-m: 16px;
+  --typography-email-text-m-line-height: 18px;
+
+  --typography-email-text-s: 14px;
+  --typography-email-text-s-line-height: 18px;
+
+  --typography-email-text-xs: 12px;
+  --typography-email-text-xs-line-height: 16px;
+
+  --typography-email-text-xxs: 10px;
+  --typography-email-text-xxs-line-height: 14px;
+}

package/dist/hooks/useViewportFix.js

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+
+function useViewportFix() {
+    useEffect(function () {
+        // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+        var setViewportProperty = function () {
+            // "vh" unit is equal to 1% of the height of the initial containing block
+            // https://www.w3.org/TR/css-values-3/#viewport-relative-lengths
+            var vh = window.innerHeight * 0.01;
+            /** NOTE:
+             * In JavaScript, you can always get the value of the current viewport
+             * by using the global variable window.innerHeight. This value takes
+             * the browser’s interface into account and is updated when its
+             * visibility changes. The trick is to store the viewport value
+             * in a CSS variable and apply that to the element instead of the vh unit.
+             * Let’s say our CSS custom variable is --vh for this example.
+             * That means we will want to apply it in our CSS like this:
+             * ```
+             * .my-element {
+             *   height: 100vh; (Fallback for browsers that do not support Custom Properties)
+             *   height: calc(var(--vh, 1vh) * 100);
+             * }
+             * ```
+             * We told JavaScript to grab the height of the viewport and then
+             * drilled it down into 1/100th of that total so we have a value
+             * to assign as our viewport height unit value.
+             * Then we politely asked JS to create the CSS variable "--vh" at the ":root":
+             */
+            document.documentElement.style.setProperty('--vh', "".concat(vh, "px"));
+        };
+        // Update the value of "--vh" after render
+        setViewportProperty();
+        // Update the value of "--vh" by listening to the window resize event
+        window.addEventListener('resize', setViewportProperty);
+        return function () {
+            window.removeEventListener('resize', setViewportProperty);
+        };
+    }, []);
+}
+
+export { useViewportFix };

package/dist/stories/Accordion.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as AccordionStories from './Accordion.stories.js'
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+## Default
+
+<Canvas of={AccordionStories.Default} />