1 files changed, 57 insertions, 25 deletions
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: (
+            --themes: (
-                --h:      220,
+                --link: (
-                --s:      100%,
+                    --bg-hi:  $gray1,
-                --l:      80%,
+                    --bg:     $gray2,
-                --color:  hsl(var(--colors--secondary-accent--h), var(--colors--secondary-accent--s), var(--colors--secondary-accent--l)),
+                    --bg-lo:  $gray3,
-                --strong: hsl(
+                
-                    var(--colors--secondary-accent--h),
+                    --obj-hi: $gray4,
-                    calc(var(--colors--secondary-accent--s) * 1.2),
+                    --obj:    $gray5,
-                    calc(var(--colors--secondary-accent--l) * 1.2)
+                
-                ),
+                    --fg-hi:  $gray6,
-                --faint: hsla(
+                    --fg:     $gray7,
-                    var(--colors--secondary-accent--h),
+                    --fg-lo:  $gray7,
-                    var(--colors--secondary-accent--s),
-                    var(--colors--secondary-accent--l),
-                    .1
                ),
+                --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: (
+            --themes: (
-                --h:      220,
+                --link: (
-                --s:      60%,
+                    --bg-hi:  $theme-link-bg,
-                --l:      40%,
+                    --bg:     $theme-link-bg,
-                --strong: hsl(
+                    --bg-lo:  $theme-link-bg,
-                    var(--colors--secondary-accent--h),
+                
-                    var(--colors--secondary-accent--s),
+                    --obj-hi: $theme-link-obj,
-                    calc(var(--colors--secondary-accent--l) * .8)
+                    --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/_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;
73	),	73	),
74	),	74	),
75		75
76	--secondary-accent: (	76	--themes: (
77	--h: 220,	77	--link: (
78	--s: 100%,	78	--bg-hi: $gray1,
79	--l: 80%,	79	--bg: $gray2,
80	--color: hsl(var(--colors--secondary-accent--h), var(--colors--secondary-accent--s), var(--colors--secondary-accent--l)),	80	--bg-lo: $gray3,
81	--strong: hsl(	81
82	var(--colors--secondary-accent--h),	82	--obj-hi: $gray4,
83	calc(var(--colors--secondary-accent--s) * 1.2),	83	--obj: $gray5,
84	calc(var(--colors--secondary-accent--l) * 1.2)	84
85	),	85	--fg-hi: $gray6,
86	--faint: hsla(	86	--fg: $gray7,
87	var(--colors--secondary-accent--h),	87	--fg-lo: $gray7,
88	var(--colors--secondary-accent--s),
89	var(--colors--secondary-accent--l),
90	.1
91	),	88	),
		89	--invert: (
		90	--bg-hi: $gray7,
		91	--bg: $gray7,
		92	--bg-lo: $gray7,
		93
		94	--obj-hi: $gray2,
		95	--obj: $gray2,
		96
		97	--fg-hi: $gray1,
		98	--fg: $gray0,
		99	--fg-lo: $gray0,
		100	)
92	),	101	),
93		102
94	--focus-ring: var(--colors--fg-lo),	103	--focus-ring: var(--colors--fg-lo),
@@ -102,7 +111,7 @@ $content--width: 42rem;
102	--link: (	111	--link: (
103	--idle: var(--colors--fg-lo),	112	--idle: var(--colors--fg-lo),
104	--colored: (	113	--colored: (
105	--idle: var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), //	114	--idle: hsl(220, 100%, 80%), //hsl(var(--colors--accent--h), 100%, 66%), //
106	--visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //	115	--visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //
107	)	116	)
108	),	117	),
@@ -124,6 +133,13 @@ $content--width: 42rem;
124	$gray6: hsl(220, 7%, 16%);	133	$gray6: hsl(220, 7%, 16%);
125	$gray7: hsl(220, 7%, 0%);	134	$gray7: hsl(220, 7%, 0%);
126		135
		136	$link-idle: hsl(220, 60%, 40%);
		137
		138	$theme-link-bg: change-color($link-idle, $lightness: 98.8%);
		139	$theme-link-obj: rgba($link-idle, .5);
		140	$theme-link-fg-hi: mix($link-idle, $gray0, 75%);
		141	$theme-link-fg: $link-idle;
		142
127	@include store((	143	@include store((
128	--colors: (	144	--colors: (
129	--bg-hi: $gray0, // Darker background	145	--bg-hi: $gray0, // Darker background
@@ -150,15 +166,31 @@ $content--width: 42rem;
150	),	166	),
151	),	167	),
152		168
153	--secondary-accent: (	169	--themes: (
154	--h: 220,	170	--link: (
155	--s: 60%,	171	--bg-hi: $theme-link-bg,
156	--l: 40%,	172	--bg: $theme-link-bg,
157	--strong: hsl(	173	--bg-lo: $theme-link-bg,
158	var(--colors--secondary-accent--h),	174
159	var(--colors--secondary-accent--s),	175	--obj-hi: $theme-link-obj,
160	calc(var(--colors--secondary-accent--l) * .8)	176	--obj: $theme-link-obj,
		177
		178	--fg-hi: $theme-link-fg-hi,
		179	--fg: $theme-link-fg,
		180	--fg-lo: $theme-link-fg,
161	),	181	),
		182	--invert: (
		183	--bg-hi: $gray7,
		184	--bg: $gray7,
		185	--bg-lo: $gray7,
		186
		187	--obj-hi: $gray2,
		188	--obj: $gray2,
		189
		190	--fg-hi: $gray1,
		191	--fg: $gray0,
		192	--fg-lo: $gray0,
		193	)
162	),	194	),
163		195
164	--select: (	196	--select: (
@@ -168,7 +200,7 @@ $content--width: 42rem;
168		200
169	--link: (	201	--link: (
170	--colored: (	202	--colored: (
171	--idle: var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), //	203	--idle: $link-idle, //hsl(var(--colors--accent--h), 100%, 66%), //
172	--visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //	204	--visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
173	)	205	)
174	),	206	),