From 3c31d1af75e50dff3817a4695c3b4e679c16044a Mon Sep 17 00:00:00 2001 From: Maximus Date: Mon, 25 Jul 2022 16:59:24 +0300 Subject: [PATCH] remove unusing colors, colors blue and gray have been changed according the design --- src/index.css | 117 ++++++++------------------------------------- tailwind.config.js | 14 +++--- 2 files changed, 27 insertions(+), 104 deletions(-) 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',