fix(vara-ui): add Button icon sizes and colors

utils/vara-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/vara-ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "description": "React UI components used across Vara applications",
   "author": "Gear Technologies",

utils/vara-ui/src/components/alert/alert.module.scss

@@ -37,14 +37,7 @@
 }
 
 .button {
-  @include lightDark(color, #000, #fff);
-
   margin-left: auto;
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
 }
 
 .body {

utils/vara-ui/src/components/alert/alert.tsx

@@ -49,7 +49,9 @@ function Alert({ alert, close }: Props) {
         <SVG className={styles.icon} />
         <h2 className={styles.title}>{title || type}</h2>
 
-        {isClosed && <Button icon={CrossSVG} color="transparent" className={styles.button} onClick={close} />}
+        {isClosed && (
+          <Button icon={CrossSVG} color="transparent" size="medium" className={styles.button} onClick={close} />
+        )}
       </header>
 
       <div className={styles.body}>{content}</div>

utils/vara-ui/src/components/button/button.module.scss

@@ -10,12 +10,11 @@
   }
 }
 
-.button,
-.content {
+.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 8px;
 }
 
 .button {
@@ -24,9 +23,9 @@
   padding: var(--padding, 0);
   font-family: inherit;
 
-  font-size: 16px;
+  font-size: var(--font-size, 16px);
   font-weight: 600;
-  line-height: 12px;
+  line-height: var(--icon-size);
   color: var(--color, #000);
 
   background-color: var(--background-color, transparent);
@@ -66,6 +65,22 @@
   }
 }
 
+.icon {
+  width: var(--icon-size);
+  height: var(--icon-size);
+
+  &,
+  * {
+    &[stroke]:not([stroke='none']) {
+      stroke: currentColor;
+    }
+
+    &[fill]:not([fill='none']) {
+      fill: currentColor;
+    }
+  }
+}
+
 .block {
   width: 100%;
 }
@@ -89,8 +104,7 @@
   }
 }
 
-.contrast,
-.dark {
+.contrast {
   @include lightDark(--background-color, #000, #fff);
   @include lightDark(--spinner-color, #fff, #000);
   @include lightDark(--color, #fff, #000);
@@ -107,8 +121,7 @@
   }
 }
 
-.blend,
-.light {
+.plain {
   @include lightDark(--spinner-color, #fff, #000);
 
   @include darkMode {
@@ -177,7 +190,7 @@
 }
 
 .transparent {
-  --spinner-size: 16px;
+  --padding: 0 !important; // overriding size classes
 
   @include darkMode() {
     --color: #fff;
@@ -189,39 +202,57 @@
   }
 
   &:not(.loading):disabled {
-    --background-color: transparent;
+    @include lightDark(--background-color, transparent, transparent);
   }
 }
 
 .x-small {
-  --padding: 10px 16px;
+  --padding: 8px 16px;
   --spinner-size: 20px;
+  --icon-size: 16px;
+
+  &.noText {
+    --padding: 8px;
+  }
 }
 
 .small {
-  --padding: 14px 24px;
+  --padding: 10px 24px;
   --spinner-size: 20px;
+  --icon-size: 20px;
 
   &.noText {
-    --padding: 12px 16px;
+    --padding: 10px;
   }
 }
 
 .medium {
-  --padding: 16px 24px;
+  --padding: 12px 24px;
   --spinner-size: 24px;
+  --icon-size: 20px;
+
+  &.noText {
+    --padding: 12px;
+  }
 }
 
 .default {
-  --padding: 18px 24px;
+  --padding: 12px 24px;
   --spinner-size: 24px;
+  --icon-size: 24px;
 
   &.noText {
-    --padding: 15px 16px;
+    --padding: 12px;
   }
 }
 
 .x-large {
-  --padding: 20px 28px;
+  --padding: 14px 28px;
   --spinner-size: 24px;
+  --font-size: 18px;
+  --icon-size: 24px;
+
+  &.noText {
+    --padding: 14px;
+  }
 }

utils/vara-ui/src/components/button/button.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<Type> = {
   title: 'Button',
   component: Button,
   args: {
-    children: 'Click me!',
+    text: 'Click me!',
     color: 'primary',
     size: 'default',
     disabled: false,
@@ -25,11 +25,11 @@ const meta: Meta<Type> = {
     noWrap: { control: 'boolean' },
     size: {
       options: ['x-small', 'small', 'medium', 'default', 'x-large'],
-      control: { type: 'select' },
+      control: { type: 'radio' },
     },
     color: {
-      options: ['primary', 'blend', 'contrast', 'grey', 'border', 'transparent', 'danger'],
-      control: { type: 'select' },
+      options: ['primary', 'plain', 'contrast', 'grey', 'border', 'transparent', 'danger'],
+      control: { type: 'radio' },
     },
   },
 };
@@ -39,12 +39,15 @@ const Border: Story = { args: { color: 'border' } };
 const Grey: Story = { args: { color: 'grey' } };
 const Transparent: Story = { args: { color: 'transparent' } };
 const Contrast: Story = { args: { color: 'contrast' } };
-const Blend: Story = { args: { color: 'blend' } };
+const Plain: Story = { args: { color: 'plain' } };
 const Danger: Story = { args: { color: 'danger' } };
-const NoText: Story = { args: { color: 'primary', children: undefined, icon: CrossSVG } };
-const WithChildrenAndIcons: Story = {
+const Icon: Story = { args: { color: 'primary', text: undefined, icon: CrossSVG } };
+const IconAndText: Story = { args: { color: 'primary', icon: CrossSVG } };
+
+const Children: Story = {
   args: {
     color: 'primary',
+    text: undefined,
     children: (
       <>
         <CrossSVG />
@@ -56,4 +59,4 @@ const WithChildrenAndIcons: Story = {
 };
 
 export default meta;
-export { Default, Border, Grey, Transparent, Contrast, Blend, Danger, NoText, WithChildrenAndIcons };
+export { Default, Border, Grey, Transparent, Contrast, Plain, Danger, Icon, IconAndText, Children };

utils/vara-ui/src/components/button/button.tsx

@@ -6,18 +6,7 @@ import styles from './button.module.scss';
 type BaseProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   text?: string;
   icon?: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string | undefined }>;
-  color?:
-    | 'primary'
-    | 'blend'
-    | 'contrast'
-    /** @deprecated use 'contrast' instead */
-    | 'dark'
-    /** @deprecated use 'blend' instead */
-    | 'light'
-    | 'grey'
-    | 'border'
-    | 'transparent'
-    | 'danger';
+  color?: 'primary' | 'plain' | 'contrast' | 'grey' | 'border' | 'transparent' | 'danger';
   size?: 'x-small' | 'small' | 'medium' | 'default' | 'x-large';
   isLoading?: boolean;
   block?: boolean;
@@ -64,7 +53,7 @@ const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
       className={cx(
         styles.button,
         styles[color],
-        color !== 'transparent' && styles[size],
+        styles[size],
         isLoading && styles.loading,
         !text && !children && styles.noText,
         block && styles.block,
@@ -74,8 +63,10 @@ const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
       disabled={disabled || isLoading}
       ref={ref}
       {...attrs}>
-      {Icon && <Icon />}
-      {(text || children) && <span className={styles.content}>{text || children}</span>}
+      {Icon && <Icon className={styles.icon} />}
+      {text && <span>{text}</span>}
+
+      {children}
     </button>
   );
 });

utils/vara-ui/src/components/modal/modal.module.scss

@@ -110,11 +110,6 @@
   }
 }
 
-.button svg {
-  width: 20px;
-  height: 20px;
-}
-
 .body,
 .footer {
   @include lightDark(color, #000, rgba(246, 246, 246, 0.8));

utils/vara-ui/src/components/modal/modal.tsx

@@ -36,7 +36,7 @@ const Modal = ({ heading, close, children, className, headerAddon, footer, maxWi
             {headerAddon}
           </div>
 
-          <Button icon={CrossSVG} color="transparent" onClick={close} className={styles.button} />
+          <Button icon={CrossSVG} color="transparent" size="medium" onClick={close} />
         </header>
 
         {children && <ScrollArea className={cx(styles.body, className)}>{children}</ScrollArea>}

utils/wallet-connect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/wallet-connect",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "type": "module",
   "description": "React library to connect Substrate based wallets to Gear dApps",
   "author": "Gear Technologies",