Merge pull request #4153 from relative-ci/ui-improvements

ui improvements

packages/ui/src/css/variables.css

@@ -28,8 +28,8 @@
 
   /*
    * Color scheme:
-   * https://coolors.co/287acc-da444e-55b950-f6e179-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f3d966&mcgpalette3=%23353138&mcgpalette4=%23287acc&themename=mcgtheme
+   * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23efcc1a&mcgpalette3=%23353138&mcgpalette4=%23287acc&themename=mcgtheme
    * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
    */
   --color-gray-25: #f9f9fa;
@@ -104,16 +104,16 @@
   --color-green-ultra-dark: var(--color-green-900);
 
   --color-yellow-25: #fffdf2;
-  --color-yellow-50: #fefaed;
-  --color-yellow-100: #fbf4d1;
-  --color-yellow-200: #f9ecb3;
-  --color-yellow-300: #f7e494;
-  --color-yellow-400: #f5df7d;
-  --color-yellow-500: #f3d966;
-  --color-yellow-600: #f1d55e;
-  --color-yellow-700: #efcf53;
-  --color-yellow-800: #edca49;
-  --color-yellow-900: #eac038;
+  --color-yellow-50: #fdf9e4;
+  --color-yellow-100: #faf0ba;
+  --color-yellow-200: #f7e68d;
+  --color-yellow-300: #f4db5f;
+  --color-yellow-400: #f1d43c;
+  --color-yellow-500: #efcc1a;
+  --color-yellow-600: #edc717;
+  --color-yellow-700: #ebc013;
+  --color-yellow-800: #e8b90f;
+  --color-yellow-900: #e4ad08;
 
   --color-yellow-light-background: var(--color-yellow-25);
   --color-yellow-ultra-light: var(--color-yellow-100);
@@ -189,8 +189,8 @@
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
 
-  --radius-small: 3px;
-  --radius-medium: 4px;
+  --radius-small: 4px;
+  --radius-medium: 5px;
   --radius-large: 6px;
 
   --outline-hover: 0 0 0 3px var(--color-highlight);

packages/ui/src/ui/button/button.module.css

@@ -4,14 +4,14 @@
   border: 0;
   background: none;
   transition: var(--transition-out);
-  color: var(--color-text);
-  line-height: 1.1;
+  color: var(--color-text-ultra-light);
+  line-height: 1;
 }
 
 .root:hover,
 .root:active,
 .root:focus {
-  color: var(--color-text-dark);
+  color: var(--color-text-light);
   transition: var(--transition-in);
 }
 
@@ -89,6 +89,7 @@
 .solid:hover,
 .solid:active,
 .solid:focus {
+  box-shadow: var(--outline-hover);
   background: var(--color-text);
   color: var(--color-background);
 }
@@ -157,7 +158,74 @@
  * Outline variation
  */
 .outline {
-  border: 1px solid currentColor;
+  border: 1px solid var(--color-outline);
+}
+
+.outline:hover,
+.outline:active,
+.outline:focus {
+  box-shadow: var(--outline-hover);
+  border-color: var(--color-outline-dark);
+}
+
+.outline--primary {
+  border-color: var(--color-outline-primary);
+}
+
+.outline--primary:hover,
+.outline--primary:active,
+.outline--primary:focus {
+  border-color: var(--color-outline-primary-dark);
+}
+
+.outline--secondary {
+  border-color: var(--color-outline-secondary);
+}
+
+.outline--secondary:hover,
+.outline--secondary:active,
+.outline--secondary:focus {
+  border-color: var(--color-outline-secondary-dark);
+}
+
+.outline--danger {
+  border-color: var(--color-outline-danger);
+}
+
+.outline--danger:hover,
+.outline--danger:active,
+.outline--danger:focus {
+  border-color: var(--color-outline-danger-dark);
+}
+
+.outline--warning {
+  border-color: var(--color-outline-warning);
+}
+
+.outline--warning:hover,
+.outline--warning:active,
+.outline--warning:focus {
+  border-color: var(--color-outline-warning-dark);
+}
+
+.outline--info {
+  border-color: var(--color-outline-info);
+}
+
+.outline--info:hover,
+.outline--info:active,
+.outline--info:focus {
+  border-color: var(--color-outline-info-dark);
+}
+
+.outline--success {
+  border-color: var(--color-outline-success);
+}
+
+.outline--success:hover,
+.outline--success:active,
+.outline--success:focus {
+  border-color: var(--color-outline-success-dark);
 }
 
 /**
@@ -179,15 +247,15 @@
  * Padding variation
  */
 .padding--small {
-  padding: var(--space-xxxsmall);
+  padding: var(--space-xxsmall);
 }
 
 .padding--medium {
-  padding: var(--space-xxsmall);
+  padding:  var(--space-xsmall);
 }
 
 .padding--large {
-  padding: var(--space-xsmall);
+  padding: var(--space-small);
 }
 
 /**

packages/ui/src/ui/button/button.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
+import { Button as ButtonBaseComponent } from 'ariakit/button';
 
 import css from './button.module.css';
 
@@ -22,22 +23,20 @@ type Size = (typeof SIZE)[keyof typeof SIZE];
 type Kind = (typeof KIND)[keyof typeof KIND];
 
 interface ButtonProps {
-  as?: React.ElementType;
   outline?: boolean;
   solid?: boolean;
-  kind?: Kind;
+  kind?: Kind | 'default';
   size?: Size;
   radius?: Size | 'circle' | 'none';
   padding?: Size | 'none';
 }
 
-export const Button = (props: ButtonProps & React.ComponentProps<'button'>) => {
+export const Button = (props: ButtonProps & React.ComponentProps<typeof ButtonBaseComponent>) => {
   const {
     className = '',
-    as: Component = 'button',
     outline = false,
     solid = false,
-    kind = '',
+    kind = 'default',
     size = 'medium',
     radius = '',
     padding = '',
@@ -52,7 +51,9 @@ export const Button = (props: ButtonProps & React.ComponentProps<'button'>) => {
     css.root,
     css[size],
     kind && css[kind],
+
     outline && css.outline,
+    outline && css[`outline--${kind}`],
 
     solid && css.solid,
     solid && css[`solid--${kind}`],
@@ -64,7 +65,7 @@ export const Button = (props: ButtonProps & React.ComponentProps<'button'>) => {
     className,
   );
 
-  return <Component {...restProps} className={rootClassName} />;
+  return <ButtonBaseComponent {...restProps} className={rootClassName} />;
 };
 
 Button.SIZE = SIZE;