@matteusan/himig 1.8.1 → 1.9.0

package/README.md

@@ -6,11 +6,11 @@ use DartSass instead of the now deprecated LibSass (node-sass)**.
 
 ## Setup
 ```sh
-$ npm install @matteusan/himig --save
+$ npm i @matteusan/himig @matteusan/pintig --save
 
 # or
 
-$ yarn add @matteusan/himig
+$ pnpm add @matteusan/himig @matteusan/pintig
 ```
 ```scss
 // main.scss

package/_index.scss

@@ -21,10 +21,10 @@ $vue-mode: $test-mode !default;
 
 @mixin init(
   $theme: (),
-  $primary: 'ms-dark-grey',
+  $primary: 'ms-neutral',
   $accent: 'ms-orange',
-  $surface: 'ms-dark-grey',
-  $background: 'ms-dark-grey.800',
+  $surface: 'ms-neutral',
+  $background: 'ms-neutral.800',
   $error: 'ms-red',
   $disabled: (
     'default': rgba(#fff, 12%),
@@ -64,30 +64,34 @@ $vue-mode: $test-mode !default;
     'weight': 'weight.normal',
     'line-height': 'line-height.normal',
     'squeeze': 'squeeze.normal',
+    'stretch': 'stretch.normal'
   );
 
   $_init-type-supertitle: (
     'family': 'family.serif',
-    'size': 'size.3xl',
+    'size': 'size.6xl',
     'weight': 'weight.normal',
-    'line-height': 'line-height.short',
-    'squeeze': 'squeeze.tight',
+    'line-height': 'line-height.x-short',
+    'squeeze': 'squeeze.x-tight',
+    'stretch': 'stretch.condensed'
   );
 
   $_init-type-title: (
     'family': 'family.serif',
-    'size': 'size.xl',
+    'size': 'size.3xl',
     'weight': 'weight.normal',
-    'line-height': 'line-height.short',
+    'line-height': 'line-height.x-short',
     'squeeze': 'squeeze.tight',
+    'stretch': 'stretch.condensed'
   );
 
   $_init-type-subtitle: (
     'family': 'family.sans-serif',
-    'size': 'size.md',
+    'size': 'size.xl',
     'weight': 'weight.light',
     'line-height': 'line-height.normal',
     'squeeze': 'squeeze.normal',
+    'stretch': 'stretch.normal'
   );
 
   $_init-type-body: (
@@ -96,6 +100,7 @@ $vue-mode: $test-mode !default;
     'weight': 'weight.normal',
     'line-height': 'line-height.normal',
     'squeeze': 'squeeze.normal',
+    'stretch': 'stretch.normal'
   );
 
   $_init-type-mono: (
@@ -104,6 +109,7 @@ $vue-mode: $test-mode !default;
     'weight': 'weight.normal',
     'line-height': 'line-height.normal',
     'squeeze': 'squeeze.normal',
+    'stretch': 'stretch.normal'
   );
 
   $_init-type-small: (
@@ -112,6 +118,7 @@ $vue-mode: $test-mode !default;
     'weight': 'weight.light',
     'line-height': 'line-height.tall',
     'squeeze': 'squeeze.normal',
+    'stretch': 'stretch.normal'
   );
 
   $_init-breakpoints: (
@@ -167,9 +174,7 @@ $vue-mode: $test-mode !default;
         )
       ));
 
-      // Immutables
       --ms-shadow-color: rgba(0, 0, 0, 0.25);
-      --ms-transition-time: 0.2s;
 
       font-family: pintig.token-get('family-global');
       line-height: pintig.token-get('line-height-global');

package/ms-button/_button-base.scss

@@ -20,7 +20,9 @@
     outline: pintig.key-create('button-outline', none);
 
     -webkit-appearance: caret;
-    @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
+    transition-property: background, color, border;
+    transition-duration: pintig.token-get('time-short');
+    transition-timing-function: pintig.token-get('easing');
 
     @content;
 

package/ms-button/_button-styles.scss

@@ -78,7 +78,7 @@ $_states: ('error');
 
       &:where(.is-small) {
         @include pintig.struct-bind('button', (
-          padding: 'sm',
+          padding: ('xs' 'sm'),
         ));
         @include pintig.typography-apply('button', (
           size: 'xs'
@@ -87,15 +87,24 @@ $_states: ('error');
 
       &:where(.is-large) {
         @include pintig.struct-bind('button', (
-          padding: 'lg',
+          padding: ('md' 'lg'),
           gap: 'sm',
-          radius: 'md'
         ));
         @include pintig.typography-apply('button', (
           size: 'md'
         ));
       }
 
+      &:where(.is-fullwidth) {
+        @include pintig.struct-bind('button', (
+          width: (
+            default: 100%,
+            max: 100%,
+          ),
+          height: 100%
+        ));
+      }
+
       @each $state in $_states {
         &:where(.is-#{$state}) {
           @include style.text(

package/ms-button/_button-theme.scss

@@ -5,8 +5,8 @@
 $init-color: (
   fill: (
     default: 'accent-400',
-    hover: 'accent-300',
-    active: 'accent-200',
+    hover: 'accent-400',
+    active: 'accent-300',
     focus: 'accent-400',
     disabled: 'disabled',
   ),
@@ -19,8 +19,8 @@ $init-color: (
   ),
   border: (
     default: 'accent-400',
-    hover: 'accent-300',
-    active: 'accent-200',
+    hover: 'accent-400',
+    active: 'accent-300',
     focus: 'accent-400',
     disabled: 'disabled',
   ),
@@ -32,7 +32,7 @@ $init-struct: (
     min: 50px,
     max: max-content
   ),
-  padding: 'md',
+  padding: ('md' 'lg'),
   radius: 'small',
   border-width: 'xs',
   border-style: solid,

package/ms-card/_card-base.scss

@@ -85,7 +85,9 @@
           left: 0;
           opacity: 0;
           transform: translateY(100%);
-          transition: all pintig.token-get('time-short') pintig.token-get('easing-smooth');
+          transition-property: transform, bottom, opacity;
+          transition-duration: pintig.token-get('time-short');
+          transition-timing-function: pintig.token-get('easing-smooth');
 
           .ms-card__header {
             padding-block-end: 0 !important;
@@ -119,7 +121,7 @@
       display: flex;
       flex-flow: column nowrap;
       justify-content: space-between;
-      transition: all 0.8s var(--easing);
+      transition: all 0.8s var(--ms-easing);
       will-change: transform;
       gap: pintig.key-get('card-section-gap');
 

package/ms-card/_card-theme.scss

@@ -36,7 +36,7 @@ $init-typography: (
   ),
   size: (
     'default': 'body',
-    'title': 'title',
+    'title': 'subtitle',
     'subtitle': 'body',
     'icon': 66px
   ),
@@ -47,7 +47,7 @@ $init-typography: (
   ),
   line-height: (
     'default': 'normal',
-    'title': 'normal',
+    'title': 'x-short',
     'subtitle': 'normal',
   ),
   squeeze: (

package/ms-form-field/_form-field-base.scss

@@ -27,7 +27,9 @@
         padding: ('xs' 'xs' 0 0),
       ));
       @include pintig.typography-apply('form-field-label', pintig.$type-inherit-template);
-      @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
+      transition-property: top, font-size;
+      transition-duration: pintig.token-get('time-short');
+      transition-timing-function: pintig.token-get('easing');
       cursor: text;
     }
 
@@ -78,7 +80,9 @@
       resize: none;
       cursor: text;
       -webkit-appearance: caret;
-      @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
+      transition-property: background, color, border;
+      transition-duration: pintig.token-get('time-short');
+      transition-timing-function: pintig.token-get('easing');
 
       &::placeholder {
         color: pintig.key-create('form-field-placeholder-ink', inherit);
@@ -96,7 +100,9 @@
         weight: inherit,
         line-height: inherit,
       ));
-      @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
+      transition-property: background, color, border;
+      transition-duration: pintig.token-get('time-short');
+      transition-timing-function: pintig.token-get('easing');
     }
   }
 }

package/ms-form-field/_form-field-styles.scss

@@ -28,7 +28,7 @@
     ) {
       .ms-form-field__label {
         @include pintig.color-bind('form-field-label', (
-          ink: pintig.theme-get($color, 'ink', 'disabled'),
+          ink: pintig.theme-get($color, 'ink', 'default'),
         ));
         @include pintig.typography-bind('form-field-label', (
           family: pintig.theme-get($typography, 'family'),
@@ -37,6 +37,12 @@
           line-height: pintig.theme-get($typography, 'height'),
         ));
         user-select: none;
+
+        &:has(+ .ms-form-field__input:disabled) {
+          @include pintig.color-bind('form-field-label', (
+            ink: pintig.theme-get($color, 'ink', 'disabled'),
+          ));
+        }
       }
 
       &:has(.ms-form-field__input:read-only:disabled) {

package/ms-form-field/_form-field-theme.scss

@@ -8,8 +8,8 @@ $init-color: (
     focus: 'accent-400',
     disabled: 'disabled',
     error: (
-      default: 'error-800',
-      focus: 'error-800'
+      default: 'error-600',
+      focus: 'error-600'
     )
   ),
   ink: (
@@ -19,12 +19,12 @@ $init-color: (
     error: 'error-400'
   ),
   border: (
-    default: 'surface-400',
+    default: 'surface-600',
     focus: 'accent-400',
     disabled: 'disabled',
     error: (
-      default: 'error-800',
-      focus: 'error-400'
+      default: 'error-600',
+      focus: 'error-500'
     )
   ),
 );

package/ms-link/_link-styles.scss

@@ -30,7 +30,9 @@
         line-height: pintig.theme-get($typography, 'line-height')
       ));
       text-decoration: underline;
-      @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
+      transition-property: background, color, border;
+      transition-duration: pintig.token-get('time-short');
+      transition-timing-function: pintig.token-get('easing');
 
       &:hover {
         @include pintig.color-bind('link', (

package/ms-list/_list-base.scss

@@ -39,7 +39,9 @@
         weight: inherit,
         line-height: inherit,
       ));
-      @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
+      transition-property: background, color, border;
+      transition-duration: pintig.token-get('time-short');
+      transition-timing-function: pintig.token-get('easing');
     }
   }
 }

package/ms-list/_list-theme.scss

@@ -4,17 +4,17 @@
 
 $init-color: (
   fill: (
-    default: 'surface-400',
-    hover: 'surface-300',
-    focus: 'surface-300',
-    active: 'surface-200'
+    default: 'surface-600',
+    hover: 'surface-500',
+    focus: 'surface-500',
+    active: 'surface-400'
   ),
   ink: 'surface-ink',
   border: (
-    default: 'surface-400',
-    hover: 'surface-300',
-    focus: 'surface-300',
-    active: 'surface-200'
+    default: 'surface-600',
+    hover: 'surface-500',
+    focus: 'surface-500',
+    active: 'surface-400'
   ),
 );
 

package/ms-select-field/_select-field-base.scss

@@ -72,7 +72,9 @@
       resize: none;
       cursor: text;
       -webkit-appearance: caret;
-      @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
+      transition-property: background, color, border;
+      transition-duration: pintig.token-get('time-short');
+      transition-timing-function: pintig.token-get('easing');
     }
 
     .ms-select-field__helper {
@@ -85,7 +87,9 @@
         weight: inherit,
         line-height: inherit,
       ));
-      @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
+      transition-property: background, color, border;
+      transition-duration: pintig.token-get('time-short');
+      transition-timing-function: pintig.token-get('easing');
     }
   }
 }

package/ms-select-field/_select-field-theme.scss

@@ -8,8 +8,8 @@ $init-color: (
     focus: 'accent-400',
     disabled: 'disabled',
     error: (
-      default: 'error-800',
-      focus: 'error-800'
+      default: 'error-600',
+      focus: 'error-600'
     )
   ),
   ink: (
@@ -19,12 +19,12 @@ $init-color: (
     error: 'error-400'
   ),
   border: (
-    default: 'surface-400',
+    default: 'surface-600',
     focus: 'accent-400',
     disabled: 'disabled',
     error: (
-      default: 'error-800',
-      focus: 'error-400'
+      default: 'error-600',
+      focus: 'error-500'
     )
   ),
 );

package/ms-tick-field/_tick-field-base.scss

@@ -11,7 +11,9 @@
     flex-flow: row nowrap;
     align-items: center;
     gap: pintig.key-create('tick-field-gap', 0.5rem);
-    transition: all pintig.token-get('time-short') pintig.token-get('easing');
+    transition-property: background, color, border;
+    transition-duration: pintig.token-get('time-short');
+    transition-timing-function: pintig.token-get('easing');
 
     @content;
 
@@ -20,9 +22,16 @@
       place-content: center;
       @include pintig.struct-radius('tick-field-input', inherit);
       @include pintig.color-apply('tick-field-input', pintig.$color-inherit-template);
-      transition: all pintig.token-get('time-short') pintig.token-get('easing');
-      @include pintig.prefix('appearance', none);
+      transition-property: background, color, border;
+      transition-duration: pintig.token-get('time-short');
+      transition-timing-function: pintig.token-get('easing');
+      appearance: none;
       outline: none;
+      cursor: pintig.key-create('tick-field-input-cursor', not-allowed);
+
+      &:not(:disabled) {
+        @include pintig.key-bind('tick-field-input-cursor', pointer);
+      }
 
       &::before {
         content: '';

package/ms-tick-field/_tick-field-styles.scss

@@ -21,9 +21,9 @@
   @layer components {
     @include base.init() {
       @include pintig.color-apply('tick-field', (
-        fill: pintig.theme-get($color, 'fill'),
-        ink: pintig.theme-get($color, 'ink'),
-        border: pintig.theme-get($color, 'border'),
+        fill: pintig.theme-get($color, 'fill', 'disabled'),
+        ink: pintig.theme-get($color, 'ink', 'disabled'),
+        border: pintig.theme-get($color, 'border', 'disabled'),
       ));
       @include pintig.struct-apply('tick-field', $struct);
       @include pintig.typography-bind('tick-field', $typography);
@@ -33,24 +33,34 @@
         weight: pintig.theme-get($typography, 'weight'),
         line-height: pintig.theme-get($typography, 'line-height'),
       ));
+      cursor: pintig.key-create('tick-field-cursor', not-allowed);
 
       @include pintig.struct-bind('tick-field-text', (
         gap: pintig.theme-get($struct, 'gap', 'text'),
       ));
 
-      &:hover,
-      &:has(.ms-tick-field__input:focus) {
+      &:has(.ms-tick-field__input:not(:disabled)) {
         @include pintig.color-bind('tick-field', (
-          fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'hover')) r g b / pintig.$color-fill-focus-opacity),
-          border: rgb(from pintig.token-switch(pintig.theme-get($color, 'border', 'hover')) r g b / pintig.$color-fill-focus-opacity),
+          fill: pintig.theme-get($color, 'fill'),
+          ink: pintig.theme-get($color, 'ink'),
+          border: pintig.theme-get($color, 'border'),
         ));
-      }
+        @include pintig.key-bind('tick-field-cursor', pointer);
 
-      &:has(.ms-tick-field__input:checked) {
-        @include pintig.color-bind('tick-field', (
-          fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'checked')) r g b / pintig.$color-fill-focus-opacity),
-          border: pintig.theme-get($color, 'border', 'checked'),
-        ));
+        &:hover,
+        &:has(.ms-tick-field__input:focus) {
+          @include pintig.color-bind('tick-field', (
+            fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'hover')) r g b / pintig.$color-fill-focus-opacity),
+            border: rgb(from pintig.token-switch(pintig.theme-get($color, 'border', 'hover')) r g b / pintig.$color-fill-focus-opacity),
+          ));
+        }
+
+        &:has(.ms-tick-field__input:checked) {
+          @include pintig.color-bind('tick-field', (
+            fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'checked')) r g b / pintig.$color-fill-focus-opacity),
+            border: pintig.theme-get($color, 'border', 'checked'),
+          ));
+        }
       }
 
       .ms-tick-field__input {
@@ -62,11 +72,33 @@
           border-style: 'solid'
         ));
         @include pintig.color-bind('tick-field-input', (
-          fill: pintig.theme-get($color, 'fill', 'input'),
+          fill: pintig.theme-get($color, 'fill', 'input', 'disabled'),
           ink: pintig.theme-get($color, 'ink', 'input'),
-          border: pintig.theme-get($color, 'border', 'input'),
+          border: pintig.theme-get($color, 'border', 'input', 'disabled'),
         ));
 
+        &:not(:disabled) {
+          @include pintig.color-bind('tick-field-input', (
+            fill: pintig.theme-get($color, 'fill', 'input'),
+            ink: pintig.theme-get($color, 'ink', 'input'),
+            border: pintig.theme-get($color, 'border', 'input'),
+          ));
+
+          &:hover,
+          &:focus {
+            @include pintig.color-fill('tick-field-input', rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'input', 'hover')) r g b / pintig.$color-fill-focus-opacity), 'bind');
+            @include pintig.color-border('tick-field-input', rgb(from pintig.token-switch(pintig.theme-get($color, 'border', 'input', 'hover')) r g b / pintig.$color-fill-focus-opacity), 'bind');
+          }
+
+          &:checked {
+            @include pintig.color-bind('tick-field-input', (
+              fill: pintig.theme-get($color, 'fill', 'input', 'checked'),
+              ink: pintig.theme-get($color, 'ink', 'input'),
+              border: pintig.theme-get($color, 'border', 'input', 'checked'),
+            ));
+          }
+        }
+
         &[type='checkbox'] {
           @include pintig.struct-radius('tick-field-input', pintig.theme-get($struct, 'radius', 'input', 'checkbox'), 'bind');
         }
@@ -74,20 +106,6 @@
         &[type='radio'] {
           @include pintig.struct-radius('tick-field-input', pintig.theme-get($struct, 'radius', 'input', 'radio'), 'bind');
         }
-
-        &:hover,
-        &:focus {
-          @include pintig.color-fill('tick-field-input', rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'input', 'hover')) r g b / pintig.$color-fill-focus-opacity), 'bind');
-          @include pintig.color-border('tick-field-input', rgb(from pintig.token-switch(pintig.theme-get($color, 'border', 'input', 'hover')) r g b / pintig.$color-fill-focus-opacity), 'bind');
-        }
-
-        &:checked {
-          @include pintig.color-bind('tick-field-input', (
-            fill: pintig.theme-get($color, 'fill', 'input', 'checked'),
-            ink: pintig.theme-get($color, 'ink', 'input'),
-            border: pintig.theme-get($color, 'border', 'input', 'checked'),
-          ));
-        }
       }
     }
   }

package/ms-tick-field/_tick-field-theme.scss

@@ -5,26 +5,31 @@
 $init-color: (
   fill: (
     default: rgba(0 0 0 / 0),
-    hover: 'accent-300',
-    checked: 'accent-300',
+    hover: 'accent-400',
+    checked: 'accent-400',
+    disabled: 'disabled',
     input: (
       default: rgba(0 0 0 / 0),
-      hover: 'accent-400',
-      checked: 'accent-400'
+      hover:  rgba(0 0 0 / 0),
+      checked: 'accent-400',
+      disabled: 'disabled',
     ),
   ),
   ink: (
     default: 'surface-ink',
-    input: 'accent-ink'
+    input: 'accent-ink',
+    disabled: 'disabled-ink',
   ),
   border: (
-    default: 'surface-300',
-    hover: 'accent-600',
+    default: 'surface-600',
+    hover: 'accent-400',
     checked: 'accent-400',
+    disabled: 'disabled',
     input: (
-      default: 'surface-300',
-      hover: 'accent-600',
+      default: 'surface-600',
+      hover: 'accent-400',
       checked: 'accent-400',
+      disabled: 'disabled',
     )
   ),
 );

package/ms-utils/_struct-utils.scss

@@ -51,7 +51,6 @@ $_dimensions: (
   'md',
   'lg',
   'xl',
-  'sprite',
 );
 $_stroke-size: (
   'none',

package/ms-utils/_typography-utils.scss

@@ -17,49 +17,56 @@ $_presets: (
     size: 'supertitle',
     weight: 'supertitle',
     line-height: 'supertitle',
-    squeeze: 'supertitle'
+    squeeze: 'supertitle',
+    stretch: 'supertitle',
   ),
   'title': (
     family: 'title',
     size: 'title',
     weight: 'title',
     line-height: 'title',
-    squeeze: 'title'
+    squeeze: 'title',
+    stretch: 'title',
   ),
   'subtitle': (
     family: 'subtitle',
     size: 'subtitle',
     weight: 'subtitle',
     line-height: 'subtitle',
-    squeeze: 'subtitle'
+    squeeze: 'subtitle',
+    stretch: 'subtitle',
   ),
   'body': (
     family: 'body',
     size: 'body',
     weight: 'body',
     line-height: 'body',
-    squeeze: 'body'
+    squeeze: 'body',
+    stretch: 'body',
   ),
   'mono': (
     family: 'mono',
     size: 'mono',
     weight: 'mono',
     line-height: 'mono',
-    squeeze: 'mono'
+    squeeze: 'mono',
+    stretch: 'mono',
   ),
   'small': (
     family: 'small',
     size: 'small',
     weight: 'small',
     line-height: 'small',
-    squeeze: 'small'
+    squeeze: 'small',
+    stretch: 'small'
   )
 );
 $_sizes: ('xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl');
 $_weights: ('black', 'bold', 'normal', 'light');
-$_line-heights: ('broad', 'normal', 'condensed', 'tall', 'short');
+$_line-heights: ('broad', 'normal', 'condensed', 'tall', 'short', 'x-tall', 'x-short');
 $_alignments: ('center', 'left', 'right', 'justify', 'justify-all');
-$_squeezes: ('tight', 'normal', 'loose');
+$_squeezes: ('x-tight', 'tight', 'normal', 'loose', 'x-loose');
+$_stretches: ('x-condensed', 'condensed', 'normal', 'wide', 'x-wide');
 
 @mixin typography($include: (), $exclude: ()) {
   $utils-to-render: helpers.handle-include-exclude((
@@ -69,7 +76,9 @@ $_squeezes: ('tight', 'normal', 'loose');
     'weight',
     'line-height',
     'alignment',
-    'squeeze'
+    'squeeze',
+    'stretch',
+    'style'
   ), $include, $exclude);
 
   @layer utils {
@@ -81,6 +90,7 @@ $_squeezes: ('tight', 'normal', 'loose');
           font-weight: pintig.token-switch('weight-#{map.get($values, 'weight')}', pintig.primitive-token-switch('weight.#{map.get($values, 'weight')}', $values));
           line-height: pintig.token-switch('line-height-#{map.get($values, 'weight')}', pintig.primitive-token-switch('line-height.#{map.get($values, 'line-height')}', $values));
           letter-spacing: pintig.token-switch('squeeze-#{map.get($values, 'squeeze')}', pintig.primitive-token-switch('squeeze.#{map.get($values, 'squeeze')}', $values));
+          font-stretch: pintig.token-switch('stretch-#{map.get($values, 'stretch')}', pintig.primitive-token-switch('stretch.#{map.get($values, 'stretch')}', $values));
         }
 
         @each $breakpoint in $_breakpoints {
@@ -91,6 +101,7 @@ $_squeezes: ('tight', 'normal', 'loose');
               font-weight: pintig.token-switch('weight-#{map.get($values, 'weight')}', pintig.primitive-token-switch('weight.#{map.get($values, 'weight')}', $values));
               line-height: pintig.token-switch('line-height-#{map.get($values, 'weight')}', pintig.primitive-token-switch('line-height.#{map.get($values, 'line-height')}', $values));
               letter-spacing: pintig.token-switch('squeeze-#{map.get($values, 'squeeze')}', pintig.primitive-token-switch('squeeze.#{map.get($values, 'squeeze')}', $values));
+              font-stretch: pintig.token-switch('stretch-#{map.get($values, 'stretch')}', pintig.primitive-token-switch('stretch.#{map.get($values, 'stretch')}', $values));
             }
           }
         }
@@ -192,5 +203,49 @@ $_squeezes: ('tight', 'normal', 'loose');
         }
       }
     }
+
+    @if list.index($utils-to-render, 'stretch') {
+      @each $stretch in $_stretches {
+        .stretch-#{$stretch} {
+          font-stretch: pintig.primitive-token-get('stretch.#{$stretch}');
+        }
+
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:stretch-#{$stretch} {
+            @include pintig.breakpoint-create($breakpoint) {
+              font-stretch: pintig.primitive-token-get('stretch.#{$stretch}') !important;
+            }
+          }
+        }
+      }
+    }
+
+    @if list.index($utils-to-render, 'style') {
+      @each $stretch in $_stretches {
+        .italic {
+          font-style: italic;
+        }
+
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:italic {
+            @include pintig.breakpoint-create($breakpoint) {
+              font-style: italic;
+            }
+          }
+        }
+
+        .oblique {
+          font-style: oblique;
+        }
+
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:oblique {
+            @include pintig.breakpoint-create($breakpoint) {
+              font-style: oblique;
+            }
+          }
+        }
+      }
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matteusan/himig",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "Matteu's personal design system for building user interfaces.",
   "repository": "https://github.com/MatteuSan/himig",
   "author": "Matteu <matteugt@gmail.com>",
@@ -12,36 +12,35 @@
     ".": {
       "sass": "./_index.scss"
     },
-    "./ms-badge.scss": {
+    "./ms-badge": {
       "sass": "./ms-badge/_index.scss"
     },
-    "./ms-button.scss": {
+    "./ms-button": {
       "sass": "./ms-button/_index.scss"
     },
-    "./ms-card.scss": {
+    "./ms-card": {
       "sass": "./ms-card/_index.scss"
     },
-    "./ms-form-field.scss": {
+    "./ms-form-field": {
       "sass": "./ms-form-field/_index.scss"
     },
-    "./ms-link.scss": {
+    "./ms-link": {
       "sass": "./ms-link/_index.scss"
     },
-    "./ms-list.scss": {
+    "./ms-list": {
       "sass": "./ms-list/_index.scss"
     },
-    "./ms-select-field.scss": {
+    "./ms-select-field": {
       "sass": "./ms-select-field/_index.scss"
     },
-    "./ms-tick-field.scss": {
+    "./ms-tick-field": {
       "sass": "./ms-tick-field/_index.scss"
     },
-    "./ms-utils.scss": {
+    "./ms-utils": {
       "sass": "./ms-utils/_index.scss"
     }
   },
-  "dependencies": {
-    "@matteusan/pintig": "^1.9",
-    "@matteusan/sentro": "^1.2.3"
+  "peerDependencies": {
+    "@matteusan/pintig": "^1.10"
   }
 }