@apollo-design/theme 0.0.0-stage → 0.1.9

package/dist/shared/font-map-token.mjs

@@ -0,0 +1,36 @@
+import genFontSizes from './font-sizes.mjs';
+
+function genFontMapToken(fontSize) {
+  const p = genFontSizes(fontSize);
+  const fontSizeSM = p[0].size;
+  const fontSizeMD = p[1].size;
+  const fontSizeLG = p[2].size;
+  const lineHeight = p[1].lineHeight;
+  const lineHeightSM = p[0].lineHeight;
+  const lineHeightLG = p[2].lineHeight;
+  return {
+    fontSizeSM,
+    fontSize: fontSizeMD,
+    fontSizeLG,
+    fontSizeXL: p[3].size,
+    fontSizeHeading1: p[6].size,
+    fontSizeHeading2: p[5].size,
+    fontSizeHeading3: p[4].size,
+    // ⚠️ heading4 与 XL 同值、heading5 与 LG 同值 —— antd 的冗余定义，不是笔误
+    fontSizeHeading4: p[3].size,
+    fontSizeHeading5: p[2].size,
+    lineHeight,
+    lineHeightLG,
+    lineHeightSM,
+    fontHeight: Math.round(lineHeight * fontSizeMD),
+    fontHeightLG: Math.round(lineHeightLG * fontSizeLG),
+    fontHeightSM: Math.round(lineHeightSM * fontSizeSM),
+    lineHeightHeading1: p[6].lineHeight,
+    lineHeightHeading2: p[5].lineHeight,
+    lineHeightHeading3: p[4].lineHeight,
+    lineHeightHeading4: p[3].lineHeight,
+    lineHeightHeading5: p[2].lineHeight
+  };
+}
+
+export { genFontMapToken as default };

package/dist/shared/font-sizes.mjs

@@ -0,0 +1,27 @@
+function getLineHeight(fontSize) {
+  return (fontSize + 8) / fontSize;
+}
+function genFontSizes(base) {
+  const pairAt = (index) => {
+    if (index === 1) return { size: base, lineHeight: getLineHeight(base) };
+    const i = index - 1;
+    const baseSize = base * Math.E ** (i / 5);
+    const intSize = index > 1 ? Math.floor(baseSize) : Math.ceil(baseSize);
+    const size = Math.floor(intSize / 2) * 2;
+    return { size, lineHeight: getLineHeight(size) };
+  };
+  return [
+    pairAt(0),
+    pairAt(1),
+    pairAt(2),
+    pairAt(3),
+    pairAt(4),
+    pairAt(5),
+    pairAt(6),
+    pairAt(7),
+    pairAt(8),
+    pairAt(9)
+  ];
+}
+
+export { genFontSizes as default, getLineHeight };

package/dist/shared/get-alpha-color.mjs

@@ -0,0 +1,28 @@
+import { Color } from '@apollo-design/utils';
+
+function isStableColor(color) {
+  return color >= 0 && color <= 255;
+}
+function getAlphaColor(frontColor, backgroundColor) {
+  const { r: fR, g: fG, b: fB, a: originAlpha } = new Color(frontColor).toRgb();
+  if (originAlpha < 1) {
+    return frontColor;
+  }
+  const { r: bR, g: bG, b: bB } = new Color(backgroundColor).toRgb();
+  for (let fA = 0.01; fA <= 1; fA += 0.01) {
+    const r = Math.round((fR - bR * (1 - fA)) / fA);
+    const g = Math.round((fG - bG * (1 - fA)) / fA);
+    const b = Math.round((fB - bB * (1 - fA)) / fA);
+    if (isStableColor(r) && isStableColor(g) && isStableColor(b)) {
+      return new Color({
+        r,
+        g,
+        b,
+        a: Math.round(fA * 100) / 100
+      }).toRgbString();
+    }
+  }
+  return new Color({ r: fR, g: fG, b: fB, a: 1 }).toRgbString();
+}
+
+export { getAlphaColor as default };

package/dist/shared/radius.mjs

@@ -0,0 +1,44 @@
+function genRadius(radiusBase) {
+  let radiusLG = radiusBase;
+  let radiusSM = radiusBase;
+  let radiusXS = radiusBase;
+  let radiusOuter = radiusBase;
+  if (radiusBase < 6 && radiusBase >= 5) {
+    radiusLG = radiusBase + 1;
+  } else if (radiusBase < 16 && radiusBase >= 6) {
+    radiusLG = radiusBase + 2;
+  } else if (radiusBase >= 16) {
+    radiusLG = 16;
+  }
+  if (radiusBase < 7 && radiusBase >= 5) {
+    radiusSM = 4;
+  } else if (radiusBase < 8 && radiusBase >= 7) {
+    radiusSM = 5;
+  } else if (radiusBase < 14 && radiusBase >= 8) {
+    radiusSM = 6;
+  } else if (radiusBase < 16 && radiusBase >= 14) {
+    radiusSM = 7;
+  } else if (radiusBase >= 16) {
+    radiusSM = 8;
+  }
+  if (radiusBase < 6 && radiusBase >= 2) {
+    radiusXS = 1;
+  } else if (radiusBase >= 6) {
+    radiusXS = 2;
+  }
+  if (radiusBase > 4 && radiusBase < 8) {
+    radiusOuter = 4;
+  } else if (radiusBase >= 8) {
+    radiusOuter = 6;
+  }
+  return {
+    borderRadius: radiusBase,
+    borderRadiusCircle: "100%",
+    borderRadiusXS: radiusXS,
+    borderRadiusSM: radiusSM,
+    borderRadiusLG: radiusLG,
+    borderRadiusOuter: radiusOuter
+  };
+}
+
+export { genRadius };

package/dist/shared/size-map-token.mjs

@@ -0,0 +1,31 @@
+function genSizeMapToken(token) {
+  const { sizeUnit, sizeStep } = token;
+  return {
+    sizeXXL: sizeUnit * (sizeStep + 8),
+    sizeXL: sizeUnit * (sizeStep + 4),
+    sizeLG: sizeUnit * (sizeStep + 2),
+    sizeMD: sizeUnit * (sizeStep + 1),
+    sizeMS: sizeUnit * sizeStep,
+    size: sizeUnit * sizeStep,
+    sizeSM: sizeUnit * (sizeStep - 1),
+    sizeXS: sizeUnit * (sizeStep - 2),
+    sizeXXS: sizeUnit * (sizeStep - 3)
+  };
+}
+function genCompactSizeMapToken(token) {
+  const { sizeUnit, sizeStep } = token;
+  const compactSizeStep = sizeStep - 2;
+  return {
+    sizeXXL: sizeUnit * (compactSizeStep + 10),
+    sizeXL: sizeUnit * (compactSizeStep + 6),
+    sizeLG: sizeUnit * (compactSizeStep + 2),
+    sizeMD: sizeUnit * (compactSizeStep + 2),
+    sizeMS: sizeUnit * (compactSizeStep + 1),
+    size: sizeUnit * compactSizeStep,
+    sizeSM: sizeUnit * compactSizeStep,
+    sizeXS: sizeUnit * (compactSizeStep - 1),
+    sizeXXS: sizeUnit * (compactSizeStep - 1)
+  };
+}
+
+export { genCompactSizeMapToken, genSizeMapToken };

package/dist/shared/theme.DBaLDtcj.d.mts

@@ -0,0 +1,358 @@
+/**
+ * @apollo-design/theme — Token 类型
+ *
+ * Seed → Map → Alias → Component 的公开类型由 Apollo API 决定。
+ * 历史上游字段与默认值是回归证据，不限制独立发展的字段集合。
+ *
+ * 类型是「重新定义」而非复制：antd 的类型文件带大量 JSDoc，逐字搬运会让我们
+ * 在自己的注释里说别人的话。这里只保留契约本身（名称 + 类型），
+ * 语义说明写在我们自己的文档中。
+ */
+/** antd 的 13 个预设色。pink 是 magenta 的废弃别名，值相同。 */
+type PresetColorKey = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
+type PresetColorType = Record<PresetColorKey, string>;
+/**
+ * 预设色板展开后的键：`blue-1`…`blue-10` 与 `blue1`…`blue10`。
+ * 两种写法 antd 都产出，且值相同（历史兼容）。
+ */
+type PresetColorPalettes = {
+    [K in PresetColorKey as `${K}-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}`]: string;
+} & {
+    [K in PresetColorKey as `${K}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}`]: string;
+};
+/** 色板梯度：1 最浅 → 10 最深（antd 用的是 1-based，不是 0-based） */
+type ColorPalette = Record<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10, string>;
+interface SeedToken extends PresetColorType {
+    colorPrimary: string;
+    colorSuccess: string;
+    colorWarning: string;
+    colorError: string;
+    colorInfo: string;
+    colorLink: string;
+    colorTextBase: string;
+    colorBgBase: string;
+    fontFamily: string;
+    fontFamilyCode: string;
+    fontSize: number;
+    lineWidth: number;
+    lineType: string;
+    borderRadius: number;
+    /**
+     * 完美圆的圆角值（`'100%'`）。是几何常量，不是视觉设计值 —— `1em × 1em` 的方块
+     * 套这个值会渲染成圆。给 `borderRadiusCircle` 留一个变量是组件层去掉硬编码 `100%`
+     * 的最小代价；它不在 design-system 调色板上，主题切换也不会改它。
+     */
+    borderRadiusCircle: string;
+    sizeUnit: number;
+    sizeStep: number;
+    sizePopupArrow: number;
+    controlHeight: number;
+    zIndexBase: number;
+    zIndexPopupBase: number;
+    opacityImage: number;
+    motionUnit: number;
+    motionBase: number;
+    motionEaseOutCirc: string;
+    motionEaseInOutCirc: string;
+    motionEaseOut: string;
+    motionEaseInOut: string;
+    motionEaseOutBack: string;
+    motionEaseInBack: string;
+    motionEaseInQuint: string;
+    motionEaseOutQuint: string;
+    wireframe: boolean;
+    focusOutline: boolean;
+    motion: boolean;
+}
+/** 中性色 + 功能色梯度。由 genColorMapToken 产出。 */
+interface ColorNeutralMapToken {
+    colorBgBase: string;
+    colorTextBase: string;
+    colorShadow: string;
+    colorText: string;
+    colorTextSecondary: string;
+    colorTextTertiary: string;
+    colorTextQuaternary: string;
+    colorFill: string;
+    colorFillSecondary: string;
+    colorFillTertiary: string;
+    colorFillQuaternary: string;
+    colorBgSolid: string;
+    colorBgSolidHover: string;
+    colorBgSolidActive: string;
+    colorBgLayout: string;
+    colorBgContainer: string;
+    colorBgElevated: string;
+    colorBgSpotlight: string;
+    colorBgBlur: string;
+    colorBorder: string;
+    colorBorderDisabled: string;
+    colorBorderSecondary: string;
+}
+/** 功能色（primary / success / warning / error / info / link）的 11 档梯度 */
+interface FunctionalColorMapToken {
+    colorPrimaryBg: string;
+    colorPrimaryBgHover: string;
+    colorPrimaryBorder: string;
+    colorPrimaryBorderHover: string;
+    colorPrimaryHover: string;
+    colorPrimary: string;
+    colorPrimaryActive: string;
+    colorPrimaryTextHover: string;
+    colorPrimaryText: string;
+    colorPrimaryTextActive: string;
+    colorSuccessBg: string;
+    colorSuccessBgHover: string;
+    colorSuccessBorder: string;
+    colorSuccessBorderHover: string;
+    colorSuccessHover: string;
+    colorSuccess: string;
+    colorSuccessActive: string;
+    colorSuccessTextHover: string;
+    colorSuccessText: string;
+    colorSuccessTextActive: string;
+    colorErrorBg: string;
+    colorErrorBgHover: string;
+    colorErrorBgFilledHover: string;
+    colorErrorBgActive: string;
+    colorErrorBorder: string;
+    colorErrorBorderHover: string;
+    colorErrorHover: string;
+    colorError: string;
+    colorErrorActive: string;
+    colorErrorTextHover: string;
+    colorErrorText: string;
+    colorErrorTextActive: string;
+    colorWarningBg: string;
+    colorWarningBgHover: string;
+    colorWarningBorder: string;
+    colorWarningBorderHover: string;
+    colorWarningHover: string;
+    colorWarning: string;
+    colorWarningActive: string;
+    colorWarningTextHover: string;
+    colorWarningText: string;
+    colorWarningTextActive: string;
+    colorInfoBg: string;
+    colorInfoBgHover: string;
+    colorInfoBorder: string;
+    colorInfoBorderHover: string;
+    colorInfoHover: string;
+    colorInfo: string;
+    colorInfoActive: string;
+    colorInfoTextHover: string;
+    colorInfoText: string;
+    colorInfoTextActive: string;
+    colorLinkHover: string;
+    colorLink: string;
+    colorLinkActive: string;
+    colorBgMask: string;
+    colorWhite: string;
+}
+/** 每个预设色派生的 Hover / Active 两档 */
+type PresetColorMapToken = {
+    [K in PresetColorKey as `${K}Hover`]: string;
+} & {
+    [K in PresetColorKey as `${K}Active`]: string;
+};
+type ColorMapToken = ColorNeutralMapToken & FunctionalColorMapToken & PresetColorMapToken;
+interface FontMapToken {
+    fontSizeSM: number;
+    fontSize: number;
+    fontSizeLG: number;
+    fontSizeXL: number;
+    fontSizeHeading1: number;
+    fontSizeHeading2: number;
+    fontSizeHeading3: number;
+    fontSizeHeading4: number;
+    fontSizeHeading5: number;
+    lineHeight: number;
+    lineHeightLG: number;
+    lineHeightSM: number;
+    fontHeight: number;
+    fontHeightLG: number;
+    fontHeightSM: number;
+    lineHeightHeading1: number;
+    lineHeightHeading2: number;
+    lineHeightHeading3: number;
+    lineHeightHeading4: number;
+    lineHeightHeading5: number;
+}
+interface SizeMapToken {
+    sizeXXL: number;
+    sizeXL: number;
+    sizeLG: number;
+    sizeMD: number;
+    sizeMS: number;
+    size: number;
+    sizeSM: number;
+    sizeXS: number;
+    sizeXXS: number;
+}
+interface HeightMapToken {
+    controlHeight: number;
+    controlHeightSM: number;
+    controlHeightXS: number;
+    controlHeightLG: number;
+}
+interface StyleMapToken {
+    lineWidthBold: number;
+    borderRadiusXS: number;
+    borderRadiusSM: number;
+    borderRadius: number;
+    borderRadiusLG: number;
+    borderRadiusOuter: number;
+    borderRadiusCircle: string;
+}
+interface CommonMapToken {
+    motionDurationFast: string;
+    motionDurationMid: string;
+    motionDurationSlow: string;
+}
+type MapToken = SeedToken & ColorMapToken & FontMapToken & SizeMapToken & HeightMapToken & StyleMapToken & CommonMapToken & PresetColorPalettes;
+interface AliasToken extends MapToken {
+    colorFillContent: string;
+    colorFillContentHover: string;
+    colorFillAlter: string;
+    colorBgContainerDisabled: string;
+    colorBorderBg: string;
+    colorSplit: string;
+    colorTextPlaceholder: string;
+    colorTextDisabled: string;
+    colorTextHeading: string;
+    colorTextLabel: string;
+    colorTextDescription: string;
+    colorTextLightSolid: string;
+    colorHighlight: string;
+    colorBgTextHover: string;
+    colorBgTextActive: string;
+    colorIcon: string;
+    colorIconHover: string;
+    colorErrorOutline: string;
+    colorWarningOutline: string;
+    colorErrorAffix: string;
+    colorWarningAffix: string;
+    fontSizeIcon: number;
+    lineWidthFocus: number;
+    controlOutlineWidth: number;
+    controlInteractiveSize: number;
+    controlItemBgHover: string;
+    controlItemBgActive: string;
+    controlItemBgActiveHover: string;
+    controlItemBgActiveDisabled: string;
+    controlTmpOutline: string;
+    controlOutline: string;
+    fontWeightStrong: number;
+    opacityLoading: number;
+    linkDecoration: string;
+    linkHoverDecoration: string;
+    linkFocusDecoration: string;
+    controlPaddingHorizontal: number;
+    controlPaddingHorizontalSM: number;
+    paddingXXS: number;
+    paddingXS: number;
+    paddingSM: number;
+    padding: number;
+    paddingMD: number;
+    paddingLG: number;
+    paddingXL: number;
+    paddingContentHorizontalLG: number;
+    paddingContentVerticalLG: number;
+    paddingContentHorizontal: number;
+    paddingContentVertical: number;
+    paddingContentHorizontalSM: number;
+    paddingContentVerticalSM: number;
+    marginXXS: number;
+    marginXS: number;
+    marginSM: number;
+    margin: number;
+    marginMD: number;
+    marginLG: number;
+    marginXL: number;
+    marginXXL: number;
+    boxShadow: string;
+    boxShadowSecondary: string;
+    boxShadowTertiary: string;
+    boxShadowPopoverArrow: string;
+    dropShadowPopover: string;
+    boxShadowCard: string;
+    boxShadowDrawerRight: string;
+    boxShadowDrawerLeft: string;
+    boxShadowDrawerUp: string;
+    boxShadowDrawerDown: string;
+    boxShadowTabsOverflowLeft: string;
+    boxShadowTabsOverflowRight: string;
+    boxShadowTabsOverflowTop: string;
+    boxShadowTabsOverflowBottom: string;
+    screenXS: number;
+    screenXSMin: number;
+    screenXSMax: number;
+    screenSM: number;
+    screenSMMin: number;
+    screenSMMax: number;
+    screenMD: number;
+    screenMDMin: number;
+    screenMDMax: number;
+    screenLG: number;
+    screenLGMin: number;
+    screenLGMax: number;
+    screenXL: number;
+    screenXLMin: number;
+    screenXLMax: number;
+    screenXXL: number;
+    screenXXLMin: number;
+    screenXXLMax: number;
+    screenXXXL: number;
+    screenXXXLMin: number;
+}
+/**
+ * 组件 Token 的类型入口。
+ *
+ * antd 的组件 token **默认值分散在各组件自己的 style 里**（`components/<x>/style/index.ts`
+ * 的 `prepareComponentToken`），`theme/interface/components.ts` 只做类型聚合。
+ * 本包遵循同样的分工：这里只声明类型与合并机制，默认值由 `packages/ui` 逐组件提供 ——
+ * 见本包 README 的「明确不做」。
+ */
+type ComponentTokenMap = Record<string, Record<string, string | number | boolean>>;
+/**
+ * 派生算法。
+ *
+ * 第二个参数 `mapToken` 是**前一个算法的结果**（antd 的 `Theme.getDerivativeToken`
+ * 用 `reduce` 串联）。为 `undefined` 时表示自己是链上的第一个，需要自己先跑 default。
+ * 这个「可组合」语义是 antd 的契约，不能改成「每个算法都从 seed 重算」。
+ */
+type MappingAlgorithm = (seed: SeedToken, mapToken?: MapToken) => MapToken;
+type ThemeMode = 'light' | 'dark' | 'system';
+type ThemeAppearance = Exclude<ThemeMode, 'system'>;
+type ThemeTokenOverrides = Partial<AliasToken & Record<string, string | number | boolean>>;
+/** A preset uses the same seeds, aliases and optional mapping algorithms as user configuration. */
+interface ThemePresetScheme {
+    readonly token?: Readonly<ThemeTokenOverrides>;
+    readonly algorithm?: MappingAlgorithm | MappingAlgorithm[];
+}
+interface ThemePreset {
+    readonly name: string;
+    readonly token?: Readonly<ThemeTokenOverrides>;
+    readonly light?: ThemePresetScheme;
+    readonly dark?: ThemePresetScheme;
+}
+interface ThemeConfig {
+    /** Presets are ordinary public data, imported independently from component structure. */
+    preset?: ThemePreset;
+    /** Live providers resolve system preference; pure/SSR derivation defaults to light. */
+    mode?: ThemeMode;
+    /** ConfigProvider inherits by default; ThemeProvider only inherits when true. */
+    inherit?: boolean;
+    /** Known Seed/Map/Alias keys retain their value types; undefined is an omission. */
+    token?: ThemeTokenOverrides;
+    /** Empty arrays use the default algorithm; nonempty arrays run in order. */
+    algorithm?: MappingAlgorithm | MappingAlgorithm[];
+    /** CSS 变量前缀。默认 `apollo`（已裁决：prefix-cls-default = A）。 */
+    cssVarPrefix?: string;
+    /** 组件级 token 覆盖，键为组件名 */
+    components?: ComponentTokenMap;
+}
+/** getDesignToken 的完整输出 */
+type GlobalToken = AliasToken;
+
+export type { AliasToken as A, ColorPalette as C, FontMapToken as F, GlobalToken as G, HeightMapToken as H, MapToken as M, PresetColorKey as P, SeedToken as S, ThemeConfig as T, ThemeAppearance as a, PresetColorType as b, ColorNeutralMapToken as c, ColorMapToken as d, CommonMapToken as e, StyleMapToken as f, SizeMapToken as g, ComponentTokenMap as h, MappingAlgorithm as i, PresetColorPalettes as j, ThemeMode as k, ThemePreset as l, ThemePresetScheme as m, ThemeTokenOverrides as n };