@matteusan/himig 1.7.3 → 1.8.0

package/_index.scss

@@ -58,56 +58,60 @@ $vue-mode: $test-mode !default;
   $breakpoints: pintig.prioritize(map.get($theme, 'breakpoints'), $breakpoints);
   $extend: pintig.prioritize(map.get($theme, 'extend'), $extend);
 
-  $_init-family: 'family.sans-serif';
-  $_init-line-height: 'line-height.normal';
-
   $_init-type-global: (
-    'family': $_init-family,
+    'family': 'family.sans-serif',
     'size': 'size.sm',
     'weight': 'weight.normal',
-    'line-height': $_init-line-height,
+    'line-height': 'line-height.normal',
+    'squeeze': 'squeeze.normal',
   );
 
   $_init-type-supertitle: (
-    'family': $_init-family,
-    'size': 'size.xl',
-    'weight': 'weight.black',
-    'line-height': $_init-line-height,
+    'family': 'family.serif',
+    'size': 'size.3xl',
+    'weight': 'weight.normal',
+    'line-height': 'line-height.short',
+    'squeeze': 'squeeze.tight',
   );
 
   $_init-type-title: (
-    'family': $_init-family,
-    'size': 'size.lg',
-    'weight': 'weight.bold',
-    'line-height': $_init-line-height,
+    'family': 'family.serif',
+    'size': 'size.xl',
+    'weight': 'weight.normal',
+    'line-height': 'line-height.short',
+    'squeeze': 'squeeze.tight',
   );
 
   $_init-type-subtitle: (
-    'family': $_init-family,
+    'family': 'family.sans-serif',
     'size': 'size.md',
-    'weight': 'weight.bold',
-    'line-height': $_init-line-height,
+    'weight': 'weight.light',
+    'line-height': 'line-height.normal',
+    'squeeze': 'squeeze.normal',
   );
 
   $_init-type-body: (
-    'family': $_init-family,
+    'family': 'family.sans-serif',
     'size': 'size.sm',
     'weight': 'weight.normal',
-    'line-height': $_init-line-height,
+    'line-height': 'line-height.normal',
+    'squeeze': 'squeeze.normal',
   );
 
   $_init-type-mono: (
     'family': 'family.mono',
     'size': 'size.sm',
     'weight': 'weight.normal',
-    'line-height': $_init-line-height,
+    'line-height': 'line-height.normal',
+    'squeeze': 'squeeze.normal',
   );
 
   $_init-type-small: (
-    'family': $_init-family,
+    'family': 'family.sans-serif',
     'size': 'size.xs',
     'weight': 'weight.light',
-    'line-height': $_init-line-height,
+    'line-height': 'line-height.tall',
+    'squeeze': 'squeeze.normal',
   );
 
   $_init-breakpoints: (
@@ -117,37 +121,6 @@ $vue-mode: $test-mode !default;
     'xlarge': pintig.primitive-token-get('breakpoint.xl'),
   );
 
-  :root {
-    @include pintig.theme-config(
-      $primary: $primary,
-      $accent: $accent,
-      $surface: $surface,
-      $background: $background,
-      $error: $error,
-      $disabled: $disabled,
-      $radius: $radius,
-      $breakpoints: $breakpoints,
-      $global: map.merge($_init-type-global, $global),
-      $supertitle: map.merge($_init-type-supertitle, $supertitle),
-      $title: map.merge($_init-type-title, $title),
-      $subtitle: map.merge($_init-type-subtitle, $subtitle),
-      $body: map.merge($_init-type-body, $body),
-      $mono: map.merge($_init-type-mono, $mono),
-      $small: map.merge($_init-type-small, $small),
-      $extend: $extend,
-    );
-
-    // Immutables
-    --ms-shadow-color: rgba(0, 0, 0, 0.25);
-    --ms-sprite-size: 32px;
-    --ms-transition-time: 0.2s;
-
-    font-family: pintig.token-get('family-global');
-    line-height: pintig.token-get('line-height-global');
-  }
-
-  @include pintig.breakpoint-config(map.merge($_init-breakpoints, $breakpoints));
-
   @include font-pack.load((
     'global': map.get(map.merge($_init-type-global, $global), 'family'),
     'supertitle': map.get(map.merge($_init-type-supertitle, $supertitle), 'family'),
@@ -158,67 +131,114 @@ $vue-mode: $test-mode !default;
     'small': map.get(map.merge($_init-type-small, $small), 'family'),
   ));
 
-  *,
-  :before,
-  :after {
-    margin: 0;
-    padding: 0;
-    box-sizing: inherit;
-    color: inherit;
-  }
+  @layer init, components, utils;
+
+  @layer init {
+    :root {
+      @include pintig.theme-config(
+        $primary: $primary,
+        $accent: $accent,
+        $surface: $surface,
+        $background: $background,
+        $error: $error,
+        $disabled: $disabled,
+        $radius: $radius,
+        $breakpoints: $breakpoints,
+        $global: map.merge($_init-type-global, $global),
+        $supertitle: map.merge($_init-type-supertitle, $supertitle),
+        $title: map.merge($_init-type-title, $title),
+        $subtitle: map.merge($_init-type-subtitle, $subtitle),
+        $body: map.merge($_init-type-body, $body),
+        $mono: map.merge($_init-type-mono, $mono),
+        $small: map.merge($_init-type-small, $small),
+        $extend: $extend,
+      );
+
+      @include pintig.token-config((
+        'shadow-color': rgba(0, 0, 0, 0.25),
+        'easing': (
+          'default': ease-in-out,
+          'smooth': cubic-bezier(0.83, 0, 0.17, 1)
+        ),
+        'time': (
+          'short': 0.2s,
+          'default': 0.4s,
+          'long': 0.6s
+        )
+      ));
+
+      // 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');
+    }
 
-  html {
-    box-sizing: border-box;
-    font-size: 100%;
-  }
+    @include pintig.breakpoint-config(map.merge($_init-breakpoints, $breakpoints));
 
-  body {
-    background: pintig.key-create('body-fill', pintig.token-get('background'));
-    color: pintig.key-create('body-ink', pintig.token-get('background-ink'));
-  }
+    *,
+    :before,
+    :after {
+      margin: 0;
+      padding: 0;
+      box-sizing: inherit;
+      color: inherit;
+    }
 
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
+    html {
+      box-sizing: border-box;
+      font-size: 100%;
+    }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  span,
-  a {
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-  }
+    body {
+      background: pintig.key-create('body-fill', pintig.token-get('background'));
+      color: pintig.key-create('body-ink', pintig.token-get('background-ink'));
+    }
+
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
 
-  main.content-wrap {
-    $margin: 15px;
-    width: calc(100% - #{$margin * 2});
-    max-width: pintig.key-create('content-wrap-max-width', pintig.primitive-token-get('dimension.xl'));
-    height: 100%;
-    display: pintig.key-create('content-wrap-display', flex);
-    flex-flow: column nowrap;
-    gap: pintig.key-create('content-wrap-gap', pintig.primitive-token-get('spacing.md'));
-    margin: 0 auto;
-    padding:
-      pintig.key-create('content-wrap-padding-y', pintig.primitive-token-get('spacing.lg'))
-      pintig.key-create('content-wrap-padding-x', pintig.primitive-token-get('spacing.none'));
-
-    // If grid
-    grid-template-columns: repeat(pintig.key-create('content-wrap-cols', 4), 1fr);
-
-    @include pintig.breakpoint-create('medium') {
-      @include pintig.key-bind('content-wrap-cols', repeat(8, 1fr));
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    span,
+    a {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
     }
 
-    @include pintig.breakpoint-create('large') {
-      @include pintig.key-bind('content-wrap-cols', repeat(12, 1fr));
+    main.content-wrap {
+      $margin: 15px;
+      width: calc(100% - #{$margin * 2});
+      max-width: pintig.key-create('content-wrap-max-width', pintig.primitive-token-get('dimension.xl'));
+      height: 100%;
+      display: pintig.key-create('content-wrap-display', flex);
+      flex-flow: column nowrap;
+      gap: pintig.key-create('content-wrap-gap', pintig.primitive-token-get('spacing.md'));
+      margin: 0 auto;
+      padding:
+        pintig.key-create('content-wrap-padding-y', pintig.primitive-token-get('spacing.lg'))
+        pintig.key-create('content-wrap-padding-x', pintig.primitive-token-get('spacing.none'));
+
+      // If grid
+      grid-template-columns: repeat(pintig.key-create('content-wrap-cols', 4), 1fr);
+
+      @include pintig.breakpoint-create('medium') {
+        @include pintig.key-bind('content-wrap-cols', repeat(8, 1fr));
+      }
+
+      @include pintig.breakpoint-create('large') {
+        @include pintig.key-bind('content-wrap-cols', repeat(12, 1fr));
+      }
     }
   }
 

package/_init-font-pack.scss

@@ -12,7 +12,7 @@
   }
 
   @if list.index($family-list, 'family.sans-serif') {
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
   }
 
   @if list.index($family-list, 'family.serif') {

package/ms-badge/_badge-styles.scss

@@ -17,17 +17,19 @@
   $typography: pintig.theme-merge(theme.$init-typography, $typography);
   $settings: pintig.theme-merge(theme.$init-settings, $settings);
 
-  @include base.init() {
-    @include pintig.color-apply('badge', $color);
-    @include pintig.struct-apply('badge', $struct);
-    @include pintig.typography-bind('badge', $typography);
+  @layer components {
+    @include base.init() {
+      @include pintig.color-apply('badge', $color);
+      @include pintig.struct-apply('badge', $struct);
+      @include pintig.typography-bind('badge', $typography);
 
-    &:where(.is-outlined) {
-      @include pintig.color-bind('badge', (
-        fill: transparent,
-        ink: pintig.theme-get($color, 'fill'),
-        border: pintig.theme-get($color, 'border')
-      ));
+      &:where(.is-outlined) {
+        @include pintig.color-bind('badge', (
+          fill: transparent,
+          ink: pintig.theme-get($color, 'fill'),
+          border: pintig.theme-get($color, 'border')
+        ));
+      }
     }
   }
 }

package/ms-button/_button-base.scss

@@ -20,7 +20,7 @@
     outline: pintig.key-create('button-outline', none);
 
     -webkit-appearance: caret;
-    @include pintig.prefix(transition, all var(--ms-transition-time) ease);
+    @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
 
     @content;
 

package/ms-button/_button-mixins.scss

@@ -17,30 +17,30 @@
       ink: $fill,
       border: transparent
     ));
-    @include pintig.key-bind('button-outline', 2px solid rgba(_raw($fill), pintig.$color-fill-default-opacity));
+    @include pintig.key-bind('button-outline', 2px solid rgb(from _raw($fill) r g b / pintig.$color-fill-default-opacity));
 
     &:hover {
       @include pintig.color-bind('button', (
-        fill: _smart-alpha-color($fill, pintig.$color-fill-hover-opacity),
+        fill: _alpha($fill, pintig.$color-fill-hover-opacity),
         ink: $fill,
-        border: _smart-alpha-color($border, pintig.$color-border-hover-opacity, $type: 'border')
+        border: _alpha($border, pintig.$color-border-hover-opacity, $type: 'border')
       ));
     }
 
     &:focus {
       @include pintig.color-bind('button', (
-        fill: _smart-alpha-color($fill, pintig.$color-fill-focus-opacity),
+        fill: _alpha($fill, pintig.$color-fill-focus-opacity),
         ink: $fill,
-        border: _smart-alpha-color($border, pintig.$color-border-focus-opacity, $type: 'border')
+        border: _alpha($border, pintig.$color-border-focus-opacity, $type: 'border')
       ));
-      @include pintig.key-bind('button-outline', 2px solid rgba(_raw($fill), pintig.$color-outline-focus-opacity));
+      @include pintig.key-bind('button-outline', 2px solid rgb(from _raw($fill) r g b / pintig.$color-outline-focus-opacity));
     }
 
     &:active {
       @include pintig.color-bind('button', (
-        fill: _smart-alpha-color($fill, pintig.$color-fill-active-opacity),
+        fill: _alpha($fill, pintig.$color-fill-active-opacity),
         ink: $fill,
-        border: _smart-alpha-color($border, pintig.$color-border-active-opacity, $type: 'border')
+        border: _alpha($border, pintig.$color-border-active-opacity, $type: 'border')
       ));
     }
   }
@@ -74,15 +74,15 @@
       ink: $fill,
       border: $border
     ));
-    @include pintig.key-bind('button-outline', 2px solid rgba(_raw($fill), pintig.$color-fill-default-opacity));
+    @include pintig.key-bind('button-outline', 2px solid rgb(from _raw($fill) r g b / pintig.$color-fill-default-opacity));
 
     &:focus {
       @include pintig.color-bind('button', (
-        fill: _smart-alpha-color($fill, pintig.$color-fill-focus-opacity),
+        fill: _alpha($fill, pintig.$color-fill-focus-opacity),
         ink: $fill,
         border: $border
       ));
-      @include pintig.key-bind('button-outline', 2px solid rgba(_raw($fill), pintig.$color-outline-focus-opacity));
+      @include pintig.key-bind('button-outline', 2px solid rgb(from _raw($fill) r g b / pintig.$color-outline-focus-opacity));
     }
 
     &:hover {
@@ -131,7 +131,7 @@
       ink: $ink,
       border: $border
     ));
-    @include pintig.key-bind('button-outline', 2px solid rgba(_raw($fill), pintig.$color-fill-default-opacity));
+    @include pintig.key-bind('button-outline', 2px solid rgb(from _raw($fill) r g b / pintig.$color-fill-default-opacity));
 
     &:hover {
       @include pintig.color-bind('button', (
@@ -147,7 +147,7 @@
         ink: $ink,
         border: $border-focus
       ));
-      @include pintig.key-bind('button-outline', 2px solid rgba(_raw($fill), pintig.$color-outline-focus-opacity));
+      @include pintig.key-bind('button-outline', 2px solid rgb(from _raw($fill) r g b / pintig.$color-outline-focus-opacity));
     }
 
     &:active {
@@ -168,17 +168,10 @@
   }
 }
 
-@function _smart-alpha-color($query, $opacity, $type: 'fill', $state: 'hover') {
-  $_tones: ('hover': 400, 'active': 600);
-  $_color: string.slice($query, 1, (string.length($query) - 4));
-  // $_tone: string.slice($query, (string.length($_color) + 2), (string.length($query)));
-  @if $type == 'border' { @return rgba(#fff, 0%); }
-  @if pintig.token-check('#{$_color}-alpha-#{map.get($_tones, $state)}') {
-    @return pintig.token-get('#{$_color}-alpha-#{map.get($_tones, $state)}');
-  }
-  @return _raw($query, $opacity);
+@function _alpha($query, $opacity, $type: 'fill', $state: 'hover') {
+  @return rgb(from _raw($query) r g b / $opacity);
 }
 
 @function _raw($query) {
-  @return pintig.token-switch-raw($query);
+  @return pintig.token-switch($query);
 }