diff options
Diffstat (limited to 'src/styles/base')
| -rw-r--r-- | src/styles/base/_base.scss | 6 | ||||
| -rw-r--r-- | src/styles/base/_colors.scss | 88 | ||||
| -rw-r--r-- | src/styles/base/_typography.scss | 8 |
3 files changed, 67 insertions, 35 deletions
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>' )); } } |