@matteusan/himig 1.3.4 → 1.4.1

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 @use 'sass:list';
 @use 'select-field-base' as base;
 @use 'select-field-theme' as theme;
@@ -31,124 +31,124 @@
   $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)),
   ) {
-    @include ms-core.color-bind('select-field-label', (
-      ink: ms-core.theme-get($color, 'ink', 'disabled'),
+    @include pintig.color-bind('select-field-label', (
+      ink: pintig.theme-get($color, 'ink', 'disabled'),
     ));
-    @include ms-core.typography-bind('select-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('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 ms-core.struct-bind('select-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('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 ms-core.typography-bind('select-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('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 ms-core.color-bind('select-field-helper', (
-      ink: ms-core.theme-get($color, 'ink', 'helper'),
+    @include pintig.color-bind('select-field-helper', (
+      ink: pintig.theme-get($color, 'ink', 'helper'),
     ));
-    @include ms-core.typography-bind('select-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('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 ms-core.color-bind('select-field-label', (
-          ink: ms-core.theme-get($color, 'ink'),
+        @include pintig.color-bind('select-field-label', (
+          ink: pintig.theme-get($color, 'ink'),
         ));
       }
     }
 
     &:has(.ms-select-field__input:read-only:disabled) {
-      @include ms-core.color-ink('select-field-helper', ms-core.theme-get($color, 'ink', 'disabled'), 'bind');
+      @include pintig.color-ink('select-field-helper', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
     }
 
     .ms-select-field__input {
       &:not(:disabled),
       &:not(:read-only) {
-        @include ms-core.color-bind('select-field', (
-          fill: ms-core.theme-get($color, 'fill'),
-          ink: ms-core.theme-get($color, 'ink'),
-          border: ms-core.theme-get($color, 'fill'),
+        @include pintig.color-bind('select-field', (
+          fill: pintig.theme-get($color, 'fill'),
+          ink: pintig.theme-get($color, 'ink'),
+          border: pintig.theme-get($color, 'fill'),
         ));
 
         &:focus {
-          @include ms-core.color-bind('select-field', (
-            fill: ms-core.theme-get($color, 'fill', 'hover'),
-            border: ms-core.theme-get($color, 'border', 'focus'),
+          @include pintig.color-bind('select-field', (
+            fill: pintig.theme-get($color, 'fill', 'hover'),
+            border: pintig.theme-get($color, 'border', 'focus'),
           ));
-          @include ms-core.struct-bind('select-field', (
-            border-width: ms-core.theme-get($struct, 'border-width', 'focus'),
+          @include pintig.struct-bind('select-field', (
+            border-width: pintig.theme-get($struct, 'border-width', 'focus'),
           ));
         }
       }
 
       &:disabled {
-        @include ms-core.color-bind('select-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('select-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-select-field__helper {
-      padding: 0.3rem ms-core.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding) 0;
+      padding: 0.3rem pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding) 0;
     }
 
     &:where(.is-outlined) {
       .ms-select-field__input {
         &:not(:disabled),
         &:not(:read-only) {
-          @include ms-core.color-bind('select-field', (
+          @include pintig.color-bind('select-field', (
             fill: transparent,
-            ink: ms-core.theme-get($color, 'ink'),
-            border: ms-core.theme-get($color, 'fill'),
+            ink: pintig.theme-get($color, 'ink'),
+            border: pintig.theme-get($color, 'fill'),
           ));
 
           &:focus {
-            @include ms-core.color-bind('select-field', (
-              border: ms-core.theme-get($color, 'border', 'focus'),
+            @include pintig.color-bind('select-field', (
+              border: pintig.theme-get($color, 'border', 'focus'),
             ));
-            @include ms-core.struct-bind('select-field', (
-              border-width: ms-core.theme-get($struct, 'border-width', 'focus'),
+            @include pintig.struct-bind('select-field', (
+              border-width: pintig.theme-get($struct, 'border-width', 'focus'),
             ));
           }
         }
 
         &:disabled {
-          @include ms-core.color-bind('select-field', (
+          @include pintig.color-bind('select-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'),
           ));
         }
       }
@@ -156,7 +156,7 @@
       &:where(.is-error) {
         .ms-select-field__input:not(:disabled),
         .ms-select-field__input:not(:read-only) {
-          @include ms-core.color-bind('select-field', (
+          @include pintig.color-bind('select-field', (
             fill: rgba(0 0 0 / 0) !important,
             border: 'error-alpha-400',
           ));
@@ -167,35 +167,35 @@
     &:where(.is-error) {
       .ms-select-field__input:not(:disabled),
       .ms-select-field__input:not(:read-only) {
-        @include ms-core.color-bind('select-field', (
+        @include pintig.color-bind('select-field', (
           fill: 'error-alpha-300',
           ink: 'error-400',
           border: 'error-alpha-400'
         ));
 
         &:focus {
-          @include ms-core.color-bind('select-field', (
+          @include pintig.color-bind('select-field', (
             fill: 'error-alpha-300',
             border: 'error-400'
           ));
         }
 
         + .ms-select-field__helper {
-          @include ms-core.color-bind('select-field-helper', (
+          @include pintig.color-bind('select-field-helper', (
             ink: 'error-400',
           ));
         }
       }
 
       .ms-select-field__helper {
-        @include ms-core.color-bind('select-field-helper', (
-          ink: ms-core.theme-get($color, 'ink', 'helper'),
+        @include pintig.color-bind('select-field-helper', (
+          ink: pintig.theme-get($color, 'ink', 'helper'),
         ));
       }
     }
 
     &:where(.is-raised) {
-      @include ms-core.struct-bind('select-field', (
+      @include pintig.struct-bind('select-field', (
         shadow: 'xs',
       ));
     }

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 
 @mixin init() {
   .ms-tick-field {
@@ -28,7 +28,7 @@
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
-    gap: ms-core.key-create('tick-field-gap', 0.5rem);
+    gap: pintig.key-create('tick-field-gap', 0.5rem);
     transition: all var(--ms-transition-time) ease;
 
     @content;
@@ -36,10 +36,10 @@
     .ms-tick-field__input {
       display: grid;
       place-content: center;
-      @include ms-core.struct-radius('tick-field-input', inherit);
-      @include ms-core.color-apply('tick-field-input', ms-core.$color-inherit-template);
+      @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;
-      @include ms-core.prefix('appearance', none);
+      @include pintig.prefix('appearance', none);
       outline: none;
 
       &::before {
@@ -48,8 +48,8 @@
         height: 0.65rem;
         transform: scale(0);
         transition: 120ms transform ease-in-out;
-        box-shadow: inset 1em 1em ms-core.key-get('tick-field-input-fill');
-        color: ms-core.key-get('tick-field-input-ink');
+        box-shadow: inset 1em 1em pintig.key-get('tick-field-input-fill');
+        color: pintig.key-get('tick-field-input-ink');
       }
 
       &:checked {
@@ -63,15 +63,15 @@
       display: flex;
       flex-flow: column;
       align-items: center;
-      @include ms-core.struct-gap('tick-field-text', inherit);
+      @include pintig.struct-gap('tick-field-text', inherit);
 
       .ms-tick-field__label {
         user-select: none;
-        @include ms-core.typography-apply('tick-field', ms-core.$type-inherit-template);
+        @include pintig.typography-apply('tick-field', pintig.$type-inherit-template);
       }
 
       .ms-tick-field__helper {
-        @include ms-core.typography-apply('tick-field-helper', ms-core.$type-inherit-template);
+        @include pintig.typography-apply('tick-field-helper', pintig.$type-inherit-template);
       }
     }
   }

package/ms-tick-field/_tick-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('tick-field', $variants) {
+  @include pintig.component-extend('tick-field', $variants) {
     @content;
   }
 }
@@ -35,19 +35,19 @@
 /// @param {map} $color-map
 /// @return {*} color styles.
 @mixin color($color-map) {
-  @include ms-core.color-bind('tick-field', $color-map);
+  @include pintig.color-bind('tick-field', $color-map);
 }
 
 /// Structure variant mixin.
 /// @param {map} $struct-map
 /// @return {*} struct styles.
 @mixin struct($struct-map) {
-  @include ms-core.struct-bind('tick-field', $struct-map);
+  @include pintig.struct-bind('tick-field', $struct-map);
 }
 
 /// Typography variant mixin.
 /// @param {map} $type-map
 /// @return {*} typography styles.
 @mixin typography($type-map) {
-  @include ms-core.typography-bind('tick-field', $type-map);
+  @include pintig.typography-bind('tick-field', $type-map);
 }

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 @use 'sass:list';
 @use 'tick-field-base' as base;
 @use 'tick-field-theme' as theme;
@@ -31,89 +31,89 @@
   $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-apply('tick-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-apply('tick-field', (
+      fill: pintig.theme-get($color, 'fill'),
+      ink: pintig.theme-get($color, 'ink'),
+      border: pintig.theme-get($color, 'border'),
     ));
-    @include ms-core.struct-apply('tick-field', (
-      radius: ms-core.theme-get($struct, 'radius'),
-      padding: ms-core.theme-get($struct, 'padding'),
-      gap: ms-core.theme-get($struct, 'gap'),
-      border-width: ms-core.theme-get($struct, 'border-width'),
-      border-style: ms-core.theme-get($struct, 'border-style'),
+    @include pintig.struct-apply('tick-field', (
+      radius: pintig.theme-get($struct, 'radius'),
+      padding: pintig.theme-get($struct, 'padding'),
+      gap: pintig.theme-get($struct, 'gap'),
+      border-width: pintig.theme-get($struct, 'border-width'),
+      border-style: pintig.theme-get($struct, 'border-style'),
     ));
-    @include ms-core.typography-bind('tick-field', (
-      family: ms-core.theme-get($typography, 'family'),
-      size: ms-core.theme-get($typography, 'size'),
-      weight: ms-core.theme-get($typography, 'weight'),
-      line-height: ms-core.theme-get($typography, 'line-height'),
+    @include pintig.typography-bind('tick-field', (
+      family: pintig.theme-get($typography, 'family'),
+      size: pintig.theme-get($typography, 'size'),
+      weight: pintig.theme-get($typography, 'weight'),
+      line-height: pintig.theme-get($typography, 'line-height'),
     ));
-    @include ms-core.typography-bind('tick-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, 'line-height'),
+    @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 ms-core.struct-bind('tick-field-text', (
-      gap: ms-core.theme-get($struct, 'gap', 'text'),
+    @include pintig.struct-bind('tick-field-text', (
+      gap: pintig.theme-get($struct, 'gap', 'text'),
     ));
 
     &:hover,
     &:has(.ms-tick-field__input:focus) {
-      @include ms-core.color-bind('tick-field', (
-        fill: ms-core.theme-get($color, 'fill', 'hover'),
-        border: ms-core.theme-get($color, 'border', 'hover'),
+      @include pintig.color-bind('tick-field', (
+        fill: pintig.theme-get($color, 'fill', 'hover'),
+        border: pintig.theme-get($color, 'border', 'hover'),
       ));
     }
 
     &:has(.ms-tick-field__input:checked) {
-      @include ms-core.color-bind('tick-field', (
-        fill: ms-core.theme-get($color, 'fill', 'checked'),
-        border: ms-core.theme-get($color, 'border', 'checked'),
+      @include pintig.color-bind('tick-field', (
+        fill: pintig.theme-get($color, 'fill', 'checked'),
+        border: pintig.theme-get($color, 'border', 'checked'),
       ));
     }
 
     .ms-tick-field__input {
-      @include ms-core.struct-apply('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 ms-core.color-bind('tick-field-input', (
-        fill: ms-core.theme-get($color, 'fill', 'input'),
-        ink: ms-core.theme-get($color, 'ink', 'input'),
-        border: ms-core.theme-get($color, 'border', 'input'),
+      @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 ms-core.struct-radius('tick-field-input', ms-core.theme-get($struct, 'radius', 'input', 'checkbox'), 'bind');
+        @include pintig.struct-radius('tick-field-input', pintig.theme-get($struct, 'radius', 'input', 'checkbox'), 'bind');
       }
 
       &[type='radio'] {
-        @include ms-core.struct-radius('tick-field-input', ms-core.theme-get($struct, 'radius', 'input', 'radio'), 'bind');
+        @include pintig.struct-radius('tick-field-input', pintig.theme-get($struct, 'radius', 'input', 'radio'), 'bind');
       }
 
       &:hover,
       &:focus {
-        @include ms-core.color-fill('tick-field-input', ms-core.theme-get($color, 'fill', 'input', 'hover'), 'bind');
-        @include ms-core.color-border('tick-field-input', ms-core.theme-get($color, 'border', 'input', 'hover'), 'bind');
+        @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');
       }
 
       &:checked {
-        @include ms-core.color-bind('tick-field-input', (
-          fill: ms-core.theme-get($color, 'fill', 'input', 'checked'),
-          ink: ms-core.theme-get($color, 'ink', 'input'),
-          border: ms-core.theme-get($color, 'border', 'input', '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-utils/_color-utils.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 @use 'sass:map';
 @use 'sass:list';
 @use 'consts';
@@ -43,13 +43,13 @@ $_tones: (200, 300, 400, 600, 800, 'ink');
     @each $color in $_colors {
       @each $tone in $_tones {
         .fill-#{$color}-#{$tone} {
-          background-color: ms-core.token-get('#{$color}-#{$tone}');
+          background-color: pintig.token-get('#{$color}-#{$tone}');
         }
 
         @each $breakpoint in $_breakpoints {
           .\@#{$breakpoint}\:fill-#{$color}-#{$tone} {
-            @include ms-core.breakpoint-create($breakpoint) {
-              background-color: ms-core.token-get('#{$color}-#{$tone}') !important;
+            @include pintig.breakpoint-create($breakpoint) {
+              background-color: pintig.token-get('#{$color}-#{$tone}') !important;
             }
           }
         }
@@ -62,13 +62,13 @@ $_tones: (200, 300, 400, 600, 800, 'ink');
     @each $color in $_colors {
       @each $tone in $_tones {
         .ink-#{$color}-#{$tone} {
-          color: ms-core.token-get('#{$color}-#{$tone}');
+          color: pintig.token-get('#{$color}-#{$tone}');
         }
 
         @each $breakpoint in $_breakpoints {
           .\@#{$breakpoint}\:ink-#{$color}-#{$tone} {
-            @include ms-core.breakpoint-create($breakpoint) {
-              color: ms-core.token-get('#{$color}-#{$tone}') !important;
+            @include pintig.breakpoint-create($breakpoint) {
+              color: pintig.token-get('#{$color}-#{$tone}') !important;
             }
           }
         }
@@ -81,13 +81,13 @@ $_tones: (200, 300, 400, 600, 800, 'ink');
     @each $color in $_colors {
       @each $tone in $_tones {
         .border-#{$color}-#{$tone} {
-          border-color: ms-core.token-get('#{$color}-#{$tone}');
+          border-color: pintig.token-get('#{$color}-#{$tone}');
         }
 
         @each $breakpoint in $_breakpoints {
           .\@#{$breakpoint}\:border-#{$color}-#{$tone} {
-            @include ms-core.breakpoint-create($breakpoint) {
-              border-color: ms-core.token-get('#{$color}-#{$tone}') !important;
+            @include pintig.breakpoint-create($breakpoint) {
+              border-color: pintig.token-get('#{$color}-#{$tone}') !important;
             }
           }
         }

package/ms-utils/_consts.scss

@@ -20,6 +20,6 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 
 $breakpoints: ('small', 'medium', 'large', 'xlarge');