feat: added finestra color token

core/core/src/controls-utils.ts

@@ -46,7 +46,9 @@ export const mergeControlValues = (
         controls[key],
         value[key] === undefined
           ? controls[key].value
-          : value[key].value || value[key],
+          : typeof value[key].value === 'undefined'
+          ? value[key]
+          : value[key].value,
       ),
     }),
     {},

examples/stories/src/tutorial/design/tokens/colors.mdx

@@ -24,6 +24,7 @@ import {
   CometColorPalette,
   DuetColorPalette,
   ETradeColorPalette,
+  FinestraColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -717,3 +718,58 @@ import { ETradeColorPalette } from '@component-controls/design-tokens';
   }}
 />
 
+
+## FinestraColor
+
+The [FinestraColor](/api/design-tokens-colors-finestracolor--overview) component displays the color as a small block, with name and hex color on the side. If the color is a primary color, will display as a circle.
+
+Design inspired from [Finestra](https://design.fusionfabric.cloud/foundations/colors).
+
+```
+import { FinestraColorPalette } from '@component-controls/design-tokens';
+
+<FinestraColorPalette
+  palette={{
+    'C 100 - dark': {
+      value: '#2D2D2D',
+    },
+    'C 100': {
+      value: '#414141',
+      name: 'C',
+      primary: true,
+    },
+    'C 75': {
+      value: '#707070',
+    },
+    'C 50': {
+      value: '#9F9F9F',
+    },
+    'C 25': {
+      value: '#CECECE',
+    },
+  }}
+/>
+```
+
+<FinestraColorPalette
+  palette={{
+    'C 100 - dark': {
+      value: '#2D2D2D',
+    },
+    'C 100': {
+      value: '#414141',
+      name: 'C',
+      primary: true,
+    },
+    'C 75': {
+      value: '#707070',
+    },
+    'C 50': {
+      value: '#9F9F9F',
+    },
+    'C 25': {
+      value: '#CECECE',
+    },
+  }}
+/>
+

ui/design-tokens/src/Colors/FinestraColor/FinestraColor.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { FinestraColor, FinestraColorPalette } from './FinestraColor';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/Colors/FinestraColor',
+  component: FinestraColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <FinestraColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: 'V 100',
+  color: {
+    type: 'object',
+    value: {
+      name: 'V',
+      value: { type: 'color', value: '#cf1322' },
+      primary: { type: 'boolean', value: true },
+    },
+  },
+};
+
+export const palette = () => (
+  <FinestraColorPalette
+    palette={{
+      'C 100 - dark': {
+        value: '#2D2D2D',
+      },
+      'C 100': {
+        value: '#414141',
+        name: 'C',
+        primary: true,
+      },
+      'C 75': {
+        value: '#707070',
+      },
+      'C 50': {
+        value: '#9F9F9F',
+      },
+      'C 25': {
+        value: '#CECECE',
+      },
+      'C 10': {
+        value: '#EAEAEA',
+      },
+      'C 2': {
+        value: '#FAFAFA',
+      },
+    }}
+  />
+);

ui/design-tokens/src/Colors/FinestraColor/FinestraColor.tsx

@@ -0,0 +1,98 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import { CheckIcon } from '@primer/octicons-react';
+import { colorToStr, mostReadable } from '../utils';
+import { ColorBlockProps, ColorValue } from '../types';
+import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+
+/**
+ * Color item displaying the color as a small block, with name and hex color on the side. If the color is a primary color, will display as a circle.
+ * Design inspired from [Finestra](https://design.fusionfabric.cloud/foundations/colors).
+ */
+
+export const FinestraColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue, name: colorName, primary } = colorObj;
+
+  const { hex } = colorToStr(colorValue);
+  const textColor = mostReadable(hex);
+  return (
+    <div
+      sx={{
+        display: 'flex',
+        flex: '1',
+        width: 250,
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}
+    >
+      <CopyContainer
+        value={hex}
+        name={name}
+        sxStyle={{ p: primary ? 0 : 2, width: 80 }}
+      >
+        <div
+          sx={{
+            bg: colorValue,
+            color: textColor,
+            position: 'relative',
+
+            borderRadius: primary ? '50%' : undefined,
+            ':after': {
+              content: '""',
+              display: 'block',
+              paddingBottom: '100%',
+            },
+          }}
+        >
+          <div
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+            }}
+          >
+            {primary ? colorName : <CheckIcon />}
+          </div>
+        </div>
+      </CopyContainer>
+
+      <div
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          ml: 4,
+          lineHeight: '1.4rem',
+        }}
+      >
+        <div>{name}</div>
+        <div sx={{ opacity: 0.5 }}>{hex}</div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ *
+ * palette displayed with FinestraColor items
+ * using a css flex display direction column
+ */
+export const FinestraColorPalette: FC<Omit<
+  FlexContainerProps,
+  'children' | 'direction'
+>> = props => (
+  <FlexContainer direction="column" sx={{ width: 250 }} {...props}>
+    {({ name, value, hover }) => (
+      <FinestraColor
+        key={`color_item_${name}}`}
+        name={name}
+        color={value}
+        hover={hover}
+      />
+    )}
+  </FlexContainer>
+);

ui/design-tokens/src/Colors/FinestraColor/index.ts

@@ -0,0 +1 @@
+export * from './FinestraColor';

ui/design-tokens/src/Colors/index.ts

@@ -13,3 +13,4 @@ export * from './CedarColor';
 export * from './CometColor';
 export * from './DuetColor';
 export * from './ETradeColor';
+export * from './FinestraColor';

ui/design-tokens/src/Colors/types.ts

@@ -4,14 +4,42 @@ export type TokenStatus = 'ok' | 'warning' | 'error';
 export type ColorValue =
   | string
   | {
+      /**
+       * color sub name
+       */
       name?: string;
+      /**
+       * color string. can be hex, rgb or hsl
+       */
       value: string;
+      /**
+       * if both dark and light variants are displayed
+       */
       dark?: ColorValue;
+      /**
+       * variable name ex var(--theme-ui-colors-palette4,#dc004e)
+       */
       varName?: string;
+      /**
+       * sass variable name ex: $text-input
+       */
       sass?: string;
+      /**
+       * css class name ex .text-input
+       */
       css?: string;
+      /**
+       * full text description of the color usage.
+       */
       description?: string;
+      /**
+       * design token status. can be work in progrss, obsolete etc.
+       */
       status?: TokenStatus;
+      /**
+       * for color palettes were each color palette has a primary color
+       */
+      primary?: boolean;
     };
 export interface ColorProps {
   /**