@matteusan/himig 1.4.1 → 1.5.1

package/_index.scss

@@ -25,7 +25,7 @@ $module-mode: false !default;
 $test-mode: $module-mode !default;
 $vue-mode: $test-mode !default;
 
-@use '@matteusan/pintig' with (
+@use 'pintig' with (
   $expressive-inks: $expressive-inks,
   $module-mode: $module-mode,
   $test-mode: $test-mode,
@@ -35,7 +35,7 @@ $vue-mode: $test-mode !default;
 @use 'init-font-pack' as font-pack;
 
 // For accessing core lib from the main himig module.
-@forward '@matteusan/pintig';
+@forward 'pintig';
 
 @mixin init(
   $theme: (),

package/ms-badge/_badge-base.scss

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

package/ms-badge/_badge-extend.scss

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

package/ms-badge/_badge-styles.scss

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

package/ms-button/_button-base.scss

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

package/ms-button/_button-extend.scss

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

package/ms-button/_button-mixins.scss

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

package/ms-button/_button-styles.scss

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

package/ms-card/_card-base.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '@matteusan/pintig';
+@use '../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 '@matteusan/pintig';
+@use '../pintig';
 
 /// Component variant maker.
 /// @param {string} $variants

package/ms-card/_card-styles.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '@matteusan/pintig';
+@use '../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 '@matteusan/pintig';
+@use '../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 '@matteusan/pintig';
+@use '../pintig';
 
 /// Component variant maker.
 /// @param {string} $variants

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '@matteusan/pintig';
+@use '../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/_index.scss

@@ -0,0 +1,24 @@
+//---------------------------------------------------
+//  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.
+//---------------------------------------------------
+
+@forward 'link-styles';
+@forward 'link-extend';

package/ms-link/_link-base.scss

@@ -0,0 +1,29 @@
+//---------------------------------------------------
+//  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';
+
+@mixin init() {
+  .ms-link {
+    @content;
+  }
+}

package/ms-link/_link-extend.scss

@@ -0,0 +1,53 @@
+//---------------------------------------------------
+//  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';
+
+/// Component variant maker.
+/// @param {string} $variants
+/// @return {*} extension class.
+@mixin extend($variants) {
+  @include pintig.component-extend('link', $variants) {
+    @content;
+  }
+}
+
+/// Color variant map.
+/// @param {map} $color-map
+/// @return {*} color styles.
+@mixin color($color-map) {
+  @include pintig.color-bind('link', $color-map);
+}
+
+/// Structure variant mixin.
+/// @param {map} $struct-map
+/// @return {*} struct styles.
+@mixin struct($struct-map) {
+  @include pintig.struct-bind('link', $struct-map);
+}
+
+/// Typography variant mixin.
+/// @param {map} $type-map
+/// @return {*} typography styles.
+@mixin typography($type-map) {
+  @include pintig.typography-bind('link', $type-map);
+}

package/ms-link/_link-styles.scss

@@ -0,0 +1,70 @@
+//---------------------------------------------------
+//  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';
+@use 'link-base' as base;
+@use 'link-theme' as theme;
+
+@mixin render(
+  $color: (),
+  $struct: (),
+  $typography: (),
+  $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 pintig.color-apply('link', (
+      fill: transparent,
+      ink: pintig.theme-get($color, 'ink')
+    ));
+    @include pintig.typography-apply('link', (
+      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')
+    ));
+    text-decoration: underline;
+    @include pintig.prefix(transition, all var(--ms-transition-time) ease);
+
+    &:hover {
+      @include pintig.color-bind('link', (
+        fill: pintig.theme-get($color, 'fill', 'hover')
+      ));
+    }
+
+    &:focus {
+      @include pintig.color-bind('link', (
+        fill: pintig.theme-get($color, 'fill', 'focus')
+      ));
+    }
+
+    &:active {
+      @include pintig.color-bind('link', (
+        fill: pintig.theme-get($color, 'fill', 'active')
+      ));
+    }
+  }
+}

package/ms-link/_link-theme.scss

@@ -0,0 +1,41 @@
+//---------------------------------------------------
+//  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.
+//---------------------------------------------------
+
+$init-color: (
+  fill: (
+    hover: 'accent-alpha-300',
+    focus: 'accent-alpha-300',
+    active: 'accent-alpha-400'
+  ),
+  ink: 'accent-400',
+);
+
+$init-struct: ();
+
+$init-typography: (
+  family: inherit,
+  size: inherit,
+  weight: inherit,
+  line-height: inherit
+);
+
+$init-settings: ();

package/ms-list/_list-base.scss

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

package/ms-list/_list-extend.scss

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

package/ms-list/_list-styles.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '@matteusan/pintig';
+@use '../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 '@matteusan/pintig';
+@use '../pintig';
 
 @use 'sass:math';
 

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

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