@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/src/tokens/consts/buttonMotionTokens.ts

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,15 @@
+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';