diff --git a/src/index.css b/src/index.css
index a56bc58..31a1643 100644
--- a/src/index.css
+++ b/src/index.css
@@ -68,6 +68,7 @@
--color-aside: #0a0e1a;
--color-footer: 10 10 10;
--color-text: rgb(255 255 255);
+ /* -------------------------------------------------------------------------- */
--color-serv: 25 29 43;
--color-serv-50: 227 230 237;
--color-serv-100: 200 205 223;
@@ -80,104 +81,28 @@
--color-serv-800: 9 11 16;
--color-serv-900: 6 7 10;
/* ---------------------------------- Blue ---------------------------------- */
- --color-blue-50: 229 241 255;
- --color-blue-100: 204 228 255;
- --color-blue-200: 153 201 255;
- --color-blue-300: 102 173 255;
- --color-blue-400: 51 146 255;
- --color-blue-500: 0 117 255;
- --color-blue-600: 0 95 204;
- --color-blue-700: 0 71 153;
- --color-blue-800: 0 48 102;
- --color-blue-900: 0 24 51;
- /* ---------------------------------- 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;
+ --color-blue-50: 240 247 254;
+ --color-blue-100: 221 237 254;
+ --color-blue-200: 182 216 252;
+ --color-blue-300: 137 192 250;
+ --color-blue-400: 74 158 247;
+ --color-blue-500: 9 109 217;
+ --color-blue-600: 8 99 196;
+ --color-blue-700: 7 87 171;
+ --color-blue-800: 6 69 137;
+ --color-blue-900: 4 49 98;
/* ---------------------------------- Gray ---------------------------------- */
--color-gray-50: 250 250 250;
- --color-gray-100: 242 242 242;
- --color-gray-200: 232 232 232;
- --color-gray-300: 217 217 217;
- --color-gray-400: 201 201 201;
- --color-gray-500: 186 186 186;
- --color-gray-600: 168 168 168;
- --color-gray-700: 148 148 148;
- --color-gray-800: 125 125 125;
- --color-gray-900: 89 89 89;
- /* ----------------------------------- Sky ---------------------------------- */
- --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;
+ --color-gray-75: 240 240 240;
+ --color-gray-100: 235 235 235;;
+ --color-gray-200: 214 214 214;
+ --color-gray-300: 191 191 191;
+ --color-gray-400: 166 166 166;
+ --color-gray-500: 140 140 140;
+ --color-gray-600: 115 115 115;
+ --color-gray-700: 89 89 89;
+ --color-gray-800: 64 64 64;
+ --color-gray-900: 38 38 38;
}
.pl,
diff --git a/tailwind.config.js b/tailwind.config.js
index 24992c1..ce47318 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -42,9 +42,13 @@ function Helper() {
return obj;
};
- this.luminanced = function (key) {
+ this.luminanced = function (key, additionalStops = []) {
let obj = {};
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) {
obj[index.toString()] = this.withOpacityValue(`--color-${key}-${index}`);
}
@@ -108,13 +112,7 @@ module.exports = {
black: '#000000',
serv: ColorHelper.luminanced('serv'),
blue: ColorHelper.luminanced('blue'),
- pink: ColorHelper.luminanced('pink'),
- 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'),
+ gray: ColorHelper.luminanced('gray', [75]),
},
gridTemplateColumns: {
'layout': 'min-content 7fr',