@pepabo-inhouse/button - npm Package Compare versions

Comparing version 3.7.0 to 3.8.0

_index.scss

@@ -1,1 +0,1 @@
-@forward "./mixins" show style, export;
+@forward "./mixins" show style, style-with-variants, export;

_mixins.scss

@@ -8,2 +8,12 @@ @use "sass:map";
 
+@mixin export {
+  .in-button {
+    @include style;
+  }
+
+  .in-skeleton-button {
+    @include skeleton-style;
+  }
+}
+
 // ソースコードの読みやすさを優先させて、以下のルールのlintの対象から除外する
@@ -14,15 +24,41 @@ /* stylelint-disable no-descending-specificity */
 @mixin style($options: variables.$default-option) {
-  $options: map.merge(variables.$default-option, $options);
+  @include style-with-variants(
+    $variants: (
+      appearance: adapter.get-button-appearances(),
+      color: adapter.get-button-colors(),
+      brightness: adapter.get-brightnesses(),
+      shape: adapter.get-shapes(),
+      size: adapter.get-interactive-component-height-keys(),
+      width: adapter.get-widths()
+    ),
+    $default-style: $options
+  );
+}
 
-  @include -proto($options);
+/// 指定した属性とその値の組み合わせのスタイル
+/// このmixinは、デフォルトのスタイルと、追加で必要なオプションスタイルを出力します。
+///
+/// @param {Map} $variants - オプションとして利用したいスタイル(modifierとして利用できるスタイル)に関する属性
+/// @param {Map} $default-style - デフォルトのスタイル(modifierなしの状態のスタイル)に関する属性
+///
+/// @example
+///   @include style-with-variants($variants: (
+///     appearance: (flat, solid),
+///     color: (primary, neutral),
+///     size: (m, l)
+///   ));
+@mixin style-with-variants($variants: (), $default-style: variables.$default-option) {
+  $default-style: map.merge(variables.$default-option, $default-style);
+
+  @include -proto($default-style);
   @include -appearance-style(
-    $appearance: map.get($options, appearance),
-    $brightness: map.get($options, brightness),
-    $color: map.get($options, color),
+    $appearance: map.get($default-style, appearance),
+    $brightness: map.get($default-style, brightness),
+    $color: map.get($default-style, color),
     $state: enabled
   );
   @include -appearance-state-ruleset(
-    $appearance: map.get($options, appearance),
-    $brightness: map.get($options, brightness),
-    $color: map.get($options, color),
+    $appearance: map.get($default-style, appearance),
+    $brightness: map.get($default-style, brightness),
+    $color: map.get($default-style, color),
   );
@@ -32,14 +68,22 @@
     @include -child-element-style(
-      $appearance: map.get($options, appearance),
-      $shape: map.get($options, shape),
-      $size: map.get($options, size)
+      $appearance: map.get($default-style, appearance),
+      $shape: map.get($default-style, shape),
+      $size: map.get($default-style, size)
     );
   }
 
-  @each $appearance in adapter.get-button-appearances() {
+  // 使用する軸の値を取得
+  $use-appearances: -get-variant-values($variants, appearance);
+  $use-colors: -get-variant-values($variants, color);
+  $use-brightnesses: -get-variant-values($variants, brightness);
+  $use-shapes: -get-variant-values($variants, shape);
+  $use-sizes: -get-variant-values($variants, size);
+  $use-widths: -get-variant-values($variants, width);
+
+  @each $appearance in $use-appearances {
     &.-appearance-#{"" + $appearance} {
       @include -appearance-style(
         $appearance: $appearance,
-        $brightness: map.get($options, brightness),
-        $color: map.get($options, color),
+        $brightness: map.get($default-style, brightness),
+        $color: map.get($default-style, color),
         $state: enabled
@@ -49,4 +93,4 @@ );
         $appearance: $appearance,
-        $brightness: map.get($options, brightness),
-        $color: map.get($options, color),
+        $brightness: map.get($default-style, brightness),
+        $color: map.get($default-style, color),
       );
@@ -56,7 +100,7 @@ }
 
-  @each $intention in adapter.get-button-colors() {
+  @each $intention in $use-colors {
     &.-color-#{$intention} {
       @include -appearance-style(
-        $appearance: map.get($options, appearance),
-        $brightness: map.get($options, brightness),
+        $appearance: map.get($default-style, appearance),
+        $brightness: map.get($default-style, brightness),
         $color: $intention,
@@ -66,4 +110,4 @@ $state: enabled
       @include -appearance-state-ruleset(
-        $appearance: map.get($options, appearance),
-        $brightness: map.get($options, brightness),
+        $appearance: map.get($default-style, appearance),
+        $brightness: map.get($default-style, brightness),
         $color: $intention,
@@ -73,7 +117,7 @@ );
 
-    @each $appearance in adapter.get-button-appearances() {
+    @each $appearance in $use-appearances {
       &.-color-#{$intention}.-appearance-#{"" + $appearance} {
         @include -appearance-style(
           $appearance: $appearance,
-          $brightness: map.get($options, brightness),
+          $brightness: map.get($default-style, brightness),
           $color: $intention,
@@ -84,3 +128,3 @@ $state: enabled
           $appearance: $appearance,
-          $brightness: map.get($options, brightness),
+          $brightness: map.get($default-style, brightness),
           $color: $intention,
@@ -92,18 +136,18 @@ );
 
-  @each $brightness in adapter.get-brightnesses() {
+  @each $brightness in $use-brightnesses {
     &.-brightness-#{$brightness} {
       @include -appearance-style(
-        $appearance: map.get($options, appearance),
+        $appearance: map.get($default-style, appearance),
         $brightness: $brightness,
-        $color: map.get($options, color),
+        $color: map.get($default-style, color),
         $state: enabled
       );
       @include -appearance-state-ruleset(
-        $appearance: map.get($options, appearance),
+        $appearance: map.get($default-style, appearance),
         $brightness: $brightness,
-        $color: map.get($options, color),
+        $color: map.get($default-style, color),
       );
     }
 
-    @each $appearance in adapter.get-button-appearances() {
+    @each $appearance in $use-appearances {
       &.-brightness-#{$brightness}.-appearance-#{"" + $appearance} {
@@ -113,3 +157,3 @@ @include -appearance-style(
           $brightness: $brightness,
-          $color: map.get($options, color),
+          $color: map.get($default-style, color),
           $state: enabled
@@ -120,7 +164,7 @@ );
           $brightness: $brightness,
-          $color: map.get($options, color),
+          $color: map.get($default-style, color),
         );
       }
 
-      @each $intention in adapter.get-button-colors() {
+      @each $intention in $use-colors {
         &.-brightness-#{$brightness}.-appearance-#{"" + $appearance}.-color-#{$intention} {
@@ -143,12 +187,12 @@ @include -appearance-style(
 
-  @each $shape in adapter.get-shapes() {
+  @each $shape in $use-shapes {
     &.-shape-#{$shape} {
       @include -shape-style(
-        $appearance: map.get($options, appearance),
+        $appearance: map.get($default-style, appearance),
         $shape: $shape,
-        $size: map.get($options, size)
+        $size: map.get($default-style, size)
       );
     }
 
-    @each $appearance in adapter.get-button-appearances() {
+    @each $appearance in $use-appearances {
       &.-shape-#{$shape}.-appearance-#{"" + $appearance} {
@@ -158,3 +202,3 @@ @include -shape-style(
           $shape: $shape,
-          $size: map.get($options, size)
+          $size: map.get($default-style, size)
         );
@@ -165,7 +209,7 @@ }
 
-  @each $size in adapter.get-interactive-component-height-keys() {
+  @each $size in $use-sizes {
     &.-size-#{$size} {
       @include -size-style(
-        $appearance: map.get($options, appearance),
-        $shape: map.get($options, shape),
+        $appearance: map.get($default-style, appearance),
+        $shape: map.get($default-style, shape),
         $size: $size
@@ -175,6 +219,6 @@ );
 
-    @each $shape in adapter.get-shapes() {
+    @each $shape in $use-shapes {
       &.-size-#{$size}.-shape-#{$shape} {
         @include -shape-style(
-          $appearance: map.get($options, appearance),
+          $appearance: map.get($default-style, appearance),
           $shape: $shape,
@@ -185,3 +229,3 @@ $size: $size
 
-      @each $appearance in adapter.get-button-appearances() {
+      @each $appearance in $use-appearances {
         &.-size-#{$size}.-shape-#{$shape}.-appearance-#{"" + $appearance} {
@@ -198,3 +242,3 @@ @include -shape-style(
 
-  @each $width in adapter.get-widths() {
+  @each $width in $use-widths {
     &.-width-#{$width} {
@@ -253,12 +297,2 @@ width: adapter.get-width($width: $width);
 
-@mixin export {
-  .in-button {
-    @include style;
-  }
-
-  .in-skeleton-button {
-    @include skeleton-style;
-  }
-}
-
 @mixin -proto($options) {
@@ -448,1 +482,9 @@ position: relative;
 }
+
+@function -get-variant-values($variants, $key) {
+  @if not map.has-key($variants, $key) {
+    @return ();
+  }
+
+  @return map.get($variants, $key);
+}

package.json

 {
   "name": "@pepabo-inhouse/button",
   "description": "Inhouse Components for the web button component",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "repository": {
@@ -14,12 +14,12 @@ "type": "git",
   "dependencies": {
-    "@pepabo-inhouse/adapter": "^3.7.0",
-    "@pepabo-inhouse/icon": "^3.7.0",
-    "@pepabo-inhouse/skeleton": "^3.7.0"
+    "@pepabo-inhouse/adapter": "^3.8.0",
+    "@pepabo-inhouse/icon": "^3.8.0",
+    "@pepabo-inhouse/skeleton": "^3.8.0"
   },
   "devDependencies": {
-    "@pepabo-inhouse/constants": "^3.7.0",
-    "@pepabo-inhouse/flavor": "^3.4.0",
+    "@pepabo-inhouse/constants": "^3.8.0",
+    "@pepabo-inhouse/flavor": "^3.8.0",
     "@pepabo-inhouse/tokens": "^2.4.0"
   },
-  "gitHead": "daa57dbe1133a5354934d9ec467ff7e948e1ea85"
+  "gitHead": "58896df2396fd18f282fb56c57c0b8639e8ecd29"
 }

No alert changes

Improved metrics

Total package byte prevSize

18093

10.03%

Dependency changes

• Updated

  @pepabo-inhouse/adapter@^3.8.0

• Updated

  @pepabo-inhouse/icon@^3.8.0

• Updated

  @pepabo-inhouse/skeleton@^3.8.0