@matteusan/himig 1.7.4 → 1.8.1

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

@@ -17,12 +17,13 @@
 
     &:has(.ms-select-field__label) {
       .ms-select-field__input {
-        padding-top: calc(#{$top-padding} + 1rem) !important;
+        padding-block-start: calc(#{$top-padding} + 1rem) !important;
       }
     }
 
     &:has(.ms-select-field__input:focus),
-    &:has(.ms-select-field__input:valid), {
+    &:has(.ms-select-field__input:valid),
+    &:has(.ms-select-field__input > option:checked),{
       .ms-select-field__label {
         top: math.div($top-label-distance, 2) !important;
         @include pintig.typography-bind('select-field-label', (
@@ -71,7 +72,7 @@
       resize: none;
       cursor: text;
       -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'));
     }
 
     .ms-select-field__helper {
@@ -84,7 +85,7 @@
         weight: inherit,
         line-height: inherit,
       ));
-      @include pintig.prefix(transition, all var(--ms-transition-time) ease);
+      @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
     }
   }
 }

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

@@ -20,112 +20,78 @@
 
   $resolve-padding: if(list.length(pintig.theme-get($struct, 'padding')) >= 2, list.nth(pintig.theme-get($struct, 'padding'), 2), list.nth(pintig.theme-get($struct, 'padding'), 1));
 
-  @include base.init(
-    pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding),
-    pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding),
-    pintig.primitive-token-switch('padding.#{list.nth(pintig.theme-get($struct, 'padding'), 1)}', list.nth(pintig.theme-get($struct, 'padding'), 1)),
-  ) {
-    @include pintig.color-bind('select-field-label', (
-      ink: pintig.theme-get($color, 'ink'),
-    ));
-    @include pintig.typography-bind('select-field-label', (
-      family: pintig.theme-get($typography, 'family'),
-      size: pintig.theme-get($typography, 'size', 'label'),
-      weight: pintig.theme-get($typography, 'weight'),
-      line-height: pintig.theme-get($typography, 'height'),
-    ));
-
-    @include pintig.struct-bind('select-field', (
-      width: pintig.theme-get($struct, 'width'),
-      padding: pintig.theme-get($struct, 'padding'),
-      radius: pintig.theme-get($struct, 'radius'),
-      border-width: pintig.theme-get($struct, 'border-width'),
-      border-style: pintig.theme-get($struct, 'border-style'),
-      gap: pintig.theme-get($struct, 'gap'),
-    ));
-    @include pintig.typography-bind('select-field', (
-      family: pintig.theme-get($typography, 'family'),
-      size: pintig.theme-get($typography, 'size', 'default'),
-      weight: pintig.theme-get($typography, 'weight'),
-      line-height: pintig.theme-get($typography, 'height'),
-    ));
-
-    @include pintig.color-bind('select-field-helper', (
-      ink: pintig.theme-get($color, 'ink', 'helper'),
-    ));
-    @include pintig.typography-bind('select-field-helper', (
-      family: pintig.theme-get($typography, 'family'),
-      size: pintig.theme-get($typography, 'size', 'helper'),
-      weight: pintig.theme-get($typography, 'weight'),
-      line-height: pintig.theme-get($typography, 'height'),
-    ));
-
-    &:has(.ms-select-field__input:not(:read-only):not(:disabled)) {
-      .ms-select-field__label {
-        @include pintig.color-ink('select-field-label', pintig.theme-get($color, 'ink'), 'bind');
-      }
-
-      .ms-select-field__helper {
-        @include pintig.color-ink('select-field-helper', pintig.theme-get($color, 'ink', 'helper'), 'bind');
-      }
-    }
+  @layer components {
+    @include base.init(
+      pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding),
+      pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding),
+      pintig.primitive-token-switch('padding.#{list.nth(pintig.theme-get($struct, 'padding'), 1)}', list.nth(pintig.theme-get($struct, 'padding'), 1)),
+    ) {
+      @include pintig.typography-bind('select-field-label', (
+        family: pintig.theme-get($typography, 'family'),
+        size: pintig.theme-get($typography, 'size', 'label'),
+        weight: pintig.theme-get($typography, 'weight'),
+        line-height: pintig.theme-get($typography, 'height'),
+      ));
 
-    &:has(.ms-select-field__input:read-only:disabled) {
-      .ms-select-field__label {
-        @include pintig.color-ink('select-field-label', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
-      }
+      @include pintig.struct-bind('select-field', (
+        width: pintig.theme-get($struct, 'width'),
+        padding: pintig.theme-get($struct, 'padding'),
+        radius: pintig.theme-get($struct, 'radius'),
+        border-width: pintig.theme-get($struct, 'border-width'),
+        border-style: pintig.theme-get($struct, 'border-style'),
+        gap: pintig.theme-get($struct, 'gap'),
+      ));
+      @include pintig.typography-bind('select-field', (
+        family: pintig.theme-get($typography, 'family'),
+        size: pintig.theme-get($typography, 'size', 'default'),
+        weight: pintig.theme-get($typography, 'weight'),
+        line-height: pintig.theme-get($typography, 'height'),
+      ));
 
-      .ms-select-field__helper {
-        @include pintig.color-ink('select-field-helper', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
-      }
-    }
+      @include pintig.color-bind('select-field-helper', (
+        ink: pintig.theme-get($color, 'ink', 'helper'),
+      ));
+      @include pintig.typography-bind('select-field-helper', (
+        family: pintig.theme-get($typography, 'family'),
+        size: pintig.theme-get($typography, 'size', 'helper'),
+        weight: pintig.theme-get($typography, 'weight'),
+        line-height: pintig.theme-get($typography, 'height'),
+      ));
 
-    .ms-select-field__input {
-      &:not(:disabled),
-      &:not(:read-only) {
-        @include pintig.color-bind('select-field', (
-          fill: pintig.theme-get($color, 'fill'),
-          ink: pintig.theme-get($color, 'ink'),
-          border: pintig.theme-get($color, 'border'),
-        ));
+      &:has(.ms-select-field__input:read-only),
+      &:has(.ms-select-field__input:disabled) {
+        .ms-select-field__label {
+          @include pintig.color-ink('select-field-label', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
+        }
 
-        &:focus {
-          @include pintig.color-bind('select-field', (
-            fill: pintig.theme-get($color, 'fill', 'focus'),
-            border: pintig.theme-get($color, 'border', 'focus'),
-          ));
-          @include pintig.struct-bind('select-field', (
-            border-width: pintig.theme-get($struct, 'border-width', 'focus'),
-          ));
+        .ms-select-field__helper {
+          @include pintig.color-ink('select-field-helper', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
         }
       }
 
-      &:disabled {
-        @include pintig.color-bind('select-field', (
-          fill: pintig.theme-get($color, 'fill', 'disabled'),
-          ink: pintig.theme-get($color, 'ink', 'disabled'),
-          border: pintig.theme-get($color, 'border', 'disabled'),
-        ));
-        cursor: not-allowed;
-      }
-    }
+      &:has(.ms-select-field__input:not(:read-only)),
+      &:has(.ms-select-field__input:not(:disabled)) {
+        .ms-select-field__label {
+          @include pintig.color-ink('select-field-label', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
+        }
 
-    .ms-select-field__helper {
-      padding: 0.3rem pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding) 0;
-    }
+        .ms-select-field__helper {
+          @include pintig.color-ink('select-field-helper', pintig.theme-get($color, 'ink', 'helper'), 'bind');
+        }
+      }
 
-    &:where(.is-outlined) {
       .ms-select-field__input {
         &:not(:disabled),
         &:not(:read-only) {
           @include pintig.color-bind('select-field', (
-            fill: transparent,
+            fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill')) r g b / pintig.$color-fill-focus-opacity),
             ink: pintig.theme-get($color, 'ink'),
             border: pintig.theme-get($color, 'border'),
           ));
 
           &:focus {
             @include pintig.color-bind('select-field', (
+              fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'focus')) r g b / pintig.$color-fill-focus-opacity),
               border: pintig.theme-get($color, 'border', 'focus'),
             ));
             @include pintig.struct-bind('select-field', (
@@ -136,58 +102,59 @@
 
         &:disabled {
           @include pintig.color-bind('select-field', (
-            fill: transparent,
+            fill: pintig.theme-get($color, 'fill', 'disabled'),
             ink: pintig.theme-get($color, 'ink', 'disabled'),
-            border: pintig.theme-get($color, 'fill', 'disabled'),
+            border: pintig.theme-get($color, 'border', 'disabled'),
           ));
+          cursor: not-allowed;
         }
       }
 
+      .ms-select-field__helper {
+        padding: 0.3rem pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding) 0;
+      }
+
       &:where(.is-error) {
+        .ms-select-field__label {
+          @include pintig.color-bind('select-field-label', (
+            ink: rgb(from pintig.token-switch(pintig.theme-get($color, 'ink', 'error')) r g b / 70%) !important,
+          ));
+        }
+
         .ms-select-field__input:not(:disabled),
         .ms-select-field__input:not(:read-only) {
           @include pintig.color-bind('select-field', (
-            fill: rgba(0 0 0 / 0) !important,
-            border: 'error-alpha-400',
+            fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'error')) r g b / pintig.$color-fill-focus-opacity),
+            ink: pintig.theme-get($color, 'ink', 'error'),
+            border: pintig.theme-get($color, 'border', 'error'),
           ));
-        }
-      }
-    }
 
-    &:where(.is-error) {
-      .ms-select-field__input:not(:disabled),
-      .ms-select-field__input:not(:read-only) {
-        @include pintig.color-bind('select-field', (
-          fill: 'error-alpha-300',
-          ink: 'error-400',
-          border: 'error-alpha-400'
-        ));
+          &:focus {
+            @include pintig.color-bind('select-field', (
+              fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'error', 'focus')) r g b / pintig.$color-fill-focus-opacity),
+              border: pintig.theme-get($color, 'border', 'error', 'focus'),
+            ));
+          }
 
-        &:focus {
-          @include pintig.color-bind('select-field', (
-            fill: 'error-alpha-300',
-            border: 'error-400'
-          ));
+          + .ms-select-field__helper {
+            @include pintig.color-bind('select-field-helper', (
+              ink: pintig.theme-get($color, 'ink', 'error'),
+            ));
+          }
         }
 
-        + .ms-select-field__helper {
+        .ms-select-field__helper {
           @include pintig.color-bind('select-field-helper', (
-            ink: 'error-400',
+            ink: pintig.theme-get($color, 'ink', 'helper'),
           ));
         }
       }
 
-      .ms-select-field__helper {
-        @include pintig.color-bind('select-field-helper', (
-          ink: pintig.theme-get($color, 'ink', 'helper'),
+      &:where(.is-raised) {
+        @include pintig.struct-bind('select-field', (
+          shadow: 'xs',
         ));
       }
     }
-
-    &:where(.is-raised) {
-      @include pintig.struct-bind('select-field', (
-        shadow: 'xs',
-      ));
-    }
   }
 }

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

@@ -4,12 +4,12 @@
 
 $init-color: (
   fill: (
-    default: 'surface-alpha-800',
-    focus: 'accent-alpha-300',
+    default: 'surface-400',
+    focus: 'accent-400',
     disabled: 'disabled',
     error: (
-      default: 'error-alpha-300',
-      focus: 'error-alpha-400'
+      default: 'error-800',
+      focus: 'error-800'
     )
   ),
   ink: (
@@ -23,7 +23,7 @@ $init-color: (
     focus: 'accent-400',
     disabled: 'disabled',
     error: (
-      default: 'error-alpha-800',
+      default: 'error-800',
       focus: 'error-400'
     )
   ),
@@ -34,8 +34,8 @@ $init-struct: (
   padding: ('md', 'lg'),
   radius: 'small',
   border-width: (
-    'default': 2px,
-    'focus': 2px
+    'default': 'xs',
+    'focus': 'xs'
   ),
   border-style: solid,
   gap: 'sm'

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

@@ -11,7 +11,7 @@
     flex-flow: row nowrap;
     align-items: center;
     gap: pintig.key-create('tick-field-gap', 0.5rem);
-    transition: all var(--ms-transition-time) ease;
+    transition: all pintig.token-get('time-short') pintig.token-get('easing');
 
     @content;
 
@@ -20,7 +20,7 @@
       place-content: center;
       @include pintig.struct-radius('tick-field-input', inherit);
       @include pintig.color-apply('tick-field-input', pintig.$color-inherit-template);
-      transition: all var(--ms-transition-time) ease;
+      transition: all pintig.token-get('time-short') pintig.token-get('easing');
       @include pintig.prefix('appearance', none);
       outline: none;
 

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

@@ -18,74 +18,76 @@
   $typography: pintig.theme-merge(theme.$init-typography, $typography);
   $settings: pintig.theme-merge(theme.$init-settings, $settings);
 
-  @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'),
-    ));
-    @include pintig.struct-apply('tick-field', $struct);
-    @include pintig.typography-bind('tick-field', $typography);
-    @include pintig.typography-bind('tick-field-helper', (
-      family: pintig.theme-get($typography, 'family'),
-      size: pintig.theme-get($typography, 'size', 'helper'),
-      weight: pintig.theme-get($typography, 'weight'),
-      line-height: pintig.theme-get($typography, 'line-height'),
-    ));
-
-    @include pintig.struct-bind('tick-field-text', (
-      gap: pintig.theme-get($struct, 'gap', 'text'),
-    ));
-
-    &:hover,
-    &:has(.ms-tick-field__input:focus) {
-      @include pintig.color-bind('tick-field', (
-        fill: pintig.theme-get($color, 'fill', 'hover'),
-        border: pintig.theme-get($color, 'border', 'hover'),
+  @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'),
       ));
-    }
-
-    &:has(.ms-tick-field__input:checked) {
-      @include pintig.color-bind('tick-field', (
-        fill: pintig.theme-get($color, 'fill', 'checked'),
-        border: pintig.theme-get($color, 'border', 'checked'),
+      @include pintig.struct-apply('tick-field', $struct);
+      @include pintig.typography-bind('tick-field', $typography);
+      @include pintig.typography-bind('tick-field-helper', (
+        family: pintig.theme-get($typography, 'family'),
+        size: pintig.theme-get($typography, 'size', 'helper'),
+        weight: pintig.theme-get($typography, 'weight'),
+        line-height: pintig.theme-get($typography, 'line-height'),
       ));
-    }
 
-    .ms-tick-field__input {
-      @include pintig.struct-apply('tick-field-input', (
-        width: 1.5rem,
-        height: 1.5rem,
-        margin: 0,
-        border-width: 'sm',
-        border-style: 'solid'
+      @include pintig.struct-bind('tick-field-text', (
+        gap: pintig.theme-get($struct, 'gap', 'text'),
       ));
-      @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'),
-      ));
-
-      &[type='checkbox'] {
-        @include pintig.struct-radius('tick-field-input', pintig.theme-get($struct, 'radius', 'input', 'checkbox'), 'bind');
-      }
 
-      &[type='radio'] {
-        @include pintig.struct-radius('tick-field-input', pintig.theme-get($struct, 'radius', 'input', 'radio'), 'bind');
+      &: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),
+        ));
       }
 
-      &:hover,
-      &:focus {
-        @include pintig.color-fill('tick-field-input', pintig.theme-get($color, 'fill', 'input', 'hover'), 'bind');
-        @include pintig.color-border('tick-field-input', pintig.theme-get($color, 'border', 'input', 'hover'), 'bind');
+      &: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'),
+        ));
       }
 
-      &:checked {
+      .ms-tick-field__input {
+        @include pintig.struct-apply('tick-field-input', (
+          width: 1.5rem,
+          height: 1.5rem,
+          margin: 0,
+          border-width: 'sm',
+          border-style: 'solid'
+        ));
         @include pintig.color-bind('tick-field-input', (
-          fill: pintig.theme-get($color, 'fill', 'input', 'checked'),
+          fill: pintig.theme-get($color, 'fill', 'input'),
           ink: pintig.theme-get($color, 'ink', 'input'),
-          border: pintig.theme-get($color, 'border', 'input', 'checked'),
+          border: pintig.theme-get($color, 'border', 'input'),
         ));
+
+        &[type='checkbox'] {
+          @include pintig.struct-radius('tick-field-input', pintig.theme-get($struct, 'radius', 'input', 'checkbox'), 'bind');
+        }
+
+        &[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,11 +5,11 @@
 $init-color: (
   fill: (
     default: rgba(0 0 0 / 0),
-    hover: 'accent-alpha-300',
-    checked: 'accent-alpha-300',
+    hover: 'accent-300',
+    checked: 'accent-300',
     input: (
       default: rgba(0 0 0 / 0),
-      hover: 'accent-alpha-400',
+      hover: 'accent-400',
       checked: 'accent-400'
     ),
   ),
@@ -19,11 +19,11 @@ $init-color: (
   ),
   border: (
     default: 'surface-300',
-    hover: 'accent-alpha-600',
+    hover: 'accent-600',
     checked: 'accent-400',
     input: (
       default: 'surface-300',
-      hover: 'accent-alpha-600',
+      hover: 'accent-600',
       checked: 'accent-400',
     )
   ),
@@ -42,7 +42,7 @@ $init-struct: (
       radio: 'pill'
     )
   ),
-  padding: ('md' 'lg'),
+  padding: ('lg'),
   gap: (
     default: 0.7rem,
     text: 0.3rem

package/ms-utils/_color-utils.scss

@@ -20,56 +20,58 @@ $_tones: (200, 300, 400, 600, 800, 'ink');
 @mixin color($include: (), $exclude: ()) {
   $utils-to-render: helpers.handle-include-exclude(('fill', 'ink', 'border'), $include, $exclude);
 
-  // Background color
-  @if list.index($utils-to-render, 'fill') {
-    @each $color in $_colors {
-      @each $tone in $_tones {
-        .fill-#{$color}-#{$tone} {
-          background-color: pintig.token-get('#{$color}-#{$tone}');
-        }
+  @layer utils {
+    // Background color
+    @if list.index($utils-to-render, 'fill') {
+      @each $color in $_colors {
+        @each $tone in $_tones {
+          .fill-#{$color}-#{$tone} {
+            background-color: pintig.token-get('#{$color}-#{$tone}');
+          }
 
-        @each $breakpoint in $_breakpoints {
-          .\@#{$breakpoint}\:fill-#{$color}-#{$tone} {
-            @include pintig.breakpoint-create($breakpoint) {
-              background-color: pintig.token-get('#{$color}-#{$tone}') !important;
+          @each $breakpoint in $_breakpoints {
+            .\@#{$breakpoint}\:fill-#{$color}-#{$tone} {
+              @include pintig.breakpoint-create($breakpoint) {
+                background-color: pintig.token-get('#{$color}-#{$tone}') !important;
+              }
             }
           }
         }
       }
     }
-  }
 
-  // Text color
-  @if list.index($utils-to-render, 'ink') {
-    @each $color in $_colors {
-      @each $tone in $_tones {
-        .ink-#{$color}-#{$tone} {
-          color: pintig.token-get('#{$color}-#{$tone}');
-        }
+    // Text color
+    @if list.index($utils-to-render, 'ink') {
+      @each $color in $_colors {
+        @each $tone in $_tones {
+          .ink-#{$color}-#{$tone} {
+            color: pintig.token-get('#{$color}-#{$tone}');
+          }
 
-        @each $breakpoint in $_breakpoints {
-          .\@#{$breakpoint}\:ink-#{$color}-#{$tone} {
-            @include pintig.breakpoint-create($breakpoint) {
-              color: pintig.token-get('#{$color}-#{$tone}') !important;
+          @each $breakpoint in $_breakpoints {
+            .\@#{$breakpoint}\:ink-#{$color}-#{$tone} {
+              @include pintig.breakpoint-create($breakpoint) {
+                color: pintig.token-get('#{$color}-#{$tone}') !important;
+              }
             }
           }
         }
       }
     }
-  }
 
-  // Border color
-  @if list.index($utils-to-render, 'border') {
-    @each $color in $_colors {
-      @each $tone in $_tones {
-        .border-#{$color}-#{$tone} {
-          border-color: pintig.token-get('#{$color}-#{$tone}');
-        }
+    // Border color
+    @if list.index($utils-to-render, 'border') {
+      @each $color in $_colors {
+        @each $tone in $_tones {
+          .border-#{$color}-#{$tone} {
+            border-color: pintig.token-get('#{$color}-#{$tone}');
+          }
 
-        @each $breakpoint in $_breakpoints {
-          .\@#{$breakpoint}\:border-#{$color}-#{$tone} {
-            @include pintig.breakpoint-create($breakpoint) {
-              border-color: pintig.token-get('#{$color}-#{$tone}') !important;
+          @each $breakpoint in $_breakpoints {
+            .\@#{$breakpoint}\:border-#{$color}-#{$tone} {
+              @include pintig.breakpoint-create($breakpoint) {
+                border-color: pintig.token-get('#{$color}-#{$tone}') !important;
+              }
             }
           }
         }