diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css index 069921d5..0197e17c 100644 --- a/src/components/Button/Button.module.css +++ b/src/components/Button/Button.module.css @@ -20,12 +20,12 @@ .typePrimary:focus { outline: none; - box-shadow: 0 0 0 2px var(--color-primary-contrast); + box-shadow: 0 0 0 2px var(--color-focus); } .typeSecondary:focus { outline: none; - box-shadow: 0 0 0 2px var(--color-secondary-contrast); + box-shadow: 0 0 0 2px var(--color-focus); } .typePrimary, .typePrimary:active { diff --git a/src/theme.css b/src/theme.css index f95d5ce2..569984df 100644 --- a/src/theme.css +++ b/src/theme.css @@ -1,7 +1,9 @@ -:root { - /* ================== - Colors + /* ================== + Color Variables ================== */ + +:root { + --color-neutral-1: #ffffff; --color-neutral-2: #f4f4f4; --color-neutral-3: #ebebeb; @@ -12,31 +14,33 @@ --color-neutral-8: #2e2e2e; --color-neutral-9: #000000; - --color-error-1:#ffe2e2; + --color-error-1: #ffe2e2; --color-error-2: #eb3737; +} /* ================== Theme ================== */ +:root { + + /* Base colors */ --color-primary: var(--color-neutral-2); --color-primary-font: var(--color-neutral-8); - --color-primary-contrast: var(--color-neutral-3); - --color-primary-contrast-font: var(--color-neutral-8); --color-primary-hover: var(--color-neutral-3); --color-secondary: var(--color-neutral-1); --color-secondary-font: var(--color-neutral-8); - --color-secondary-contrast: var(--color-neutral-3); - --color-secondary-contrast-font: var(--color-neutral-8); --color-primary-hover: var(--color-neutral-2); --color-error: var(--color-error-2); - --color-error-contrast: var(--color-error-1); + --color-error-light: var(--color-error-1); --color-disabled: var(--color-neutral-2); --color-disabled-font: var(--color-neutral-5); + --color-focus: var(--color-neutral-3); + /* Font */ --font-family: Lato, sans-serif; --font-size: 14px;