feat: inherit cross size variant option (#25)

Author: ajbura

src/components/checkbox/Checkbox.stories.tsx

@@ -13,7 +13,7 @@ export default {
     },
     size: {
       control: "select",
-      options: ["50", "100", "200", "300", "400", "500", "600"],
+      options: ["Inherit", "50", "100", "200", "300", "400", "500", "600"],
     },
   },
 } as ComponentMeta<typeof Checkbox>;

src/components/icon/Icons.stories.tsx

@@ -22,7 +22,7 @@ export default {
   argTypes: {
     size: {
       control: "select",
-      options: ["50", "100", "200", "300", "400", "500", "600"],
+      options: ["Inherit", "50", "100", "200", "300", "400", "500", "600"],
     },
   },
 } as ComponentMeta<typeof Icon>;

src/components/radio-button/RadioButton.stories.tsx

@@ -13,7 +13,7 @@ export default {
     },
     size: {
       control: "select",
-      options: ["50", "100", "200", "300", "400", "500", "600"],
+      options: ["Inherit", "50", "100", "200", "300", "400", "500", "600"],
     },
   },
 } as ComponentMeta<typeof RadioButton>;

src/components/spinner/Spinner.stories.tsx

@@ -16,7 +16,7 @@ export default {
     },
     size: {
       control: "select",
-      options: ["50", "100", "200", "300", "400", "500", "600"],
+      options: ["Inherit", "50", "100", "200", "300", "400", "500", "600"],
     },
   },
 } as ComponentMeta<typeof Spinner>;

src/components/variant.css.ts

@@ -23,6 +23,10 @@ export const RadiiVariant = {
 };
 
 export const CrossSizeVariant = {
+  Inherit: style({
+    width: config.size.XInherit,
+    height: config.size.XInherit,
+  }),
   "50": style({
     width: config.size.X50,
     height: config.size.X50,

src/theme/config.css.ts

@@ -126,6 +126,7 @@ export const [configClass, config] = createTheme({
     E400: `0px 4px 26px -6px ${color.Other.Shadow}`,
   },
   size: {
+    XInherit: "1em",
     X50: toRem(16),
     X100: toRem(18),
     X200: toRem(20),