Automated RAW HSL Variable Generation and Channel Splitting

[datgausaigon]

Hi,

Bricks 2.2 introduced the Style Manager, but advanced CSS workflows often require more than static HSL variables. I propose adding an “Enable RAW value (HSL)” toggle within the Color Palette settings to unlock granular color control.

Proposed Functionality:

1. Toggle: Add an “Enable RAW value (HSL)” switch in the color settings.

2. Custom Suffix: A textbox to define a custom suffix (Default: -raw).

3. Automatic Variable Generation: When enabled, Bricks should automatically generate:

   • Main RAW Variable: --foo-red-raw (Generated value: 1 100% 50%) → This allows wrapping in hsla(var(--foo-red-raw), 0.5).

   • Channel Specifics: *

     • --foo-red-raw-h: 1
     • --foo-red-raw-s: 100%
     • --foo-red-raw-l: 50%

   • Alpha Support: If the color has transparency: --foo-red-raw value becomes 1 100% 50% / 0.5.

Use Case & Practical Example: By stripping the hsl() function and providing raw components, we can easily create dynamic effects without re-defining colors.

Example CSS:

/* Automated variables generated from Bricks Color Palette /
:root {
–foo-red-raw: 1 100% 50%; / Raw HSL components */
–foo-red-raw-h: 1;
–foo-red-raw-s: 100%;
–foo-red-raw-l: 50%;

–foo-red: hsl(var(–foo-red-raw));
}

/* Application: Dynamic Alpha & Animations */
%root% i {
  background: hsla(var(–foo-red-raw), 0.5);
  animation: btn-ring-hsl 2s ease-in-out infinite;
}

@keyframes btn-ring-hsl {
0% {
  /* Starting Alpha = 0.5 /
  box-shadow: 0 0 0 0 hsla(var(–foo-red-raw), 0.5);
}
100% {
  / Ending Alpha = 0 */
  box-shadow: 0 0 0 10px hsla(var(–foo-red-raw), 0);
  }
}

Currently, Bricks HSL variables are locked within the hsl() function. Providing raw values allows developers to manipulate colors dynamically in the CSS editor for shadows, gradients, and complex animations without manual duplication.

Thanks