@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/src/tokens/configs/colorMode.ts

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+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 };