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

package/src/tailwind/components/getResponsiveTextStyles.ts

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

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

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

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

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

package/src/tailwind/purger/index.ts

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

package/src/tailwind/tailwind.config.ts

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

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