diff options
Diffstat (limited to 'FrontEnd/src/views/common/theme.css')
| -rw-r--r-- | FrontEnd/src/views/common/theme.css | 113 |
1 files changed, 62 insertions, 51 deletions
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css index b3ca7485..a3f89cc5 100644 --- a/FrontEnd/src/views/common/theme.css +++ b/FrontEnd/src/views/common/theme.css @@ -19,6 +19,7 @@ /* common colors */ :root { --cru-background-color: #ffffff; + --cru-container-background-color: hsl(0, 0%, 97%); --cru-text-primary-color: #000000; --cru-text-secondary-color: #000000; } @@ -26,6 +27,7 @@ @media (prefers-color-scheme: dark) { :root { --cru-background-color: #000000; + --cru-container-background-color: hsl(0, 0%, 2%); --cru-text-primary-color: #ffffff; --cru-text-secondary-color: #ffffff; } @@ -35,71 +37,80 @@ --cru-body-background-color: var(--cru-background-color); } -/* button colors */ +/* clickable color */ :root { - --cru-button-primary-normal-color: var(--cru-primary-color); - --cru-button-primary-hover-color: hsl(210, 100%, 60%); - --cru-button-primary-focus-color: hsl(210, 100%, 60%); - --cru-button-primary-active-color: hsl(210, 100%, 70%); - --cru-button-secondary-normal-color: var(--cru-secondary-color); - --cru-button-secondary-hover-color: hsl(30, 100%, 60%); - --cru-button-secondary-focus-color: hsl(30, 100%, 60%); - --cru-button-secondary-active-color: hsl(30, 100%, 70%); - --cru-button-create-normal-color: var(--cru-create-color); - --cru-button-create-hover-color: hsl(120, 100%, 35%); - --cru-button-create-focus-color: hsl(120, 100%, 35%); - --cru-button-create-active-color: hsl(120, 100%, 35%); - --cru-button-danger-normal-color: var(--cru-danger-color); - --cru-button-danger-hover-color: hsl(0, 100%, 60%); - --cru-button-danger-focus-color: hsl(0, 100%, 60%); - --cru-button-danger-active-color: hsl(0, 100%, 70%); - --cru-button-disabled-color: hsl(0, 0%, 50%); - /* push button colors */ - --cru-push-button-text-color: #ffffff; - --cru-push-button-disabled-text-color: hsl(0, 0%, 80%); - /* flat button colors */ - --cru-flat-button-background-normal-color: #ffffff; - --cru-flat-button-background-hover-color: hsl(0, 0%, 90%); - --cru-flat-button-background-focus-color: hsl(0, 0%, 90%); - --cru-flat-button-background-active-color: hsl(0, 0%, 80%); + --cru-clickable-primary-normal-color: var(--cru-primary-color); + --cru-clickable-primary-hover-color: hsl(210, 100%, 60%); + --cru-clickable-primary-focus-color: hsl(210, 100%, 60%); + --cru-clickable-primary-active-color: hsl(210, 100%, 70%); + --cru-clickable-secondary-normal-color: var(--cru-secondary-color); + --cru-clickable-secondary-hover-color: hsl(30, 100%, 60%); + --cru-clickable-secondary-focus-color: hsl(30, 100%, 60%); + --cru-clickable-secondary-active-color: hsl(30, 100%, 70%); + --cru-clickable-create-normal-color: var(--cru-create-color); + --cru-clickable-create-hover-color: hsl(120, 100%, 35%); + --cru-clickable-create-focus-color: hsl(120, 100%, 35%); + --cru-clickable-create-active-color: hsl(120, 100%, 35%); + --cru-clickable-danger-normal-color: var(--cru-danger-color); + --cru-clickable-danger-hover-color: hsl(0, 100%, 60%); + --cru-clickable-danger-focus-color: hsl(0, 100%, 60%); + --cru-clickable-danger-active-color: hsl(0, 100%, 70%); + --cru-clickable-grayscale-normal-color: hsl(0, 0%, 100%); + --cru-clickable-grayscale-hover-color: hsl(0, 0%, 92%); + --cru-clickable-grayscale-focus-color: hsl(0, 0%, 92%); + --cru-clickable-grayscale-active-color: hsl(0, 0%, 88%); + --cru-clickable-disabled-color: hsl(0, 0%, 50%); } @media (prefers-color-scheme: dark) { :root { - /* flat button colors */ - --cru-flat-button-background-normal-color: #000000; - --cru-flat-button-background-hover-color: hsl(0, 0%, 20%); - --cru-flat-button-background-focus-color: hsl(0, 0%, 20%); - --cru-flat-button-background-active-color: hsl(0, 0%, 30%); + --cru-clickable-grayscale-normal-color: hsl(0, 0%, 0%); + --cru-clickable-grayscale-hover-color: hsl(0, 0%, 10%); + --cru-clickable-grayscale-focus-color: hsl(0, 0%, 10%); + --cru-clickable-grayscale-active-color: hsl(0, 0%, 20%); } } -.cru-button-primary { - --cru-button-normal-color: var(--cru-button-primary-normal-color); - --cru-button-hover-color: var(--cru-button-primary-hover-color); - --cru-button-focus-color: var(--cru-button-primary-focus-color); - --cru-button-active-color: var(--cru-button-primary-active-color); +.cru-clickable-primary { + --cru-clickable-normal-color: var(--cru-clickable-primary-normal-color); + --cru-clickable-hover-color: var(--cru-clickable-primary-hover-color); + --cru-clickable-focus-color: var(--cru-clickable-primary-focus-color); + --cru-clickable-active-color: var(--cru-clickable-primary-active-color); } -.cru-button-secondary { - --cru-button-normal-color: var(--cru-button-secondary-normal-color); - --cru-button-hover-color: var(--cru-button-secondary-hover-color); - --cru-button-focus-color: var(--cru-button-secondary-focus-color); - --cru-button-active-color: var(--cru-button-secondary-active-color); +.cru-clickable-secondary { + --cru-clickable-normal-color: var(--cru-clickable-secondary-normal-color); + --cru-clickable-hover-color: var(--cru-clickable-secondary-hover-color); + --cru-clickable-focus-color: var(--cru-clickable-secondary-focus-color); + --cru-clickable-active-color: var(--cru-clickable-secondary-active-color); } -.cru-button-create { - --cru-button-normal-color: var(--cru-button-create-normal-color); - --cru-button-hover-color: var(--cru-button-create-hover-color); - --cru-button-focus-color: var(--cru-button-create-focus-color); - --cru-button-active-color: var(--cru-button-create-active-color); +.cru-clickable-create { + --cru-clickable-normal-color: var(--cru-clickable-create-normal-color); + --cru-clickable-hover-color: var(--cru-clickable-create-hover-color); + --cru-clickable-focus-color: var(--cru-clickable-create-focus-color); + --cru-clickable-active-color: var(--cru-clickable-create-active-color); } -.cru-button-danger { - --cru-button-normal-color: var(--cru-button-danger-normal-color); - --cru-button-hover-color: var(--cru-button-danger-hover-color); - --cru-button-focus-color: var(--cru-button-danger-focus-color); - --cru-button-active-color: var(--cru-button-danger-active-color); +.cru-clickable-danger { + --cru-clickable-normal-color: var(--cru-clickable-danger-normal-color); + --cru-clickable-hover-color: var(--cru-clickable-danger-hover-color); + --cru-clickable-focus-color: var(--cru-clickable-danger-focus-color); + --cru-clickable-active-color: var(--cru-clickable-danger-active-color); +} + +.cru-clickable-grayscale { + --cru-clickable-normal-color: var(--cru-clickable-grayscale-normal-color); + --cru-clickable-hover-color: var(--cru-clickable-grayscale-hover-color); + --cru-clickable-focus-color: var(--cru-clickable-grayscale-focus-color); + --cru-clickable-active-color: var(--cru-clickable-grayscale-active-color); +} + +/* button colors */ +:root { + /* push button colors */ + --cru-push-button-text-color: #ffffff; + --cru-push-button-disabled-text-color: hsl(0, 0%, 80%); } /* Card colors */ |