From e5c3847cd917c7b5b829427faffd582c7f82f863 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Wed, 3 Nov 2021 00:18:00 +0100 Subject: [PATCH] change colors to be handled inside scss --- src/color.ini | 162 ------------------------------------ src/loaders/color-loader.js | 13 +++ src/styles/Colors.scss | 33 ++++++++ src/styles/main.scss | 1 + webpack.config.js | 17 +++- 5 files changed, 60 insertions(+), 166 deletions(-) delete mode 100644 src/color.ini create mode 100644 src/loaders/color-loader.js create mode 100644 src/styles/Colors.scss diff --git a/src/color.ini b/src/color.ini deleted file mode 100644 index ce40d6d..0000000 --- a/src/color.ini +++ /dev/null @@ -1,162 +0,0 @@ -[base] -text = FFFFFF -subtext = F0F0F0 -sidebar-text = FFFFFF -main = 000000 -sidebar = 1ed760 -player = 000000 -card = 000000 -shadow = 202020 -selected-row = 797979 -button = 1ed760 -button-active = 1ed760 -button-disabled = 535353 -tab-active = 166632 -notification = 1db954 -notification-error = e22134 -misc = BFBFBF - - -[white] -text = 363636 -subtext = 3D3D3D -sidebar-text = FFF9F4 -main = FFF9F4 -sidebar = FFA789 -player = FFF9F4 -card = FFF9F4 -shadow = d3d3d3 -selected-row = 6D6D6D -button = ff8367 -button-active = ff8367 -button-disabled = 535353 -tab-active = ffdace -notification = FFA789 -notification-error = e22134 -misc = BFBFBF - -[dark] -text = F0F0F0 -subtext = F0F0F0 -sidebar-text = 0a0e14 -main = 0a0e14 -sidebar = C2D935 -player = 0a0e14 -card = 0a0e14 -shadow = 202020 -selected-row = DEDEDE -button = C2D935 -button-active = C2D935 -button-disabled = 535353 -tab-active = 727d2b -notification = C2D935 -notification-error = e22134 -misc = BFBFBF - -[dracula] -text = f8f8f2 -subtext = f8f8f2 -sidebar-text = F0F0F0 -main = 44475a -sidebar = 6272a4 -player = 44475a -card = 6272a4 -shadow = 000000 -selected-row = bd93f9 -button = ffb86c -button-active = 8be9fd -button-disabled = 535353 -tab-active = 6272a4 -notification = bd93f9 -notification-error = e22134 -misc = BFBFBF - -[nord-light] -text = 2e3440 -subtext = 3b4252 -sidebar-text = ECEFF4 -main = ECEFF4 -sidebar = 5E81AC -player = ECEFF4 -card = ebcb8b -shadow = eceff4 -selected-row = 4c566a -button = 81a1c1 -button-active = 81a1c1 -button-disabled = c0c0c0 -tab-active = ebcb8b -notification = a3be8c -notification-error = bf616a -misc = BFBFBF - -[nord-dark] -text = ECEFF4 -subtext = E5E9F0 -sidebar-text = 434c5e -main = 2e3440 -sidebar = 88C0D0 -player = 2e3440 -card = 2e3440 -shadow = 2E3440 -selected-row = D8DEE9 -button = 81A1C1 -button-active = 81A1C1 -button-disabled = 434C5E -tab-active = 434C5E -notification = A3BE8C -notification-error = BF616A -misc = BFBFBF - -[purple] -text = f1eaff -subtext = f1eaff -sidebar-text = e0d0ff -main = 0A0E14 -sidebar = 6F3C89 -player = 0A0E14 -card = 0A0E14 -shadow = 3a2645 -selected-row = EBDFFF -button = c76af6 -button-active = 6F3C89 -button-disabled = 535353 -tab-active = 58306D -notification = ff9e00 -notification-error = f61379 -misc = DEDEDE - -[samourai] -text = ebdbb2 -subtext = ebdbb2 -sidebar-text = 461217 -main = 461217 -sidebar = ebdbb2 -player = 461217 -card = 461217 -shadow = 3a2645 -selected-row = 909090 -button = e7a52d -button-active = e7a52d -button-disabled = 535353 -tab-active = e7a52d -notification = e7a52d -notification-error = e22134 -misc = BFBFBF - -[beach-sunset] -text = FFFFFF -subtext = F0F0F0 -sidebar-text = F0F0F0 -main = 262626 -sidebar = bd3e3e -player = 262626 -card = 262626 -shadow = 000000 -selected-row = d1d6e2 -button = f1a84f -button-active = c98430 -button-disabled = 535353 -tab-active = f1a84f -notification = c98430 -notification-error = e22134 -misc = BFBFBF \ No newline at end of file diff --git a/src/loaders/color-loader.js b/src/loaders/color-loader.js new file mode 100644 index 0000000..0810168 --- /dev/null +++ b/src/loaders/color-loader.js @@ -0,0 +1,13 @@ +const REGEX = /(?.*?):.*?#(?.*?)/gm; + +module.exports = function (content, map, meta) { + const matches = [...content.matchAll(REGEX)]; + const outLines = ["[base]"]; + + for (let i = 0; i < matches.length; i++) { + const { key, color } = matches[i].groups; + outLines.push(`${key} = ${color}`); + } + + return outLines.join("\n"); +}; diff --git a/src/styles/Colors.scss b/src/styles/Colors.scss new file mode 100644 index 0000000..e1460de --- /dev/null +++ b/src/styles/Colors.scss @@ -0,0 +1,33 @@ +$colors: ( + text: #ffffff, + subtext: #f0f0f0, + sidebar-text: #ffffff, + main: #000000, + sidebar: #1ed760, + player: #000000, + card: #000000, + shadow: #202020, + selected-row: #797979, + button: #1ed760, + button-active: #1ed760, + button-disabled: #535353, + tab-active: #166632, + notification: #1db954, + notification-error: #e22134, + misc: #bfbfbf +); + +:root { + @each $key, $color in $colors { + --spice-#{$key}: #{$color}; + --spice-rgb-#{$key}: #{red($color)}, #{green($color)}, #{blue($color)}; + } +} + +@function spiceColor($key, $alpha: 1) { + @if $alpha == 1 { + @return var(--spice-#{$key}); + } @else { + @return rgba(var(--spice-rgb-#{$key}), $alpha); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index dac6d49..501fb79 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -3,6 +3,7 @@ @return #{"invert("}$v#{")"}; } +@import "Colors"; @import "Inputs"; @import "ConfigMenu"; @import "NoAds"; diff --git a/webpack.config.js b/webpack.config.js index 0c630d2..79ca00d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,7 +6,7 @@ const path = require("path"); /** @type {import('webpack').Configuration} */ module.exports = { - entry: [path.resolve(__dirname, "./src/js/main.js"), path.resolve(__dirname, "./src/styles/main.scss")], + entry: [path.resolve(__dirname, "./src/js/main.js"), path.resolve(__dirname, "./src/styles/main.scss"), path.resolve(__dirname, "./src/styles/Colors.scss")], output: { path: path.resolve(__dirname, "dist"), filename: "dribbblish-dynamic.js" @@ -14,12 +14,12 @@ module.exports = { module: { rules: [ { - test: /\.js$/, + test: /main\.js$/, exclude: /node_modules/, use: [] }, { - test: /\.scss$/, + test: /main\.scss$/, exclude: /node_modules/, type: "asset/resource", generator: { @@ -33,6 +33,15 @@ module.exports = { } } ] + }, + { + test: /Colors\.scss$/, + exclude: /node_modules/, + type: "asset/resource", + generator: { + filename: "color.ini" + }, + use: [path.resolve(__dirname, "./src/loaders/color-loader.js")] } ] }, @@ -46,7 +55,7 @@ module.exports = { "process.env.DRIBBBLISH_VERSION": JSON.stringify(process.env.DRIBBBLISH_VERSION || "Dev") }), new CopyPlugin({ - patterns: [{ from: "src/assets", to: "assets" }, { from: "src/color.ini" }] + patterns: [{ from: "src/assets", to: "assets" }] }) ], optimization: {