@matteusan/himig 1.2.3 → 1.3.0

package/_index.scss

@@ -44,7 +44,10 @@ $vue-mode: $test-mode !default;
   $surface: 'ms-dark-grey',
   $background: 'ms-dark-grey.800',
   $error: 'ms-red',
-  $undefined: 'ms-grey',
+  $disabled: (
+    'default': rgba(#fff, 12%),
+    'ink': rgba(#fff, 34%)
+  ),
   $radius: (),
   $global: (),
   $supertitle: (),
@@ -61,7 +64,7 @@ $vue-mode: $test-mode !default;
   $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);
-  $undefined: ms-core.prioritize(map.get($theme, 'undefined'), $undefined);
+  $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);
@@ -139,7 +142,7 @@ $vue-mode: $test-mode !default;
       $surface: $surface,
       $background: $background,
       $error: $error,
-      $undefined: $undefined,
+      $disabled: $disabled,
       $radius: $radius,
       $breakpoints: $breakpoints,
       $global: map.merge($_init-type-global, $global),
@@ -158,18 +161,19 @@ $vue-mode: $test-mode !default;
     --ms-transition-time: 0.2s;
 
     font-family: ms-core.token-get('family-global');
+    line-height: ms-core.token-get('line-height-global');
   }
 
   @include ms-core.breakpoint-config(map.merge($_init-breakpoints, $breakpoints));
 
   @include font-pack.load((
-    'global': map.get($global, 'family'),
-    'supertitle': map.get($supertitle, 'family'),
-    'title': map.get($title, 'family'),
-    'subtitle': map.get($subtitle, 'family'),
-    'body': map.get($body, 'family'),
-    'mono': map.get($mono, 'family'),
-    'small': map.get($small, 'family'),
+    'global': map.get(map.merge($_init-type-global, $global), 'family'),
+    'supertitle': map.get(map.merge($_init-type-supertitle, $supertitle), 'family'),
+    'title': map.get(map.merge($_init-type-title, $title), 'family'),
+    'subtitle': map.get(map.merge($_init-type-subtitle, $subtitle), 'family'),
+    'body': map.get(map.merge($_init-type-body, $body), 'family'),
+    'mono': map.get(map.merge($_init-type-mono, $mono), 'family'),
+    'small': map.get(map.merge($_init-type-small, $small), 'family'),
   ));
 
   *,
@@ -208,21 +212,25 @@ $vue-mode: $test-mode !default;
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;
-    line-height: ms-core.primitive-token-get('line-height.normal');
+    line-height: inherit;
   }
 
   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'));
-    display: ms-core.key-create('content-wrap-display', grid);
-    grid-template-columns: repeat(ms-core.key-create('content-wrap-cols', 4), 1fr);
+    height: 100%;
+    display: ms-core.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'));
     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'));
 
+    // If grid
+    grid-template-columns: repeat(ms-core.key-create('content-wrap-cols', 4), 1fr);
+
     @include ms-core.breakpoint-create('medium') {
       @include ms-core.key-bind('content-wrap-cols', repeat(8, 1fr));
     }

package/ms-badge/_badge-extend.scss

@@ -23,10 +23,10 @@
 @use '../ms-core';
 
 /// Component variant maker.
-/// @param {string} $variant
+/// @param {string} $variants
 /// @return {*} extension class.
-@mixin extend($variant) {
-  .ms-badge.is-#{$variant} {
+@mixin extend($variants) {
+  @include ms-core.component-extend('badge', $variants) {
     @content;
   }
 }

package/ms-badge/_badge-styles.scss

@@ -39,5 +39,13 @@
     @include ms-core.color-apply('badge', $color);
     @include ms-core.struct-apply('badge', $struct);
     @include ms-core.typography-bind('badge', $typography);
+
+    &:where(.is-outlined) {
+      @include ms-core.color-bind('badge', (
+        fill: transparent,
+        ink: ms-core.theme-get($color, 'fill'),
+        border: ms-core.theme-get($color, 'border')
+      ));
+    }
   }
 }

package/ms-button/_button-extend.scss

@@ -23,10 +23,10 @@
 @use '../ms-core';
 
 /// Component variant maker.
-/// @param {string} $variant
+/// @param {string} $variants
 /// @return {*} extension class.
-@mixin extend($variant) {
-  .ms-button.is-#{$variant} {
+@mixin extend($variants) {
+  @include ms-core.component-extend('button', $variants) {
     @content;
   }
 }

package/ms-button/_button-mixins.scss

@@ -22,11 +22,11 @@
 
 @use '../ms-core';
 @use 'sass:map';
+@use 'sass:string';
 
 @mixin text($fills, $inks, $borders) {
   $fill: map.get($fills, 'default');
-  $fill-disabled: map.get($fills, 'disabled');
-  $ink-disabled: map.get($fills, 'disabled');
+  $ink-disabled: map.get($inks, 'disabled');
   $border: map.get($borders, 'default');
 
   &:not(:disabled) {
@@ -35,30 +35,30 @@
       ink: $fill,
       border: transparent
     ));
-    @include ms-core.key-bind('button-outline', 2px solid rgba(raw($fill), ms-core.$color-fill-default-opacity));
+    @include ms-core.key-bind('button-outline', 2px solid rgba(_raw($fill), ms-core.$color-fill-default-opacity));
 
     &:hover {
       @include ms-core.color-bind('button', (
-        fill: rgba(raw($fill), ms-core.$color-fill-hover-opacity),
+        fill: _smart-alpha-color($fill, ms-core.$color-fill-hover-opacity),
         ink: $fill,
-        border: rgba(raw($border), ms-core.$color-border-hover-opacity)
+        border: _smart-alpha-color($border, ms-core.$color-border-hover-opacity, $type: 'border')
       ));
     }
 
     &:focus {
       @include ms-core.color-bind('button', (
-        fill: rgba(raw($fill), ms-core.$color-fill-focus-opacity),
+        fill: _smart-alpha-color($fill, ms-core.$color-fill-focus-opacity),
         ink: $fill,
-        border: rgba(raw($border), ms-core.$color-border-focus-opacity)
+        border: _smart-alpha-color($border, ms-core.$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 ms-core.key-bind('button-outline', 2px solid rgba(_raw($fill), ms-core.$color-outline-focus-opacity));
     }
 
     &:active {
       @include ms-core.color-bind('button', (
-        fill: rgba(raw($fill), ms-core.$color-fill-active-opacity),
+        fill: _smart-alpha-color($fill, ms-core.$color-fill-active-opacity),
         ink: $fill,
-        border: rgba(raw($border), ms-core.$color-border-active-opacity)
+        border: _smart-alpha-color($border, ms-core.$color-border-active-opacity, $type: 'border')
       ));
     }
   }
@@ -79,7 +79,7 @@
   $fill-active: map.get($fills, 'active');
   $fill-disabled: map.get($fills, 'disabled');
   $ink: map.get($inks, 'default');
-  $ink-disabled: map.get($fills, 'disabled');
+  $ink-disabled: map.get($inks, 'disabled');
   $border: map.get($borders, 'default');
   $border-hover: map.get($borders, 'hover');
   $border-focus: map.get($borders, 'focus');
@@ -92,15 +92,15 @@
       ink: $fill,
       border: $border
     ));
-    @include ms-core.key-bind('button-outline', 2px solid rgba(raw($fill), ms-core.$color-fill-default-opacity));
+    @include ms-core.key-bind('button-outline', 2px solid rgba(_raw($fill), ms-core.$color-fill-default-opacity));
 
     &:focus {
       @include ms-core.color-bind('button', (
-        fill: rgba(raw($fill), ms-core.$color-fill-focus-opacity),
+        fill: _smart-alpha-color($fill, ms-core.$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 ms-core.key-bind('button-outline', 2px solid rgba(_raw($fill), ms-core.$color-outline-focus-opacity));
     }
 
     &:hover {
@@ -149,7 +149,7 @@
       ink: $ink,
       border: $border
     ));
-    @include ms-core.key-bind('button-outline', 2px solid rgba(raw($fill), ms-core.$color-fill-default-opacity));
+    @include ms-core.key-bind('button-outline', 2px solid rgba(_raw($fill), ms-core.$color-fill-default-opacity));
 
     &:hover {
       @include ms-core.color-bind('button', (
@@ -165,7 +165,7 @@
         ink: $ink,
         border: $border-focus
       ));
-      @include ms-core.key-bind('button-outline', 2px solid rgba(raw($fill), ms-core.$color-outline-focus-opacity));
+      @include ms-core.key-bind('button-outline', 2px solid rgba(_raw($fill), ms-core.$color-outline-focus-opacity));
     }
 
     &:active {
@@ -186,6 +186,17 @@
   }
 }
 
-@function raw($query) {
+@function _smart-alpha-color($query, $opacity, $type: 'fill', $state: 'hover') {
+  $_tones: ('hover': 400, 'active': 600);
+  $_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)}');
+  }
+  @return _raw($query, $opacity);
+}
+
+@function _raw($query) {
   @return ms-core.token-switch-raw($query);
 }

package/ms-button/_button-styles.scss

@@ -78,6 +78,10 @@ $_states: ('error');
     );
     outline-offset: 2px;
 
+    &:where(:disabled) {
+      cursor: not-allowed;
+    }
+
     &:where(.is-icon-only) {
       @include ms-core.struct-bind('button', (
         width: (min: auto),
@@ -97,18 +101,18 @@ $_states: ('error');
             'hover': '#{$state}-300',
             'focus': '#{$state}-400',
             'active': '#{$state}-200',
-            'disabled': '#{$state}-800',
+            'disabled': 'disabled-ink',
           ),
           $inks: (
             'default': '#{$state}-ink',
-            'disabled': '#{$state}-800'
+            'disabled': 'disabled-ink'
           ),
           $borders: (
             'default': '#{$state}-400',
             'hover': '#{$state}-300',
             'focus': '#{$state}-400',
             'active': '#{$state}-200',
-            'disabled': '#{$state}-800',
+            'disabled': 'disabled-ink',
           )
         );
       }
@@ -137,18 +141,18 @@ $_states: ('error');
               'hover': '#{$state}-300',
               'focus': '#{$state}-400',
               'active': '#{$state}-200',
-              'disabled': '#{$state}-800',
+              'disabled': 'disabled-ink',
             ),
             $inks: (
               'default': '#{$state}-ink',
-              'disabled': '#{$state}-800'
+              'disabled': 'disabled-ink'
             ),
             $borders: (
               'default': '#{$state}-400',
               'hover': '#{$state}-300',
               'focus': '#{$state}-400',
               'active': '#{$state}-200',
-              'disabled': '#{$state}-800',
+              'disabled': 'disabled-ink',
             )
           );
         }
@@ -170,18 +174,18 @@ $_states: ('error');
               'hover': '#{$state}-300',
               'focus': '#{$state}-400',
               'active': '#{$state}-200',
-              'disabled': '#{$state}-800',
+              'disabled': 'disabled',
             ),
             $inks: (
               'default': '#{$state}-ink',
-              'disabled': '#{$state}-600'
+              'disabled': 'disabled-ink'
             ),
             $borders: (
               'default': '#{$state}-400',
               'hover': '#{$state}-300',
               'focus': '#{$state}-400',
               'active': '#{$state}-200',
-              'disabled': '#{$state}-800',
+              'disabled': 'disabled',
             )
           );
         }

package/ms-button/_button-theme.scss

@@ -26,21 +26,21 @@ $init-color: (
     hover: 'accent-300',
     active: 'accent-200',
     focus: 'accent-400',
-    disabled: 'undefined-300',
+    disabled: 'disabled',
   ),
   ink: (
     default: 'accent-ink',
     hover: 'accent-ink',
     active: 'accent-ink',
     focus: 'accent-ink',
-    disabled: 'undefined-600',
+    disabled: 'disabled-ink',
   ),
   border: (
     default: 'accent-400',
     hover: 'accent-300',
     active: 'accent-200',
     focus: 'accent-400',
-    disabled: 'undefined-300',
+    disabled: 'disabled',
   ),
 );
 
@@ -50,7 +50,7 @@ $init-struct: (
     min: 69px,
     max: max-content
   ),
-  padding: ('sm' 'md'),
+  padding: ('md' 'lg'),
   radius: 'small',
   border-width: 'xs',
   border-style: solid,
@@ -61,7 +61,7 @@ $init-typography: (
   family: 'global',
   size: 'body',
   weight: 'bold',
-  line-height: 'condensed'
+  line-height: 1.25rem
 );
 
 $init-settings: ();

package/ms-card/_card-base.scss

@@ -0,0 +1,243 @@
+//---------------------------------------------------
+//  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 '../ms-core';
+@use 'sass:map';
+
+@mixin init(
+  $struct,
+  $typography,
+) {
+  $radius: ms-core.theme-get($struct, 'radius');
+  $padding: ms-core.theme-get($struct, 'padding');
+  $section-gap: ms-core.theme-get($struct, 'gap', 'section');
+  $header-gap: ms-core.theme-get($struct, 'gap', 'header');
+  $footer-gap: ms-core.theme-get($struct, 'gap', 'footer');
+
+  $title-family: ms-core.theme-get($typography, 'family', 'title');
+  $title-size: ms-core.theme-get($typography, 'size', 'title');
+  $title-weight: ms-core.theme-get($typography, 'weight', 'title');
+  $title-line-height: ms-core.theme-get($typography, 'line-height', 'title');
+
+  $subtitle-family: ms-core.theme-get($typography, 'family', 'subtitle');
+  $subtitle-size: ms-core.theme-get($typography, 'size', 'subtitle');
+  $subtitle-weight: ms-core.theme-get($typography, 'weight', 'subtitle');
+  $subtitle-line-height: ms-core.theme-get($typography, 'line-height', 'subtitle');
+
+  $content-family: ms-core.theme-get($typography, 'family');
+  $content-size: ms-core.theme-get($typography, 'size');
+  $content-weight: ms-core.theme-get($typography, 'weight');
+  $content-line-height: ms-core.theme-get($typography, 'line-height');
+
+  $icon-size: ms-core.theme-get($struct, 'size', 'icon');
+
+  .ms-card {
+    // @include ms-core.key-bind('card-section-gap', ms-core.primitive-token-switch('spacing.#{$section-gap}', $section-gap));
+    @include ms-core.struct-gap('card-section', $section-gap, 'bind');
+    // overflow: hidden;
+
+    @content;
+
+    .ms-card__media {
+      width: 100%;
+      height: 100%;
+      max-height: 120px;
+      overflow: hidden;
+      @include ms-core.struct-apply('card-media', (
+        radius: ($radius $radius 0 0),
+      ));
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+      }
+    }
+
+    .ms-card__header {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      gap: ms-core.key-create('card-header-gap', ms-core.primitive-token-switch('spacing.#{$header-gap}', $header-gap));
+      @include ms-core.color-border('card', transparent);
+      @include ms-core.struct-apply('card-header', (
+        radius: (0),
+        padding: ($padding $padding 0),
+        border-width: ('xs' 'xs' 0),
+        border-style: 'solid',
+      ));
+
+      &:not(:only-child),
+      &:not(:last-child) {
+        padding-bottom: ms-core.key-get('card-section-gap');
+      }
+
+      &:last-child {
+        @include ms-core.struct-bind('card-header', (
+          radius: (0 0 $radius $radius),
+          border-width: (0 'xs' 'xs'),
+          padding: (0 $padding $padding),
+        ));
+      }
+
+      &:first-child {
+        @include ms-core.struct-bind('card-header', (
+          radius: ($radius $radius 0 0),
+          padding: ($padding $padding 0),
+          border-width: ('xs' 'xs' 0),
+        ));
+      }
+
+      &:only-child {
+        @include ms-core.struct-bind('card-header', (
+          radius: $radius,
+          padding: $padding,
+          border-width: ('xs'),
+        ));
+      }
+
+      .ms-card__mast {
+        .ms-card__title {
+          @include ms-core.typography-apply('card-title', (
+            family: $title-family,
+            size: $title-size,
+            weight: $title-weight,
+            line-height: $title-line-height
+          ));
+          @include ms-core.break(1);
+        }
+
+        .ms-card__subtitle {
+          @include ms-core.typography-apply('card-subtitle', (
+            family: $subtitle-family,
+            size: $subtitle-size,
+            weight: $subtitle-weight,
+            line-height: $subtitle-line-height
+          ));
+          @include ms-core.break(2);
+        }
+      }
+
+      .ms-card__icon {
+        width: ms-core.key-create('card-icon-size', ms-core.token-switch($icon-size));
+        height: ms-core.key-create('card-icon-size', ms-core.token-switch($icon-size));
+        border-radius: 50%;
+        @include ms-core.color-apply('card-icon', (
+          border: 'accent-400'
+        ));
+        @include ms-core.struct-apply('card-icon', (
+          border-width: 1px,
+          border-style: solid
+        ));
+
+        img {
+          height: 100%;
+          object-fit: cover;
+          object-position: center;
+        }
+      }
+    }
+
+    .ms-card__content {
+      @include ms-core.color-border('card', transparent);
+      @include ms-core.struct-apply('card', (
+        radius: (0 0 $radius $radius),
+        padding: (0 $padding),
+        border-width: (0 'xs' 'xs'),
+        border-style: 'solid',
+      ));
+
+      p {
+        @include ms-core.typography-apply('card', (
+          family: $content-family,
+          size: $content-size,
+          weight: $content-weight,
+          line-height: $content-line-height
+        ));
+      }
+
+      &:not(:only-child),
+      &:not(:last-child) {
+        padding-bottom: ms-core.key-get('card-section-gap');
+      }
+
+      &:last-child {
+        @include ms-core.struct-bind('card', (
+          radius: (0 0 $radius $radius),
+          padding: (0 $padding $padding),
+        ));
+      }
+
+      &:first-child {
+        @include ms-core.struct-bind('card', (
+          radius: ($radius $radius 0 0),
+          padding: ($padding $padding 0),
+          border-width: ('xs' 'xs' 0),
+        ));
+      }
+
+      &:only-child {
+        @include ms-core.struct-bind('card', (
+          radius: $radius,
+          padding: $padding,
+          border-width: 'xs'
+        ));
+      }
+    }
+
+    .ms-card__footer {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: end;
+      gap: ms-core.key-create('card-footer-gap', ms-core.primitive-token-switch('spacing.#{$footer-gap}', $footer-gap));
+      @include ms-core.color-border('card', transparent);
+      @include ms-core.struct-apply('card-footer', (
+        radius: (0 0 $radius $radius),
+        padding: (0 $padding),
+        border-width: 'xs',
+        border-style: 'solid',
+      ));
+
+      &:last-child {
+        @include ms-core.struct-bind('card-footer', (
+          radius: (0 0 $radius $radius),
+          padding: (0 $padding $padding),
+        ));
+      }
+
+      &:first-child {
+        @include ms-core.struct-bind('card-footer', (
+          radius: ($radius $radius 0 0),
+          padding: ($padding $padding 0),
+        ));
+      }
+
+      &:only-child {
+        @include ms-core.struct-bind('card-footer', (
+          radius: $radius,
+          padding: $padding,
+        ));
+      }
+    }
+  }
+}

package/{ms-surface/_surface-extend.scss → ms-card/_card-extend.scss}

@@ -23,10 +23,10 @@
 @use '../ms-core';
 
 /// Component variant maker.
-/// @param {string} $variant
+/// @param {string} $variants
 /// @return {*} extension class.
-@mixin extend($variant) {
-  .ms-surface.is-#{$variant} {
+@mixin extend($variants) {
+  @include ms-core.component-extend('card', $variants) {
     @content;
   }
 }
@@ -35,19 +35,19 @@
 /// @param {map} $color-map
 /// @return {*} color styles.
 @mixin color($color-map) {
-  @include ms-core.color-bind('surface', $color-map);
+  @include ms-core.color-bind('card', $color-map);
 }
 
 /// Structure variant mixin.
 /// @param {map} $struct-map
 /// @return {*} struct styles.
 @mixin struct($struct-map) {
-  @include ms-core.struct-bind('surface', $struct-map);
+  @include ms-core.struct-bind('card', $struct-map);
 }
 
 /// Typography variant mixin.
 /// @param {map} $type-map
 /// @return {*} typography styles.
 @mixin typography($type-map) {
-  @include ms-core.typography-bind('surface', $type-map);
+  @include ms-core.typography-bind('card', $type-map);
 }