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

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

@@ -1,496 +0,0 @@
-import {
-  alwaysPaletteAliases,
-  backgroundPaletteColors,
-  borderRadii,
-  borderWidths,
-  foregroundPaletteColors,
-  iconSizes,
-  linePaletteColors,
-  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 InputConfig = defineComponentConfig({
-  label: 'input',
-  description:
-    'An input field is a box where users can type or select information. It can also open a dropdown menu to show options or help collect data.',
-  variants: {
-    size: createVariantConfigWithProperties({
-      label: 'size',
-      isConfigurable: true,
-      options: ['md', 'lg'],
-      default: 'md',
-      description: '',
-      layers: {
-        root: createLayerConfig({
-          label: 'root',
-          properties: {},
-        }),
-        inputWrapper: createLayerConfig({
-          label: 'inputWrapper',
-          properties: {
-            spacingHorizontal: createConfigurableProperty({
-              name: 'spacingHorizontal',
-              label: 'Spacing horizontal',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                md: '3.5',
-                lg: '4',
-              },
-            }),
-            spacingVertical: createConfigurableProperty({
-              name: 'spacingVertical',
-              label: 'Spacing vertical',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                md: '2',
-                lg: '3.5',
-              },
-            }),
-            gap: createConfigurableProperty({
-              name: 'gap',
-              label: 'Gap',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                md: '3',
-                lg: '3',
-              },
-            }),
-            borderWidth: createConfigurableProperty({
-              name: 'borderWidth',
-              label: 'Border width',
-              typeOfFixture: ['borderWidths'],
-              values: [borderWidths],
-              // TODO: add for invalid clicked
-              pseudoStates: ['pressed', 'invalid'],
-              defaults: {
-                md: 'thin',
-                lg: 'thin',
-              },
-            }),
-            borderRadius: createConfigurableProperty({
-              name: 'borderRadius',
-              label: 'Border radius',
-              typeOfFixture: ['borderRadii'],
-              values: [borderRadii],
-              defaults: {
-                md: 'md',
-                lg: 'md',
-              },
-            }),
-            textVariant: createConfigurableProperty({
-              name: 'textVariant',
-              label: 'Input text style',
-              typeOfFixture: ['textVariants'],
-              pseudoStates: ['hover'],
-              values: [textVariants],
-              defaults: {
-                md: 'label2',
-                lg: 'label2',
-              },
-            }),
-          },
-        }),
-        input: createLayerConfig({
-          label: 'input',
-          properties: {
-            height: createConfigurableProperty({
-              name: 'height',
-              label: 'Input element height',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                md: '6',
-                lg: '6',
-              },
-            }),
-          },
-        }),
-        startIcon: createLayerConfig({
-          label: 'startIcon',
-          properties: {
-            size: createConfigurableProperty({
-              name: 'iconSize',
-              label: 'Start icon size',
-              typeOfFixture: ['iconSizes'],
-              values: [iconSizes],
-              defaults: {
-                md: 'md',
-                lg: 'md',
-              },
-            }),
-          },
-        }),
-        endIcon: createLayerConfig({
-          label: 'endIcon',
-          properties: {
-            size: createConfigurableProperty({
-              name: 'iconSize',
-              label: 'End icon size',
-              typeOfFixture: ['iconSizes'],
-              values: [iconSizes],
-              defaults: {
-                md: 'md',
-                lg: 'md',
-              },
-            }),
-          },
-        }),
-        label: createLayerConfig({
-          label: 'label',
-          properties: {
-            textVariant: createConfigurableProperty({
-              name: 'textVariant',
-              label: 'Label text style',
-              typeOfFixture: ['textVariants'],
-              values: [textVariants],
-              defaults: {
-                md: 'label4',
-                lg: 'label4',
-              },
-            }),
-          },
-        }),
-        helperIcon: createLayerConfig({
-          label: 'helperIcon',
-          properties: {
-            size: createConfigurableProperty({
-              name: 'iconSize',
-              label: 'Helper text icon size',
-              typeOfFixture: ['iconSizes'],
-              values: [iconSizes],
-              defaults: {
-                md: 'sm',
-                lg: 'sm',
-              },
-            }),
-          },
-        }),
-        helperText: createLayerConfig({
-          label: 'helperText',
-          properties: {
-            textVariant: createConfigurableProperty({
-              name: 'textVariant',
-              label: 'Label text style',
-              typeOfFixture: ['textVariants'],
-              values: [textVariants],
-              defaults: {
-                md: 'label4',
-                lg: 'label4',
-              },
-            }),
-          },
-        }),
-      },
-    }),
-    variant: createVariantConfigWithComponentStates({
-      label: 'variant',
-      description: '',
-      isConfigurable: true,
-      options: ['default'],
-      default: 'default',
-      componentStates: {
-        value: createComponentStates({
-          label: 'value',
-          options: ['filled', 'empty'],
-          layers: {
-            root: createLayerConfig({
-              label: 'root',
-              properties: {},
-            }),
-            inputWrapper: createLayerConfig({
-              label: 'input',
-              properties: {
-                borderColor: createConfigurableProperty({
-                  name: 'borderColor',
-                  label: 'Border color',
-                  typeOfFixture: ['spectrumColors', 'linePaletteColors', 'alwaysPaletteAliases'],
-                  values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
-                  pseudoStates: [
-                    'hover',
-                    'pressed',
-                    'focus-within',
-                    'invalid',
-                    'invalid&hover',
-                    'invalid&pressed',
-                    'readonly',
-                    'disabled',
-                  ],
-                  defaults: {
-                    default: 'tertiary',
-                  },
-                }),
-                backgroundColor: createConfigurableProperty({
-                  name: 'backgroundColor',
-                  label: 'Background color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'backgroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
-                  pseudoStates: [
-                    'hover',
-                    'pressed',
-                    'focus-within',
-                    'invalid',
-                    'invalid&hover',
-                    'invalid&pressed',
-                    'readonly',
-                    'disabled',
-                  ],
-                  defaults: {
-                    default: 'primary',
-                  },
-                }),
-              },
-            }),
-            input: createLayerConfig({
-              label: 'input',
-              properties: {
-                // TODO: add placeholder configurable property
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'Input text color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  pseudoStates: [
-                    'hover',
-                    'pressed',
-                    'focus-within',
-                    'invalid',
-                    'invalid&hover',
-                    'invalid&pressed',
-                    'readonly',
-                    'disabled',
-                  ],
-                  defaults: {
-                    default: 'muted',
-                  },
-                }),
-              },
-            }),
-            inputPlaceholder: createLayerConfig({
-              label: 'inputPlaceholder',
-              pseudoSelector: '::placeholder',
-              properties: {
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'Input text color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  pseudoStates: [
-                    'hover',
-                    'pressed',
-                    'focus-within',
-                    'invalid',
-                    'invalid&hover',
-                    'invalid&pressed',
-                    'readonly',
-                    'disabled',
-                  ],
-                  defaults: {
-                    default: 'muted',
-                  },
-                }),
-              },
-            }),
-            startIcon: createLayerConfig({
-              label: 'startIcon',
-              properties: {
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'Start icon color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  pseudoStates: [
-                    'hover',
-                    'pressed',
-                    'focus-within',
-                    'invalid',
-                    'invalid&hover',
-                    'invalid&pressed',
-                    'readonly',
-                    'disabled',
-                  ],
-                  defaults: {
-                    default: 'muted',
-                  },
-                }),
-              },
-            }),
-            endIcon: createLayerConfig({
-              label: 'endIcon',
-              properties: {
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'End icon color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  pseudoStates: [
-                    'hover',
-                    'pressed',
-                    'focus-within',
-                    'invalid',
-                    'invalid&hover',
-                    'invalid&pressed',
-                    'readonly',
-                    'disabled',
-                  ],
-                  defaults: {
-                    default: 'muted',
-                  },
-                }),
-              },
-            }),
-            label: createLayerConfig({
-              label: 'label',
-              properties: {
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'Label color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  pseudoStates: [
-                    'hover',
-                    'pressed',
-                    'focus-within',
-                    'invalid',
-                    'invalid&hover',
-                    'invalid&pressed',
-                    'readonly',
-                    'disabled',
-                  ],
-                  defaults: {
-                    default: 'muted',
-                  },
-                }),
-              },
-            }),
-            labelRequired: createLayerConfig({
-              label: 'labelRequired',
-              properties: {
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'Required color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  pseudoStates: [
-                    'hover',
-                    'pressed',
-                    'focus-within',
-                    'invalid',
-                    'invalid&hover',
-                    'invalid&pressed',
-                    'readonly',
-                    'disabled',
-                  ],
-                  defaults: {
-                    default: 'muted',
-                  },
-                }),
-              },
-            }),
-            helperIcon: createLayerConfig({
-              label: 'helperIcon',
-              properties: {
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'Helper icon color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  pseudoStates: [
-                    'hover',
-                    'pressed',
-                    'focus-within',
-                    'invalid',
-                    'invalid&hover',
-                    'invalid&pressed',
-                    'readonly',
-                    'disabled',
-                  ],
-                  defaults: {
-                    default: 'muted',
-                  },
-                }),
-              },
-            }),
-            helperText: createLayerConfig({
-              label: 'helpText',
-              properties: {
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'Helper text color',
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  pseudoStates: [
-                    'hover',
-                    'pressed',
-                    'focus-within',
-                    'invalid',
-                    'invalid&hover',
-                    'invalid&pressed',
-                    'readonly',
-                    'disabled',
-                  ],
-                  defaults: {
-                    default: 'brand',
-                  },
-                }),
-              },
-            }),
-          },
-        }),
-      },
-    }),
-  },
-});

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

@@ -1,183 +0,0 @@
-import {
-  alwaysPaletteAliases,
-  foregroundPaletteColors,
-  iconSizes,
-  spacingAliases,
-  spectrumColors,
-  textDecorationLines,
-  textVariantsWithoutEmphasized,
-} 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 LinkConfig = defineComponentConfig({
-  label: 'Link',
-  description:
-    'Customizing your own buttons involves adjusting text styles, icon sizes, and spacing values to create a personalized button.',
-  variants: {
-    textStyle: createVariantConfigWithProperties({
-      label: 'Text Style',
-      description: '',
-      isConfigurable: true,
-      default: 'title1',
-      options: textVariantsWithoutEmphasized,
-      layers: {
-        root: createLayerConfig({
-          label: 'root',
-          properties: {
-            gap: createConfigurableProperty({
-              name: 'gap',
-              label: 'Gap',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                display1: '2',
-                display2: '2',
-                display3: '2',
-                title1: '2',
-                title2: '2',
-                title3: '2',
-                title4: '2',
-                headline1: '2',
-                body1: '2',
-                label1: '2',
-                label2: '2',
-                label3: '2',
-                label4: '2',
-                caption1: '2',
-                caption2: '2',
-                legal1: '2',
-                ui1: '2',
-                ui2: '2',
-                ui3: '2',
-                ui4: '2',
-                ui5: '2',
-                ui6: '2',
-              },
-            }),
-          },
-        }),
-        icon: createLayerConfig({
-          label: 'icon',
-          properties: {
-            size: createConfigurableProperty({
-              name: 'iconSize',
-              label: 'Icon size',
-              typeOfFixture: ['iconSizes'],
-              values: [iconSizes],
-              defaults: {
-                display1: 'lg',
-                display2: 'lg',
-                display3: 'lg',
-                title1: 'md',
-                title2: 'md',
-                title3: 'md',
-                title4: 'md',
-                headline1: 'md',
-                body1: 'md',
-                label1: 'md',
-                label2: 'md',
-                label3: 'md',
-                label4: 'sm',
-                caption1: 'md',
-                caption2: 'sm',
-                legal1: 'md',
-                ui1: 'md',
-                ui2: 'md',
-                ui3: 'md',
-                ui4: 'md',
-                ui5: 'md',
-                ui6: 'md',
-              },
-            }),
-          },
-        }),
-      },
-    }),
-    variant: createVariantConfigWithProperties({
-      label: 'Variants',
-      description: 'Variants',
-      isConfigurable: true,
-      default: 'primary',
-      options: ['primary', 'secondary', 'tertiary', 'on-color'],
-      layers: {
-        root: createLayerConfig({
-          label: 'root',
-          properties: {
-            color: createConfigurableProperty({
-              name: 'color',
-              label: 'Text color',
-              typeOfFixture: ['spectrumColors', 'foregroundPaletteColors', 'alwaysPaletteAliases'],
-              values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-              pseudoStates: ['hover', 'pressed'],
-              defaults: {
-                primary: 'primary',
-                secondary: 'secondary',
-                tertiary: 'tertiary',
-                'on-color': 'on-color',
-              },
-            }),
-            textDecorationLine: createConfigurableProperty({
-              name: 'textDecorationLine',
-              label: 'Underline',
-              typeOfFixture: ['textDecorationLines'],
-              values: [textDecorationLines],
-              pseudoStates: ['hover', 'pressed'],
-              defaults: {
-                primary: 'none',
-                secondary: 'none',
-                tertiary: 'none',
-                'on-color': 'none',
-              },
-            }),
-          },
-        }),
-        iconStart: createLayerConfig({
-          label: 'iconStart',
-          properties: {
-            color: createConfigurableProperty({
-              name: 'color',
-              label: 'Icon start color',
-              typeOfFixture: ['spectrumColors', 'foregroundPaletteColors', 'alwaysPaletteAliases'],
-              pseudoStates: ['hover', 'pressed'],
-              values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-              defaults: {
-                primary: 'primary',
-                secondary: 'secondary',
-                tertiary: 'tertiary',
-                'on-color': 'on-color',
-              },
-            }),
-          },
-        }),
-        iconEnd: createLayerConfig({
-          label: 'iconEnd',
-          properties: {
-            color: createConfigurableProperty({
-              name: 'color',
-              label: 'Icon end color',
-              typeOfFixture: ['spectrumColors', 'foregroundPaletteColors', 'alwaysPaletteAliases'],
-              pseudoStates: ['hover', 'pressed'],
-              values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-              defaults: {
-                primary: 'primary',
-                secondary: 'secondary',
-                tertiary: 'tertiary',
-                'on-color': 'on-color',
-              },
-            }),
-          },
-        }),
-      },
-    }),
-  },
-});