@matteusan/himig 1.3.4 → 1.4.1

package/_index.scss

@@ -25,7 +25,7 @@ $module-mode: false !default;
 $test-mode: $module-mode !default;
 $vue-mode: $test-mode !default;
 
-@use 'ms-core' with (
+@use '@matteusan/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 'ms-core';
+@forward '@matteusan/pintig';
 
 @mixin init(
   $theme: (),
@@ -59,22 +59,22 @@ $vue-mode: $test-mode !default;
   $breakpoints: (),
   $extend: (),
 ) {
-  $primary: ms-core.prioritize(map.get($theme, 'primary'), $primary);
-  $accent: ms-core.prioritize(map.get($theme, 'accent'), $accent);
-  $surface: ms-core.prioritize(map.get($theme, 'surface'), $surface);
-  $background: ms-core.prioritize(map.get($theme, 'background'), $background);
-  $error: ms-core.prioritize(map.get($theme, 'error'), $error);
-  $disabled: ms-core.prioritize(map.get($theme, 'disabled'), $disabled);
-  $radius: ms-core.prioritize(map.get($theme, 'radius'), $radius);
-  $global: ms-core.prioritize(map.get($theme, 'global'), $global);
-  $supertitle: ms-core.prioritize(map.get($theme, 'supertitle'), $supertitle);
-  $title: ms-core.prioritize(map.get($theme, 'title'), $title);
-  $subtitle: ms-core.prioritize(map.get($theme, 'subtitle'), $subtitle);
-  $body: ms-core.prioritize(map.get($theme, 'body'), $body);
-  $mono: ms-core.prioritize(map.get($theme, 'mono'), $mono);
-  $small: ms-core.prioritize(map.get($theme, 'small'), $small);
-  $breakpoints: ms-core.prioritize(map.get($theme, 'breakpoints'), $breakpoints);
-  $extend: ms-core.prioritize(map.get($theme, 'extend'), $extend);
+  $primary: pintig.prioritize(map.get($theme, 'primary'), $primary);
+  $accent: pintig.prioritize(map.get($theme, 'accent'), $accent);
+  $surface: pintig.prioritize(map.get($theme, 'surface'), $surface);
+  $background: pintig.prioritize(map.get($theme, 'background'), $background);
+  $error: pintig.prioritize(map.get($theme, 'error'), $error);
+  $disabled: pintig.prioritize(map.get($theme, 'disabled'), $disabled);
+  $radius: pintig.prioritize(map.get($theme, 'radius'), $radius);
+  $global: pintig.prioritize(map.get($theme, 'global'), $global);
+  $supertitle: pintig.prioritize(map.get($theme, 'supertitle'), $supertitle);
+  $title: pintig.prioritize(map.get($theme, 'title'), $title);
+  $subtitle: pintig.prioritize(map.get($theme, 'subtitle'), $subtitle);
+  $body: pintig.prioritize(map.get($theme, 'body'), $body);
+  $mono: pintig.prioritize(map.get($theme, 'mono'), $mono);
+  $small: pintig.prioritize(map.get($theme, 'small'), $small);
+  $breakpoints: pintig.prioritize(map.get($theme, 'breakpoints'), $breakpoints);
+  $extend: pintig.prioritize(map.get($theme, 'extend'), $extend);
 
   $_init-family: 'family.sans-serif';
   $_init-line-height: 'line-height.normal';
@@ -129,14 +129,14 @@ $vue-mode: $test-mode !default;
   );
 
   $_init-breakpoints: (
-    'small': ms-core.primitive-token-get('breakpoint.sm'),
-    'medium': ms-core.primitive-token-get('breakpoint.md'),
-    'large': ms-core.primitive-token-get('breakpoint.lg'),
-    'xlarge': ms-core.primitive-token-get('breakpoint.xl'),
+    'small': pintig.primitive-token-get('breakpoint.sm'),
+    'medium': pintig.primitive-token-get('breakpoint.md'),
+    'large': pintig.primitive-token-get('breakpoint.lg'),
+    'xlarge': pintig.primitive-token-get('breakpoint.xl'),
   );
 
   :root {
-    @include ms-core.theme-config(
+    @include pintig.theme-config(
       $primary: $primary,
       $accent: $accent,
       $surface: $surface,
@@ -160,11 +160,11 @@ $vue-mode: $test-mode !default;
     --ms-sprite-size: 32px;
     --ms-transition-time: 0.2s;
 
-    font-family: ms-core.token-get('family-global');
-    line-height: ms-core.token-get('line-height-global');
+    font-family: pintig.token-get('family-global');
+    line-height: pintig.token-get('line-height-global');
   }
 
-  @include ms-core.breakpoint-config(map.merge($_init-breakpoints, $breakpoints));
+  @include pintig.breakpoint-config(map.merge($_init-breakpoints, $breakpoints));
 
   @include font-pack.load((
     'global': map.get(map.merge($_init-type-global, $global), 'family'),
@@ -191,8 +191,8 @@ $vue-mode: $test-mode !default;
   }
 
   body {
-    background: ms-core.key-create('body-fill', ms-core.token-get('background'));
-    color: ms-core.key-create('body-ink', ms-core.token-get('background-ink'));
+    background: pintig.key-create('body-fill', pintig.token-get('background'));
+    color: pintig.key-create('body-ink', pintig.token-get('background-ink'));
   }
 
   a {
@@ -218,25 +218,25 @@ $vue-mode: $test-mode !default;
   main.content-wrap {
     $margin: 15px;
     width: calc(100% - #{$margin * 2});
-    max-width: ms-core.key-create('content-wrap-max-width', ms-core.primitive-token-get('dimension.xl'));
+    max-width: pintig.key-create('content-wrap-max-width', pintig.primitive-token-get('dimension.xl'));
     height: 100%;
-    display: ms-core.key-create('content-wrap-display', flex);
+    display: pintig.key-create('content-wrap-display', flex);
     flex-flow: column nowrap;
-    gap: ms-core.key-create('content-wrap-gap', ms-core.primitive-token-get('spacing.md'));
+    gap: pintig.key-create('content-wrap-gap', pintig.primitive-token-get('spacing.md'));
     margin: 0 auto;
     padding:
-      ms-core.key-create('content-wrap-padding-y', ms-core.primitive-token-get('spacing.lg'))
-      ms-core.key-create('content-wrap-padding-x', ms-core.primitive-token-get('spacing.none'));
+      pintig.key-create('content-wrap-padding-y', pintig.primitive-token-get('spacing.lg'))
+      pintig.key-create('content-wrap-padding-x', pintig.primitive-token-get('spacing.none'));
 
     // If grid
-    grid-template-columns: repeat(ms-core.key-create('content-wrap-cols', 4), 1fr);
+    grid-template-columns: repeat(pintig.key-create('content-wrap-cols', 4), 1fr);
 
-    @include ms-core.breakpoint-create('medium') {
-      @include ms-core.key-bind('content-wrap-cols', repeat(8, 1fr));
+    @include pintig.breakpoint-create('medium') {
+      @include pintig.key-bind('content-wrap-cols', repeat(8, 1fr));
     }
 
-    @include ms-core.breakpoint-create('large') {
-      @include ms-core.key-bind('content-wrap-cols', repeat(12, 1fr));
+    @include pintig.breakpoint-create('large') {
+      @include pintig.key-bind('content-wrap-cols', repeat(12, 1fr));
     }
   }
 

package/ms-badge/_badge-base.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 
 @mixin init() {
   .ms-badge {
@@ -34,7 +34,7 @@
     }
 
     .ms-badge__label {
-      @include ms-core.typography-apply('badge', (
+      @include pintig.typography-apply('badge', (
         family: inherit,
         size: inherit,
         weight: inherit,

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

package/ms-badge/_badge-styles.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 @use 'badge-base' as base;
 @use 'badge-theme' as theme;
 
@@ -30,21 +30,21 @@
   $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() {
-    @include ms-core.color-apply('badge', $color);
-    @include ms-core.struct-apply('badge', $struct);
-    @include ms-core.typography-bind('badge', $typography);
+    @include pintig.color-apply('badge', $color);
+    @include pintig.struct-apply('badge', $struct);
+    @include pintig.typography-bind('badge', $typography);
 
     &:where(.is-outlined) {
-      @include ms-core.color-bind('badge', (
+      @include pintig.color-bind('badge', (
         fill: transparent,
-        ink: ms-core.theme-get($color, 'fill'),
-        border: ms-core.theme-get($color, 'border')
+        ink: pintig.theme-get($color, 'fill'),
+        border: pintig.theme-get($color, 'border')
       ));
     }
   }

package/ms-button/_button-base.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 
 @mixin init() {
   .ms-button {
@@ -35,36 +35,36 @@
     vertical-align: middle;
 
     cursor: pointer;
-    outline: ms-core.key-create('button-outline', none);
+    outline: pintig.key-create('button-outline', none);
 
     -webkit-appearance: caret;
-    @include ms-core.prefix(transition, all var(--ms-transition-time) ease);
+    @include pintig.prefix(transition, all var(--ms-transition-time) ease);
 
     @content;
 
     .ms-button__icon {
       position: relative;
-      @include ms-core.color-ink('button-icon', inherit);
-      @include ms-core.typography-size('button-icon', 'size.md');
+      @include pintig.color-ink('button-icon', inherit);
+      @include pintig.typography-size('button-icon', 'size.md');
       /* @fallback */
-      width: ms-core.key-create('button-icon-size', ms-core.primitive-token-get('size.md'));
+      width: pintig.key-create('button-icon-size', pintig.primitive-token-get('size.md'));
       max-width: max-content;
-      height: ms-core.key-create('button-icon-size', ms-core.primitive-token-get('size.md'));
+      height: pintig.key-create('button-icon-size', pintig.primitive-token-get('size.md'));
 
       > * {
         position: relative;
-        @include ms-core.color-ink('button-icon', inherit);
-        @include ms-core.typography-size('button-icon', 'size.md');
+        @include pintig.color-ink('button-icon', inherit);
+        @include pintig.typography-size('button-icon', 'size.md');
         /* @fallback */
-        width: ms-core.key-create('button-icon-size', ms-core.primitive-token-get('size.md'));
+        width: pintig.key-create('button-icon-size', pintig.primitive-token-get('size.md'));
         max-width: max-content;
-        height: ms-core.key-create('button-icon-size', ms-core.primitive-token-get('size.md'));
+        height: pintig.key-create('button-icon-size', pintig.primitive-token-get('size.md'));
       }
     }
 
     .ms-button__label {
-      @include ms-core.color-ink('button-label', inherit);
-      @include ms-core.typography-apply('button-label', (
+      @include pintig.color-ink('button-label', inherit);
+      @include pintig.typography-apply('button-label', (
         family: inherit,
         size: inherit,
         weight: inherit,

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

package/ms-button/_button-mixins.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 @use 'sass:map';
 @use 'sass:string';
 
@@ -30,41 +30,41 @@
   $border: map.get($borders, 'default');
 
   &:not(:disabled) {
-    @include ms-core.color-bind('button', (
+    @include pintig.color-bind('button', (
       fill: transparent,
       ink: $fill,
       border: transparent
     ));
-    @include ms-core.key-bind('button-outline', 2px solid rgba(_raw($fill), ms-core.$color-fill-default-opacity));
+    @include pintig.key-bind('button-outline', 2px solid rgba(_raw($fill), pintig.$color-fill-default-opacity));
 
     &:hover {
-      @include ms-core.color-bind('button', (
-        fill: _smart-alpha-color($fill, ms-core.$color-fill-hover-opacity),
+      @include pintig.color-bind('button', (
+        fill: _smart-alpha-color($fill, pintig.$color-fill-hover-opacity),
         ink: $fill,
-        border: _smart-alpha-color($border, ms-core.$color-border-hover-opacity, $type: 'border')
+        border: _smart-alpha-color($border, pintig.$color-border-hover-opacity, $type: 'border')
       ));
     }
 
     &:focus {
-      @include ms-core.color-bind('button', (
-        fill: _smart-alpha-color($fill, ms-core.$color-fill-focus-opacity),
+      @include pintig.color-bind('button', (
+        fill: _smart-alpha-color($fill, pintig.$color-fill-focus-opacity),
         ink: $fill,
-        border: _smart-alpha-color($border, ms-core.$color-border-focus-opacity, $type: 'border')
+        border: _smart-alpha-color($border, pintig.$color-border-focus-opacity, $type: 'border')
       ));
-      @include ms-core.key-bind('button-outline', 2px solid rgba(_raw($fill), ms-core.$color-outline-focus-opacity));
+      @include pintig.key-bind('button-outline', 2px solid rgba(_raw($fill), pintig.$color-outline-focus-opacity));
     }
 
     &:active {
-      @include ms-core.color-bind('button', (
-        fill: _smart-alpha-color($fill, ms-core.$color-fill-active-opacity),
+      @include pintig.color-bind('button', (
+        fill: _smart-alpha-color($fill, pintig.$color-fill-active-opacity),
         ink: $fill,
-        border: _smart-alpha-color($border, ms-core.$color-border-active-opacity, $type: 'border')
+        border: _smart-alpha-color($border, pintig.$color-border-active-opacity, $type: 'border')
       ));
     }
   }
 
   &:disabled {
-    @include ms-core.color-bind('button', (
+    @include pintig.color-bind('button', (
       fill: transparent,
       ink: $ink-disabled,
       border: transparent
@@ -87,24 +87,24 @@
   $border-disabled: map.get($borders, 'disabled');
 
   &:not(:disabled) {
-    @include ms-core.color-bind('button', (
+    @include pintig.color-bind('button', (
       fill: transparent,
       ink: $fill,
       border: $border
     ));
-    @include ms-core.key-bind('button-outline', 2px solid rgba(_raw($fill), ms-core.$color-fill-default-opacity));
+    @include pintig.key-bind('button-outline', 2px solid rgba(_raw($fill), pintig.$color-fill-default-opacity));
 
     &:focus {
-      @include ms-core.color-bind('button', (
-        fill: _smart-alpha-color($fill, ms-core.$color-fill-focus-opacity),
+      @include pintig.color-bind('button', (
+        fill: _smart-alpha-color($fill, pintig.$color-fill-focus-opacity),
         ink: $fill,
         border: $border
       ));
-      @include ms-core.key-bind('button-outline', 2px solid rgba(_raw($fill), ms-core.$color-outline-focus-opacity));
+      @include pintig.key-bind('button-outline', 2px solid rgba(_raw($fill), pintig.$color-outline-focus-opacity));
     }
 
     &:hover {
-      @include ms-core.color-bind('button', (
+      @include pintig.color-bind('button', (
         fill: $fill-hover,
         ink: $ink,
         border: $border-hover
@@ -112,7 +112,7 @@
     }
 
     &:active {
-      @include ms-core.color-bind('button', (
+      @include pintig.color-bind('button', (
         fill: $fill-active,
         ink: $ink,
         border: $border-active
@@ -121,7 +121,7 @@
   }
 
   &:disabled {
-    @include ms-core.color-bind('button', (
+    @include pintig.color-bind('button', (
       fill: transparent,
       ink: $ink-disabled,
       border: $border-disabled
@@ -144,15 +144,15 @@
   $border-disabled: map.get($borders, 'disabled');
 
   &:not(:disabled) {
-    @include ms-core.color-bind('button', (
+    @include pintig.color-bind('button', (
       fill: $fill,
       ink: $ink,
       border: $border
     ));
-    @include ms-core.key-bind('button-outline', 2px solid rgba(_raw($fill), ms-core.$color-fill-default-opacity));
+    @include pintig.key-bind('button-outline', 2px solid rgba(_raw($fill), pintig.$color-fill-default-opacity));
 
     &:hover {
-      @include ms-core.color-bind('button', (
+      @include pintig.color-bind('button', (
         fill: $fill-hover,
         ink: $ink,
         border: $border-hover
@@ -160,16 +160,16 @@
     }
 
     &:focus {
-      @include ms-core.color-bind('button', (
+      @include pintig.color-bind('button', (
         fill: $fill-focus,
         ink: $ink,
         border: $border-focus
       ));
-      @include ms-core.key-bind('button-outline', 2px solid rgba(_raw($fill), ms-core.$color-outline-focus-opacity));
+      @include pintig.key-bind('button-outline', 2px solid rgba(_raw($fill), pintig.$color-outline-focus-opacity));
     }
 
     &:active {
-      @include ms-core.color-bind('button', (
+      @include pintig.color-bind('button', (
         fill: $fill-active,
         ink: $ink,
         border: $border-active
@@ -178,7 +178,7 @@
   }
 
   &:disabled {
-    @include ms-core.color-bind('button', (
+    @include pintig.color-bind('button', (
       fill: $fill-disabled,
       ink: $ink-disabled,
       border: $border-disabled
@@ -191,12 +191,12 @@
   $_color: string.slice($query, 1, (string.length($query) - 4));
   // $_tone: string.slice($query, (string.length($_color) + 2), (string.length($query)));
   @if $type == 'border' { @return rgba(#fff, 0%); }
-  @if ms-core.token-check('#{$_color}-alpha-#{map.get($_tones, $state)}') {
-    @return ms-core.token-get('#{$_color}-alpha-#{map.get($_tones, $state)}');
+  @if pintig.token-check('#{$_color}-alpha-#{map.get($_tones, $state)}') {
+    @return pintig.token-get('#{$_color}-alpha-#{map.get($_tones, $state)}');
   }
   @return _raw($query, $opacity);
 }
 
 @function _raw($query) {
-  @return ms-core.token-switch-raw($query);
+  @return pintig.token-switch-raw($query);
 }

package/ms-button/_button-styles.scss

@@ -20,7 +20,7 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use '@matteusan/pintig';
 @use 'sass:list';
 @use 'button-base' as base;
 @use 'button-theme' as theme;
@@ -34,39 +34,39 @@ $_states: ('error');
   $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);
 
   $fills: (
-    default: ms-core.theme-get($color, 'fill'),
-    hover: ms-core.theme-get($color, 'fill', 'hover'),
-    focus: ms-core.theme-get($color, 'fill', 'focus'),
-    active: ms-core.theme-get($color, 'fill', 'active'),
-    disabled: ms-core.theme-get($color, 'fill', 'disabled'),
+    default: pintig.theme-get($color, 'fill'),
+    hover: pintig.theme-get($color, 'fill', 'hover'),
+    focus: pintig.theme-get($color, 'fill', 'focus'),
+    active: pintig.theme-get($color, 'fill', 'active'),
+    disabled: pintig.theme-get($color, 'fill', 'disabled'),
   );
 
   $inks: (
-    default: ms-core.theme-get($color, 'ink'),
-    hover: ms-core.theme-get($color, 'ink', 'hover'),
-    focus: ms-core.theme-get($color, 'ink', 'focus'),
-    active: ms-core.theme-get($color, 'ink', 'active'),
-    disabled: ms-core.theme-get($color, 'ink', 'disabled'),
+    default: pintig.theme-get($color, 'ink'),
+    hover: pintig.theme-get($color, 'ink', 'hover'),
+    focus: pintig.theme-get($color, 'ink', 'focus'),
+    active: pintig.theme-get($color, 'ink', 'active'),
+    disabled: pintig.theme-get($color, 'ink', 'disabled'),
   );
 
   $borders: (
-    default: ms-core.theme-get($color, 'border'),
-    hover: ms-core.theme-get($color, 'border', 'hover'),
-    focus: ms-core.theme-get($color, 'border', 'focus'),
-    active: ms-core.theme-get($color, 'border', 'active'),
-    disabled: ms-core.theme-get($color, 'border', 'disabled'),
+    default: pintig.theme-get($color, 'border'),
+    hover: pintig.theme-get($color, 'border', 'hover'),
+    focus: pintig.theme-get($color, 'border', 'focus'),
+    active: pintig.theme-get($color, 'border', 'active'),
+    disabled: pintig.theme-get($color, 'border', 'disabled'),
   );
 
   @include base.init() {
-    @include ms-core.struct-apply('button', $struct);
-    @include ms-core.typography-apply('button', $typography);
-    @include ms-core.color-apply('button', (
+    @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',
@@ -83,9 +83,9 @@ $_states: ('error');
     }
 
     &:where(.is-icon-only) {
-      @include ms-core.struct-bind('button', (
+      @include pintig.struct-bind('button', (
         width: (min: auto),
-        padding: list.nth(ms-core.theme-get($struct, 'padding'), 1)
+        padding: list.nth(pintig.theme-get($struct, 'padding'), 1)
       ));
 
       > .ms-button__label {
@@ -119,7 +119,7 @@ $_states: ('error');
     }
 
     &:where(.is-fullwidth) {
-      @include ms-core.struct-width('button', (
+      @include pintig.struct-width('button', (
         default: 100%,
         min: auto,
         max: 100%
@@ -193,15 +193,15 @@ $_states: ('error');
 
       &:where(.is-raised) {
         &:not(:disabled) {
-          @include ms-core.struct-shadow('button', 'xs');
+          @include pintig.struct-shadow('button', 'xs');
 
           &:hover,
           &:focus {
-            @include ms-core.struct-shadow('button', 'xs');
+            @include pintig.struct-shadow('button', 'xs');
           }
 
           &:active {
-            @include ms-core.struct-shadow('button', 'sm');
+            @include pintig.struct-shadow('button', 'sm');
           }
         }
       }