@matteusan/himig 1.3.4 → 1.4.0

package/ms-card/_card-base.scss

@@ -20,39 +20,39 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 @use 'sass:map';
 
 @mixin init(
   $struct,
   $typography,
 ) {
-  $radius: ms-core.theme-get($struct, 'radius');
-  $padding: ms-core.theme-get($struct, 'padding');
-  $section-gap: ms-core.theme-get($struct, 'gap', 'section');
-  $header-gap: ms-core.theme-get($struct, 'gap', 'header');
-  $footer-gap: ms-core.theme-get($struct, 'gap', 'footer');
+  $radius: pintig.theme-get($struct, 'radius');
+  $padding: pintig.theme-get($struct, 'padding');
+  $section-gap: pintig.theme-get($struct, 'gap', 'section');
+  $header-gap: pintig.theme-get($struct, 'gap', 'header');
+  $footer-gap: pintig.theme-get($struct, 'gap', 'footer');
 
-  $title-family: ms-core.theme-get($typography, 'family', 'title');
-  $title-size: ms-core.theme-get($typography, 'size', 'title');
-  $title-weight: ms-core.theme-get($typography, 'weight', 'title');
-  $title-line-height: ms-core.theme-get($typography, 'line-height', 'title');
+  $title-family: pintig.theme-get($typography, 'family', 'title');
+  $title-size: pintig.theme-get($typography, 'size', 'title');
+  $title-weight: pintig.theme-get($typography, 'weight', 'title');
+  $title-line-height: pintig.theme-get($typography, 'line-height', 'title');
 
-  $subtitle-family: ms-core.theme-get($typography, 'family', 'subtitle');
-  $subtitle-size: ms-core.theme-get($typography, 'size', 'subtitle');
-  $subtitle-weight: ms-core.theme-get($typography, 'weight', 'subtitle');
-  $subtitle-line-height: ms-core.theme-get($typography, 'line-height', 'subtitle');
+  $subtitle-family: pintig.theme-get($typography, 'family', 'subtitle');
+  $subtitle-size: pintig.theme-get($typography, 'size', 'subtitle');
+  $subtitle-weight: pintig.theme-get($typography, 'weight', 'subtitle');
+  $subtitle-line-height: pintig.theme-get($typography, 'line-height', 'subtitle');
 
-  $content-family: ms-core.theme-get($typography, 'family');
-  $content-size: ms-core.theme-get($typography, 'size');
-  $content-weight: ms-core.theme-get($typography, 'weight');
-  $content-line-height: ms-core.theme-get($typography, 'line-height');
+  $content-family: pintig.theme-get($typography, 'family');
+  $content-size: pintig.theme-get($typography, 'size');
+  $content-weight: pintig.theme-get($typography, 'weight');
+  $content-line-height: pintig.theme-get($typography, 'line-height');
 
-  $icon-size: ms-core.theme-get($struct, 'size', 'icon');
+  $icon-size: pintig.theme-get($struct, 'size', 'icon');
 
   .ms-card {
-    // @include ms-core.key-bind('card-section-gap', ms-core.primitive-token-switch('spacing.#{$section-gap}', $section-gap));
-    @include ms-core.struct-gap('card-section', $section-gap, 'bind');
+    // @include pintig.key-bind('card-section-gap', pintig.primitive-token-switch('spacing.#{$section-gap}', $section-gap));
+    @include pintig.struct-gap('card-section', $section-gap, 'bind');
     // overflow: hidden;
 
     @content;
@@ -62,7 +62,7 @@
       height: 100%;
       max-height: 120px;
       overflow: hidden;
-      @include ms-core.struct-apply('card-media', (
+      @include pintig.struct-apply('card-media', (
         radius: ($radius $radius 0 0),
       ));
 
@@ -78,9 +78,9 @@
       display: flex;
       flex-flow: row nowrap;
       justify-content: space-between;
-      gap: ms-core.key-create('card-header-gap', ms-core.primitive-token-switch('spacing.#{$header-gap}', $header-gap));
-      @include ms-core.color-border('card', transparent);
-      @include ms-core.struct-apply('card-header', (
+      gap: pintig.key-create('card-header-gap', pintig.primitive-token-switch('spacing.#{$header-gap}', $header-gap));
+      @include pintig.color-border('card', transparent);
+      @include pintig.struct-apply('card-header', (
         radius: (0),
         padding: ($padding $padding 0),
         border-width: ('xs' 'xs' 0),
@@ -89,11 +89,11 @@
 
       &:not(:only-child),
       &:not(:last-child) {
-        padding-bottom: ms-core.key-get('card-section-gap');
+        padding-bottom: pintig.key-get('card-section-gap');
       }
 
       &:last-child {
-        @include ms-core.struct-bind('card-header', (
+        @include pintig.struct-bind('card-header', (
           radius: (0 0 $radius $radius),
           border-width: (0 'xs' 'xs'),
           padding: (0 $padding $padding),
@@ -101,7 +101,7 @@
       }
 
       &:first-child {
-        @include ms-core.struct-bind('card-header', (
+        @include pintig.struct-bind('card-header', (
           radius: ($radius $radius 0 0),
           padding: ($padding $padding 0),
           border-width: ('xs' 'xs' 0),
@@ -109,7 +109,7 @@
       }
 
       &:only-child {
-        @include ms-core.struct-bind('card-header', (
+        @include pintig.struct-bind('card-header', (
           radius: $radius,
           padding: $padding,
           border-width: ('xs'),
@@ -118,34 +118,34 @@
 
       .ms-card__mast {
         .ms-card__title {
-          @include ms-core.typography-apply('card-title', (
+          @include pintig.typography-apply('card-title', (
             family: $title-family,
             size: $title-size,
             weight: $title-weight,
             line-height: $title-line-height
           ));
-          @include ms-core.break(1);
+          @include pintig.break(1);
         }
 
         .ms-card__subtitle {
-          @include ms-core.typography-apply('card-subtitle', (
+          @include pintig.typography-apply('card-subtitle', (
             family: $subtitle-family,
             size: $subtitle-size,
             weight: $subtitle-weight,
             line-height: $subtitle-line-height
           ));
-          @include ms-core.break(2);
+          @include pintig.break(2);
         }
       }
 
       .ms-card__icon {
-        width: ms-core.key-create('card-icon-size', ms-core.token-switch($icon-size));
-        height: ms-core.key-create('card-icon-size', ms-core.token-switch($icon-size));
+        width: pintig.key-create('card-icon-size', pintig.token-switch($icon-size));
+        height: pintig.key-create('card-icon-size', pintig.token-switch($icon-size));
         border-radius: 50%;
-        @include ms-core.color-apply('card-icon', (
+        @include pintig.color-apply('card-icon', (
           border: 'accent-400'
         ));
-        @include ms-core.struct-apply('card-icon', (
+        @include pintig.struct-apply('card-icon', (
           border-width: 1px,
           border-style: solid
         ));
@@ -159,8 +159,8 @@
     }
 
     .ms-card__content {
-      @include ms-core.color-border('card', transparent);
-      @include ms-core.struct-apply('card', (
+      @include pintig.color-border('card', transparent);
+      @include pintig.struct-apply('card', (
         radius: (0 0 $radius $radius),
         padding: (0 $padding),
         border-width: (0 'xs' 'xs'),
@@ -168,7 +168,7 @@
       ));
 
       p {
-        @include ms-core.typography-apply('card', (
+        @include pintig.typography-apply('card', (
           family: $content-family,
           size: $content-size,
           weight: $content-weight,
@@ -178,18 +178,18 @@
 
       &:not(:only-child),
       &:not(:last-child) {
-        padding-bottom: ms-core.key-get('card-section-gap');
+        padding-bottom: pintig.key-get('card-section-gap');
       }
 
       &:last-child {
-        @include ms-core.struct-bind('card', (
+        @include pintig.struct-bind('card', (
           radius: (0 0 $radius $radius),
           padding: (0 $padding $padding),
         ));
       }
 
       &:first-child {
-        @include ms-core.struct-bind('card', (
+        @include pintig.struct-bind('card', (
           radius: ($radius $radius 0 0),
           padding: ($padding $padding 0),
           border-width: ('xs' 'xs' 0),
@@ -197,7 +197,7 @@
       }
 
       &:only-child {
-        @include ms-core.struct-bind('card', (
+        @include pintig.struct-bind('card', (
           radius: $radius,
           padding: $padding,
           border-width: 'xs'
@@ -209,9 +209,9 @@
       display: flex;
       flex-flow: row nowrap;
       justify-content: end;
-      gap: ms-core.key-create('card-footer-gap', ms-core.primitive-token-switch('spacing.#{$footer-gap}', $footer-gap));
-      @include ms-core.color-border('card', transparent);
-      @include ms-core.struct-apply('card-footer', (
+      gap: pintig.key-create('card-footer-gap', pintig.primitive-token-switch('spacing.#{$footer-gap}', $footer-gap));
+      @include pintig.color-border('card', transparent);
+      @include pintig.struct-apply('card-footer', (
         radius: (0 0 $radius $radius),
         padding: (0 $padding),
         border-width: 'xs',
@@ -219,21 +219,21 @@
       ));
 
       &:last-child {
-        @include ms-core.struct-bind('card-footer', (
+        @include pintig.struct-bind('card-footer', (
           radius: (0 0 $radius $radius),
           padding: (0 $padding $padding),
         ));
       }
 
       &:first-child {
-        @include ms-core.struct-bind('card-footer', (
+        @include pintig.struct-bind('card-footer', (
           radius: ($radius $radius 0 0),
           padding: ($padding $padding 0),
         ));
       }
 
       &:only-child {
-        @include ms-core.struct-bind('card-footer', (
+        @include pintig.struct-bind('card-footer', (
           radius: $radius,
           padding: $padding,
         ));

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

package/ms-card/_card-styles.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 @use 'sass:list';
 @use 'card-base' as base;
 @use 'card-theme' as theme;
@@ -31,35 +31,35 @@
   $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(
     $struct,
     $typography
   ) {
-    @include ms-core.color-apply('card', (
-      fill: ms-core.theme-get($color, 'fill'),
-      ink: ms-core.theme-get($color, 'ink'),
+    @include pintig.color-apply('card', (
+      fill: pintig.theme-get($color, 'fill'),
+      ink: pintig.theme-get($color, 'ink'),
     ));
-    @include ms-core.color-border('card', ms-core.theme-get($color, 'border'), 'bind');
-    @include ms-core.struct-apply('card', (
-      radius: ms-core.theme-get($struct, 'radius'),
+    @include pintig.color-border('card', pintig.theme-get($color, 'border'), 'bind');
+    @include pintig.struct-apply('card', (
+      radius: pintig.theme-get($struct, 'radius'),
       shadow: 'none',
     ));
 
     &:where(.is-outlined) {
-      @include ms-core.color-bind('card', (
-        fill: ms-core.theme-get($color, 'fill', 'outlined'),
-        ink: ms-core.theme-get($color, 'ink'),
-        border: ms-core.theme-get($color, 'border')
+      @include pintig.color-bind('card', (
+        fill: pintig.theme-get($color, 'fill', 'outlined'),
+        ink: pintig.theme-get($color, 'ink'),
+        border: pintig.theme-get($color, 'border')
       ));
     }
 
     &:where(.is-raised) {
-      @include ms-core.struct-bind('card', (
+      @include pintig.struct-bind('card', (
         shadow: 'low'
       ));
     }

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 
 @use 'sass:math';
 
@@ -37,15 +37,15 @@
       position: absolute;
       top: calc(#{$top-label-distance});
       left: calc(#{$left-label-distance} + 2px);
-      @include ms-core.color-apply('form-field-label', (
+      @include pintig.color-apply('form-field-label', (
         fill: rgba(0 0 0 / 0),
         ink: inherit,
       ));
-      @include ms-core.struct-apply('form-field-label', (
+      @include pintig.struct-apply('form-field-label', (
         padding: ('xs' 'xs' 0 0),
       ));
-      @include ms-core.typography-apply('form-field-label', ms-core.$type-inherit-template);
-      @include ms-core.prefix(transition, all var(--ms-transition-time) ease);
+      @include pintig.typography-apply('form-field-label', pintig.$type-inherit-template);
+      @include pintig.prefix(transition, all var(--ms-transition-time) ease);
       cursor: text;
     }
 
@@ -53,7 +53,7 @@
     &:has(.ms-form-field__input:not(:placeholder-shown)), {
       .ms-form-field__label {
         top: math.div($top-label-distance, 2);
-        @include ms-core.typography-bind('form-field-label', (
+        @include pintig.typography-bind('form-field-label', (
           family: 'small',
           size: 'small',
         ));
@@ -62,13 +62,13 @@
 
     &:has(.ms-form-field__label) {
       .ms-form-field__input {
-        @include ms-core.key-bind('form-field-placeholder-ink', rgba(0 0 0 / 0) !important);
+        @include pintig.key-bind('form-field-placeholder-ink', rgba(0 0 0 / 0) !important);
         padding-top: calc(#{$top-padding} + 1rem) !important;
       }
     }
 
     .ms-form-field__input {
-      @include ms-core.struct-apply('form-field', (
+      @include pintig.struct-apply('form-field', (
         width: 100%,
         margin: 0,
         radius: 0,
@@ -76,13 +76,13 @@
         border-style: solid,
         shadow: 'none',
       ));
-      padding: ms-core.key-get('form-field-padding');
-      @include ms-core.color-apply('form-field', (
+      padding: pintig.key-get('form-field-padding');
+      @include pintig.color-apply('form-field', (
         fill: inherit,
         ink: inherit,
         border: inherit
       ));
-      @include ms-core.typography-apply('form-field', (
+      @include pintig.typography-apply('form-field', (
         family: inherit,
         size: inherit,
         weight: inherit,
@@ -92,25 +92,25 @@
       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);
 
       &::placeholder {
-        color: ms-core.key-create('form-field-placeholder-ink', inherit);
+        color: pintig.key-create('form-field-placeholder-ink', inherit);
         user-select: none !important;
       }
     }
 
     .ms-form-field__helper {
-      @include ms-core.color-apply('form-field-helper', (
+      @include pintig.color-apply('form-field-helper', (
         ink: inherit,
       ));
-      @include ms-core.typography-apply('form-field-helper', (
+      @include pintig.typography-apply('form-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-form-field/_form-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('form-field', $variants) {
+  @include pintig.component-extend('form-field', $variants) {
     @content;
   }
 }
@@ -35,19 +35,19 @@
 /// @param {map} $color-map
 /// @return {*} color styles.
 @mixin color($color-map) {
-  @include ms-core.color-bind('form-field', $color-map);
+  @include pintig.color-bind('form-field', $color-map);
 }
 
 /// Structure variant mixin.
 /// @param {map} $struct-map
 /// @return {*} struct styles.
 @mixin struct($struct-map) {
-  @include ms-core.struct-bind('form-field', $struct-map);
+  @include pintig.struct-bind('form-field', $struct-map);
 }
 
 /// Typography variant mixin.
 /// @param {map} $type-map
 /// @return {*} typography styles.
 @mixin typography($type-map) {
-  @include ms-core.typography-bind('form-field', $type-map);
+  @include pintig.typography-bind('form-field', $type-map);
 }