From 01d0b3af3c0d74ca4825c40d6900c2c5280d33c4 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 14 Jun 2021 14:04:35 +0200 Subject: Restructured some variables --- assets/css/_vars.scss | 82 ++++++++++++++++++++++++++++------------ assets/css/components/_card.scss | 26 +++---------- 2 files changed, 63 insertions(+), 45 deletions(-) (limited to 'assets') diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index ba2d1fa..832c410 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -73,22 +73,31 @@ $content--width: 42rem; ), ), - --secondary-accent: ( - --h: 220, - --s: 100%, - --l: 80%, - --color: hsl(var(--colors--secondary-accent--h), var(--colors--secondary-accent--s), var(--colors--secondary-accent--l)), - --strong: hsl( - var(--colors--secondary-accent--h), - calc(var(--colors--secondary-accent--s) * 1.2), - calc(var(--colors--secondary-accent--l) * 1.2) - ), - --faint: hsla( - var(--colors--secondary-accent--h), - var(--colors--secondary-accent--s), - var(--colors--secondary-accent--l), - .1 + --themes: ( + --link: ( + --bg-hi: $gray1, + --bg: $gray2, + --bg-lo: $gray3, + + --obj-hi: $gray4, + --obj: $gray5, + + --fg-hi: $gray6, + --fg: $gray7, + --fg-lo: $gray7, ), + --invert: ( + --bg-hi: $gray7, + --bg: $gray7, + --bg-lo: $gray7, + + --obj-hi: $gray2, + --obj: $gray2, + + --fg-hi: $gray1, + --fg: $gray0, + --fg-lo: $gray0, + ) ), --focus-ring: var(--colors--fg-lo), @@ -102,7 +111,7 @@ $content--width: 42rem; --link: ( --idle: var(--colors--fg-lo), --colored: ( - --idle: var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), // + --idle: hsl(220, 100%, 80%), //hsl(var(--colors--accent--h), 100%, 66%), // --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), // ) ), @@ -124,6 +133,13 @@ $content--width: 42rem; $gray6: hsl(220, 7%, 16%); $gray7: hsl(220, 7%, 0%); + $link-idle: hsl(220, 60%, 40%); + + $theme-link-bg: change-color($link-idle, $lightness: 98.8%); + $theme-link-obj: rgba($link-idle, .5); + $theme-link-fg-hi: mix($link-idle, $gray0, 75%); + $theme-link-fg: $link-idle; + @include store(( --colors: ( --bg-hi: $gray0, // Darker background @@ -150,15 +166,31 @@ $content--width: 42rem; ), ), - --secondary-accent: ( - --h: 220, - --s: 60%, - --l: 40%, - --strong: hsl( - var(--colors--secondary-accent--h), - var(--colors--secondary-accent--s), - calc(var(--colors--secondary-accent--l) * .8) + --themes: ( + --link: ( + --bg-hi: $theme-link-bg, + --bg: $theme-link-bg, + --bg-lo: $theme-link-bg, + + --obj-hi: $theme-link-obj, + --obj: $theme-link-obj, + + --fg-hi: $theme-link-fg-hi, + --fg: $theme-link-fg, + --fg-lo: $theme-link-fg, ), + --invert: ( + --bg-hi: $gray7, + --bg: $gray7, + --bg-lo: $gray7, + + --obj-hi: $gray2, + --obj: $gray2, + + --fg-hi: $gray1, + --fg: $gray0, + --fg-lo: $gray0, + ) ), --select: ( @@ -168,7 +200,7 @@ $content--width: 42rem; --link: ( --colored: ( - --idle: var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), // + --idle: $link-idle, //hsl(var(--colors--accent--h), 100%, 66%), // --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), // ) ), diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 1a7d1bd..6fdd874 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -9,13 +9,13 @@ --bg: prop(--colors --bg-lo, $global: true), --fg: prop(--colors --fg, $global: true), --hover: ( - --bg: prop(--colors --fg-lo, $global: true), - --fg: prop(--colors --bg-hi, $global: true), + --bg: prop(--colors --themes --invert --bg, $global: true), + --fg: prop(--colors --themes --invert --fg, $global: true), ), --link: ( - --bg: prop(--colors --obj-hi, $global: true), - --fg: prop(--colors --fg-lo, $global: true), - --fg-faint: prop(--colors --fg, $global: true), + --bg: prop(--colors --themes --link --bg-lo, $global: true), + --fg: prop(--colors --themes --link --fg, $global: true), + --fg-hi: prop(--colors --themes --link --fg-hi, $global: true), ) ) )); @@ -23,20 +23,6 @@ @include store(( --colors: ( --bg: prop(--colors --bg-hi, $global: true), - --link: ( - --bg: hsl( - prop(--colors --secondary-accent --h, $global: true), - prop(--colors --secondary-accent --s, $global: true), - 98.8%, - ), - --fg: prop(--colors --secondary-accent --color, $global: true), - --fg-faint: hsla( - prop(--colors --secondary-accent --h, $global: true), - prop(--colors --secondary-accent --s, $global: true), - prop(--colors --secondary-accent --l, $global: true), - .75 - ), - ) ) ), 'light'); @@ -92,7 +78,7 @@ color: prop(--colors --link --fg); small { - color: prop(--colors --link --fg-faint); + color: prop(--colors --link --fg-hi); } } } -- cgit v1.2.3-54-g00ecf