[UIK-6091][color-picker] resolve default colors

semcore/color-picker/__tests__/color-picker.browser-test.tsx

@@ -78,7 +78,7 @@ test.describe(`${TAG.VISUAL} `, () => {
     await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');
-    await page.getByText('oklch(0.82 0.18 80)').waitFor({ state: 'visible' });
+    await page.getByText('--yellow-200').waitFor({ state: 'visible' });
     await expect(page).toHaveScreenshot();
   });
 
@@ -263,7 +263,7 @@ test.describe(`${TAG.VISUAL} `, () => {
     await test.step('Verify hover on text color ', async () => {
       const items = locators.dialog(page, 1).getByRole('option');
       await items.nth(1).hover();
-      await page.getByText('oklch(0.58 0.168 278.2)').waitFor({ state: 'visible' });
+      await page.getByText('--blue-400').waitFor({ state: 'visible' });
       await expect(page).toHaveScreenshot();
     });
 
@@ -517,7 +517,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
     await locators.trigger(page, 0).click();
     await locators.color(page, 4).click();
     await locators.color(page, 0).waitFor({ state: 'visible' });
-    await expect(locators.trigger(page, 0)).toHaveAttribute('aria-label', 'Color field, current color is oklch(0.82 0.18 80)');
+    await expect(locators.trigger(page, 0)).toHaveAttribute('aria-label', 'Color field, current color is --yellow-200');
 
     await locators.trigger(page, 0).click();
     await locators.color(page, 0).click();
@@ -581,7 +581,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
 
     await expect(locators.trigger(page)).toHaveAttribute(
       'aria-label',
-      'Color field, current color is oklch(0.82 0.18 80)',
+      'Color field, current color is --yellow-200',
     );
 
     await page.keyboard.press('Space');

semcore/color-picker/src/ColorPicker.tsx

@@ -3,6 +3,7 @@ import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
+import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import Dropdown from '@semcore/dropdown';
 import ChevronDownM from '@semcore/icon/ChevronDown/m';
 import React from 'react';
@@ -15,17 +16,17 @@ import { localizedMessages } from './translations/__intergalactic-dynamic-locale
 
 const defaultColors = [
   null,
-  'oklch(0.58 0.168 278.2)',
-  'oklch(0.74 0.17 170)',
-  'oklch(0.74 0.17 303)',
-  'oklch(0.82 0.18 80)',
-  'oklch(0.74 0.19 22)',
-  'oklch(0.82 0.088 272.1)',
-  'oklch(0.74 0.225 330)',
-  'oklch(0.74 0.23 146)',
-  'oklch(0.53 0.157 279.2)',
-  'oklch(0.82 0.15 170)',
-  'oklch(0.64 0.223 299.3)',
+  '--blue-400',
+  '--green-300',
+  '--violet-300',
+  '--yellow-200',
+  '--red-300',
+  '--blue-200',
+  '--pink-300',
+  '--salad-300',
+  '--blue-500',
+  '--green-200',
+  '--violet-400',
 ];
 
 class ColorPickerRoot extends Component<
@@ -39,7 +40,7 @@ class ColorPickerRoot extends Component<
   static displayName = 'ColorPicker';
 
   static style = style;
-  static enhance = [i18nEnhance(localizedMessages)] as const;
+  static enhance = [i18nEnhance(localizedMessages), resolveColorEnhance()] as const;
 
   static defaultProps = () => ({
     defaultVisible: false,
@@ -79,11 +80,12 @@ class ColorPickerRoot extends Component<
   }
 
   getColorsProps() {
-    const { colors, getI18nText } = this.asProps;
+    const { colors, getI18nText, resolveColor } = this.asProps;
 
     return {
       colors,
       getI18nText,
+      resolveColor,
     };
   }
 
@@ -185,7 +187,7 @@ function Popper(
 function Colors(
   props: Intergalactic.InternalTypings.InferChildComponentProps<NSColorPicker.Colors.Component, typeof ColorPickerRoot, 'Colors'>,
 ) {
-  const { Children, styles, colors, getI18nText } = props;
+  const { Children, styles, colors, getI18nText, resolveColor } = props;
   const SColors = Root;
 
   return sstyled(styles)(
@@ -202,7 +204,7 @@ function Colors(
         : (
             // TODO: Re-think the component structure.
             // @ts-ignore
-            colors?.map((color) => <ColorPicker.Item value={color} key={color} />)
+            colors?.map((color) => <ColorPicker.Item resolveColor={resolveColor} value={color} key={color} />)
           )}
     </SColors>,
   );

semcore/color-picker/src/PaletteManager.tsx

@@ -4,6 +4,7 @@ import type { Intergalactic } from '@semcore/core';
 import { Component, sstyled, createComponent, Root } from '@semcore/core';
 import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
+import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import uniqueIdEnhance from '@semcore/core/lib/utils/uniqueID';
 import Divider from '@semcore/divider';
 import CheckM from '@semcore/icon/Check/m';
@@ -34,7 +35,7 @@ class PaletteManagerRoot extends Component<
   static displayName = 'PaletteManager';
 
   static style = style;
-  static enhance = [i18nEnhance(localizedMessages), uniqueIdEnhance()] as const;
+  static enhance = [i18nEnhance(localizedMessages), uniqueIdEnhance(), resolveColorEnhance()] as const;
 
   static defaultProps = {
     defaultColors: [],
@@ -76,13 +77,14 @@ class PaletteManagerRoot extends Component<
   };
 
   getColorsProps() {
-    const { colors } = this.asProps;
+    const { colors, resolveColor } = this.asProps;
 
     return {
       colors,
       editable: true,
       onPlusButtonClick: this.bindHandlerButtonClick(),
       getI18nText: this.asProps.getI18nText,
+      resolveColor,
     };
   }
 
@@ -136,7 +138,7 @@ class PaletteManagerRoot extends Component<
 export function Colors(
   props: Intergalactic.InternalTypings.InferChildComponentProps<NSPaletteManager.Colors.Component, typeof PaletteManagerRoot, 'Colors'>,
 ) {
-  const { Children, styles, colors, onPlusButtonClick, getI18nText } = props;
+  const { Children, styles, colors, onPlusButtonClick, getI18nText, resolveColor } = props;
   const SColors = Root;
   const SColorsContainer = Flex;
   const SPlusButton = 'div';
@@ -156,7 +158,7 @@ export function Colors(
           : (
               // TODO: Re-think the component structure.
               // @ts-ignore
-              colors.map((color) => <PaletteManager.Item value={color} key={color} />)
+              colors.map((color) => <PaletteManager.Item resolveColor={resolveColor} value={color} key={color} />)
             )}
       </SColors>
       <SPlusButton onClick={onPlusButtonClick} role='button' aria-label={getI18nText('addColor')}>

semcore/color-picker/src/components/Item.tsx

@@ -27,8 +27,7 @@ const interaction = {
 };
 
 export default function Item(props: ItemAsProps) {
-  const { Children, styles, value, displayLabel, editable, selected, onRemove, getI18nText, uid } =
-    props as any;
+  const { Children, styles, value, displayLabel, editable, selected, onRemove, getI18nText, uid, resolveColor } = props as any;
   const SItemContainer = Root;
   const SLabel = Box;
   const SCloseIcon = Box;
@@ -42,14 +41,13 @@ export default function Item(props: ItemAsProps) {
     }
   }, []);
 
-  const colorValue = value?.startsWith('--') ? `var(${value})` : value;
+  const resolvedColor = resolveColor(value);
 
   return sstyled(styles)(
     <>
       <SItemContainer
         render={Box}
         interaction={interaction}
-        use:value={colorValue}
         role='option'
         aria-selected={selected}
         ref={triggerRef}
@@ -58,8 +56,9 @@ export default function Item(props: ItemAsProps) {
         onKeyDown={handleKeydown}
         timeout={[250, 50]}
         tabIndex={0}
+        use:value={resolvedColor}
       >
-        {displayLabel && <SLabel data-value={colorValue || '#6C6E79'}>A</SLabel>}
+        {displayLabel && <SLabel data-value={resolvedColor || '#6C6E79'}>A</SLabel>}
         <Children />
         {editable && (
           <>
@@ -72,9 +71,7 @@ export default function Item(props: ItemAsProps) {
           </>
         )}
       </SItemContainer>
-      <Hint triggerRef={triggerRef}>
-        {value ?? getI18nText('clearColor')}
-      </Hint>
+      <Hint triggerRef={triggerRef}>{value ?? getI18nText('clearColor')}</Hint>
     </>,
   );
 }