From d8346579dddf773948e8bd466c6a5275bd2a7457 Mon Sep 17 00:00:00 2001 From: Alina Date: Thu, 14 Mar 2024 18:05:24 +0400 Subject: [PATCH 1/2] style: add new palette --- src/app/popup/styles.scss | 40 +++++++++++++++++++++++++++------------ 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/src/app/popup/styles.scss b/src/app/popup/styles.scss index 036a699..f340145 100644 --- a/src/app/popup/styles.scss +++ b/src/app/popup/styles.scss @@ -5,27 +5,43 @@ } * { - margin: 0; padding: 0; + margin: 0; font: inherit; } :root { - --spacing-1: 0.25rem; // 4px - --spacing-2: 0.5rem; // 8px - --spacing-3: 0.75rem; // 12px - --spacing-4: 1rem; // 16px - --spacing-5: 1.25rem; // 20px - --spacing-6: 1.5rem; // 24px - --spacing-7: 1.75rem; // 28px - + --spacing-1: 0.25rem; /* 4px */ + --spacing-2: 0.5rem; /* 8px */ + --spacing-3: 0.75rem; /* 12px */ + --spacing-4: 1rem; /* 16px */ + --spacing-5: 1.25rem; /* 20px */ + --spacing-6: 1.5rem; /* 24px */ + --spacing-7: 1.75rem; /* 28px */ --horizontal-space: var(--spacing-5); - - color-scheme: light dark; + --color-brand-100: #e8dffb; + --color-brand-500: #7e46ee; + --color-brand-700: #4816aa; + --color-brand-900: #3600a1; + --color-success-100: #dcfce7; + --color-success-700: #15803d; + --color-success-900: #365314; + --color-error-100: #fee2e2; + --color-error-700: #b91c1c; + --color-error-900: #7f1d1d; + --color-info-100: #dbeafe; + --color-info-700: #1d4ed8; + --color-info-900: #1e3a8a; + --color-neutral-100: #f4f6fa; + --color-neutral-700: #263248; + --color-neutral-900: #0b1524; + --radius-1: 0.25rem; + --outline: 3px; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - font-weight: 400; font-size: 1rem; + font-weight: 400; + color-scheme: light dark; } .h1, From af2ec9ab597f1e80de086ea2535f7a8582bdfd42 Mon Sep 17 00:00:00 2001 From: Alina Date: Thu, 14 Mar 2024 18:06:33 +0400 Subject: [PATCH 2/2] chore: add button component --- src/app/popup/styles.scss | 67 ++++++++++++----- src/shared/ui/Button/index.tsx | 35 +++++++++ src/shared/ui/Button/styles.module.scss | 96 +++++++++++++++++++++++++ 3 files changed, 182 insertions(+), 16 deletions(-) create mode 100644 src/shared/ui/Button/index.tsx create mode 100644 src/shared/ui/Button/styles.module.scss diff --git a/src/app/popup/styles.scss b/src/app/popup/styles.scss index f340145..07f6724 100644 --- a/src/app/popup/styles.scss +++ b/src/app/popup/styles.scss @@ -19,29 +19,64 @@ --spacing-6: 1.5rem; /* 24px */ --spacing-7: 1.75rem; /* 28px */ --horizontal-space: var(--spacing-5); - --color-brand-100: #e8dffb; - --color-brand-500: #7e46ee; - --color-brand-700: #4816aa; - --color-brand-900: #3600a1; - --color-success-100: #dcfce7; - --color-success-700: #15803d; - --color-success-900: #365314; + --radius-1: 0.25rem; + --outline: 3px; + --color-brand-50: #faf5ff; + --color-brand-100: #f3e8ff; + --color-brand-200: #e9d5ff; + --color-brand-300: #d8b4fe; + --color-brand-400: #c084fc; + --color-brand-500: #a855f7; + --color-brand-600: #9333ea; + --color-brand-700: #7e22ce; + --color-brand-800: #6b21a8; + --color-brand-900: #581c87; + --color-success-50: #f0fdfa; + --color-success-100: #ccfbf1; + --color-success-200: #99f6e4; + --color-success-300: #5eead4; + --color-success-400: #2dd4bf; + --color-success-500: #14b8a6; + --color-success-600: #0d9488; + --color-success-700: #0f766e; + --color-success-800: #115e59; + --color-success-900: #134e4a; + --color-error-50: #fef2f2; --color-error-100: #fee2e2; + --color-error-200: #fecaca; + --color-error-300: #fca5a5; + --color-error-400: #f87171; + --color-error-500: #ef4444; + --color-error-600: #dc2626; --color-error-700: #b91c1c; + --color-error-800: #991b1b; --color-error-900: #7f1d1d; - --color-info-100: #dbeafe; - --color-info-700: #1d4ed8; - --color-info-900: #1e3a8a; - --color-neutral-100: #f4f6fa; - --color-neutral-700: #263248; - --color-neutral-900: #0b1524; - --radius-1: 0.25rem; - --outline: 3px; + --color-info-50: #eef2ff; + --color-info-100: #e0e7ff; + --color-info-200: #c7d2fe; + --color-info-300: #a5b4fc; + --color-info-400: #818cf8; + --color-info-500: #6366f1; + --color-info-600: #4f46e5; + --color-info-700: #4338ca; + --color-info-800: #3730a3; + --color-info-900: #312e81; + --color-neutral-50: #fafafa; + --color-neutral-100: #f4f4f5; + --color-neutral-200: #e4e4e7; + --color-neutral-300: #d4d4d8; + --color-neutral-400: #a1a1aa; + --color-neutral-500: #71717a; + --color-neutral-600: #52525b; + --color-neutral-700: #3f3f46; + --color-neutral-800: #27272a; + --color-neutral-900: #18181b; + --color-text: var(--color-neutral-800); + --color-text-inverted: #fff; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 400; - color-scheme: light dark; } .h1, diff --git a/src/shared/ui/Button/index.tsx b/src/shared/ui/Button/index.tsx new file mode 100644 index 0000000..2f5af1f --- /dev/null +++ b/src/shared/ui/Button/index.tsx @@ -0,0 +1,35 @@ +import cn from 'classnames' +import { JSXInternal } from 'node_modules/preact/src/jsx' +import { ComponentChild } from 'preact' + +import styles from './styles.module.scss' + +interface Props extends JSXInternal.HTMLAttributes { + startIcon?: ComponentChild + endIcon?: ComponentChild + variant?: 'primary' | 'secondary' + color?: 'accent' | 'success' | 'error' | 'info' +} + +export const Button = ({ + children, + startIcon, + endIcon, + variant = 'primary', + color = 'accent', + ...rest +}: Props) => { + const buttonClass = cn( + styles.button, + styles[`button--variant-${variant}`], + styles[`button--color-${color}`], + ) + + return ( + + ) +} diff --git a/src/shared/ui/Button/styles.module.scss b/src/shared/ui/Button/styles.module.scss new file mode 100644 index 0000000..f2633a3 --- /dev/null +++ b/src/shared/ui/Button/styles.module.scss @@ -0,0 +1,96 @@ +.button { + display: flex; + gap: var(--spacing-1); + align-items: center; + padding: var(--spacing-2); + font-weight: 500; + cursor: pointer; + user-select: none; + border: 1px solid; + border-radius: var(--radius-1); + transition: border-color 0.25s; + + &:disabled { + cursor: not-allowed; + } + + &:focus, + &:focus-visible { + outline: var(--outline) solid; + } + + svg { + width: 1rem; + height: 1rem; + } + + &--variant { + &-primary { + color: var(--color-text-inverted); + background-color: var(--background); + border-color: var(--background); + + &:disabled { + background-color: var(--background-disabled); + border-color: var(--background-disabled); + } + + &:focus, + &:focus-visible { + border-color: var(--accent-color); + outline-color: var(--accent-color); + } + + &:hover:where(:not(:disabled)) { + border-color: var(--accent-color); + } + } + + &-secondary { + color: var(--accent-color); + background-color: transparent; + border-color: var(--accent-color); + + &:disabled { + color: var(--background-disabled); + border-color: var(--background-disabled); + } + + &:focus, + &:focus-visible { + border-color: var(--accent-color); + outline-color: var(--accent-color); + } + + &:hover:where(:not(:disabled)) { + border-color: var(--accent-color); + } + } + } + + &--color { + &-accent { + --background: var(--color-brand-500); + --background-disabled: var(--color-brand-300); + --accent-color: var(--color-brand-700); + } + + &-success { + --background: var(--color-success-500); + --background-disabled: var(--color-success-300); + --accent-color: var(--color-success-700); + } + + &-error { + --background: var(--color-error-500); + --background-disabled: var(--color-error-300); + --accent-color: var(--color-error-700); + } + + &-info { + --background: var(--color-info-500); + --background-disabled: var(--color-info-300); + --accent-color: var(--color-info-700); + } + } +}