mirror of https://github.com/portainer/portainer
refactor(app): use colors with tailwind [EE-3601] (#7133)
* refactor(app): use colors with tailwindpull/7134/head
Chaim Lev-Ari
GitHub
parent
95f706aabe
commit
cd19eb036b
|
|
@ -241,9 +241,10 @@ a[ng-click] {
|
|||
}
|
||||
|
||||
.blocklist-item:hover {
|
||||
@apply border border-blue-7;
|
||||
|
||||
background-color: var(--bg-blocklist-hover-color);
|
||||
color: var(--text-blocklist-hover-color);
|
||||
border: 1px solid var(--ui-blue-4);
|
||||
}
|
||||
|
||||
.blocklist-item-box {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--ui-blue-1);
|
||||
background-color: var(--ui-blue-8);
|
||||
}
|
||||
|
||||
.btn-primary:hover,
|
||||
|
|
@ -20,11 +20,11 @@
|
|||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: var(--ui-red-1);
|
||||
background-color: var(--ui-error-8);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: var(--ui-green-1);
|
||||
background-color: var(--ui-success-7);
|
||||
}
|
||||
|
||||
/* Toggle switch */
|
||||
|
|
@ -68,11 +68,11 @@
|
|||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--ui-blue-1);
|
||||
background-color: var(--ui-blue-8);
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px var(--ui-blue-1);
|
||||
box-shadow: 0 0 1px var(--ui-blue-8);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
|
|
@ -102,9 +102,9 @@ input:checked + .slider:before {
|
|||
}
|
||||
|
||||
.md-checkbox input[type='checkbox']:checked + label:before {
|
||||
background-color: var(--ui-blue-1) !important;
|
||||
color: var(--ui-blue-1) !important;
|
||||
border: 1px solid var(--ui-blue-1) !important;
|
||||
background-color: var(--ui-blue-8) !important;
|
||||
color: var(--ui-blue-8) !important;
|
||||
border: 1px solid var(--ui-blue-8) !important;
|
||||
}
|
||||
|
||||
.md-checkbox input[type='checkbox']:checked + .checkmark {
|
||||
|
|
@ -116,20 +116,20 @@ input:checked + .slider:before {
|
|||
|
||||
.rzslider .rz-pointer {
|
||||
background-color: var(--white-color);
|
||||
border: 3px solid var(--ui-blue-1);
|
||||
border: 3px solid var(--ui-blue-8);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.rzslider .rz-bar {
|
||||
background-color: var(--ui-grey-1);
|
||||
background-color: var(--ui-gray-5);
|
||||
height: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.rzslider .rz-selection {
|
||||
background-color: var(--ui-blue-1);
|
||||
background-color: var(--ui-blue-8);
|
||||
}
|
||||
|
||||
.rzslider .rz-pointer:after {
|
||||
|
|
@ -205,7 +205,7 @@ input:checked + .slider:before {
|
|||
/* Widget */
|
||||
|
||||
.widget .widget-icon i {
|
||||
color: var(--ui-blue-1);
|
||||
color: var(--ui-blue-8);
|
||||
}
|
||||
|
||||
.widget .widget-body table thead {
|
||||
|
|
@ -245,9 +245,9 @@ input:checked + .slider:before {
|
|||
}
|
||||
|
||||
.btn-group .btn-dangerlight {
|
||||
background-color: var(--ui-red-2);
|
||||
background-color: var(--ui-error-2);
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--ui-red-1);
|
||||
color: var(--ui-error-8);
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
|
|
@ -271,17 +271,17 @@ input:checked + .slider:before {
|
|||
}
|
||||
|
||||
.toast-success .toast-progress {
|
||||
background-color: var(--ui-green-1);
|
||||
background-color: var(--ui-success-7);
|
||||
}
|
||||
.toast-warning .toast-progress {
|
||||
background-color: var(--ui-yellow);
|
||||
background-color: var(--ui-warning-6);
|
||||
}
|
||||
.toast-error .toast-progress {
|
||||
background-color: var(--ui-red-1);
|
||||
background-color: var(--ui-error-8);
|
||||
}
|
||||
|
||||
#toast-container > div {
|
||||
color: var(--ui-grey-4);
|
||||
color: var(--ui-gray-7);
|
||||
background-color: var(--white-color);
|
||||
border-radius: 8px;
|
||||
padding: 20px 20px 20px 80px;
|
||||
|
|
@ -292,9 +292,9 @@ input:checked + .slider:before {
|
|||
}
|
||||
|
||||
#toast-container > div:hover {
|
||||
-moz-box-shadow: 0 0 12px var(--ui-grey-4);
|
||||
-webkit-box-shadow: 0 0 12px var(--ui-grey-4);
|
||||
box-shadow: 0 0 12px var(--ui-grey-4);
|
||||
-moz-box-shadow: 0 0 12px var(--ui-gray-7);
|
||||
-webkit-box-shadow: 0 0 12px var(--ui-gray-7);
|
||||
box-shadow: 0 0 12px var(--ui-gray-7);
|
||||
}
|
||||
|
||||
.toast-close-button {
|
||||
|
|
@ -382,17 +382,17 @@ input:checked + .slider:before {
|
|||
background: var(--ui-blue-3) !important;
|
||||
color: black !important;
|
||||
border-radius: 8px;
|
||||
border-color: var(--ui-blue-4);
|
||||
border-color: var(--ui-blue-7);
|
||||
padding: 15px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.boxselector_wrapper input[type='radio']:not(:disabled) + label,
|
||||
.box-selector-item input[type='radio']:not(:disabled) + label {
|
||||
background: var(--ui-grey-2);
|
||||
background: var(--ui-gray-2);
|
||||
color: var(--black-color) !important;
|
||||
border-radius: 8px;
|
||||
border-color: var(--ui-grey-1);
|
||||
border-color: var(--ui-gray-5);
|
||||
padding: 15px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -449,11 +449,11 @@ input:checked + .slider:before {
|
|||
}
|
||||
|
||||
.label-danger {
|
||||
background-color: var(--ui-red-1);
|
||||
background-color: var(--ui-error-8);
|
||||
}
|
||||
|
||||
.label-success {
|
||||
background-color: var(--ui-green-1);
|
||||
background-color: var(--ui-success-7);
|
||||
}
|
||||
|
||||
/* Feather Icon */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,355 @@
|
|||
{
|
||||
"black": "#000000",
|
||||
"white": "#ffffff",
|
||||
"gray": {
|
||||
"1": "#fcfcfd",
|
||||
"2": "#f9fafb",
|
||||
"3": "#f2f4f7",
|
||||
"4": "#eaecf0",
|
||||
"5": "#d0d5dd",
|
||||
"6": "#98a2b3",
|
||||
"7": "#667085",
|
||||
"8": "#475467",
|
||||
"9": "#344054",
|
||||
"10": "#1d2939",
|
||||
"11": "#101828"
|
||||
},
|
||||
"blue": {
|
||||
"1": "#f5fbff",
|
||||
"2": "#f0f9ff",
|
||||
"3": "#e0f2fe",
|
||||
"4": "#b9e6fe",
|
||||
"5": "#7cd4fd",
|
||||
"6": "#36bffa",
|
||||
"7": "#0ba5ec",
|
||||
"8": "#0086c9",
|
||||
"9": "#026aa2",
|
||||
"10": "#065986",
|
||||
"11": "#0b4a6f"
|
||||
},
|
||||
"error": {
|
||||
"1": "#fffbfa",
|
||||
"2": "#fef3f2",
|
||||
"3": "#fee4e2",
|
||||
"4": "#fecdca",
|
||||
"5": "#fda29b",
|
||||
"6": "#f97066",
|
||||
"7": "#f04438",
|
||||
"8": "#d92d20",
|
||||
"9": "#b42318",
|
||||
"10": "#912018",
|
||||
"11": "#7a271a"
|
||||
},
|
||||
"warning": {
|
||||
"1": "#fffcf5",
|
||||
"2": "#fffaeb",
|
||||
"3": "#fef0c7",
|
||||
"4": "#fedf89",
|
||||
"5": "#fec84b",
|
||||
"6": "#fdb022",
|
||||
"7": "#f79009",
|
||||
"8": "#dc6803",
|
||||
"9": "#b54708",
|
||||
"10": "#93370d",
|
||||
"11": "#7a2e0e"
|
||||
},
|
||||
"success": {
|
||||
"1": "#f6fef9",
|
||||
"2": "#ecfdf3",
|
||||
"3": "#d1fadf",
|
||||
"4": "#a6f4c5",
|
||||
"5": "#6ce9a6",
|
||||
"6": "#32d583",
|
||||
"7": "#12b76a",
|
||||
"8": "#039855",
|
||||
"9": "#027a48",
|
||||
"10": "#05603a",
|
||||
"11": "#054f31"
|
||||
},
|
||||
"gray-blue": {
|
||||
"1": "#fcfcfd",
|
||||
"2": "#f8f9fc",
|
||||
"3": "#eaecf5",
|
||||
"4": "#d5d9eb",
|
||||
"5": "#b3b8db",
|
||||
"6": "#717bbc",
|
||||
"7": "#4e5ba6",
|
||||
"8": "#3e4784",
|
||||
"9": "#363f72",
|
||||
"10": "#293056",
|
||||
"11": "#293056"
|
||||
},
|
||||
"gray-cool": {
|
||||
"1": "#fcfcfd",
|
||||
"2": "#f9f9fb",
|
||||
"3": "#eff1f5",
|
||||
"4": "#dcdfea",
|
||||
"5": "#b9c0d4",
|
||||
"6": "#7d89b0",
|
||||
"7": "#5d6b98",
|
||||
"8": "#4a5578",
|
||||
"9": "#404968",
|
||||
"10": "#30374f",
|
||||
"11": "#111322"
|
||||
},
|
||||
"gray-modern": {
|
||||
"1": "#fcfcfd",
|
||||
"2": "#f8fafc",
|
||||
"3": "#eef2f6",
|
||||
"4": "#e3e8ef",
|
||||
"5": "#cdd5df",
|
||||
"6": "#9aa4b2",
|
||||
"7": "#697586",
|
||||
"8": "#4b5565",
|
||||
"9": "#364152",
|
||||
"10": "#202939",
|
||||
"11": "#121926"
|
||||
},
|
||||
"gray-neutral": {
|
||||
"1": "#fcfcfd",
|
||||
"2": "#f9fafb",
|
||||
"3": "#f3f4f6",
|
||||
"4": "#e5e7eb",
|
||||
"5": "#d2d6db",
|
||||
"6": "#9da4ae",
|
||||
"7": "#6c737f",
|
||||
"8": "#4d5761",
|
||||
"9": "#384250",
|
||||
"10": "#1f2a37",
|
||||
"11": "#111927"
|
||||
},
|
||||
"gray-iron": {
|
||||
"1": "#fcfcfc",
|
||||
"2": "#fafafa",
|
||||
"3": "#f4f4f5",
|
||||
"4": "#e4e4e7",
|
||||
"5": "#d1d1d6",
|
||||
"6": "#d1d1d6",
|
||||
"7": "#70707b",
|
||||
"8": "#51525c",
|
||||
"9": "#3f3f46",
|
||||
"10": "#26272b",
|
||||
"11": "#18181b"
|
||||
},
|
||||
"gray-true": {
|
||||
"1": "#fcfcfc",
|
||||
"2": "#fafafa",
|
||||
"3": "#f5f5f5",
|
||||
"4": "#e5e5e5",
|
||||
"5": "#d6d6d6",
|
||||
"6": "#a3a3a3",
|
||||
"7": "#737373",
|
||||
"8": "#525252",
|
||||
"9": "#424242",
|
||||
"10": "#292929",
|
||||
"11": "#141414"
|
||||
},
|
||||
"gray-warm": {
|
||||
"1": "#fdfdfc",
|
||||
"2": "#fafaf9",
|
||||
"3": "#f5f5f4",
|
||||
"4": "#e7e5e4",
|
||||
"5": "#d7d3d0",
|
||||
"6": "#d7d3d0",
|
||||
"7": "#79716b",
|
||||
"8": "#57534e",
|
||||
"9": "#44403c",
|
||||
"10": "#292524",
|
||||
"11": "#1c1917"
|
||||
},
|
||||
"moss": {
|
||||
"1": "#fafdf7",
|
||||
"2": "#f5fbee",
|
||||
"3": "#e6f4d7",
|
||||
"4": "#ceeab0",
|
||||
"5": "#acdc79",
|
||||
"6": "#86cb3c",
|
||||
"7": "#669f2a",
|
||||
"8": "#4f7a21",
|
||||
"9": "#3f621a",
|
||||
"10": "#335015",
|
||||
"11": "#2b4212"
|
||||
},
|
||||
"green-light": {
|
||||
"1": "#fafef5",
|
||||
"2": "#f3fee7",
|
||||
"3": "#e4fbcc",
|
||||
"4": "#d0f8ab",
|
||||
"5": "#a6ef67",
|
||||
"6": "#85e13a",
|
||||
"7": "#66c61c",
|
||||
"8": "#4ca30d",
|
||||
"9": "#3b7c0f",
|
||||
"10": "#326212",
|
||||
"11": "#2b5314"
|
||||
},
|
||||
"green": {
|
||||
"1": "#f6fef9",
|
||||
"2": "#edfcf2",
|
||||
"3": "#d3f8df",
|
||||
"4": "#aaf0c4",
|
||||
"5": "#73e2a3",
|
||||
"6": "#73e2a3",
|
||||
"7": "#16b364",
|
||||
"8": "#099250",
|
||||
"9": "#087443",
|
||||
"10": "#095c37",
|
||||
"11": "#084c2e"
|
||||
},
|
||||
"teal": {
|
||||
"1": "#f6fefc",
|
||||
"2": "#f0fdf9",
|
||||
"3": "#ccfbef",
|
||||
"4": "#99f6e0",
|
||||
"5": "#5fe9d0",
|
||||
"6": "#2ed3b7",
|
||||
"7": "#15b79e",
|
||||
"8": "#0e9384",
|
||||
"9": "#107569",
|
||||
"10": "#125d56",
|
||||
"11": "#134e48"
|
||||
},
|
||||
"cyan": {
|
||||
"1": "#f5feff",
|
||||
"2": "#ecfdff",
|
||||
"3": "#cff9fe",
|
||||
"4": "#a5f0fc",
|
||||
"5": "#67e3f9",
|
||||
"6": "#22ccee",
|
||||
"7": "#06aed4",
|
||||
"8": "#088ab2",
|
||||
"9": "#0e7090",
|
||||
"10": "#155b75",
|
||||
"11": "#164c63"
|
||||
},
|
||||
"blue-dark": {
|
||||
"1": "#f5f8ff",
|
||||
"2": "#eff4ff",
|
||||
"3": "#d1e0ff",
|
||||
"4": "#b2ccff",
|
||||
"5": "#84adff",
|
||||
"6": "#528bff",
|
||||
"7": "#2970ff",
|
||||
"8": "#155eef",
|
||||
"9": "#004eeb",
|
||||
"10": "#0040c1",
|
||||
"11": "#00359e"
|
||||
},
|
||||
"indigo": {
|
||||
"1": "#f5f8ff",
|
||||
"2": "#eef4ff",
|
||||
"3": "#e0eaff",
|
||||
"4": "#c7d7fe",
|
||||
"5": "#a4bcfd",
|
||||
"6": "#8098f9",
|
||||
"7": "#8098f9",
|
||||
"8": "#444ce7",
|
||||
"9": "#3538cd",
|
||||
"10": "#2d31a6",
|
||||
"11": "#2d3282"
|
||||
},
|
||||
"violet": {
|
||||
"1": "#fbfaff",
|
||||
"2": "#f5f3ff",
|
||||
"3": "#ece9fe",
|
||||
"4": "#ddd6fe",
|
||||
"5": "#c3b5fd",
|
||||
"6": "#a48afb",
|
||||
"7": "#875bf7",
|
||||
"8": "#7839ee",
|
||||
"9": "#6927da",
|
||||
"10": "#5720b7",
|
||||
"11": "#491c96"
|
||||
},
|
||||
"purple": {
|
||||
"1": "#fafaff",
|
||||
"2": "#f4f3ff",
|
||||
"3": "#ebe9fe",
|
||||
"4": "#d9d6fe",
|
||||
"5": "#bdb4fe",
|
||||
"6": "#9b8afb",
|
||||
"7": "#7a5af8",
|
||||
"8": "#6938ef",
|
||||
"9": "#5925dc",
|
||||
"10": "#4a1fb8",
|
||||
"11": "#3e1c96"
|
||||
},
|
||||
"fuchsia": {
|
||||
"1": "#fefaff",
|
||||
"2": "#fdf4ff",
|
||||
"3": "#fbe8ff",
|
||||
"4": "#f6d0fe",
|
||||
"5": "#eeaafd",
|
||||
"6": "#e478fa",
|
||||
"7": "#d444f1",
|
||||
"8": "#ba24d5",
|
||||
"9": "#9f1ab1",
|
||||
"10": "#821890",
|
||||
"11": "#6f1877"
|
||||
},
|
||||
"pink": {
|
||||
"1": "#fef6fb",
|
||||
"2": "#fdf2fa",
|
||||
"3": "#fce7f6",
|
||||
"4": "#fce7f6",
|
||||
"5": "#faa7e0",
|
||||
"6": "#f670c7",
|
||||
"7": "#ee46bc",
|
||||
"8": "#dd2590",
|
||||
"9": "#c11574",
|
||||
"10": "#9e165f",
|
||||
"11": "#851651"
|
||||
},
|
||||
"rose": {
|
||||
"1": "#fff5f6",
|
||||
"2": "#fff1f3",
|
||||
"3": "#ffe4e8",
|
||||
"4": "#fecdd6",
|
||||
"5": "#fea3b4",
|
||||
"6": "#fd6f8e",
|
||||
"7": "#f63d68",
|
||||
"8": "#e31b54",
|
||||
"9": "#c01048",
|
||||
"10": "#a11043",
|
||||
"11": "#89123e"
|
||||
},
|
||||
"orange-dark": {
|
||||
"1": "#fff9f5",
|
||||
"2": "#fff4ed",
|
||||
"3": "#ffe6d5",
|
||||
"4": "#ffd6ae",
|
||||
"5": "#ff9c66",
|
||||
"6": "#ff692e",
|
||||
"7": "#ff4405",
|
||||
"8": "#e62e05",
|
||||
"9": "#bc1b06",
|
||||
"10": "#97180c",
|
||||
"11": "#771a0d"
|
||||
},
|
||||
"orange": {
|
||||
"1": "#fefaf5",
|
||||
"2": "#fef6ee",
|
||||
"3": "#fdead7",
|
||||
"4": "#f9dbaf",
|
||||
"5": "#f7b27a",
|
||||
"6": "#f38744",
|
||||
"7": "#ef6820",
|
||||
"8": "#e04f16",
|
||||
"9": "#b93815",
|
||||
"10": "#932f19",
|
||||
"11": "#772917"
|
||||
},
|
||||
"yellow": {
|
||||
"1": "#fefdf0",
|
||||
"2": "#fefbe8",
|
||||
"3": "#fef7c3",
|
||||
"4": "#feee95",
|
||||
"5": "#feee95",
|
||||
"6": "#fac515",
|
||||
"7": "#eaaa08",
|
||||
"8": "#ca8504",
|
||||
"9": "#a15c07",
|
||||
"10": "#854a0e",
|
||||
"11": "#713b12"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import colors from './colors.json';
|
||||
|
||||
const element = document.createElement('style');
|
||||
|
||||
element.innerHTML = `:root {
|
||||
${Object.entries(colors)
|
||||
.map(([color, hex]) => `--ui-${color}: ${hex}`)
|
||||
.join(';\n')}
|
||||
}`;
|
||||
|
||||
document.head.prepend(element);
|
||||
|
|
@ -15,6 +15,8 @@ import 'angular-multiselect/isteven-multi-select.css';
|
|||
import 'spinkit/spinkit.min.css';
|
||||
import '@reach/menu-button/styles.css';
|
||||
|
||||
import './colors';
|
||||
|
||||
import './rdash.css';
|
||||
import './app.css';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,7 @@
|
|||
/* Color Variable */
|
||||
:root {
|
||||
--ui-blue-1: #0086c9;
|
||||
--ui-blue-2: #026aa2;
|
||||
--ui-blue-3: #e0f2fe;
|
||||
--ui-blue-4: #0ba5ec;
|
||||
--ui-red-1: #d92d20;
|
||||
--ui-red-2: #fef3f2;
|
||||
--ui-green-1: #12b76a;
|
||||
--ui-yellow: #fdb022;
|
||||
--ui-grey-1: #d0d5dd;
|
||||
--ui-grey-2: #f9fafb;
|
||||
--ui-grey-3: #344054;
|
||||
--ui-grey-4: #667085;
|
||||
--ui-grey-5: #101828;
|
||||
--ui-grey-6: #f2f4f7;
|
||||
|
||||
--black-color: #000;
|
||||
--white-color: #fff;
|
||||
--black-color: var(--ui-black);
|
||||
--white-color: var(--ui-white);
|
||||
|
||||
--grey-1: #212121;
|
||||
--grey-2: #181818;
|
||||
|
|
@ -68,7 +53,6 @@
|
|||
--grey-49: rgba(0, 0, 0, 0.54);
|
||||
--grey-50: rgba(161, 170, 166, 0.5);
|
||||
--grey-51: rgba(0, 0, 0, 0.15);
|
||||
--grey-52: rgba(255, 255, 255, 0.3);
|
||||
--grey-53: rgba(255, 255, 255, 0.6);
|
||||
--grey-54: rgb(54, 54, 54);
|
||||
--grey-55: rgba(255, 255, 255, 0.8);
|
||||
|
|
@ -91,7 +75,6 @@
|
|||
--blue-10: #61b6ff;
|
||||
--blue-11: #3ea5ff;
|
||||
--blue-12: #41a6ff;
|
||||
--blue-13: #2361ae;
|
||||
--blue-14: #357ebd;
|
||||
|
||||
--red-1: #a94442;
|
||||
|
|
@ -99,7 +82,6 @@
|
|||
--red-3: #a11;
|
||||
--red-4: #d9534f;
|
||||
--red-5: #ff2727;
|
||||
--red-6: #ff00e0;
|
||||
--red-7: #f00;
|
||||
|
||||
--green-1: #164;
|
||||
|
|
@ -121,8 +103,8 @@
|
|||
--bg-widget-table-color: var(--grey-13);
|
||||
--bg-header-color: var(--white-color);
|
||||
--bg-hover-table-color: var(--grey-14);
|
||||
--bg-switch-box-color: var(--ui-grey-1);
|
||||
--bg-input-group-addon-color: var(--ui-grey-6);
|
||||
--bg-switch-box-color: var(--ui-gray-5);
|
||||
--bg-input-group-addon-color: var(--ui-gray-3);
|
||||
--bg-btn-default-color: var(--white-color);
|
||||
--bg-blocklist-hover-color: var(--ui-blue-3);
|
||||
--bg-boxselector-color: var(--white-color);
|
||||
|
|
@ -154,7 +136,7 @@
|
|||
--bg-panel-body-color: var(--white-color);
|
||||
--bg-codemirror-color: var(--white-color);
|
||||
--bg-codemirror-selected-color: var(--grey-22);
|
||||
--bg-tooltip-color: var(--ui-grey-5);
|
||||
--bg-tooltip-color: var(--ui-gray-11);
|
||||
--bg-input-sm-color: var(--white-color);
|
||||
--bg-service-datatable-thead: var(--grey-23);
|
||||
--bg-app-datatable-thead: var(--grey-23);
|
||||
|
|
@ -181,9 +163,9 @@
|
|||
--bg-stepper-item-counter: var(--grey-61);
|
||||
--bg-sortbutton-color: var(--white-color);
|
||||
--bg-dashboard-item: var(--ui-blue-3);
|
||||
--bg-searchbar: var(--ui-grey-2);
|
||||
--bg-inputbox: var(--ui-grey-2);
|
||||
--bg-dropdown-hover: var(--ui-grey-6);
|
||||
--bg-searchbar: var(--ui-gray-2);
|
||||
--bg-inputbox: var(--ui-gray-2);
|
||||
--bg-dropdown-hover: var(--ui-gray-3);
|
||||
|
||||
--text-main-color: var(--grey-7);
|
||||
--text-body-color: var(--grey-6);
|
||||
|
|
@ -215,7 +197,7 @@
|
|||
--text-blocklist-item-selected-color: var(--grey-37);
|
||||
--text-progress-bar-color: var(--grey-27);
|
||||
--text-pagination-color: var(--grey-26);
|
||||
--text-pagination-span-color: var(--ui-grey-6);
|
||||
--text-pagination-span-color: var(--ui-gray-3);
|
||||
--text-pagination-span-hover-color: var(--blue-4);
|
||||
--text-ui-select-color: var(--grey-6);
|
||||
--text-ui-select-hover-color: var(--grey-28);
|
||||
|
|
@ -229,7 +211,7 @@
|
|||
--text-input-autofill-color: var(--black-color);
|
||||
--text-button-hover-color: var(--grey-6);
|
||||
--text-small-select-color: var(--grey-25);
|
||||
--text-bootbox: var(--ui-grey-4);
|
||||
--text-bootbox: var(--ui-gray-7);
|
||||
|
||||
--border-color: var(--grey-42);
|
||||
--border-widget-color: var(--grey-43);
|
||||
|
|
@ -264,9 +246,9 @@
|
|||
--border-tooltip-color: var(--grey-47);
|
||||
--border-modal: 0px;
|
||||
--border-sortbutton: var(--grey-8);
|
||||
--border-bootbox: var(--ui-grey-1);
|
||||
--border-blocklist: var(--ui-grey-1);
|
||||
--border-widget: var(--ui-grey-1);
|
||||
--border-bootbox: var(--ui-gray-5);
|
||||
--border-blocklist: var(--ui-gray-5);
|
||||
--border-widget: var(--ui-gray-5);
|
||||
|
||||
--shadow-box-color: 0 3px 10px -2px var(--grey-50);
|
||||
--shadow-boxselector-color: 0 3px 10px -2px var(--grey-50);
|
||||
|
|
@ -288,12 +270,12 @@
|
|||
--bg-multiselect-helpercontainer: var(--white-color);
|
||||
--text-input-textarea: var(--white-color);
|
||||
|
||||
--border-checkbox: var(--ui-grey-1);
|
||||
--border-checkbox: var(--ui-gray-5);
|
||||
--bg-checkbox: var(--white-color);
|
||||
--border-searchbar: var(--ui-grey-1);
|
||||
--border-searchbar: var(--ui-gray-5);
|
||||
--bg-button-group: var(--white-color);
|
||||
--border-button-group: var(--ui-grey-1);
|
||||
--text-button-group: var(--ui-grey-3);
|
||||
--border-button-group: var(--ui-gray-5);
|
||||
--text-button-group: var(--ui-gray-9);
|
||||
}
|
||||
|
||||
:root[theme='dark'] {
|
||||
|
|
@ -396,7 +378,7 @@
|
|||
--text-blocklist-item-selected-color: var(--white-color);
|
||||
--text-progress-bar-color: var(--white-color);
|
||||
--text-pagination-color: var(--white-color);
|
||||
--text-pagination-span-color: var(--ui-grey-6);
|
||||
--text-pagination-span-color: var(--ui-gray-3);
|
||||
--text-pagination-span-hover-color: var(--white-color);
|
||||
--text-ui-select-color: var(--white-color);
|
||||
--text-ui-select-hover-color: var(--white-color);
|
||||
|
|
@ -446,9 +428,9 @@
|
|||
--border-tooltip-color: var(--grey-3);
|
||||
--border-modal: 0px;
|
||||
--border-sortbutton: var(--grey-3);
|
||||
--border-bootbox: var(--ui-grey-3);
|
||||
--border-blocklist: var(--ui-grey-3);
|
||||
--border-widget: var(--ui-grey-3);
|
||||
--border-bootbox: var(--ui-gray-9);
|
||||
--border-blocklist: var(--ui-gray-9);
|
||||
--border-widget: var(--ui-gray-9);
|
||||
|
||||
--blue-color: var(--blue-2);
|
||||
--button-close-color: var(--white-color);
|
||||
|
|
@ -468,12 +450,12 @@
|
|||
--bg-multiselect-helpercontainer: var(--grey-1);
|
||||
--text-input-textarea: var(--grey-1);
|
||||
|
||||
--border-checkbox: var(--ui-grey-1);
|
||||
--border-checkbox: var(--ui-gray-5);
|
||||
--bg-checkbox: var(--white-color);
|
||||
--border-searchbar: var(--ui-grey-1);
|
||||
--border-searchbar: var(--ui-gray-5);
|
||||
--bg-button-group: var(--white-color);
|
||||
--border-button-group: var(--ui-grey-1);
|
||||
--text-button-group: var(--ui-grey-3);
|
||||
--border-button-group: var(--ui-gray-5);
|
||||
--text-button-group: var(--ui-gray-9);
|
||||
}
|
||||
|
||||
:root[theme='highcontrast'] {
|
||||
|
|
@ -586,7 +568,7 @@
|
|||
--text-btn-default-color: var(--white-color);
|
||||
--text-small-select-color: var(--white-color);
|
||||
--text-multiselect-item-color: var(--white-color);
|
||||
--text-pagination-span-color: var(--ui-grey-6);
|
||||
--text-pagination-span-color: var(--ui-gray-3);
|
||||
--text-bootbox: var(--white-color);
|
||||
|
||||
--border-color: var(--grey-55);
|
||||
|
|
@ -640,10 +622,10 @@
|
|||
--text-cm-string-color: var(--red-7);
|
||||
--text-progress-bar-color: var(--black-color);
|
||||
|
||||
--border-checkbox: var(--ui-grey-1);
|
||||
--border-checkbox: var(--ui-gray-5);
|
||||
--bg-checkbox: var(--white-color);
|
||||
--border-searchbar: var(--ui-grey-1);
|
||||
--border-searchbar: var(--ui-gray-5);
|
||||
--bg-button-group: var(--white-color);
|
||||
--border-button-group: var(--ui-grey-1);
|
||||
--text-button-group: var(--ui-grey-3);
|
||||
--border-button-group: var(--ui-gray-5);
|
||||
--text-button-group: var(--ui-gray-9);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
.datatable .toolBar .setting-active {
|
||||
color: var(--ui-blue-4);
|
||||
@apply text-blue-7;
|
||||
}
|
||||
|
||||
.datatable .searchBar {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
.menu-list {
|
||||
background: var(--bg-dropdown-menu-color);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--ui-grey-1) !important;
|
||||
border: 1px solid var(--ui-gray-5) !important;
|
||||
width: 180px;
|
||||
padding: 5px !important;
|
||||
box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
|
||||
|
|
|
|||
|
|
@ -64,8 +64,8 @@
|
|||
.pagination > .active > a:focus,
|
||||
.pagination > .active > span:focus,
|
||||
.pagination > .active > button:focus {
|
||||
@apply text-blue-7;
|
||||
z-index: 3;
|
||||
color: #1d2939;
|
||||
cursor: default;
|
||||
background-color: var(--text-pagination-span-color);
|
||||
border-color: var(--text-pagination-span-color);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
const plugin = require('tailwindcss/plugin');
|
||||
const colors = require('./app/assets/css/colors.json');
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./app/**/*.{html,tsx}'],
|
||||
corePlugins: {
|
||||
|
|
@ -7,94 +11,20 @@ module.exports = {
|
|||
colors: {
|
||||
transparent: 'transparent',
|
||||
current: 'currentColor',
|
||||
white: 'var(--white-color)',
|
||||
black: 'var(--black-color)',
|
||||
'grey-1': 'var(--grey-1)',
|
||||
'grey-2': 'var(--grey-2)',
|
||||
'grey-3': 'var(--grey-3)',
|
||||
'grey-4': 'var(--grey-4)',
|
||||
'grey-5': 'var(--grey-5)',
|
||||
'grey-6': 'var(--grey-6)',
|
||||
'grey-7': 'var(--grey-7)',
|
||||
'grey-8': 'var(--grey-8)',
|
||||
'grey-9': 'var(--grey-9)',
|
||||
'grey-10': 'var(--grey-10)',
|
||||
'grey-11': 'var(--grey-11)',
|
||||
'grey-12': 'var(--grey-12)',
|
||||
'grey-13': 'var(--grey-13)',
|
||||
'grey-14': 'var(--grey-14)',
|
||||
'grey-15': 'var(--grey-15)',
|
||||
'grey-16': 'var(--grey-16)',
|
||||
'grey-17': 'var(--grey-17)',
|
||||
'grey-18': 'var(--grey-18)',
|
||||
'grey-19': 'var(--grey-19)',
|
||||
'grey-20': 'var(--grey-20)',
|
||||
'grey-21': 'var(--grey-21)',
|
||||
'grey-22': 'var(--grey-22)',
|
||||
'grey-23': 'var(--grey-23)',
|
||||
'grey-24': 'var(--grey-24)',
|
||||
'grey-25': 'var(--grey-25)',
|
||||
'grey-26': 'var(--grey-26)',
|
||||
'grey-27': 'var(--grey-27)',
|
||||
'grey-28': 'var(--grey-28)',
|
||||
'grey-29': 'var(--grey-29)',
|
||||
'grey-30': 'var(--grey-30)',
|
||||
'grey-31': 'var(--grey-31)',
|
||||
'grey-32': 'var(--grey-32)',
|
||||
'grey-33': 'var(--grey-33)',
|
||||
'grey-34': 'var(--grey-34)',
|
||||
'grey-35': 'var(--grey-35)',
|
||||
'grey-36': 'var(--grey-36)',
|
||||
'grey-37': 'var(--grey-37)',
|
||||
'grey-38': 'var(--grey-38)',
|
||||
'grey-39': 'var(--grey-39)',
|
||||
'grey-40': 'var(--grey-40)',
|
||||
'grey-41': 'var(--grey-41)',
|
||||
'grey-42': 'var(--grey-42)',
|
||||
'grey-43': 'var(--grey-43)',
|
||||
'grey-44': 'var(--grey-44)',
|
||||
'grey-45': 'var(--grey-45)',
|
||||
'grey-46': 'var(--grey-46)',
|
||||
'grey-47': 'var(--grey-47)',
|
||||
'grey-48': 'var(--grey-48)',
|
||||
'grey-49': 'var(--grey-49)',
|
||||
'grey-50': 'var(--grey-50)',
|
||||
'grey-51': 'var(--grey-51)',
|
||||
'grey-52': 'var(--grey-52)',
|
||||
'grey-53': 'var(--grey-53)',
|
||||
'grey-54': 'var(--grey-54)',
|
||||
'grey-55': 'var(--grey-55)',
|
||||
'grey-56': 'var(--grey-56)',
|
||||
'grey-57': 'var(--grey-57)',
|
||||
'grey-58': 'var(--grey-58)',
|
||||
'grey-59': 'var(--grey-59)',
|
||||
'grey-60': 'var(--grey-60)',
|
||||
'grey-61': 'var(--grey-61)',
|
||||
'blue-1': 'var(--blue-1)',
|
||||
'blue-2': 'var(--blue-2)',
|
||||
'blue-3': 'var(--blue-3)',
|
||||
'blue-4': 'var(--blue-4)',
|
||||
'blue-5': 'var(--blue-5)',
|
||||
'blue-6': 'var(--blue-6)',
|
||||
'blue-7': 'var(--blue-7)',
|
||||
'blue-8': 'var(--blue-8)',
|
||||
'blue-9': 'var(--blue-9)',
|
||||
'blue-10': 'var(--blue-10)',
|
||||
'blue-11': 'var(--blue-11)',
|
||||
'blue-12': 'var(--blue-12)',
|
||||
'blue-13': 'var(--blue-13)',
|
||||
'blue-14': 'var(--blue-14)',
|
||||
'red-1': 'var(--red-1)',
|
||||
'red-2': 'var(--red-2)',
|
||||
'red-3': 'var(--red-3)',
|
||||
'red-4': 'var(--red-4)',
|
||||
'red-5': 'var(--red-5)',
|
||||
'red-6': 'var(--red-6)',
|
||||
'red-7': 'var(--red-7)',
|
||||
'green-1': 'var(--green-1)',
|
||||
'green-2': 'var(--green-2)',
|
||||
'green-3': 'var(--green-3)',
|
||||
'orange-1': 'var(--orange-1)',
|
||||
inherit: 'inherit',
|
||||
...colors,
|
||||
|
||||
'legacy-grey-3': 'var(--grey-3)',
|
||||
'legacy-blue-2': 'var(--blue-2)',
|
||||
'legacy-blue-9': 'var(--blue-9)',
|
||||
},
|
||||
},
|
||||
|
||||
plugins: [
|
||||
plugin(({ addVariant }) => {
|
||||
addVariant('be', '[data-edition="BE"] &');
|
||||
addVariant('th-highcontrast', '[theme="highcontrast"] &');
|
||||
addVariant('th-dark', '[theme="dark"] &');
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue