@matteusan/himig 1.4.0 → 1.5.0

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(

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;

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

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

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;

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: 'global',
+  size: 'body',
+  weight: 'normal',
+  line-height: 'normal'
+);
+
+$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

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

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '@matteusan/pintig';
+@use '../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 '@matteusan/pintig';
+@use '../pintig';
 
 @mixin init() {
   .ms-tick-field {

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

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

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

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

package/ms-utils/_consts.scss

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

package/ms-utils/_layout-utils.scss

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

package/ms-utils/_struct-utils.scss

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

package/ms-utils/_typography-utils.scss

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

package/ms-utils/_util-helpers.scss

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matteusan/himig",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Matteu's personal design system for building user interfaces.",
   "repository": "https://github.com/MatteuSan/himig",
   "author": "Matteu <matteugt@gmail.com>",
@@ -9,7 +9,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@matteusan/pintig": "file:../pintig",
+    "@matteusan/pintig": "1.4.0",
     "@matteusan/sentro": "0.1.25"
   }
 }

package/pintig/README.md

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

package/pintig/_index.scss

@@ -0,0 +1,77 @@
+//---------------------------------------------------
+//  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-*;