Merge pull request #107 from zamsyt/main

Re-add `hsl-split-decimal`

README.md

@@ -379,7 +379,7 @@ body.theme-dark.css-settings-manager { --accent: #2DB253; }
 
 ### `variable-color` formatting options
 
-There are 7 formatting options:
+There are 8 formatting options:
 
 - `hex`
 
@@ -475,6 +475,23 @@ When `opacity` is set to `true`:
 --accent-a: 1;
 ```
 
+- `hsl-split-decimal`
+
+```
+--accent-h: 211;
+--accent-s: 1;
+--accent-l: 0.5;
+```
+
+When `opacity` is set to `true`:
+
+```
+--accent-h: 211;
+--accent-s: 1;
+--accent-l: 0.5;
+--accent-a: 1;
+```
+
 ## `color-gradient`
 
 `color-gradient` outputs a fixed number of colors along a gradient between two existing color variables. A `format` attribute is also required. *Note: The `to` variable must be set in style settings for the gradient to be generated. Also, gradients will only be generated using colors defined under the current style settings `id`.*

src/SettingHandlers.ts

@@ -115,6 +115,7 @@ export type ColorFormat =
 	| 'hsl'
 	| 'hsl-values'
 	| 'hsl-split'
+	| 'hsl-split-decimal'
 	| 'rgb'
 	| 'rgb-values'
 	| 'rgb-split'

src/SettingsManager.ts

@@ -98,6 +98,33 @@ function generateColorVariables(
 
 			return out;
 		}
+		case 'hsl-split-decimal': {
+			const hsl = parsedColor.hsl();
+			const h = isNaN(hsl[0]) ? 0 : hsl[0];
+			const out = [
+				{
+					key: `${key}-h`,
+					value: h.toString(),
+				},
+				{
+					key: `${key}-s`,
+					value: hsl[1].toString(),
+				},
+				{
+					key: `${key}-l`,
+					value: hsl[2].toString(),
+				},
+				...alts,
+			];
+
+			if (opacity)
+				out.push({
+					key: `${key}-a`,
+					value: parsedColor.alpha().toString(),
+				});
+
+			return out;
+		}
 		case 'rgb':
 			return [
 				{