From 9a6b9afa3bda702be36be762367ed72719cc74d0 Mon Sep 17 00:00:00 2001 From: Daniel Heras Quesada Date: Tue, 27 Aug 2024 17:23:52 +0200 Subject: [PATCH] feat(styles): scss variables replaced with css ones all over the project --- front/next.config.mjs | 2 +- .../auth/components/log-in/log-in.module.scss | 34 ++++++++++--------- .../user-frame/user-frame.module.scss | 4 +-- .../user-panel/user-panel.module.scss | 8 ++--- .../navbar-header/navbar-header.module.scss | 6 ++-- .../common/layouts/home/home.module.scss | 2 +- front/src/styles/_variables.scss | 20 ----------- front/src/styles/main.scss | 9 ++--- 8 files changed, 34 insertions(+), 51 deletions(-) delete mode 100644 front/src/styles/_variables.scss diff --git a/front/next.config.mjs b/front/next.config.mjs index 2bbec78..068574e 100644 --- a/front/next.config.mjs +++ b/front/next.config.mjs @@ -6,7 +6,7 @@ const nextConfig = { * https://nextjs.org/docs/app/building-your-application/styling/sass */ sassOptions: { - prependData: `@import "@/styles/variables";`, + // optional: prependData: `@import "@/styles/variables";`, includePaths: [path.join("@", "styles")], }, images: { diff --git a/front/src/modules/auth/components/log-in/log-in.module.scss b/front/src/modules/auth/components/log-in/log-in.module.scss index 95be06c..10e29d2 100644 --- a/front/src/modules/auth/components/log-in/log-in.module.scss +++ b/front/src/modules/auth/components/log-in/log-in.module.scss @@ -12,16 +12,18 @@ border-radius: 0.4rem; background-image: linear-gradient( 16deg, - rgba($color-primary-90-rgb, 0.3), - rgba($color-primary-90-rgb, 0.2) + rgba(var(--color-primary-rgb), 0.3), + rgba(var(--color-primary-rgb), 0.2) ); + background-color: rgba(var(--color-test), 0.4); + .heading { font-size: 3.4rem; text-align: center; background-color: #e5e5f7; opacity: 0.8; - text-shadow: rgba($color-grey-10, 0.3); + text-shadow: rgba(var(--color-grey-10), 0.3); padding: 2rem 4rem 2rem; @@ -30,14 +32,14 @@ repeating-conic-gradient( from 30deg, #0000 0 120deg, - $color-white 0 180deg + var(--color-white) 0 180deg ) calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577), repeating-conic-gradient( from 30deg, - $color-grey-30 0 60deg, - $color-grey-90 0 120deg, - $color-white 0 180deg + var(--color-grey-30) 0 60deg, + var(--color-grey-90) 0 120deg, + var(--color-white) 0 180deg ); background-size: var(--s) calc(var(--s) * 0.577); } @@ -61,7 +63,7 @@ font-size: inherit; margin-left: 0.8em; - color: $color-grey-10; + color: var(--color-grey-10); transition: all 0.3s; } @@ -69,9 +71,9 @@ font-size: inherit; padding: 0.8em; - color: $color-foreground; + color: var(--color-foreground); - background: rgba($color-primary-90-rgb, 0.5); + background: rgba(var(--color-primary-rgb), 0.5); border: none; border-bottom: 2px solid transparent; border-radius: 2px; @@ -79,13 +81,13 @@ transition: all 0.2s; &::placeholder { - color: $color-grey-10; + color: var(--color-grey-10); } &:focus { outline: none; - border-bottom: 2px solid $color-primary; - box-shadow: 0 1px 4px rgba($color-primary-dark-rgb, 0.3); + border-bottom: 2px solid var(--color-primary); + box-shadow: 0 1px 4px rgba(var(--color-primary-dark-rgb), 0.3); } } @@ -104,15 +106,15 @@ border-radius: 2px; border: none; - background-color: $color-primary; - color: $color-foreground; +color: var(--color-foreground); + background-color: var(--color-primary); transition: all 0.2s; &:hover { cursor: pointer; transform: translateY(-2px); - box-shadow: 0 2px 6px rgba($color-primary-dark-rgb, 0.4); + box-shadow: 0 2px 6px rgba(var(--color-primary-dark-rgb), 0.4); } &:active { diff --git a/front/src/modules/auth/components/user-frame/user-frame.module.scss b/front/src/modules/auth/components/user-frame/user-frame.module.scss index c8aac1e..ced634d 100644 --- a/front/src/modules/auth/components/user-frame/user-frame.module.scss +++ b/front/src/modules/auth/components/user-frame/user-frame.module.scss @@ -7,7 +7,7 @@ border-radius: 50%; overflow: hidden; - border: 1px solid $color-grey-30; + border: 1px solid var(--color-grey-30); box-sizing: border-box; & > span { @@ -18,6 +18,6 @@ font-size: inherit; text-transform: uppercase; - color: $color-grey-30; + color: var(--color-grey-30); } } diff --git a/front/src/modules/auth/components/user-panel/user-panel.module.scss b/front/src/modules/auth/components/user-panel/user-panel.module.scss index 045ef8b..b6b0abd 100644 --- a/front/src/modules/auth/components/user-panel/user-panel.module.scss +++ b/front/src/modules/auth/components/user-panel/user-panel.module.scss @@ -8,8 +8,8 @@ padding: 1.2rem 1.8rem; border-radius: 6px; - background-color: $color-foreground; - color: $color-background; + background-color: var(--color-foreground); + color: var(--color-background); & .user { font-size: 1.6rem; @@ -28,8 +28,8 @@ padding: 0.4rem 0.6rem; border-radius: 4px; - background-color: $color-grey-90; - color: $color-grey-10; + background-color: var(--color-grey-90); + color: var(--color-grey-10); } } } diff --git a/front/src/modules/common/components/navbar-header/navbar-header.module.scss b/front/src/modules/common/components/navbar-header/navbar-header.module.scss index b39432a..155b91e 100644 --- a/front/src/modules/common/components/navbar-header/navbar-header.module.scss +++ b/front/src/modules/common/components/navbar-header/navbar-header.module.scss @@ -11,9 +11,9 @@ border-radius: 8px; padding: 0.4rem 1.8rem; - background-color: $color-white; - box-shadow: 0 1px 3px rgba($color-grey-10-rgb, 0.3); - color: $color-background; + background-color: var(--color-white); + box-shadow: 0 1px 3px rgba(var(--color-grey-10-rgb), 0.3); + color: var(--color-background); .logo { display: flex; diff --git a/front/src/modules/common/layouts/home/home.module.scss b/front/src/modules/common/layouts/home/home.module.scss index 0aa9b1b..629908f 100644 --- a/front/src/modules/common/layouts/home/home.module.scss +++ b/front/src/modules/common/layouts/home/home.module.scss @@ -1,3 +1,3 @@ .container { - background-color: $color-background; + background-color: var(--color-background); } diff --git a/front/src/styles/_variables.scss b/front/src/styles/_variables.scss deleted file mode 100644 index 5197fa4..0000000 --- a/front/src/styles/_variables.scss +++ /dev/null @@ -1,20 +0,0 @@ -$default-font-size: 1.6rem; - -$color-primary: var(--color-primary); -$color-primary-light: var(--color-primary-light); -$color-primary-dark: var(--color-primary-dark); -$color-primary-rgb: var(--color-primary-rgb); -$color-primary-light-rgb: var(--color-primary-light-rgb); -$color-primary-dark-rgb: var(--color-primary-dark-rgb); - -$color-secondary: #ff7730; -$color-background: var(--color-grey-90); -$color-foreground: var(--color-black); - -$color-white: var(--color-white); - -$color-grey-90: var(--color-grey-90); -$color-grey-60: var(--color-grey-60); -$color-grey-30: var(--color-grey-30); -$color-grey-10: var(--color-grey-10); -$color-grey-10-rgb: var(--color-grey-10-rgb); diff --git a/front/src/styles/main.scss b/front/src/styles/main.scss index 1eecbbb..498a983 100644 --- a/front/src/styles/main.scss +++ b/front/src/styles/main.scss @@ -20,6 +20,7 @@ --color-primary-dark-rgb: 86, 87, 125; } + [data-theme="dark"] { --color-white: #101010; --color-black: #fafafa; @@ -65,8 +66,8 @@ html { body { box-sizing: border-box; - background-color: $color-background; - color: $color-foreground; + background-color: var(--color-background); + color: var(--color-foreground); } a { @@ -75,6 +76,6 @@ a { } ::selection { - background-color: $color-primary; - color: $color-white; + background-color: var(--color-primary); + color: var(--color-white); }