@matteusan/himig 1.3.4 → 1.4.1

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 @use 'sass:list';
 @use 'form-field-base' as base;
 @use 'form-field-theme' as theme;
@@ -31,107 +31,107 @@
   $typography: (),
   $settings: ()
 ) {
-  $color: ms-core.theme-merge(theme.$init-color, $color);
-  $struct: ms-core.theme-merge(theme.$init-struct, $struct);
-  $typography: ms-core.theme-merge(theme.$init-typography, $typography);
-  $settings: ms-core.theme-merge(theme.$init-settings, $settings);
+  $color: pintig.theme-merge(theme.$init-color, $color);
+  $struct: pintig.theme-merge(theme.$init-struct, $struct);
+  $typography: pintig.theme-merge(theme.$init-typography, $typography);
+  $settings: pintig.theme-merge(theme.$init-settings, $settings);
 
-  $resolve-padding: if(list.length(ms-core.theme-get($struct, 'padding')) >= 2, list.nth(ms-core.theme-get($struct, 'padding'), 2), list.nth(ms-core.theme-get($struct, 'padding'), 1));
+  $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(
-    ms-core.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding),
-    ms-core.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding),
-    ms-core.primitive-token-switch('padding.#{list.nth(ms-core.theme-get($struct, 'padding'), 1)}', list.nth(ms-core.theme-get($struct, 'padding'), 1)),
+    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)),
   ) {
     .ms-form-field__label {
-      @include ms-core.color-bind('form-field-label', (
-        ink: ms-core.theme-get($color, 'ink', 'disabled'),
+      @include pintig.color-bind('form-field-label', (
+        ink: pintig.theme-get($color, 'ink', 'disabled'),
       ));
-      @include ms-core.typography-bind('form-field-label', (
-        family: ms-core.theme-get($typography, 'family'),
-        size: ms-core.theme-get($typography, 'size', 'label'),
-        weight: ms-core.theme-get($typography, 'weight'),
-        line-height: ms-core.theme-get($typography, 'height'),
+      @include pintig.typography-bind('form-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'),
       ));
       user-select: none;
     }
 
     &:has(.ms-form-field__input:not(:read-only):not(:disabled)) {
       .ms-form-field__label {
-        @include ms-core.color-bind('form-field-label', (
-          ink: ms-core.theme-get($color, 'ink'),
+        @include pintig.color-bind('form-field-label', (
+          ink: pintig.theme-get($color, 'ink'),
         ));
       }
     }
 
     &:has(.ms-form-field__input:read-only:disabled) {
-      @include ms-core.color-ink('form-field-helper', ms-core.theme-get($color, 'ink', 'disabled'), 'bind');
+      @include pintig.color-ink('form-field-helper', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
     }
 
     .ms-form-field__input {
-      @include ms-core.struct-bind('form-field', (
-        width: ms-core.theme-get($struct, 'width'),
-        padding: ms-core.theme-get($struct, 'padding'),
-        radius: ms-core.theme-get($struct, 'radius'),
-        border-width: ms-core.theme-get($struct, 'border-width'),
-        border-style: ms-core.theme-get($struct, 'border-style'),
-        gap: ms-core.theme-get($struct, 'gap'),
+      @include pintig.struct-bind('form-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 ms-core.typography-bind('form-field', (
-        family: ms-core.theme-get($typography, 'family'),
-        size: ms-core.theme-get($typography, 'size', 'default'),
-        weight: ms-core.theme-get($typography, 'weight'),
-        line-height: ms-core.theme-get($typography, 'height'),
+      @include pintig.typography-bind('form-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'),
       ));
 
       &:not(:read-only),
       &:not(:disabled) {
-        @include ms-core.color-bind('form-field', (
-          fill: ms-core.theme-get($color, 'fill'),
-          ink: ms-core.theme-get($color, 'ink'),
-          border: ms-core.theme-get($color, 'border'),
+        @include pintig.color-bind('form-field', (
+          fill: pintig.theme-get($color, 'fill'),
+          ink: pintig.theme-get($color, 'ink'),
+          border: pintig.theme-get($color, 'border'),
         ));
 
         &:focus {
-          @include ms-core.color-bind('form-field', (
-            fill: ms-core.theme-get($color, 'fill', 'hover'),
-            border: ms-core.theme-get($color, 'border', 'focus'),
+          @include pintig.color-bind('form-field', (
+            fill: pintig.theme-get($color, 'fill', 'hover'),
+            border: pintig.theme-get($color, 'border', 'focus'),
           ));
-          @include ms-core.struct-bind('form-field', (
-            border-width: ms-core.theme-get($struct, 'border-width', 'focus'),
+          @include pintig.struct-bind('form-field', (
+            border-width: pintig.theme-get($struct, 'border-width', 'focus'),
           ));
         }
       }
 
       &:read-only,
       &:disabled {
-        @include ms-core.color-bind('form-field', (
-          fill: ms-core.theme-get($color, 'fill', 'disabled'),
-          ink: ms-core.theme-get($color, 'ink', 'disabled'),
-          border: ms-core.theme-get($color, 'fill', 'disabled'),
+        @include pintig.color-bind('form-field', (
+          fill: pintig.theme-get($color, 'fill', 'disabled'),
+          ink: pintig.theme-get($color, 'ink', 'disabled'),
+          border: pintig.theme-get($color, 'fill', 'disabled'),
         ));
         cursor: not-allowed;
       }
     }
 
     .ms-form-field__helper {
-      padding: 0.3rem ms-core.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding) 0;
-      @include ms-core.color-bind('form-field-helper', (
-        ink: ms-core.theme-get($color, 'ink', 'helper'),
+      padding: 0.3rem pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding) 0;
+      @include pintig.color-bind('form-field-helper', (
+        ink: pintig.theme-get($color, 'ink', 'helper'),
       ));
-      @include ms-core.typography-bind('form-field-helper', (
-        family: ms-core.theme-get($typography, 'family'),
-        size: ms-core.theme-get($typography, 'size', 'helper'),
-        weight: ms-core.theme-get($typography, 'weight'),
-        line-height: ms-core.theme-get($typography, 'height'),
+      @include pintig.typography-bind('form-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'),
       ));
     }
 
     &:where(.is-outlined) {
       &:has(.ms-form-field__input:not(:read-only):not(:disabled)) {
         .ms-form-field__label {
-          @include ms-core.color-bind('form-field-label', (
-            ink: ms-core.theme-get($color, 'ink'),
+          @include pintig.color-bind('form-field-label', (
+            ink: pintig.theme-get($color, 'ink'),
           ));
         }
       }
@@ -139,28 +139,28 @@
       .ms-form-field__input {
         &:not(:read-only),
         &:not(:disabled) {
-          @include ms-core.color-bind('form-field', (
+          @include pintig.color-bind('form-field', (
             fill: rgba(0 0 0 / 0) !important,
-            ink: ms-core.theme-get($color, 'ink'),
-            border: ms-core.theme-get($color, 'border'),
+            ink: pintig.theme-get($color, 'ink'),
+            border: pintig.theme-get($color, 'border'),
           ));
 
           &:focus {
-            @include ms-core.color-bind('form-field', (
-              border: ms-core.theme-get($color, 'border', 'focus'),
+            @include pintig.color-bind('form-field', (
+              border: pintig.theme-get($color, 'border', 'focus'),
             ));
-            @include ms-core.struct-bind('form-field', (
-              border-width: ms-core.theme-get($struct, 'border-width', 'focus'),
+            @include pintig.struct-bind('form-field', (
+              border-width: pintig.theme-get($struct, 'border-width', 'focus'),
             ));
           }
         }
 
         &:read-only,
         &:disabled {
-          @include ms-core.color-bind('form-field', (
+          @include pintig.color-bind('form-field', (
             fill: transparent,
-            ink: ms-core.theme-get($color, 'ink', 'disabled'),
-            border: ms-core.theme-get($color, 'fill', 'disabled'),
+            ink: pintig.theme-get($color, 'ink', 'disabled'),
+            border: pintig.theme-get($color, 'fill', 'disabled'),
           ));
         }
       }
@@ -168,7 +168,7 @@
       &:where(.is-error) {
         .ms-form-field__input:not(:read-only),
         .ms-form-field__input:not(:disabled) {
-          @include ms-core.color-bind('form-field', (
+          @include pintig.color-bind('form-field', (
             fill: rgba(0 0 0 / 0) !important,
             border: 'error-alpha-600',
           ));
@@ -178,14 +178,14 @@
 
     &:where(.is-error) {
       .ms-form-field__label {
-        @include ms-core.color-bind('form-field-label', (
-          ink: ms-core.theme-get($color, 'ink', 'disabled'),
+        @include pintig.color-bind('form-field-label', (
+          ink: pintig.theme-get($color, 'ink', 'disabled'),
         ));
       }
 
       &:has(.ms-form-field__input:not(:read-only):not(:disabled)) {
         .ms-form-field__label {
-          @include ms-core.color-bind('form-field-label', (
+          @include pintig.color-bind('form-field-label', (
             ink: 'error-400',
           ));
         }
@@ -193,14 +193,14 @@
 
       .ms-form-field__input:not(:disabled),
       .ms-form-field__input:not(:read-only) {
-        @include ms-core.color-bind('form-field', (
+        @include pintig.color-bind('form-field', (
           fill: 'error-alpha-300',
           ink: 'error-400',
           border: 'error-alpha-400'
         ));
 
         &:focus {
-          @include ms-core.color-bind('form-field', (
+          @include pintig.color-bind('form-field', (
             fill: 'error-alpha-300',
             border: 'error-400'
           ));
@@ -208,14 +208,14 @@
       }
 
       .ms-form-field__helper {
-        @include ms-core.color-bind('form-field-helper', (
+        @include pintig.color-bind('form-field-helper', (
           ink: 'error-400',
         ));
       }
     }
 
     &:where(.is-raised) {
-      @include ms-core.struct-bind('form-field', (
+      @include pintig.struct-bind('form-field', (
         shadow: 'xs',
       ));
     }

package/ms-list/_list-base.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 
 @mixin init() {
   .ms-list {
@@ -35,12 +35,12 @@
       flex-flow: row nowrap;
       align-items: center;
       list-style: none;
-      @include ms-core.color-apply('list-item', (
+      @include pintig.color-apply('list-item', (
         fill: rgba(0 0 0 / 0),
         ink: currentColor,
         border: rgba(0 0 0 / 0),
       ));
-      @include ms-core.struct-apply('list-item', (
+      @include pintig.struct-apply('list-item', (
         width: (
           default: 100%,
           min: auto,
@@ -51,13 +51,13 @@
         border-style: 'solid',
         gap: 0
       ));
-      @include ms-core.typography-apply('list-item', (
+      @include pintig.typography-apply('list-item', (
         family: inherit,
         size: inherit,
         weight: inherit,
         line-height: inherit,
       ));
-      @include ms-core.prefix(transition, all var(--ms-transition-time) ease);
+      @include pintig.prefix(transition, all var(--ms-transition-time) ease);
     }
   }
 }

package/ms-list/_list-extend.scss

@@ -20,13 +20,13 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 
 /// Component variant maker.
 /// @param {string} $variants
 /// @return {*} extension class.
 @mixin extend($variants) {
-  @include ms-core.component-extend('list', $variants) {
+  @include pintig.component-extend('list', $variants) {
     @content;
   }
 }
@@ -35,19 +35,19 @@
 /// @param {map} $color-map
 /// @return {*} color styles.
 @mixin color($color-map) {
-  @include ms-core.color-bind('list', $color-map);
+  @include pintig.color-bind('list', $color-map);
 }
 
 /// Structure variant mixin.
 /// @param {map} $struct-map
 /// @return {*} struct styles.
 @mixin struct($struct-map) {
-  @include ms-core.struct-bind('list', $struct-map);
+  @include pintig.struct-bind('list', $struct-map);
 }
 
 /// Typography variant mixin.
 /// @param {map} $type-map
 /// @return {*} typography styles.
 @mixin typography($type-map) {
-  @include ms-core.typography-bind('list', $type-map);
+  @include pintig.typography-bind('list', $type-map);
 }

package/ms-list/_list-styles.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 @use 'list-base' as base;
 @use 'list-theme' as theme;
 
@@ -30,48 +30,48 @@
   $typography: (),
   $settings: ()
 ) {
-  $color: ms-core.theme-merge(theme.$init-color, $color);
-  $struct: ms-core.theme-merge(theme.$init-struct, $struct);
-  $typography: ms-core.theme-merge(theme.$init-typography, $typography);
-  $settings: ms-core.theme-merge(theme.$init-settings, $settings);
+  $color: pintig.theme-merge(theme.$init-color, $color);
+  $struct: pintig.theme-merge(theme.$init-struct, $struct);
+  $typography: pintig.theme-merge(theme.$init-typography, $typography);
+  $settings: pintig.theme-merge(theme.$init-settings, $settings);
 
   @include base.init() {
-    @include ms-core.color-bind('list-item', $color);
-    @include ms-core.struct-apply('list', (
-      radius: ms-core.theme-get($struct, 'radius'),
+    @include pintig.color-bind('list-item', $color);
+    @include pintig.struct-apply('list', (
+      radius: pintig.theme-get($struct, 'radius'),
     ));
-    @include ms-core.struct-bind('list-item', $struct);
-    @include ms-core.typography-bind('list-item', $typography);
+    @include pintig.struct-bind('list-item', $struct);
+    @include pintig.typography-bind('list-item', $typography);
 
     &:where(.is-selectable) {
       .ms-list__item {
         cursor: pointer;
 
         &:hover {
-          @include ms-core.color-bind('list-item', (
-            fill: ms-core.theme-get($color, 'fill', 'hover'),
-            border: ms-core.theme-get($color, 'border', 'hover')
+          @include pintig.color-bind('list-item', (
+            fill: pintig.theme-get($color, 'fill', 'hover'),
+            border: pintig.theme-get($color, 'border', 'hover')
           ));
         }
 
         &:focus {
-          @include ms-core.color-bind('list-item', (
-            fill: ms-core.theme-get($color, 'fill', 'focus'),
-            border: ms-core.theme-get($color, 'border', 'focus')
+          @include pintig.color-bind('list-item', (
+            fill: pintig.theme-get($color, 'fill', 'focus'),
+            border: pintig.theme-get($color, 'border', 'focus')
           ));
         }
 
         &:active {
-          @include ms-core.color-bind('list-item', (
-            fill: ms-core.theme-get($color, 'fill', 'active'),
-            border: ms-core.theme-get($color, 'border', 'active')
+          @include pintig.color-bind('list-item', (
+            fill: pintig.theme-get($color, 'fill', 'active'),
+            border: pintig.theme-get($color, 'border', 'active')
           ));
         }
       }
     }
 
     &:where(.is-raised) {
-      @include ms-core.struct-shadow('list', 'xs');
+      @include pintig.struct-shadow('list', 'xs');
     }
   }
 }

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 
 @use 'sass:math';
 
@@ -43,7 +43,7 @@
     &:has(.ms-select-field__input:valid), {
       .ms-select-field__label {
         top: math.div($top-label-distance, 2) !important;
-        @include ms-core.typography-bind('select-field-label', (
+        @include pintig.typography-bind('select-field-label', (
           family: 'small',
           size: 'small',
         ));
@@ -54,18 +54,18 @@
       position: absolute;
       top: calc(#{$top-label-distance});
       left: calc(#{$left-label-distance} + 2px);
-      @include ms-core.color-apply('select-field-label', (
+      @include pintig.color-apply('select-field-label', (
         fill: rgba(0 0 0 / 0),
         ink: inherit,
       ));
-      @include ms-core.struct-apply('select-field-label', (
+      @include pintig.struct-apply('select-field-label', (
         padding: ('xs' 'xs' 0 0),
       ));
-      @include ms-core.typography-apply('select-field-label', ms-core.$type-inherit-template);
+      @include pintig.typography-apply('select-field-label', pintig.$type-inherit-template);
     }
 
     .ms-select-field__input {
-      @include ms-core.struct-apply('select-field', (
+      @include pintig.struct-apply('select-field', (
         width: 100%,
         margin: inherit,
         radius: inherit,
@@ -73,13 +73,13 @@
         border-style: solid,
         shadow: 'none',
       ));
-      padding: ms-core.key-get('select-field-padding');
-      @include ms-core.color-apply('select-field', (
+      padding: pintig.key-get('select-field-padding');
+      @include pintig.color-apply('select-field', (
         fill: inherit,
         ink: inherit,
         border: inherit
       ));
-      @include ms-core.typography-apply('select-field', (
+      @include pintig.typography-apply('select-field', (
         family: inherit,
         size: inherit,
         weight: inherit,
@@ -89,20 +89,20 @@
       resize: none;
       cursor: text;
       -webkit-appearance: caret;
-      @include ms-core.prefix(transition, all var(--ms-transition-time) ease);
+      @include pintig.prefix(transition, all var(--ms-transition-time) ease);
     }
 
     .ms-select-field__helper {
-      @include ms-core.color-apply('select-field-helper', (
+      @include pintig.color-apply('select-field-helper', (
         ink: inherit,
       ));
-      @include ms-core.typography-apply('select-field-helper', (
+      @include pintig.typography-apply('select-field-helper', (
         family: inherit,
         size: inherit,
         weight: inherit,
         line-height: inherit,
       ));
-      @include ms-core.prefix(transition, all var(--ms-transition-time) ease);
+      @include pintig.prefix(transition, all var(--ms-transition-time) ease);
     }
   }
 }

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

@@ -20,13 +20,13 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 
 /// Component variant maker.
 /// @param {string} $variants
 /// @return {*} extension class.
 @mixin extend($variants) {
-  @include ms-core.component-extend('select-field', $variants) {
+  @include pintig.component-extend('select-field', $variants) {
     @content;
   }
 }
@@ -35,19 +35,19 @@
 /// @param {map} $color-map
 /// @return {*} color styles.
 @mixin color($color-map) {
-  @include ms-core.color-bind('select-field', $color-map);
+  @include pintig.color-bind('select-field', $color-map);
 }
 
 /// Structure variant mixin.
 /// @param {map} $struct-map
 /// @return {*} struct styles.
 @mixin struct($struct-map) {
-  @include ms-core.struct-bind('select-field', $struct-map);
+  @include pintig.struct-bind('select-field', $struct-map);
 }
 
 /// Typography variant mixin.
 /// @param {map} $type-map
 /// @return {*} typography styles.
 @mixin typography($type-map) {
-  @include ms-core.typography-bind('select-field', $type-map);
+  @include pintig.typography-bind('select-field', $type-map);
 }