@yahoo/uds 3.59.0-beta.1 → 3.59.0-beta.2

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

@@ -1,521 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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';