From 000f9df65e37744091cb5b94784b3c1de93f984c Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Wed, 2 Oct 2024 14:30:44 +0200 Subject: [PATCH] Split --color-primary color variables into --color-primary-h, --color-primary-s and --color-primary-l variables --- src/assets/css/src/0.2.variables.css | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css index 44e69f6..46d79c9 100755 --- a/src/assets/css/src/0.2.variables.css +++ b/src/assets/css/src/0.2.variables.css @@ -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);