Skip to content
Snippets Groups Projects
Commit ac0a00ab authored by Sverre Frogner Haugen's avatar Sverre Frogner Haugen
Browse files

Set up applcaiton color palles in base.css file

parent 5b4bd53d
No related branches found
No related tags found
1 merge request!2Set up applicaiton color pallets in base.css file
Pipeline #273489 passed
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-kellyGreen: #6AB40A;
--vt-c-kellyGreen-Light: #A4ED45;
--vt-c-borderGrey: #C1C1C1;
--vt-c-borderGreyDark: #a19f9f;
--vt-c-Raspberry: #E91658;
--vt-c-Orange: #FFA600;
--vt-c-Orange-Light: #FCBD47;
--vt-c-DarkBlue: #1600B2;
--vt-c-Grape: #8332AC;
--vt-c-Grey: #A4A4A6;
--vt-c-Grey-Light: #CCCCCF;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-1: var(--vt-c-black);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
......@@ -23,14 +29,39 @@
/* semantic color variables for this project */
:root {
--color-confirm-button: var(--vt-c-kellyGreen);
--color-cancel-button: var(--vt-c-Raspberry);
--color-buttonText: var(--vt-c-white);
--color-PathYetToTakeLight: var(--vt-c-Grey-Light);
--color-PathYetToTakeDark: var(--vt-c-Grey);
--color-PathCurrentLight: var(--vt-c-kellyGreen-Light);
--color-PathCurrentDark: var(--vt-c-kellyGreen);
--color-PathPreviousLight: var(--vt-c-Orange-Light);
--color-PathPreviousDark: var(--vt-c-Orange);
--color-PathLine: var(--vt-c-black);
--color-pieChartBlue: var(--vt-c-DarkBlue);
--color-pieChartRed: var(--vt-c-Raspberry);
--color-pieChartGreen: var(--vt-c-kellyGreen);
--color-pieChartOrange: var(--vt-c-Orange);
--color-header: var(--vt-c-kellyGreen);
--color-heading: var(--vt-c-kellyGreen);
--color-hamburgerMenu: var(--vt-c-white);
--color-emptyProgress: var(--vt-c-white);
--color-currentProgress: var(--vt-c-kellyGreen);
--color-sideBar: var(--vt-c-white);
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-border: var(--vt-c-borderGrey);
--color-border-hover: var(--vt-c-borderGreyDark);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
......@@ -38,15 +69,16 @@
@media (prefers-color-scheme: dark) {
:root {
--color-PathLine: var(--vt-c-white);
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-border: var(--vt-c-borderGrey);
--color-border-hover: var(--vt-c-borderGreyDark);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
--color-text: var(--vt-c-text-dark-1);
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment