@matteusan/himig 1.2.3 → 1.3.1

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

@@ -22,24 +22,26 @@
 
 $init-color: (
   fill: (
-    default: 'surface-200',
-    disabled: 'undefined-300'
+    default: 'surface-alpha-600',
+    hover: 'accent-alpha-300',
+    disabled: 'disabled'
   ),
   ink: (
-    default: 'surface-800',
+    default: 'surface-ink',
     helper: 'surface-ink',
-    disabled: 'undefined-600'
+    disabled: 'disabled-ink'
   ),
   border: (
-    default: 'surface-200',
-    focus: 'surface-600',
-    disabled: 'undefined-300'
+    default: 'surface-600',
+    hover: 'accent-alpha-600',
+    focus: 'accent-400',
+    disabled: 'disabled'
   ),
 );
 
 $init-struct: (
   width: 100%,
-  padding: ('sm', 'md'),
+  padding: ('md', 'lg'),
   radius: 'small',
   border-width: (
     'default': 2px,

package/ms-list/_list-base.scss

@@ -57,6 +57,7 @@
         weight: inherit,
         line-height: inherit,
       ));
+      @include ms-core.prefix(transition, all var(--ms-transition-time) ease);
     }
   }
 }

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

package/ms-list/_list-theme.scss

@@ -42,11 +42,11 @@ $init-struct: (
     min: 140px,
     max: max-content
   ),
-  padding: ('sm' 'md'),
+  padding: 'md',
   radius: 'small',
   border-width: 'xs',
   border-style: solid,
-  gap: 'xs'
+  gap: 'sm'
 );
 
 $init-typography: (

package/ms-select-field/_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 'select-field-styles';
+@forward 'select-field-extend';

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

@@ -0,0 +1,108 @@
+//---------------------------------------------------
+//  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:math';
+
+@mixin init($top-label-distance, $left-label-distance, $top-padding) {
+  .ms-select-field {
+    width: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    position: relative;
+
+    @content;
+
+    &:has(.ms-select-field__label) {
+      .ms-select-field__input {
+        padding-top: calc(#{$top-padding} + 1rem) !important;
+      }
+    }
+
+    &:has(.ms-select-field__input:focus),
+    &:has(.ms-select-field__input:valid), {
+      .ms-select-field__label {
+        top: math.div($top-label-distance, 2) !important;
+        @include ms-core.typography-bind('select-field-label', (
+          family: 'small',
+          size: 'small',
+        ));
+      }
+    }
+
+    .ms-select-field__label {
+      position: absolute;
+      top: calc(#{$top-label-distance});
+      left: calc(#{$left-label-distance} + 2px);
+      @include ms-core.color-apply('select-field-label', (
+        fill: rgba(0 0 0 / 0),
+        ink: inherit,
+      ));
+      @include ms-core.struct-apply('select-field-label', (
+        padding: ('xs' 'xs' 0 0),
+      ));
+      @include ms-core.typography-apply('select-field-label', ms-core.$type-inherit-template);
+    }
+
+    .ms-select-field__input {
+      @include ms-core.struct-apply('select-field', (
+        width: 100%,
+        margin: inherit,
+        radius: inherit,
+        border-width: 2px,
+        border-style: solid,
+        shadow: 'none',
+      ));
+      padding: ms-core.key-get('select-field-padding');
+      @include ms-core.color-apply('select-field', (
+        fill: inherit,
+        ink: inherit,
+        border: inherit
+      ));
+      @include ms-core.typography-apply('select-field', (
+        family: inherit,
+        size: inherit,
+        weight: inherit,
+        line-height: inherit,
+      ));
+      outline: none;
+      resize: none;
+      cursor: text;
+      -webkit-appearance: caret;
+      @include ms-core.prefix(transition, all var(--ms-transition-time) ease);
+    }
+
+    .ms-select-field__helper {
+      @include ms-core.color-apply('select-field-helper', (
+        ink: inherit,
+      ));
+      @include ms-core.typography-apply('select-field-helper', (
+        family: inherit,
+        size: inherit,
+        weight: inherit,
+        line-height: inherit,
+      ));
+      @include ms-core.prefix(transition, all var(--ms-transition-time) ease);
+    }
+  }
+}

package/ms-select-field/_select-field-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 '../ms-core';
+
+/// Component variant maker.
+/// @param {string} $variants
+/// @return {*} extension class.
+@mixin extend($variants) {
+  @include ms-core.component-extend('select-field', $variants) {
+    @content;
+  }
+}
+
+/// Color variant map.
+/// @param {map} $color-map
+/// @return {*} color styles.
+@mixin color($color-map) {
+  @include ms-core.color-bind('select-field', $color-map);
+}
+
+/// Structure variant mixin.
+/// @param {map} $struct-map
+/// @return {*} struct styles.
+@mixin struct($struct-map) {
+  @include ms-core.struct-bind('select-field', $struct-map);
+}
+
+/// Typography variant mixin.
+/// @param {map} $type-map
+/// @return {*} typography styles.
+@mixin typography($type-map) {
+  @include ms-core.typography-bind('select-field', $type-map);
+}

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

@@ -0,0 +1,203 @@
+//---------------------------------------------------
+//  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:list';
+@use 'select-field-base' as base;
+@use 'select-field-theme' as theme;
+
+@mixin render(
+  $color: (),
+  $struct: (),
+  $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);
+
+  $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(
+    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)),
+  ) {
+    @include ms-core.color-bind('select-field-label', (
+      ink: ms-core.theme-get($color, 'ink', 'disabled'),
+    ));
+    @include ms-core.typography-bind('select-field-label', (
+      family: ms-core.theme-get($typography, 'family'),
+      size: ms-core.theme-get($typography, 'size', 'label'),
+      weight: ms-core.theme-get($typography, 'weight'),
+      line-height: ms-core.theme-get($typography, 'height'),
+    ));
+
+    @include ms-core.struct-bind('select-field', (
+      width: ms-core.theme-get($struct, 'width'),
+      padding: ms-core.theme-get($struct, 'padding'),
+      radius: ms-core.theme-get($struct, 'radius'),
+      border-width: ms-core.theme-get($struct, 'border-width'),
+      border-style: ms-core.theme-get($struct, 'border-style'),
+      gap: ms-core.theme-get($struct, 'gap'),
+    ));
+    @include ms-core.typography-bind('select-field', (
+      family: ms-core.theme-get($typography, 'family'),
+      size: ms-core.theme-get($typography, 'size', 'default'),
+      weight: ms-core.theme-get($typography, 'weight'),
+      line-height: ms-core.theme-get($typography, 'height'),
+    ));
+
+    @include ms-core.color-bind('select-field-helper', (
+      ink: ms-core.theme-get($color, 'ink', 'helper'),
+    ));
+    @include ms-core.typography-bind('select-field-helper', (
+      family: ms-core.theme-get($typography, 'family'),
+      size: ms-core.theme-get($typography, 'size', 'helper'),
+      weight: ms-core.theme-get($typography, 'weight'),
+      line-height: ms-core.theme-get($typography, 'height'),
+    ));
+
+    &:has(.ms-select-field__input:not(:read-only):not(:disabled)) {
+      .ms-select-field__label {
+        @include ms-core.color-bind('select-field-label', (
+          ink: ms-core.theme-get($color, 'ink'),
+        ));
+      }
+    }
+
+    &:has(.ms-select-field__input:read-only:disabled) {
+      @include ms-core.color-ink('select-field-helper', ms-core.theme-get($color, 'ink', 'disabled'), 'bind');
+    }
+
+    .ms-select-field__input {
+      &:not(:disabled),
+      &:not(:read-only) {
+        @include ms-core.color-bind('select-field', (
+          fill: ms-core.theme-get($color, 'fill'),
+          ink: ms-core.theme-get($color, 'ink'),
+          border: ms-core.theme-get($color, 'fill'),
+        ));
+
+        &:focus {
+          @include ms-core.color-bind('select-field', (
+            fill: ms-core.theme-get($color, 'fill', 'hover'),
+            border: ms-core.theme-get($color, 'border', 'focus'),
+          ));
+          @include ms-core.struct-bind('select-field', (
+            border-width: ms-core.theme-get($struct, 'border-width', 'focus'),
+          ));
+        }
+      }
+
+      &:disabled {
+        @include ms-core.color-bind('select-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;
+      }
+    }
+
+    .ms-select-field__helper {
+      padding: 0.3rem ms-core.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding) 0;
+    }
+
+    &:where(.is-outlined) {
+      .ms-select-field__input {
+        &:not(:disabled),
+        &:not(:read-only) {
+          @include ms-core.color-bind('select-field', (
+            fill: transparent,
+            ink: ms-core.theme-get($color, 'ink'),
+            border: ms-core.theme-get($color, 'fill'),
+          ));
+
+          &:focus {
+            @include ms-core.color-bind('select-field', (
+              border: ms-core.theme-get($color, 'border', 'focus'),
+            ));
+            @include ms-core.struct-bind('select-field', (
+              border-width: ms-core.theme-get($struct, 'border-width', 'focus'),
+            ));
+          }
+        }
+
+        &:disabled {
+          @include ms-core.color-bind('select-field', (
+            fill: transparent,
+            ink: ms-core.theme-get($color, 'ink', 'disabled'),
+            border: ms-core.theme-get($color, 'fill', 'disabled'),
+          ));
+        }
+      }
+
+      &:where(.is-error) {
+        .ms-select-field__input:not(:disabled),
+        .ms-select-field__input:not(:read-only) {
+          @include ms-core.color-bind('select-field', (
+            fill: rgba(0 0 0 / 0) !important,
+            border: 'error-alpha-400',
+          ));
+        }
+      }
+    }
+
+    &:where(.is-error) {
+      .ms-select-field__input:not(:disabled),
+      .ms-select-field__input:not(:read-only) {
+        @include ms-core.color-bind('select-field', (
+          fill: 'error-alpha-300',
+          ink: 'error-400',
+          border: 'error-alpha-400'
+        ));
+
+        &:focus {
+          @include ms-core.color-bind('select-field', (
+            fill: 'error-alpha-300',
+            border: 'error-400'
+          ));
+        }
+
+        + .ms-select-field__helper {
+          @include ms-core.color-bind('select-field-helper', (
+            ink: 'error-400',
+          ));
+        }
+      }
+
+      .ms-select-field__helper {
+        @include ms-core.color-bind('select-field-helper', (
+          ink: ms-core.theme-get($color, 'ink', 'helper'),
+        ));
+      }
+    }
+
+    &:where(.is-raised) {
+      @include ms-core.struct-bind('select-field', (
+        shadow: 'xs',
+      ));
+    }
+  }
+}

package/{ms-surface/_surface-theme.scss → ms-select-field/_select-field-theme.scss}

@@ -22,34 +22,44 @@
 
 $init-color: (
   fill: (
-    default: 'surface-400',
-    header: 'surface-600'
+    default: 'surface-alpha-600',
+    hover: 'accent-alpha-300',
+    disabled: 'disabled'
+  ),
+  ink: (
+    default: 'surface-ink',
+    helper: 'surface-ink',
+    disabled: 'disabled-ink'
+  ),
+  border: (
+    default: 'surface-600',
+    hover: 'accent-alpha-600',
+    focus: 'accent-400',
+    disabled: 'disabled'
   ),
-  ink: 'surface-ink',
-  border: 'surface-400'
 );
 
 $init-struct: (
-  width: 'full',
-  radius: 'small',
+  width: 100%,
   padding: ('md' 'lg'),
-  border-width: 'xs',
-  border-style: 'solid'
+  radius: 'small',
+  border-width: (
+    'default': 2px,
+    'focus': 2px
+  ),
+  border-style: solid,
+  gap: 'sm'
 );
 
 $init-typography: (
-  family: (
-    default: 'global',
-    header: 'subtitle'
-  ),
+  family: 'global',
   size: (
     default: 'body',
-    header: 'subtitle'
-  ),
-  weight: (
-    default: 'normal',
-    header: 'subtitle',
-    footer: 'bold'
+    label: 'body',
+    helper: 'small'
   ),
+  weight: 'normal',
   line-height: 'normal'
-);
+);
+
+$init-settings: ();

package/{ms-item-card → ms-tick-field}/_index.scss

@@ -20,5 +20,5 @@
 //  SOFTWARE.
 //---------------------------------------------------
 
-@forward 'item-card-styles';
-@forward 'item-card-extend';
+@forward 'tick-field-styles';
+@forward 'tick-field-extend';

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

@@ -0,0 +1,78 @@
+//---------------------------------------------------
+//  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';
+
+@mixin init() {
+  .ms-tick-field {
+    width: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: ms-core.key-create('tick-field-gap', 0.5rem);
+    transition: all var(--ms-transition-time) ease;
+
+    @content;
+
+    .ms-tick-field__input {
+      display: grid;
+      place-content: center;
+      @include ms-core.struct-radius('tick-field-input', inherit);
+      @include ms-core.color-apply('tick-field-input', ms-core.$color-inherit-template);
+      transition: all var(--ms-transition-time) ease;
+      @include ms-core.prefix('appearance', none);
+      outline: none;
+
+      &::before {
+        content: '';
+        width: 0.65rem;
+        height: 0.65rem;
+        transform: scale(0);
+        transition: 120ms transform ease-in-out;
+        box-shadow: inset 1em 1em ms-core.key-get('tick-field-input-fill');
+        color: ms-core.key-get('tick-field-input-ink');
+      }
+
+      &:checked {
+        &::before {
+          transform: scale(1);
+        }
+      }
+    }
+
+    .ms-tick-field__text {
+      display: flex;
+      flex-flow: column;
+      align-items: center;
+      @include ms-core.struct-gap('tick-field-text', inherit);
+
+      .ms-tick-field__label {
+        user-select: none;
+        @include ms-core.typography-apply('tick-field', ms-core.$type-inherit-template);
+      }
+
+      .ms-tick-field__helper {
+        @include ms-core.typography-apply('tick-field-helper', ms-core.$type-inherit-template);
+      }
+    }
+  }
+}

package/{ms-item-card/_item-card-extend.scss → ms-tick-field/_tick-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-item-card.is-#{$variant} {
+@mixin extend($variants) {
+  @include ms-core.component-extend('tick-field', $variants) {
     @content;
   }
 }
@@ -35,19 +35,19 @@
 /// @param {map} $color-map
 /// @return {*} color styles.
 @mixin color($color-map) {
-  @include ms-core.color-bind('item-card', $color-map);
+  @include ms-core.color-bind('tick-field', $color-map);
 }
 
 /// Structure variant mixin.
 /// @param {map} $struct-map
 /// @return {*} struct styles.
 @mixin struct($struct-map) {
-  @include ms-core.struct-bind('item-card', $struct-map);
+  @include ms-core.struct-bind('tick-field', $struct-map);
 }
 
 /// Typography variant mixin.
 /// @param {map} $type-map
 /// @return {*} typography styles.
 @mixin typography($type-map) {
-  @include ms-core.typography-bind('item-card', $type-map);
+  @include ms-core.typography-bind('tick-field', $type-map);
 }