@matteusan/himig 1.5.1 → 1.7.1

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(

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;

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

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

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;

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-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;

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

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

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

package/ms-utils/_color-utils.scss

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

package/ms-utils/_consts.scss

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

package/ms-utils/_layout-utils.scss

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

package/ms-utils/_struct-utils.scss

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

package/ms-utils/_typography-utils.scss

@@ -1,29 +1,12 @@
-//---------------------------------------------------
-//  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
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:list';
+@use 'sass:string';
 @use 'consts';
 @use 'util-helpers' as helpers;
 
@@ -170,13 +153,13 @@ $_alignments: ('center', 'left', 'right', 'justify', 'justify-all');
   @if list.index($utils-to-render, 'alignment') {
     @each $alignment in $_alignments {
       .align-#{$alignment} {
-        text-align: unquote($alignment);
+        text-align: string.unquote($alignment);
       }
 
       @each $breakpoint in $_breakpoints {
         .\@#{$breakpoint}\:align-#{$alignment} {
           @include pintig.breakpoint-create($breakpoint) {
-            text-align: unquote($alignment) !important;
+            text-align: string.unquote($alignment) !important;
           }
         }
       }

package/ms-utils/_util-helpers.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../pintig';
+@use 'pkg:@matteusan/pintig';
 @use 'sass:list';
 
 @function handle-include-exclude($default-utils, $include: (), $exclude: ()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matteusan/himig",
-  "version": "1.5.1",
+  "version": "1.7.1",
   "description": "Matteu's personal design system for building user interfaces.",
   "repository": "https://github.com/MatteuSan/himig",
   "author": "Matteu <matteugt@gmail.com>",
@@ -8,8 +8,16 @@
   "publishConfig": {
     "access": "public"
   },
+  "exports": {
+    ".": {
+      "sass": "./_index.scss"
+    },
+    "./**/*.scss": {
+      "sass": "./**/*.scss"
+    }
+  },
   "dependencies": {
-    "@matteusan/pintig": "1.4.0",
-    "@matteusan/sentro": "0.1.25"
+    "@matteusan/pintig": "^1.0",
+    "@matteusan/sentro": "^1.2.2"
   }
 }

package/pintig/README.md

@@ -1,2 +0,0 @@
-# pintig
-The core library for the Himig Design System. For internal use only.

package/pintig/_index.scss

@@ -1,77 +0,0 @@
-//---------------------------------------------------
-//  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.
-//---------------------------------------------------
-
-$module-mode: false !default;
-$test-mode: $module-mode !default;
-$vue-mode: $test-mode !default;
-$validation: if($vue-mode == true, false, true);
-$expressive-inks: false !default;
-
-/// @type map
-/// @description helper variable for inheriting values for all color properties
-$color-inherit-template: (
-  fill: inherit,
-  ink: inherit,
-  border: inherit
-);
-
-/// @type map
-/// @description helper variable for inheriting values for all struct properties
-$struct-inherit-template: (
-  width: inherit,
-  height: inherit,
-  radius: inherit,
-  padding: inherit,
-  margin: inherit,
-  gap: inherit,
-  border-width: inherit,
-  border-style: inherit,
-  shadow: inherit
-);
-
-/// @type map
-/// @description helper variable for inheriting values for all typography properties
-$type-inherit-template: (
-  family: inherit,
-  size: inherit,
-  weight: inherit,
-  line-height: inherit
-);
-
-@use 'node_modules/@matteusan/sentro' with (
-  $prefix: 'ms',
-  $context: 'theme',
-  $token-validation: $validation,
-  $key-validation: $validation,
-  $breakpoint-validation: $validation,
-);
-
-@forward 'tokens';
-@forward 'theme' with ($expressive-inks: $expressive-inks);
-@forward 'tools';
-@forward 'breakpoint' as breakpoint-*;
-
-@forward 'color' as color-*;
-@forward 'struct' as struct-*;
-@forward 'sprite' as sprite-*;
-@forward 'typography' as typography-*;
-@forward 'component' as component-*;

package/pintig/breakpoint/_breakpoint-sentro.scss

@@ -1,53 +0,0 @@
-//---------------------------------------------------
-//  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 '../tools';
-@use 'node_modules/@matteusan/sentro';
-@use 'sass:map';
-@use 'sass:meta';
-
-$_registry: ();
-
-@mixin config($map: (), $breakpoints...) {
-  @if not tools.is-empty($map) {
-    @each $key, $value in $map {
-      $_registry: map.set($_registry, $key, $value) !global;
-    }
-  }
-  @if meta.keywords($breakpoints) {
-    @each $key, $value in meta.keywords($breakpoints) {
-      $_registry: map.set($_registry, $key, $value) !global;
-    }
-  }
-  @include sentro.breakpoint-config($map, $breakpoints...);
-}
-
-@mixin create($query) {
-  @include sentro.breakpoint-create($query) {
-    @content;
-  }
-}
-
-/// @access protected
-@function registry-get() {
-  @return $_registry;
-}