diff options
Diffstat (limited to 'src')
29 files changed, 298 insertions, 109 deletions
diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss index d02bfa6..54bbece 100644 --- a/src/components/Branding/Branding.module.scss +++ b/src/components/Branding/Branding.module.scss @@ -38,14 +38,14 @@ left: 0; backface-visibility: hidden; background: var(--color-bg); - border: fun.convert-px(1) solid var(--color-primary-dark); + border: fun.convert-px(2) solid var(--color-primary-dark); border-radius: 50%; transition: all 0.6s linear 0s; } &__front { box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 - var(--color-shadow), + var(--color-shadow-light), fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 var(--color-shadow-light); } @@ -70,7 +70,7 @@ &__back { box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 - var(--color-shadow), + var(--color-shadow-light), fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 var(--color-shadow-light); } @@ -90,8 +90,10 @@ grid-column: 2; grid-row: 2; margin: 0; + color: var(--color-fg-light); font-family: var(--font-family-secondary); font-size: var(--font-size-lg); + font-weight: 500; } .link { diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss index cee7918..df5ca3d 100644 --- a/src/components/Buttons/Buttons.module.scss +++ b/src/components/Buttons/Buttons.module.scss @@ -71,6 +71,10 @@ &:disabled { color: var(--color-fg-light); border-color: var(--color-border-dark); + box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg), + fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-darker), + fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg), + fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-darker); cursor: wait; } @@ -138,7 +142,7 @@ var(--color-shadow-light), fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3) var(--color-shadow-light); - transform: scale(1.07); + transform: scale(1.1); } &:focus { @@ -154,6 +158,18 @@ } } +:global { + [data-theme="dark"] { + :local { + .tertiary { + img[src*="png"] { + background: none; + } + } + } + } +} + .toolbar { display: block; width: var(--btn-size); diff --git a/src/components/Icons/Blog/Blog.module.scss b/src/components/Icons/Blog/Blog.module.scss index 5b53125..5376c61 100644 --- a/src/components/Icons/Blog/Blog.module.scss +++ b/src/components/Icons/Blog/Blog.module.scss @@ -13,11 +13,11 @@ .picture { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); } .background { fill: var(--color-bg); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } diff --git a/src/components/Icons/CV/CV.module.scss b/src/components/Icons/CV/CV.module.scss index e7b0e59..aaa8a1a 100644 --- a/src/components/Icons/CV/CV.module.scss +++ b/src/components/Icons/CV/CV.module.scss @@ -8,46 +8,47 @@ .lock { fill: var(--color-bg); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 3; } .lines { + fill: var(--color-fg); stroke-width: 4; } .seal-top { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 2; } .seal-bottom { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 2; } .diploma { fill: var(--color-bg); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .top { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .handle { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 3; } .bottom { fill: var(--color-primary); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } diff --git a/src/components/Icons/Close/Close.module.scss b/src/components/Icons/Close/Close.module.scss index b45895b..5a1f638 100644 --- a/src/components/Icons/Close/Close.module.scss +++ b/src/components/Icons/Close/Close.module.scss @@ -8,6 +8,6 @@ .line { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 3; } diff --git a/src/components/Icons/Cog/Cog.module.scss b/src/components/Icons/Cog/Cog.module.scss index 4b09c38..a861f0c 100644 --- a/src/components/Icons/Cog/Cog.module.scss +++ b/src/components/Icons/Cog/Cog.module.scss @@ -5,6 +5,6 @@ width: var(--icon-size, #{fun.convert-px(40)}); margin: auto; fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } diff --git a/src/components/Icons/Contact/Contact.module.scss b/src/components/Icons/Contact/Contact.module.scss index 5c0040e..963c1dc 100644 --- a/src/components/Icons/Contact/Contact.module.scss +++ b/src/components/Icons/Contact/Contact.module.scss @@ -8,22 +8,22 @@ .envelop { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .lines { - fill: var(--color-border-dark); + fill: var(--color-fg); } .background { fill: var(--color-shadow-dark); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .paper { fill: var(--color-bg); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } diff --git a/src/components/Icons/Hamburger/Hamburger.module.scss b/src/components/Icons/Hamburger/Hamburger.module.scss index 07cbe50..f38df4e 100644 --- a/src/components/Icons/Hamburger/Hamburger.module.scss +++ b/src/components/Icons/Hamburger/Hamburger.module.scss @@ -12,7 +12,7 @@ var(--color-primary-light) 0%, var(--color-primary-lighter) 100% ); - border: fun.convert-px(1) solid var(--color-border-dark); + border: fun.convert-px(1) solid var(--color-primary-darker); border-radius: fun.convert-px(3); display: block; width: var(--btn-size, fun.convert-px(50)); diff --git a/src/components/Icons/Home/Home.module.scss b/src/components/Icons/Home/Home.module.scss index 6eb88c4..f2e7f9e 100644 --- a/src/components/Icons/Home/Home.module.scss +++ b/src/components/Icons/Home/Home.module.scss @@ -8,35 +8,35 @@ .wall { fill: var(--color-bg); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .indoor { fill: var(--color-shadow-dark); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .door { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .roof { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .chimney { fill: var(--color-bg); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .lines { - fill: var(--color-border-dark); + fill: var(--color-primary-darker); stroke-width: 4; } diff --git a/src/components/Icons/Moon/Moon.module.scss b/src/components/Icons/Moon/Moon.module.scss index 51d76fd..799a282 100644 --- a/src/components/Icons/Moon/Moon.module.scss +++ b/src/components/Icons/Moon/Moon.module.scss @@ -2,7 +2,7 @@ .moon { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; width: var(--icon-size, #{fun.convert-px(25)}); } diff --git a/src/components/Icons/Search/Search.module.scss b/src/components/Icons/Search/Search.module.scss index 7b506e8..4c42028 100644 --- a/src/components/Icons/Search/Search.module.scss +++ b/src/components/Icons/Search/Search.module.scss @@ -8,24 +8,24 @@ .big-handle { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 3; } .glass { fill: var(--color-bg-opacity); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 2; } .upright { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 3; } .small-handle { fill: var(--color-primary); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 2; } diff --git a/src/components/Icons/Sun/Sun.module.scss b/src/components/Icons/Sun/Sun.module.scss index 1de4b19..5682aa3 100644 --- a/src/components/Icons/Sun/Sun.module.scss +++ b/src/components/Icons/Sun/Sun.module.scss @@ -2,7 +2,7 @@ .sun { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; width: var(--icon-size, #{fun.convert-px(25)}); } diff --git a/src/components/PostMeta/PostMeta.module.scss b/src/components/PostMeta/PostMeta.module.scss index ecd3105..6f8e1c2 100644 --- a/src/components/PostMeta/PostMeta.module.scss +++ b/src/components/PostMeta/PostMeta.module.scss @@ -35,7 +35,7 @@ .term { margin-right: var(--spacing-2xs); - color: var(--color-primary-darker); + color: var(--color-fg-light); } .description { diff --git a/src/components/ThemeToggle/ThemeToggle.tsx b/src/components/ThemeToggle/ThemeToggle.tsx index 4b93ac9..c44f6df 100644 --- a/src/components/ThemeToggle/ThemeToggle.tsx +++ b/src/components/ThemeToggle/ThemeToggle.tsx @@ -1,16 +1,27 @@ import { Form } from '@components/Form'; import { MoonIcon, SunIcon } from '@components/Icons'; +import Spinner from '@components/Spinner/Spinner'; import { t } from '@lingui/macro'; -import { FormEvent, useState } from 'react'; +import { useTheme } from 'next-themes'; +import { FormEvent, useEffect, useState } from 'react'; import styles from './ThemeToggle.module.scss'; const ThemeToggle = () => { - const [isDarkTheme, setIsDarkTheme] = useState<boolean>(false); + const [isMounted, setIsMounted] = useState<boolean>(false); + const { resolvedTheme, setTheme } = useTheme(); + + useEffect(() => { + setIsMounted(true); + }, []); const onSubmit = (e: FormEvent) => { e.preventDefault(); }; + if (!isMounted) return <Spinner />; + + const isDarkTheme = resolvedTheme === 'dark'; + return ( <Form modifier="theme" submitHandler={onSubmit}> <input @@ -19,7 +30,7 @@ const ThemeToggle = () => { id="dark-theme" name="dark-theme" checked={isDarkTheme} - onChange={() => setIsDarkTheme(!isDarkTheme)} + onChange={() => setTheme(isDarkTheme ? 'light' : 'dark')} /> <label htmlFor="dark-theme" className={styles.label}> <span className={styles.title}>{t`Theme:`}</span> diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss index 3b52fb6..096ad50 100644 --- a/src/components/Toolbar/Toolbar.module.scss +++ b/src/components/Toolbar/Toolbar.module.scss @@ -54,7 +54,7 @@ bottom: 100%; left: 0; right: 0; - background: var(--color-bg); + background: var(--color-bg-secondary); border-top: fun.convert-px(4) solid; border-bottom: fun.convert-px(4) solid; border-image: radial-gradient( diff --git a/src/components/Widgets/Sharing/Sharing.module.scss b/src/components/Widgets/Sharing/Sharing.module.scss index c05a56b..ada3e2f 100644 --- a/src/components/Widgets/Sharing/Sharing.module.scss +++ b/src/components/Widgets/Sharing/Sharing.module.scss @@ -181,3 +181,13 @@ } } } + +:global { + [data-theme="dark"] { + :local { + .link { + filter: brightness(0.85) contrast(1.1); + } + } + } +} diff --git a/src/components/Widgets/SocialMedia/SocialMedia.module.scss b/src/components/Widgets/SocialMedia/SocialMedia.module.scss index 5dfdcb7..373cefb 100644 --- a/src/components/Widgets/SocialMedia/SocialMedia.module.scss +++ b/src/components/Widgets/SocialMedia/SocialMedia.module.scss @@ -46,3 +46,13 @@ transform: scale(0.9); } } + +:global { + [data-theme="dark"] { + :local { + .icon { + filter: brightness(0.85) contrast(1.1); + } + } + } +} diff --git a/src/components/Widgets/SocialMedia/SocialMedia.tsx b/src/components/Widgets/SocialMedia/SocialMedia.tsx index 351fd48..e4151fc 100644 --- a/src/components/Widgets/SocialMedia/SocialMedia.tsx +++ b/src/components/Widgets/SocialMedia/SocialMedia.tsx @@ -22,13 +22,13 @@ const SocialMedia = ({ const getIcon = (id: string) => { switch (id) { case 'github': - return <GithubIcon />; + return <GithubIcon className={styles.icon} />; case 'gitlab': - return <GitlabIcon />; + return <GitlabIcon className={styles.icon} />; case 'linkedin': - return <LinkedInIcon />; + return <LinkedInIcon className={styles.icon} />; case 'twitter': - return <TwitterIcon />; + return <TwitterIcon className={styles.icon} />; default: break; } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index fde93eb..a22c616 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -5,6 +5,7 @@ import { I18nProvider } from '@lingui/react'; import { AppPropsWithLayout } from '@ts/types/app'; import { initTranslation } from '@utils/helpers/i18n'; import '../styles/globals.scss'; +import { ThemeProvider } from 'next-themes'; initTranslation(i18n); @@ -29,7 +30,13 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { const getLayout = Component.getLayout ?? ((page) => page); return ( <I18nProvider i18n={i18n}> - {getLayout(<Component {...pageProps} />)} + <ThemeProvider + defaultTheme="system" + enableColorScheme={true} + enableSystem={true} + > + {getLayout(<Component {...pageProps} />)} + </ThemeProvider> </I18nProvider> ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 99d506d..3664ae1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -9,8 +9,8 @@ import HomePageContent from '@content/pages/homepage.mdx'; import { ButtonLink } from '@components/Buttons'; import styles from '@styles/pages/Home.module.scss'; import { t } from '@lingui/macro'; -import ContactIcon from '@assets/images/icon-contact.svg'; import FeedIcon from '@assets/images/icon-feed.svg'; +import { ContactIcon } from '@components/Icons'; const Home: NextPageWithLayout = () => { const CodingLinks = () => { @@ -69,13 +69,13 @@ const Home: NextPageWithLayout = () => { <ul className={styles['links-list']}> <li> <ButtonLink target="/contact"> - <ContactIcon className={styles.icon} /> + <ContactIcon /> {t`Contact me`} </ButtonLink> </li> <li> <ButtonLink target="/feed"> - <FeedIcon className={styles.icon} /> + <FeedIcon className={styles['icon--feed']} /> {t`Subscribe`} </ButtonLink> </li> diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index ce629f7..3d1eb50 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -147,26 +147,50 @@ $spacings: (); // Colors //============================================================================ -$color_black: hsl(207, 47%, 11%); -$color_blue: hsl(206, 75%, 31%); -$color_blue-o30: hsla(206, 75%, 31%, 0.3); -$color_blue-bright: hsl(206, 77%, 36%); -$color_blue-brighter: hsl(200, 75%, 45%); -$color_blue-dark: hsl(206, 76%, 25%); -$color_blue-darker: hsl(206, 60%, 20%); -$color_grey: hsl(206, 15%, 80%); -$color_grey-bright: hsl(206, 20%, 86%); -$color_grey-brighter: hsl(206, 20%, 92%); -$color_grey-dark: hsla(206, 10%, 25%); -$color_grey-dark-o70: hsla(206, 10%, 25%, 0.7); -$color_grey-dark-o40: hsla(206, 10%, 25%, 0.4); -$color_grey-dark-o20: hsla(206, 10%, 25%, 0.2); -$color_white: hsl(206, 15%, 97%); -$color_white-o90: hsl(206, 15%, 97%, 0.9); -$color_orange: hsl(28, 91%, 22%); -$color_red: hsl(1, 72%, 29%); -$color_green: hsl(105, 90%, 16%); -$color_magenta: hsl(322, 80%, 28%); -$color_purple: hsl(282, 84%, 31%); -$color_yellow: hsl(49, 90%, 16%); -$color_cyan: hsl(187, 84%, 17%); +$light-theme_black: hsl(207, 47%, 11%); +$light-theme_blue: hsl(206, 75%, 31%); +$light-theme_blue-o30: hsla(206, 75%, 31%, 0.3); +$light-theme_blue-bright: hsl(206, 77%, 36%); +$light-theme_blue-brighter: hsl(206, 70%, 49%); +$light-theme_blue-dark: hsl(206, 76%, 28%); +$light-theme_blue-darker: hsl(206, 60%, 20%); +$light-theme_grey: hsl(206, 15%, 80%); +$light-theme_grey-bright: hsl(206, 20%, 86%); +$light-theme_grey-brighter: hsl(206, 20%, 92%); +$light-theme_grey-dark: hsla(206, 10%, 25%); +$light-theme_grey-dark-o70: hsla(206, 10%, 25%, 0.7); +$light-theme_grey-dark-o40: hsla(206, 10%, 25%, 0.4); +$light-theme_grey-dark-o20: hsla(206, 10%, 25%, 0.2); +$light-theme_white: hsl(206, 15%, 97%); +$light-theme_white-o90: hsl(206, 15%, 97%, 0.9); +$light-theme_orange: hsl(28, 91%, 22%); +$light-theme_red: hsl(1, 72%, 29%); +$light-theme_green: hsl(105, 90%, 16%); +$light-theme_magenta: hsl(322, 80%, 28%); +$light-theme_purple: hsl(282, 84%, 31%); +$light-theme_yellow: hsl(49, 90%, 16%); +$light-theme_cyan: hsl(187, 84%, 17%); + +$dark-theme_black: hsl(208, 25%, 11%); +$dark-theme_black-o90: hsla(208, 25%, 11%, 0.9); +$dark-theme_black-bright: hsl(208, 21%, 15%); +$dark-theme_black-brighter: hsl(208, 18%, 20%); +$dark-theme_blue: hsl(200, 50%, 68%); +$dark-theme_blue-o30: hsla(200, 60%, 70%, 0.3); +$dark-theme_blue-bright: hsl(200, 55%, 70%); +$dark-theme_blue-brighter: hsl(200, 66%, 81%); +$dark-theme_blue-dark: hsl(200, 45%, 64%); +$dark-theme_blue-darker: hsl(200, 16%, 62%); +$dark-theme_grey: hsl(208, 10%, 70%); +$dark-theme_grey-dark: hsl(208, 20%, 25%); +$dark-theme_grey-dark-o70: hsla(208, 20%, 25%, 0.7); +$dark-theme_grey-dark-o40: hsla(208, 20%, 25%, 0.4); +$dark-theme_grey-dark-o20: hsla(208, 20%, 25%, 0.2); +$dark-theme_white: hsl(208, 25%, 92%); +$dark-theme_orange: hsl(35, 55%, 66%); +$dark-theme_red: hsl(2, 70%, 76%); +$dark-theme_green: hsl(100, 55%, 65%); +$dark-theme_magenta: hsl(318, 55%, 78%); +$dark-theme_purple: hsl(270, 60%, 78%); +$dark-theme_yellow: hsl(50, 60%, 65%); +$dark-theme_cyan: hsl(180, 60%, 68%); diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss index 890acd8..ee4a25c 100644 --- a/src/styles/base/_base.scss +++ b/src/styles/base/_base.scss @@ -30,7 +30,7 @@ summary { } * { - scrollbar-color: var(--color-shadow-dark) var(--color-bg-tertiary); + scrollbar-color: var(--color-primary) var(--color-bg-tertiary); scrollbar-width: auto; } @@ -44,7 +44,7 @@ summary { } *::-webkit-scrollbar-thumb { - background-color: var(--color-shadow-dark); + background-color: var(--color-primary); border-radius: fun.convert-px(6); border: fun.convert-px(3) solid var(--color-bg-tertiary); } @@ -63,7 +63,7 @@ body { border-top: max(0.4vw, fun.convert-px(6)) solid; border-bottom: max(0.4vw, fun.convert-px(6)) solid; border-image: radial-gradient( - ellipse at top, + ellipse at center, var(--color-primary-lighter) 20%, var(--color-primary) 100% ) diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss index 4b11e64..e6e2612 100644 --- a/src/styles/base/_colors.scss +++ b/src/styles/base/_colors.scss @@ -1,32 +1,64 @@ @use "@styles/abstracts/variables" as var; :root { - --color-bg: #{var.$color_white}; - --color-bg-opacity: #{var.$color_white-o90}; - --color-bg-secondary: #{var.$color_grey-brighter}; - --color-bg-tertiary: #{var.$color_grey-bright}; - --color-fg: #{var.$color_black}; - --color-fg-light: #{var.$color_grey-dark}; - --color-fg-inverted: #{var.$color_white}; - --color-primary: #{var.$color_blue}; - --color-primary-opacity: #{var.$color_blue-o30}; - --color-primary-light: #{var.$color_blue-bright}; - --color-primary-lighter: #{var.$color_blue-brighter}; - --color-primary-dark: #{var.$color_blue-dark}; - --color-primary-darker: #{var.$color_blue-darker}; - --color-secondary: #{var.$color_orange}; - --color-border: #{var.$color_grey}; - --color-border-dark: #{var.$color_grey-dark}; - --color-border-light: #{var.$color_grey-bright}; - --color-shadow: #{var.$color_grey-dark-o40}; - --color-shadow-dark: #{var.$color_grey-dark-o70}; - --color-shadow-light: #{var.$color_grey-dark-o20}; - --color-token-red: #{var.$color_red}; - --color-token-green: #{var.$color_green}; - --color-token-purple: #{var.$color_purple}; - --color-token-magenta: #{var.$color_magenta}; - --color-token-cyan: #{var.$color_cyan}; - --color-token-blue: #{var.$color_blue}; - --color-token-yellow: #{var.$color_yellow}; - --color-token-orange: #{var.$color_orange}; + --color-bg: #{var.$light-theme_white}; + --color-bg-opacity: #{var.$light-theme_white-o90}; + --color-bg-secondary: #{var.$light-theme_grey-brighter}; + --color-bg-tertiary: #{var.$light-theme_grey-bright}; + --color-fg: #{var.$light-theme_black}; + --color-fg-light: #{var.$light-theme_grey-dark}; + --color-fg-inverted: #{var.$light-theme_white}; + --color-primary: #{var.$light-theme_blue}; + --color-primary-opacity: #{var.$light-theme_blue-o30}; + --color-primary-light: #{var.$light-theme_blue-bright}; + --color-primary-lighter: #{var.$light-theme_blue-brighter}; + --color-primary-dark: #{var.$light-theme_blue-dark}; + --color-primary-darker: #{var.$light-theme_blue-darker}; + --color-secondary: #{var.$light-theme_orange}; + --color-border: #{var.$light-theme_grey}; + --color-border-dark: #{var.$light-theme_grey-dark}; + --color-border-light: #{var.$light-theme_grey-bright}; + --color-shadow: #{var.$light-theme_grey-dark-o40}; + --color-shadow-dark: #{var.$light-theme_grey-dark-o70}; + --color-shadow-light: #{var.$light-theme_grey-dark-o20}; + --color-token-red: #{var.$light-theme_red}; + --color-token-green: #{var.$light-theme_green}; + --color-token-purple: #{var.$light-theme_purple}; + --color-token-magenta: #{var.$light-theme_magenta}; + --color-token-cyan: #{var.$light-theme_cyan}; + --color-token-blue: #{var.$light-theme_blue}; + --color-token-yellow: #{var.$light-theme_yellow}; + --color-token-orange: #{var.$light-theme_orange}; +} + +[data-theme="dark"] { + --color-bg: #{var.$dark-theme_black}; + --color-bg-opacity: #{var.$dark-theme_black-o90}; + --color-bg-light: #{var.$dark-theme_grey}; + --color-bg-secondary: #{var.$dark-theme_black-bright}; + --color-bg-tertiary: #{var.$dark-theme_black-brighter}; + --color-fg: #{var.$dark-theme_white}; + --color-fg-light: #{var.$dark-theme_grey}; + --color-fg-inverted: #{var.$dark-theme_black}; + --color-primary: #{var.$dark-theme_blue}; + --color-primary-opacity: #{var.$dark-theme_blue-o30}; + --color-primary-light: #{var.$dark-theme_blue-bright}; + --color-primary-lighter: #{var.$dark-theme_blue-brighter}; + --color-primary-dark: #{var.$dark-theme_blue-dark}; + --color-primary-darker: #{var.$dark-theme_blue-darker}; + --color-secondary: #{var.$dark-theme_orange}; + --color-border: #{var.$dark-theme_grey-dark}; + --color-border-dark: #{var.$dark-theme_grey}; + --color-border-light: #{var.$dark-theme_black-brighter}; + --color-shadow: #{var.$dark-theme_grey-dark-o40}; + --color-shadow-dark: #{var.$dark-theme_grey-dark-o70}; + --color-shadow-light: #{var.$dark-theme_grey-dark-o20}; + --color-token-red: #{var.$dark-theme_red}; + --color-token-green: #{var.$dark-theme_green}; + --color-token-purple: #{var.$dark-theme_purple}; + --color-token-magenta: #{var.$dark-theme_magenta}; + --color-token-cyan: #{var.$dark-theme_cyan}; + --color-token-blue: #{var.$dark-theme_blue}; + --color-token-yellow: #{var.$dark-theme_yellow}; + --color-token-orange: #{var.$dark-theme_orange}; } diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss index b94f67d..a6d8e50 100644 --- a/src/styles/base/_typography.scss +++ b/src/styles/base/_typography.scss @@ -160,11 +160,11 @@ a { &.external { &::after { display: inline-block; - content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); } &:focus:not(:active)::after { - content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); } } @@ -178,13 +178,13 @@ a { &.external { &::after { content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( - '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' + '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' )); } &:focus:not(:active)::after { content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( - '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' + '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' )); } } diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss index 7b32f09..3deee18 100644 --- a/src/styles/components/_wp-blocks.scss +++ b/src/styles/components/_wp-blocks.scss @@ -32,7 +32,7 @@ padding: var(--spacing-xs) var(--spacing-sm); background: var(--color-bg-secondary); border: fun.convert-px(1) solid var(--color-border-light); - color: var(--color-primary-darker); + color: var(--color-fg); } .wp-block-columns { diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 0a7a618..f9a1281 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -27,3 +27,10 @@ * Define styles for external components (like WordPress blocks). */ @use "components/wp-blocks"; + +/** + * 4.0. Themes + * + * Define themes specific styles. + */ +@use "themes/dark"; diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss index b6050d7..8225a57 100644 --- a/src/styles/pages/Home.module.scss +++ b/src/styles/pages/Home.module.scss @@ -8,7 +8,23 @@ margin: 0 0 var(--spacing-md); } +.icon--feed { + width: fun.convert-px(20); +} + +:global { + [data-theme="dark"] { + :local { + .icon--feed { + filter: brightness(0.8) contrast(1.1); + } + } + } +} + .section { + --icon-size: #{fun.convert-px(20)}; + composes: grid from "@styles/layout/_grid.scss"; padding: var(--spacing-md) 0; background: var(--color-bg-secondary); @@ -31,7 +47,3 @@ } } } - -.icon { - width: fun.convert-px(20); -} diff --git a/src/styles/themes/_dark.scss b/src/styles/themes/_dark.scss new file mode 100644 index 0000000..946403a --- /dev/null +++ b/src/styles/themes/_dark.scss @@ -0,0 +1,52 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/variables" as var; + +[data-theme="dark"] { + * { + text-shadow: none !important; + } + + body { + font-variation-settings: "GRAD" -0.7; + } + + img { + filter: brightness(0.8) contrast(1.1); + + &[src*="png"] { + background: var(--color-bg-light); + } + + &:active { + filter: none; + } + } + + a { + &.external { + &::after { + content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + + &:focus:not(:active)::after { + content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_black}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + } + } + + &[hreflang] { + &.external { + &::after { + content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( + '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' + )); + } + + &:focus:not(:active)::after { + content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( + '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_black}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' + )); + } + } + } + } +} diff --git a/src/styles/vendors/_prism.scss b/src/styles/vendors/_prism.scss index e6627df..e636eae 100644 --- a/src/styles/vendors/_prism.scss +++ b/src/styles/vendors/_prism.scss @@ -79,8 +79,13 @@ pre[class*="language-"] { } .token { + &.comment, + &.doc-comment { + color: var(--color-fg-light); + } + &.punctuation { - color: var(--color-primary-darker); + color: var(--color-fg); } &.attr-name, |