MediaWiki:Gadget-colorPalette.css: Difference between revisions
From Portals of Phereon Wiki
Content added Content deleted
mNo edit summary |
(WIP) |
||
Line 1: | Line 1: | ||
@supports (--custom: property) { |
|||
html { |
|||
:root { |
|||
--white: #fff; |
|||
--white: #fff; |
|||
--gray-lightest: #DCDCDC; |
|||
--gray-lighter: #D3D3D3; |
|||
--gray-light: #C0C0C0; |
|||
--gray-lightish: #A9A9A9; |
|||
--gray: #808080; |
|||
--gray-darkish: #696969; |
|||
--gray-dark: #3F3F3F; |
|||
--gray-darker: #2C2C2C; |
|||
--gray-darkest: #232323; |
|||
--black: #000; |
|||
--text-dark: #000; |
|||
--grey-lightest: var(--gray-lightest); |
|||
--text-light: #fff; |
|||
--grey-lighter: var(--gray-lighter); |
|||
--text: var(--text-dark, #000); |
|||
--text-alt: var(--text-light, #fff); |
|||
--grey: var(--gray); |
|||
--grey-darkish: var(--gray-darkish); |
|||
--grey-dark: var(--gray-dark); |
|||
--grey-darker: var(--gray-darker); |
|||
--grey-darkest: var(--gray-darkest); |
|||
--z-primary-h: 25; |
|||
--z-primary-s: 87; |
|||
--z-primary-l: 18; |
|||
--text: var(--text-dark, #000); |
|||
--text-alt: var(--text-light, #fff); |
|||
--z-secondary-h: 40; |
|||
} |
|||
--z-secondary-s: 17; |
|||
--z-secondary-l: 83; |
|||
html { |
|||
--z-primary-h: 25; |
|||
--z-tertiary-h: 59; |
|||
--z-tertiary-s: 56; |
|||
--z-tertiary-l: 14; |
|||
--z-accent-h: 119; |
|||
--z-accent-s: 36; |
|||
--z-accent-l: 41; |
|||
--x-lightish-2: 5; |
|||
--x-lightish-1: 10; |
|||
--x-lightish: 15; |
|||
--x-light-2: 20; |
|||
--x-light-1: 25; |
|||
--x-light: 30; |
|||
--x-lighter-3: 35; |
|||
--x-lighter-2: 40; |
|||
--x-lighter-1: 45; |
|||
--x-lighter: 50; |
|||
--x-lightest-1: 55; |
|||
--x-lightest-2: 60; |
|||
--x-lightest-3: 65; |
|||
--x-lightest: 70; |
|||
--x-darkish-2: 5; |
|||
--x-darkish-1: 10; |
|||
--x-darkish: 15; |
|||
--x-dark-2: 20; |
|||
--x-dark-1: 25; |
|||
--x-dark: 30; |
|||
--x-darker-3: 35; |
|||
--x-darker-2: 40; |
|||
--x-darker-1: 45; |
|||
--x-darker: 50; |
|||
--x-darkest-3: 55; |
|||
--x-darkest-2: 60; |
|||
--x-darkest-1: 65; |
|||
--x-darkest: 70; |
|||
--x-saturatedish-2: 8; |
|||
--x-saturatedish-1: 16; |
|||
--x-saturatedish: 25; |
|||
--x-saturated-2: 33; |
|||
--x-saturated-1: 41; |
|||
--x-saturated: 50; |
|||
--x-saturateder-3: 55; |
|||
--x-saturateder-2: 60; |
|||
--x-saturateder-1: 65; |
|||
--x-saturateder: 70; |
|||
--x-saturatedest-3: 75; |
|||
--x-saturatedest-2: 80; |
|||
--x-saturatedest-1: 85; |
|||
--x-saturatedest: 90; |
|||
--x-desaturatedish-2: 8; |
|||
--x-desaturatedish-1: 16; |
|||
--x-desaturatedish: 25; |
|||
--x-desaturated-2: 33; |
|||
--x-desaturated-1: 41; |
|||
--x-desaturated: 50; |
|||
--x-desaturateder-3: 55; |
|||
--x-desaturateder-2: 60; |
|||
--x-desaturateder-1: 65; |
|||
--x-desaturateder: 70; |
|||
--x-desaturatedest-3: 75; |
|||
--x-desaturatedest-2: 80; |
|||
--x-desaturatedest-1: 85; |
|||
--x-desaturatedest: 90; |
|||
--temp-100-primary-l: calc(100 - var(--z-primary-l)); |
|||
--z-secondary-h: 40; |
|||
--temp-1-primary-s: calc(var(--z-primary-s) * 1%); |
|||
--z-secondary-s: 17; |
|||
--temp-100-primary-s: calc(100 - var(--z-primary-s)); |
|||
--z-secondary-l: 83; |
|||
--temp-1-primary-l: calc(var(--z-primary-l) * 1%); |
|||
--temp-1-secondary-s: calc(var(--z-secondary-s) * 1%); |
|||
--temp-1-secondary-l: calc(var(--z-secondary-l) * 1%); |
|||
--temp-1-tertiary-s: calc(var(--z-tertiary-s) * 1%); |
|||
--temp-1-tertiary-l: calc(var(--z-tertiary-l) * 1%); |
|||
--temp-1-accent-s: calc(var(--z-accent-s) * 1%); |
|||
--temp-1-accent-l: calc(var(--z-accent-l) * 1%); |
|||
--primary: hsl(var(--z-primary-h), var(--temp-1-primary-s), var(--temp-1-primary-l)); |
|||
--z-tertiary-h: 59; |
|||
--primary-lightish-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightish-2)) / 100) * 1%)); |
|||
--z-tertiary-s: 56; |
|||
--primary-lightish-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightish-1)) / 100) * 1%)); |
|||
--z-tertiary-l: 14; |
|||
--primary-lightish: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightish)) / 100) * 1%)); |
|||
--primary-light-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-light-2)) / 100) * 1%)); |
|||
--z-accent-h: 119; |
|||
--primary-light-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-light-1)) / 100) * 1%)); |
|||
--z-accent-s: 36; |
|||
--primary-light: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-light)) / 100) * 1%)); |
|||
--z-accent-l: 41; |
|||
--primary-lighter-3: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lighter-3)) / 100) * 1%)); |
|||
--primary-lighter-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lighter-2)) / 100) * 1%)); |
|||
--x-lightish-2: 5; |
|||
--primary-lighter-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lighter-1)) / 100) * 1%)); |
|||
--x-lightish-1: 10; |
|||
--primary-lighter: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lighter)) / 100) * 1%)); |
|||
--x-lightish: 15; |
|||
--primary-lightest-3: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightest-3)) / 100) * 1%)); |
|||
--x-light-2: 20; |
|||
--primary-lightest-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightest-2)) / 100) * 1%)); |
|||
--x-light-1: 25; |
|||
--primary-lightest-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightest-1)) / 100) * 1%)); |
|||
--x-light: 30; |
|||
--primary-lightest: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightest)) / 100) * 1%)); |
|||
--x-lighter-3: 35; |
|||
--primary-darkish-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkish-2)) / 100 * 1%)); |
|||
--x-lighter-2: 40; |
|||
--primary-darkish-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkish-1)) / 100 * 1%)); |
|||
--x-lighter-1: 45; |
|||
--primary-darkish: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkish)) / 100 * 1%)); |
|||
--x-lighter: 50; |
|||
--primary-dark-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-dark-2)) / 100 * 1%)); |
|||
--x-lightest-1: 55; |
|||
--primary-dark-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-dark-1)) / 100 * 1%)); |
|||
--x-lightest-2: 60; |
|||
--primary-dark: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-dark)) / 100 * 1%)); |
|||
--x-lightest-3: 65; |
|||
--primary-darker-3: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darker-3)) / 100 * 1%)); |
|||
--x-lightest: 70; |
|||
--primary-darker-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darker-2)) / 100 * 1%)); |
|||
--primary-darker-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darker-1)) / 100 * 1%)); |
|||
--x-darkish-2: 5; |
|||
--primary-darker: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darker)) / 100 * 1%)); |
|||
--x-darkish-1: 10; |
|||
--primary-darkest-3: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkest-3)) / 100 * 1%)); |
|||
--x-darkish: 15; |
|||
--primary-darkest-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkest-2)) / 100 * 1%)); |
|||
--x-dark-2: 20; |
|||
--primary-darkest-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkest-1)) / 100 * 1%)); |
|||
--x-dark-1: 25; |
|||
--primary-darkest: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkest)) / 100 * 1%)); |
|||
--x-dark: 30; |
|||
--x-darker-3: 35; |
|||
--primary-saturatedish: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturatedish)) / 100) * 1%), var(--temp-1-primary-l)); |
|||
--x-darker-2: 40; |
|||
--primary-saturatedish-1: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturatedish-1)) / 100) * 1%), var(--temp-1-primary-l)); |
|||
--x-darker-1: 45; |
|||
--primary-saturatedish-2: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturatedish-2)) / 100) * 1%), var(--temp-1-primary-l)); |
|||
--x-darker: 50; |
|||
--primary-saturated: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturated)) / 100) * 1%), var(--temp-1-primary-l)); |
|||
--x-darkest-3: 55; |
|||
--primary-saturated-1: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturated-1)) / 100) * 1%), var(--temp-1-primary-l)); |
|||
--x-darkest-2: 60; |
|||
--primary-saturated-2: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturated-2)) / 100) * 1%), var(--temp-1-primary-l)); |
|||
--x-darkest-1: 65; |
|||
--primary-saturated-3: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturated-3)) / 100) * 1%), var(--temp-1-primary-l)); |
|||
--x-darkest: 70; |
|||
--primary-saturateder: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturateder)) / 100) * 1%), var(--temp-1-primary-l)); |
|||
--primary-saturateder-1: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturateder-1)) / 100) * 1%), var(--temp-1-primary-l)); |
|||
--x-saturatedish-2: 8; |
|||
--primary-saturateder-2: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturateder-2)) / 100) * 1%), var(--temp-1-primary-l)); |
|||
--x-saturatedish-1: 16; |
|||
--primary-saturateder-3: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturateder-3)) / 100) * 1%), var(--temp-1-primary-l)); |
|||
--x-saturatedish: 25; |
|||
--primary-saturatedest: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturatedest)) / 100) * 1%), var(--temp-1-primary-l)); |
|||
--x-saturated-2: 33; |
|||
--primary-desaturatedish: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturatedish)) / 100 * 1%), var(--temp-1-primary-l)); |
|||
--x-saturated-1: 41; |
|||
--primary-desaturatedish-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturatedish-1)) / 100 * 1%), var(--temp-1-primary-l)); |
|||
--x-saturated: 50; |
|||
--primary-desaturatedish-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturatedish-2)) / 100 * 1%), var(--temp-1-primary-l)); |
|||
--x-saturateder-3: 55; |
|||
--primary-desaturated: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturated)) / 100 * 1%), var(--temp-1-primary-l)); |
|||
--x-saturateder-2: 60; |
|||
--primary-desaturated-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturated-1)) / 100 * 1%), var(--temp-1-primary-l)); |
|||
--x-saturateder-1: 65; |
|||
--primary-desaturated-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturated-2)) / 100 * 1%), var(--temp-1-primary-l)); |
|||
--x-saturateder: 70; |
|||
--primary-desaturated-3: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturated-3)) / 100 * 1%), var(--temp-1-primary-l)); |
|||
--x-saturatedest-3: 75; |
|||
--primary-desaturateder: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturateder)) / 100 * 1%), var(--temp-1-primary-l)); |
|||
--x-saturatedest-2: 80; |
|||
--primary-desaturateder-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturateder-1)) / 100 * 1%), var(--temp-1-primary-l)); |
|||
--x-saturatedest-1: 85; |
|||
--primary-desaturateder-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturateder-2)) / 100 * 1%), var(--temp-1-primary-l)); |
|||
--x-saturatedest: 90; |
|||
--primary-desaturateder-3: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturateder-3)) / 100 * 1%), var(--temp-1-primary-l)); |
|||
--primary-desaturatedest: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturatedest)) / 100 * 1%), var(--temp-1-primary-l)); |
|||
--x-desaturatedish-2: 8; |
|||
--x-desaturatedish-1: 16; |
|||
--secondary: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), var(--temp-1-secondary-l)); |
|||
--x-desaturatedish: 25; |
|||
--secondary-lightish-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightish-2)) / 100) * 1%)); |
|||
--x-desaturated-2: 33; |
|||
--secondary-lightish-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightish-1)) / 100) * 1%)); |
|||
--x-desaturated-1: 41; |
|||
--secondary-lightish: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightish)) / 100) * 1%)); |
|||
--x-desaturated: 50; |
|||
--secondary-light-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-light-2)) / 100) * 1%)); |
|||
--x-desaturateder-3: 55; |
|||
--secondary-light-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-light-1)) / 100) * 1%)); |
|||
--x-desaturateder-2: 60; |
|||
--secondary-light: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-light)) / 100) * 1%)); |
|||
--x-desaturateder-1: 65; |
|||
--secondary-lighter-3: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lighter-3)) / 100) * 1%)); |
|||
--x-desaturateder: 70; |
|||
--secondary-lighter-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lighter-2)) / 100) * 1%)); |
|||
--x-desaturatedest-3: 75; |
|||
--secondary-lighter-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lighter-1)) / 100) * 1%)); |
|||
--x-desaturatedest-2: 80; |
|||
--secondary-lighter: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lighter)) / 100) * 1%)); |
|||
--x-desaturatedest-1: 85; |
|||
--secondary-lightest-3: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightest-3)) / 100) * 1%)); |
|||
--x-desaturatedest: 90; |
|||
--secondary-lightest-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightest-2)) / 100) * 1%)); |
|||
--secondary-lightest-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightest-1)) / 100) * 1%)); |
|||
--secondary-lightest: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightest)) / 100) * 1%)); |
|||
--secondary-darkish-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkish-2)) / 100 * 1%)); |
|||
--secondary-darkish-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkish-1)) / 100 * 1%)); |
|||
--secondary-darkish: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkish)) / 100 * 1%)); |
|||
--secondary-dark-3: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-dark-3)) / 100 * 1%)); |
|||
--secondary-dark-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-dark-2)) / 100 * 1%)); |
|||
--secondary-dark-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-dark-1)) / 100 * 1%)); |
|||
--secondary-dark: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-dark)) / 100 * 1%)); |
|||
--secondary-darker-3: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darker-3)) / 100 * 1%)); |
|||
--secondary-darker-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darker-2)) / 100 * 1%)); |
|||
--secondary-darker-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darker-1)) / 100 * 1%)); |
|||
--secondary-darker: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darker)) / 100 * 1%)); |
|||
--secondary-darkest-3: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkest-3)) / 100 * 1%)); |
|||
--secondary-darkest-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkest-2)) / 100 * 1%)); |
|||
--secondary-darkest-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkest-1)) / 100 * 1%)); |
|||
--secondary-darkest: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkest)) / 100 * 1%)); |
|||
--secondary-saturatedish: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturatedish)) / 100) * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-saturatedish-1: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturatedish-1)) / 100) * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-saturatedish-2: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturatedish-2)) / 100) * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-saturated: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturated)) / 100) * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-saturated-1: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturated-1)) / 100) * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-saturated-2: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturated-2)) / 100) * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-saturated-3: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturated-3)) / 100) * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-saturateder: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturateder)) / 100) * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-saturateder-1: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturateder-1)) / 100) * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-saturateder-2: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturateder-2)) / 100) * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-saturateder-3: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturateder-3)) / 100) * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-saturatedest: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturatedest)) / 100) * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-desaturatedish: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturatedish)) / 100 * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-desaturatedish-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturatedish-1)) / 100 * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-desaturatedish-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturatedish-2)) / 100 * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-desaturated: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturated)) / 100 * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-desaturated-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturated-1)) / 100 * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-desaturated-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturated-2)) / 100 * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-desaturated-3: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturated-3)) / 100 * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-desaturateder: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturateder)) / 100 * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-desaturateder-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturateder-1)) / 100 * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-desaturateder-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturateder-2)) / 100 * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-desaturateder-3: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturateder-3)) / 100 * 1%), var(--temp-1-secondary-l)); |
|||
--secondary-desaturatedest: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturatedest)) / 100 * 1%), var(--temp-1-secondary-l)); |
|||
--tertiary: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), var(--temp-1-tertiary-l)); |
|||
--tertiary-lightish: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc((100 - (100 - var(--z-tertiary-l)) * (100 - var(--x-lightish)) / 100) * 1%)); |
|||
--tertiary-light: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc((100 - (100 - var(--z-tertiary-l)) * (100 - var(--x-light)) / 100) * 1%)); |
|||
--tertiary-lighter: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc((100 - (100 - var(--z-tertiary-l)) * (100 - var(--x-lighter)) / 100) * 1%)); |
|||
--tertiary-lightest: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc((100 - (100 - var(--z-tertiary-l)) * (100 - var(--x-lightest)) / 100) * 1%)); |
|||
--tertiary-darkish: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc(var(--z-tertiary-l) * (100 - var(--x-darkish)) / 100 * 1%)); |
|||
--tertiary-dark: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc(var(--z-tertiary-l) * (100 - var(--x-dark)) / 100 * 1%)); |
|||
--tertiary-darker: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc(var(--z-tertiary-l) * (100 - var(--x-darker)) / 100 * 1%)); |
|||
--tertiary-darkest: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc(var(--z-tertiary-l) * (100 - var(--x-darkest)) / 100 * 1%)); |
|||
--tertiary-saturatedish: hsl(var(--z-tertiary-h), calc((100 - (100 - var(--z-tertiary-s)) * (100 - var(--x-saturatedish)) / 100) * 1%), var(--temp-1-tertiary-l)); |
|||
--tertiary-saturated: hsl(var(--z-tertiary-h), calc((100 - (100 - var(--z-tertiary-s)) * (100 - var(--x-saturated)) / 100) * 1%), var(--temp-1-tertiary-l)); |
|||
--tertiary-saturateder: hsl(var(--z-tertiary-h), calc((100 - (100 - var(--z-tertiary-s)) * (100 - var(--x-saturateder)) / 100) * 1%), var(--temp-1-tertiary-l)); |
|||
--tertiary-saturatedest: hsl(var(--z-tertiary-h), calc((100 - (100 - var(--z-tertiary-s)) * (100 - var(--x-saturatedest)) / 100) * 1%), var(--temp-1-tertiary-l)); |
|||
--tertiary-desaturatedish: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * (100 - var(--x-desaturatedish)) / 100 * 1%), var(--temp-1-tertiary-l)); |
|||
--tertiary-desaturated: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * (100 - var(--x-desaturated)) / 100 * 1%), var(--temp-1-tertiary-l)); |
|||
--tertiary-desaturateder: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * (100 - var(--x-desaturateder)) / 100 * 1%), var(--temp-1-tertiary-l)); |
|||
--tertiary-desaturatedest: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * (100 - var(--x-desaturatedest)) / 100 * 1%), var(--temp-1-tertiary-l)); |
|||
--accent: hsl(var(--z-accent-h), var(--temp-1-accent-s), var(--temp-1-accent-l)); |
|||
--accent-lightish: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc((100 - (100 - var(--z-accent-l)) * (100 - var(--x-lightish)) / 100) * 1%)); |
|||
--accent-light: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc((100 - (100 - var(--z-accent-l)) * (100 - var(--x-light)) / 100) * 1%)); |
|||
--accent-lighter: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc((100 - (100 - var(--z-accent-l)) * (100 - var(--x-lighter)) / 100) * 1%)); |
|||
--accent-lightest: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc((100 - (100 - var(--z-accent-l)) * (100 - var(--x-lightest)) / 100) * 1%)); |
|||
--accent-darkish: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc(var(--z-accent-l) * (100 - var(--x-darkish)) / 100 * 1%)); |
|||
--accent-dark: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc(var(--z-accent-l) * (100 - var(--x-dark)) / 100 * 1%)); |
|||
--accent-darker: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc(var(--z-accent-l) * (100 - var(--x-darker)) / 100 * 1%)); |
|||
--accent-darkest: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc(var(--z-accent-l) * (100 - var(--x-darkest)) / 100 * 1%)); |
|||
--accent-saturatedish: hsl(var(--z-accent-h), calc((100 - (100 - var(--z-accent-s)) * (100 - var(--x-saturatedish)) / 100) * 1%), var(--temp-1-accent-l)); |
|||
--accent-saturated: hsl(var(--z-accent-h), calc((100 - (100 - var(--z-accent-s)) * (100 - var(--x-saturated)) / 100) * 1%), var(--temp-1-accent-l)); |
|||
--accent-saturateder: hsl(var(--z-accent-h), calc((100 - (100 - var(--z-accent-s)) * (100 - var(--x-saturateder)) / 100) * 1%), var(--temp-1-accent-l)); |
|||
--accent-saturatedest: hsl(var(--z-accent-h), calc((100 - (100 - var(--z-accent-s)) * (100 - var(--x-saturatedest)) / 100) * 1%), var(--temp-1-accent-l)); |
|||
--accent-desaturatedish: hsl(var(--z-accent-h), calc(var(--z-accent-s) * (100 - var(--x-desaturatedish)) / 100 * 1%), var(--temp-1-accent-l)); |
|||
--accent-desaturated: hsl(var(--z-accent-h), calc(var(--z-accent-s) * (100 - var(--x-desaturated)) / 100 * 1%), var(--temp-1-accent-l)); |
|||
--accent-desaturateder: hsl(var(--z-accent-h), calc(var(--z-accent-s) * (100 - var(--x-desaturateder)) / 100 * 1%), var(--temp-1-accent-l)); |
|||
--accent-desaturatedest: hsl(var(--z-accent-h), calc(var(--z-accent-s) * (100 - var(--x-desaturatedest)) / 100 * 1%), var(--temp-1-accent-l)); |
|||
} |
} |
||
body { |
|||
--primary: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-lightish-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-lightish-2)) / 100) * 1%)); |
|||
--primary-lightish-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-lightish-1)) / 100) * 1%)); |
|||
--primary-lightish: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-lightish)) / 100) * 1%)); |
|||
--primary-light-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-light-2)) / 100) * 1%)); |
|||
--primary-light-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-light-1)) / 100) * 1%)); |
|||
--primary-light: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-light)) / 100) * 1%)); |
|||
--primary-lighter-3: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-lighter-3)) / 100) * 1%)); |
|||
--primary-lighter-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-lighter-2)) / 100) * 1%)); |
|||
--primary-lighter-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-lighter-1)) / 100) * 1%)); |
|||
--primary-lighter: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-lighter)) / 100) * 1%)); |
|||
--primary-lightest-3: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-lightest-3)) / 100) * 1%)); |
|||
--primary-lightest-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-lightest-2)) / 100) * 1%)); |
|||
--primary-lightest-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-lightest-1)) / 100) * 1%)); |
|||
--primary-lightest: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc((100 - (100 - var(--z-primary-l)) * (100 - var(--x-lightest)) / 100) * 1%)); |
|||
--primary-darkish-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-darkish-2)) / 100 * 1%)); |
|||
--primary-darkish-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-darkish-1)) / 100 * 1%)); |
|||
--primary-darkish: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-darkish)) / 100 * 1%)); |
|||
--primary-dark-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-dark-2)) / 100 * 1%)); |
|||
--primary-dark-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-dark-1)) / 100 * 1%)); |
|||
--primary-dark: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-dark)) / 100 * 1%)); |
|||
--primary-darker-3: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-darker-3)) / 100 * 1%)); |
|||
--primary-darker-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-darker-2)) / 100 * 1%)); |
|||
--primary-darker-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-darker-1)) / 100 * 1%)); |
|||
--primary-darker: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-darker)) / 100 * 1%)); |
|||
--primary-darkest-3: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-darkest-3)) / 100 * 1%)); |
|||
--primary-darkest-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-darkest-2)) / 100 * 1%)); |
|||
--primary-darkest-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-darkest-1)) / 100 * 1%)); |
|||
--primary-darkest: hsl(var(--z-primary-h), calc(var(--z-primary-s) * 1%), calc(var(--z-primary-l) * (100 - var(--x-darkest)) / 100 * 1%)); |
|||
--primary-saturatedish: hsl(var(--z-primary-h), calc((100 - (100 - var(--z-primary-s)) * (100 - var(--x-saturatedish)) / 100) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-saturatedish-1: hsl(var(--z-primary-h), calc((100 - (100 - var(--z-primary-s)) * (100 - var(--x-saturatedish-1)) / 100) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-saturatedish-2: hsl(var(--z-primary-h), calc((100 - (100 - var(--z-primary-s)) * (100 - var(--x-saturatedish-2)) / 100) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-saturated: hsl(var(--z-primary-h), calc((100 - (100 - var(--z-primary-s)) * (100 - var(--x-saturated)) / 100) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-saturated-1: hsl(var(--z-primary-h), calc((100 - (100 - var(--z-primary-s)) * (100 - var(--x-saturated-1)) / 100) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-saturated-2: hsl(var(--z-primary-h), calc((100 - (100 - var(--z-primary-s)) * (100 - var(--x-saturated-2)) / 100) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-saturated-3: hsl(var(--z-primary-h), calc((100 - (100 - var(--z-primary-s)) * (100 - var(--x-saturated-3)) / 100) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-saturateder: hsl(var(--z-primary-h), calc((100 - (100 - var(--z-primary-s)) * (100 - var(--x-saturateder)) / 100) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-saturateder-1: hsl(var(--z-primary-h), calc((100 - (100 - var(--z-primary-s)) * (100 - var(--x-saturateder-1)) / 100) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-saturateder-2: hsl(var(--z-primary-h), calc((100 - (100 - var(--z-primary-s)) * (100 - var(--x-saturateder-2)) / 100) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-saturateder-3: hsl(var(--z-primary-h), calc((100 - (100 - var(--z-primary-s)) * (100 - var(--x-saturateder-3)) / 100) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-saturatedest: hsl(var(--z-primary-h), calc((100 - (100 - var(--z-primary-s)) * (100 - var(--x-saturatedest)) / 100) * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-desaturatedish: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturatedish)) / 100 * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-desaturatedish-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturatedish-1)) / 100 * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-desaturatedish-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturatedish-2)) / 100 * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-desaturated: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturated)) / 100 * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-desaturated-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturated-1)) / 100 * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-desaturated-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturated-2)) / 100 * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-desaturated-3: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturated-3)) / 100 * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-desaturateder: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturateder)) / 100 * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-desaturateder-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturateder-1)) / 100 * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-desaturateder-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturateder-2)) / 100 * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-desaturateder-3: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturateder-3)) / 100 * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--primary-desaturatedest: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturatedest)) / 100 * 1%), calc(var(--z-primary-l) * 1%)); |
|||
--secondary: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-lightish-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightish-2)) / 100) * 1%)); |
|||
--secondary-lightish-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightish-1)) / 100) * 1%)); |
|||
--secondary-lightish: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightish)) / 100) * 1%)); |
|||
--secondary-light-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-light-2)) / 100) * 1%)); |
|||
--secondary-light-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-light-1)) / 100) * 1%)); |
|||
--secondary-light: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-light)) / 100) * 1%)); |
|||
--secondary-lighter-3: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lighter-3)) / 100) * 1%)); |
|||
--secondary-lighter-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lighter-2)) / 100) * 1%)); |
|||
--secondary-lighter-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lighter-1)) / 100) * 1%)); |
|||
--secondary-lighter: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lighter)) / 100) * 1%)); |
|||
--secondary-lightest-3: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightest-3)) / 100) * 1%)); |
|||
--secondary-lightest-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightest-2)) / 100) * 1%)); |
|||
--secondary-lightest-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightest-1)) / 100) * 1%)); |
|||
--secondary-lightest: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightest)) / 100) * 1%)); |
|||
--secondary-darkish-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-darkish-2)) / 100 * 1%)); |
|||
--secondary-darkish-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-darkish-1)) / 100 * 1%)); |
|||
--secondary-darkish: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-darkish)) / 100 * 1%)); |
|||
--secondary-dark-3: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-dark-3)) / 100 * 1%)); |
|||
--secondary-dark-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-dark-2)) / 100 * 1%)); |
|||
--secondary-dark-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-dark-1)) / 100 * 1%)); |
|||
--secondary-dark: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-dark)) / 100 * 1%)); |
|||
--secondary-darker-3: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-darker-3)) / 100 * 1%)); |
|||
--secondary-darker-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-darker-2)) / 100 * 1%)); |
|||
--secondary-darker-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-darker-1)) / 100 * 1%)); |
|||
--secondary-darker: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-darker)) / 100 * 1%)); |
|||
--secondary-darkest-3: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-darkest-3)) / 100 * 1%)); |
|||
--secondary-darkest-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-darkest-2)) / 100 * 1%)); |
|||
--secondary-darkest-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-darkest-1)) / 100 * 1%)); |
|||
--secondary-darkest: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * 1%), calc(var(--z-secondary-l) * (100 - var(--x-darkest)) / 100 * 1%)); |
|||
--secondary-saturatedish: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturatedish)) / 100) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-saturatedish-1: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturatedish-1)) / 100) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-saturatedish-2: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturatedish-2)) / 100) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-saturated: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturated)) / 100) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-saturated-1: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturated-1)) / 100) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-saturated-2: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturated-2)) / 100) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-saturated-3: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturated-3)) / 100) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-saturateder: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturateder)) / 100) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-saturateder-1: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturateder-1)) / 100) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-saturateder-2: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturateder-2)) / 100) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-saturateder-3: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturateder-3)) / 100) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-saturatedest: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturatedest)) / 100) * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-desaturatedish: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturatedish)) / 100 * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-desaturatedish-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturatedish-1)) / 100 * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-desaturatedish-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturatedish-2)) / 100 * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-desaturated: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturated)) / 100 * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-desaturated-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturated-1)) / 100 * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-desaturated-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturated-2)) / 100 * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-desaturated-3: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturated-3)) / 100 * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-desaturateder: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturateder)) / 100 * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-desaturateder-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturateder-1)) / 100 * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-desaturateder-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturateder-2)) / 100 * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-desaturateder-3: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturateder-3)) / 100 * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--secondary-desaturatedest: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturatedest)) / 100 * 1%), calc(var(--z-secondary-l) * 1%)); |
|||
--tertiary: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * 1%), calc(var(--z-tertiary-l) * 1%)); |
|||
--tertiary-lightish: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * 1%), calc((100 - (100 - var(--z-tertiary-l)) * (100 - var(--x-lightish)) / 100) * 1%)); |
|||
--tertiary-light: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * 1%), calc((100 - (100 - var(--z-tertiary-l)) * (100 - var(--x-light)) / 100) * 1%)); |
|||
--tertiary-lighter: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * 1%), calc((100 - (100 - var(--z-tertiary-l)) * (100 - var(--x-lighter)) / 100) * 1%)); |
|||
--tertiary-lightest: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * 1%), calc((100 - (100 - var(--z-tertiary-l)) * (100 - var(--x-lightest)) / 100) * 1%)); |
|||
--tertiary-darkish: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * 1%), calc(var(--z-tertiary-l) * (100 - var(--x-darkish)) / 100 * 1%)); |
|||
--tertiary-dark: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * 1%), calc(var(--z-tertiary-l) * (100 - var(--x-dark)) / 100 * 1%)); |
|||
--tertiary-darker: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * 1%), calc(var(--z-tertiary-l) * (100 - var(--x-darker)) / 100 * 1%)); |
|||
--tertiary-darkest: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * 1%), calc(var(--z-tertiary-l) * (100 - var(--x-darkest)) / 100 * 1%)); |
|||
--tertiary-saturatedish: hsl(var(--z-tertiary-h), calc((100 - (100 - var(--z-tertiary-s)) * (100 - var(--x-saturatedish)) / 100) * 1%), calc(var(--z-tertiary-l) * 1%)); |
|||
--tertiary-saturated: hsl(var(--z-tertiary-h), calc((100 - (100 - var(--z-tertiary-s)) * (100 - var(--x-saturated)) / 100) * 1%), calc(var(--z-tertiary-l) * 1%)); |
|||
--tertiary-saturateder: hsl(var(--z-tertiary-h), calc((100 - (100 - var(--z-tertiary-s)) * (100 - var(--x-saturateder)) / 100) * 1%), calc(var(--z-tertiary-l) * 1%)); |
|||
--tertiary-saturatedest: hsl(var(--z-tertiary-h), calc((100 - (100 - var(--z-tertiary-s)) * (100 - var(--x-saturatedest)) / 100) * 1%), calc(var(--z-tertiary-l) * 1%)); |
|||
--tertiary-desaturatedish: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * (100 - var(--x-desaturatedish)) / 100 * 1%), calc(var(--z-tertiary-l) * 1%)); |
|||
--tertiary-desaturated: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * (100 - var(--x-desaturated)) / 100 * 1%), calc(var(--z-tertiary-l) * 1%)); |
|||
--tertiary-desaturateder: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * (100 - var(--x-desaturateder)) / 100 * 1%), calc(var(--z-tertiary-l) * 1%)); |
|||
--tertiary-desaturatedest: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * (100 - var(--x-desaturatedest)) / 100 * 1%), calc(var(--z-tertiary-l) * 1%)); |
|||
--accent: hsl(var(--z-accent-h), calc(var(--z-accent-s) * 1%), calc(var(--z-accent-l) * 1%)); |
|||
--accent-lightish: hsl(var(--z-accent-h), calc(var(--z-accent-s) * 1%), calc((100 - (100 - var(--z-accent-l)) * (100 - var(--x-lightish)) / 100) * 1%)); |
|||
--accent-light: hsl(var(--z-accent-h), calc(var(--z-accent-s) * 1%), calc((100 - (100 - var(--z-accent-l)) * (100 - var(--x-light)) / 100) * 1%)); |
|||
--accent-lighter: hsl(var(--z-accent-h), calc(var(--z-accent-s) * 1%), calc((100 - (100 - var(--z-accent-l)) * (100 - var(--x-lighter)) / 100) * 1%)); |
|||
--accent-lightest: hsl(var(--z-accent-h), calc(var(--z-accent-s) * 1%), calc((100 - (100 - var(--z-accent-l)) * (100 - var(--x-lightest)) / 100) * 1%)); |
|||
--accent-darkish: hsl(var(--z-accent-h), calc(var(--z-accent-s) * 1%), calc(var(--z-accent-l) * (100 - var(--x-darkish)) / 100 * 1%)); |
|||
--accent-dark: hsl(var(--z-accent-h), calc(var(--z-accent-s) * 1%), calc(var(--z-accent-l) * (100 - var(--x-dark)) / 100 * 1%)); |
|||
--accent-darker: hsl(var(--z-accent-h), calc(var(--z-accent-s) * 1%), calc(var(--z-accent-l) * (100 - var(--x-darker)) / 100 * 1%)); |
|||
--accent-darkest: hsl(var(--z-accent-h), calc(var(--z-accent-s) * 1%), calc(var(--z-accent-l) * (100 - var(--x-darkest)) / 100 * 1%)); |
|||
--accent-saturatedish: hsl(var(--z-accent-h), calc((100 - (100 - var(--z-accent-s)) * (100 - var(--x-saturatedish)) / 100) * 1%), calc(var(--z-accent-l) * 1%)); |
|||
--accent-saturated: hsl(var(--z-accent-h), calc((100 - (100 - var(--z-accent-s)) * (100 - var(--x-saturated)) / 100) * 1%), calc(var(--z-accent-l) * 1%)); |
|||
--accent-saturateder: hsl(var(--z-accent-h), calc((100 - (100 - var(--z-accent-s)) * (100 - var(--x-saturateder)) / 100) * 1%), calc(var(--z-accent-l) * 1%)); |
|||
--accent-saturatedest: hsl(var(--z-accent-h), calc((100 - (100 - var(--z-accent-s)) * (100 - var(--x-saturatedest)) / 100) * 1%), calc(var(--z-accent-l) * 1%)); |
|||
--accent-desaturatedish: hsl(var(--z-accent-h), calc(var(--z-accent-s) * (100 - var(--x-desaturatedish)) / 100 * 1%), calc(var(--z-accent-l) * 1%)); |
|||
--accent-desaturated: hsl(var(--z-accent-h), calc(var(--z-accent-s) * (100 - var(--x-desaturated)) / 100 * 1%), calc(var(--z-accent-l) * 1%)); |
|||
--accent-desaturateder: hsl(var(--z-accent-h), calc(var(--z-accent-s) * (100 - var(--x-desaturateder)) / 100 * 1%), calc(var(--z-accent-l) * 1%)); |
|||
--accent-desaturatedest: hsl(var(--z-accent-h), calc(var(--z-accent-s) * (100 - var(--x-desaturatedest)) / 100 * 1%), calc(var(--z-accent-l) * 1%)); |
|||
} |
} |
Latest revision as of 06:45, 18 July 2022
@supports (--custom: property) {
:root {
--white: #fff;
--gray-lightest: #DCDCDC;
--gray-lighter: #D3D3D3;
--gray-light: #C0C0C0;
--gray-lightish: #A9A9A9;
--gray: #808080;
--gray-darkish: #696969;
--gray-dark: #3F3F3F;
--gray-darker: #2C2C2C;
--gray-darkest: #232323;
--black: #000;
--text-dark: #000;
--text-light: #fff;
--text: var(--text-dark, #000);
--text-alt: var(--text-light, #fff);
--z-primary-h: 25;
--z-primary-s: 87;
--z-primary-l: 18;
--z-secondary-h: 40;
--z-secondary-s: 17;
--z-secondary-l: 83;
--z-tertiary-h: 59;
--z-tertiary-s: 56;
--z-tertiary-l: 14;
--z-accent-h: 119;
--z-accent-s: 36;
--z-accent-l: 41;
--x-lightish-2: 5;
--x-lightish-1: 10;
--x-lightish: 15;
--x-light-2: 20;
--x-light-1: 25;
--x-light: 30;
--x-lighter-3: 35;
--x-lighter-2: 40;
--x-lighter-1: 45;
--x-lighter: 50;
--x-lightest-1: 55;
--x-lightest-2: 60;
--x-lightest-3: 65;
--x-lightest: 70;
--x-darkish-2: 5;
--x-darkish-1: 10;
--x-darkish: 15;
--x-dark-2: 20;
--x-dark-1: 25;
--x-dark: 30;
--x-darker-3: 35;
--x-darker-2: 40;
--x-darker-1: 45;
--x-darker: 50;
--x-darkest-3: 55;
--x-darkest-2: 60;
--x-darkest-1: 65;
--x-darkest: 70;
--x-saturatedish-2: 8;
--x-saturatedish-1: 16;
--x-saturatedish: 25;
--x-saturated-2: 33;
--x-saturated-1: 41;
--x-saturated: 50;
--x-saturateder-3: 55;
--x-saturateder-2: 60;
--x-saturateder-1: 65;
--x-saturateder: 70;
--x-saturatedest-3: 75;
--x-saturatedest-2: 80;
--x-saturatedest-1: 85;
--x-saturatedest: 90;
--x-desaturatedish-2: 8;
--x-desaturatedish-1: 16;
--x-desaturatedish: 25;
--x-desaturated-2: 33;
--x-desaturated-1: 41;
--x-desaturated: 50;
--x-desaturateder-3: 55;
--x-desaturateder-2: 60;
--x-desaturateder-1: 65;
--x-desaturateder: 70;
--x-desaturatedest-3: 75;
--x-desaturatedest-2: 80;
--x-desaturatedest-1: 85;
--x-desaturatedest: 90;
--temp-100-primary-l: calc(100 - var(--z-primary-l));
--temp-1-primary-s: calc(var(--z-primary-s) * 1%);
--temp-100-primary-s: calc(100 - var(--z-primary-s));
--temp-1-primary-l: calc(var(--z-primary-l) * 1%);
--temp-1-secondary-s: calc(var(--z-secondary-s) * 1%);
--temp-1-secondary-l: calc(var(--z-secondary-l) * 1%);
--temp-1-tertiary-s: calc(var(--z-tertiary-s) * 1%);
--temp-1-tertiary-l: calc(var(--z-tertiary-l) * 1%);
--temp-1-accent-s: calc(var(--z-accent-s) * 1%);
--temp-1-accent-l: calc(var(--z-accent-l) * 1%);
--primary: hsl(var(--z-primary-h), var(--temp-1-primary-s), var(--temp-1-primary-l));
--primary-lightish-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightish-2)) / 100) * 1%));
--primary-lightish-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightish-1)) / 100) * 1%));
--primary-lightish: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightish)) / 100) * 1%));
--primary-light-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-light-2)) / 100) * 1%));
--primary-light-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-light-1)) / 100) * 1%));
--primary-light: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-light)) / 100) * 1%));
--primary-lighter-3: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lighter-3)) / 100) * 1%));
--primary-lighter-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lighter-2)) / 100) * 1%));
--primary-lighter-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lighter-1)) / 100) * 1%));
--primary-lighter: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lighter)) / 100) * 1%));
--primary-lightest-3: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightest-3)) / 100) * 1%));
--primary-lightest-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightest-2)) / 100) * 1%));
--primary-lightest-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightest-1)) / 100) * 1%));
--primary-lightest: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc((100 - var(--temp-100-primary-l) * (100 - var(--x-lightest)) / 100) * 1%));
--primary-darkish-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkish-2)) / 100 * 1%));
--primary-darkish-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkish-1)) / 100 * 1%));
--primary-darkish: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkish)) / 100 * 1%));
--primary-dark-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-dark-2)) / 100 * 1%));
--primary-dark-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-dark-1)) / 100 * 1%));
--primary-dark: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-dark)) / 100 * 1%));
--primary-darker-3: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darker-3)) / 100 * 1%));
--primary-darker-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darker-2)) / 100 * 1%));
--primary-darker-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darker-1)) / 100 * 1%));
--primary-darker: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darker)) / 100 * 1%));
--primary-darkest-3: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkest-3)) / 100 * 1%));
--primary-darkest-2: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkest-2)) / 100 * 1%));
--primary-darkest-1: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkest-1)) / 100 * 1%));
--primary-darkest: hsl(var(--z-primary-h), var(--temp-1-primary-s), calc(var(--z-primary-l) * (100 - var(--x-darkest)) / 100 * 1%));
--primary-saturatedish: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturatedish)) / 100) * 1%), var(--temp-1-primary-l));
--primary-saturatedish-1: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturatedish-1)) / 100) * 1%), var(--temp-1-primary-l));
--primary-saturatedish-2: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturatedish-2)) / 100) * 1%), var(--temp-1-primary-l));
--primary-saturated: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturated)) / 100) * 1%), var(--temp-1-primary-l));
--primary-saturated-1: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturated-1)) / 100) * 1%), var(--temp-1-primary-l));
--primary-saturated-2: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturated-2)) / 100) * 1%), var(--temp-1-primary-l));
--primary-saturated-3: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturated-3)) / 100) * 1%), var(--temp-1-primary-l));
--primary-saturateder: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturateder)) / 100) * 1%), var(--temp-1-primary-l));
--primary-saturateder-1: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturateder-1)) / 100) * 1%), var(--temp-1-primary-l));
--primary-saturateder-2: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturateder-2)) / 100) * 1%), var(--temp-1-primary-l));
--primary-saturateder-3: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturateder-3)) / 100) * 1%), var(--temp-1-primary-l));
--primary-saturatedest: hsl(var(--z-primary-h), calc((100 - var(--temp-100-primary-s) * (100 - var(--x-saturatedest)) / 100) * 1%), var(--temp-1-primary-l));
--primary-desaturatedish: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturatedish)) / 100 * 1%), var(--temp-1-primary-l));
--primary-desaturatedish-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturatedish-1)) / 100 * 1%), var(--temp-1-primary-l));
--primary-desaturatedish-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturatedish-2)) / 100 * 1%), var(--temp-1-primary-l));
--primary-desaturated: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturated)) / 100 * 1%), var(--temp-1-primary-l));
--primary-desaturated-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturated-1)) / 100 * 1%), var(--temp-1-primary-l));
--primary-desaturated-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturated-2)) / 100 * 1%), var(--temp-1-primary-l));
--primary-desaturated-3: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturated-3)) / 100 * 1%), var(--temp-1-primary-l));
--primary-desaturateder: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturateder)) / 100 * 1%), var(--temp-1-primary-l));
--primary-desaturateder-1: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturateder-1)) / 100 * 1%), var(--temp-1-primary-l));
--primary-desaturateder-2: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturateder-2)) / 100 * 1%), var(--temp-1-primary-l));
--primary-desaturateder-3: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturateder-3)) / 100 * 1%), var(--temp-1-primary-l));
--primary-desaturatedest: hsl(var(--z-primary-h), calc(var(--z-primary-s) * (100 - var(--x-desaturatedest)) / 100 * 1%), var(--temp-1-primary-l));
--secondary: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), var(--temp-1-secondary-l));
--secondary-lightish-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightish-2)) / 100) * 1%));
--secondary-lightish-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightish-1)) / 100) * 1%));
--secondary-lightish: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightish)) / 100) * 1%));
--secondary-light-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-light-2)) / 100) * 1%));
--secondary-light-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-light-1)) / 100) * 1%));
--secondary-light: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-light)) / 100) * 1%));
--secondary-lighter-3: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lighter-3)) / 100) * 1%));
--secondary-lighter-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lighter-2)) / 100) * 1%));
--secondary-lighter-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lighter-1)) / 100) * 1%));
--secondary-lighter: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lighter)) / 100) * 1%));
--secondary-lightest-3: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightest-3)) / 100) * 1%));
--secondary-lightest-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightest-2)) / 100) * 1%));
--secondary-lightest-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightest-1)) / 100) * 1%));
--secondary-lightest: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc((100 - (100 - var(--z-secondary-l)) * (100 - var(--x-lightest)) / 100) * 1%));
--secondary-darkish-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkish-2)) / 100 * 1%));
--secondary-darkish-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkish-1)) / 100 * 1%));
--secondary-darkish: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkish)) / 100 * 1%));
--secondary-dark-3: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-dark-3)) / 100 * 1%));
--secondary-dark-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-dark-2)) / 100 * 1%));
--secondary-dark-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-dark-1)) / 100 * 1%));
--secondary-dark: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-dark)) / 100 * 1%));
--secondary-darker-3: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darker-3)) / 100 * 1%));
--secondary-darker-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darker-2)) / 100 * 1%));
--secondary-darker-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darker-1)) / 100 * 1%));
--secondary-darker: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darker)) / 100 * 1%));
--secondary-darkest-3: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkest-3)) / 100 * 1%));
--secondary-darkest-2: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkest-2)) / 100 * 1%));
--secondary-darkest-1: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkest-1)) / 100 * 1%));
--secondary-darkest: hsl(var(--z-secondary-h), var(--temp-1-secondary-s), calc(var(--z-secondary-l) * (100 - var(--x-darkest)) / 100 * 1%));
--secondary-saturatedish: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturatedish)) / 100) * 1%), var(--temp-1-secondary-l));
--secondary-saturatedish-1: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturatedish-1)) / 100) * 1%), var(--temp-1-secondary-l));
--secondary-saturatedish-2: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturatedish-2)) / 100) * 1%), var(--temp-1-secondary-l));
--secondary-saturated: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturated)) / 100) * 1%), var(--temp-1-secondary-l));
--secondary-saturated-1: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturated-1)) / 100) * 1%), var(--temp-1-secondary-l));
--secondary-saturated-2: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturated-2)) / 100) * 1%), var(--temp-1-secondary-l));
--secondary-saturated-3: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturated-3)) / 100) * 1%), var(--temp-1-secondary-l));
--secondary-saturateder: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturateder)) / 100) * 1%), var(--temp-1-secondary-l));
--secondary-saturateder-1: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturateder-1)) / 100) * 1%), var(--temp-1-secondary-l));
--secondary-saturateder-2: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturateder-2)) / 100) * 1%), var(--temp-1-secondary-l));
--secondary-saturateder-3: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturateder-3)) / 100) * 1%), var(--temp-1-secondary-l));
--secondary-saturatedest: hsl(var(--z-secondary-h), calc((100 - (100 - var(--z-secondary-s)) * (100 - var(--x-saturatedest)) / 100) * 1%), var(--temp-1-secondary-l));
--secondary-desaturatedish: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturatedish)) / 100 * 1%), var(--temp-1-secondary-l));
--secondary-desaturatedish-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturatedish-1)) / 100 * 1%), var(--temp-1-secondary-l));
--secondary-desaturatedish-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturatedish-2)) / 100 * 1%), var(--temp-1-secondary-l));
--secondary-desaturated: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturated)) / 100 * 1%), var(--temp-1-secondary-l));
--secondary-desaturated-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturated-1)) / 100 * 1%), var(--temp-1-secondary-l));
--secondary-desaturated-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturated-2)) / 100 * 1%), var(--temp-1-secondary-l));
--secondary-desaturated-3: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturated-3)) / 100 * 1%), var(--temp-1-secondary-l));
--secondary-desaturateder: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturateder)) / 100 * 1%), var(--temp-1-secondary-l));
--secondary-desaturateder-1: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturateder-1)) / 100 * 1%), var(--temp-1-secondary-l));
--secondary-desaturateder-2: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturateder-2)) / 100 * 1%), var(--temp-1-secondary-l));
--secondary-desaturateder-3: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturateder-3)) / 100 * 1%), var(--temp-1-secondary-l));
--secondary-desaturatedest: hsl(var(--z-secondary-h), calc(var(--z-secondary-s) * (100 - var(--x-desaturatedest)) / 100 * 1%), var(--temp-1-secondary-l));
--tertiary: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), var(--temp-1-tertiary-l));
--tertiary-lightish: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc((100 - (100 - var(--z-tertiary-l)) * (100 - var(--x-lightish)) / 100) * 1%));
--tertiary-light: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc((100 - (100 - var(--z-tertiary-l)) * (100 - var(--x-light)) / 100) * 1%));
--tertiary-lighter: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc((100 - (100 - var(--z-tertiary-l)) * (100 - var(--x-lighter)) / 100) * 1%));
--tertiary-lightest: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc((100 - (100 - var(--z-tertiary-l)) * (100 - var(--x-lightest)) / 100) * 1%));
--tertiary-darkish: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc(var(--z-tertiary-l) * (100 - var(--x-darkish)) / 100 * 1%));
--tertiary-dark: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc(var(--z-tertiary-l) * (100 - var(--x-dark)) / 100 * 1%));
--tertiary-darker: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc(var(--z-tertiary-l) * (100 - var(--x-darker)) / 100 * 1%));
--tertiary-darkest: hsl(var(--z-tertiary-h), var(--temp-1-tertiary-s), calc(var(--z-tertiary-l) * (100 - var(--x-darkest)) / 100 * 1%));
--tertiary-saturatedish: hsl(var(--z-tertiary-h), calc((100 - (100 - var(--z-tertiary-s)) * (100 - var(--x-saturatedish)) / 100) * 1%), var(--temp-1-tertiary-l));
--tertiary-saturated: hsl(var(--z-tertiary-h), calc((100 - (100 - var(--z-tertiary-s)) * (100 - var(--x-saturated)) / 100) * 1%), var(--temp-1-tertiary-l));
--tertiary-saturateder: hsl(var(--z-tertiary-h), calc((100 - (100 - var(--z-tertiary-s)) * (100 - var(--x-saturateder)) / 100) * 1%), var(--temp-1-tertiary-l));
--tertiary-saturatedest: hsl(var(--z-tertiary-h), calc((100 - (100 - var(--z-tertiary-s)) * (100 - var(--x-saturatedest)) / 100) * 1%), var(--temp-1-tertiary-l));
--tertiary-desaturatedish: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * (100 - var(--x-desaturatedish)) / 100 * 1%), var(--temp-1-tertiary-l));
--tertiary-desaturated: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * (100 - var(--x-desaturated)) / 100 * 1%), var(--temp-1-tertiary-l));
--tertiary-desaturateder: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * (100 - var(--x-desaturateder)) / 100 * 1%), var(--temp-1-tertiary-l));
--tertiary-desaturatedest: hsl(var(--z-tertiary-h), calc(var(--z-tertiary-s) * (100 - var(--x-desaturatedest)) / 100 * 1%), var(--temp-1-tertiary-l));
--accent: hsl(var(--z-accent-h), var(--temp-1-accent-s), var(--temp-1-accent-l));
--accent-lightish: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc((100 - (100 - var(--z-accent-l)) * (100 - var(--x-lightish)) / 100) * 1%));
--accent-light: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc((100 - (100 - var(--z-accent-l)) * (100 - var(--x-light)) / 100) * 1%));
--accent-lighter: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc((100 - (100 - var(--z-accent-l)) * (100 - var(--x-lighter)) / 100) * 1%));
--accent-lightest: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc((100 - (100 - var(--z-accent-l)) * (100 - var(--x-lightest)) / 100) * 1%));
--accent-darkish: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc(var(--z-accent-l) * (100 - var(--x-darkish)) / 100 * 1%));
--accent-dark: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc(var(--z-accent-l) * (100 - var(--x-dark)) / 100 * 1%));
--accent-darker: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc(var(--z-accent-l) * (100 - var(--x-darker)) / 100 * 1%));
--accent-darkest: hsl(var(--z-accent-h), var(--temp-1-accent-s), calc(var(--z-accent-l) * (100 - var(--x-darkest)) / 100 * 1%));
--accent-saturatedish: hsl(var(--z-accent-h), calc((100 - (100 - var(--z-accent-s)) * (100 - var(--x-saturatedish)) / 100) * 1%), var(--temp-1-accent-l));
--accent-saturated: hsl(var(--z-accent-h), calc((100 - (100 - var(--z-accent-s)) * (100 - var(--x-saturated)) / 100) * 1%), var(--temp-1-accent-l));
--accent-saturateder: hsl(var(--z-accent-h), calc((100 - (100 - var(--z-accent-s)) * (100 - var(--x-saturateder)) / 100) * 1%), var(--temp-1-accent-l));
--accent-saturatedest: hsl(var(--z-accent-h), calc((100 - (100 - var(--z-accent-s)) * (100 - var(--x-saturatedest)) / 100) * 1%), var(--temp-1-accent-l));
--accent-desaturatedish: hsl(var(--z-accent-h), calc(var(--z-accent-s) * (100 - var(--x-desaturatedish)) / 100 * 1%), var(--temp-1-accent-l));
--accent-desaturated: hsl(var(--z-accent-h), calc(var(--z-accent-s) * (100 - var(--x-desaturated)) / 100 * 1%), var(--temp-1-accent-l));
--accent-desaturateder: hsl(var(--z-accent-h), calc(var(--z-accent-s) * (100 - var(--x-desaturateder)) / 100 * 1%), var(--temp-1-accent-l));
--accent-desaturatedest: hsl(var(--z-accent-h), calc(var(--z-accent-s) * (100 - var(--x-desaturatedest)) / 100 * 1%), var(--temp-1-accent-l));
}
}