@octaviaflow/type 1.0.0

package/src/__tests__/__snapshots__/styles.test.js.snap

@@ -0,0 +1,411 @@
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
+
+exports[`styles body01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.42857;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles body02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 400;
+line-height: 1.5;
+letter-spacing: 0;"
+`;
+
+exports[`styles bodyCompact01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles bodyCompact02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 400;
+line-height: 1.375;
+letter-spacing: 0;"
+`;
+
+exports[`styles bodyLong01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.42857;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles bodyLong02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 400;
+line-height: 1.5;
+letter-spacing: 0;"
+`;
+
+exports[`styles bodyShort01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles bodyShort02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 400;
+line-height: 1.375;
+letter-spacing: 0;"
+`;
+
+exports[`styles caption01 should be printable 1`] = `
+"font-size: 0.75rem;
+font-weight: 400;
+line-height: 1.33333;
+letter-spacing: 0.32px;"
+`;
+
+exports[`styles caption02 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0.32px;"
+`;
+
+exports[`styles code01 should be printable 1`] = `
+"font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
+font-size: 0.75rem;
+font-weight: 400;
+line-height: 1.33333;
+letter-spacing: 0.32px;"
+`;
+
+exports[`styles code02 should be printable 1`] = `
+"font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
+font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.42857;
+letter-spacing: 0.32px;"
+`;
+
+exports[`styles display01 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles display02 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 600;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles display03 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles display04 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles expressiveHeading01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 600;
+line-height: 1.25;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles expressiveHeading02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 600;
+line-height: 1.5;
+letter-spacing: 0;"
+`;
+
+exports[`styles expressiveHeading03 should be printable 1`] = `
+"font-size: 1.25rem;
+font-weight: 400;
+line-height: 1.4;
+letter-spacing: 0;"
+`;
+
+exports[`styles expressiveHeading04 should be printable 1`] = `
+"font-size: 1.75rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0;"
+`;
+
+exports[`styles expressiveHeading05 should be printable 1`] = `
+"font-size: 2rem;
+font-weight: 400;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles expressiveHeading06 should be printable 1`] = `
+"font-size: 2rem;
+font-weight: 600;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles expressiveParagraph01 should be printable 1`] = `
+"font-size: 1.5rem;
+font-weight: 300;
+line-height: 1.334;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidDisplay01 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidDisplay02 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 600;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidDisplay03 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidDisplay04 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidHeading03 should be printable 1`] = `
+"font-size: 1.25rem;
+font-weight: 400;
+line-height: 1.4;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidHeading04 should be printable 1`] = `
+"font-size: 1.75rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidHeading05 should be printable 1`] = `
+"font-size: 2rem;
+font-weight: 400;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidHeading06 should be printable 1`] = `
+"font-size: 2rem;
+font-weight: 600;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidParagraph01 should be printable 1`] = `
+"font-size: 1.5rem;
+font-weight: 300;
+line-height: 1.334;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidQuotation01 should be printable 1`] = `
+"font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-size: 1.25rem;
+font-weight: 400;
+line-height: 1.3;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidQuotation02 should be printable 1`] = `
+"font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-size: 2rem;
+font-weight: 300;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 600;
+line-height: 1.42857;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles heading02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 600;
+line-height: 1.5;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading03 should be printable 1`] = `
+"font-size: 1.25rem;
+font-weight: 400;
+line-height: 1.4;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading04 should be printable 1`] = `
+"font-size: 1.75rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading05 should be printable 1`] = `
+"font-size: 2rem;
+font-weight: 400;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading06 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.199;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading07 should be printable 1`] = `
+"font-size: 3.375rem;
+font-weight: 300;
+line-height: 1.199;
+letter-spacing: 0;"
+`;
+
+exports[`styles headingCompact01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 600;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles headingCompact02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 600;
+line-height: 1.375;
+letter-spacing: 0;"
+`;
+
+exports[`styles helperText01 should be printable 1`] = `
+"font-size: 0.75rem;
+line-height: 1.33333;
+letter-spacing: 0.32px;"
+`;
+
+exports[`styles helperText02 should be printable 1`] = `
+"font-size: 0.875rem;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles label01 should be printable 1`] = `
+"font-size: 0.75rem;
+font-weight: 400;
+line-height: 1.33333;
+letter-spacing: 0.32px;"
+`;
+
+exports[`styles label02 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles legal01 should be printable 1`] = `
+"font-size: 0.75rem;
+font-weight: 400;
+line-height: 1.33333;
+letter-spacing: 0.32px;"
+`;
+
+exports[`styles legal02 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles productiveHeading01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 600;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles productiveHeading02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 600;
+line-height: 1.375;
+letter-spacing: 0;"
+`;
+
+exports[`styles productiveHeading03 should be printable 1`] = `
+"font-size: 1.25rem;
+font-weight: 400;
+line-height: 1.4;
+letter-spacing: 0;"
+`;
+
+exports[`styles productiveHeading04 should be printable 1`] = `
+"font-size: 1.75rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0;"
+`;
+
+exports[`styles productiveHeading05 should be printable 1`] = `
+"font-size: 2rem;
+font-weight: 400;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles productiveHeading06 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.199;
+letter-spacing: 0;"
+`;
+
+exports[`styles productiveHeading07 should be printable 1`] = `
+"font-size: 3.375rem;
+font-weight: 300;
+line-height: 1.199;
+letter-spacing: 0;"
+`;
+
+exports[`styles quotation01 should be printable 1`] = `
+"font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-size: 1.25rem;
+font-weight: 400;
+line-height: 1.3;
+letter-spacing: 0;"
+`;
+
+exports[`styles quotation02 should be printable 1`] = `
+"font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-size: 2rem;
+font-weight: 300;
+line-height: 1.25;
+letter-spacing: 0;"
+`;

package/src/__tests__/exports-test.js

@@ -0,0 +1,88 @@
+/**
+ * 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 CarbonType from '../';
+
+describe('type', () => {
+  it('should export type helpers', () => {
+    expect(Object.keys(CarbonType)).toMatchInlineSnapshot(`
+      Array [
+        "fluid",
+        "fontFamilies",
+        "fontFamily",
+        "fontWeight",
+        "fontWeights",
+        "getTypeSize",
+        "print",
+        "reset",
+        "scale",
+        "styles",
+        "unstable_tokens",
+        "body01",
+        "body02",
+        "bodyCompact01",
+        "bodyCompact02",
+        "bodyLong01",
+        "bodyLong02",
+        "bodyShort01",
+        "bodyShort02",
+        "caption01",
+        "caption02",
+        "code01",
+        "code02",
+        "display01",
+        "display02",
+        "display03",
+        "display04",
+        "expressiveHeading01",
+        "expressiveHeading02",
+        "expressiveHeading03",
+        "expressiveHeading04",
+        "expressiveHeading05",
+        "expressiveHeading06",
+        "expressiveParagraph01",
+        "fluidDisplay01",
+        "fluidDisplay02",
+        "fluidDisplay03",
+        "fluidDisplay04",
+        "fluidHeading03",
+        "fluidHeading04",
+        "fluidHeading05",
+        "fluidHeading06",
+        "fluidParagraph01",
+        "fluidQuotation01",
+        "fluidQuotation02",
+        "heading01",
+        "heading02",
+        "heading03",
+        "heading04",
+        "heading05",
+        "heading06",
+        "heading07",
+        "headingCompact01",
+        "headingCompact02",
+        "helperText01",
+        "helperText02",
+        "label01",
+        "label02",
+        "legal01",
+        "legal02",
+        "productiveHeading01",
+        "productiveHeading02",
+        "productiveHeading03",
+        "productiveHeading04",
+        "productiveHeading05",
+        "productiveHeading06",
+        "productiveHeading07",
+        "quotation01",
+        "quotation02",
+      ]
+    `);
+  });
+});

package/src/__tests__/exports.test.js

@@ -0,0 +1,88 @@
+/**
+ * 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 CarbonType from '../';
+
+describe('type', () => {
+  it('should export type helpers', () => {
+    expect(Object.keys(CarbonType)).toMatchInlineSnapshot(`
+      [
+        "body01",
+        "body02",
+        "bodyCompact01",
+        "bodyCompact02",
+        "bodyLong01",
+        "bodyLong02",
+        "bodyShort01",
+        "bodyShort02",
+        "caption01",
+        "caption02",
+        "code01",
+        "code02",
+        "display01",
+        "display02",
+        "display03",
+        "display04",
+        "expressiveHeading01",
+        "expressiveHeading02",
+        "expressiveHeading03",
+        "expressiveHeading04",
+        "expressiveHeading05",
+        "expressiveHeading06",
+        "expressiveParagraph01",
+        "fluid",
+        "fluidDisplay01",
+        "fluidDisplay02",
+        "fluidDisplay03",
+        "fluidDisplay04",
+        "fluidHeading03",
+        "fluidHeading04",
+        "fluidHeading05",
+        "fluidHeading06",
+        "fluidParagraph01",
+        "fluidQuotation01",
+        "fluidQuotation02",
+        "fontFamilies",
+        "fontFamily",
+        "fontWeight",
+        "fontWeights",
+        "getTypeSize",
+        "heading01",
+        "heading02",
+        "heading03",
+        "heading04",
+        "heading05",
+        "heading06",
+        "heading07",
+        "headingCompact01",
+        "headingCompact02",
+        "helperText01",
+        "helperText02",
+        "label01",
+        "label02",
+        "legal01",
+        "legal02",
+        "print",
+        "productiveHeading01",
+        "productiveHeading02",
+        "productiveHeading03",
+        "productiveHeading04",
+        "productiveHeading05",
+        "productiveHeading06",
+        "productiveHeading07",
+        "quotation01",
+        "quotation02",
+        "reset",
+        "scale",
+        "styles",
+        "unstable_tokens",
+      ]
+    `);
+  });
+});

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(`
+      Object {
+        "@media (min-width: 42rem)": Object {
+          "fontSize": "calc(4.25rem + 1.5 * ((100vw - 42rem) / 24))",
+          "lineHeight": 1.15,
+        },
+        "@media (min-width: 66rem)": Object {
+          "fontSize": "calc(5.75rem + 1.875 * ((100vw - 66rem) / 16))",
+          "letterSpacing": "-0.64px",
+          "lineHeight": 1.11,
+        },
+        "@media (min-width: 82rem)": Object {
+          "fontSize": "calc(7.625rem + 2.125 * ((100vw - 82rem) / 17))",
+          "letterSpacing": "-0.64px",
+          "lineHeight": 1.07,
+        },
+        "@media (min-width: 99rem)": Object {
+          "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,
+      }
+    `);
+  });
+});