Fix lint error

packages/adapter/functions/size/_border.scss

@@ -51,7 +51,7 @@ $border-size-tokens: map.get(
 
 @function get-progress-indicator-border-size($size: l) {
   $tokens: map.get($border-size-tokens, progress-indicator);
-  $available-sizes: ('s', 'm', 'l');
+  $available-sizes: ("s", "m", "l");
 
   @if list.index($available-sizes, $size) == null {
     @error error-message.any-one-of(

packages/callout/_mixins.scss

@@ -5,12 +5,12 @@
 
 @mixin style($options: variables.$default-options) {
   display: flex;
-  $options: map.merge(variables.$default-options, $options);
   padding: adapter.get-spacing-size(map.get($options, size));
-  border-radius: adapter.get-radius-size(map.get($options, size));
-  box-shadow: adapter.get-elevation-box-shadow(1);
   font-size: adapter.get-font-size(map.get($options, size));
   line-height: adapter.get-line-height($level: map.get($options, size), $density: normal);
+  border-radius: adapter.get-radius-size(map.get($options, size));
+  box-shadow: adapter.get-elevation-box-shadow(1);
+  $options: map.merge(variables.$default-options, $options);
 
   ._leading {
     padding-right: adapter.get-spacing-size(s);
@@ -54,18 +54,18 @@
     @include -state-style(notice);
   }
 
-  @each $size in 's', 'm', 'l' {
+  @each $size in "s", "m", "l" {
     &.-size-#{$size} {
       @include -size-style($size);
     }
   }
 }
 
 @mixin -state-style($state) {
-  background-color: adapter.get-semantic-color($state, 100);
   color: adapter.get-semantic-color($state, 800);
+  background-color: adapter.get-semantic-color($state, 100);
 
-  ._leading:after {
+  ._leading::after {
     content: map.get(variables.$icon-map, $state);
   }
 }

packages/callout/_variables.scss

@@ -14,4 +14,4 @@ $title-margin-map: (
   s: xxs,
   m: xs,
   l: s
-)
+);

packages/card/_mixins.scss

@@ -44,6 +44,7 @@
     @include -gapless-rule;
   } @else {
     padding: adapter.get-spacing-size(m);
+
     @include adapter.mq-boundary(up, m) {
       padding: adapter.get-spacing-size(l);
     }
@@ -65,12 +66,12 @@
 
   ._media {
     line-height: 0;
+
     ._thumbnail {
       max-width: 100%;
       height: auto;
     }
   }
-
 }
 
 @mixin export {
@@ -105,8 +106,8 @@
 
 @mixin -shape-rule($shape: circle) {
   @if $shape == circle {
-    border-radius: adapter.get-radius-size($level: l);
     overflow: hidden;
+    border-radius: adapter.get-radius-size($level: l);
   } @else if $shape == square {
     border-radius: 0;
   }

packages/card/_variables.scss

@@ -12,4 +12,3 @@ $available-appearance: (
   filled,
   outlined
 );
-

packages/progress-indicator/_mixins.scss

@@ -62,17 +62,18 @@
     left: adapter.get-spacing-size($level: xxs);
     display: block;
     box-sizing: border-box;
-    border-style: solid;
     border-color: adapter.get-progress-indicator-indicator-surface-color();
-    border-radius: 50%;
+    border-style: solid;
     border-width: adapter.get-progress-indicator-border-size($size: l);
+    border-radius: 50%;
     transform: rotate(45deg);
     transform-origin: center;
     transition: clip-path 0.1s ease;
     content: "";
     clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%, 50% 50%);
   }
-  @each $size in 's', 'm', 'l' {
+
+  @each $size in "s", "m", "l" {
     &.-size-#{$size} {
       @include -size-style($size);
     }

packages/select/_mixins.scss

@@ -16,6 +16,9 @@
   position: relative;
   display: inline-block;
   box-sizing: border-box;
+
+  // width
+  width: auto; // stylelint-disable-line order/properties-order
   vertical-align: text-bottom;
 
   ._select {
@@ -44,9 +47,6 @@
     clip-path: polygon(0 0, 100% 0, 50% 100%);
   }
 
-  // width
-  width: auto; // stylelint-disable-line order/properties-order
-
   @include -width-rule(
     $width: map.get($options, width)
   );

packages/snackbar/_mixins.scss

@@ -6,16 +6,17 @@
   $options: map.merge(variables.$default-options, $options);
 
   display: flex;
+  gap: adapter.get-spacing-size(map.get($options, size));
   align-items: center;
-  font-size: adapter.get-font-size(map.get($options, size));
   padding: adapter.get-spacing-size(map.get($options, size));
-  gap: adapter.get-spacing-size(map.get($options, size));
+  font-size: adapter.get-font-size(map.get($options, size));
   border-radius: adapter.get-radius-size(map.get($options, size));
   box-shadow: adapter.get-elevation-box-shadow(1);
   visibility: hidden;
-  opacity: 0;
-  translate: 0 10%;
+  opacity: 0%;
   transition: all 0.4s;
+  translate: 0 10%;
+
   @include -state-style(map.get($options, color));
 
   &.-color-positive {
@@ -37,20 +38,19 @@
   &:active,
   &.--active {
     visibility: visible;
-    opacity: 1;
+    opacity: 100%;
     translate: 0 0;
     transition: all 0.4s;
   }
 
-
   ._trailing {
     margin-left: auto;
   }
 }
 
 @mixin -state-style($state) {
-  background-color: adapter.get-semantic-color($state, 100);
   color: adapter.get-semantic-color($state, 800);
+  background-color: adapter.get-semantic-color($state, 100);
 }
 
 @mixin export {

packages/stories-web/src/card.stories.tsx

@@ -1,20 +1,19 @@
-import type { StoryFn, Meta } from '@storybook/react'
-import React from 'react'
-import Card, { Props } from './components/card/Card'
-import fixture from '../assets/fixture.jpg'
+import type { StoryFn, Meta } from "@storybook/react";
+import React from "react";
+import Card, { Props } from "./components/card/Card";
 
 export default {
-  title: 'Components/Card',
-  component: Card
-} as Meta
+  title: "Components/Card",
+  component: Card,
+} as Meta;
 
-const Template: StoryFn<Props> = (args) => <Card {...args} />
+const Template: StoryFn<Props> = (args) => <Card {...args} />;
 
-export const Index = Template.bind({})
+export const Index = Template.bind({});
 Index.args = {
-  appearance: 'elevated',
-  body: 'Card body',
-  color: 'primary',
+  appearance: "elevated",
+  body: "Card body",
+  color: "primary",
   isGapless: false,
-  shape: 'circle'
-}
+  shape: "circle",
+};

packages/stories-web/src/components/card/Card.tsx

@@ -1,50 +1,40 @@
-import React, { FC, ReactNode } from 'react'
-import { Shape } from '../types'
+import React, { FC } from "react";
+import { Shape } from "../types";
 
 export interface Props {
-  appearance?: 'filled' | 'outlined' | 'elevated';
-  body?: string
-  color?: 'primary' | 'secondary' | 'tertiary';
-  isGapless?: boolean
-  shape?: Shape
+  appearance?: "filled" | "outlined" | "elevated";
+  body?: string;
+  color?: "primary" | "secondary" | "tertiary";
+  isGapless?: boolean;
+  shape?: Shape;
 }
 
 const Card: FC<Props> = (props: Props) => {
-  const {
-    appearance,
-    body,
-    color,
-    isGapless,
-    shape,
-    ...rest
-  } = props;
-
-  const classes = [`in-card`]
-
-  if (typeof appearance !== 'undefined') {
-    classes.push(`-appearance-${appearance}`)
+  const { appearance, body, color, isGapless, shape, ...rest } = props;
+
+  const classes = [`in-card`];
+
+  if (typeof appearance !== "undefined") {
+    classes.push(`-appearance-${appearance}`);
   }
 
-  if (typeof color !== 'undefined') {
-    classes.push(`-color-${color}`)
+  if (typeof color !== "undefined") {
+    classes.push(`-color-${color}`);
   }
 
   if (isGapless) {
-    classes.push('-is-gapless')
+    classes.push("-is-gapless");
   }
 
-  if (typeof shape !== 'undefined') {
-    classes.push(`-shape-${shape}`)
+  if (typeof shape !== "undefined") {
+    classes.push(`-shape-${shape}`);
   }
 
   return (
-    <div
-      className={classes.join(' ')}
-      {...rest}
-    >
+    <div className={classes.join(" ")} {...rest}>
       {body || null}
     </div>
   );
-}
+};
 
-export default Card
+export default Card;

packages/table/_mixins.scss

@@ -98,13 +98,15 @@
   tr:nth-child(even) td {
     background-color: adapter.get-surface-color(light, secondary);
   }
+
   tr:nth-child(odd) td {
     background-color: adapter.get-surface-color(light, primary);
   }
 }
 
 @mixin -grid-border {
-  th, td {
+  th,
+  td {
     border: adapter.get-table-border-size() solid adapter.get-border-color($brightness: light, $name: mid_emphasis);
   }
 }

packages/textfield/_mixins.scss

@@ -16,6 +16,9 @@
   position: relative;
   display: inline-block;
   box-sizing: border-box;
+
+  // width
+  width: auto; // stylelint-disable-line order/properties-order
   vertical-align: text-bottom;
 
   ._input {
@@ -57,9 +60,6 @@
     resize: vertical;
   }
 
-  // width
-  width: auto; // stylelint-disable-line order/properties-order
-
   @include -width-rule(
     $width: map.get($options, width)
   );