Fix color declarations

.changeset/mean-carrots-accept.md

@@ -0,0 +1,27 @@
+---
+"@studiocms/ui": patch
+---
+
+Changes the way colors are declared to allow for a better customization experience.
+
+Before, we would use raw HSL values in order to be able to modify them later on:
+```css
+:root {
+	--background-base: 0 0% 6%;
+}
+```
+
+This introduces an unnecessary hurdle to customization, since most other libraries ship with either their own color values and spaces or a different approach entirely. Thus, the goal of this PR is to replace this approach with a simpler one. We will now default to HSL functions instead of the raw values:
+
+```css
+:root {
+	--background-base: hsl(0 0% 6%);
+}
+```
+
+Migrating from this can be a little tedious if the old system was used in custom components. You can use this regular expression with VSCode's (or any other IDE's) search & replace feature to replace all instances of the old syntax with the new:
+
+**Search Value**: `hsl[a]?\((var\([A-Za-z-\d]+\))\)`
+**Replace Value**: `$1`
+
+Please make sure to manually search for `hsl(var(` and `hsla(var(` after running the above to make sure all previous values have been replaced. 

docs/src/components/landing/EcosystemSection.astro

@@ -75,7 +75,7 @@ import SwordsIcon from '~/assets/swords.svg';
         width: calc((100% / 3) - (4rem / 3));
         padding: 2rem;
         border-radius: 1rem;
-        background-color: hsl(var(--background-step-1));
+        background-color: var(--background-step-1);
         display: flex;
         flex-direction: column;
         gap: .5rem;

docs/src/components/landing/HeroSection.astro

@@ -182,7 +182,7 @@ import GitHubIcon from '~/components/icons/GitHubIcon.astro';
    }
 
    .hero > div {
-      background-color: hsl(var(--background-step-1));
+      background-color: var(--background-step-1);
       border-radius: 1rem;
       padding: 2rem;
       width: 100%;

docs/src/components/landing/ShowcaseSection.astro

@@ -75,7 +75,7 @@ const splitCodeBasedOnComment = (code: string): string => {
         margin-top: 4rem !important;
         padding: 4rem 10vw;
         width: 100%;
-        background: hsl(var(--background-step-1));
+        background: var(--background-step-1);
     }
 
     @media screen and (max-width: 1500px) {
@@ -98,7 +98,7 @@ const splitCodeBasedOnComment = (code: string): string => {
     }
 
     .preview-container {
-        background-color: hsl(var(--background-base));
+        background-color: var(--background-base);
         padding: 2rem;
         border-radius: 1rem;
         display: flex;

docs/src/components/landing/SocialProofCard.astro

@@ -36,7 +36,7 @@ const { avatar, name, handle, message, image } = Astro.props;
     height: fit-content;
     border-radius: 1rem;
     padding: 2rem;
-    background-color: hsl(var(--background-step-1));
+    background-color: var(--background-step-1);
   }
 
   .social-proof-author {
@@ -61,7 +61,7 @@ const { avatar, name, handle, message, image } = Astro.props;
 
   .social-proof-author-handle {
     font-weight: 300;
-    color: hsl(var(--text-muted));
+    color: var(--text-muted);
     font-size: .875em;
     line-height: 1;
   }

docs/src/components/landing/styles.css

@@ -1,6 +1,6 @@
 form {
 	padding: 1.5rem;
-	background: hsl(var(--background-base));
+	background: var(--background-base);
 }
 
 form > span {

docs/src/content/docs/docs/guides/customization.mdx

@@ -24,22 +24,22 @@ the primary color, it'd look like this:
 
 ```css showLinenumbers title="custom.css"
 :root {
-	--primary-base: 0 0% 100%;
-	--primary-hover: 0 0% 80%;
-	--primary-active: 0 0% 90%;
+	--primary-base: hsl(0 0% 100%);
+	--primary-hover: hsl(0 0% 80%);
+	--primary-active: hsl(0 0% 90%);
 }
 
 [data-theme='light'] :root {
-	--primary-base: 0 0% 0%;
-	--primary-hover: 0 0% 20%;
-	--primary-active: 0 0% 10%;
+	--primary-base: hsl(0 0% 0%);
+	--primary-hover: hsl(0 0% 20%);
+	--primary-active: hsl(0 0% 10%);
 }
 ```
 
 If you make significant changes to the colors, remember to also adjust the light theme.
 
 Below, you will find all the CSS variables used in StudioCMS UI. Always make sure to provide them as 
-HSL values without commas. You can use them in your CSS like this: `background-color: hsl(var(--background-base));`.
+HSL values without commas. You can use them in your CSS like this: `background-color: var(--background-base);`.
 
 ## Disabling CSS Injection
 
@@ -85,38 +85,38 @@ import { Accordion, AccordionItem } from 'studiocms:ui/components';
 		<div slot="summary">Dark Mode</div>
 		<div>
 
-| Variable | Description | Default |
-| --- | --- | --- |
-| `--background-base` | Base background color | `0 0% 6%` |
-| `--background-step-1` | Background color step 1 | `0 0% 8%` |
-| `--background-step-2` | Background color step 2 | `0 0% 10%` |
-| `--background-step-3` | Background color step 3 | `0 0% 14%` |
-| `--text-normal` | Normal text color | `0 0% 100%` |
-| `--text-muted` | Muted text color | `0 0% 54%` |
-| `--text-inverted` | Inverted text color | `0 0% 0%` |
-| `--border` | Border color | `240 5% 17%` |
-| `--shadow` | Shadow color | `0 0% 0%` |
-| `--default-base` | Default color base | `0 0% 14%` |
-| `--default-hover` | Default color hover | `0 0% 21%` |
-| `--default-active` | Default color active | `0 0% 15%` |
-| `--primary-base` | Primary color base | `259 83% 73%` |
-| `--primary-hover` | Primary color hover | `259 77% 78%` |
-| `--primary-active` | Primary color active | `259 73% 67%` |
-| `--success-base` | Success color base | `142 71% 46%` |
-| `--success-hover` | Success color hover | `142 72% 61%` |
-| `--success-active` | Success color active | `142 87% 52%` |
-| `--warning-base` | Warning color base | `48 96% 53%` |
-| `--warning-hover` | Warning color hover | `48 97% 70%` |
-| `--warning-active` | Warning color active | `48 100% 61%` |
-| `--danger-base` | Danger color base | `339 97% 31%` |
-| `--danger-hover` | Danger color hover | `337 98% 37%` |
-| `--danger-active` | Danger color active | `337 88% 32%` |
-| `--info-base` | Info color base | `217 92% 52%` |
-| `--info-hover` | Info color hover | `214 95% 58%` |
-| `--info-active` | Info color active | `214 85% 52%` |
-| `--mono-base` | Mono color base | `0 0% 100%` |
-| `--mono-hover` | Mono color hover | `0 0% 90%` |
-| `--mono-active` | Mono color active | `0 0% 95%` |
+| Variable              | Description             | Default                |
+| ---                   | ---                     | ---                    |
+| `--background-base`   | Base background color   | `hsl(0, 0%, 6%)`       |
+| `--background-step-1` | Background color step 1 | `hsl(0, 0%, 8%)`       |
+| `--background-step-2` | Background color step 2 | `hsl(0, 0%, 10%)`      |
+| `--background-step-3` | Background color step 3 | `hsl(0, 0%, 14%)`      |
+| `--text-normal`       | Normal text color       | `hsl(0, 0%, 100%)`     |
+| `--text-muted`        | Muted text color        | `hsl(0, 0%, 54%)`      |
+| `--text-inverted`     | Inverted text color     | `hsl(0, 0%, 0%)`       | 
+| `--border`            | Border color            | `hsl(240, 5%, 17%)`    |
+| `--shadow`            | Shadow color            | `hsl(0, 0%, 0% / 0.5)` |
+| `--default-base`      | Default color base      | `hsl(0, 0%, 14%)`      |
+| `--default-hover`     | Default color hover     | `hsl(0, 0%, 21%)`      |
+| `--default-active`    | Default color active    | `hsl(0, 0%, 15%)`      |
+| `--primary-base`      | Primary color base      | `hsl(259, 83%, 73%)`   |
+| `--primary-hover`     | Primary color hover     | `hsl(259, 77%, 78%)`   |
+| `--primary-active`    | Primary color active    | `hsl(259, 73%, 67%)`   |
+| `--success-base`      | Success color base      | `hsl(142, 71%, 46%)`   |
+| `--success-hover`     | Success color hover     | `hsl(142, 72%, 61%)`   |
+| `--success-active`    | Success color active    | `hsl(142, 87%, 52%)`   |   
+| `--warning-base`      | Warning color base      | `hsl(48, 96%, 53%)`    |
+| `--warning-hover`     | Warning color hover     | `hsl(48, 97%, 70%)`    |
+| `--warning-active`    | Warning color active    | `hsl(48, 100%, 61%)`   |
+| `--danger-base`       | Danger color base       | `hsl(339, 97%, 31%)`   |
+| `--danger-hover`      | Danger color hover      | `hsl(337, 98%, 37%)`   |
+| `--danger-active`     | Danger color active     | `hsl(337, 88%, 32%)`   |
+| `--info-base`         | Info color base         | `hsl(217, 92%, 52%)`   |
+| `--info-hover`        | Info color hover        | `hsl(214, 95%, 58%)`   |
+| `--info-active`       | Info color active       | `hsl(214, 85%, 52%)`   |
+| `--mono-base`         | Mono color base         | `hsl(0, 0%, 100%)`     |
+| `--mono-hover`        | Mono color hover        | `hsl(0, 0%, 90%)`      |
+| `--mono-active`       | Mono color active       | `hsl(0, 0%, 95%)`      |
 
 		</div>
 	</AccordionItem>
@@ -125,38 +125,38 @@ import { Accordion, AccordionItem } from 'studiocms:ui/components';
 		<div slot="summary">Light Mode</div>
 		<div>
 
-| Variable | Description | Default |
-| --- | --- | --- |
-| `--background-base` | Base background color | `0 0% 97%` |
-| `--background-step-1` | Background color step 1 | `0 0% 90%` |
-| `--background-step-2` | Background color step 2 | `0 0% 85%` |
-| `--background-step-3` | Background color step 3 | `0 0% 80%` |
-| `--text-normal` | Normal text color | `0 0% 0%` |
-| `--text-muted` | Muted text color | `0 0% 24%` |
-| `--text-inverted` | Inverted text color | `0 0% 100%` |
-| `--border` | Border color | `263 5% 68%` |
-| `--shadow` | Shadow color | `0 0% 65%` |
-| `--default-base` | Default color base | `0 0% 74%` |
-| `--default-hover` | Default color hover | `0 0% 81%` |
-| `--default-active` | Default color active | `0 0% 91%` |
-| `--primary-base` | Primary color base | `259 85% 61%` |
-| `--primary-hover` | Primary color hover | `259 78% 56%` |
-| `--primary-active` | Primary color active | `259 71% 50%` |
-| `--success-base` | Success color base | `142 59% 47%` |
-| `--success-hover` | Success color hover | `142 62% 56%` |
-| `--success-active` | Success color active | `142 87% 59%` |
-| `--warning-base` | Warning color base | `48 92% 46%` |
-| `--warning-hover` | Warning color hover | `48 88% 43%` |
-| `--warning-active` | Warning color active | `48 85% 40%` |
-| `--danger-base` | Danger color base | `339 97% 31%` |
-| `--danger-hover` | Danger color hover | `337 98% 37%` |
-| `--danger-active` | Danger color active | `337 88% 45%` |
-| `--info-base` | Info color base | `217 92% 52%` |
-| `--info-hover` | Info color hover | `214 95% 58%` |
-| `--info-active` | Info color active | `214 85% 52%` |
-| `--mono-base` | Mono color base | `0 0% 0%` |
-| `--mono-hover` | Mono color hover | `0 0% 10%` |
-| `--mono-active` | Mono color active | `0 0% 5%` |
+| Variable              | Description             | Default                 |
+| ---                   | ---                     | ---                     |
+| `--background-base`   | Base background color   | `hsl(0, 0%, 97%)`       |
+| `--background-step-1` | Background color step 1 | `hsl(0, 0%, 90%)`       |
+| `--background-step-2` | Background color step 2 | `hsl(0, 0%, 85%)`       |
+| `--background-step-3` | Background color step 3 | `hsl(0, 0%, 80%)`       |
+| `--text-normal`       | Normal text color       | `hsl(0, 0%, 0%)`        |
+| `--text-muted`        | Muted text color        | `hsl(0, 0%, 24%)`       |
+| `--text-inverted`     | Inverted text color     | `hsl(0, 0%, 100%)`      |
+| `--border`            | Border color            | `hsl(263, 5%, 68%)`     |
+| `--shadow`            | Shadow color            | `hsl(0, 0%, 65% / 0.5)` |
+| `--default-base`      | Default color base      | `hsl(0, 0%, 74%)`       |
+| `--default-hover`     | Default color hover     | `hsl(0, 0%, 81%)`       |
+| `--default-active`    | Default color active    | `hsl(0, 0%, 91%)`       |
+| `--primary-base`      | Primary color base      | `hsl(259, 85%, 61%)`    |
+| `--primary-hover`     | Primary color hover     | `hsl(259, 78%, 56%)`    |
+| `--primary-active`    | Primary color active    | `hsl(259, 71%, 50%)`    |
+| `--success-base`      | Success color base      | `hsl(142, 59%, 47%)`    |
+| `--success-hover`     | Success color hover     | `hsl(142, 62%, 56%)`    |
+| `--success-active`    | Success color active    | `hsl(142, 87%, 59%)`    |
+| `--warning-base`      | Warning color base      | `hsl(48, 92%, 46%)`     |
+| `--warning-hover`     | Warning color hover     | `hsl(48, 88%, 43%)`     |
+| `--warning-active`    | Warning color active    | `hsl(48, 85%, 40%)`     |
+| `--danger-base`       | Danger color base       | `hsl(339, 97%, 31%)`    |
+| `--danger-hover`      | Danger color hover      | `hsl(337, 98%, 37%)`    |
+| `--danger-active`     | Danger color active     | `hsl(337, 88%, 45%)`    |
+| `--info-base`         | Info color base         | `hsl(217, 92%, 52%)`    |
+| `--info-hover`        | Info color hover        | `hsl(214, 95%, 58%)`    |
+| `--info-active`       | Info color active       | `hsl(214, 85%, 52%)`    |
+| `--mono-base`         | Mono color base         | `hsl(0, 0%, 0%)`        |
+| `--mono-hover`        | Mono color hover        | `hsl(0, 0%, 10%)`       |
+| `--mono-active`       | Mono color active       | `hsl(0, 0%, 5%)`        |
 
 		</div>
 	</AccordionItem>
@@ -167,26 +167,29 @@ import { Accordion, AccordionItem } from 'studiocms:ui/components';
 
 | Variable | Description | Default |
 | --- | --- | --- |
-| `--text-light` | Light text color | `0 0% 100%` |
-| `--text-dark` | Dark text color | `0 0% 0%` |
-| `--default-flat` | Default flat color | `var(--default-base) / 0.5` |
-| `--default-flat-hover` | Default flat hover color | `var(--default-base) / 0.75` |
-| `--default-flat-active` | Default flat active color | `var(--default-base) / 0.85` |
-| `--primary-flat` | Primary flat color | `var(--primary-base) / 0.1` |
-| `--primary-flat-hover` | Primary flat hover color | `var(--primary-base) / 0.25` |
-| `--primary-flat-active` | Primary flat active color | `var(--primary-base) / 0.35` |
-| `--success-flat` | Success flat color | `var(--success-base) / 0.1` |
-| `--success-flat-hover` | Success flat hover color | `var(--success-base) / 0.25` |
-| `--success-flat-active` | Success flat active color | `var(--success-base) / 0.35` |
-| `--warning-flat` | Warning flat color | `var(--warning-base) / 0.1` |
-| `--warning-flat-hover` | Warning flat hover color | `var(--warning-base) / 0.25` |
-| `--warning-flat-active` | Warning flat active color | `var(--warning-base) / 0.35` |
-| `--danger-flat` | Danger flat color | `var(--danger-base) / 0.1` |
-| `--danger-flat-hover` | Danger flat hover color | `var(--danger-base) / 0.25` |
-| `--danger-flat-active` | Danger flat active color | `var(--danger-base) / 0.35` |
-| `--info-flat` | Info flat color | `var(--info-base) / 0.1` |
-| `--info-flat-hover` | Info flat hover color | `var(--info-base) / 0.25` |
-| `--info-flat-active` | Info flat active color | `var(--info-base) / 0.35` |
+| `--text-light` | Light text color | `hsl(0 0% 100%)` |
+| `--text-dark` | Dark text color | `hsl(0 0% 0%)` |
+| `--default-flat` | Default flat color | `hsl(0 0% 14% / 0.5)` |
+| `--default-flat-hover` | Default flat hover color | `hsl(0 0% 14% / 0.75)` |
+| `--default-flat-active` | Default flat active color | `hsl(0 0% 14% / 0.85)` |
+| `--primary-flat` | Primary flat color | `hsl(259 83% 73% / 0.1)` |
+| `--primary-flat-hover` | Primary flat hover color | `hsl(259 83% 73% / 0.25)` |
+| `--primary-flat-active` | Primary flat active color | `hsl(259 83% 73% / 0.35)` |
+| `--success-flat` | Success flat color | `hsl(142 71% 46% / 0.1)` |
+| `--success-flat-hover` | Success flat hover color | `hsl(142 71% 46% / 0.25)` |
+| `--success-flat-active` | Success flat active color | `hsl(142 71% 46% / 0.35)` |
+| `--warning-flat` | Warning flat color | `hsl(48 96% 53% / 0.1)` |
+| `--warning-flat-hover` | Warning flat hover color | `hsl(48 96% 53% / 0.25)` |
+| `--warning-flat-active` | Warning flat active color | `hsl(48 96% 53% / 0.35)` |
+| `--danger-flat` | Danger flat color | `hsl(339 97% 31% / 0.1)` |
+| `--danger-flat-hover` | Danger flat hover color | `hsl(339 97% 31% / 0.25)` |
+| `--danger-flat-active` | Danger flat active color | `hsl(339 97% 31% / 0.35)` |
+| `--info-flat` | Info flat color | `hsl(217 92% 52% / 0.1)` |
+| `--info-flat-hover` | Info flat hover color | `hsl(217 92% 52% / 0.25)` |
+| `--info-flat-active` | Info flat active color | `hsl(217 92% 52% / 0.35)` |
+| `--mono-flat` | Info flat color | `hsl(0 0% 100% / 0.1)` |
+| `--mono-flat-hover` | Info flat hover color | `hsl(0 0% 100% / 0.25)` |
+| `--mono-flat-active` | Info flat active color | `hsl(0 0% 100% / 0.35)` |
 
 		</div>
 	</AccordionItem>

docs/src/pages/index.astro

@@ -115,7 +115,7 @@ for (let i = 0; i < socialProofEntries.length; i += chunkSize) {
     }
 
     .studiocms-footer-text span:last-of-type {
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
     }
 
     .socials {
@@ -126,13 +126,13 @@ for (let i = 0; i < socialProofEntries.length; i += chunkSize) {
     }
 
     .socials a {
-        color: hsla(var(--text-normal) / .75);
+        color: var(--text-muted);
         transition: all .15s ease;
         display: flex;
     }
 
     .socials a:hover {
-        color: hsl(var(--text-normal));
+        color: var(--text-normal);
     }
 
     .brand-newsletter {
@@ -173,7 +173,7 @@ for (let i = 0; i < socialProofEntries.length; i += chunkSize) {
     }
 
     section {
-        color: hsl(var(--text-normal)) !important;
+        color: var(--text-normal) !important;
     }
 
     footer.sl-flex {

docs/src/starlightOverrides/SiteTitle.astro

@@ -121,7 +121,7 @@ const { siteTitle, siteTitleHref } = Astro.props;
   .site-title > div {
     display: flex;
     align-items: center;
-    color: hsl(var(--text-normal));
+    color: var(--text-normal);
   }
 
   .site-title > div {

packages/studiocms_ui/src/components/Accordion/accordion.css

@@ -34,22 +34,22 @@
 
 .sui-accordion.outlined,
 .sui-accordion.filled {
-	border: 1px solid hsl(var(--border));
+	border: 1px solid var(--border);
 	border-radius: var(--radius-sm);
 }
 
 .sui-accordion.filled {
-	background-color: hsl(var(--background-step-1));
+	background-color: var(--background-step-1);
 }
 
 .sui-accordion.separated .sui-accordion-item,
 .sui-accordion.outlined .sui-accordion-item,
 .sui-accordion.filled .sui-accordion-item {
-	border-bottom: 1px solid hsl(var(--border));
+	border-bottom: 1px solid var(--border);
 }
 
 .sui-accordion.separated .sui-accordion-item:first-of-type {
-	border-top: 1px solid hsl(var(--border));
+	border-top: 1px solid var(--border);
 }
 
 .sui-accordion.filled .sui-accordion-item:last-of-type,
@@ -58,7 +58,7 @@
 }
 
 .sui-accordion-summary {
-	color: hsl(var(--text-normal));
+	color: var(--text-normal);
 	display: flex;
 	flex-direction: row;
 	gap: .5rem;