Skip to content
This repository has been archived by the owner on Jul 28, 2024. It is now read-only.

Commit

Permalink
Merge branch 'master' of github.com:woly-ui/woly into feat/FRNT-503-a…
Browse files Browse the repository at this point in the history 
…dd-specification-for-chip
  • Loading branch information
@Irinaristova
Irinaristova committed Jun 16, 2021
2 parents 85ad57e + 29ba491 commit 47c3853
Show file tree
Hide file tree
Showing 6 changed files with 499 additions and 190 deletions.
238 changes: 171 additions & 67 deletions src/lib/global.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,96 +5,200 @@ export const Global = styled.div`
font-family: 'Helvetica Neue', sans-serif;
}
--palette-snow-1000: #000000;
--palette-snow-500: #c0c0c0;
--palette-snow-300: #e5e5e5;
--palette-snow-100: #f5f5f5;
--palette-snow-0: #ffffff;
--palette-lavender-500: #9381f1;
--palette-lavender-300: #b0a3f4;
--palette-lavender-100: #c9c0f8;
--palette-dawn-300: #ff9097;
/* base colors */
--bw-0: 0, 0%, 0%;
--bw-1000: 0, 0%, 100%;
/* bw palette */
--bw-100: 249, 7%, 81%;
--bw-200: 240, 7%, 92%;
--bw-300: 240, 9%, 98%;
--bw-400: 245, 6%, 66%;
--bw-500: 247, 7%, 48%;
--bw-600: 248, 7%, 40%;
--bw-700: 251, 7%, 30%;
--bw-800: 249, 7%, 21%;
--bw-900: 240, 7%, 11%;
/* primary palette */
--primary-100: 257, 78%, 98%;
--primary-200: 256, 83%, 93%;
--primary-300: 255, 85%, 84%;
--primary-400: 256, 84%, 72%;
--primary-500: 255, 85%, 58%;
--primary-600: 255, 61%, 49%;
--primary-700: 255, 61%, 37%;
--primary-800: 255, 60%, 25%;
--primary-900: 256, 61%, 13%;
/* secondary palette */
--secondary-100: 223, 100%, 13%;
--secondary-200: 223, 100%, 22%;
--secondary-300: 223, 100%, 30%;
--secondary-400: 223, 100%, 40%;
--secondary-500: 223, 100%, 46%;
--secondary-600: 223, 100%, 58%;
--secondary-700: 223, 100%, 64%;
--secondary-800: 223, 100%, 78%;
--secondary-900: 223, 100%, 93%;
/* danger palette */
--danger-100: 345, 73%, 96%;
--danger-200: 344, 72%, 87%;
--danger-300: 345, 72%, 74%;
--danger-400: 345, 72%, 57%;
--danger-500: 345, 100%, 42%;
--danger-600: 345, 99%, 33%;
--danger-700: 345, 98%, 25%;
--danger-800: 345, 98%, 16%;
--danger-900: 346, 95%, 8%;
/* accent palette */
--accent-100: 0, 100%, 98%;
--accent-200: 358, 95%, 92%;
--accent-300: 358, 97%, 85%;
--accent-400: 358, 97%, 76%;
--accent-500: 359, 96%, 67%;
--accent-600: 359, 53%, 53%;
--accent-700: 358, 47%, 39%;
--accent-800: 359, 47%, 25%;
--accent-900: 0, 46%, 11%;
/* success palette */
--success-100: 120, 38%, 97%;
--success-200: 124, 40%, 92%;
--success-300: 125, 38%, 82%;
--success-400: 124, 39%, 73%;
--success-500: 124, 39%, 63%;
--success-600: 124, 23%, 50%;
--success-700: 124, 23%, 36%;
--success-800: 124, 23%, 24%;
--success-900: 124, 23%, 12%;
/* should be rewritten to formulas */
--woly-line-height: 24px;
--woly-main-level: 3;
--woly-const-m: 6px;
--woly-border-width: 1.5px;
--woly-rounding: 3px;
--woly-line-height: 24px;
--woly-font-size: 15px;
--woly-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
--woly-const-m: 6px;
--woly-main-level: 3;
--woly-background: hsla(var(--bw-1000), 1);
--woly-neutral: hsla(var(--bw-50), 1);
--woly-focus-color: hsla(var(--primary-700), 1);
--woly-danger-color: hsla(var(--danger-500), 1);
--woly-neutral: var(--palette-snow-500);
--woly-focus: var(--palette-lavender-500);
--woly-background: var(--palette-snow-0);
--woly-danger: var(--palette-dawn-300);
--woly-shadow: 3px 3px 9px hsla(0, 0%, 22%, 12%);
[data-variant='default'] {
--woly-shape-default: hsla(var(--bw-500), 1);
--woly-shape-disabled: hsla(var(--bw-200), 1);
--woly-shape-hover: hsla(var(--bw-600), 1);
--woly-shape-active: hsla(var(--bw-700), 1);
--woly-shape-text-default: hsla(var(--bw-1000), 1);
--woly-shape-text-disabled: hsla(var(--bw-300), 1);
--woly-shape-text-hover: hsla(var(--bw-1000), 1);
--woly-shape-text-active: hsla(var(--bw-1000), 1);
--woly-canvas-default: transparent;
--woly-canvas-disabled: hsla(var(--bw-200), 1);
--woly-canvas-hover: hsla(var(--bw-600), 1);
--woly-canvas-active: hsla(var(--bw-700), 1);
--woly-canvas-text-default: hsla(var(--bw-0), 1);
--woly-canvas-text-disabled: hsla(var(--bw-300), 1);
--woly-canvas-text-hover: hsla(var(--bw-0), 1);
--woly-canvas-text-active: hsla(var(--bw-0), 1);
}
[data-variant='primary'] {
--woly-shape-default: var(--palette-lavender-300);
--woly-shape-disabled: var(--palette-snow-300);
--woly-shape-hover: var(--palette-lavender-100);
--woly-shape-active: var(--palette-lavender-300);
--woly-shape-default: hsla(var(--primary-500), 1);
--woly-shape-disabled: hsla(var(--primary-200), 1);
--woly-shape-hover: hsla(var(--primary-600), 1);
--woly-shape-active: hsla(var(--primary-700), 1);
--woly-shape-text-default: var(--palette-snow-0);
--woly-shape-text-disabled: var(--palette-snow-0);
--woly-shape-text-hover: var(--palette-snow-0);
--woly-shape-text-active: var(--palette-snow-0);
--woly-shape-text-default: hsla(var(--bw-1000), 1);
--woly-shape-text-disabled: hsla(var(--bw-300), 1);
--woly-shape-text-hover: hsla(var(--bw-1000), 1);
--woly-shape-text-active: hsla(var(--bw-1000), 1);
--woly-canvas-default: transparent;
--woly-canvas-disabled: var(--palette-snow-100);
--woly-canvas-hover: var(--palette-snow-500);
--woly-canvas-active: var(--palette-snow-500);
--woly-canvas-text-default: var(--palette-snow-1000);
--woly-canvas-text-disabled: var(--palette-snow-500);
--woly-canvas-text-hover: var(--palette-snow-500);
--woly-canvas-text-active: var(--palette-snow-500);
--woly-canvas-disabled: hsla(var(--bw-200), 1);
--woly-canvas-hover: hsla(var(--primary-600), 1);
--woly-canvas-active: hsla(var(--primary-700), 1);
--woly-canvas-text-default: hsla(var(--bw-0), 1);
--woly-canvas-text-disabled: hsla(var(--bw-300), 1);
--woly-canvas-text-hover: hsla(var(--bw-0), 1);
--woly-canvas-text-active: hsla(var(--bw-0), 1);
}
[data-variant='secondary'] {
--woly-shape-default: var(--palette-snow-500);
--woly-shape-disabled: var(--palette-snow-100);
--woly-shape-hover: var(--palette-snow-500);
--woly-shape-active: var(--palette-snow-500);
--woly-shape-default: hsla(var(--secondary-500), 1);
--woly-shape-disabled: hsla(var(--secondary-200), 1);
--woly-shape-hover: hsla(var(--secondary-600), 1);
--woly-shape-active: hsla(var(--secondary-700), 1);
--woly-shape-text-default: hsla(var(--bw-1000), 1);
--woly-canvas-text-disabled: hsla(var(--bw-300), 1);
--woly-shape-text-hover: hsla(var(--bw-1000), 1);
--woly-shape-text-active: hsla(var(--bw-1000), 1);
--woly-canvas-default: transparent;
--woly-canvas-disabled: hsla(var(--bw-200), 1);
--woly-canvas-hover: hsla(var(--secondary-600), 1);
--woly-canvas-active: hsla(var(--secondary-700), 1);
--woly-canvas-text-default: hsla(var(--bw-0), 1);
--woly-canvas-text-disabled: hsla(var(--bw-300), 1);
--woly-canvas-text-hover: hsla(var(--bw-0), 1);
--woly-canvas-text-active: hsla(var(--bw-0), 1);
}
[data-variant='tertiary'] {
--woly-shape-default: transparent;
--woly-shape-disabled: hsla(var(--bw-200), 1);
--woly-shape-hover: transparent;
--woly-shape-active: transparent;
--woly-shape-text-default: var(--palette-snow-0);
--woly-shape-text-disabled: var(--palette-snow-0);
--woly-shape-text-hover: var(--palette-snow-0);
--woly-shape-text-active: var(--palette-snow-0);
--woly-shape-text-default: hsla(var(--bw-0), 1);
--woly-shape-text-disabled: hsla(var(--bw-300), 1);
--woly-shape-text-hover: hsla(var(--bw-600), 1);
--woly-shape-text-active: hsla(var(--bw-700), 1);
--woly-canvas-default: transparent;
--woly-canvas-disabled: var(--palette-snow-100);
--woly-canvas-hover: var(--palette-snow-500);
--woly-canvas-active: var(--palette-snow-500);
--woly-canvas-text-default: var(--palette-snow-1000);
--woly-canvas-text-disabled: var(--palette-snow-500);
--woly-canvas-text-hover: var(--palette-snow-500);
--woly-canvas-text-active: var(--palette-snow-500);
--woly-canvas-disabled: hsla(var(--bw-200), 1);
--woly-canvas-hover: transparent;
--woly-canvas-active: transparent;
--woly-canvas-text-default: hsla(var(--bw-0), 1);
--woly-canvas-text-disabled: hsla(var(--bw-300), 1);
--woly-canvas-text-hover: hsla(var(--bw-600), 1);
--woly-canvas-text-active: hsla(var(--bw-700), 1);
}
[data-variant='danger'] {
--woly-shape-default: var(--woly-danger);
--woly-shape-disabled: var(--palette-snow-300);
--woly-shape-hover: var(--woly-danger);
--woly-shape-active: var(--woly-danger);
--woly-shape-default: hsla(var(--danger-500), 1);
--woly-shape-disabled: hsla(var(--danger-200), 1);
--woly-shape-hover: hsla(var(--danger-600), 1);
--woly-shape-active: hsla(var(--danger-700), 1);
--woly-shape-text-default: var(--palette-snow-0);
--woly-shape-text-disabled: var(--palette-snow-0);
--woly-shape-text-hover: var(--palette-snow-0);
--woly-shape-text-active: var(--palette-snow-0);
--woly-shape-text-default: hsla(var(--bw-1000), 1);
--woly-shape-text-disabled: hsla(var(--bw-300), 1);
--woly-shape-text-hover: hsla(var(--bw-1000), 1);
--woly-shape-text-active: hsla(var(--bw-1000), 1);
--woly-canvas-default: transparent;
--woly-canvas-disabled: var(--palette-snow-100);
--woly-canvas-hover: var(--woly-danger);
--woly-canvas-active: var(--woly-danger);
--woly-canvas-text-default: var(--woly-danger);
--woly-canvas-text-disabled: var(--palette-snow-500);
--woly-canvas-text-hover: var(--woly-danger);
--woly-canvas-text-active: var(--woly-danger);
--woly-canvas-disabled: hsla(var(--danger-200), 1);
--woly-canvas-hover: hsla(var(--danger-600), 1);
--woly-canvas-active: hsla(var(--danger-700), 1);
--woly-canvas-text-default: hsla(var(--danger-500), 1);
--woly-canvas-text-disabled: hsla(var(--danger-300), 1);
--woly-canvas-text-hover: hsla(var(--danger-600), 1);
--woly-canvas-text-active: hsla(var(--danger-700), 1);
}
`;
23 changes: 18 additions & 5 deletions src/ui/atoms/button/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,35 @@ import styled, { StyledComponent } from 'styled-components';
import { Variant } from 'lib/types';
import { box } from 'ui/elements';

export type ButtonVariants = 'secondary' | 'primary' | 'destructive' | 'text';
export type ButtonVariants =
| 'secondary'
| 'primary'
| 'default'
| 'transparent'
| 'danger'
| 'accent'
| 'success';
export type ButtonSizes = 'default' | 'small';

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children?: never;
className?: string;
fullWidth?: boolean;
icon?: React.ReactNode;
text: React.ReactNode;
outlined?: boolean;
text: React.ReactNode;
}

const ButtonBase: React.FC<ButtonProps & Variant> = ({
fullWidth = false,
icon,
outlined = false,
text,
type = 'button',
variant = 'secondary',
outlined = false,
...p
}) => (
<button type={type} data-outlined={outlined} data-variant={variant} {...p}>
<button type={type} data-width={fullWidth} data-outlined={outlined} data-variant={variant} {...p}>
{icon && <span data-icon="left">{icon}</span>}
<span data-text>{text}</span>
</button>
Expand Down Expand Up @@ -58,13 +67,17 @@ export const Button = styled(ButtonBase)`
&[data-outlined='true'] {
color: var(--local-shape-color);
background-color: transparent;
background: transparent;
svg > path {
fill: var(--local-shape-color);
}
}
&[data-width='true'] {
width: 100%;
}
[data-icon] {
--local-icon-size: var(--woly-line-height);
display: flex;
Expand Down
Loading

0 comments on commit 47c3853

Please sign in to comment.