@mmailaender/convex-creem 0.1.0

package/src/design-system/typography/config.ts

@@ -0,0 +1,340 @@
+export type ViewportKey = "desktop" | "tablet" | "mobile";
+export type RoleGroup =
+  | "display"
+  | "heading"
+  | "title"
+  | "subtitle"
+  | "body"
+  | "label"
+  | "button"
+  | "link";
+
+export type TypefaceKey = "brand" | "plain";
+
+export type RoleDefinition = {
+  id: string;
+  label: string;
+  group: RoleGroup;
+  typeface: TypefaceKey;
+  defaultStep: number;
+  desktopSizePx: number;
+  desktopLineHeightPx: number;
+  defaultWeight: number;
+  responsive: boolean;
+};
+
+export type TypeScaleOption = {
+  label: string;
+  value: number;
+};
+
+export const TYPE_SCALE_OPTIONS: TypeScaleOption[] = [
+  { label: "Minor Second", value: 1.067 },
+  { label: "Major Second", value: 1.125 },
+  { label: "Minor Third", value: 1.2 },
+  { label: "Major Third", value: 1.25 },
+  { label: "Perfect Fourth", value: 1.333 },
+];
+
+export const TYPOGRAPHY_FOUNDATION = {
+  base: {
+    desktop: 16,
+    tablet: 13,
+    mobile: 10,
+  },
+  responsiveRatio: {
+    tablet: 13 / 16,
+    mobile: 10 / 16,
+  },
+  breakpoints: {
+    tabletMin: 640,
+    tabletMax: 1023,
+    mobileMax: 639,
+  },
+  typefaces: {
+    brand: "Inter, sans-serif",
+    plain: "Inter, sans-serif",
+  },
+} as const;
+
+export const ROLE_DEFINITIONS: RoleDefinition[] = [
+  {
+    id: "display-l",
+    label: "Display L",
+    group: "display",
+    typeface: "brand",
+    defaultStep: 8,
+    desktopSizePx: 95,
+    desktopLineHeightPx: 97,
+    defaultWeight: 600,
+    responsive: true,
+  },
+  {
+    id: "display-m",
+    label: "Display M",
+    group: "display",
+    typeface: "brand",
+    defaultStep: 7,
+    desktopSizePx: 76,
+    desktopLineHeightPx: 83.6,
+    defaultWeight: 600,
+    responsive: true,
+  },
+  {
+    id: "display-s",
+    label: "Display S",
+    group: "display",
+    typeface: "brand",
+    defaultStep: 6,
+    desktopSizePx: 61,
+    desktopLineHeightPx: 67.1,
+    defaultWeight: 600,
+    responsive: true,
+  },
+  {
+    id: "heading-l",
+    label: "Heading L",
+    group: "heading",
+    typeface: "brand",
+    defaultStep: 5,
+    desktopSizePx: 49,
+    desktopLineHeightPx: 53.9,
+    defaultWeight: 600,
+    responsive: true,
+  },
+  {
+    id: "heading-m",
+    label: "Heading M",
+    group: "heading",
+    typeface: "brand",
+    defaultStep: 4,
+    desktopSizePx: 39,
+    desktopLineHeightPx: 42.9,
+    defaultWeight: 600,
+    responsive: true,
+  },
+  {
+    id: "heading-s",
+    label: "Heading S",
+    group: "heading",
+    typeface: "brand",
+    defaultStep: 3,
+    desktopSizePx: 31,
+    desktopLineHeightPx: 34.1,
+    defaultWeight: 600,
+    responsive: true,
+  },
+  {
+    id: "heading-xs",
+    label: "Heading XS",
+    group: "heading",
+    typeface: "brand",
+    defaultStep: 2,
+    desktopSizePx: 25,
+    desktopLineHeightPx: 27.5,
+    defaultWeight: 600,
+    responsive: true,
+  },
+  {
+    id: "title-l",
+    label: "Title L",
+    group: "title",
+    typeface: "brand",
+    defaultStep: 2,
+    desktopSizePx: 25,
+    desktopLineHeightPx: 30,
+    defaultWeight: 600,
+    responsive: false,
+  },
+  {
+    id: "title-m",
+    label: "Title M",
+    group: "title",
+    typeface: "brand",
+    defaultStep: 1,
+    desktopSizePx: 20,
+    desktopLineHeightPx: 24,
+    defaultWeight: 600,
+    responsive: false,
+  },
+  {
+    id: "title-s",
+    label: "Title S",
+    group: "title",
+    typeface: "brand",
+    defaultStep: 0,
+    desktopSizePx: 16,
+    desktopLineHeightPx: 20,
+    defaultWeight: 600,
+    responsive: false,
+  },
+  {
+    id: "subtitle-l",
+    label: "Subtitle L",
+    group: "subtitle",
+    typeface: "plain",
+    defaultStep: 2,
+    desktopSizePx: 25,
+    desktopLineHeightPx: 37.5,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "subtitle-m",
+    label: "Subtitle M",
+    group: "subtitle",
+    typeface: "plain",
+    defaultStep: 1,
+    desktopSizePx: 20,
+    desktopLineHeightPx: 30,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "body-l",
+    label: "Body L",
+    group: "body",
+    typeface: "plain",
+    defaultStep: 0,
+    desktopSizePx: 16,
+    desktopLineHeightPx: 24,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "body-m",
+    label: "Body M",
+    group: "body",
+    typeface: "plain",
+    defaultStep: -1,
+    desktopSizePx: 14,
+    desktopLineHeightPx: 19.5,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "body-s",
+    label: "Body S",
+    group: "body",
+    typeface: "plain",
+    defaultStep: -2,
+    desktopSizePx: 11,
+    desktopLineHeightPx: 16,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "label-l",
+    label: "Label L",
+    group: "label",
+    typeface: "plain",
+    defaultStep: 0,
+    desktopSizePx: 16,
+    desktopLineHeightPx: 24,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "label-m",
+    label: "Label M",
+    group: "label",
+    typeface: "plain",
+    defaultStep: -1,
+    desktopSizePx: 14,
+    desktopLineHeightPx: 19.5,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "label-s",
+    label: "Label S",
+    group: "label",
+    typeface: "plain",
+    defaultStep: -2,
+    desktopSizePx: 11,
+    desktopLineHeightPx: 16,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "button-l",
+    label: "Button L",
+    group: "button",
+    typeface: "plain",
+    defaultStep: 0,
+    desktopSizePx: 16,
+    desktopLineHeightPx: 24,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "button-m",
+    label: "Button M",
+    group: "button",
+    typeface: "plain",
+    defaultStep: -1,
+    desktopSizePx: 14,
+    desktopLineHeightPx: 19.5,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "button-s",
+    label: "Button S",
+    group: "button",
+    typeface: "plain",
+    defaultStep: -2,
+    desktopSizePx: 11,
+    desktopLineHeightPx: 16,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "link-l",
+    label: "Link L",
+    group: "link",
+    typeface: "plain",
+    defaultStep: 0,
+    desktopSizePx: 16,
+    desktopLineHeightPx: 24,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "link-m",
+    label: "Link M",
+    group: "link",
+    typeface: "plain",
+    defaultStep: -1,
+    desktopSizePx: 14,
+    desktopLineHeightPx: 19.5,
+    defaultWeight: 400,
+    responsive: false,
+  },
+  {
+    id: "link-s",
+    label: "Link S",
+    group: "link",
+    typeface: "plain",
+    defaultStep: -2,
+    desktopSizePx: 11,
+    desktopLineHeightPx: 16,
+    defaultWeight: 400,
+    responsive: false,
+  },
+];
+
+export const SEMANTIC_TEXT_TOKENS = {
+  "content.hero": "display-l",
+  "content.page-title": "heading-l",
+  "content.section-title": "heading-s",
+  "content.subsection-title": "title-m",
+  "content.body.default": "body-m",
+  "content.body.compact": "body-s",
+  "control.button.primary": "button-m",
+  "control.button.secondary": "button-s",
+  "control.label.field": "label-m",
+  "control.label.group": "label-l",
+  "navigation.link.primary": "link-m",
+  "navigation.link.subtle": "link-s",
+} as const;

package/src/design-system/typography/index.ts

@@ -0,0 +1,2 @@
+export * from "./config.js";
+export * from "./tokens.js";

package/src/design-system/typography/tokens.ts

@@ -0,0 +1,148 @@
+import {
+  ROLE_DEFINITIONS,
+  SEMANTIC_TEXT_TOKENS,
+  TYPOGRAPHY_FOUNDATION,
+  type RoleDefinition,
+  type RoleGroup,
+  type ViewportKey,
+} from "./config.js";
+
+export type ResolvedRoleToken = {
+  id: string;
+  label: string;
+  group: RoleGroup;
+  typeface: "brand" | "plain";
+  responsive: boolean;
+  fontWeight: number;
+  fontSize: Record<ViewportKey, number>;
+  lineHeight: Record<ViewportKey, number>;
+  tracking: Record<ViewportKey, number>;
+  future: Record<string, string | number | boolean>;
+};
+
+const VIEWPORTS: ViewportKey[] = ["desktop", "tablet", "mobile"];
+
+function round(n: number): number {
+  return Math.round(n * 100) / 100;
+}
+
+function toRem(px: number): string {
+  const rem = px / 16;
+  return `${round(rem)}rem`;
+}
+
+function trackingFromSize(size: number): number {
+  if (size >= 90) return -3.5;
+  if (size >= 75) return -2.8;
+  if (size >= 60) return -2.2;
+  if (size >= 48) return -1.8;
+  if (size >= 38) return -1.4;
+  if (size >= 30) return -1;
+  if (size >= 24) return -0.6;
+  if (size >= 20) return -0.3;
+  return 0;
+}
+
+function viewportRatio(viewport: ViewportKey): number {
+  if (viewport === "tablet")
+    return TYPOGRAPHY_FOUNDATION.responsiveRatio.tablet;
+  if (viewport === "mobile")
+    return TYPOGRAPHY_FOUNDATION.responsiveRatio.mobile;
+  return 1;
+}
+
+function resolveViewportSize(
+  role: RoleDefinition,
+  viewport: ViewportKey,
+): number {
+  if (!role.responsive || viewport === "desktop") return role.desktopSizePx;
+  return round(role.desktopSizePx * viewportRatio(viewport));
+}
+
+function resolveViewportLineHeight(
+  role: RoleDefinition,
+  viewport: ViewportKey,
+): number {
+  if (!role.responsive || viewport === "desktop")
+    return role.desktopLineHeightPx;
+  return round(role.desktopLineHeightPx * viewportRatio(viewport));
+}
+
+function resolveRole(role: RoleDefinition): ResolvedRoleToken {
+  const sizeByViewport = {
+    desktop: resolveViewportSize(role, "desktop"),
+    tablet: resolveViewportSize(role, "tablet"),
+    mobile: resolveViewportSize(role, "mobile"),
+  };
+
+  const lineHeightByViewport = {
+    desktop: resolveViewportLineHeight(role, "desktop"),
+    tablet: resolveViewportLineHeight(role, "tablet"),
+    mobile: resolveViewportLineHeight(role, "mobile"),
+  };
+
+  const trackingByViewport = {
+    desktop: trackingFromSize(sizeByViewport.desktop),
+    tablet: trackingFromSize(sizeByViewport.tablet),
+    mobile: trackingFromSize(sizeByViewport.mobile),
+  };
+  if (role.id === "display-s") {
+    trackingByViewport.desktop = -3;
+  }
+
+  return {
+    id: role.id,
+    label: role.label,
+    group: role.group,
+    typeface: role.typeface,
+    responsive: role.responsive,
+    fontWeight: role.defaultWeight,
+    fontSize: sizeByViewport,
+    lineHeight: lineHeightByViewport,
+    tracking: trackingByViewport,
+    future: {},
+  };
+}
+
+export const typographyRoles: ResolvedRoleToken[] =
+  ROLE_DEFINITIONS.map(resolveRole);
+
+export const typographyById = Object.fromEntries(
+  typographyRoles.map((role) => [role.id, role]),
+);
+
+export const semanticTypography = Object.fromEntries(
+  Object.entries(SEMANTIC_TEXT_TOKENS).map(([semanticName, roleId]) => [
+    semanticName,
+    typographyById[roleId as string],
+  ]),
+);
+
+export function toCssVariables(
+  role: ResolvedRoleToken,
+): Record<string, string> {
+  const vars: Record<string, string> = {
+    [`--et-type-${role.id}-font-family`]: `var(--et-typeface-${role.typeface})`,
+    [`--et-type-${role.id}-font-weight`]: String(role.fontWeight),
+  };
+
+  for (const viewport of VIEWPORTS) {
+    vars[`--et-type-${role.id}-size-${viewport}`] = toRem(
+      role.fontSize[viewport],
+    );
+    vars[`--et-type-${role.id}-line-height-${viewport}`] = toRem(
+      role.lineHeight[viewport],
+    );
+    vars[`--et-type-${role.id}-tracking-${viewport}`] = toRem(
+      role.tracking[viewport],
+    );
+  }
+
+  return vars;
+}
+
+export const typographyCssVariableMap = typographyRoles.reduce<
+  Record<string, string>
+>((acc, role) => {
+  return { ...acc, ...toCssVariables(role) };
+}, {});