@matteusan/himig 1.2.3 → 1.3.1

package/{ms-item-card/_item-card-styles.scss → ms-card/_card-styles.scss}

@@ -21,8 +21,9 @@
 //---------------------------------------------------
 
 @use '../ms-core';
-@use 'item-card-base' as base;
-@use 'item-card-theme' as theme;
+@use 'sass:list';
+@use 'card-base' as base;
+@use 'card-theme' as theme;
 
 @mixin render(
   $color: (),
@@ -35,30 +36,32 @@
   $typography: ms-core.theme-merge(theme.$init-typography, $typography);
   $settings: ms-core.theme-merge(theme.$init-settings, $settings);
 
-  @include base.init() {
-    @include ms-core.color-bind('item-card', $color);
-    @include ms-core.struct-bind('item-card', $struct);
-    @include ms-core.struct-bind('item-card-footer', (
-      padding: ms-core.theme-get($struct, 'padding', 'footer'),
+  @include base.init(
+    $struct,
+    $typography
+  ) {
+    @include ms-core.color-apply('card', (
+      fill: ms-core.theme-get($color, 'fill'),
+      ink: ms-core.theme-get($color, 'ink'),
     ));
-    @include ms-core.typography-bind('item-card', $typography);
-    @include ms-core.typography-bind('item-card-title', (
-      family: ms-core.theme-get($typography, 'family', 'title'),
-      size: ms-core.theme-get($typography, 'size', 'title'),
-      weight: ms-core.theme-get($typography, 'weight', 'title'),
-      line-height: ms-core.theme-get($typography, 'line-height', 'title'),
-    ));
-    @include ms-core.typography-bind('item-card-subtitle', (
-      family: ms-core.theme-get($typography, 'family', 'subtitle'),
-      size: ms-core.theme-get($typography, 'size', 'subtitle'),
-      weight: ms-core.theme-get($typography, 'weight', 'subtitle'),
-      line-height: ms-core.theme-get($typography, 'line-height', 'subtitle'),
-    ));
-    @include ms-core.typography-bind('item-card-footer', (
-      family: ms-core.theme-get($typography, 'family', 'footer'),
-      size: ms-core.theme-get($typography, 'size', 'footer'),
-      weight: ms-core.theme-get($typography, 'weight', 'footer'),
-      line-height: ms-core.theme-get($typography, 'line-height', 'footer'),
+    @include ms-core.color-border('card', ms-core.theme-get($color, 'border'), 'bind');
+    @include ms-core.struct-apply('card', (
+      radius: ms-core.theme-get($struct, 'radius'),
+      shadow: 'none',
     ));
+
+    &:where(.is-outlined) {
+      @include ms-core.color-bind('card', (
+        fill: ms-core.theme-get($color, 'fill', 'outlined'),
+        ink: ms-core.theme-get($color, 'ink'),
+        border: ms-core.theme-get($color, 'border')
+      ));
+    }
+
+    &:where(.is-raised) {
+      @include ms-core.struct-bind('card', (
+        shadow: 'low'
+      ));
+    }
   }
 }

package/{ms-item-card/_item-card-theme.scss → ms-card/_card-theme.scss}

@@ -21,46 +21,48 @@
 //---------------------------------------------------
 
 $init-color: (
-  fill: 'surface-400',
+  fill: (
+    default: 'surface-200',
+    outlined: 'surface-alpha-400'
+  ),
   ink: 'surface-ink',
-  border: 'surface-400',
+  border: 'surface-200',
 );
 
 $init-struct: (
-  padding: (
-    default: 'md',
-    footer: ('sm' 'md')
-  ),
-  radius: 'small',
-  gap: 'sm',
+  radius: 'md',
+  padding: 'lg',
   border-width: 'xs',
-  border-style: solid,
+  border-style: 'solid',
+  gap: (
+    section: 'md',
+    header: 'md',
+    footer: 'md',
+  )
 );
 
 $init-typography: (
   family: (
-    default: 'global',
-    title: 'title',
-    subtitle: 'subtitle',
-    footer: 'small'
+    'default': 'body',
+    'title': 'subtitle',
+    'subtitle': 'body',
   ),
   size: (
-    default: 'body',
-    title: 'subtitle',
-    subtitle: 'small',
-    footer: 'small'
+    'default': 'body',
+    'title': 'title',
+    'subtitle': 'body',
+    'icon': 66px
   ),
   weight: (
-    default: 'normal',
-    title: 'bold',
-    subtitle: 'normal',
-    footer: 'normal'
+    'default': 'normal',
+    'title': 'bold',
+    'subtitle': 'normal',
   ),
   line-height: (
-    default: 'normal',
-    title: 'normal',
-    footer: 'condensed',
-  )
+    'default': 'normal',
+    'title': 'normal',
+    'subtitle': 'normal',
+  ),
 );
 
 $init-settings: ();

package/{ms-sprite → ms-card}/_index.scss

@@ -20,4 +20,4 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@forward 'sprite-styles';
+@forward 'card-styles';

package/ms-core/README.md

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

package/ms-core/_index.scss

@@ -73,4 +73,5 @@ $type-inherit-template: (
 @forward 'color' as color-*;
 @forward 'struct' as struct-*;
 @forward 'sprite' as sprite-*;
-@forward 'typography' as typography-*;
+@forward 'typography' as typography-*;
+@forward 'component' as component-*;

package/{ms-sprite/_sprite-styles.scss → ms-core/component/_component-extend.scss}

@@ -20,38 +20,37 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@use '../ms-core';
+@use 'sass:list';
+@use 'sass:string';
+@use '../tools';
 
-@mixin render() {
-  .ms-sprite {
-    @include ms-core.sprite-styles();
+@mixin extend($component-name, $extension) {
+  $_extensions: tools.str-split($extension, '.');
+  $_sanitized-extension: '';
 
-    &:where(.is-icon) {
-      position: relative;
-      @include ms-core.color-ink('sprite', inherit);
-      @include ms-core.typography-size('sprite-font', 'size.md');
-      /* @fallback */
-      @include ms-core.struct-bind('sprite', (
-        width: (
-          default: 'size.md',
-          max: max-content
-        ),
-        height: 'size.md',
-      ));
-
-      > * {
-        position: relative;
-        @include ms-core.color-ink('sprite', inherit);
-        @include ms-core.typography-size('sprite-font', 'size.md');
-        /* @fallback */
-        @include ms-core.struct-bind('sprite', (
-          width: (
-            default: 'size.md',
-            max: max-content
-          ),
-          height: 'size.md',
-        ));
+  @each $ext in $_extensions {
+    @if list.index($_extensions, $ext) == 1 {
+      @if string.slice($ext, 1, 3) == 'is-' {
+        $_sanitized-extension: $_sanitized-extension + string.slice($ext, 4);
+      } @else {
+        $_sanitized-extension: $_sanitized-extension + $ext;
+      }
+    } @else if list.index($_extensions, $ext) == list.length($_extensions) {
+      @if string.slice($ext, 1, 3) == 'is-' {
+        $_sanitized-extension: $_sanitized-extension + '.#{$ext}';
+      } @else {
+        $_sanitized-extension: $_sanitized-extension + '.is-#{$ext}';
+      }
+    } @else {
+      @if string.slice($ext, 1, 3) == 'is-' {
+        $_sanitized-extension: $_sanitized-extension + '.#{$ext}';
+      } @else {
+        $_sanitized-extension: $_sanitized-extension + '.is-#{$ext}';
       }
     }
   }
+
+  .ms-#{$component-name}.is-#{$_sanitized-extension} {
+    @content;
+  }
 }

package/{ms-surface → ms-core/component}/_index.scss

@@ -20,5 +20,4 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@forward 'surface-styles';
-@forward 'surface-extend';
+@forward 'component-extend';

package/ms-core/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@matteusan/ms-core",
+  "version": "1.3.1",
+  "description": "The core library for the Himig Design System.",
+  "main": "_index.scss",
+  "repository": "https://github.com/MatteuSan/himig",
+  "author": "Matteu <matteugt@gmail.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@matteusan/sentro": "0.1.25"
+  }
+}

package/ms-core/struct/_struct-utils.scss

@@ -75,7 +75,7 @@ $_valid-arbitrary-values: (0, inherit);
 /// @param {string} $intent
 /// @return {void} width styles.
 @mixin height($component, $height, $intent: 'create') {
-  @if tools.is-type('map', $height, $errors: false) {
+  @if tools.is-type($height, 'map', $errors: false) {
     $min: map.get($height, 'min');
     $default: map.get($height, 'default');
     $max: map.get($height, 'max');
@@ -157,7 +157,7 @@ $_valid-arbitrary-values: (0, inherit);
 @mixin border-width($component, $border-width, $intent: 'create') {
   @include theme.property(
     border-width,
-    ('#{$component}-border-width', theme.token-switch('border-#{$border-width}', tokens.primitive-token-switch('border.#{$border-width}', $border-width))),
+    ('#{$component}-border-width', _parse-value('border', $border-width)),
     $intent
   );
 }
@@ -211,11 +211,7 @@ $_valid-arbitrary-values: (0, inherit);
         theme.token-switch('#{$key}-#{$value}', tokens.primitive-token-switch('#{$key}.#{$value}', $value)),
       'space');
     } @else {
-      @if not list.index($_valid-arbitrary-values, $value) {
-        @error 'Invalid value: #{$value}. Expecting a valid #{$key} token, inherit, or the number 0.';
-      } @else {
-        $result: list.append($result, $value, 'space');
-      }
+      $result: list.append($result, $value, 'space');
     }
   }
   @return $result;

package/ms-core/theme/_theme-merge.scss

@@ -42,5 +42,5 @@
 /// @param {map} $modifying-map
 /// @return {map} The merged map.
 @function _smart-merge($base-map, $modifying-map) {
-  @return map.merge($base-map, $modifying-map);
+  @return map.deep-merge($base-map, $modifying-map);
 }

package/ms-core/theme/_theme-properties.scss

@@ -21,8 +21,10 @@
 //---------------------------------------------------
 
 @use '../tokens' as primitive-token;
+@use '../tools';
 @use 'sass:map';
 @use 'sass:list';
+@use 'sass:string';
 
 @use 'theme-tokens' as token;
 @use 'theme-keys' as key;
@@ -48,5 +50,12 @@ $_valid-intents: (
 }
 
 @function _assert-value($query) {
+  @if tools.is-type($query, 'list', false) {
+    @if list.length($query) == 2 and
+     token.check(list.nth($query, 1)) or primitive-token.primitive-token-check(list.nth($query, 1)) and
+     list.nth($query, 2) == string.unquote('!important') {
+      @return token.switch(list.nth($query, 1), primitive-token.primitive-token-switch(list.nth($query, 1))) + ' ' + list.nth($query, 2);
+    }
+  }
   @return token.switch($query, primitive-token.primitive-token-switch($query));
 }

package/ms-core/theme/_theme-setters.scss

@@ -36,7 +36,7 @@ $expressive-inks: false !default;
   $error: (),
   $warning: (),
   $success: (),
-  $undefined: (),
+  $disabled: (),
   $radius: (),
   $breakpoints: (),
   $global: (),
@@ -84,7 +84,10 @@ $expressive-inks: false !default;
     $background-ink: tools.get-ink(tokens.primitive-token-switch($background)),
     $error: _color-theme-token-module($error),
     $error-alpha: _alpha-color-theme-token-module($error),
-    $undefined: _color-theme-token-module($undefined),
+    $disabled: (
+      'default': map.get($disabled, 'default'),
+      'ink': tools.prioritize(map.get($disabled, 'ink'), tools.get-ink(map.get($disabled, 'default'), $expressive-inks)),
+    ),
     $radius: _shape-theme-token-module(map.merge($_init-radius, $radius)),
     $family: _typography-theme-token-module($_typography-mapper, 'family'),
     $size: _typography-theme-token-module($_typography-mapper, 'size'),

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

@@ -22,8 +22,11 @@
 
 @use '../ms-core';
 
+@use 'sass:math';
+
 @mixin init($top-label-distance, $left-label-distance, $top-padding) {
   .ms-form-field {
+    width: 100%;
     display: flex;
     flex-flow: column nowrap;
     position: relative;
@@ -32,8 +35,8 @@
 
     .ms-form-field__label {
       position: absolute;
-      top: calc(#{$top-label-distance} + 2px);
-      left: calc(#{$left-label-distance} + 1px);
+      top: calc(#{$top-label-distance});
+      left: calc(#{$left-label-distance} + 2px);
       @include ms-core.color-apply('form-field-label', (
         fill: rgba(0 0 0 / 0),
         ink: inherit,
@@ -41,16 +44,29 @@
       @include ms-core.struct-apply('form-field-label', (
         padding: ('xs' 'xs' 0 0),
       ));
-      @include ms-core.typography-apply('form-field-label', (
-        family: inherit,
-        size: inherit,
-        weight: inherit,
-        line-height: inherit,
-      ));
+      @include ms-core.typography-apply('form-field-label', ms-core.$type-inherit-template);
       @include ms-core.prefix(transition, all var(--ms-transition-time) ease);
       cursor: text;
     }
 
+    &:has(.ms-form-field__input:focus),
+    &:has(.ms-form-field__input:not(:placeholder-shown)), {
+      .ms-form-field__label {
+        top: math.div($top-label-distance, 2);
+        @include ms-core.typography-bind('form-field-label', (
+          family: 'small',
+          size: 'small',
+        ));
+      }
+    }
+
+    &:has(.ms-form-field__label) {
+      .ms-form-field__input {
+        @include ms-core.key-bind('form-field-placeholder-ink', rgba(0 0 0 / 0) !important);
+        padding-top: calc(#{$top-padding} + 1rem) !important;
+      }
+    }
+
     .ms-form-field__input {
       @include ms-core.struct-apply('form-field', (
         width: 100%,
@@ -61,7 +77,6 @@
         shadow: 'none',
       ));
       padding: ms-core.key-get('form-field-padding');
-      padding-top: calc(#{$top-padding} + 1rem) !important;
       @include ms-core.color-apply('form-field', (
         fill: inherit,
         ink: inherit,
@@ -80,21 +95,9 @@
       @include ms-core.prefix(transition, all var(--ms-transition-time) ease);
 
       &::placeholder {
-        // display: none !important;
-        color: rgba(0 0 0 / 0) !important;
+        color: ms-core.key-create('form-field-placeholder-ink', inherit);
         user-select: none !important;
       }
-
-      &:focus,
-      &:not(:placeholder-shown){
-        + .ms-form-field__label {
-          top: 0.33rem;
-          @include ms-core.typography-bind('form-field-label', (
-            family: 'small',
-            size: 'small',
-          ));
-        }
-      }
     }
 
     .ms-form-field__helper {

package/ms-form-field/_form-field-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-form-field.is-#{$variant} {
+@mixin extend($variants) {
+  @include ms-core.component-extend('form-field', $variants) {
     @content;
   }
 }

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

@@ -39,7 +39,7 @@
   $resolve-padding: if(list.length(ms-core.theme-get($struct, 'padding')) >= 2, list.nth(ms-core.theme-get($struct, 'padding'), 2), list.nth(ms-core.theme-get($struct, 'padding'), 1));
 
   @include base.init(
-    0.7rem,
+    ms-core.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding),
     ms-core.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding),
     ms-core.primitive-token-switch('padding.#{list.nth(ms-core.theme-get($struct, 'padding'), 1)}', list.nth(ms-core.theme-get($struct, 'padding'), 1)),
   ) {
@@ -53,6 +53,19 @@
         weight: ms-core.theme-get($typography, 'weight'),
         line-height: ms-core.theme-get($typography, 'height'),
       ));
+      user-select: none;
+    }
+
+    &:has(.ms-form-field__input:not(:read-only):not(:disabled)) {
+      .ms-form-field__label {
+        @include ms-core.color-bind('form-field-label', (
+          ink: ms-core.theme-get($color, 'ink'),
+        ));
+      }
+    }
+
+    &:has(.ms-form-field__input:read-only:disabled) {
+      @include ms-core.color-ink('form-field-helper', ms-core.theme-get($color, 'ink', 'disabled'), 'bind');
     }
 
     .ms-form-field__input {
@@ -76,28 +89,17 @@
         @include ms-core.color-bind('form-field', (
           fill: ms-core.theme-get($color, 'fill'),
           ink: ms-core.theme-get($color, 'ink'),
-          border: ms-core.theme-get($color, 'fill'),
+          border: ms-core.theme-get($color, 'border'),
         ));
 
         &:focus {
           @include ms-core.color-bind('form-field', (
+            fill: ms-core.theme-get($color, 'fill', 'hover'),
             border: ms-core.theme-get($color, 'border', 'focus'),
           ));
           @include ms-core.struct-bind('form-field', (
             border-width: ms-core.theme-get($struct, 'border-width', 'focus'),
           ));
-
-          + .ms-form-field__label {
-            @include ms-core.color-bind('form-field-label', (
-              fill: ms-core.theme-get($color, 'fill'),
-            ));
-          }
-        }
-
-        + .ms-form-field__label {
-          @include ms-core.color-bind('form-field-label', (
-            ink: ms-core.theme-get($color, 'ink'),
-          ));
         }
       }
 
@@ -105,8 +107,10 @@
       &:disabled {
         @include ms-core.color-bind('form-field', (
           fill: ms-core.theme-get($color, 'fill', 'disabled'),
+          ink: ms-core.theme-get($color, 'ink', 'disabled'),
           border: ms-core.theme-get($color, 'fill', 'disabled'),
         ));
+        cursor: not-allowed;
       }
     }
 
@@ -123,41 +127,89 @@
       ));
     }
 
-    &:where(.is-error) {
-      .ms-form-field__input:not(:read-only),
-      .ms-form-field__input:not(:disabled) {
-        @include ms-core.color-bind('form-field', (
-          ink: 'error-400',
-        ));
-
-        &:focus {
-          @include ms-core.color-bind('form-field', (
-            border: 'error-400'
+    &:where(.is-outlined) {
+      &:has(.ms-form-field__input:not(:read-only):not(:disabled)) {
+        .ms-form-field__label {
+          @include ms-core.color-bind('form-field-label', (
+            ink: ms-core.theme-get($color, 'ink'),
           ));
         }
+      }
 
-        + .ms-form-field__label {
-          @include ms-core.color-bind('form-field-label', (
-            ink: 'error-400',
+      .ms-form-field__input {
+        &:not(:read-only),
+        &:not(:disabled) {
+          @include ms-core.color-bind('form-field', (
+            fill: rgba(0 0 0 / 0) !important,
+            ink: ms-core.theme-get($color, 'ink'),
+            border: ms-core.theme-get($color, 'border'),
           ));
 
-          + .ms-form-field__helper {
-            @include ms-core.color-bind('form-field-helper', (
-              ink: 'error-400',
+          &:focus {
+            @include ms-core.color-bind('form-field', (
+              border: ms-core.theme-get($color, 'border', 'focus'),
+            ));
+            @include ms-core.struct-bind('form-field', (
+              border-width: ms-core.theme-get($struct, 'border-width', 'focus'),
             ));
           }
         }
+
+        &:read-only,
+        &:disabled {
+          @include ms-core.color-bind('form-field', (
+            fill: transparent,
+            ink: ms-core.theme-get($color, 'ink', 'disabled'),
+            border: ms-core.theme-get($color, 'fill', 'disabled'),
+          ));
+        }
       }
 
+      &:where(.is-error) {
+        .ms-form-field__input:not(:read-only),
+        .ms-form-field__input:not(:disabled) {
+          @include ms-core.color-bind('form-field', (
+            fill: rgba(0 0 0 / 0) !important,
+            border: 'error-alpha-600',
+          ));
+        }
+      }
+    }
+
+    &:where(.is-error) {
       .ms-form-field__label {
         @include ms-core.color-bind('form-field-label', (
           ink: ms-core.theme-get($color, 'ink', 'disabled'),
         ));
       }
 
+      &:has(.ms-form-field__input:not(:read-only):not(:disabled)) {
+        .ms-form-field__label {
+          @include ms-core.color-bind('form-field-label', (
+            ink: 'error-400',
+          ));
+        }
+      }
+
+      .ms-form-field__input:not(:disabled),
+      .ms-form-field__input:not(:read-only) {
+        @include ms-core.color-bind('form-field', (
+          fill: 'error-alpha-300',
+          ink: 'error-400',
+          border: 'error-alpha-400'
+        ));
+
+        &:focus {
+          @include ms-core.color-bind('form-field', (
+            fill: 'error-alpha-300',
+            border: 'error-400'
+          ));
+        }
+      }
+
       .ms-form-field__helper {
         @include ms-core.color-bind('form-field-helper', (
-          ink: ms-core.theme-get($color, 'ink', 'helper'),
+          ink: 'error-400',
         ));
       }
     }
@@ -167,46 +219,5 @@
         shadow: 'xs',
       ));
     }
-
-    &:where(.is-control) {
-      $target-dimension: ms-core.theme-get($typography, 'size');
-
-      .ms-form-field__label,
-      .ms-form-field__input,
-      .ms-form-field__helper {
-        width: auto;
-        position: static;
-        padding: 0;
-      }
-
-      .ms-form-field__label,
-      .ms-form-field__input:focus + .ms-form-field__label {
-        background-color: unset;
-        @include ms-core.color-bind('form-field-label', (
-          ink: ms-core.theme-get($color, 'ink', 'helper') !important,
-        ));
-        border-color: unset;
-        font-size: unset;
-      }
-
-      .ms-form-field__label {
-        width: 100%;
-        user-select: none;
-        cursor: default;
-      }
-
-      .ms-form-field__input[type='radio'],
-      .ms-form-field__input[type='checkbox'] {
-        width: ms-core.token-switch('size-#{$target-dimension}', ms-core.primitive-token-switch('size.#{$target-dimension}'));
-        height: ms-core.token-switch('size-#{$target-dimension}', ms-core.primitive-token-switch('size.#{$target-dimension}'));
-        margin-right: ms-core.primitive-token-get('spacing.xs');
-        cursor: pointer;
-      }
-
-      .ms-form-field__helper {
-        margin-left: calc(calc(#{ms-core.token-switch('size-#{$target-dimension}', ms-core.primitive-token-switch('size.#{$target-dimension}'))} + 3px) + #{ms-core.primitive-token-get('spacing.xs')});
-        user-select: none;
-      }
-    }
   }
 }