@matteusan/himig 1.2.3 → 1.3.1

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

@@ -0,0 +1,121 @@
+//---------------------------------------------------
+//  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 'tick-field-base' as base;
+@use 'tick-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);
+
+  @include base.init() {
+    @include ms-core.color-apply('tick-field', (
+      fill: ms-core.theme-get($color, 'fill'),
+      ink: ms-core.theme-get($color, 'ink'),
+      border: ms-core.theme-get($color, 'border'),
+    ));
+    @include ms-core.struct-apply('tick-field', (
+      radius: ms-core.theme-get($struct, 'radius'),
+      padding: ms-core.theme-get($struct, 'padding'),
+      gap: ms-core.theme-get($struct, 'gap'),
+      border-width: ms-core.theme-get($struct, 'border-width'),
+      border-style: ms-core.theme-get($struct, 'border-style'),
+    ));
+    @include ms-core.typography-bind('tick-field', (
+      family: ms-core.theme-get($typography, 'family'),
+      size: ms-core.theme-get($typography, 'size'),
+      weight: ms-core.theme-get($typography, 'weight'),
+      line-height: ms-core.theme-get($typography, 'line-height'),
+    ));
+    @include ms-core.typography-bind('tick-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, 'line-height'),
+    ));
+
+    @include ms-core.struct-bind('tick-field-text', (
+      gap: ms-core.theme-get($struct, 'gap', 'text'),
+    ));
+
+    &:hover,
+    &:has(.ms-tick-field__input:focus) {
+      @include ms-core.color-bind('tick-field', (
+        fill: ms-core.theme-get($color, 'fill', 'hover'),
+        border: ms-core.theme-get($color, 'border', 'hover'),
+      ));
+    }
+
+    &:has(.ms-tick-field__input:checked) {
+      @include ms-core.color-bind('tick-field', (
+        fill: ms-core.theme-get($color, 'fill', 'checked'),
+        border: ms-core.theme-get($color, 'border', 'checked'),
+      ));
+    }
+
+    .ms-tick-field__input {
+      @include ms-core.struct-apply('tick-field-input', (
+        width: 1.5rem,
+        height: 1.5rem,
+        margin: 0,
+        border-width: 'sm',
+        border-style: 'solid'
+      ));
+      @include ms-core.color-bind('tick-field-input', (
+        fill: ms-core.theme-get($color, 'fill', 'input'),
+        ink: ms-core.theme-get($color, 'ink', 'input'),
+        border: ms-core.theme-get($color, 'border', 'input'),
+      ));
+
+      &[type='checkbox'] {
+        @include ms-core.struct-radius('tick-field-input', ms-core.theme-get($struct, 'radius', 'input', 'checkbox'), 'bind');
+      }
+
+      &[type='radio'] {
+        @include ms-core.struct-radius('tick-field-input', ms-core.theme-get($struct, 'radius', 'input', 'radio'), 'bind');
+      }
+
+      &:hover,
+      &:focus {
+        @include ms-core.color-fill('tick-field-input', ms-core.theme-get($color, 'fill', 'input', 'hover'), 'bind');
+        @include ms-core.color-border('tick-field-input', ms-core.theme-get($color, 'border', 'input', 'hover'), 'bind');
+      }
+
+      &:checked {
+        @include ms-core.color-bind('tick-field-input', (
+          fill: ms-core.theme-get($color, 'fill', 'input', 'checked'),
+          ink: ms-core.theme-get($color, 'ink', 'input'),
+          border: ms-core.theme-get($color, 'border', 'input', 'checked'),
+        ));
+      }
+    }
+  }
+}

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

@@ -0,0 +1,77 @@
+//---------------------------------------------------
+//  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.
+//---------------------------------------------------
+
+$init-color: (
+  fill: (
+    default: rgba(0 0 0 / 0),
+    hover: 'accent-alpha-300',
+    checked: 'accent-alpha-300',
+    input: (
+      default: rgba(0 0 0 / 0),
+      hover: 'accent-alpha-400',
+      checked: 'accent-400'
+    ),
+  ),
+  ink: (
+    default: 'surface-ink',
+    input: 'accent-ink'
+  ),
+  border: (
+    default: 'surface-300',
+    hover: 'accent-alpha-600',
+    checked: 'accent-400',
+    input: (
+      default: 'surface-300',
+      hover: 'accent-alpha-600',
+      checked: 'accent-400',
+    )
+  ),
+);
+
+$init-struct: (
+  radius: (
+    default: 'sm',
+    input: (
+      checkbox: 'xs',
+      radio: 'pill'
+    )
+  ),
+  padding: ('md' 'lg'),
+  gap: (
+    default: 0.7rem,
+    text: 0.3rem
+  ),
+  border-width: 'xs',
+  border-style: 'solid'
+);
+
+$init-typography: (
+  family: 'global',
+  size: (
+    default: 'global',
+    helper: 'small'
+  ),
+  weight: 'global',
+  line-height: 'global',
+);
+
+$init-settings: ();

package/ms-utils/_color-utils.scss

@@ -31,7 +31,6 @@ $_colors: (
   'surface',
   'accent',
   'error',
-  'undefined',
 );
 $_tones: (200, 300, 400, 600, 800, 'ink');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matteusan/himig",
-  "version": "1.2.3",
+  "version": "1.3.1",
   "description": "Matteu's personal design system for building user interfaces.",
   "repository": "https://github.com/MatteuSan/himig",
   "author": "Matteu <matteugt@gmail.com>",

package/ms-item-card/_item-card-base.scss

@@ -1,96 +0,0 @@
-//---------------------------------------------------
-//  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-item-card {
-    display: flex;
-    flex-flow: column nowrap;
-    @include ms-core.struct-apply('item-card', (
-      width: 100%,
-      height: auto,
-      radius: inherit,
-    ));
-    @content;
-
-    .ms-item-card__header {
-      display: grid;
-      grid-template-columns: 32px 1fr 32px;
-      @include ms-core.color-apply('item-card', ms-core.$color-inherit-template);
-      @include ms-core.struct-apply('item-card', (
-        padding: inherit,
-        gap: inherit,
-      ));
-      border-radius: ms-core.key-get('item-card-radius') ms-core.key-get('item-card-radius') 0 0;
-
-      &:only-child {
-        border-radius: ms-core.key-get('item-card-radius');
-      }
-
-      .ms-item-card__sprite {
-        @include ms-core.sprite-styles();
-      }
-
-      .ms-item-card__mast {
-        display: flex;
-        flex-flow: column nowrap;
-
-        .ms-item-card__title {
-          @include ms-core.typography-apply('item-card-title', ms-core.$type-inherit-template);
-        }
-
-        .ms-item-card__subtitle {
-          @include ms-core.typography-apply('item-card-subtitle', ms-core.$type-inherit-template);
-        }
-      }
-
-      .ms-item-card__menu {
-        &.is-open {
-          .ms-item-card__menu-overlay {
-            display: block;
-          }
-        }
-
-        .ms-item-card__menu-overlay {
-          display: none;
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          z-index: 80;
-        }
-
-        .ms-list {
-          z-index: 90;
-        }
-      }
-    }
-
-    .ms-item-card__footer {
-      @include ms-core.struct-apply('item-card-footer', ms-core.$struct-inherit-template);
-      border-radius: 0 0 ms-core.key-get('item-card-radius') ms-core.key-get('item-card-radius');
-      @include ms-core.typography-apply('item-card-footer', ms-core.$type-inherit-template);
-    }
-  }
-}

package/ms-surface/_surface-base.scss

@@ -1,111 +0,0 @@
-//---------------------------------------------------
-//  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-surface {
-    @include ms-core.color-apply('surface', (
-      fill: inherit,
-      ink: inherit,
-      border: inherit,
-    ));
-    @include ms-core.struct-apply('surface', (
-      radius: 0,
-    ));
-    overflow: hidden;
-    @content;
-
-    .ms-surface__header {
-      @include ms-core.color-apply('surface-header', (
-        fill: inherit,
-        ink: inherit,
-        border: inherit,
-      ));
-      @include ms-core.struct-apply('surface-header', (
-        padding: 0,
-      ));
-      @include ms-core.typography-apply('surface-header', (
-        family: inherit,
-        size: inherit,
-        weight: inherit,
-        line-height: inherit,
-      ));
-
-      .ms-surface__title,
-      > :not([class^='ms-']) {
-        @include ms-core.typography-apply('surface-header', (
-          family: inherit,
-          size: inherit,
-          weight: inherit,
-          line-height: inherit,
-        ));
-      }
-    }
-
-    .ms-surface__body {
-      @include ms-core.color-apply('surface', (
-        fill: inherit,
-        ink: inherit,
-        border: inherit,
-      ));
-      @include ms-core.struct-apply('surface', (
-        padding: 0,
-      ));
-      @include ms-core.typography-apply('surface', (
-        family: inherit,
-        size: inherit,
-        weight: inherit,
-        line-height: inherit,
-      ));
-    }
-
-    .ms-surface__row {
-      @include ms-core.struct-apply('surface', (
-        padding: 0,
-      ));
-      @include ms-core.typography-apply('surface', (
-        family: inherit,
-        size: inherit,
-        weight: inherit,
-        line-height: inherit,
-      ));
-    }
-
-    .ms-surface__footer {
-      @include ms-core.color-apply('surface-footer', (
-        fill: inherit,
-        ink: inherit,
-        border: inherit,
-      ));
-      @include ms-core.struct-apply('surface-footer', (
-        padding: 0,
-      ));
-      @include ms-core.typography-apply('surface-footer', (
-        family: inherit,
-        size: inherit,
-        weight: inherit,
-        line-height: inherit,
-      ));
-    }
-  }
-}

package/ms-surface/_surface-styles.scss

@@ -1,88 +0,0 @@
-//---------------------------------------------------
-//  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';
-
-@use 'surface-base' as base;
-@use 'surface-theme' as theme;
-
-@mixin render(
-  $color: (),
-  $struct: (),
-  $typography: (),
-  $settings: ()
-) {
-  @include base.init() {
-    @include ms-core.color-bind('surface', (
-      fill: ms-core.theme-get(theme.$init-color, 'fill'),
-      ink: ms-core.theme-get(theme.$init-color, 'ink'),
-      border: ms-core.theme-get(theme.$init-color, 'border'),
-    ));
-    @include ms-core.color-bind('surface-header', (
-      fill: ms-core.theme-get(theme.$init-color, 'fill', 'header'),
-      ink: ms-core.theme-get(theme.$init-color, 'ink', 'header'),
-      border: ms-core.theme-get(theme.$init-color, 'border', 'header'),
-    ));
-    @include ms-core.color-bind('surface-footer', (
-      fill: ms-core.theme-get(theme.$init-color, 'fill', 'footer'),
-      ink: ms-core.theme-get(theme.$init-color, 'ink', 'footer'),
-      border: ms-core.theme-get(theme.$init-color, 'border', 'footer'),
-    ));
-
-    @include ms-core.struct-bind('surface', (
-      radius: ms-core.theme-get(theme.$init-struct, 'radius'),
-      padding: ms-core.theme-get(theme.$init-struct, 'padding'),
-    ));
-    @include ms-core.struct-bind('surface-header', (
-      padding: ms-core.theme-get(theme.$init-struct, 'padding'),
-    ));
-    @include ms-core.struct-bind('surface-footer', (
-      padding: ms-core.theme-get(theme.$init-struct, 'padding'),
-    ));
-
-    @include ms-core.typography-bind('surface', (
-      family: ms-core.theme-get(theme.$init-typography, 'family'),
-      size: ms-core.theme-get(theme.$init-typography, 'size'),
-      weight: ms-core.theme-get(theme.$init-typography, 'weight'),
-      line-height: ms-core.theme-get(theme.$init-typography, 'line-height'),
-    ));
-    @include ms-core.typography-bind('surface-header', (
-      family: ms-core.theme-get(theme.$init-typography, 'family', 'header'),
-      size: ms-core.theme-get(theme.$init-typography, 'size', 'header'),
-      weight: ms-core.theme-get(theme.$init-typography, 'weight', 'header'),
-      line-height: ms-core.theme-get(theme.$init-typography, 'line-height', 'header'),
-    ));
-    @include ms-core.typography-bind('surface-footer', (
-      family: ms-core.theme-get(theme.$init-typography, 'family', 'footer'),
-      size: ms-core.theme-get(theme.$init-typography, 'size', 'footer'),
-      weight: ms-core.theme-get(theme.$init-typography, 'weight', 'footer'),
-      line-height: ms-core.theme-get(theme.$init-typography, 'line-height', 'footer'),
-    ));
-
-    &:where(.is-raised) {
-      @include ms-core.struct-apply('surface', (
-        shadow: 'xs'
-      ));
-    }
-  }
-}