From 8d9ee4e59a0f8de3dcfe034444d31e61f2372eff Mon Sep 17 00:00:00 2001 From: Foster Hangdaan Date: Fri, 4 Aug 2023 17:31:53 -0400 Subject: [PATCH] Add filter colors Useful for changing the colors of SVG icons. --- _includes/styles/color-palette.scss | 54 +++++++++++++++++++++++++++-- 1 file changed, 51 insertions(+), 3 deletions(-) diff --git a/_includes/styles/color-palette.scss b/_includes/styles/color-palette.scss index 1297884..c18489c 100644 --- a/_includes/styles/color-palette.scss +++ b/_includes/styles/color-palette.scss @@ -19,6 +19,24 @@ :root { --tn-dark--16: #414868; --tn-dark--17: #24283b; --tn-dark--18: #1a1b26; + --tn-dark--filter-01: invert(67%) sepia(81%) saturate(2461%) hue-rotate(306deg) brightness(102%) contrast(94%); + --tn-dark--filter-02: invert(89%) sepia(27%) saturate(6632%) hue-rotate(317deg) brightness(107%) contrast(101%); + --tn-dark--filter-03: invert(75%) sepia(29%) saturate(664%) hue-rotate(353deg) brightness(93%) contrast(88%); + --tn-dark--filter-04: invert(84%) sepia(24%) saturate(802%) hue-rotate(38deg) brightness(91%) contrast(85%); + --tn-dark--filter-05: invert(78%) sepia(48%) saturate(333%) hue-rotate(118deg) brightness(93%) contrast(91%); + --tn-dark--filter-06: invert(86%) sepia(15%) saturate(513%) hue-rotate(130deg) brightness(101%) contrast(104%); + --tn-dark--filter-07: invert(65%) sepia(54%) saturate(670%) hue-rotate(143deg) brightness(95%) contrast(83%); + --tn-dark--filter-08: invert(71%) sepia(55%) saturate(771%) hue-rotate(177deg) brightness(106%) contrast(101%); + --tn-dark--filter-09: invert(61%) sepia(12%) saturate(1879%) hue-rotate(184deg) brightness(102%) contrast(94%); + --tn-dark--filter-10: invert(78%) sepia(35%) saturate(4827%) hue-rotate(207deg) brightness(101%) contrast(94%); + --tn-dark--filter-11: invert(79%) sepia(11%) saturate(1033%) hue-rotate(195deg) brightness(103%) contrast(92%); + --tn-dark--filter-12: invert(79%) sepia(20%) saturate(404%) hue-rotate(193deg) brightness(87%) contrast(92%); + --tn-dark--filter-13: invert(78%) sepia(9%) saturate(1774%) hue-rotate(194deg) brightness(87%) contrast(83%); + --tn-dark--filter-14: invert(88%) sepia(13%) saturate(136%) hue-rotate(352deg) brightness(94%) contrast(83%); + --tn-dark--filter-15: invert(38%) sepia(9%) saturate(1910%) hue-rotate(192deg) brightness(94%) contrast(87%); + --tn-dark--filter-16: invert(25%) sepia(12%) saturate(1580%) hue-rotate(192deg) brightness(99%) contrast(86%); + --tn-dark--filter-17: invert(12%) sepia(8%) saturate(2849%) hue-rotate(192deg) brightness(96%) contrast(89%); + --tn-dark--filter-18: invert(7%) sepia(27%) saturate(776%) hue-rotate(197deg) brightness(95%) contrast(92%); --tn-dark--black-10: #6973a1; --tn-dark--black-20: #5d6795; --tn-dark--black-30: #545d86; @@ -69,6 +87,21 @@ :root { --tn-light--13: #0f0f14; --tn-light--14: #9699a3; --tn-light--15: #d5d6db; + --tn-light--filter-01: invert(30%) sepia(13%) saturate(2258%) hue-rotate(299deg) brightness(94%) contrast(83%); + --tn-light--filter-02: invert(33%) sepia(15%) saturate(2400%) hue-rotate(338deg) brightness(99%) contrast(86%); + --tn-light--filter-03: invert(34%) sepia(27%) saturate(2987%) hue-rotate(15deg) brightness(92%) contrast(84%); + --tn-light--filter-04: invert(32%) sepia(10%) saturate(2061%) hue-rotate(46deg) brightness(91%) contrast(83%); + --tn-light--filter-05: invert(32%) sepia(51%) saturate(367%) hue-rotate(122deg) brightness(91%) contrast(88%); + --tn-light--filter-06: invert(28%) sepia(100%) saturate(369%) hue-rotate(141deg) brightness(95%) contrast(92%); + --tn-light--filter-07: invert(17%) sepia(95%) saturate(1240%) hue-rotate(178deg) brightness(96%) contrast(88%); + --tn-light--filter-08: invert(27%) sepia(58%) saturate(655%) hue-rotate(179deg) brightness(93%) contrast(84%); + --tn-light--filter-09: invert(28%) sepia(11%) saturate(2096%) hue-rotate(219deg) brightness(96%) contrast(82%); + --tn-light--filter-10: invert(23%) sepia(11%) saturate(1791%) hue-rotate(191deg) brightness(88%) contrast(92%); + --tn-light--filter-11: invert(36%) sepia(7%) saturate(1186%) hue-rotate(193deg) brightness(92%) contrast(89%); + --tn-light--filter-12: invert(29%) sepia(53%) saturate(348%) hue-rotate(357deg) brightness(96%) contrast(94%); + --tn-light--filter-13: invert(3%) sepia(3%) saturate(6957%) hue-rotate(202deg) brightness(93%) contrast(94%); + --tn-light--filter-14: invert(65%) sepia(13%) saturate(196%) hue-rotate(189deg) brightness(92%) contrast(87%); + --tn-light--filter-15: invert(94%) sepia(7%) saturate(122%) hue-rotate(193deg) brightness(92%) contrast(90%); --tn-light--background-50: #d5d6db; --tn-light--background-60: #c5c6ce; --tn-light--background-70: #b4b6bf; @@ -118,21 +151,28 @@ :root { --color-bg--layer-02: var(--tn-storm--background-30); --color-headings: var(--color-cyan); --color-table-stripe: var(--tn-night--background-40); + --filter-black: var(--tn-dark--filter-16); + --filter-white: var(--tn-dark--filter-11); + --filter-red: var(--tn-dark--filter-01); + --filter-green: var(--tn-dark--filter-05); + --filter-blue: var(--tn-dark--filter-09); + --filter-yellow: var(--tn-dark--filter-03); + --filter-cyan: var(--tn-dark--filter-08); + --filter-magenta: var(--tn-dark--filter-10); } @media (prefers-color-scheme: light) { :root { --color-bg: var(--tn-light--background); --color-fg: var(--tn-light--foreground); - --color-black: var(--tn-light--black); - --color-white: var(--tn-light--white); + --color-black: var(--tn-light--13); + --color-white: var(--tn-light--10); --color-red: var(--tn-light--01); --color-green: var(--tn-light--05); --color-blue: var(--tn-light--08); --color-yellow: var(--tn-light--03); --color-cyan: var(--tn-light--07); --color-magenta: var(--tn-light--09); - --color-brown: var(--tn-light--12); --color-links: var(--color-blue); --color-error: var(--color-red); --color-success: var(--color-green); @@ -141,5 +181,13 @@ @media (prefers-color-scheme: light) { --color-bg--layer-02: var(--tn-light--background-70); --color-headings: var(--color-cyan); --color-table-stripe: var(--tn-light--background-60); + --filter-black: var(--tn-light--filter-13); + --filter-white: var(--tn-light--filter-10); + --filter-red: var(--tn-light--filter-01); + --filter-green: var(--tn-light--filter-05); + --filter-blue: var(--tn-light--filter-08); + --filter-yellow: var(--tn-light--filter-03); + --filter-cyan: var(--tn-light--filter-07); + --filter-magenta: var(--tn-light--filter-09); } }