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

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

@@ -1,344 +0,0 @@
-import {
-  alwaysPaletteAliases,
-  backgroundPaletteColors,
-  borderWidths,
-  foregroundPaletteColors,
-  iconSizes,
-  linePaletteColors,
-  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 {
-  return config;
-}
-
-export const MenuConfig = defineComponentConfig({
-  label: 'Menu',
-  description:
-    'A menu is a component that offers a list of choices to the user, such as a set of actions or functions. ',
-  variants: {
-    size: createVariantConfigWithProperties({
-      label: 'size',
-      description: '',
-      isConfigurable: true,
-      options: ['default'],
-      default: 'default',
-      layers: {
-        root: createLayerConfig({
-          label: 'root',
-          properties: {},
-        }),
-        startIcon: createLayerConfig({
-          label: 'startIcon',
-          properties: {
-            size: createConfigurableProperty({
-              name: 'iconSize',
-              label: 'Icon size',
-              typeOfFixture: ['iconSizes'],
-              values: [iconSizes],
-              defaults: {
-                default: 'sm',
-              },
-            }),
-          },
-        }),
-        endIcon: createLayerConfig({
-          label: 'endIcon',
-          properties: {
-            size: createConfigurableProperty({
-              name: 'iconSize',
-              label: 'Icon size',
-              typeOfFixture: ['iconSizes'],
-              values: [iconSizes],
-              defaults: {
-                default: 'sm',
-              },
-            }),
-          },
-        }),
-      },
-    }),
-  },
-  subComponents: {
-    item: createSubComponentConfig({
-      label: 'Item',
-      description: '',
-      variants: {
-        variant: createVariantConfigWithComponentStates({
-          label: 'variant',
-          description: '',
-          isConfigurable: true,
-          options: ['default'],
-          default: 'default',
-          componentStates: {
-            active: createComponentStates({
-              label: 'active',
-              options: ['on', 'off'],
-              layers: {
-                root: createLayerConfig({
-                  label: 'root',
-                  properties: {
-                    backgroundColor: createConfigurableProperty({
-                      name: 'backgroundColor',
-                      pseudoStates: ['hover', 'focused'],
-                      label: 'background color',
-                      typeOfFixture: [
-                        'spectrumColors',
-                        'backgroundPaletteColors',
-                        'alwaysPaletteAliases',
-                      ],
-                      values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
-                      defaults: {
-                        default: 'brand-secondary',
-                      },
-                    }),
-                  },
-                }),
-
-                text: createLayerConfig({
-                  label: 'text',
-                  properties: {
-                    color: createConfigurableProperty({
-                      name: 'color',
-                      label: 'Text color',
-                      pseudoStates: ['hover', 'focused'],
-                      typeOfFixture: [
-                        'spectrumColors',
-                        'foregroundPaletteColors',
-                        'alwaysPaletteAliases',
-                      ],
-                      values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                      defaults: {
-                        default: 'brand',
-                      },
-                    }),
-                    textVariant: createConfigurableProperty({
-                      name: 'textVariant',
-                      label: 'Text variant',
-                      typeOfFixture: ['textVariants'],
-                      pseudoStates: ['hover', 'focused'],
-                      values: [textVariants],
-                      defaults: {
-                        default: 'label2',
-                      },
-                    }),
-                  },
-                }),
-
-                icon: createLayerConfig({
-                  label: 'icon',
-                  properties: {
-                    color: createConfigurableProperty({
-                      name: 'color',
-                      label: 'Icon color',
-                      pseudoStates: ['hover', 'focused'],
-                      typeOfFixture: [
-                        'spectrumColors',
-                        'foregroundPaletteColors',
-                        'alwaysPaletteAliases',
-                      ],
-                      values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                      defaults: {
-                        default: 'brand',
-                      },
-                    }),
-                  },
-                }),
-              },
-            }),
-          },
-        }),
-      },
-    }),
-    itemCheckbox: createSubComponentConfig({
-      label: 'ItemCheckbox',
-      description: '',
-      variants: {
-        variant: createVariantConfigWithComponentStates({
-          label: 'variant',
-          description: '',
-          isConfigurable: true,
-          options: ['default'],
-          default: 'default',
-          componentStates: {
-            active: createComponentStates({
-              label: 'active',
-              options: ['on', 'off'],
-              layers: {
-                root: createLayerConfig({
-                  label: 'root',
-                  properties: {
-                    backgroundColor: createConfigurableProperty({
-                      name: 'backgroundColor',
-                      label: 'background color',
-                      pseudoStates: ['hover', 'focused'],
-                      typeOfFixture: [
-                        'spectrumColors',
-                        'backgroundPaletteColors',
-                        'alwaysPaletteAliases',
-                      ],
-                      values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
-                      defaults: {
-                        default: 'brand-secondary',
-                      },
-                    }),
-                  },
-                }),
-
-                text: createLayerConfig({
-                  label: 'text',
-                  properties: {
-                    textVariant: createConfigurableProperty({
-                      name: 'textVariant',
-                      label: 'Text variant',
-                      typeOfFixture: ['textVariants'],
-                      pseudoStates: ['hover', 'focused'],
-                      values: [textVariants],
-                      defaults: {
-                        default: 'label2',
-                      },
-                    }),
-                    color: createConfigurableProperty({
-                      name: 'color',
-                      label: 'Text color',
-                      pseudoStates: ['hover', 'focused'],
-                      typeOfFixture: [
-                        'spectrumColors',
-                        'foregroundPaletteColors',
-                        'alwaysPaletteAliases',
-                      ],
-                      values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                      defaults: {
-                        default: 'brand',
-                      },
-                    }),
-                  },
-                }),
-
-                startIcon: createLayerConfig({
-                  label: 'startIcon',
-                  properties: {
-                    color: createConfigurableProperty({
-                      name: 'color',
-                      label: 'Icon color',
-                      pseudoStates: ['hover', 'focused'],
-                      typeOfFixture: [
-                        'spectrumColors',
-                        'foregroundPaletteColors',
-                        'alwaysPaletteAliases',
-                      ],
-                      values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                      defaults: {
-                        default: 'brand',
-                      },
-                    }),
-                  },
-                }),
-
-                endIcon: createLayerConfig({
-                  label: 'endIcon',
-                  properties: {
-                    color: createConfigurableProperty({
-                      name: 'color',
-                      label: 'Icon color',
-                      pseudoStates: ['hover', 'focused'],
-                      typeOfFixture: [
-                        'spectrumColors',
-                        'foregroundPaletteColors',
-                        'alwaysPaletteAliases',
-                      ],
-                      values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                      defaults: {
-                        default: 'brand',
-                      },
-                    }),
-                  },
-                }),
-              },
-            }),
-          },
-        }),
-      },
-    }),
-    divider: createSubComponentConfig({
-      label: 'divider',
-      description: '',
-      variants: {
-        variant: createVariantConfigWithProperties({
-          label: 'variant',
-          description: '',
-          isConfigurable: true,
-          options: ['default'],
-          default: 'default',
-          layers: {
-            root: createLayerConfig({
-              label: 'root',
-              properties: {},
-            }),
-            text: createLayerConfig({
-              label: 'text',
-              properties: {
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'text color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    default: 'muted',
-                  },
-                }),
-                textVariant: createConfigurableProperty({
-                  name: 'textVariant',
-                  label: 'text variant',
-                  typeOfFixture: ['textVariants'],
-                  values: [textVariants],
-                  defaults: {
-                    default: 'label3',
-                  },
-                }),
-              },
-            }),
-            line: createLayerConfig({
-              label: 'line',
-              properties: {
-                borderWidth: createConfigurableProperty({
-                  name: 'borderWidth',
-                  label: 'line thickness',
-                  typeOfFixture: ['borderWidths'],
-                  values: [borderWidths.filter((width) => width !== 'none')],
-                  defaults: {
-                    default: 'thin',
-                  },
-                }),
-                borderColor: createConfigurableProperty({
-                  name: 'borderColor',
-                  label: 'line color',
-                  typeOfFixture: ['spectrumColors', 'linePaletteColors', 'alwaysPaletteAliases'],
-                  values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    default: 'transparent',
-                  },
-                }),
-              },
-            }),
-          },
-        }),
-      },
-    }),
-  },
-});

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

@@ -1,225 +0,0 @@
-import {
-  alwaysPaletteAliases,
-  backgroundPaletteColors,
-  borderWidths,
-  foregroundPaletteColors,
-  linePaletteColors,
-  shadowVariants,
-  shadowVariantsWithInvert,
-  spacingAliases,
-  spectrumColors,
-  textVariants,
-} from '@yahoo/uds/fixtures';
-import {
-  createComponentStates,
-  createConfigurableProperty,
-  createLayerConfig,
-  createVariantConfigWithComponentStates,
-  createVariantConfigWithProperties,
-} from '@yahoo/uds/tokens';
-
-import type { ComponentConfig } from '../types';
-
-function defineComponentConfig<T extends ComponentConfig>(config: T): T {
-  return config;
-}
-
-export const RadioConfig = defineComponentConfig({
-  label: 'Radio',
-  description: 'Component for demo purposes and testing the automation',
-  variants: {
-    variant: createVariantConfigWithComponentStates({
-      label: 'Variant',
-      description:
-        'Preview the colors, spacing values, and motion effects of your component at their default size.',
-      isConfigurable: true,
-      options: ['primary', 'secondary', 'alert', 'alert-secondary'],
-      default: 'primary',
-      componentStates: {
-        value: createComponentStates({
-          label: 'value',
-          options: ['checked', 'unchecked'],
-          layers: {
-            root: createLayerConfig({
-              label: 'root',
-              properties: {
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'Label color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  pseudoStates: ['hover', 'pressed'],
-                  defaults: {
-                    primary: 'primary',
-                    secondary: 'secondary',
-                    alert: 'alert',
-                    'alert-secondary': 'alert-secondary',
-                  },
-                }),
-              },
-            }),
-            radio: createLayerConfig({
-              label: 'radio',
-              properties: {
-                borderColor: createConfigurableProperty({
-                  name: 'borderColor',
-                  label: 'Radio border color',
-                  typeOfFixture: ['spectrumColors', 'linePaletteColors', 'alwaysPaletteAliases'],
-                  values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
-                  pseudoStates: ['hover', 'pressed'],
-                  defaults: {
-                    primary: 'tertiary',
-                    secondary: 'secondary',
-                    alert: 'alert',
-                    'alert-secondary': 'alert-secondary',
-                  },
-                }),
-                backgroundColor: createConfigurableProperty({
-                  name: 'backgroundColor',
-                  label: 'Radio background color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'backgroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
-                  pseudoStates: ['hover', 'pressed'],
-                  defaults: {
-                    primary: 'secondary',
-                    secondary: 'secondary',
-                    alert: 'secondary',
-                    'alert-secondary': 'secondary',
-                  },
-                }),
-                shadow: createConfigurableProperty({
-                  name: 'shadow',
-                  label: 'Drop shadow',
-                  typeOfFixture: ['shadowVariants'],
-                  supportsCustom: true,
-                  values: [shadowVariants],
-                  pseudoStates: ['hover', 'pressed'],
-                  defaults: {
-                    primary: '2xl',
-                    secondary: 'xl',
-                    alert: 'xl',
-                    'alert-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',
-                    alert: 'xl',
-                    'alert-secondary': 'xl-invert',
-                  },
-                }),
-              },
-            }),
-            radioCircle: createLayerConfig({
-              label: 'radioCircle',
-              properties: {
-                backgroundColor: createConfigurableProperty({
-                  name: 'backgroundColor',
-                  label: 'Radio circle color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'backgroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
-                  pseudoStates: ['hover', 'pressed'],
-                  defaults: {
-                    primary: 'brand',
-                    secondary: 'brand-secondary',
-                    alert: 'alert',
-                    'alert-secondary': 'alert-secondary',
-                  },
-                }),
-              },
-            }),
-          },
-        }),
-      },
-    }),
-    size: createVariantConfigWithProperties({
-      label: 'Size',
-      description: 'These sizes will apply across all variants',
-      isConfigurable: true,
-      default: 'sm',
-      options: ['sm', 'md'],
-      layers: {
-        // TODO: add height and width once we support properties with random pixel values
-        root: createLayerConfig({
-          label: 'root',
-          properties: {
-            gap: createConfigurableProperty({
-              name: 'gap',
-              label: 'Gap',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                sm: '2',
-                md: '2.5',
-              },
-            }),
-            textVariant: createConfigurableProperty({
-              name: 'textVariant',
-              label: 'Text variant',
-              typeOfFixture: ['textVariants'],
-              values: [textVariants],
-              defaults: {
-                sm: 'label4',
-                md: 'label2',
-              },
-            }),
-          },
-        }),
-        radio: createLayerConfig({
-          label: 'radio',
-          properties: {
-            borderWidth: createConfigurableProperty({
-              name: 'borderWidth',
-              label: 'Radio border width',
-              typeOfFixture: ['borderWidths'],
-              values: [borderWidths],
-              defaults: {
-                sm: 'thin',
-                md: 'thin',
-              },
-            }),
-            height: createConfigurableProperty({
-              name: 'height',
-              label: 'Radio height',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                sm: '4',
-                md: '5',
-              },
-            }),
-            width: createConfigurableProperty({
-              name: 'width',
-              label: 'Radio width',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                sm: '4',
-                md: '5',
-              },
-            }),
-          },
-        }),
-      },
-    }),
-  },
-});