@matteusan/himig 1.7.4 → 1.8.1

package/ms-card/_card-styles.scss

@@ -18,37 +18,56 @@
   $typography: pintig.theme-merge(theme.$init-typography, $typography);
   $settings: pintig.theme-merge(theme.$init-settings, $settings);
 
-  @include base.init(
-    $struct,
-    $typography
-  ) {
-    @include pintig.color-apply('card', (
-      fill: pintig.theme-get($color, 'fill'),
-      ink: pintig.theme-get($color, 'ink'),
-    ));
-    @include pintig.color-border('card', pintig.theme-get($color, 'border'), 'bind');
-    @include pintig.struct-apply('card', (
-      width: (
-        default: pintig.theme-get($struct, 'width'),
-        min: pintig.theme-get($struct, 'width', 'min'),
-        max: pintig.theme-get($struct, 'width', 'max'),
-      ),
-      radius: pintig.theme-get($struct, 'radius'),
-      shadow: 'none',
-    ));
-
-    &:where(.is-outlined) {
-      @include pintig.color-bind('card', (
-        fill: pintig.theme-get($color, 'fill', 'outlined'),
-        ink: pintig.theme-get($color, 'ink'),
-        border: pintig.theme-get($color, 'border')
+  @layer components {
+    @include base.init(
+      $struct,
+      $typography
+    ) {
+      @include pintig.color-border('card', pintig.theme-get($color, 'border'), 'bind');
+      @include pintig.struct-apply('card', (
+        width: (
+          default: pintig.theme-get($struct, 'width'),
+          min: pintig.theme-get($struct, 'width', 'min'),
+          max: pintig.theme-get($struct, 'width', 'max'),
+        ),
+        radius: pintig.theme-get($struct, 'radius'),
+        shadow: 'none',
       ));
-    }
 
-    &:where(.is-raised) {
-      @include pintig.struct-bind('card', (
-        shadow: 'low'
-      ));
+      @include pintig.breakpoint-create('large') {
+        &:has(.ms-card__media) {
+          .ms-card__details {
+            @include pintig.color-bind('card', (
+              fill: linear-gradient(180deg,
+                rgb(from pintig.token-switch(pintig.theme-get($color, 'fill')) r g b / 0%) 0%,
+                rgb(from pintig.token-switch(pintig.theme-get($color, 'fill')) r g b / 50%) 15%,
+                rgb(from pintig.token-switch(pintig.theme-get($color, 'fill')) r g b / 70%) 30%,
+                rgb(from pintig.token-switch(pintig.theme-get($color, 'fill')) r g b / 90%) 80%,
+                rgb(from pintig.token-switch(pintig.theme-get($color, 'fill')) r g b / 100%) 100%
+              ),
+              ink: pintig.theme-get($color, 'ink'),
+            ));
+          }
+        }
+      }
+
+      &:where(.is-raised) {
+        @include pintig.struct-bind('card', (
+          shadow: 'low'
+        ));
+      }
+
+      .ms-card__details {
+        @include pintig.color-apply('card', (
+          fill: pintig.theme-get($color, 'fill')
+        ));
+
+        .ms-card__subtitle {
+          @include pintig.color-apply('card-subtitle', (
+            ink: rgb(from pintig.token-switch(pintig.theme-get($color, 'ink', 'subtitle')) r g b / 60%),
+          ));
+        }
+      }
     }
   }
 }

package/ms-card/_card-theme.scss

@@ -4,11 +4,13 @@
 
 $init-color: (
   fill: (
-    default: 'primary-400',
-    outlined: 'surface-alpha-400'
+    default: 'primary-600'
   ),
-  ink: 'primary-ink',
-  border: 'primary-400',
+  ink: (
+    default: 'primary-ink',
+    subtitle: 'primary-ink',
+  ),
+  border: 'primary-600',
 );
 
 $init-struct: (
@@ -19,8 +21,6 @@ $init-struct: (
   ),
   radius: 'md',
   padding: 'lg',
-  border-width: 'xs',
-  border-style: 'solid',
   gap: (
     section: 'md',
     header: 'md',
@@ -31,7 +31,7 @@ $init-struct: (
 $init-typography: (
   family: (
     'default': 'body',
-    'title': 'subtitle',
+    'title': 'title',
     'subtitle': 'body',
   ),
   size: (
@@ -42,7 +42,7 @@ $init-typography: (
   ),
   weight: (
     'default': 'normal',
-    'title': 'bold',
+    'title': 'normal',
     'subtitle': 'normal',
   ),
   line-height: (
@@ -50,6 +50,11 @@ $init-typography: (
     'title': 'normal',
     'subtitle': 'normal',
   ),
+  squeeze: (
+    'default': 'normal',
+    'title': 'tight',
+    'subtitle': 'normal',
+  ),
 );
 
 $init-settings: ();

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

@@ -27,7 +27,7 @@
         padding: ('xs' 'xs' 0 0),
       ));
       @include pintig.typography-apply('form-field-label', pintig.$type-inherit-template);
-      @include pintig.prefix(transition, all var(--ms-transition-time) ease);
+      @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
       cursor: text;
     }
 
@@ -45,7 +45,7 @@
     &:has(.ms-form-field__label) {
       .ms-form-field__input {
         @include pintig.key-bind('form-field-placeholder-ink', rgba(0 0 0 / 0) !important);
-        padding-top: calc(#{$top-padding} + 1rem) !important;
+        padding-block-start: calc(#{$top-padding} + 1rem) !important;
       }
     }
 
@@ -78,7 +78,7 @@
       resize: none;
       cursor: text;
       -webkit-appearance: caret;
-      @include pintig.prefix(transition, all var(--ms-transition-time) ease);
+      @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
 
       &::placeholder {
         color: pintig.key-create('form-field-placeholder-ink', inherit);
@@ -96,7 +96,7 @@
         weight: inherit,
         line-height: inherit,
       ));
-      @include pintig.prefix(transition, all var(--ms-transition-time) ease);
+      @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
     }
   }
 }

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

@@ -20,119 +20,60 @@
 
   $resolve-padding: if(list.length(pintig.theme-get($struct, 'padding')) >= 2, list.nth(pintig.theme-get($struct, 'padding'), 2), list.nth(pintig.theme-get($struct, 'padding'), 1));
 
-  @include base.init(
-    pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding),
-    pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding),
-    pintig.primitive-token-switch('padding.#{list.nth(pintig.theme-get($struct, 'padding'), 1)}', list.nth(pintig.theme-get($struct, 'padding'), 1)),
-  ) {
-    .ms-form-field__label {
-      @include pintig.color-bind('form-field-label', (
-        ink: pintig.theme-get($color, 'ink', 'disabled'),
-      ));
-      @include pintig.typography-bind('form-field-label', (
-        family: pintig.theme-get($typography, 'family'),
-        size: pintig.theme-get($typography, 'size', 'label'),
-        weight: pintig.theme-get($typography, 'weight'),
-        line-height: pintig.theme-get($typography, 'height'),
-      ));
-      user-select: none;
-    }
-
-    &:has(.ms-form-field__input:not(:read-only):not(:disabled)) {
+  @layer components {
+    @include base.init(
+      pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding),
+      pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding),
+      pintig.primitive-token-switch('padding.#{list.nth(pintig.theme-get($struct, 'padding'), 1)}', list.nth(pintig.theme-get($struct, 'padding'), 1)),
+    ) {
       .ms-form-field__label {
         @include pintig.color-bind('form-field-label', (
-          ink: pintig.theme-get($color, 'ink'),
-        ));
-      }
-    }
-
-    &:has(.ms-form-field__input:read-only:disabled) {
-      @include pintig.color-ink('form-field-helper', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
-    }
-
-    .ms-form-field__input {
-      @include pintig.struct-bind('form-field', (
-        width: (
-          default: pintig.theme-get($struct, 'width'),
-          min: pintig.theme-get($struct, 'width', 'min'),
-          max: pintig.theme-get($struct, 'width', 'max')
-        ),
-        padding: pintig.theme-get($struct, 'padding'),
-        radius: pintig.theme-get($struct, 'radius'),
-        border-width: pintig.theme-get($struct, 'border-width'),
-        border-style: pintig.theme-get($struct, 'border-style'),
-        gap: pintig.theme-get($struct, 'gap'),
-      ));
-      @include pintig.typography-bind('form-field', (
-        family: pintig.theme-get($typography, 'family'),
-        size: pintig.theme-get($typography, 'size', 'default'),
-        weight: pintig.theme-get($typography, 'weight'),
-        line-height: pintig.theme-get($typography, 'height'),
-      ));
-
-      &:not(:read-only),
-      &:not(:disabled) {
-        @include pintig.color-bind('form-field', (
-          fill: pintig.theme-get($color, 'fill'),
-          ink: pintig.theme-get($color, 'ink'),
-          border: pintig.theme-get($color, 'border'),
-        ));
-
-        &:focus {
-          @include pintig.color-bind('form-field', (
-            fill: pintig.theme-get($color, 'fill', 'focus'),
-            border: pintig.theme-get($color, 'border', 'focus'),
-          ));
-          @include pintig.struct-bind('form-field', (
-            border-width: pintig.theme-get($struct, 'border-width', 'focus'),
-          ));
-        }
-      }
-
-      &:read-only,
-      &:disabled {
-        @include pintig.color-bind('form-field', (
-          fill: pintig.theme-get($color, 'fill', 'disabled'),
           ink: pintig.theme-get($color, 'ink', 'disabled'),
-          border: pintig.theme-get($color, 'fill', 'disabled'),
         ));
-        cursor: not-allowed;
+        @include pintig.typography-bind('form-field-label', (
+          family: pintig.theme-get($typography, 'family'),
+          size: pintig.theme-get($typography, 'size', 'label'),
+          weight: pintig.theme-get($typography, 'weight'),
+          line-height: pintig.theme-get($typography, 'height'),
+        ));
+        user-select: none;
       }
-    }
-
-    .ms-form-field__helper {
-      padding: 0.3rem pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding) 0;
-      @include pintig.color-bind('form-field-helper', (
-        ink: pintig.theme-get($color, 'ink', 'helper'),
-      ));
-      @include pintig.typography-bind('form-field-helper', (
-        family: pintig.theme-get($typography, 'family'),
-        size: pintig.theme-get($typography, 'size', 'helper'),
-        weight: pintig.theme-get($typography, 'weight'),
-        line-height: pintig.theme-get($typography, 'height'),
-      ));
-    }
 
-    &:where(.is-outlined) {
-      &:has(.ms-form-field__input:not(:read-only):not(:disabled)) {
-        .ms-form-field__label {
-          @include pintig.color-bind('form-field-label', (
-            ink: pintig.theme-get($color, 'ink'),
-          ));
-        }
+      &:has(.ms-form-field__input:read-only:disabled) {
+        @include pintig.color-ink('form-field-helper', pintig.theme-get($color, 'ink', 'disabled'), 'bind');
       }
 
       .ms-form-field__input {
+        @include pintig.struct-bind('form-field', (
+          width: (
+            default: pintig.theme-get($struct, 'width'),
+            min: pintig.theme-get($struct, 'width', 'min'),
+            max: pintig.theme-get($struct, 'width', 'max')
+          ),
+          padding: pintig.theme-get($struct, 'padding'),
+          radius: pintig.theme-get($struct, 'radius'),
+          border-width: pintig.theme-get($struct, 'border-width'),
+          border-style: pintig.theme-get($struct, 'border-style'),
+          gap: pintig.theme-get($struct, 'gap'),
+        ));
+        @include pintig.typography-bind('form-field', (
+          family: pintig.theme-get($typography, 'family'),
+          size: pintig.theme-get($typography, 'size', 'default'),
+          weight: pintig.theme-get($typography, 'weight'),
+          line-height: pintig.theme-get($typography, 'height'),
+        ));
+
         &:not(:read-only),
         &:not(:disabled) {
           @include pintig.color-bind('form-field', (
-            fill: rgba(0 0 0 / 0) !important,
+            fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill')) r g b / pintig.$color-fill-focus-opacity),
             ink: pintig.theme-get($color, 'ink'),
             border: pintig.theme-get($color, 'border'),
           ));
 
           &:focus {
             @include pintig.color-bind('form-field', (
+              fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'focus')) r g b / pintig.$color-fill-focus-opacity),
               border: pintig.theme-get($color, 'border', 'focus'),
             ));
             @include pintig.struct-bind('form-field', (
@@ -144,66 +85,64 @@
         &:read-only,
         &:disabled {
           @include pintig.color-bind('form-field', (
-            fill: transparent,
+            fill: pintig.theme-get($color, 'fill', 'disabled'),
             ink: pintig.theme-get($color, 'ink', 'disabled'),
             border: pintig.theme-get($color, 'fill', 'disabled'),
           ));
+          cursor: not-allowed;
         }
       }
 
-      &:where(.is-error) {
-        .ms-form-field__input:not(:read-only),
-        .ms-form-field__input:not(:disabled) {
-          @include pintig.color-bind('form-field', (
-            fill: rgba(0 0 0 / 0) !important,
-            border: pintig.theme-get($color, 'border', 'error'),
-          ));
-        }
-      }
-    }
-
-    &:where(.is-error) {
-      .ms-form-field__label {
-        @include pintig.color-bind('form-field-label', (
-          ink: pintig.theme-get($color, 'ink', 'disabled'),
+      .ms-form-field__helper {
+        padding: 0.3rem pintig.primitive-token-switch('padding.#{$resolve-padding}', $resolve-padding) 0;
+        @include pintig.color-bind('form-field-helper', (
+          ink: pintig.theme-get($color, 'ink', 'helper'),
+        ));
+        @include pintig.typography-bind('form-field-helper', (
+          family: pintig.theme-get($typography, 'family'),
+          size: pintig.theme-get($typography, 'size', 'helper'),
+          weight: pintig.theme-get($typography, 'weight'),
+          line-height: pintig.theme-get($typography, 'height'),
         ));
       }
 
-      &:has(.ms-form-field__input:not(:read-only):not(:disabled)) {
-        .ms-form-field__label {
-          @include pintig.color-bind('form-field-label', (
+      &:where(.is-error) {
+        &:has(.ms-form-field__input:not(:read-only):not(:disabled)) {
+          .ms-form-field__label {
+            @include pintig.color-bind('form-field-label', (
+              ink: rgb(from pintig.token-switch(pintig.theme-get($color, 'ink', 'error')) r g b / 70%),
+            ));
+          }
+        }
+
+        .ms-form-field__input:not(:disabled),
+        .ms-form-field__input:not(:read-only) {
+          @include pintig.color-bind('form-field', (
+            fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'error')) r g b / pintig.$color-fill-focus-opacity),
             ink: pintig.theme-get($color, 'ink', 'error'),
+            border: pintig.theme-get($color, 'border', 'error'),
           ));
-        }
-      }
 
-      .ms-form-field__input:not(:disabled),
-      .ms-form-field__input:not(:read-only) {
-        @include pintig.color-bind('form-field', (
-          fill: pintig.theme-get($color, 'fill', 'error'),
-          ink: pintig.theme-get($color, 'ink', 'error'),
-          border: pintig.theme-get($color, 'border', 'error'),
-        ));
+          &:focus {
+            @include pintig.color-bind('form-field', (
+              fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'error', 'focus')) r g b / pintig.$color-fill-focus-opacity),
+              border: pintig.theme-get($color, 'border', 'error', 'focus'),
+            ));
+          }
+        }
 
-        &:focus {
-          @include pintig.color-bind('form-field', (
-            fill: pintig.theme-get($color, 'fill', 'error', 'focus'),
-            border: pintig.theme-get($color, 'border', 'error', 'focus'),
+        .ms-form-field__helper {
+          @include pintig.color-bind('form-field-helper', (
+            ink: pintig.theme-get($color, 'ink', 'error'),
           ));
         }
       }
 
-      .ms-form-field__helper {
-        @include pintig.color-bind('form-field-helper', (
-          ink: pintig.theme-get($color, 'ink', 'error'),
+      &:where(.is-raised) {
+        @include pintig.struct-bind('form-field', (
+          shadow: 'xs',
         ));
       }
     }
-
-    &:where(.is-raised) {
-      @include pintig.struct-bind('form-field', (
-        shadow: 'xs',
-      ));
-    }
   }
 }

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

@@ -4,12 +4,12 @@
 
 $init-color: (
   fill: (
-    default: 'surface-alpha-800',
-    focus: 'accent-alpha-300',
+    default: 'surface-400',
+    focus: 'accent-400',
     disabled: 'disabled',
     error: (
-      default: 'error-alpha-300',
-      focus: 'error-alpha-400'
+      default: 'error-800',
+      focus: 'error-800'
     )
   ),
   ink: (
@@ -23,7 +23,7 @@ $init-color: (
     focus: 'accent-400',
     disabled: 'disabled',
     error: (
-      default: 'error-alpha-800',
+      default: 'error-800',
       focus: 'error-400'
     )
   ),
@@ -38,8 +38,8 @@ $init-struct: (
   padding: ('md', 'lg'),
   radius: 'small',
   border-width: (
-    'default': 2px,
-    'focus': 2px
+    'default': 'xs',
+    'focus': 'xs'
   ),
   border-style: solid,
   gap: 'sm'

package/ms-link/_link-styles.scss

@@ -17,36 +17,38 @@
   $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')
+  @layer components {
+    @include base.init() {
+      @include pintig.color-apply('link', (
+        fill: transparent,
+        ink: pintig.theme-get($color, 'ink')
       ));
-    }
-
-    &:focus {
-      @include pintig.color-bind('link', (
-        fill: pintig.theme-get($color, 'fill', 'focus')
+      @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 pintig.token-get('time-short') pintig.token-get('easing'));
 
-    &:active {
-      @include pintig.color-bind('link', (
-        fill: pintig.theme-get($color, 'fill', 'active')
-      ));
+      &:hover {
+        @include pintig.color-bind('link', (
+          fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'hover')) r g b / pintig.$color-fill-hover-opacity)
+        ));
+      }
+
+      &:focus {
+        @include pintig.color-bind('link', (
+          fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'focus')) r g b / pintig.$color-fill-focus-opacity)
+        ));
+      }
+
+      &:active {
+        @include pintig.color-bind('link', (
+          fill: rgb(from pintig.token-switch(pintig.theme-get($color, 'fill', 'active')) r g b / pintig.$color-fill-active-opacity)
+        ));
+      }
     }
   }
 }

package/ms-link/_link-theme.scss

@@ -4,9 +4,9 @@
 
 $init-color: (
   fill: (
-    hover: 'accent-alpha-300',
-    focus: 'accent-alpha-300',
-    active: 'accent-alpha-400'
+    hover: 'accent-400',
+    focus: 'accent-400',
+    active: 'accent-400'
   ),
   ink: 'accent-400',
 );

package/ms-list/_list-base.scss

@@ -39,7 +39,7 @@
         weight: inherit,
         line-height: inherit,
       ));
-      @include pintig.prefix(transition, all var(--ms-transition-time) ease);
+      @include pintig.prefix(transition, all pintig.token-get('time-short') pintig.token-get('easing'));
     }
   }
 }

package/ms-list/_list-styles.scss

@@ -17,43 +17,45 @@
   $typography: pintig.theme-merge(theme.$init-typography, $typography);
   $settings: pintig.theme-merge(theme.$init-settings, $settings);
 
-  @include base.init() {
-    @include pintig.color-bind('list-item', $color);
-    @include pintig.struct-apply('list', (
-      radius: pintig.theme-get($struct, 'radius'),
-    ));
-    @include pintig.struct-bind('list-item', $struct);
-    @include pintig.typography-bind('list-item', $typography);
-
-    &:where(.is-selectable) {
-      .ms-list__item {
-        cursor: pointer;
-
-        &:hover {
-          @include pintig.color-bind('list-item', (
-            fill: pintig.theme-get($color, 'fill', 'hover'),
-            border: pintig.theme-get($color, 'border', 'hover')
-          ));
-        }
-
-        &:focus {
-          @include pintig.color-bind('list-item', (
-            fill: pintig.theme-get($color, 'fill', 'focus'),
-            border: pintig.theme-get($color, 'border', 'focus')
-          ));
-        }
-
-        &:active {
-          @include pintig.color-bind('list-item', (
-            fill: pintig.theme-get($color, 'fill', 'active'),
-            border: pintig.theme-get($color, 'border', 'active')
-          ));
+  @layer components {
+    @include base.init() {
+      @include pintig.color-bind('list-item', $color);
+      @include pintig.struct-apply('list', (
+        radius: pintig.theme-get($struct, 'radius'),
+      ));
+      @include pintig.struct-bind('list-item', $struct);
+      @include pintig.typography-bind('list-item', $typography);
+
+      &:where(.is-selectable) {
+        .ms-list__item {
+          cursor: pointer;
+
+          &:hover {
+            @include pintig.color-bind('list-item', (
+              fill: pintig.theme-get($color, 'fill', 'hover'),
+              border: pintig.theme-get($color, 'border', 'hover')
+            ));
+          }
+
+          &:focus {
+            @include pintig.color-bind('list-item', (
+              fill: pintig.theme-get($color, 'fill', 'focus'),
+              border: pintig.theme-get($color, 'border', 'focus')
+            ));
+          }
+
+          &:active {
+            @include pintig.color-bind('list-item', (
+              fill: pintig.theme-get($color, 'fill', 'active'),
+              border: pintig.theme-get($color, 'border', 'active')
+            ));
+          }
         }
       }
-    }
 
-    &:where(.is-raised) {
-      @include pintig.struct-shadow('list', 'xs');
+      &:where(.is-raised) {
+        @include pintig.struct-shadow('list', 'xs');
+      }
     }
   }
 }