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

package/src/tokens/configs/button.ts

@@ -1,888 +0,0 @@
-import type {
-  ButtonBaseConfig,
-  ButtonColorEffect,
-  ButtonConfig,
-  ButtonKind,
-  ButtonMotionEffect,
-  ButtonPalette,
-  ButtonShadowPropertyConfig,
-  ButtonStateEffectConfig,
-} from '../types';
-
-const noneOrCustomEffectOptions: ButtonColorEffect[] = ['none', 'custom'];
-const scaleEffectOptions: ButtonMotionEffect[] = ['none', 'up', 'down'];
-
-const defaultFillEffect: ButtonStateEffectConfig = {
-  hover: {
-    backgroundColor: { value: 'none', options: noneOrCustomEffectOptions },
-    borderColor: { value: 'none', options: noneOrCustomEffectOptions },
-    color: { value: 'none', options: noneOrCustomEffectOptions },
-    scale: { value: 'up', options: scaleEffectOptions },
-  },
-  pressed: {
-    backgroundColor: { value: 'none', options: noneOrCustomEffectOptions },
-    borderColor: { value: 'none', options: noneOrCustomEffectOptions },
-    color: { value: 'none', options: noneOrCustomEffectOptions },
-    scale: { value: 'down', options: scaleEffectOptions },
-  },
-};
-
-const defaultOutlineEffect: ButtonStateEffectConfig = {
-  hover: {
-    backgroundColor: { value: 'none', options: noneOrCustomEffectOptions },
-    borderColor: { value: 'none', options: noneOrCustomEffectOptions },
-    color: { value: 'none', options: noneOrCustomEffectOptions },
-    scale: { value: 'up', options: scaleEffectOptions },
-  },
-  pressed: {
-    backgroundColor: { value: 'none', options: noneOrCustomEffectOptions },
-    borderColor: { value: 'none', options: noneOrCustomEffectOptions },
-    color: { value: 'none', options: noneOrCustomEffectOptions },
-    scale: { value: 'down', options: scaleEffectOptions },
-  },
-};
-
-const defaultGhostEffect: ButtonStateEffectConfig = {
-  hover: {
-    backgroundColor: { value: 'none', options: noneOrCustomEffectOptions },
-    borderColor: { value: 'none', options: noneOrCustomEffectOptions },
-    color: { value: 'none', options: noneOrCustomEffectOptions },
-    scale: { value: 'up', options: scaleEffectOptions },
-  },
-  pressed: {
-    backgroundColor: { value: 'none', options: noneOrCustomEffectOptions },
-    borderColor: { value: 'none', options: noneOrCustomEffectOptions },
-    color: { value: 'none', options: noneOrCustomEffectOptions },
-    scale: { value: 'down', options: scaleEffectOptions },
-  },
-};
-
-const defaultShadows: ButtonShadowPropertyConfig = {
-  dropShadow: {
-    value: 'none',
-    config: null,
-  },
-  insetShadow: {
-    value: 'none',
-    config: null,
-  },
-};
-
-function getDefaultFillBase(alias: ButtonPalette): ButtonBaseConfig {
-  return {
-    borderWidth: 'none',
-    borderRadius: 'full',
-    borderColor: {
-      type: 'palette',
-      value: 'transparent',
-    },
-    backgroundColor: {
-      type: 'palette',
-      value: alias,
-    },
-    color: {
-      type: 'palette',
-      value: 'on-color',
-    },
-    scale: 'none',
-    ...defaultShadows,
-  };
-}
-
-function getDefaultOutlineBase(alias: ButtonPalette): ButtonBaseConfig {
-  return {
-    borderWidth: 'thin',
-    borderRadius: 'full',
-    backgroundColor: {
-      type: 'palette',
-      value: 'transparent',
-    },
-    borderColor: {
-      type: 'palette',
-      value: alias,
-    },
-    color: {
-      type: 'palette',
-      value: alias,
-    },
-    scale: 'none',
-    ...defaultShadows,
-  };
-}
-
-function getDefaultGhostBase(alias: ButtonPalette): ButtonBaseConfig {
-  return {
-    borderWidth: 'none',
-    borderRadius: 'full',
-    backgroundColor: {
-      type: 'palette',
-      value: 'transparent',
-    },
-    borderColor: {
-      type: 'palette',
-      value: 'transparent',
-    },
-    color: {
-      type: 'palette',
-      value: alias,
-    },
-    scale: 'none',
-    ...defaultShadows,
-  };
-}
-
-export const getDefaultButtonBaseMap: Record<
-  ButtonKind,
-  (alias: ButtonPalette) => ButtonBaseConfig
-> = {
-  fill: getDefaultFillBase,
-  outline: getDefaultOutlineBase,
-  ghost: getDefaultGhostBase,
-};
-
-export const button: ButtonConfig = {
-  defaults: {
-    palette: 'accent',
-    variant: 'primary',
-    size: 'md',
-  },
-  size: {
-    sm: {
-      spacingHorizontal: '4',
-      spacingVertical: '1',
-      gap: '2',
-      iconSize: 'sm',
-      textVariant: 'label1',
-    },
-    md: {
-      spacingHorizontal: '6',
-      spacingVertical: '3',
-      gap: '2',
-      iconSize: 'sm',
-      textVariant: 'label1',
-    },
-    lg: {
-      spacingHorizontal: '7',
-      spacingVertical: '4',
-      gap: '2',
-      iconSize: 'md',
-      textVariant: 'headline1',
-    },
-  },
-  palette: {
-    info: {
-      primary: {
-        kind: 'fill',
-        effect: defaultFillEffect,
-        base: getDefaultFillBase('info'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'blue-10',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'on-color',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'blue-11',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'on-color',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-      secondary: {
-        kind: 'outline',
-        effect: defaultOutlineEffect,
-        base: getDefaultOutlineBase('info'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            borderColor: {
-              type: 'spectrum',
-              value: 'blue-10',
-            },
-            color: {
-              type: 'spectrum',
-              value: 'blue-10',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            borderColor: {
-              type: 'spectrum',
-              value: 'blue-11',
-            },
-            color: {
-              type: 'spectrum',
-              value: 'blue-11',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-      tertiary: {
-        kind: 'ghost',
-        effect: defaultGhostEffect,
-        base: getDefaultGhostBase('info'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'blue-2',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'info',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'blue-4',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'info',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-    },
-    accent: {
-      primary: {
-        kind: 'fill',
-        effect: defaultFillEffect,
-        base: getDefaultFillBase('accent'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'carbon-10',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'on-color',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'carbon-11',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'on-color',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-      secondary: {
-        kind: 'outline',
-        effect: defaultOutlineEffect,
-        base: getDefaultOutlineBase('accent'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            borderColor: {
-              type: 'spectrum',
-              value: 'carbon-10',
-            },
-            color: {
-              type: 'spectrum',
-              value: 'carbon-10',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            borderColor: {
-              type: 'spectrum',
-              value: 'carbon-11',
-            },
-            color: {
-              type: 'spectrum',
-              value: 'carbon-11',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-      tertiary: {
-        kind: 'ghost',
-        effect: defaultGhostEffect,
-        base: getDefaultGhostBase('accent'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'carbon-2',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'accent',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'carbon-4',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'accent',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-    },
-    brand: {
-      primary: {
-        kind: 'fill',
-        effect: defaultFillEffect,
-        base: getDefaultFillBase('brand'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'purple-10',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'on-color',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'purple-11',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'on-color',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-      secondary: {
-        kind: 'outline',
-        effect: defaultOutlineEffect,
-        base: getDefaultOutlineBase('brand'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            borderColor: {
-              type: 'spectrum',
-              value: 'purple-10',
-            },
-            color: {
-              type: 'spectrum',
-              value: 'purple-10',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            borderColor: {
-              type: 'spectrum',
-              value: 'purple-11',
-            },
-            color: {
-              type: 'spectrum',
-              value: 'purple-11',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-      tertiary: {
-        kind: 'ghost',
-        effect: defaultGhostEffect,
-        base: getDefaultGhostBase('brand'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'purple-2',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'brand',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'purple-4',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'brand',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-    },
-    alert: {
-      primary: {
-        kind: 'fill',
-        effect: defaultFillEffect,
-        base: getDefaultFillBase('alert'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'red-10',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'on-color',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'red-11',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'on-color',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-      secondary: {
-        kind: 'outline',
-        effect: defaultOutlineEffect,
-        base: getDefaultOutlineBase('alert'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            borderColor: {
-              type: 'spectrum',
-              value: 'red-10',
-            },
-            color: {
-              type: 'spectrum',
-              value: 'red-10',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            borderColor: {
-              type: 'spectrum',
-              value: 'red-11',
-            },
-            color: {
-              type: 'spectrum',
-              value: 'red-11',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-      tertiary: {
-        kind: 'ghost',
-        effect: defaultGhostEffect,
-        base: getDefaultGhostBase('alert'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'red-2',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'alert',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'red-4',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'alert',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-    },
-    positive: {
-      primary: {
-        kind: 'fill',
-        effect: defaultFillEffect,
-        base: getDefaultFillBase('positive'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'green-10',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'on-color',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'green-11',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'on-color',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-      secondary: {
-        kind: 'outline',
-        effect: defaultOutlineEffect,
-        base: getDefaultOutlineBase('positive'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            borderColor: {
-              type: 'spectrum',
-              value: 'green-10',
-            },
-            color: {
-              type: 'spectrum',
-              value: 'green-10',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            borderColor: {
-              type: 'spectrum',
-              value: 'green-11',
-            },
-            color: {
-              type: 'spectrum',
-              value: 'green-11',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-      tertiary: {
-        kind: 'ghost',
-        effect: defaultGhostEffect,
-        base: getDefaultGhostBase('positive'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'green-2',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'positive',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'green-4',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'positive',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-    },
-    warning: {
-      primary: {
-        kind: 'fill',
-        effect: defaultFillEffect,
-        base: getDefaultFillBase('warning'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'orange-10',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'on-color',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'orange-11',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'on-color',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-      secondary: {
-        kind: 'outline',
-        effect: defaultOutlineEffect,
-        base: getDefaultOutlineBase('warning'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            borderColor: {
-              type: 'spectrum',
-              value: 'orange-10',
-            },
-            color: {
-              type: 'spectrum',
-              value: 'orange-10',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            borderColor: {
-              type: 'spectrum',
-              value: 'orange-11',
-            },
-            color: {
-              type: 'spectrum',
-              value: 'orange-11',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-      tertiary: {
-        kind: 'ghost',
-        effect: defaultGhostEffect,
-        base: getDefaultGhostBase('warning'),
-        state: {
-          hover: {
-            scale: 'up',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'orange-2',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'warning',
-            },
-            ...defaultShadows,
-          },
-          pressed: {
-            scale: 'down',
-            backgroundColor: {
-              type: 'spectrum',
-              value: 'orange-4',
-            },
-            borderColor: {
-              type: 'palette',
-              value: 'transparent',
-            },
-            color: {
-              type: 'palette',
-              value: 'warning',
-            },
-            ...defaultShadows,
-          },
-        },
-      },
-    },
-  },
-};