buttonの全variantがループしてcssへ出力されないようにmixinを調整

packages/button/README.md

@@ -11,3 +11,56 @@ $ npm install @pepabo-inhouse/button
 
 $ yarn add @pepabo-inhouse/button
 ```
+
+### Mixins
+
+#### `style($options: null)`
+
+ボタンのスタイルを出力します。`$options` の指定の有無で出力される内容が変わります。
+
+- `$options` を省略した場合は、デフォルトのスタイルに加えてすべてのmodifier（`-appearance-*`, `-color-*`, `-brightness-*`, `-shape-*`, `-size-*`, `-width-*`）のスタイルを出力します。`export` が出力する `.in-button` と同じ内容です。
+- `$options` を明示的に指定した場合は、指定した値（未指定の属性はデフォルト値）のスタイルだけを出力し、modifierのスタイルは出力しません。mixinベース（エイリアシング）でスタイルを固定して使う場合は、こちらの使い方をすることで不要なCSSの出力を避けられます。
+
+```scss
+@use '@pepabo-inhouse/components-web' as inhouse;
+
+// 指定したオプションの組み合わせのスタイルだけが出力される
+.button-submit {
+  @include inhouse.button-style(
+    $options: (
+      appearance: flat,
+      color: neutral,
+      shape: circle,
+      size: m,
+      width: auto,
+    )
+  );
+}
+
+// 従来どおり、デフォルトのスタイルとすべてのmodifierのスタイルが出力される
+.button-legacy {
+  @include inhouse.button-style;
+}
+```
+
+#### `skeleton-style($options: null)`
+
+スケルトンボタンのスタイルを出力します。`style` と同様に、`$options` を省略した場合はすべてのmodifier（`-shape-*`, `-size-*`, `-width-*`）のスタイルを、明示的に指定した場合は指定した値（未指定の属性はデフォルト値）のスタイルだけを出力します。
+
+#### `style-with-variants($variants: (), $default-style: ...)`
+
+デフォルトのスタイルと、`$variants` で指定した属性・値の組み合わせをmodifierとして出力します。modifierとして利用したい値を絞りたい場合に使います。
+
+```scss
+@use '@pepabo-inhouse/button' as button;
+
+.my-button {
+  @include button.style-with-variants(
+    $variants: (
+      appearance: (flat, solid),
+      color: (primary, neutral),
+      size: (m, l)
+    )
+  );
+}
+```

packages/button/_mixins.scss

@@ -19,18 +19,25 @@
 /* stylelint-disable no-descending-specificity */
 /* stylelint-disable no-duplicate-selectors */
 
-@mixin style($options: variables.$default-option) {
-  @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
-  );
+@mixin style($options: null) {
+  @if $options == null {
+    @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: variables.$default-option
+    );
+  } @else {
+    @include style-with-variants(
+      $variants: (),
+      $default-style: $options
+    );
+  }
 }
 
 /// 指定した属性とその値の組み合わせのスタイル
@@ -230,7 +237,15 @@
   }
 }
 
-@mixin skeleton-style($options: variables.$default-option) {
+@mixin skeleton-style($options: null) {
+  @if $options == null {
+    @include -skeleton-style-with-variants;
+  } @else {
+    @include -skeleton-proto($options);
+  }
+}
+
+@mixin -skeleton-proto($options) {
   $options: map.merge(variables.$default-option, $options);
 
   @include skeleton.style;
@@ -242,6 +257,12 @@
       $shape: map.get($options, shape),
       $size: map.get($options, size)
     );
+}
+
+@mixin -skeleton-style-with-variants {
+  $options: variables.$default-option;
+
+  @include -skeleton-proto($options);
 
   @each $shape in adapter.get-shapes() {
     &.-shape-#{$shape} {