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

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

@@ -1,297 +0,0 @@
-import {
-  alwaysPaletteAliases,
-  backgroundPaletteColors,
-  borderRadii,
-  borderWidths,
-  foregroundPaletteColors,
-  iconSizes,
-  linePaletteColors,
-  spacingAliases,
-  spectrumColors,
-  textVariants,
-} from '@yahoo/uds/fixtures';
-import {
-  createConfigurableProperty,
-  createLayerConfig,
-  createSubComponentConfig,
-  createVariantConfigWithProperties,
-} from '@yahoo/uds/tokens';
-
-import type { ComponentConfig } from '../types';
-
-function defineComponentConfig<T extends ComponentConfig>(config: T): T {
-  return config;
-}
-
-export const AvatarConfig = defineComponentConfig({
-  label: 'Avatar',
-  description:
-    "An avatar is a visual element that represents a user or entity, usually shown as a circle or square with an image, icon, or initials. It's commonly used in profiles, comments, or messages to help identify people.",
-  variants: {
-    size: createVariantConfigWithProperties({
-      label: 'Size',
-      description: 'These sizes will apply across all variants',
-      isConfigurable: true,
-      default: 'md',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      layers: {
-        root: createLayerConfig({
-          label: 'root',
-          properties: {
-            height: createConfigurableProperty({
-              name: 'height',
-              label: 'Height',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                xs: '6',
-                sm: '7',
-                md: '10',
-                lg: '12',
-                xl: '16',
-              },
-            }),
-            width: createConfigurableProperty({
-              name: 'width',
-              label: 'Width',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                xs: '6',
-                sm: '7',
-                md: '10',
-                lg: '12',
-                xl: '16',
-              },
-            }),
-            borderWidth: createConfigurableProperty({
-              name: 'borderWidth',
-              label: 'Border width',
-              typeOfFixture: ['borderWidths'],
-              values: [borderWidths],
-              defaults: {
-                xs: 'thin',
-                sm: 'thin',
-                md: 'thin',
-                lg: 'thin',
-                xl: 'thin',
-              },
-            }),
-            textVariant: createConfigurableProperty({
-              name: 'textVariant',
-              label: 'Text variant',
-              typeOfFixture: ['textVariants'],
-              values: [textVariants],
-              defaults: {
-                xs: 'caption1',
-                sm: 'caption2',
-                md: 'headline1',
-                lg: 'title4',
-                xl: 'title3',
-              },
-            }),
-          },
-        }),
-        icon: createLayerConfig({
-          label: 'icon',
-          properties: {
-            iconSize: createConfigurableProperty({
-              name: 'iconSize',
-              label: 'Icon size',
-              typeOfFixture: ['iconSizes'],
-              values: [iconSizes],
-              defaults: {
-                xs: 'sm',
-                sm: 'sm',
-                md: 'md',
-                lg: 'lg',
-                xl: 'lg',
-              },
-            }),
-          },
-        }),
-      },
-    }),
-  },
-  subComponents: {
-    text: createSubComponentConfig({
-      label: 'Text',
-      description: '',
-      variants: {
-        variant: createVariantConfigWithProperties({
-          label: 'Variant',
-          description:
-            'Shapes and sizes defined here will be applied across the entire family of Avatar (Icon, Image, Text)',
-          isConfigurable: true,
-          options: ['primary', 'secondary'],
-          default: 'primary',
-          layers: {
-            root: createLayerConfig({
-              label: 'root',
-              properties: {
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'text color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    primary: 'brand',
-                    secondary: 'secondary',
-                  },
-                }),
-                backgroundColor: createConfigurableProperty({
-                  name: 'backgroundColor',
-                  label: 'background color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'backgroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    primary: 'primary',
-                    secondary: 'secondary',
-                  },
-                }),
-                borderColor: createConfigurableProperty({
-                  name: 'borderColor',
-                  label: 'border color',
-                  typeOfFixture: ['spectrumColors', 'linePaletteColors', 'alwaysPaletteAliases'],
-                  values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    primary: 'brand',
-                    secondary: 'secondary',
-                  },
-                }),
-                borderRadius: createConfigurableProperty({
-                  name: 'borderRadius',
-                  label: 'Border radius',
-                  typeOfFixture: ['borderRadii'],
-                  values: [borderRadii],
-                  defaults: {
-                    primary: 'full',
-                    secondary: 'sm',
-                  },
-                }),
-              },
-            }),
-          },
-        }),
-      },
-    }),
-    image: createSubComponentConfig({
-      label: 'Image',
-      description: '',
-      variants: {
-        variant: createVariantConfigWithProperties({
-          label: 'Variant',
-          description:
-            'Shapes and sizes defined here will be applied across the entire family of Avatar (Icon, Image, Text)',
-          isConfigurable: true,
-          options: ['primary', 'secondary'],
-          default: 'primary',
-          layers: {
-            root: createLayerConfig({
-              label: 'root',
-              properties: {
-                borderColor: createConfigurableProperty({
-                  name: 'borderColor',
-                  label: 'border color',
-                  typeOfFixture: ['spectrumColors', 'linePaletteColors', 'alwaysPaletteAliases'],
-                  values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    primary: 'muted',
-                    secondary: 'muted',
-                  },
-                }),
-                borderRadius: createConfigurableProperty({
-                  name: 'borderRadius',
-                  label: 'border radius',
-                  typeOfFixture: ['borderRadii'],
-                  values: [borderRadii],
-                  defaults: {
-                    primary: 'full',
-                    secondary: 'sm',
-                  },
-                }),
-              },
-            }),
-          },
-        }),
-      },
-    }),
-    icon: createSubComponentConfig({
-      label: 'Icon',
-      description: '',
-      variants: {
-        variant: createVariantConfigWithProperties({
-          label: 'Variant',
-          description:
-            'Shapes and sizes defined here will be applied across the entire family of Avatar (Icon, Image, Text)',
-          isConfigurable: true,
-          options: ['primary', 'secondary'],
-          default: 'primary',
-          layers: {
-            root: createLayerConfig({
-              label: 'root',
-              properties: {
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'icon color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    primary: 'muted',
-                    secondary: 'muted',
-                  },
-                }),
-                backgroundColor: createConfigurableProperty({
-                  name: 'backgroundColor',
-                  label: 'background color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'backgroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    primary: 'secondary',
-                    secondary: 'secondary',
-                  },
-                }),
-                borderColor: createConfigurableProperty({
-                  name: 'borderColor',
-                  label: 'border color',
-                  typeOfFixture: ['spectrumColors', 'linePaletteColors', 'alwaysPaletteAliases'],
-                  values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    primary: 'primary',
-                    secondary: 'primary',
-                  },
-                }),
-                borderRadius: createConfigurableProperty({
-                  name: 'borderRadius',
-                  label: 'border radius',
-                  typeOfFixture: ['borderRadii'],
-                  values: [borderRadii],
-                  defaults: {
-                    primary: 'full',
-                    secondary: 'sm',
-                  },
-                }),
-              },
-            }),
-          },
-        }),
-      },
-    }),
-  },
-});

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

@@ -1,306 +0,0 @@
-import {
-  alwaysPaletteAliases,
-  backgroundPaletteColors,
-  borderRadii,
-  borderWidths,
-  foregroundPaletteColors,
-  iconSizes,
-  linePaletteColors,
-  shadowVariants,
-  shadowVariantsWithInvert,
-  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;
-}
-
-// TODO: add negative margin to the icon as a property
-export const BadgeConfig = defineComponentConfig({
-  label: 'Badge',
-  description: 'Component for demo purposes and testing the automation',
-  variants: {
-    size: createVariantConfigWithProperties({
-      label: 'Size',
-      description: 'These sizes will apply across all variants',
-      isConfigurable: true,
-      default: 'md',
-      options: ['xs', 'sm', 'md', 'lg'],
-      layers: {
-        root: createLayerConfig({
-          label: 'root',
-          properties: {
-            spacingHorizontal: createConfigurableProperty({
-              name: 'spacingHorizontal',
-              label: 'Spacing horizontal',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                xs: '2',
-                sm: '4',
-                md: '6',
-                lg: '8',
-              },
-            }),
-            spacingVertical: createConfigurableProperty({
-              name: 'spacingVertical',
-              label: 'Spacing vertical',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                xs: '0.5',
-                sm: '1',
-                md: '1.5',
-                lg: '2',
-              },
-            }),
-            gap: createConfigurableProperty({
-              name: 'gap',
-              label: 'Gap',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                xs: '2',
-                sm: '4',
-                md: '6',
-                lg: '8',
-              },
-            }),
-            textVariant: createConfigurableProperty({
-              name: 'textVariant',
-              label: 'Text variant',
-              typeOfFixture: ['textVariants'],
-              values: [textVariants],
-              defaults: {
-                xs: 'label4',
-                sm: 'label3',
-                md: 'label2',
-                lg: 'label1',
-              },
-            }),
-          },
-        }),
-        icon: createLayerConfig({
-          label: 'icon',
-          properties: {
-            size: createConfigurableProperty({
-              name: 'iconSize',
-              label: 'Icon size',
-              typeOfFixture: ['iconSizes'],
-              values: [iconSizes],
-              defaults: {
-                xs: 'sm',
-                sm: 'sm',
-                md: 'md',
-                lg: 'lg',
-              },
-            }),
-          },
-        }),
-      },
-    }),
-    variant: createVariantConfigWithProperties({
-      label: 'Variants',
-      description: '',
-      isConfigurable: true,
-      default: 'primary',
-      options: [
-        'primary',
-        'secondary',
-        'brand',
-        'brand-secondary',
-        'alert',
-        'alert-secondary',
-        'warning',
-        'warning-secondary',
-        'positive',
-        'positive-secondary',
-        'info',
-        'info-secondary',
-      ],
-      layers: {
-        root: createLayerConfig({
-          label: 'root',
-          properties: {
-            backgroundColor: createConfigurableProperty({
-              name: 'backgroundColor',
-              label: 'Background color',
-              typeOfFixture: ['spectrumColors', 'backgroundPaletteColors', 'alwaysPaletteAliases'],
-              values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
-              defaults: {
-                primary: 'primary',
-                secondary: 'secondary',
-                brand: 'brand',
-                'brand-secondary': 'brand-secondary',
-                alert: 'alert',
-                'alert-secondary': 'alert-secondary',
-                warning: 'warning',
-                'warning-secondary': 'warning-secondary',
-                positive: 'positive',
-                'positive-secondary': 'positive-secondary',
-                info: 'info',
-                'info-secondary': 'info-secondary',
-              },
-            }),
-            color: createConfigurableProperty({
-              name: 'color',
-              label: 'Text color',
-              typeOfFixture: ['spectrumColors', 'foregroundPaletteColors', 'alwaysPaletteAliases'],
-              values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-              defaults: {
-                primary: 'primary',
-                secondary: 'secondary',
-                brand: 'brand',
-                'brand-secondary': 'brand-secondary',
-                alert: 'alert',
-                'alert-secondary': 'alert-secondary',
-                warning: 'warning',
-                'warning-secondary': 'warning-secondary',
-                positive: 'positive',
-                'positive-secondary': 'positive-secondary',
-                info: 'info',
-                'info-secondary': 'info-secondary',
-              },
-            }),
-            borderWidth: createConfigurableProperty({
-              name: 'borderWidth',
-              label: 'Border width',
-              typeOfFixture: ['borderWidths'],
-              values: [borderWidths],
-              defaults: {
-                primary: 'thin',
-                secondary: 'none',
-                brand: 'none',
-                'brand-secondary': 'none',
-                alert: 'none',
-                'alert-secondary': 'none',
-                warning: 'none',
-                'warning-secondary': 'none',
-                positive: 'none',
-                'positive-secondary': 'none',
-                info: 'none',
-                'info-secondary': 'none',
-              },
-            }),
-            borderColor: createConfigurableProperty({
-              name: 'borderColor',
-              label: 'border color',
-              typeOfFixture: ['spectrumColors', 'linePaletteColors', 'alwaysPaletteAliases'],
-              values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
-              defaults: {
-                primary: 'primary',
-                secondary: 'secondary',
-                brand: 'brand',
-                'brand-secondary': 'brand-secondary',
-                alert: 'alert',
-                'alert-secondary': 'alert-secondary',
-                warning: 'warning',
-                'warning-secondary': 'warning-secondary',
-                positive: 'positive',
-                'positive-secondary': 'positive-secondary',
-                info: 'info',
-                'info-secondary': 'info-secondary',
-              },
-            }),
-            borderRadius: createConfigurableProperty({
-              name: 'borderRadius',
-              label: 'Border radius',
-              typeOfFixture: ['borderRadii'],
-              values: [borderRadii],
-              defaults: {
-                primary: 'sm',
-                secondary: 'sm',
-                brand: 'sm',
-                'brand-secondary': 'sm',
-                alert: 'sm',
-                'alert-secondary': 'sm',
-                warning: 'sm',
-                'warning-secondary': 'sm',
-                positive: 'sm',
-                'positive-secondary': 'sm',
-                info: 'sm',
-                'info-secondary': 'sm',
-              },
-            }),
-            shadow: createConfigurableProperty({
-              name: 'shadow',
-              label: 'Drop shadow',
-              typeOfFixture: ['shadowVariants'],
-              supportsCustom: true,
-              values: [shadowVariants],
-              defaults: {
-                primary: '2xl',
-                secondary: 'xl',
-                brand: 'md',
-                'brand-secondary': 'xl',
-                alert: 'xl',
-                'alert-secondary': 'xl',
-                warning: 'xl',
-                'warning-secondary': 'xl',
-                positive: 'xl',
-                'positive-secondary': 'xl',
-                info: 'xl',
-                'info-secondary': 'sm',
-              },
-            }),
-            insetShadow: createConfigurableProperty({
-              name: 'insetShadow',
-              label: 'Inset shadow',
-              typeOfFixture: ['shadowVariantsWithInvert'],
-              supportsCustom: true,
-              values: [shadowVariantsWithInvert],
-              defaults: {
-                primary: '2xl-invert',
-                secondary: 'md-invert',
-                brand: 'md',
-                'brand-secondary': 'xl',
-                alert: 'xl',
-                'alert-secondary': 'xl-invert',
-                warning: 'xl',
-                'warning-secondary': 'xl',
-                positive: 'xl',
-                'positive-secondary': 'xl',
-                info: 'xl',
-                'info-secondary': 'sm',
-              },
-            }),
-          },
-        }),
-        icon: createLayerConfig({
-          label: 'icon',
-          properties: {
-            color: createConfigurableProperty({
-              name: 'color',
-              label: 'Icon color',
-              typeOfFixture: ['spectrumColors', 'foregroundPaletteColors', 'alwaysPaletteAliases'],
-              values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-              defaults: {
-                primary: 'primary',
-                secondary: 'secondary',
-                brand: 'brand',
-                'brand-secondary': 'brand-secondary',
-                alert: 'alert',
-                'alert-secondary': 'alert-secondary',
-                warning: 'warning',
-                'warning-secondary': 'warning-secondary',
-                positive: 'positive',
-                'positive-secondary': 'positive-secondary',
-                info: 'info',
-                'info-secondary': 'info-secondary',
-              },
-            }),
-          },
-        }),
-      },
-    }),
-  },
-});