@octaviaflow/type 1.0.0

package/src/__tests__/fluid.test.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import { fluid } from "../fluid";
+import { display04 } from "../styles";
+
+describe("fluid", () => {
+  it("should return back a token if no breakpoints available", () => {
+    const token = {
+      fontSize: "1rem",
+    };
+    expect(fluid(token)).toEqual(token);
+  });
+
+  it("should include the default styles for each breakpoint as a media key", () => {
+    const token = {
+      fontSize: "1rem",
+      letterSpacing: 0,
+      breakpoints: {
+        md: {
+          fontSize: "1.5rem",
+          letterSpacing: "100%",
+        },
+      },
+    };
+    expect(fluid(token)).toEqual(
+      expect.objectContaining({
+        letterSpacing: token.letterSpacing,
+        "@media (min-width: 42rem)": expect.objectContaining({
+          letterSpacing: token.breakpoints.md.letterSpacing,
+        }),
+      }),
+    );
+  });
+
+  it("should compute the fluid styles for a token", () => {
+    expect(fluid(display04)).toMatchInlineSnapshot(`
+      {
+        "@media (min-width: 42rem)": {
+          "fontSize": "calc(4.25rem + 1.5 * ((100vw - 42rem) / 24))",
+          "lineHeight": 1.15,
+        },
+        "@media (min-width: 66rem)": {
+          "fontSize": "calc(5.75rem + 1.875 * ((100vw - 66rem) / 16))",
+          "letterSpacing": "-0.64px",
+          "lineHeight": 1.11,
+        },
+        "@media (min-width: 82rem)": {
+          "fontSize": "calc(7.625rem + 2.125 * ((100vw - 82rem) / 17))",
+          "letterSpacing": "-0.64px",
+          "lineHeight": 1.07,
+        },
+        "@media (min-width: 99rem)": {
+          "fontSize": "9.75rem",
+          "letterSpacing": "-0.96px",
+          "lineHeight": 1.05,
+        },
+        "fontSize": "calc(2.625rem + 1.625 * ((100vw - 20rem) / 22))",
+        "fontWeight": 300,
+        "letterSpacing": 0,
+        "lineHeight": 1.19,
+      }
+    `);
+  });
+});

package/src/__tests__/fontFamily-test.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import { fontFamilies, fontFamily } from '../fontFamily';
+import { print } from '../print';
+
+describe('fontFamily', () => {
+  it('should export the supported font families', () => {
+    expect(fontFamilies).toMatchSnapshot();
+  });
+
+  it('should support getting the quoted string for a font family', () => {
+    expect(fontFamily('mono')).toEqual({
+      fontFamily: fontFamilies.mono,
+    });
+  });
+
+  it('should error out if trying to get a font that does not exist', () => {
+    expect(() => {
+      fontFamily('<unknown>');
+    }).toThrow();
+  });
+
+  it('should be printable', () => {
+    expect(print(fontFamily('mono'))).toMatchSnapshot();
+  });
+});

package/src/__tests__/fontFamily.test.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import { fontFamilies, fontFamily } from '../fontFamily';
+import { print } from '../print';
+
+describe('fontFamily', () => {
+  it('should export the supported font families', () => {
+    expect(fontFamilies).toMatchSnapshot();
+  });
+
+  it('should support getting the quoted string for a font family', () => {
+    expect(fontFamily('mono')).toEqual({
+      fontFamily: fontFamilies.mono,
+    });
+  });
+
+  it('should error out if trying to get a font that does not exist', () => {
+    expect(() => {
+      fontFamily('<unknown>');
+    }).toThrow();
+  });
+
+  it('should be printable', () => {
+    expect(print(fontFamily('mono'))).toMatchSnapshot();
+  });
+});

package/src/__tests__/fontWeight-test.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import { fontWeights, fontWeight } from '../fontWeight';
+import { print } from '../print';
+
+describe('fontWeight', () => {
+  it('should export the supported font weights', () => {
+    expect(fontWeights).toMatchSnapshot();
+  });
+
+  it('should support getting the quoted string for a font weight', () => {
+    expect(fontWeight('light')).toEqual({
+      fontWeight: fontWeights.light,
+    });
+  });
+
+  it('should error out if trying to get a font weight that does not exist', () => {
+    expect(() => {
+      fontWeight('<unknown>');
+    }).toThrow();
+  });
+
+  it('should be printable', () => {
+    expect(print(fontWeight('regular'))).toMatchSnapshot();
+  });
+});

package/src/__tests__/fontWeight.test.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import { fontWeights, fontWeight } from '../fontWeight';
+import { print } from '../print';
+
+describe('fontWeight', () => {
+  it('should export the supported font weights', () => {
+    expect(fontWeights).toMatchSnapshot();
+  });
+
+  it('should support getting the quoted string for a font weight', () => {
+    expect(fontWeight('light')).toEqual({
+      fontWeight: fontWeights.light,
+    });
+  });
+
+  it('should error out if trying to get a font weight that does not exist', () => {
+    expect(() => {
+      fontWeight('<unknown>');
+    }).toThrow();
+  });
+
+  it('should be printable', () => {
+    expect(print(fontWeight('regular'))).toMatchSnapshot();
+  });
+});

package/src/__tests__/reset-test.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import { reset } from '../reset';
+import { print } from '../print';
+
+describe('reset', () => {
+  it('should set styles for `html` and `body`', () => {
+    expect(reset.html).toBeDefined();
+    expect(reset.body).toBeDefined();
+  });
+
+  it('should be printable', () => {
+    expect(print(reset.html)).toMatchSnapshot();
+    expect(print(reset.body)).toMatchSnapshot();
+  });
+});

package/src/__tests__/reset.test.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import { reset } from '../reset';
+import { print } from '../print';
+
+describe('reset', () => {
+  it('should set styles for `html` and `body`', () => {
+    expect(reset.html).toBeDefined();
+    expect(reset.body).toBeDefined();
+  });
+
+  it('should be printable', () => {
+    expect(print(reset.html)).toMatchSnapshot();
+    expect(print(reset.body)).toMatchSnapshot();
+  });
+});

package/src/__tests__/scale-test.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import { getTypeSize, scale } from '../scale';
+
+describe('scale', () => {
+  it('should export the type scale', () => {
+    expect(scale).toMatchSnapshot();
+  });
+
+  describe('getTypeSize', () => {
+    it('should return the base font for steps <= 1', () => {
+      expect(getTypeSize(1)).toBe(12);
+      expect(getTypeSize(0)).toBe(12);
+    });
+
+    it('should support steps greater than 1', () => {
+      expect(() => {
+        getTypeSize(2);
+        getTypeSize(10);
+        getTypeSize(20);
+      }).not.toThrow();
+    });
+  });
+});

package/src/__tests__/scale.test.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import { getTypeSize, scale } from '../scale';
+
+describe('scale', () => {
+  it('should export the type scale', () => {
+    expect(scale).toMatchSnapshot();
+  });
+
+  describe('getTypeSize', () => {
+    it('should return the base font for steps <= 1', () => {
+      expect(getTypeSize(1)).toBe(12);
+      expect(getTypeSize(0)).toBe(12);
+    });
+
+    it('should support steps greater than 1', () => {
+      expect(() => {
+        getTypeSize(2);
+        getTypeSize(10);
+        getTypeSize(20);
+      }).not.toThrow();
+    });
+  });
+});

package/src/__tests__/styles-test.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import * as tokens from '../styles';
+import { print } from '../print';
+
+describe('styles', () => {
+  test.each(Object.keys(tokens))('%s should be printable', (key) => {
+    const token = tokens[key];
+    expect(print(token)).toMatchSnapshot();
+  });
+});

package/src/__tests__/styles.test.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import * as tokens from '../styles';
+import { print } from '../print';
+
+describe('styles', () => {
+  test.each(Object.keys(tokens))('%s should be printable', (key) => {
+    const token = tokens[key];
+    expect(print(token)).toMatchSnapshot();
+  });
+});

package/src/__tests__/tokens-test.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import { unstable_tokens as tokens } from '../tokens';
+import * as styles from '../styles';
+
+describe('type tokens', () => {
+  test.each(tokens)('%s should be defined in styles', (token) => {
+    expect(styles[token]).toBeDefined();
+  });
+
+  test.each(Object.keys(styles))('%s should be defined in tokens', (token) => {
+    expect(tokens.indexOf(token)).not.toBe(-1);
+  });
+});

package/src/__tests__/tokens.test.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright OctaviaFlow. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import { unstable_tokens as tokens } from '../tokens';
+import * as styles from '../styles';
+
+describe('type tokens', () => {
+  test.each(tokens)('%s should be defined in styles', (token) => {
+    expect(styles[token]).toBeDefined();
+  });
+
+  test.each(Object.keys(styles))('%s should be defined in tokens', (token) => {
+    expect(tokens.indexOf(token)).not.toBe(-1);
+  });
+});

package/src/fluid.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+import { breakpoint as bp, breakpoints } from '@octaviaflow/layout';
+
+const breakpointNames = Object.keys(breakpoints);
+
+function next(name) {
+  return breakpointNames[breakpointNames.indexOf(name) + 1];
+}
+
+export function fluid(selector) {
+  const { breakpoints: fluidBreakpoints, ...styles } = selector;
+
+  if (typeof fluidBreakpoints !== 'object') {
+    return styles;
+  }
+
+  const fluidBreakpointNames = Object.keys(fluidBreakpoints);
+  if (fluidBreakpointNames.length === 0) {
+    return styles;
+  }
+
+  styles.fontSize = fluidTypeSize(styles, 'sm', fluidBreakpoints);
+
+  fluidBreakpointNames.forEach((name) => {
+    styles[bp(name)] = {
+      ...fluidBreakpoints[name],
+      fontSize: fluidTypeSize(styles, name, fluidBreakpoints),
+    };
+  });
+
+  return styles;
+}
+
+function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
+  const breakpoint = breakpoints[fluidBreakpointName];
+  const fluidBreakpoint =
+    fluidBreakpointName === 'sm'
+      ? defaultStyles
+      : fluidBreakpoints[fluidBreakpointName];
+
+  let maxFontSize = defaultStyles.fontSize;
+  let minFontSize = defaultStyles.fontSize;
+  if (fluidBreakpoint.fontSize) {
+    minFontSize = fluidBreakpoint.fontSize;
+  }
+
+  let maxViewportWidth = breakpoint.width;
+  let minViewportWidth = breakpoint.width;
+
+  let nextBreakpointAvailable = next(fluidBreakpointName);
+  let nextFluidBreakpointName = null;
+
+  while (nextBreakpointAvailable) {
+    if (fluidBreakpoints[nextBreakpointAvailable]) {
+      nextFluidBreakpointName = nextBreakpointAvailable;
+      break;
+    }
+    nextBreakpointAvailable = next(nextBreakpointAvailable);
+  }
+
+  if (nextFluidBreakpointName) {
+    const nextFluidBreakpoint = breakpoints[nextFluidBreakpointName];
+    maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
+    maxViewportWidth = nextFluidBreakpoint.width;
+
+    return `calc(${minFontSize} + ${subtract(
+      maxFontSize,
+      minFontSize
+    )} * ((100vw - ${minViewportWidth}) / ${subtract(
+      maxViewportWidth,
+      minViewportWidth
+    )}))`;
+  }
+
+  return minFontSize;
+}
+
+function subtract(a, b) {
+  return parseFloat(a) - parseFloat(b);
+}

package/src/fontFamily.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
+// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
+export const fontFamilies = {
+  mono: "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace",
+  sans: "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif",
+  sansCondensed:
+    "'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif",
+  sansHebrew:
+    "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif",
+  serif: "'IBM Plex Serif', 'Georgia', Times, serif",
+};
+
+export function fontFamily(name) {
+  if (!fontFamilies[name]) {
+    throw new Error(
+      `Unable to find font family: \`${name}\`. Expected one of: ` +
+        `[${Object.keys(fontFamilies).join(', ')}]`
+    );
+  }
+  return {
+    fontFamily: fontFamilies[name],
+  };
+}

package/src/fontWeight.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+export const fontWeights = {
+  light: 300,
+  regular: 400,
+  semibold: 600,
+};
+
+export function fontWeight(weight) {
+  if (!fontWeights[weight]) {
+    throw new Error(
+      `Unable to find font weight: \`${weight}\`. Expected one of: ` +
+        `[${Object.keys(fontWeights).join(', ')}]`
+    );
+  }
+  return {
+    fontWeight: fontWeights[weight],
+  };
+}

package/src/index.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+import { fontFamilies, fontFamily } from './fontFamily';
+import { fontWeights, fontWeight } from './fontWeight';
+import { print } from './print';
+import { reset } from './reset';
+import { getTypeSize, scale } from './scale';
+import * as styles from './styles';
+
+export { fluid } from './fluid';
+export * from './styles';
+export { unstable_tokens } from './tokens';
+export {
+  fontFamilies,
+  fontFamily,
+  fontWeights,
+  fontWeight,
+  print,
+  reset,
+  getTypeSize,
+  scale,
+  styles,
+};

package/src/print.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+export function print(block) {
+  return Object.keys(block).reduce((acc, key, index) => {
+    // Short-circuit on the foreign key 'breakpoints'. This is used in our
+    // tokens for fluid type and should not be printed. In the future, we should
+    // tie this to media query outputs.
+    if (key === 'breakpoints') {
+      return acc;
+    }
+
+    const property = `${paramCase(key)}: ${block[key]};`;
+    if (index === 0) {
+      return property;
+    }
+    return acc + '\n' + property;
+  }, '');
+}
+
+function paramCase(string) {
+  let result = '';
+  for (let i = 0; i < string.length; i++) {
+    const character = string[i];
+    if (character === character.toUpperCase()) {
+      result += '-' + character.toLowerCase();
+      continue;
+    }
+    result += character;
+  }
+  return result;
+}

package/src/reset.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+import { baseFontSize, px } from '@octaviaflow/layout';
+import { fontFamilies } from './fontFamily';
+import { fontWeights } from './fontWeight';
+
+export const reset = {
+  html: {
+    fontSize: px(baseFontSize),
+  },
+  body: {
+    fontFamily: fontFamilies.sans,
+    fontWeight: fontWeights.regular,
+    textRendering: 'optimizeLegibility',
+    '-webkit-font-smoothing': 'antialiased',
+    '-moz-osx-font-smoothing': 'grayscale',
+  },
+  strong: {
+    fontWeight: fontWeights.semibold,
+  },
+  code: {
+    fontFamily: fontFamilies.mono,
+  },
+};