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

package/src/tokens/consts/buttonMotionTokens.ts

@@ -1,99 +0,0 @@
-import { BUTTON_CSS_VAR_MAP } from '@yahoo/uds/tokens';
-
-import type { ButtonProps } from '../../components/client/Button';
-
-/* -------------------------------------------------------------------------- */
-/*                Static motion states for the Button component               */
-/* -------------------------------------------------------------------------- */
-
-const SCALE_DOWN = 0.7;
-const hiddenState = { scale: SCALE_DOWN, opacity: 0 };
-const visibleState = {
-  scale: [SCALE_DOWN, SCALE_DOWN, 1],
-  opacity: [0, 0, 1],
-  transition: { times: [0, 0.5, 1] },
-};
-
-const iconMotionVariants = { icon: visibleState, hide: hiddenState, loading: hiddenState };
-const loadingMotionVariants = {
-  loading: visibleState,
-  hide: hiddenState,
-  icon: hiddenState,
-};
-
-/* -------------------------------------------------------------------------- */
-/*                           Static motion variants                           */
-/* -------------------------------------------------------------------------- */
-
-// const from css vars
-const columnGap = `var(${BUTTON_CSS_VAR_MAP.columnGap})`;
-const iconSize = `var(${BUTTON_CSS_VAR_MAP.iconSize})`;
-const scaleRest = `var(${BUTTON_CSS_VAR_MAP.effects.scale.rest})`;
-const scaleHover = `var(${BUTTON_CSS_VAR_MAP.effects.scale.hover})`;
-const scalePressed = `var(${BUTTON_CSS_VAR_MAP.effects.scale.pressed})`;
-
-const buttonMotionVariants = {
-  rest: { scale: scaleRest },
-  hover: { scale: scaleHover },
-  pressed: { scale: scalePressed },
-  withoutIcon: {
-    columnGap: '0px',
-  },
-  withIcon: { columnGap },
-};
-
-/* -------------------------------- Variants -------------------------------- */
-const iconContainerMotionVariants = {
-  hide: { width: '0px', opacity: 0, display: 'none' },
-  loading: {
-    width: iconSize,
-    display: 'flex',
-    opacity: 1,
-  },
-  icon: {
-    width: iconSize,
-    display: 'flex',
-    opacity: 1,
-  },
-};
-
-/* -------------------------------------------------------------------------- */
-/*                               Variant getters                              */
-/* -------------------------------------------------------------------------- */
-
-// Helper function to determine startVariant
-type GetStartVariantParams = Pick<ButtonProps, 'loading' | 'startIcon'>;
-const getStartVariant = ({
-  loading,
-  startIcon,
-}: GetStartVariantParams): 'loading' | 'icon' | 'hide' => {
-  if (loading) {
-    return 'loading';
-  }
-  if (startIcon) {
-    return 'icon';
-  }
-  return 'hide';
-};
-
-// If we're showing icons or loading, we need to return 'withGap', otherwise 'withoutGap'
-type GetGapVariantParams = Pick<ButtonProps, 'startIcon' | 'endIcon' | 'loading'>;
-const getGapVariant = ({
-  startIcon,
-  endIcon,
-  loading,
-}: GetGapVariantParams): 'withIcon' | 'withoutIcon' => {
-  if (startIcon || endIcon || loading) {
-    return 'withIcon';
-  }
-  return 'withoutIcon';
-};
-
-export {
-  buttonMotionVariants,
-  getGapVariant,
-  getStartVariant,
-  iconContainerMotionVariants,
-  iconMotionVariants,
-  loadingMotionVariants,
-};

package/src/tokens/consts/cssTokens.ts

@@ -1,110 +0,0 @@
-import type { BreakpointWithBase } from '../types';
-
-export const UDS_PREFIX = 'uds';
-
-/* -------------------------------------------------------------------------- */
-/*                              CSS VAR PREFIXES                              */
-/* -------------------------------------------------------------------------- */
-export const AVATAR_SIZE_PREFIX = `${UDS_PREFIX}-avatar-size`;
-export const BORDER_RADIUS_PREFIX = `${UDS_PREFIX}-border-radius`;
-export const BORDER_WIDTH_PREFIX = `${UDS_PREFIX}-border-width`;
-export const FONT_FAMILY_PREFIX = `${UDS_PREFIX}-font`;
-export const FONT_SIZE_PREFIX = `${UDS_PREFIX}-font-size`;
-export const FONT_WEIGHT_PREFIX = `${UDS_PREFIX}-font-weight`;
-export const FONT_SLANT_PREFIX = `${UDS_PREFIX}-font-slant`;
-export const FONT_WIDTH_PREFIX = `${UDS_PREFIX}-font-width`;
-export const ICON_SIZE_PREFIX = `${UDS_PREFIX}-icon-size`;
-export const LINE_HEIGHT_PREFIX = `${UDS_PREFIX}-line-height`;
-export const MOTION_PREFIX = `${UDS_PREFIX}-motion`;
-export const SPECTRUM_COLOR_PREFIX = `${UDS_PREFIX}-spectrum-color`;
-export const TEXT_TRANSFORM_PREFIX = `${UDS_PREFIX}-text-transform`;
-
-/* -------------------------------------------------------------------------- */
-/*                               MODE CLASSNAMES                              */
-/* -------------------------------------------------------------------------- */
-export const DARK_COLOR_MODE_CLASSNAME = `${UDS_PREFIX}-color-mode-dark`;
-export const LIGHT_COLOR_MODE_CLASSNAME = `${UDS_PREFIX}-color-mode-light`;
-export const SYSTEM_COLOR_MODE_CLASSNAME = `${UDS_PREFIX}-color-mode-system`;
-export const INVERT_COLOR_MODE_CLASSNAME = `${UDS_PREFIX}-color-mode-invert`;
-export const XSMALL_SCALE_MODE_CLASSNAME = `${UDS_PREFIX}-scale-mode-xsmall`;
-export const SMALL_SCALE_MODE_CLASSNAME = `${UDS_PREFIX}-scale-mode-small`;
-export const MEDIUM_SCALE_MODE_CLASSNAME = `${UDS_PREFIX}-scale-mode-medium`;
-export const LARGE_SCALE_MODE_CLASSNAME = `${UDS_PREFIX}-scale-mode-large`;
-export const XLARGE_SCALE_MODE_CLASSNAME = `${UDS_PREFIX}-scale-mode-xlarge`;
-export const XXLARGE_SCALE_MODE_CLASSNAME = `${UDS_PREFIX}-scale-mode-xxlarge`;
-export const XXXLARGE_SCALE_MODE_CLASSNAME = `${UDS_PREFIX}-scale-mode-xxxlarge`;
-
-/* -------------------------------------------------------------------------- */
-/*                           DEFAULT MODE CLASSNAMES                          */
-/* -------------------------------------------------------------------------- */
-export const DEFAULT_COLOR_MODE_CLASSNAME = LIGHT_COLOR_MODE_CLASSNAME;
-export const DEFAULT_SCALE_MODE_CLASSNAME = LARGE_SCALE_MODE_CLASSNAME;
-
-/* -------------------------------------------------------------------------- */
-/*                           RESPONSIVE TEXT CLASSNAMES                       */
-/* -------------------------------------------------------------------------- */
-
-export const TEXT_RESPONSIVE_CLASSNAME = 'uds-text-responsive';
-
-export const TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES: Record<
-  BreakpointWithBase | 'defaultBreakpoint',
-  string
-> = {
-  defaultBreakpoint: 'uds-text-default',
-  base: 'uds-text-base',
-  sm: 'uds-text-sm',
-  md: 'uds-text-md',
-  lg: 'uds-text-lg',
-  xl: 'uds-text-xl',
-  '2xl': 'uds-text-2xl',
-};
-
-/* -------------------------------------------------------------------------- */
-/*                              BUTTON VARIABLES                              */
-/* -------------------------------------------------------------------------- */
-
-export const BUTTON_CSS_VAR_MAP = {
-  borderRadius: `--${UDS_PREFIX}-button-border-radius`,
-  borderWidth: `--${UDS_PREFIX}-button-border-width`,
-  color: `--${UDS_PREFIX}-button-color`,
-  backgroundColor: `--${UDS_PREFIX}-button-background-color`,
-  borderColor: `--${UDS_PREFIX}-button-border-color`,
-  padding: `--${UDS_PREFIX}-button-padding`,
-  columnGap: `--${UDS_PREFIX}-button-gap`,
-  fontFamily: `--${UDS_PREFIX}-button-font`,
-  fontWeight: `--${UDS_PREFIX}-button-font-weight`,
-  fontWidth: `--${UDS_PREFIX}-button-font-width`,
-  fontSlant: `--${UDS_PREFIX}-button-font-slant`,
-  fontSize: `--${UDS_PREFIX}-button-font-size`,
-  lineHeight: `--${UDS_PREFIX}-button-line-height`,
-  textTransform: `--${UDS_PREFIX}-button-text-transform`,
-  iconSize: `--${UDS_PREFIX}-button-icon-size`,
-  dropShadow: `--${UDS_PREFIX}-button-shadow`,
-  insetShadow: `--${UDS_PREFIX}-button-inset-shadow`,
-  effects: {
-    scale: {
-      rest: `--${UDS_PREFIX}-button-effects-scale--rest`,
-      hover: `--${UDS_PREFIX}-button-effects-scale--hover`,
-      pressed: `--${UDS_PREFIX}-button-effects-scale--pressed`,
-    },
-  },
-} as const;
-
-export const ICON_BUTTON_CSS_VAR_MAP = {
-  padding: `--${UDS_PREFIX}-icon-button-padding`,
-  iconSize: `--${UDS_PREFIX}-icon-button-icon-size`,
-} as const;
-
-export const PSEUDO_STYLE_SELECTOR_MAP = {
-  hover: ':hover:not([disabled])',
-  pressed: ':active:not([disabled])',
-  disabled: ':disabled',
-  focused: ':focus-visible',
-  // Using this instead of `:focus-within` because `:focus-within`
-  // works only on `:focus`, but we want this to work like
-  // `:focus-visible`.
-  //
-  // see: https://larsmagnus.co/blog/focus-visible-within-the-missing-pseudo-class
-  focusedWithin: ':has(:focus-visible)',
-  notDisabled: ':not(:has(:disabled))',
-} as const;

package/src/tokens/consts/defaultModes.ts

@@ -1,15 +0,0 @@
-import type {
-  ColorMode,
-  ColorModeForApp,
-  HighContrastMode,
-  RegionMode,
-  ScaleMode,
-  ScaleModeForApp,
-} from '../types';
-
-export const DEFAULT_COLOR_MODE_FOR_APP: ColorModeForApp = 'system';
-export const DEFAULT_SCALE_MODE_FOR_APP: ScaleModeForApp = 'system';
-export const DEFAULT_COLOR_MODE: ColorMode = 'light';
-export const DEFAULT_SCALE_MODE: ScaleMode = 'large';
-export const DEFAULT_HIGH_CONTRAST_MODE: HighContrastMode = false;
-export const DEFAULT_REGION_MODE: RegionMode = '🇺🇸 US';