feat(Tag): allow custom tag color

packages/beeq/src/components/tag/_storybook/bq-tag.stories.tsx

@@ -20,6 +20,7 @@ const meta: Meta = {
     disabled: { control: 'boolean' },
     hidden: { control: 'boolean' },
     removable: { control: 'boolean' },
+    'custom-color': { control: 'text' },
     selected: { control: 'boolean' },
     size: { control: 'select', options: [...TAG_SIZE] },
     variant: { control: 'select', options: [...TAG_VARIANT] },
@@ -37,6 +38,7 @@ const meta: Meta = {
     border: undefined,
     clickable: false,
     color: undefined,
+    'custom-color': undefined,
     disabled: false,
     hidden: false,
     removable: false,
@@ -54,6 +56,7 @@ const Template = (args: Args) => html`
     border=${ifDefined(args.border)}
     ?clickable=${args.clickable}
     color=${ifDefined(args.color)}
+    custom-color=${ifDefined(args['custom-color'])}
     ?disabled=${args.disabled}
     ?hidden=${args.hidden}
     ?removable=${args.removable}
@@ -144,6 +147,23 @@ export const ColorOutline: Story = {
   },
 };
 
+export const CustomColor: Story = {
+  name: 'Color - custom',
+  render: (args: Args) => html`
+    <div class="flex gap-s">
+      <!-- Hex custom color -->
+      ${Template({ ...args, color: '#FF5733', text: 'HEX', icon: 'yin-yang' })}
+      <!-- Rgba custom color -->
+      ${Template({ ...args, color: 'rgba(255, 87, 51, 0.7)', text: 'RGBA', icon: 'rss' })}
+      <!-- Theme custom color palette -->
+      ${Template({ ...args, color: 'data--sky', text: 'Theme Palette', icon: 'palette' })}
+    </div>
+  `,
+  args: {
+    variant: 'outline',
+  },
+};
+
 export const RemovableFilled: Story = {
   name: 'Removable - filled',
   render: (args: Args) => html`

packages/beeq/src/components/tag/bq-tag.tsx

@@ -1,8 +1,8 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
-import { TAG_SIZE, TAG_VARIANT, TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from './bq-tag.types';
+import { TAG_COLOR, TAG_SIZE, TAG_VARIANT, TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from './bq-tag.types';
 import { iconSize, textColor } from './helper';
-import { hasSlotContent, validatePropValue } from '../../shared/utils';
+import { getColorCSSVariable, hasSlotContent, validatePropValue } from '../../shared/utils';
 
 /**
  * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM.
@@ -174,7 +174,7 @@ export class BqTag {
   };
 
   private get isClickable(): boolean {
-    return this.clickable && !this.color && !this.removable;
+    return this.clickable && !this.color && !this.hasCustomColor && !this.removable;
   }
 
   private get isRemovable(): boolean {
@@ -185,6 +185,10 @@ export class BqTag {
     return this.isRemovable && this.hidden;
   }
 
+  private get hasCustomColor(): boolean {
+    return this.color !== undefined ? !TAG_COLOR.includes(this.color) : false;
+  }
+
   // render() function
   // Always the last one in the class.
   // ===================================
@@ -193,13 +197,16 @@ export class BqTag {
     const style = {
       '--bq-tag--icon-prefix-size': `${iconSize(this.size)}px`,
       ...(this.border && { '--bq-tag--border-radius': `var(--bq-radius--${this.border})` }),
+      ...(this.color && { '--bq-tag--background-color': getColorCSSVariable(this.color) ?? this.color }),
+      ...(this.hasCustomColor && { '--bq-text--primary': `var(--bq-text--primary-alt)` }),
     };
 
     return (
       <Host style={style} aria-hidden={this.isHidden ? 'true' : 'false'} hidden={this.isHidden ? 'true' : 'false'}>
         <button
           class={{
-            [`bq-tag bq-tag__${this.size} bq-tag__${this.color || 'default'} bq-tag__${this.variant}`]: true,
+            [`bq-tag bq-tag__${this.size}`]: true,
+            [`bq-tag__${this.color || 'default'} bq-tag__${this.variant}`]: !this.hasCustomColor,
             'is-clickable': this.isClickable,
             'is-removable': this.removable,
             // Active/Selected state when clickable
@@ -236,7 +243,7 @@ export class BqTag {
               <bq-icon
                 size={iconSize(this.size)}
                 name="x-circle"
-                color={this.color ? textColor(this.color)[this.variant] : 'text--primary'}
+                color={this.color && !this.hasCustomColor ? textColor(this.color)[this.variant] : 'text--primary'}
               />
             </bq-button>
           )}

packages/beeq/src/components/tag/bq-tag.types.ts

@@ -2,7 +2,7 @@ export const TAG_SIZE = ['xsmall', 'small', 'medium'] as const;
 export type TTagSize = (typeof TAG_SIZE)[number];
 
 export const TAG_COLOR = ['error', 'gray', 'info', 'success', 'warning'] as const;
-export type TTagColor = (typeof TAG_COLOR)[number];
+export type TTagColor = (typeof TAG_COLOR)[number] | (string & object);
 
 export const TAG_VARIANT = ['outline', 'filled'] as const;
 export type TTagVariant = (typeof TAG_VARIANT)[number];

packages/beeq/src/shared/utils/cssVariables.ts

@@ -7,7 +7,11 @@ const CSSVALUEPREFIX = '--bq-';
  * @return {string} The correspongin CSS custom property variable
  */
 export function getColorCSSVariable(colorName: string): string {
-  return `var(${CSSVALUEPREFIX}${colorName})`;
+  const token = `${CSSVALUEPREFIX}${colorName}`;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(token);
+  if (!value) return undefined;
+
+  return `var(${token})`;
 }
 
 /**