@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/src/tokens/automation/configs/chip.ts

@@ -0,0 +1,521 @@
+import {
+  alwaysPaletteAliases,
+  backgroundPaletteColors,
+  borderRadii,
+  borderWidths,
+  foregroundPaletteColors,
+  iconSizes,
+  linePaletteColors,
+  shadowVariants,
+  shadowVariantsWithInvert,
+  spacingAliases,
+  spectrumColors,
+  textVariants,
+} from '@yahoo/uds/fixtures';
+import {
+  createComponentStates,
+  createConfigurableProperty,
+  createLayerConfig,
+  createSubComponentConfig,
+  createVariantConfigWithComponentStates,
+  createVariantConfigWithProperties,
+} from '@yahoo/uds/tokens';
+
+import type { ComponentConfig } from '../types';
+
+function defineComponentConfig<T extends ComponentConfig>(config: T): T {
+  // TODO: validation
+  // All subcomponents should have the same variants
+  // The default variant needs to be consistent between sub variants
+  return config;
+}
+
+// TODO: finish the implementation
+export const ChipConfig = defineComponentConfig({
+  label: 'Chip',
+  description:
+    'A chip is a small, interactive element that presents information, actions, or selections in a compact form — commonly used for tags, filters, or user input.',
+  subComponents: {
+    toggle: createSubComponentConfig({
+      label: 'Toggle',
+      description: '',
+      variants: {
+        variant: createVariantConfigWithComponentStates({
+          label: 'Variant',
+          description: '',
+          isConfigurable: true,
+          default: 'primary',
+          options: ['primary', 'secondary', 'brand', 'brand-secondary'],
+          componentStates: {
+            active: createComponentStates({
+              label: 'active',
+              options: ['on', 'off'],
+              layers: {
+                root: createLayerConfig({
+                  label: 'root',
+                  properties: {
+                    backgroundColor: createConfigurableProperty({
+                      name: 'backgroundColor',
+                      label: 'Background color',
+                      typeOfFixture: [
+                        'spectrumColors',
+                        'backgroundPaletteColors',
+                        'alwaysPaletteAliases',
+                      ],
+                      values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
+                      pseudoStates: ['hover', 'pressed'],
+                      defaults: {
+                        primary: 'primary',
+                        secondary: 'secondary',
+                        brand: 'secondary',
+                        'brand-secondary': 'secondary',
+                      },
+                    }),
+                    color: createConfigurableProperty({
+                      name: 'color',
+                      label: 'Text color',
+                      typeOfFixture: [
+                        'spectrumColors',
+                        'foregroundPaletteColors',
+                        'alwaysPaletteAliases',
+                      ],
+                      values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
+                      pseudoStates: ['hover', 'pressed'],
+                      defaults: {
+                        primary: 'primary',
+                        secondary: 'secondary',
+                        brand: 'secondary',
+                        'brand-secondary': 'secondary',
+                      },
+                    }),
+                    borderWidth: createConfigurableProperty({
+                      name: 'borderWidth',
+                      label: 'Border width',
+                      typeOfFixture: ['borderWidths'],
+                      pseudoStates: ['hover', 'pressed'],
+                      values: [borderWidths],
+                      defaults: {
+                        primary: 'thin',
+                        secondary: 'none',
+                        brand: 'none',
+                        'brand-secondary': 'none',
+                      },
+                    }),
+                    borderColor: createConfigurableProperty({
+                      name: 'borderColor',
+                      label: 'Border color',
+                      typeOfFixture: [
+                        'spectrumColors',
+                        'linePaletteColors',
+                        'alwaysPaletteAliases',
+                      ],
+                      values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
+                      pseudoStates: ['hover', 'pressed'],
+                      defaults: {
+                        primary: 'primary',
+                        secondary: 'secondary',
+                        brand: 'brand',
+                        'brand-secondary': 'brand-secondary',
+                      },
+                    }),
+                    shadow: createConfigurableProperty({
+                      name: 'shadow',
+                      label: 'Drop shadow',
+                      typeOfFixture: ['shadowVariants'],
+                      supportsCustom: true,
+                      values: [shadowVariants],
+                      pseudoStates: ['hover', 'pressed'],
+                      defaults: {
+                        primary: '2xl',
+                        secondary: 'xl',
+                        brand: 'md',
+                        'brand-secondary': 'xl',
+                      },
+                    }),
+                    insetShadow: createConfigurableProperty({
+                      name: 'insetShadow',
+                      label: 'Inset shadow',
+                      typeOfFixture: ['shadowVariantsWithInvert'],
+                      supportsCustom: true,
+                      values: [shadowVariantsWithInvert],
+                      pseudoStates: ['hover', 'pressed'],
+                      defaults: {
+                        primary: '2xl-invert',
+                        secondary: 'md-invert',
+                        brand: 'md',
+                        'brand-secondary': 'xl',
+                      },
+                    }),
+                  },
+                }),
+                icon: createLayerConfig({
+                  label: 'icon',
+                  properties: {
+                    color: createConfigurableProperty({
+                      name: 'color',
+                      label: 'Icon color',
+                      typeOfFixture: [
+                        'spectrumColors',
+                        'foregroundPaletteColors',
+                        'alwaysPaletteAliases',
+                      ],
+                      pseudoStates: ['hover', 'pressed'],
+                      values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
+                      defaults: {
+                        primary: 'primary',
+                        secondary: 'secondary',
+                        brand: 'brand',
+                        'brand-secondary': 'brand-secondary',
+                      },
+                    }),
+                  },
+                }),
+              },
+            }),
+          },
+        }),
+      },
+    }),
+    dismissible: createSubComponentConfig({
+      label: 'Dismissible',
+      description: '',
+      variants: {
+        variant: createVariantConfigWithProperties({
+          label: 'Variant',
+          description: '',
+          isConfigurable: true,
+          default: 'primary',
+          options: ['primary', 'secondary', 'brand', 'brand-secondary'],
+          layers: {
+            root: createLayerConfig({
+              label: 'root',
+              properties: {
+                backgroundColor: createConfigurableProperty({
+                  name: 'backgroundColor',
+                  label: 'Background color',
+                  typeOfFixture: [
+                    'spectrumColors',
+                    'backgroundPaletteColors',
+                    'alwaysPaletteAliases',
+                  ],
+                  values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: 'gray-4',
+                    secondary: 'blue-4',
+                    brand: 'red-4',
+                    'brand-secondary': 'purple-4',
+                  },
+                }),
+                color: createConfigurableProperty({
+                  name: 'color',
+                  label: 'Text color',
+                  typeOfFixture: [
+                    'spectrumColors',
+                    'foregroundPaletteColors',
+                    'alwaysPaletteAliases',
+                  ],
+                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: 'gray-9',
+                    secondary: 'blue-9',
+                    brand: 'red-9',
+                    'brand-secondary': 'red-4',
+                  },
+                }),
+                borderWidth: createConfigurableProperty({
+                  name: 'borderWidth',
+                  label: 'Border width',
+                  typeOfFixture: ['borderWidths'],
+                  pseudoStates: ['hover', 'pressed'],
+                  values: [borderWidths],
+                  defaults: {
+                    primary: 'thin',
+                    secondary: 'none',
+                    brand: 'none',
+                    'brand-secondary': 'none',
+                  },
+                }),
+                borderColor: createConfigurableProperty({
+                  name: 'borderColor',
+                  label: 'Border color',
+                  typeOfFixture: ['spectrumColors', 'linePaletteColors', 'alwaysPaletteAliases'],
+                  values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: 'primary',
+                    secondary: 'secondary',
+                    brand: 'brand',
+                    'brand-secondary': 'brand-secondary',
+                  },
+                }),
+                shadow: createConfigurableProperty({
+                  name: 'shadow',
+                  label: 'Drop shadow',
+                  typeOfFixture: ['shadowVariants'],
+                  supportsCustom: true,
+                  values: [shadowVariants],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: '2xl',
+                    secondary: 'xl',
+                    brand: 'md',
+                    'brand-secondary': 'xl',
+                  },
+                }),
+                insetShadow: createConfigurableProperty({
+                  name: 'insetShadow',
+                  label: 'Inset shadow',
+                  typeOfFixture: ['shadowVariantsWithInvert'],
+                  supportsCustom: true,
+                  values: [shadowVariantsWithInvert],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: '2xl-invert',
+                    secondary: 'md-invert',
+                    brand: 'md',
+                    'brand-secondary': 'xl',
+                  },
+                }),
+              },
+            }),
+            icon: createLayerConfig({
+              label: 'icon',
+              properties: {
+                color: createConfigurableProperty({
+                  name: 'color',
+                  label: 'Icon color',
+                  typeOfFixture: [
+                    'spectrumColors',
+                    'foregroundPaletteColors',
+                    'alwaysPaletteAliases',
+                  ],
+                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: 'primary',
+                    secondary: 'secondary',
+                    brand: 'brand',
+                    'brand-secondary': 'brand-secondary',
+                  },
+                }),
+              },
+            }),
+          },
+        }),
+      },
+    }),
+    link: createSubComponentConfig({
+      label: 'Link',
+      description: '',
+      variants: {
+        variant: createVariantConfigWithProperties({
+          label: 'Variant',
+          description: '',
+          isConfigurable: true,
+          default: 'primary',
+          options: ['primary', 'secondary', 'brand', 'brand-secondary'],
+          layers: {
+            root: createLayerConfig({
+              label: 'root',
+              properties: {
+                backgroundColor: createConfigurableProperty({
+                  name: 'backgroundColor',
+                  label: 'Background color',
+                  typeOfFixture: [
+                    'spectrumColors',
+                    'backgroundPaletteColors',
+                    'alwaysPaletteAliases',
+                  ],
+                  values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: 'primary',
+                    secondary: 'secondary',
+                    brand: 'secondary',
+                    'brand-secondary': 'secondary',
+                  },
+                }),
+                color: createConfigurableProperty({
+                  name: 'color',
+                  label: 'Text color',
+                  typeOfFixture: [
+                    'spectrumColors',
+                    'foregroundPaletteColors',
+                    'alwaysPaletteAliases',
+                  ],
+                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: 'primary',
+                    secondary: 'secondary',
+                    brand: 'secondary',
+                    'brand-secondary': 'secondary',
+                  },
+                }),
+                borderWidth: createConfigurableProperty({
+                  name: 'borderWidth',
+                  label: 'Border width',
+                  typeOfFixture: ['borderWidths'],
+                  values: [borderWidths],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: 'thin',
+                    secondary: 'none',
+                    brand: 'none',
+                    'brand-secondary': 'none',
+                  },
+                }),
+                borderColor: createConfigurableProperty({
+                  name: 'borderColor',
+                  label: 'Border color',
+                  typeOfFixture: ['spectrumColors', 'linePaletteColors', 'alwaysPaletteAliases'],
+                  values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: 'primary',
+                    secondary: 'secondary',
+                    brand: 'brand',
+                    'brand-secondary': 'brand-secondary',
+                  },
+                }),
+                shadow: createConfigurableProperty({
+                  name: 'shadow',
+                  label: 'Drop shadow',
+                  typeOfFixture: ['shadowVariants'],
+                  supportsCustom: true,
+                  values: [shadowVariants],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: '2xl',
+                    secondary: 'xl',
+                    brand: 'md',
+                    'brand-secondary': 'xl',
+                  },
+                }),
+                insetShadow: createConfigurableProperty({
+                  name: 'insetShadow',
+                  label: 'Inset shadow',
+                  typeOfFixture: ['shadowVariantsWithInvert'],
+                  supportsCustom: true,
+                  values: [shadowVariantsWithInvert],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: '2xl-invert',
+                    secondary: 'md-invert',
+                    brand: 'md',
+                    'brand-secondary': 'xl',
+                  },
+                }),
+              },
+            }),
+            icon: createLayerConfig({
+              label: 'icon',
+              properties: {
+                color: createConfigurableProperty({
+                  name: 'color',
+                  label: 'Icon color',
+                  typeOfFixture: [
+                    'spectrumColors',
+                    'foregroundPaletteColors',
+                    'alwaysPaletteAliases',
+                  ],
+                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
+                  pseudoStates: ['hover', 'pressed'],
+                  defaults: {
+                    primary: 'primary',
+                    secondary: 'secondary',
+                    brand: 'brand',
+                    'brand-secondary': 'brand-secondary',
+                  },
+                }),
+              },
+            }),
+          },
+        }),
+      },
+    }),
+  },
+  variants: {
+    size: createVariantConfigWithProperties({
+      label: 'Size',
+      description: 'These sizes will apply across all variants',
+      isConfigurable: true,
+      default: 'md',
+      options: ['sm', 'md'],
+      layers: {
+        root: createLayerConfig({
+          label: 'root',
+          properties: {
+            spacingHorizontal: createConfigurableProperty({
+              name: 'spacingHorizontal',
+              label: 'Spacing horizontal',
+              typeOfFixture: ['spacingAliases'],
+              values: [spacingAliases],
+              defaults: {
+                sm: '3',
+                md: '3',
+              },
+            }),
+            spacingVertical: createConfigurableProperty({
+              name: 'spacingVertical',
+              label: 'Spacing vertical',
+              typeOfFixture: ['spacingAliases'],
+              values: [spacingAliases],
+              defaults: {
+                sm: '1',
+                md: '1.5',
+              },
+            }),
+            gap: createConfigurableProperty({
+              name: 'gap',
+              label: 'Gap',
+              typeOfFixture: ['spacingAliases'],
+              values: [spacingAliases],
+              defaults: {
+                sm: '2',
+                md: '2',
+              },
+            }),
+            textVariant: createConfigurableProperty({
+              name: 'textVariant',
+              label: 'Text variant',
+              typeOfFixture: ['textVariants'],
+              values: [textVariants],
+              defaults: {
+                sm: 'label1',
+                md: 'label1',
+              },
+            }),
+            borderRadius: createConfigurableProperty({
+              name: 'borderRadius',
+              label: 'Border radius',
+              typeOfFixture: ['borderRadii'],
+              values: [borderRadii],
+              defaults: {
+                sm: 'full',
+                md: 'full',
+              },
+            }),
+          },
+        }),
+        icon: createLayerConfig({
+          label: 'icon',
+          properties: {
+            size: createConfigurableProperty({
+              name: 'iconSize',
+              label: 'Icon size',
+              typeOfFixture: ['iconSizes'],
+              values: [iconSizes],
+              defaults: {
+                sm: 'sm',
+                md: 'md',
+              },
+            }),
+          },
+        }),
+      },
+    }),
+  },
+});

package/src/tokens/automation/configs/divider.ts

@@ -0,0 +1,112 @@
+import {
+  alwaysPaletteAliases,
+  borderWidths,
+  foregroundPaletteColors,
+  linePaletteColors,
+  spacingAliases,
+  spectrumColors,
+  textVariants,
+} from '@yahoo/uds/fixtures';
+import {
+  createConfigurableProperty,
+  createLayerConfig,
+  createVariantConfigWithProperties,
+} from '@yahoo/uds/tokens';
+
+import type { ComponentConfig } from '../types';
+
+function defineComponentConfig<T extends ComponentConfig>(config: T): T {
+  return config;
+}
+
+export const DividerConfig = defineComponentConfig({
+  label: 'Divider',
+  description:
+    'Divider lines are purely decorative and non-interactive, serving as a visual guide. Use as horizontal and vertical lines.',
+  variants: {
+    variant: createVariantConfigWithProperties({
+      label: 'Variant',
+      description: '',
+      isConfigurable: true,
+      default: 'primary',
+      options: ['primary', 'secondary', 'tertiary', 'muted'],
+      layers: {
+        root: createLayerConfig({
+          label: 'root',
+          properties: {
+            gap: createConfigurableProperty({
+              name: 'gap',
+              label: 'Gap',
+              typeOfFixture: ['spacingAliases'],
+              values: [spacingAliases],
+              defaults: {
+                primary: '2',
+                secondary: '2',
+                tertiary: '2',
+                muted: '2',
+              },
+            }),
+          },
+        }),
+        line: createLayerConfig({
+          label: 'line',
+          properties: {
+            borderWidth: createConfigurableProperty({
+              name: 'borderWidth',
+              label: 'Thickness',
+              typeOfFixture: ['borderWidths'],
+              values: [borderWidths.filter((width) => width !== 'none')],
+              defaults: {
+                primary: 'thin',
+                secondary: 'thin',
+                tertiary: 'thin',
+                muted: 'thin',
+              },
+            }),
+            borderColor: createConfigurableProperty({
+              name: 'borderColor',
+              label: 'Border color',
+              typeOfFixture: ['spectrumColors', 'linePaletteColors', 'alwaysPaletteAliases'],
+              values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
+              defaults: {
+                primary: 'primary',
+                secondary: 'secondary',
+                tertiary: 'tertiary',
+                muted: 'muted',
+              },
+            }),
+          },
+        }),
+        label: createLayerConfig({
+          label: 'label',
+          properties: {
+            textVariant: createConfigurableProperty({
+              name: 'textVariant',
+              label: 'text variant',
+              typeOfFixture: ['textVariants'],
+              values: [textVariants],
+              defaults: {
+                primary: 'label3',
+                secondary: 'label3',
+                tertiary: 'label3',
+                muted: 'label3',
+              },
+            }),
+            color: createConfigurableProperty({
+              name: 'color',
+              label: 'Text color',
+              typeOfFixture: ['spectrumColors', 'foregroundPaletteColors', 'alwaysPaletteAliases'],
+              values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
+              defaults: {
+                primary: 'primary',
+                secondary: 'secondary',
+                tertiary: 'tertiary',
+                muted: 'muted',
+              },
+            }),
+          },
+        }),
+      },
+    }),
+  },
+});

package/src/tokens/automation/configs/index.ts

@@ -0,0 +1,10 @@
+export * from './avatar';
+export * from './badge';
+export * from './checkbox';
+export * from './chip';
+export * from './divider';
+export * from './input';
+export * from './link';
+export * from './menu';
+export * from './radio';
+export * from './switch';