@octaviaflow/type 1.0.0

package/src/scale.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.
+ */
+
+
+/**
+ * Get the type size for the given step
+ * @param {number} step
+ * @returns {number}
+ */
+export function getTypeSize(step) {
+  if (step <= 1) {
+    return 12;
+  }
+  // Yn = Yn-1 + {FLOOR[(n - 2) / 4] + 1} * 2
+  return getTypeSize(step - 1) + Math.floor((step - 2) / 4 + 1) * 2;
+}
+
+/**
+ * The default type scale for 23 steps. Inlined as an array here through running
+ * the follow step:
+ *
+ * > Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
+ */
+export const scale = [
+  12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 54, 60, 68, 76, 84, 92, 102, 112,
+  122, 132, 144, 156,
+];

package/src/styles.js

@@ -0,0 +1,491 @@
+/**
+ * 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 { px, rem } from '@octaviaflow/layout';
+import { fontWeights } from './fontWeight';
+import { fontFamilies } from './fontFamily';
+import { scale } from './scale';
+
+export const caption01 = {
+  fontSize: rem(scale[0]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.33333,
+  letterSpacing: px(0.32),
+};
+
+export const caption02 = {
+  fontSize: rem(scale[1]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.28572,
+  letterSpacing: px(0.32),
+};
+
+export const label01 = {
+  fontSize: rem(scale[0]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.33333,
+  letterSpacing: px(0.32),
+};
+
+export const label02 = {
+  fontSize: rem(scale[1]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.28572,
+  letterSpacing: px(0.16),
+};
+
+export const helperText01 = {
+  fontSize: rem(scale[0]),
+  lineHeight: 1.33333,
+  letterSpacing: px(0.32),
+};
+
+export const helperText02 = {
+  fontSize: rem(scale[1]),
+  lineHeight: 1.28572,
+  letterSpacing: px(0.16),
+};
+
+export const bodyShort01 = {
+  fontSize: rem(scale[1]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.28572,
+  letterSpacing: px(0.16),
+};
+
+export const bodyLong01 = {
+  fontSize: rem(scale[1]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.42857,
+  letterSpacing: px(0.16),
+};
+
+export const bodyShort02 = {
+  fontSize: rem(scale[2]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.375,
+  letterSpacing: 0,
+};
+
+export const bodyLong02 = {
+  fontSize: rem(scale[2]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.5,
+  letterSpacing: 0,
+};
+
+export const code01 = {
+  fontFamily: fontFamilies.mono,
+  fontSize: rem(scale[0]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.33333,
+  letterSpacing: px(0.32),
+};
+
+export const code02 = {
+  fontFamily: fontFamilies.mono,
+  fontSize: rem(scale[1]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.42857,
+  letterSpacing: px(0.32),
+};
+
+export const heading01 = {
+  fontSize: rem(scale[1]),
+  fontWeight: fontWeights.semibold,
+  lineHeight: 1.42857,
+  letterSpacing: px(0.16),
+};
+
+export const productiveHeading01 = {
+  fontSize: rem(scale[1]),
+  fontWeight: fontWeights.semibold,
+  lineHeight: 1.28572,
+  letterSpacing: px(0.16),
+};
+
+export const heading02 = {
+  fontSize: rem(scale[2]),
+  fontWeight: fontWeights.semibold,
+  lineHeight: 1.5,
+  letterSpacing: 0,
+};
+
+export const productiveHeading02 = {
+  fontSize: rem(scale[2]),
+  fontWeight: fontWeights.semibold,
+  lineHeight: 1.375,
+  letterSpacing: 0,
+};
+
+export const productiveHeading03 = {
+  fontSize: rem(scale[4]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.4,
+  letterSpacing: 0,
+};
+
+export const productiveHeading04 = {
+  fontSize: rem(scale[6]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.28572,
+  letterSpacing: 0,
+};
+
+export const productiveHeading05 = {
+  fontSize: rem(scale[7]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.25,
+  letterSpacing: 0,
+};
+
+export const productiveHeading06 = {
+  fontSize: rem(scale[9]),
+  fontWeight: fontWeights.light,
+  lineHeight: 1.199,
+  letterSpacing: 0,
+};
+
+export const productiveHeading07 = {
+  fontSize: rem(scale[11]),
+  fontWeight: fontWeights.light,
+  lineHeight: 1.199,
+  letterSpacing: 0,
+};
+
+export const expressiveHeading01 = {
+  ...heading01,
+  lineHeight: 1.25,
+};
+
+export const expressiveHeading02 = {
+  ...heading02,
+  lineHeight: 1.5,
+};
+
+export const expressiveHeading03 = {
+  fontSize: rem(scale[4]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.4,
+  letterSpacing: 0,
+  breakpoints: {
+    xlg: {
+      fontSize: rem(scale[4]),
+      lineHeight: 1.4,
+    },
+    max: {
+      fontSize: rem(scale[5]),
+      lineHeight: 1.334,
+    },
+  },
+};
+
+export const expressiveHeading04 = {
+  fontSize: rem(scale[6]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.28572,
+  letterSpacing: 0,
+  breakpoints: {
+    xlg: {
+      fontSize: rem(scale[7]),
+      fontWeight: fontWeights.regular,
+      lineHeight: 1.25,
+    },
+    max: {
+      fontSize: rem(scale[7]),
+      fontWeight: fontWeights.regular,
+    },
+  },
+};
+
+export const expressiveHeading05 = {
+  fontSize: rem(scale[7]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.25,
+  letterSpacing: 0,
+  breakpoints: {
+    md: {
+      fontSize: rem(scale[8]),
+      fontWeight: fontWeights.light,
+      lineHeight: 1.22,
+      letterSpacing: 0,
+    },
+    lg: {
+      fontSize: rem(scale[9]),
+      lineHeight: 1.19,
+      letterSpacing: 0,
+    },
+    xlg: {
+      fontSize: rem(scale[10]),
+      lineHeight: 1.17,
+      letterSpacing: 0,
+    },
+    max: {
+      fontSize: rem(scale[12]),
+      letterSpacing: 0,
+    },
+  },
+};
+
+export const expressiveHeading06 = {
+  fontSize: rem(scale[7]),
+  fontWeight: fontWeights.semibold,
+  lineHeight: 1.25,
+  letterSpacing: 0,
+  breakpoints: {
+    md: {
+      fontSize: rem(scale[8]),
+      fontWeight: fontWeights.semibold,
+      lineHeight: 1.22,
+      letterSpacing: 0,
+    },
+    lg: {
+      fontSize: rem(scale[9]),
+      fontWeight: fontWeights.semibold,
+      lineHeight: 1.19,
+      letterSpacing: 0,
+    },
+    xlg: {
+      fontSize: rem(scale[10]),
+      fontWeight: fontWeights.semibold,
+      lineHeight: 1.17,
+      letterSpacing: 0,
+    },
+    max: {
+      fontSize: rem(scale[12]),
+      fontWeight: fontWeights.semibold,
+      letterSpacing: 0,
+    },
+  },
+};
+
+export const expressiveParagraph01 = {
+  fontSize: rem(scale[5]),
+  fontWeight: fontWeights.light,
+  lineHeight: 1.334,
+  letterSpacing: 0,
+  breakpoints: {
+    lg: {
+      fontSize: rem(scale[6]),
+      lineHeight: 1.28572,
+    },
+    max: {
+      fontSize: rem(scale[7]),
+      lineHeight: 1.25,
+    },
+  },
+};
+
+export const quotation01 = {
+  fontFamily: fontFamilies.serif,
+  fontSize: rem(scale[4]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.3,
+  letterSpacing: 0,
+  breakpoints: {
+    md: {
+      fontSize: rem(scale[4]),
+      fontWeight: fontWeights.regular,
+      letterSpacing: 0,
+    },
+    lg: {
+      fontSize: rem(scale[5]),
+      fontWeight: fontWeights.regular,
+      lineHeight: 1.334,
+      letterSpacing: 0,
+    },
+    xlg: {
+      fontSize: rem(scale[6]),
+      fontWeight: fontWeights.regular,
+      lineHeight: 1.28572,
+      letterSpacing: 0,
+    },
+    max: {
+      fontSize: rem(scale[7]),
+      fontWeight: fontWeights.regular,
+      lineHeight: 1.25,
+      letterSpacing: 0,
+    },
+  },
+};
+
+export const quotation02 = {
+  fontFamily: fontFamilies.serif,
+  fontSize: rem(scale[7]),
+  fontWeight: fontWeights.light,
+  lineHeight: 1.25,
+  letterSpacing: 0,
+  breakpoints: {
+    md: {
+      fontSize: rem(scale[8]),
+      lineHeight: 1.22,
+    },
+    lg: {
+      fontSize: rem(scale[9]),
+      lineHeight: 1.19,
+    },
+    xlg: {
+      fontSize: rem(scale[10]),
+      lineHeight: 1.17,
+    },
+    max: {
+      fontSize: rem(scale[12]),
+    },
+  },
+};
+
+export const display01 = {
+  fontSize: rem(scale[9]),
+  fontWeight: fontWeights.light,
+  lineHeight: 1.19,
+  letterSpacing: 0,
+  breakpoints: {
+    md: {
+      fontSize: rem(scale[9]),
+    },
+    lg: {
+      fontSize: rem(scale[11]),
+    },
+    xlg: {
+      fontSize: rem(scale[12]),
+      lineHeight: 1.17,
+    },
+    max: {
+      fontSize: rem(scale[14]),
+      lineHeight: 1.13,
+    },
+  },
+};
+
+export const display02 = {
+  fontSize: rem(scale[9]),
+  fontWeight: fontWeights.semibold,
+  lineHeight: 1.19,
+  letterSpacing: 0,
+  breakpoints: {
+    md: {
+      fontSize: rem(scale[9]),
+    },
+    lg: {
+      fontSize: rem(scale[11]),
+    },
+    xlg: {
+      fontSize: rem(scale[12]),
+      lineHeight: 1.16,
+    },
+    max: {
+      fontSize: rem(scale[14]),
+      lineHeight: 1.13,
+    },
+  },
+};
+
+export const display03 = {
+  fontSize: rem(scale[9]),
+  fontWeight: fontWeights.light,
+  lineHeight: 1.19,
+  letterSpacing: 0,
+  breakpoints: {
+    md: {
+      fontSize: rem(scale[11]),
+      lineHeight: 1.18,
+    },
+    lg: {
+      fontSize: rem(scale[12]),
+      lineHeight: 1.16,
+      letterSpacing: px(-0.64),
+    },
+    xlg: {
+      fontSize: rem(scale[14]),
+      lineHeight: 1.13,
+    },
+    max: {
+      fontSize: rem(scale[15]),
+      lineHeight: 1.11,
+      letterSpacing: px(-0.96),
+    },
+  },
+};
+
+export const display04 = {
+  fontSize: rem(scale[9]),
+  fontWeight: fontWeights.light,
+  lineHeight: 1.19,
+  letterSpacing: 0,
+  breakpoints: {
+    md: {
+      fontSize: rem(scale[13]),
+      lineHeight: 1.15,
+    },
+    lg: {
+      fontSize: rem(scale[16]),
+      lineHeight: 1.11,
+      letterSpacing: px(-0.64),
+    },
+    xlg: {
+      fontSize: rem(scale[19]),
+      lineHeight: 1.07,
+      letterSpacing: px(-0.64),
+    },
+    max: {
+      fontSize: rem(scale[22]),
+      lineHeight: 1.05,
+      letterSpacing: px(-0.96),
+    },
+  },
+};
+
+// Type changes - V11
+
+// Small styles
+// No changes for code-01, code-02, label-01, label-02
+export const legal01 = {
+  fontSize: rem(scale[0]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.33333,
+  letterSpacing: px(0.32),
+};
+
+export const legal02 = {
+  fontSize: rem(scale[1]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.28572,
+  letterSpacing: px(0.16),
+};
+
+// Body styles
+export const bodyCompact01 = bodyShort01;
+export const bodyCompact02 = bodyShort02;
+export const body01 = bodyLong01;
+export const body02 = bodyLong02;
+
+// Fixed heading styles
+export const headingCompact01 = productiveHeading01;
+export const headingCompact02 = productiveHeading02;
+export const heading03 = productiveHeading03;
+export const heading04 = productiveHeading04;
+export const heading05 = productiveHeading05;
+export const heading06 = productiveHeading06;
+export const heading07 = productiveHeading07;
+
+// Fluid heading styles
+export const fluidHeading03 = expressiveHeading03;
+export const fluidHeading04 = expressiveHeading04;
+export const fluidHeading05 = expressiveHeading05;
+export const fluidHeading06 = expressiveHeading06;
+
+// Additional fluid styles
+export const fluidParagraph01 = expressiveParagraph01;
+export const fluidQuotation01 = quotation01;
+export const fluidQuotation02 = quotation02;
+export const fluidDisplay01 = display01;
+export const fluidDisplay02 = display02;
+export const fluidDisplay03 = display03;
+export const fluidDisplay04 = display04;

package/src/tokens.js

@@ -0,0 +1,132 @@
+/**
+ * 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.
+ */
+
+
+// Unstable tokens
+export const caption01 = 'caption01';
+export const caption02 = 'caption02';
+export const label01 = 'label01';
+export const label02 = 'label02';
+export const helperText01 = 'helperText01';
+export const helperText02 = 'helperText02';
+export const bodyShort01 = 'bodyShort01';
+export const bodyLong01 = 'bodyLong01';
+export const bodyShort02 = 'bodyShort02';
+export const bodyLong02 = 'bodyLong02';
+export const code01 = 'code01';
+export const code02 = 'code02';
+export const heading01 = 'heading01';
+export const productiveHeading01 = 'productiveHeading01';
+export const heading02 = 'heading02';
+export const productiveHeading02 = 'productiveHeading02';
+export const productiveHeading03 = 'productiveHeading03';
+export const productiveHeading04 = 'productiveHeading04';
+export const productiveHeading05 = 'productiveHeading05';
+export const productiveHeading06 = 'productiveHeading06';
+export const productiveHeading07 = 'productiveHeading07';
+export const expressiveHeading01 = 'expressiveHeading01';
+export const expressiveHeading02 = 'expressiveHeading02';
+export const expressiveHeading03 = 'expressiveHeading03';
+export const expressiveHeading04 = 'expressiveHeading04';
+export const expressiveHeading05 = 'expressiveHeading05';
+export const expressiveHeading06 = 'expressiveHeading06';
+export const expressiveParagraph01 = 'expressiveParagraph01';
+export const quotation01 = 'quotation01';
+export const quotation02 = 'quotation02';
+export const display01 = 'display01';
+export const display02 = 'display02';
+export const display03 = 'display03';
+export const display04 = 'display04';
+// V11 Tokens
+export const legal01 = 'legal01';
+export const legal02 = 'legal02';
+export const bodyCompact01 = 'bodyCompact01';
+export const bodyCompact02 = 'bodyCompact02';
+export const body01 = 'body01';
+export const body02 = 'body02';
+export const headingCompact01 = 'headingCompact01';
+export const headingCompact02 = 'headingCompact02';
+export const heading03 = 'heading03';
+export const heading04 = 'heading04';
+export const heading05 = 'heading05';
+export const heading06 = 'heading06';
+export const heading07 = 'heading07';
+export const fluidHeading03 = 'fluidHeading03';
+export const fluidHeading04 = 'fluidHeading04';
+export const fluidHeading05 = 'fluidHeading05';
+export const fluidHeading06 = 'fluidHeading06';
+export const fluidParagraph01 = 'fluidParagraph01';
+export const fluidQuotation01 = 'fluidQuotation01';
+export const fluidQuotation02 = 'fluidQuotation02';
+export const fluidDisplay01 = 'fluidDisplay01';
+export const fluidDisplay02 = 'fluidDisplay02';
+export const fluidDisplay03 = 'fluidDisplay03';
+export const fluidDisplay04 = 'fluidDisplay04';
+
+export const unstable_tokens = [
+  caption01,
+  caption02,
+  label01,
+  label02,
+  helperText01,
+  helperText02,
+  bodyShort01,
+  bodyLong01,
+  bodyShort02,
+  bodyLong02,
+  code01,
+  code02,
+  heading01,
+  productiveHeading01,
+  heading02,
+  productiveHeading02,
+  productiveHeading03,
+  productiveHeading04,
+  productiveHeading05,
+  productiveHeading06,
+  productiveHeading07,
+  expressiveHeading01,
+  expressiveHeading02,
+  expressiveHeading03,
+  expressiveHeading04,
+  expressiveHeading05,
+  expressiveHeading06,
+  expressiveParagraph01,
+  quotation01,
+  quotation02,
+  display01,
+  display02,
+  display03,
+  display04,
+  // V11 Tokens
+  legal01,
+  legal02,
+  bodyCompact01,
+  bodyCompact02,
+  body01,
+  body02,
+  headingCompact01,
+  headingCompact02,
+  heading03,
+  heading04,
+  heading05,
+  heading06,
+  heading07,
+  fluidHeading03,
+  fluidHeading04,
+  fluidHeading05,
+  fluidHeading06,
+  fluidParagraph01,
+  fluidQuotation01,
+  fluidQuotation02,
+  fluidDisplay01,
+  fluidDisplay02,
+  fluidDisplay03,
+  fluidDisplay04,
+];

package/telemetry.yml

@@ -0,0 +1,16 @@
+# yaml-language-server: $schema=https://unpkg.com/@octaviaflow/telemetry-config-schema@v1/dist/config.schema.json
+version: 1
+projectId: 'octaviaflow-type'
+storage:
+  type: 'file'
+  file:
+    directory: '/Volumes/Main/Projects/OctaviaFlow-Design-System/telemetry-logs'
+    fileNamePattern: 'octaviaflow-type-{timestamp}.json'
+    maxFileSizeMB: 10
+    compress: false
+collect:
+  npm:
+    dependencies: null
+  js:
+    functions: {}
+    tokens: null