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

package/src/tailwind/components/getResponsiveTextStyles.ts

@@ -1,161 +0,0 @@
-import { textVariants } from '@yahoo/uds/fixtures';
-import type { BreakpointWithBase, TypographyStyle, UniversalTokensConfig } from '@yahoo/uds/tokens';
-import { isString } from 'lodash';
-
-import {
-  FONT_FAMILY_PREFIX,
-  FONT_SIZE_PREFIX,
-  FONT_SLANT_PREFIX,
-  FONT_WEIGHT_PREFIX,
-  FONT_WIDTH_PREFIX,
-  LINE_HEIGHT_PREFIX,
-  TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES,
-  TEXT_RESPONSIVE_CLASSNAME,
-  TEXT_TRANSFORM_PREFIX,
-} from '../../tokens/consts/cssTokens';
-import { assertUnreachable } from '../../utils/assertUnreachable';
-import { entries } from '../../utils/entries';
-import type { CssStyleObject } from './types';
-
-const textVariantsSafe = (variant: string) => variant.replace('/', '-');
-const BASE_SIZE = 16; // Base size in pixels for rem calculations
-
-const toRem = (size: number) => `${size / BASE_SIZE}rem`;
-
-const mapClassNames = (name: keyof typeof TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES) =>
-  '.' + TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES[name];
-
-const getValue = (
-  config: UniversalTokensConfig,
-  variant: keyof UniversalTokensConfig['typography'],
-  key: keyof TypographyStyle,
-  breakpoint: BreakpointWithBase,
-): string => {
-  const data = config.typography[variant]?.[key];
-
-  if (!data) {
-    throw new Error(`Missing typography data for variant "${variant}" and key "${key}"`);
-  }
-
-  const value = breakpoint === 'base' ? data.base : data.breakpoints?.[breakpoint];
-
-  if (!value) {
-    throw new Error(
-      `Missing value for variant "${variant}", key "${key}", and breakpoint "${breakpoint}"`,
-    );
-  }
-
-  if (isString(value)) {
-    return value;
-  }
-
-  switch (value.type) {
-    case 'px':
-      return toRem(value.value);
-    case 'unitless':
-      return String(value.value);
-  }
-
-  return assertUnreachable(value);
-};
-
-const convertFontAlias = (config: UniversalTokensConfig, value: string) => {
-  if (value in config.font) {
-    return `var(--${FONT_FAMILY_PREFIX}-${value})`;
-  }
-
-  return value;
-};
-
-const cssVariablesForBreakpoint = (config: UniversalTokensConfig, breakpoint: BreakpointWithBase) =>
-  Object.fromEntries(
-    textVariants.flatMap((variant) => {
-      const safeVariant = textVariantsSafe(variant);
-
-      return [
-        [
-          `--${FONT_FAMILY_PREFIX}-${safeVariant}`,
-          convertFontAlias(config, getValue(config, variant, 'fontFamily', breakpoint)),
-        ],
-        [`--${FONT_SIZE_PREFIX}-${safeVariant}`, getValue(config, variant, 'fontSize', breakpoint)],
-        [
-          `--${FONT_WEIGHT_PREFIX}-${safeVariant}`,
-          getValue(config, variant, 'fontWeight', breakpoint),
-        ],
-        [
-          `--${FONT_SLANT_PREFIX}-${safeVariant}`,
-          getValue(config, variant, 'fontSlant', breakpoint),
-        ],
-        [
-          `--${FONT_WIDTH_PREFIX}-${safeVariant}`,
-          getValue(config, variant, 'fontWidth', breakpoint),
-        ],
-        [
-          `--${LINE_HEIGHT_PREFIX}-${safeVariant}`,
-          getValue(config, variant, 'lineHeight', breakpoint),
-        ],
-        [
-          `--${TEXT_TRANSFORM_PREFIX}-${safeVariant}`,
-          getValue(config, variant, 'textTransform', breakpoint),
-        ],
-      ];
-    }),
-  ) as unknown as CssStyleObject;
-
-const tailwindConfigPerVariant = (prefix: string) =>
-  Object.fromEntries(
-    textVariants.map(textVariantsSafe).map((variant) => [variant, `var(--${prefix}-${variant})`]),
-  );
-
-const RESPONSIVE_TAILWIND_CONFIG_MAP = {
-  fontFamily: tailwindConfigPerVariant(FONT_FAMILY_PREFIX),
-  fontWeight: tailwindConfigPerVariant(FONT_WEIGHT_PREFIX),
-  fontSlant: tailwindConfigPerVariant(FONT_SLANT_PREFIX),
-  fontWidth: tailwindConfigPerVariant(FONT_WIDTH_PREFIX),
-  fontSize: tailwindConfigPerVariant(FONT_SIZE_PREFIX),
-  lineHeight: tailwindConfigPerVariant(LINE_HEIGHT_PREFIX),
-  textTransform: tailwindConfigPerVariant(TEXT_TRANSFORM_PREFIX),
-};
-
-const getBaseTextVars = (config: UniversalTokensConfig) => {
-  return cssVariablesForBreakpoint(config, 'base');
-};
-
-const getResponsiveTextStyles = (config: UniversalTokensConfig) => {
-  // Mobile first approach: find the smallest breakpoint
-  const breakpoints = entries(config.breakpoints).sort(
-    ([, { value: minWidthA }], [, { value: minWidthB }]) => minWidthA - minWidthB,
-  );
-
-  return {
-    // Order necessary for CSS specificity.
-    // 1. Class to opt-in an element and its children to responsive text styles.
-    [`.${TEXT_RESPONSIVE_CLASSNAME}`]: Object.fromEntries(
-      breakpoints.map(([name, { value: minWidth }]) => [
-        // If its the smallest breakpoint, we set the base styles
-        `@media (min-width: ${minWidth}px)`,
-        cssVariablesForBreakpoint(config, name),
-      ]),
-    ),
-
-    // 2. Classes for locking to a specific breakpoint.
-    [mapClassNames('base')]: cssVariablesForBreakpoint(config, 'base'),
-
-    [mapClassNames('defaultBreakpoint')]: cssVariablesForBreakpoint(
-      config,
-      config.globalDefaults.breakpoint,
-    ),
-
-    ...Object.fromEntries(
-      breakpoints.map(([name]) => [mapClassNames(name), cssVariablesForBreakpoint(config, name)]),
-    ),
-  } as CssStyleObject;
-};
-
-export {
-  cssVariablesForBreakpoint,
-  getBaseTextVars,
-  getResponsiveTextStyles,
-  RESPONSIVE_TAILWIND_CONFIG_MAP,
-  textVariantsSafe,
-};

package/src/tailwind/components/types.ts

@@ -1,14 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/*                                  CSS TYPES                                 */
-/* -------------------------------------------------------------------------- */
-import type { CSSRuleObject } from 'tailwindcss/types/config';
-
-/** TODO: create typed theme function to ensure valid paths are being used */
-export type ThemeFn = (path: string) => string;
-
-export type SimpleStyleObject = Record<string, string> | CSSRuleObject;
-
-export type CssStyleObject = Record<
-  `.${string}`,
-  SimpleStyleObject | Record<string, SimpleStyleObject>
->;

package/src/tailwind/components/utils.ts

@@ -1,73 +0,0 @@
-import { alwaysPaletteAliases, scaleEffectMap } from '@yahoo/uds/fixtures';
-import type {
-  AlwaysPaletteAlias,
-  ButtonColorProperty,
-  ButtonColorPropertyConfig,
-  ButtonMotionPropertyConfig,
-  ButtonShadowPropertyConfig,
-  Hue,
-  HueStep,
-} from '@yahoo/uds/tokens';
-import { isString } from 'lodash';
-
-import { getShadowLayerValue } from '../utils';
-import type { ThemeFn } from './types';
-
-// TODO read from motion config one day
-const DEFAULT_BUTTON_SCALE = 'sm' as const;
-
-export function getVar<Key extends string, Value extends `--${string}`>(
-  variableMap: Record<Key, Value>,
-  lookup: Key,
-  fallback: { [key in Value]?: string } | string,
-) {
-  const cssVariable = variableMap[lookup];
-  const fallbackValue = isString(fallback) ? fallback : fallback?.[cssVariable];
-  return fallbackValue
-    ? (`var(${cssVariable}, ${fallbackValue})` as const)
-    : (`var(${cssVariable})` as const);
-}
-
-export function getButtonColorForProperty(
-  property: ButtonColorProperty,
-  { type, value }: ButtonColorPropertyConfig[ButtonColorProperty],
-  theme: ThemeFn,
-) {
-  const tailwindThemeLookup = property === 'color' ? 'textColor' : property;
-  if (type === 'palette') {
-    if (alwaysPaletteAliases.includes(value as AlwaysPaletteAlias)) {
-      return value;
-    }
-    return theme(`${tailwindThemeLookup}.${value}`);
-  } else {
-    const [hue, hueStep] = value.split('-') as [Hue, HueStep];
-    return theme(`colors.${hue}.${hueStep}`);
-  }
-}
-
-export function getButtonScale({ scale }: { scale: ButtonMotionPropertyConfig['scale'] }) {
-  // Return the correct scale based on the theme
-  return scaleEffectMap[scale][DEFAULT_BUTTON_SCALE];
-}
-
-export function getButtonShadowVar(
-  buttonShadowType: keyof ButtonShadowPropertyConfig,
-  shadowConfig: ButtonShadowPropertyConfig,
-) {
-  const shadowField = shadowConfig[buttonShadowType];
-  const shadowType = buttonShadowType === 'insetShadow' ? 'inset' : 'drop';
-
-  const noneValue = '0 0 0 transparent';
-
-  if (shadowField.value === 'none') {
-    return noneValue;
-  }
-  if (shadowField.value !== 'custom') {
-    return `var(--uds-${shadowType}-shadow-${shadowField.value})`;
-  }
-
-  const customShadowPresetVals = shadowField.config?.map((preset, index) =>
-    getShadowLayerValue({ preset, shadowType, prefix: index > 0 ? `${index + 1}` : undefined }),
-  );
-  return customShadowPresetVals?.join(', ') || noneValue;
-}

package/src/tailwind/defaultTailwindThemeAsUdsConfig.ts

@@ -1,78 +0,0 @@
-import type { BorderRadius, BorderWidth, TextVariant } from '@yahoo/uds/tokens';
-import type defaultTailwindTheme from 'tailwindcss/defaultTheme';
-
-type TwFontSizeToExclude = '7xl' | '8xl' | '9xl';
-type TwdFontSize = Exclude<keyof typeof defaultTailwindTheme.fontSize, TwFontSizeToExclude>;
-
-const fontSizeMap: Record<Exclude<TextVariant, 'legal1' | 'legal1/emphasized'>, TwdFontSize> = {
-  display1: '6xl',
-  display2: '5xl',
-  display3: '4xl',
-  title1: '3xl',
-  title2: '2xl',
-  title3: 'xl',
-  title4: 'lg',
-  headline1: 'base',
-  body1: 'base',
-  label1: 'sm',
-  label2: 'sm',
-  label3: 'sm',
-  label4: 'sm',
-  caption1: 'xs',
-  caption2: 'xs',
-  'display1/emphasized': '6xl',
-  'display2/emphasized': '5xl',
-  'display3/emphasized': '4xl',
-  'title1/emphasized': '3xl',
-  'title2/emphasized': '2xl',
-  'title3/emphasized': 'xl',
-  'title4/emphasized': 'lg',
-  'headline1/emphasized': 'base',
-  'body1/emphasized': 'base',
-  'label1/emphasized': 'sm',
-  'label2/emphasized': 'sm',
-  'label3/emphasized': 'sm',
-  'label4/emphasized': 'sm',
-  'caption1/emphasized': 'xs',
-  'caption2/emphasized': 'xs',
-  ui1: 'xs',
-  ui2: 'xs',
-  ui3: 'xs',
-  ui4: 'xs',
-  ui5: 'xs',
-  ui6: 'xs',
-  'ui1/emphasized': 'xs',
-  'ui2/emphasized': 'xs',
-  'ui3/emphasized': 'xs',
-  'ui4/emphasized': 'xs',
-  'ui5/emphasized': 'xs',
-  'ui6/emphasized': 'xs',
-};
-
-type TwBorderRadiusToExclude = 'none' | '2xl' | '3xl' | 'full';
-type TwBorderRadius = Exclude<
-  keyof typeof defaultTailwindTheme.borderRadius,
-  TwBorderRadiusToExclude
->;
-const borderRadiusMap: Record<Exclude<BorderRadius, 'none' | 'full'>, TwBorderRadius> = {
-  xs: 'sm',
-  sm: 'DEFAULT',
-  md: 'md',
-  lg: 'lg',
-  xl: 'xl',
-};
-
-type TwBorderWidthToExclude = '0' | '8';
-type TwBorderWidth = Exclude<keyof typeof defaultTailwindTheme.borderWidth, TwBorderWidthToExclude>;
-const borderWidthMap: Record<Exclude<BorderWidth, 'none'>, TwBorderWidth> = {
-  thin: 'DEFAULT',
-  medium: '2',
-  thick: '4',
-};
-
-export const udsToTailwindMap = {
-  fontSize: fontSizeMap,
-  lineHeight: fontSizeMap,
-  borderRadius: borderRadiusMap,
-  borderWidth: borderWidthMap,
-};

package/src/tailwind/postcss.config.ts

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

package/src/tailwind/purger/index.ts

@@ -1 +0,0 @@
-export * from '../../../generated/tailwindPurge';

package/src/tailwind/tailwind.config.ts

@@ -1,50 +0,0 @@
-import {
-  DARK_COLOR_MODE_CLASSNAME,
-  INVERT_COLOR_MODE_CLASSNAME,
-  LARGE_SCALE_MODE_CLASSNAME,
-  LIGHT_COLOR_MODE_CLASSNAME,
-  MEDIUM_SCALE_MODE_CLASSNAME,
-  SMALL_SCALE_MODE_CLASSNAME,
-  SYSTEM_COLOR_MODE_CLASSNAME,
-  XLARGE_SCALE_MODE_CLASSNAME,
-  XSMALL_SCALE_MODE_CLASSNAME,
-  XXLARGE_SCALE_MODE_CLASSNAME,
-  XXXLARGE_SCALE_MODE_CLASSNAME,
-} from '@yahoo/uds/tokens';
-import type { Config } from 'tailwindcss';
-
-import { defaultTokensConfig } from '../defaultTokensConfig';
-import { tailwindPlugin } from './tailwindPlugin';
-
-const classNames = [
-  INVERT_COLOR_MODE_CLASSNAME,
-  SYSTEM_COLOR_MODE_CLASSNAME,
-  DARK_COLOR_MODE_CLASSNAME,
-  LARGE_SCALE_MODE_CLASSNAME,
-  LIGHT_COLOR_MODE_CLASSNAME,
-  MEDIUM_SCALE_MODE_CLASSNAME,
-  SMALL_SCALE_MODE_CLASSNAME,
-  XLARGE_SCALE_MODE_CLASSNAME,
-  XSMALL_SCALE_MODE_CLASSNAME,
-  XXLARGE_SCALE_MODE_CLASSNAME,
-  XXXLARGE_SCALE_MODE_CLASSNAME,
-].join(' ');
-
-const config = {
-  content: [
-    {
-      raw: `<div class="${classNames}">`,
-      extension: 'html',
-    },
-  ],
-  theme: {},
-  plugins: [tailwindPlugin({ config: defaultTokensConfig })],
-  safelist: [
-    {
-      pattern: /./,
-    },
-  ],
-} satisfies Config;
-
-// eslint-disable-next-line import/no-default-export
-export default config;

package/src/tailwind/tailwind.d.ts

@@ -1,5 +0,0 @@
-declare module 'tailwindcss/lib/util/flattenColorPalette' {
-  import type { ColorPalette } from 'tailwindcss/colors';
-  // eslint-disable-next-line import/no-default-export
-  export default function flattenColorPalette(colors: ColorPalette): Record<string, string>;
-}