@matteusan/himig 1.5.0 → 1.7.0

package/README.md

@@ -15,8 +15,8 @@ $ yarn add @matteusan/himig
 ```scss
 // main.scss
 
-@use 'node_modules/@matteusan/himig';
-@use 'node_modules/@matteusan/himig/ms-button';
+@use 'pkg:@matteusan/himig';
+@use 'pkg:@matteusan/himig/ms-button';
 
 @include himig.init {
   @include ms-button.render();

package/_index.scss

@@ -1,31 +1,13 @@
-//---------------------------------------------------
-//  Copyright (c) 2024 MatteuSan
-//
-//  Permission is hereby granted, free of charge, to any person obtaining a copy
-//  of this software and associated documentation files (the "Software"), to deal
-//  in the Software without restriction, including without limitation the rights
-//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-//  copies of the Software, and to permit persons to whom the Software is
-//  furnished to do so, subject to the following conditions:
-//
-//  The above copyright notice and this permission notice shall be included in all
-//  copies or substantial portions of the Software.
-//
-//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-//  SOFTWARE.
-//---------------------------------------------------
+// @license
+// Copyright (c) 2025 MatteuSan
+// SPDX-License-Identifier: MIT
 
 $expressive-inks: false !default;
 $module-mode: false !default;
 $test-mode: $module-mode !default;
 $vue-mode: $test-mode !default;
 
-@use 'pintig' with (
+@use 'pkg:@matteusan/pintig' with (
   $expressive-inks: $expressive-inks,
   $module-mode: $module-mode,
   $test-mode: $test-mode,
@@ -35,7 +17,7 @@ $vue-mode: $test-mode !default;
 @use 'init-font-pack' as font-pack;
 
 // For accessing core lib from the main himig module.
-@forward 'pintig';
+@forward 'pkg:@matteusan/pintig';
 
 @mixin init(
   $theme: (),

package/ms-badge/_badge-base.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 @mixin init() {
   .ms-badge {

package/ms-badge/_badge-extend.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 /// Component variant maker.
 /// @param {string} $variants

package/ms-badge/_badge-styles.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 @use 'badge-base' as base;
 @use 'badge-theme' as theme;
 

package/ms-button/_button-base.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 @mixin init() {
   .ms-button {

package/ms-button/_button-extend.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 /// Component variant maker.
 /// @param {string} $variants

package/ms-button/_button-mixins.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 @use 'sass:map';
 @use 'sass:string';
 

package/ms-button/_button-styles.scss

@@ -1,26 +1,8 @@
-//---------------------------------------------------
-//  Copyright (c) 2024 MatteuSan
-//
-//  Permission is hereby granted, free of charge, to any person obtaining a copy
-//  of this software and associated documentation files (the "Software"), to deal
-//  in the Software without restriction, including without limitation the rights
-//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-//  copies of the Software, and to permit persons to whom the Software is
-//  furnished to do so, subject to the following conditions:
-//
-//  The above copyright notice and this permission notice shall be included in all
-//  copies or substantial portions of the Software.
-//
-//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-//  SOFTWARE.
-//---------------------------------------------------
-
-@use '../pintig';
+// @license
+// Copyright (c) 2025 MatteuSan
+// SPDX-License-Identifier: MIT
+
+@use 'pkg:@matteusan/pintig';
 @use 'sass:list';
 @use 'button-base' as base;
 @use 'button-theme' as theme;
@@ -67,9 +49,9 @@ $_states: ('error');
     @include pintig.struct-apply('button', $struct);
     @include pintig.typography-apply('button', $typography);
     @include pintig.color-apply('button', (
-      fill: 'ms-grey.400',
-      ink: 'ms-grey.800',
-      border: 'ms-grey.400',
+      fill: 'ms-black.800',
+      ink: 'ms-white.200',
+      border: 'ms-black.800',
     ));
     @include style.text(
       $fills: $fills,
@@ -93,6 +75,24 @@ $_states: ('error');
       }
     }
 
+    &:where(.is-small) {
+      @include pintig.struct-bind('button', (
+        'padding': ('sm' 'md')
+      ));
+      @include pintig.typography-apply('button', (
+        'size': pintig.to-rem(12px)
+      ));
+    }
+
+    &:where(.is-large) {
+      @include pintig.struct-bind('button', (
+        'padding': ('md' 'lg')
+      ));
+      @include pintig.typography-apply('button', (
+        'size': 'md'
+      ));
+    }
+
     @each $state in $_states {
       &:where(.is-#{$state}) {
         @include style.text(

package/ms-card/_card-base.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 @use 'sass:map';
 
 @mixin init(
@@ -51,9 +51,9 @@
   $icon-size: pintig.theme-get($struct, 'size', 'icon');
 
   .ms-card {
-    // @include pintig.key-bind('card-section-gap', pintig.primitive-token-switch('spacing.#{$section-gap}', $section-gap));
+    display: flex;
+    flex-flow: column nowrap;
     @include pintig.struct-gap('card-section', $section-gap, 'bind');
-    // overflow: hidden;
 
     @content;
 

package/ms-card/_card-extend.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 /// Component variant maker.
 /// @param {string} $variants

package/ms-card/_card-styles.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 @use 'sass:list';
 @use 'card-base' as base;
 @use 'card-theme' as theme;
@@ -46,6 +46,11 @@
     ));
     @include pintig.color-border('card', pintig.theme-get($color, 'border'), 'bind');
     @include pintig.struct-apply('card', (
+      width: (
+        default: pintig.theme-get($struct, 'width'),
+        min: pintig.theme-get($struct, 'width', 'min'),
+        max: pintig.theme-get($struct, 'width', 'max'),
+      ),
       radius: pintig.theme-get($struct, 'radius'),
       shadow: 'none',
     ));

package/ms-card/_card-theme.scss

@@ -22,14 +22,19 @@
 
 $init-color: (
   fill: (
-    default: 'surface-200',
+    default: 'primary-400',
     outlined: 'surface-alpha-400'
   ),
-  ink: 'surface-ink',
-  border: 'surface-200',
+  ink: 'primary-ink',
+  border: 'primary-400',
 );
 
 $init-struct: (
+  width: (
+    default: 100%,
+    min: auto,
+    max: auto
+  ),
   radius: 'md',
   padding: 'lg',
   border-width: 'xs',

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 @use 'sass:math';
 
@@ -69,7 +69,11 @@
 
     .ms-form-field__input {
       @include pintig.struct-apply('form-field', (
-        width: 100%,
+        width: (
+          default: 100%,
+          min: inherit,
+          max: inherit
+        ),
         margin: 0,
         radius: 0,
         border-width: 2px,

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 /// Component variant maker.
 /// @param {string} $variants

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 @use 'sass:list';
 @use 'form-field-base' as base;
 @use 'form-field-theme' as theme;
@@ -70,7 +70,11 @@
 
     .ms-form-field__input {
       @include pintig.struct-bind('form-field', (
-        width: pintig.theme-get($struct, 'width'),
+        width: (
+          default: pintig.theme-get($struct, 'width'),
+          min: pintig.theme-get($struct, 'width', 'min'),
+          max: pintig.theme-get($struct, 'width', 'max')
+        ),
         padding: pintig.theme-get($struct, 'padding'),
         radius: pintig.theme-get($struct, 'radius'),
         border-width: pintig.theme-get($struct, 'border-width'),
@@ -94,7 +98,7 @@
 
         &:focus {
           @include pintig.color-bind('form-field', (
-            fill: pintig.theme-get($color, 'fill', 'hover'),
+            fill: pintig.theme-get($color, 'fill', 'focus'),
             border: pintig.theme-get($color, 'border', 'focus'),
           ));
           @include pintig.struct-bind('form-field', (
@@ -170,7 +174,7 @@
         .ms-form-field__input:not(:disabled) {
           @include pintig.color-bind('form-field', (
             fill: rgba(0 0 0 / 0) !important,
-            border: 'error-alpha-600',
+            border: pintig.theme-get($color, 'border', 'error'),
           ));
         }
       }
@@ -186,7 +190,7 @@
       &:has(.ms-form-field__input:not(:read-only):not(:disabled)) {
         .ms-form-field__label {
           @include pintig.color-bind('form-field-label', (
-            ink: 'error-400',
+            ink: pintig.theme-get($color, 'ink', 'error'),
           ));
         }
       }
@@ -194,22 +198,22 @@
       .ms-form-field__input:not(:disabled),
       .ms-form-field__input:not(:read-only) {
         @include pintig.color-bind('form-field', (
-          fill: 'error-alpha-300',
-          ink: 'error-400',
-          border: 'error-alpha-400'
+          fill: pintig.theme-get($color, 'fill', 'error'),
+          ink: pintig.theme-get($color, 'ink', 'error'),
+          border: pintig.theme-get($color, 'border', 'error'),
         ));
 
         &:focus {
           @include pintig.color-bind('form-field', (
-            fill: 'error-alpha-300',
-            border: 'error-400'
+            fill: pintig.theme-get($color, 'fill', 'error', 'focus'),
+            border: pintig.theme-get($color, 'border', 'error', 'focus'),
           ));
         }
       }
 
       .ms-form-field__helper {
         @include pintig.color-bind('form-field-helper', (
-          ink: 'error-400',
+          ink: pintig.theme-get($color, 'ink', 'error'),
         ));
       }
     }

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

@@ -22,25 +22,37 @@
 
 $init-color: (
   fill: (
-    default: 'surface-alpha-600',
-    hover: 'accent-alpha-300',
-    disabled: 'disabled'
+    default: 'surface-alpha-800',
+    focus: 'accent-alpha-300',
+    disabled: 'disabled',
+    error: (
+      default: 'error-alpha-300',
+      focus: 'error-alpha-400'
+    )
   ),
   ink: (
     default: 'surface-ink',
     helper: 'surface-ink',
-    disabled: 'disabled-ink'
+    disabled: 'disabled-ink',
+    error: 'error-400'
   ),
   border: (
-    default: 'surface-600',
-    hover: 'accent-alpha-600',
+    default: 'surface-400',
     focus: 'accent-400',
-    disabled: 'disabled'
+    disabled: 'disabled',
+    error: (
+      default: 'error-alpha-800',
+      focus: 'error-400'
+    )
   ),
 );
 
 $init-struct: (
-  width: 100%,
+  width: (
+    default: 100%,
+    min: auto,
+    max: auto
+  ),
   padding: ('md', 'lg'),
   radius: 'small',
   border-width: (

package/ms-link/_link-base.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 @mixin init() {
   .ms-link {

package/ms-link/_link-extend.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 /// Component variant maker.
 /// @param {string} $variants

package/ms-link/_link-styles.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 @use 'link-base' as base;
 @use 'link-theme' as theme;
 

package/ms-link/_link-theme.scss

@@ -32,10 +32,10 @@ $init-color: (
 $init-struct: ();
 
 $init-typography: (
-  family: 'global',
-  size: 'body',
-  weight: 'normal',
-  line-height: 'normal'
+  family: inherit,
+  size: inherit,
+  weight: inherit,
+  line-height: inherit
 );
 
 $init-settings: ();

package/ms-list/_list-base.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 @mixin init() {
   .ms-list {

package/ms-list/_list-extend.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 /// Component variant maker.
 /// @param {string} $variants

package/ms-list/_list-styles.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 @use 'list-base' as base;
 @use 'list-theme' as theme;
 

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 @use 'sass:math';
 

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 /// Component variant maker.
 /// @param {string} $variants

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 @use 'sass:list';
 @use 'select-field-base' as base;
 @use 'select-field-theme' as theme;
@@ -44,7 +44,7 @@
     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', 'disabled'),
+      ink: pintig.theme-get($color, 'ink'),
     ));
     @include pintig.typography-bind('select-field-label', (
       family: pintig.theme-get($typography, 'family'),
@@ -80,14 +80,22 @@
 
     &:has(.ms-select-field__input:not(:read-only):not(:disabled)) {
       .ms-select-field__label {
-        @include pintig.color-bind('select-field-label', (
-          ink: pintig.theme-get($color, 'ink'),
-        ));
+        @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');
       }
     }
 
     &:has(.ms-select-field__input:read-only:disabled) {
-      @include pintig.color-ink('select-field-helper', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
+      .ms-select-field__label {
+        @include pintig.color-ink('select-field-label', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
+      }
+
+      .ms-select-field__helper {
+        @include pintig.color-ink('select-field-helper', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
+      }
     }
 
     .ms-select-field__input {
@@ -96,12 +104,12 @@
         @include pintig.color-bind('select-field', (
           fill: pintig.theme-get($color, 'fill'),
           ink: pintig.theme-get($color, 'ink'),
-          border: pintig.theme-get($color, 'fill'),
+          border: pintig.theme-get($color, 'border'),
         ));
 
         &:focus {
           @include pintig.color-bind('select-field', (
-            fill: pintig.theme-get($color, 'fill', 'hover'),
+            fill: pintig.theme-get($color, 'fill', 'focus'),
             border: pintig.theme-get($color, 'border', 'focus'),
           ));
           @include pintig.struct-bind('select-field', (
@@ -114,7 +122,7 @@
         @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'),
+          border: pintig.theme-get($color, 'border', 'disabled'),
         ));
         cursor: not-allowed;
       }
@@ -131,7 +139,7 @@
           @include pintig.color-bind('select-field', (
             fill: transparent,
             ink: pintig.theme-get($color, 'ink'),
-            border: pintig.theme-get($color, 'fill'),
+            border: pintig.theme-get($color, 'border'),
           ));
 
           &:focus {

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

@@ -22,26 +22,34 @@
 
 $init-color: (
   fill: (
-    default: 'surface-alpha-600',
-    hover: 'accent-alpha-300',
-    disabled: 'disabled'
+    default: 'surface-alpha-800',
+    focus: 'accent-alpha-300',
+    disabled: 'disabled',
+    error: (
+      default: 'error-alpha-300',
+      focus: 'error-alpha-400'
+    )
   ),
   ink: (
     default: 'surface-ink',
     helper: 'surface-ink',
-    disabled: 'disabled-ink'
+    disabled: 'disabled-ink',
+    error: 'error-400'
   ),
   border: (
-    default: 'surface-600',
-    hover: 'accent-alpha-600',
+    default: 'surface-400',
     focus: 'accent-400',
-    disabled: 'disabled'
+    disabled: 'disabled',
+    error: (
+      default: 'error-alpha-800',
+      focus: 'error-400'
+    )
   ),
 );
 
 $init-struct: (
   width: 100%,
-  padding: ('md' 'lg'),
+  padding: ('md', 'lg'),
   radius: 'small',
   border-width: (
     'default': 2px,

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 @mixin init() {
   .ms-tick-field {

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 
 /// Component variant maker.
 /// @param {string} $variants