studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Split --color-primary color variables into --color-primary-h, --color-primary-s and --color-primary-l variables

Browse source
This commit is contained in:
Timothée Goguely 2024-10-02 14:30:44 +02:00
parent a2268543c9
commit 000f9df65e
1 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/assets/css/src/0.2.variables.css
View file

@ -24,14 +24,17 @@
--color-black-70: hsla(0, 0%, 10%, .7); /* Black 70 */
--color-black-100: hsla(0, 0%, 10%, 1); /* Black 100 */
--color-black: var(--color-black-100); /* Black */
--color-primary-10: hsla(177, 100%, 29%, .1); /* Focus 10% */
--color-primary-20: hsla(177, 100%, 29%, .2); /* Focus 20% */
--color-primary-40: hsla(177, 100%, 29%, .4); /* Focus 40% */
--color-primary-50: hsla(177, 100%, 29%, .5); /* Focus 50% */
--color-primary-70: hsla(177, 100%, 29%, .7); /* Focus 70% */
--color-primary-100: hsla(177, 100%, 29%, 1); /* Focus 100% */
--color-primary-h: 177;
--color-primary-s: 100%;
--color-primary-l: 29%;
--color-primary-10: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .1); /* Focus 10% */
--color-primary-20: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .2); /* Focus 20% */
--color-primary-40: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .4); /* Focus 40% */
--color-primary-50: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .5); /* Focus 50% */
--color-primary-70: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .7); /* Focus 70% */
--color-primary-100: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 1); /* Focus 100% */
--color-primary: var(--color-primary-100); /* Focus */
--color-primary-hover: hsla(177, 100%, 22%, 1); /* Focus - Accent */
--color-primary-hover: hsla(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 7%), 1); /* Focus - Accent */
--color-brand-100: hsla(347, 84%, 45%, 1); /* Brand 100% */
--color-brand: var(--color-brand-100); /* Brand */
--color-background: var(--color-white);