remove unusing colors, colors blue and gray have been changed according the design
This commit is contained in:
Maximus
parent
7d244a31aa
commit
3c31d1af75
117
src/index.css
117
src/index.css
@ -68,6 +68,7 @@
|
|||||||
--color-aside: #0a0e1a;
|
--color-aside: #0a0e1a;
|
||||||
--color-footer: 10 10 10;
|
--color-footer: 10 10 10;
|
||||||
--color-text: rgb(255 255 255);
|
--color-text: rgb(255 255 255);
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
--color-serv: 25 29 43;
|
--color-serv: 25 29 43;
|
||||||
--color-serv-50: 227 230 237;
|
--color-serv-50: 227 230 237;
|
||||||
--color-serv-100: 200 205 223;
|
--color-serv-100: 200 205 223;
|
||||||
@ -80,104 +81,28 @@
|
|||||||
--color-serv-800: 9 11 16;
|
--color-serv-800: 9 11 16;
|
||||||
--color-serv-900: 6 7 10;
|
--color-serv-900: 6 7 10;
|
||||||
/* ---------------------------------- Blue ---------------------------------- */
|
/* ---------------------------------- Blue ---------------------------------- */
|
||||||
--color-blue-50: 229 241 255;
|
--color-blue-50: 240 247 254;
|
||||||
--color-blue-100: 204 228 255;
|
--color-blue-100: 221 237 254;
|
||||||
--color-blue-200: 153 201 255;
|
--color-blue-200: 182 216 252;
|
||||||
--color-blue-300: 102 173 255;
|
--color-blue-300: 137 192 250;
|
||||||
--color-blue-400: 51 146 255;
|
--color-blue-400: 74 158 247;
|
||||||
--color-blue-500: 0 117 255;
|
--color-blue-500: 9 109 217;
|
||||||
--color-blue-600: 0 95 204;
|
--color-blue-600: 8 99 196;
|
||||||
--color-blue-700: 0 71 153;
|
--color-blue-700: 7 87 171;
|
||||||
--color-blue-800: 0 48 102;
|
--color-blue-800: 6 69 137;
|
||||||
--color-blue-900: 0 24 51;
|
--color-blue-900: 4 49 98;
|
||||||
/* ---------------------------------- Pink ---------------------------------- */
|
|
||||||
--color-pink-50: 253 232 252;
|
|
||||||
--color-pink-100: 251 214 249;
|
|
||||||
--color-pink-200: 246 167 243;
|
|
||||||
--color-pink-300: 241 126 237;
|
|
||||||
--color-pink-400: 237 85 232;
|
|
||||||
--color-pink-500: 232 40 227;
|
|
||||||
--color-pink-600: 198 21 192;
|
|
||||||
--color-pink-700: 147 16 143;
|
|
||||||
--color-pink-800: 97 10 94;
|
|
||||||
--color-pink-900: 51 5 49;
|
|
||||||
/* ----------------------------------- Red ---------------------------------- */
|
|
||||||
--color-red-50: 254 236 231;
|
|
||||||
--color-red-100: 252 221 212;
|
|
||||||
--color-red-200: 250 184 163;
|
|
||||||
--color-red-300: 247 150 120;
|
|
||||||
--color-red-400: 245 116 77;
|
|
||||||
--color-red-500: 242 78 30;
|
|
||||||
--color-red-600: 207 58 12;
|
|
||||||
--color-red-700: 154 43 9;
|
|
||||||
--color-red-800: 101 28 6;
|
|
||||||
--color-red-900: 53 15 3;
|
|
||||||
/* --------------------------------- Purple --------------------------------- */
|
|
||||||
--color-purple-50: 246 240 255;
|
|
||||||
--color-purple-100: 238 224 255;
|
|
||||||
--color-purple-200: 217 189 255;
|
|
||||||
--color-purple-300: 200 158 255;
|
|
||||||
--color-purple-400: 180 122 255;
|
|
||||||
--color-purple-500: 162 89 255;
|
|
||||||
--color-purple-600: 122 20 255;
|
|
||||||
--color-purple-700: 91 0 209;
|
|
||||||
--color-purple-800: 60 0 138;
|
|
||||||
--color-purple-900: 31 0 71;
|
|
||||||
/* --------------------------------- Yellow --------------------------------- */
|
|
||||||
--color-yellow-50: 254 250 241;
|
|
||||||
--color-yellow-100: 252 243 222;
|
|
||||||
--color-yellow-200: 249 229 185;
|
|
||||||
--color-yellow-300: 245 214 143;
|
|
||||||
--color-yellow-400: 241 199 101;
|
|
||||||
--color-yellow-500: 236 178 46;
|
|
||||||
--color-yellow-600: 220 160 20;
|
|
||||||
--color-yellow-700: 192 139 17;
|
|
||||||
--color-yellow-800: 159 116 14;
|
|
||||||
--color-yellow-900: 117 85 11;
|
|
||||||
/* ---------------------------------- Gray ---------------------------------- */
|
/* ---------------------------------- Gray ---------------------------------- */
|
||||||
--color-gray-50: 250 250 250;
|
--color-gray-50: 250 250 250;
|
||||||
--color-gray-100: 242 242 242;
|
--color-gray-75: 240 240 240;
|
||||||
--color-gray-200: 232 232 232;
|
--color-gray-100: 235 235 235;;
|
||||||
--color-gray-300: 217 217 217;
|
--color-gray-200: 214 214 214;
|
||||||
--color-gray-400: 201 201 201;
|
--color-gray-300: 191 191 191;
|
||||||
--color-gray-500: 186 186 186;
|
--color-gray-400: 166 166 166;
|
||||||
--color-gray-600: 168 168 168;
|
--color-gray-500: 140 140 140;
|
||||||
--color-gray-700: 148 148 148;
|
--color-gray-600: 115 115 115;
|
||||||
--color-gray-800: 125 125 125;
|
--color-gray-700: 89 89 89;
|
||||||
--color-gray-900: 89 89 89;
|
--color-gray-800: 64 64 64;
|
||||||
/* ----------------------------------- Sky ---------------------------------- */
|
--color-gray-900: 38 38 38;
|
||||||
--color-sky-50: 240 251 255;
|
|
||||||
--color-sky-100: 225 246 255;
|
|
||||||
--color-sky-200: 184 235 255;
|
|
||||||
--color-sky-300: 143 223 254;
|
|
||||||
--color-sky-400: 93 208 254;
|
|
||||||
--color-sky-500: 26 188 254;
|
|
||||||
--color-sky-600: 1 171 239;
|
|
||||||
--color-sky-700: 1 149 208;
|
|
||||||
--color-sky-800: 1 124 173;
|
|
||||||
--color-sky-900: 1 91 127;
|
|
||||||
/* --------------------------------- Emerald -------------------------------- */
|
|
||||||
--color-emerald-50: 240 255 254;
|
|
||||||
--color-emerald-100: 225 255 253;
|
|
||||||
--color-emerald-200: 189 254 251;
|
|
||||||
--color-emerald-300: 149 254 248;
|
|
||||||
--color-emerald-400: 89 253 245;
|
|
||||||
--color-emerald-500: 3 248 237;
|
|
||||||
--color-emerald-600: 3 227 216;
|
|
||||||
--color-emerald-700: 2 197 187;
|
|
||||||
--color-emerald-800: 2 166 158;
|
|
||||||
--color-emerald-900: 1 121 115;
|
|
||||||
/* ------------------------------- Dark coral ------------------------------- */
|
|
||||||
--color-dark-coral-50: 231 237 243;
|
|
||||||
--color-dark-coral-100: 207 218 231;
|
|
||||||
--color-dark-coral-200: 159 182 208;
|
|
||||||
--color-dark-coral-300: 112 145 184;
|
|
||||||
--color-dark-coral-400: 74 110 150;
|
|
||||||
--color-dark-coral-500: 51 75 103;
|
|
||||||
--color-dark-coral-600: 41 60 82;
|
|
||||||
--color-dark-coral-700: 30 45 61;
|
|
||||||
--color-dark-coral-800: 20 30 41;
|
|
||||||
--color-dark-coral-900: 10 15 20;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pl,
|
.pl,
|
||||||
|
|||||||
@ -42,9 +42,13 @@ function Helper() {
|
|||||||
return obj;
|
return obj;
|
||||||
};
|
};
|
||||||
|
|
||||||
this.luminanced = function (key) {
|
this.luminanced = function (key, additionalStops = []) {
|
||||||
let obj = {};
|
let obj = {};
|
||||||
obj['50'] = this.withOpacityValue(`--color-${key}-50`);
|
obj['50'] = this.withOpacityValue(`--color-${key}-50`);
|
||||||
|
for (let index = 0; index < additionalStops.length; index++) {
|
||||||
|
const element = additionalStops[index];
|
||||||
|
obj[element] = this.withOpacityValue(`--color-${key}-${element}`);
|
||||||
|
}
|
||||||
for (let index = 100; index <= 900; index += 100) {
|
for (let index = 100; index <= 900; index += 100) {
|
||||||
obj[index.toString()] = this.withOpacityValue(`--color-${key}-${index}`);
|
obj[index.toString()] = this.withOpacityValue(`--color-${key}-${index}`);
|
||||||
}
|
}
|
||||||
@ -108,13 +112,7 @@ module.exports = {
|
|||||||
black: '#000000',
|
black: '#000000',
|
||||||
serv: ColorHelper.luminanced('serv'),
|
serv: ColorHelper.luminanced('serv'),
|
||||||
blue: ColorHelper.luminanced('blue'),
|
blue: ColorHelper.luminanced('blue'),
|
||||||
pink: ColorHelper.luminanced('pink'),
|
gray: ColorHelper.luminanced('gray', [75]),
|
||||||
red: ColorHelper.luminanced('red'),
|
|
||||||
purple: ColorHelper.luminanced('purple'),
|
|
||||||
yellow: ColorHelper.luminanced('yellow'),
|
|
||||||
sky: ColorHelper.luminanced('sky'),
|
|
||||||
emerald: ColorHelper.luminanced('emerald'),
|
|
||||||
"dark-coral": ColorHelper.luminanced('dark-coral'),
|
|
||||||
},
|
},
|
||||||
gridTemplateColumns: {
|
gridTemplateColumns: {
|
||||||
'layout': 'min-content 7fr',
|
'layout': 'min-content 7fr',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user