@yahoo/uds 3.59.0-beta.1 → 3.60.0

package/src/tokens/configs/colorMode.ts

@@ -1,14 +0,0 @@
-import type { ColorModeConfig } from '../types';
-import { darkPalette, lightPalette } from './palette';
-import { darkSpectrum, lightSpectrum } from './spectrum';
-
-export const colorMode: ColorModeConfig = {
-  light: {
-    palette: lightPalette,
-    spectrum: lightSpectrum,
-  },
-  dark: {
-    palette: darkPalette,
-    spectrum: darkSpectrum,
-  },
-};

package/src/tokens/configs/font.ts

@@ -1,9 +0,0 @@
-import type { FontConfig } from '../types';
-
-export const font: FontConfig = {
-  sans: 'yahoo-product-sans',
-  'sans-alt': 'yahoo-sans-condensed',
-  serif: 'yahoo-serif-display',
-  'serif-alt': 'yahoo-serif-text',
-  mono: 'roboto-mono',
-};

package/src/tokens/configs/iconButton.ts

@@ -1,28 +0,0 @@
-import type { IconButtonConfig } from '../types';
-import { button } from './button';
-
-export const iconButton: IconButtonConfig = {
-  defaults: button.defaults,
-  size: {
-    xs: {
-      spacing: '1',
-      iconSize: 'sm',
-    },
-    sm: {
-      spacing: button.size.sm.spacingVertical,
-      iconSize: button.size.sm.iconSize,
-    },
-    md: {
-      spacing: button.size.md.spacingVertical,
-      iconSize: button.size.md.iconSize,
-    },
-    lg: {
-      spacing: button.size.lg.spacingVertical,
-      iconSize: button.size.lg.iconSize,
-    },
-    xl: {
-      spacing: '4',
-      iconSize: 'lg',
-    },
-  },
-};

package/src/tokens/configs/motion.ts

@@ -1,135 +0,0 @@
-import type { MotionConfig } from '@yahoo/uds/tokens';
-
-const animation = {
-  none: 'none',
-  spin: 'spin 1s linear infinite',
-  ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-  pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-  bounce: 'bounce 1s infinite',
-};
-
-const transitionDelay = {
-  '0': '0s',
-  '75': '75ms',
-  '100': '100ms',
-  '150': '150ms',
-  '200': '200ms',
-  '300': '300ms',
-  '500': '500ms',
-  '700': '700ms',
-  '1000': '1000ms',
-};
-
-const transitionDuration = {
-  '0': '0s',
-  '75': '75ms',
-  '100': '100ms',
-  '150': '150ms',
-  '200': '200ms',
-  '300': '300ms',
-  '500': '500ms',
-  '700': '700ms',
-  '1000': '1000ms',
-};
-
-const transitionTiming = {
-  linear: 'linear',
-  in: 'cubic-bezier(0.4, 0, 1, 1)',
-  out: 'cubic-bezier(0, 0, 0.2, 1)',
-  'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
-};
-
-const motion: MotionConfig = {
-  damped: {
-    '1': {
-      damping: 20.585796264350424,
-      stiffness: 62.379681153657017,
-    },
-    '2': {
-      damping: 29.312551281312288,
-      stiffness: 126.47801753759964,
-    },
-    '3': {
-      damping: 48.927994013561623,
-      stiffness: 352.38923365373319,
-    },
-    '4': {
-      damping: 123.42690994256348,
-      stiffness: 2242.474548821137,
-    },
-  },
-  smooth: {
-    '1': {
-      damping: 16.46863701148034,
-      stiffness: 67.804001253975017,
-    },
-    '2': {
-      damping: 23.450041025049831,
-      stiffness: 137.47610601913004,
-    },
-    '3': {
-      damping: 39.142395210849301,
-      stiffness: 383.03177571057955,
-    },
-    '4': {
-      damping: 98.741527954050795,
-      stiffness: 2437.4723356751488,
-    },
-  },
-  subtle: {
-    '1': {
-      damping: 13.043160513092429,
-      stiffness: 67.804001253975017,
-    },
-    '2': {
-      damping: 18.572432491839468,
-      stiffness: 137.47610601913004,
-    },
-    '3': {
-      damping: 31.000777006992646,
-      stiffness: 383.03177571057955,
-    },
-    '4': {
-      damping: 78.203290139608228,
-      stiffness: 2437.4723356751488,
-    },
-  },
-  bouncy: {
-    '1': {
-      damping: 9.2297129406001428,
-      stiffness: 48.880672622541795,
-    },
-    '2': {
-      damping: 12.634144343496553,
-      stiffness: 91.590926913663992,
-    },
-    '3': {
-      damping: 19.402177017904862,
-      stiffness: 216.00395877230474,
-    },
-    '4': {
-      damping: 37.541723184430275,
-      stiffness: 808.70325594229121,
-    },
-  },
-  veryBouncy: {
-    '1': {
-      damping: 6.9022907549461872,
-      stiffness: 38.921527451269107,
-    },
-    '2': {
-      damping: 9.1555505142155234,
-      stiffness: 68.48134828711234,
-    },
-    '3': {
-      damping: 13.244464908166709,
-      stiffness: 143.30858570843873,
-    },
-    '4': {
-      damping: 22.178626528767261,
-      stiffness: 401.85804919502965,
-    },
-  },
-};
-
-export { animation, motion, transitionDelay, transitionDuration, transitionTiming };

package/src/tokens/configs/palette.ts

@@ -1,124 +0,0 @@
-import type { PaletteConfig } from '../types';
-
-const lightPalette: PaletteConfig = {
-  background: {
-    primary: { hue: 'gray', step: '0' },
-    secondary: { hue: 'carbon', step: '2' },
-    accent: { hue: 'carbon', step: '2' },
-    brand: { hue: 'purple', step: '9' },
-    'brand-secondary': { hue: 'purple', step: '1' },
-    info: { hue: 'blue', step: '5' },
-    'info-secondary': { hue: 'blue', step: '1' },
-    alert: { hue: 'red', step: '9' },
-    'alert-secondary': { hue: 'red', step: '2' },
-    positive: { hue: 'green', step: '5' },
-    'positive-secondary': { hue: 'green', step: '2' },
-    warning: { hue: 'orange', step: '5' },
-    'warning-secondary': { hue: 'orange', step: '2' },
-  },
-  foreground: {
-    primary: { hue: 'carbon', step: '13' },
-    secondary: { hue: 'carbon', step: '10' },
-    tertiary: { hue: 'gray', step: '9' },
-    muted: { hue: 'gray', step: '8' },
-    'on-color': { hue: 'gray', step: '0' },
-    accent: { hue: 'carbon', step: '7' },
-    brand: { hue: 'purple', step: '9' },
-    'brand-secondary': { hue: 'purple', step: '11' },
-    info: { hue: 'blue', step: '8' },
-    'info-secondary': { hue: 'blue', step: '12' },
-    alert: { hue: 'red', step: '9' },
-    'alert-secondary': { hue: 'red', step: '12' },
-    positive: { hue: 'green', step: '7' },
-    'positive-secondary': { hue: 'green', step: '12' },
-    warning: { hue: 'orange', step: '8' },
-    'warning-secondary': { hue: 'orange', step: '12' },
-  },
-  line: {
-    primary: { hue: 'gray', step: '12' },
-    secondary: { hue: 'gray', step: '9' },
-    tertiary: { hue: 'gray', step: '7' },
-    muted: { hue: 'gray', step: '3' },
-    accent: { hue: 'carbon', step: '2' },
-    brand: { hue: 'purple', step: '9' },
-    'brand-secondary': { hue: 'purple', step: '6' },
-    info: { hue: 'blue', step: '9' },
-    'info-secondary': { hue: 'blue', step: '5' },
-    alert: { hue: 'red', step: '9' },
-    'alert-secondary': { hue: 'red', step: '5' },
-    positive: { hue: 'green', step: '9' },
-    'positive-secondary': { hue: 'green', step: '5' },
-    warning: { hue: 'orange', step: '9' },
-    'warning-secondary': { hue: 'orange', step: '7' },
-  },
-  shadow: {
-    primary: { hue: 'carbon', step: '12' },
-    secondary: { hue: 'purple', step: '9' },
-  },
-};
-
-const darkPalette: PaletteConfig = {
-  background: {
-    primary: { hue: 'gray', step: '1' },
-    secondary: { hue: 'carbon', step: '2' },
-    accent: { hue: 'carbon', step: '14' },
-    brand: { hue: 'purple', step: '9' },
-    'brand-secondary': { hue: 'purple', step: '1' },
-    info: { hue: 'blue', step: '5' },
-    'info-secondary': { hue: 'blue', step: '3' },
-    alert: { hue: 'red', step: '9' },
-    'alert-secondary': { hue: 'red', step: '3' },
-    positive: { hue: 'green', step: '5' },
-    'positive-secondary': { hue: 'green', step: '3' },
-    warning: { hue: 'orange', step: '7' },
-    'warning-secondary': { hue: 'orange', step: '3' },
-  },
-  foreground: {
-    primary: { hue: 'carbon', step: '13' },
-    secondary: { hue: 'carbon', step: '10' },
-    tertiary: { hue: 'gray', step: '9' },
-    muted: { hue: 'gray', step: '8' },
-    'on-color': { hue: 'gray', step: '0' },
-    accent: { hue: 'carbon', step: '7' },
-    brand: { hue: 'purple', step: '9' },
-    'brand-secondary': { hue: 'purple', step: '12' },
-    info: { hue: 'blue', step: '8' },
-    'info-secondary': { hue: 'blue', step: '12' },
-    alert: { hue: 'red', step: '9' },
-    'alert-secondary': { hue: 'red', step: '12' },
-    positive: { hue: 'green', step: '7' },
-    'positive-secondary': { hue: 'green', step: '12' },
-    warning: { hue: 'orange', step: '7' },
-    'warning-secondary': { hue: 'orange', step: '12' },
-  },
-  line: {
-    primary: { hue: 'gray', step: '12' },
-    secondary: { hue: 'gray', step: '9' },
-    tertiary: { hue: 'gray', step: '7' },
-    muted: { hue: 'gray', step: '3' },
-    accent: { hue: 'carbon', step: '1' },
-    brand: { hue: 'purple', step: '9' },
-    'brand-secondary': { hue: 'purple', step: '5' },
-    info: { hue: 'blue', step: '9' },
-    'info-secondary': { hue: 'blue', step: '5' },
-    alert: { hue: 'red', step: '9' },
-    'alert-secondary': { hue: 'red', step: '5' },
-    positive: { hue: 'green', step: '9' },
-    'positive-secondary': { hue: 'green', step: '5' },
-    warning: { hue: 'orange', step: '9' },
-    'warning-secondary': { hue: 'orange', step: '7' },
-  },
-  shadow: {
-    primary: { hue: 'carbon', step: '0' },
-    secondary: { hue: 'purple', step: '9' },
-  },
-};
-
-const alwaysPalette = {
-  white: '#ffffff',
-  black: '#000000',
-  transparent: 'transparent',
-  current: 'currentColor',
-};
-
-export { alwaysPalette, darkPalette, lightPalette };

package/src/tokens/configs/scaleMode.ts

@@ -1,28 +0,0 @@
-import type { ScaleModeConfig } from '../types';
-import { compactBorderRadius, normalBorderRadius } from './borderRadius';
-import { compactBorderWidths, normalBorderWidths } from './borderWidth';
-import { compactAvatarSizes, compactIconSizes, normalAvatarSizes, normalIconSizes } from './sizes';
-
-const compactTokens = {
-  avatarSizes: compactAvatarSizes,
-  iconSizes: compactIconSizes,
-  borderRadius: compactBorderRadius,
-  borderWidth: compactBorderWidths,
-};
-
-const normalTokens = {
-  avatarSizes: normalAvatarSizes,
-  iconSizes: normalIconSizes,
-  borderRadius: normalBorderRadius,
-  borderWidth: normalBorderWidths,
-};
-
-export const scaleMode: ScaleModeConfig = {
-  xSmall: compactTokens,
-  small: compactTokens,
-  medium: compactTokens,
-  large: normalTokens,
-  xLarge: normalTokens,
-  xxLarge: normalTokens,
-  xxxLarge: normalTokens,
-};

package/src/tokens/configs/shadow.ts

@@ -1,286 +0,0 @@
-import type { ShadowConfig } from '../types';
-
-export const shadow: ShadowConfig = {
-  drop: {
-    none: [],
-    xs: [
-      {
-        offsetX: '0',
-        offsetY: 'px',
-        blur: '0.5',
-        spread: '0',
-        opacity: '5',
-        color: { type: 'palette', value: 'primary' },
-      },
-    ],
-    sm: [
-      {
-        offsetX: '0',
-        offsetY: 'px',
-        blur: '0.5',
-        spread: '0',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-      {
-        offsetX: '0',
-        offsetY: 'px',
-        blur: '1',
-        spread: '0',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-    ],
-    md: [
-      {
-        offsetX: '0',
-        offsetY: '1',
-        blur: '1.5',
-        spread: '-px',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-      {
-        offsetX: '0',
-        offsetY: '0.5',
-        blur: '1',
-        spread: '-0.5',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-    ],
-    lg: [
-      {
-        offsetX: '0',
-        offsetY: '1',
-        blur: '1.5',
-        spread: '-1',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-      {
-        offsetX: '0',
-        offsetY: '2.5',
-        blur: '3.5',
-        spread: '-0.5',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-    ],
-    xl: [
-      {
-        offsetX: '0',
-        offsetY: '2',
-        blur: '2.5',
-        spread: '-1.5',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-      {
-        offsetX: '0',
-        offsetY: '5',
-        blur: '6',
-        spread: '-1',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-    ],
-    '2xl': [
-      {
-        offsetX: '0',
-        offsetY: '6',
-        blur: '12',
-        spread: '-3',
-        opacity: '25',
-        color: { type: 'palette', value: 'primary' },
-      },
-    ],
-  },
-  inset: {
-    none: [],
-    xs: [
-      {
-        offsetX: '0',
-        offsetY: 'px',
-        blur: '0.5',
-        spread: '0',
-        opacity: '5',
-        color: { type: 'palette', value: 'primary' },
-      },
-    ],
-    sm: [
-      {
-        offsetX: '0',
-        offsetY: 'px',
-        blur: '0.5',
-        spread: '0',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-      {
-        offsetX: '0',
-        offsetY: 'px',
-        blur: '1',
-        spread: '0',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-    ],
-    md: [
-      {
-        offsetX: '0',
-        offsetY: '1',
-        blur: '1.5',
-        spread: '-px',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-      {
-        offsetX: '0',
-        offsetY: '0.5',
-        blur: '1',
-        spread: '-0.5',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-    ],
-    lg: [
-      {
-        offsetX: '0',
-        offsetY: '1',
-        blur: '1.5',
-        spread: '-1',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-      {
-        offsetX: '0',
-        offsetY: '2.5',
-        blur: '3.5',
-        spread: '-0.5',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-    ],
-    xl: [
-      {
-        offsetX: '0',
-        offsetY: '2',
-        blur: '2.5',
-        spread: '-1.5',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-      {
-        offsetX: '0',
-        offsetY: '5',
-        blur: '6',
-        spread: '-1',
-        opacity: '10',
-        color: { type: 'palette', value: 'primary' },
-      },
-    ],
-    '2xl': [
-      {
-        offsetX: '0',
-        offsetY: '6',
-        blur: '12',
-        spread: '-3',
-        opacity: '25',
-        color: { type: 'palette', value: 'primary' },
-      },
-    ],
-    'xs-invert': [
-      {
-        offsetX: '0',
-        offsetY: 'px',
-        blur: '0.5',
-        spread: '0',
-        opacity: '5',
-        color: { type: 'always', value: 'white' },
-      },
-    ],
-    'sm-invert': [
-      {
-        offsetX: '0',
-        offsetY: 'px',
-        blur: '0.5',
-        spread: '0',
-        opacity: '10',
-        color: { type: 'always', value: 'white' },
-      },
-      {
-        offsetX: '0',
-        offsetY: 'px',
-        blur: '1',
-        spread: '0',
-        opacity: '10',
-        color: { type: 'always', value: 'white' },
-      },
-    ],
-    'md-invert': [
-      {
-        offsetX: '0',
-        offsetY: '1',
-        blur: '1.5',
-        spread: '-px',
-        opacity: '10',
-        color: { type: 'always', value: 'white' },
-      },
-      {
-        offsetX: '0',
-        offsetY: '0.5',
-        blur: '1',
-        spread: '-0.5',
-        opacity: '10',
-        color: { type: 'always', value: 'white' },
-      },
-    ],
-    'lg-invert': [
-      {
-        offsetX: '0',
-        offsetY: '1',
-        blur: '1.5',
-        spread: '-1',
-        opacity: '10',
-        color: { type: 'always', value: 'white' },
-      },
-      {
-        offsetX: '0',
-        offsetY: '2.5',
-        blur: '3.5',
-        spread: '-0.5',
-        opacity: '10',
-        color: { type: 'always', value: 'white' },
-      },
-    ],
-    'xl-invert': [
-      {
-        offsetX: '0',
-        offsetY: '2',
-        blur: '2.5',
-        spread: '-1.5',
-        opacity: '10',
-        color: { type: 'always', value: 'white' },
-      },
-      {
-        offsetX: '0',
-        offsetY: '5',
-        blur: '6',
-        spread: '-1',
-        opacity: '10',
-        color: { type: 'always', value: 'white' },
-      },
-    ],
-    '2xl-invert': [
-      {
-        offsetX: '0',
-        offsetY: '6',
-        blur: '12',
-        spread: '-3',
-        opacity: '25',
-        color: { type: 'always', value: 'white' },
-      },
-    ],
-  },
-};

package/src/tokens/configs/sizes.ts

@@ -1,23 +0,0 @@
-import { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';
-
-import type { AvatarSizeConfig, IconSizeConfig, InputSize } from '../types';
-
-const compactAvatarSizes: AvatarSizeConfig = {
-  xs: 24,
-  sm: 28,
-  md: 40,
-  lg: 52,
-  xl: 64,
-};
-
-const normalAvatarSizes: AvatarSizeConfig = compactAvatarSizes;
-
-const compactIconSizes: IconSizeConfig = ICON_SIZE_MAP;
-const normalIconSizes: IconSizeConfig = ICON_SIZE_MAP;
-
-const inputSizes: Record<InputSize, number> = {
-  md: 40,
-  lg: 52,
-};
-
-export { compactAvatarSizes, compactIconSizes, inputSizes, normalAvatarSizes, normalIconSizes };