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

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

@@ -1,323 +0,0 @@
-import {
-  alwaysPaletteAliases,
-  backgroundPaletteColors,
-  borderWidths,
-  foregroundPaletteColors,
-  iconSizes,
-  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 {
-  // 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 SwitchConfig = defineComponentConfig({
-  label: 'Switch',
-  description:
-    'A switch is a toggle control that lets users turn a setting on or off. It’s commonly used for binary actions like enabling or disabling a feature.',
-  variants: {
-    variant: createVariantConfigWithComponentStates({
-      label: 'Variant',
-      description:
-        'A switch is a toggle control that lets users turn a setting on or off. It’s commonly used for binary actions like enabling or disabling a feature.',
-      default: 'default',
-      options: ['default'],
-      isConfigurable: true,
-      componentStates: {
-        active: createComponentStates({
-          label: 'active',
-          options: ['on', 'off'],
-          layers: {
-            root: createLayerConfig({
-              label: 'root',
-              properties: {
-                labelColor: createConfigurableProperty({
-                  name: 'color',
-                  label: 'Label color',
-                  pseudoStates: ['hover'],
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    default: 'secondary',
-                  },
-                }),
-              },
-            }),
-            switch: createLayerConfig({
-              label: 'switch',
-              properties: {
-                backgroundColor: createConfigurableProperty({
-                  name: 'backgroundColor',
-                  label: 'Track background color',
-                  pseudoStates: ['hover'],
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'backgroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    default: 'brand',
-                  },
-                }),
-                borderColor: createConfigurableProperty({
-                  name: 'borderColor',
-                  label: 'Track border color',
-                  pseudoStates: ['hover'],
-                  typeOfFixture: ['spectrumColors', 'linePaletteColors', 'alwaysPaletteAliases'],
-                  values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    default: 'brand',
-                  },
-                }),
-                shadow: createConfigurableProperty({
-                  name: 'shadow',
-                  label: 'Drop shadow',
-                  typeOfFixture: ['shadowVariants'],
-                  supportsCustom: true,
-                  values: [shadowVariants],
-                  pseudoStates: ['hover'],
-                  defaults: {
-                    default: 'xl',
-                  },
-                }),
-                insetShadow: createConfigurableProperty({
-                  name: 'insetShadow',
-                  label: 'Inset shadow',
-                  typeOfFixture: ['shadowVariantsWithInvert'],
-                  supportsCustom: true,
-                  values: [shadowVariantsWithInvert],
-                  pseudoStates: ['hover'],
-                  defaults: {
-                    default: '2xl-invert',
-                  },
-                }),
-              },
-            }),
-            handle: createLayerConfig({
-              label: 'handle',
-              properties: {
-                backgroundColor: createConfigurableProperty({
-                  name: 'backgroundColor',
-                  label: 'Handle color',
-                  pseudoStates: ['hover'],
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'backgroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
-                  defaults: {
-                    default: 'primary',
-                  },
-                }),
-                shadow: createConfigurableProperty({
-                  name: 'shadow',
-                  label: 'Drop shadow',
-                  typeOfFixture: ['shadowVariants'],
-                  supportsCustom: true,
-                  values: [shadowVariants],
-                  pseudoStates: ['hover'],
-                  defaults: {
-                    default: 'xl',
-                  },
-                }),
-                insetShadow: createConfigurableProperty({
-                  name: 'insetShadow',
-                  label: 'Inset shadow',
-                  typeOfFixture: ['shadowVariantsWithInvert'],
-                  supportsCustom: true,
-                  values: [shadowVariantsWithInvert],
-                  pseudoStates: ['hover'],
-                  defaults: {
-                    default: '2xl-invert',
-                  },
-                }),
-              },
-            }),
-            handleIcon: createLayerConfig({
-              label: 'handleIcon',
-              properties: {
-                color: createConfigurableProperty({
-                  name: 'color',
-                  label: 'Icon color',
-                  pseudoStates: ['hover'],
-                  typeOfFixture: [
-                    'spectrumColors',
-                    'foregroundPaletteColors',
-                    'alwaysPaletteAliases',
-                  ],
-                  values: [spectrumColors, foregroundPaletteColors],
-                  defaults: {
-                    default: 'brand',
-                  },
-                }),
-              },
-            }),
-          },
-        }),
-      },
-    }),
-    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: '0',
-                md: '0',
-              },
-            }),
-            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: 'label4',
-                md: 'label2',
-              },
-            }),
-          },
-        }),
-        switch: createLayerConfig({
-          label: 'switch',
-          properties: {
-            height: createConfigurableProperty({
-              name: 'height',
-              label: 'Track height',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                sm: '5',
-                md: '7',
-              },
-            }),
-            width: createConfigurableProperty({
-              name: 'width',
-              label: 'Track width',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                sm: '8',
-                md: '12',
-              },
-            }),
-            borderWidth: createConfigurableProperty({
-              name: 'borderWidth',
-              label: 'Track border width',
-              typeOfFixture: ['borderWidths'],
-              values: [borderWidths],
-              defaults: {
-                sm: 'none',
-                md: 'none',
-              },
-            }),
-            padding: createConfigurableProperty({
-              name: 'padding',
-              label: 'Track padding',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                sm: '0.5',
-                md: '0.5',
-              },
-            }),
-          },
-        }),
-        handle: createLayerConfig({
-          label: 'Handle',
-          properties: {
-            height: createConfigurableProperty({
-              name: 'height',
-              label: 'Track height',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                sm: '4',
-                md: '6',
-              },
-            }),
-            width: createConfigurableProperty({
-              name: 'width',
-              label: 'Track width',
-              typeOfFixture: ['spacingAliases'],
-              values: [spacingAliases],
-              defaults: {
-                sm: '4',
-                md: '6',
-              },
-            }),
-          },
-        }),
-        handleIcon: createLayerConfig({
-          label: 'Icon',
-          properties: {
-            size: createConfigurableProperty({
-              name: 'iconSize',
-              label: 'Icon size',
-              typeOfFixture: ['iconSizes'],
-              values: [iconSizes],
-              defaults: {
-                sm: 'sm',
-                md: 'sm',
-              },
-            }),
-          },
-        }),
-      },
-    }),
-  },
-});

package/src/tokens/automation/index.ts

@@ -1,5 +0,0 @@
-/* eslint-disable @typescript-eslint/consistent-type-exports */
-export type * from './configs';
-export * from './properties';
-export * from './types';
-export * from './utils';

package/src/tokens/automation/mapTextVariantFixtureToValue.ts

@@ -1,8 +0,0 @@
-import { textVariantsSafe } from '../../tailwind/components/getResponsiveTextStyles';
-
-const mapTextVariantFixtureToValue =
-  (key: 'textTransform' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'fontFamily') =>
-  (selected: 'textVariants', value: string) =>
-    `typography.${key}.${textVariantsSafe(value)}`;
-
-export { mapTextVariantFixtureToValue };