@octaviaflow/type 1.0.0

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@octaviaflow/type",
+  "description": "Typography for digital and software products using the OctaviaFlow Design System",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/octaviaflow-design-system.git",
+    "directory": "packages/type"
+  },
+  "bugs": "https://github.com/octaviaflow-design-system/issues",
+  "files": [
+    "es",
+    "lib",
+    "scss",
+    "src",
+    "umd",
+    "index.scss",
+    "telemetry.yml"
+  ],
+  "keywords": [
+    "eyeglass-module",
+    "ibm",
+    "elements",
+    "carbon",
+    "carbon-elements",
+    "carbon-design-system",
+    "components",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "bun run clean && octaviaflow-cli bundle src/index.js --name OctaviaFlowType && octaviaflow-cli check \"scss/*.scss\"",
+    "clean": "rimraf css es lib umd"
+  },
+  "dependencies": {
+    "@octaviaflow/grid": "^1.0.0",
+    "@octaviaflow/layout": "^1.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.6",
+    "@babel/preset-env": "^7.28.6",
+    "@octaviaflow/cli": "^1.0.0",
+    "@octaviaflow/test-utils": "^1.0.0",
+    "change-case": "^4.1.1",
+    "css": "^3.0.0",
+    "rimraf": "^6.0.0"
+  },
+  "eyeglass": {
+    "exports": false,
+    "name": "@octaviaflow/type",
+    "sassDir": "scss",
+    "needs": "^1.3.0"
+  }
+}

package/scss/_classes.scss

@@ -0,0 +1,42 @@
+//
+// 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.
+//
+
+@use 'sass:map';
+@use 'font-family' as *;
+@use 'prefix' as *;
+@use 'styles' as *;
+
+/// Create type classes for font families, weights, styles
+/// @access public
+/// @group @octaviaflow/type
+@mixin type-classes {
+  // Font families
+  @each $name, $value in $font-families {
+    .#{$prefix}--type-#{$name} {
+      font-family: $value;
+    }
+  }
+
+  // Font weights
+  @each $name, $value in $font-weights {
+    .#{$prefix}--type-#{$name} {
+      font-weight: $value;
+    }
+  }
+
+  // Font styles
+  .#{$prefix}--type-italic {
+    font-style: italic;
+  }
+
+  // Type styles
+  @each $name, $value in $tokens {
+    .#{$prefix}--type-#{$name} {
+      @include type-style($name, map.has-key($value, breakpoints));
+    }
+  }
+}

package/scss/_default-type.scss

@@ -0,0 +1,50 @@
+//
+// 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.
+//
+@use 'sass:meta';
+@use 'styles' as *;
+@use 'prefix' as *;
+
+/// Include default type styles
+/// @access public
+/// @group @octaviaflow/type
+@mixin default-type {
+  h1 {
+    @include type-style('heading-06');
+  }
+
+  h2 {
+    @include type-style('heading-05');
+  }
+
+  h3 {
+    @include type-style('heading-04');
+  }
+
+  h4 {
+    @include type-style('heading-03');
+  }
+
+  h5 {
+    @include type-style('heading-02');
+  }
+
+  h6 {
+    @include type-style('heading-01');
+  }
+
+  p {
+    @include type-style('body-02');
+  }
+
+  a {
+    color: var(--#{$prefix}-link-primary, #0062fe);
+  }
+
+  em {
+    font-style: italic;
+  }
+}

package/scss/_font-family.scss

@@ -0,0 +1,105 @@
+//
+// 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.
+//
+
+@use 'sass:string';
+@use 'sass:map';
+
+/// Font family fallbacks for: Lufga, JetBrains Mono, Noto Sans, and Noto Serif
+/// Octaviaflow custom font stack replacing IBM Plex fonts
+/// @type Map
+/// @access public
+/// @group @octaviaflow/type
+$font-families: (
+  'mono':
+    string.unquote(
+      "'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace"
+    ),
+  'sans':
+    string.unquote(
+      "'Lufga', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+    ),
+  'sans-condensed':
+    string.unquote(
+      "'Noto Sans', 'Lufga', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+    ),
+  'sans-arabic':
+    string.unquote(
+      "'Noto Sans Arabic', 'RTL United Text', system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
+    ),
+  'sans-devanagari':
+    string.unquote(
+      "'Noto Sans Devanagari', system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
+    ),
+  'sans-hebrew':
+    string.unquote(
+      "'Noto Sans Hebrew', 'RTL United Text', system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
+    ),
+  'sans-jp':
+    string.unquote(
+      "'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
+    ),
+  'sans-kr':
+    string.unquote(
+      "'Noto Sans KR', system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
+    ),
+  'sans-thai-looped':
+    string.unquote(
+      "'Noto Sans Thai Looped', system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
+    ),
+  'sans-thai':
+    string.unquote(
+      "'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
+    ),
+  'serif':
+    string.unquote(
+      "'Noto Serif', 'Georgia', 'Times New Roman', serif"
+    ),
+) !default;
+
+/// Get the font-family for an Octaviaflow font
+/// @param {String} $name
+/// @return {String}
+/// @access public
+/// @group @octaviaflow/type
+@function font-family($name) {
+  @return map.get($font-families, $name);
+}
+
+/// Include the `font-family` definition for the given name in your selector
+/// @param {String} $name
+/// @access public
+/// @group @octaviaflow/type
+@mixin font-family($name) {
+  font-family: font-family($name);
+}
+
+/// Suggested font weights to be used in product
+/// @type Map
+/// @access public
+/// @group @octaviaflow/type
+$font-weights: (
+  'light': 300,
+  'regular': 400,
+  'semibold': 600,
+) !default;
+
+/// Retrieve the font-weight value for a given name
+/// @param {String} $weight
+/// @return {Number}
+/// @access public
+/// @group @octaviaflow/type
+@function font-weight($weight) {
+  @return map.get($font-weights, $weight);
+}
+
+/// Set the `font-weight` property with the value for a given name
+/// @param {String} $weight
+/// @access public
+/// @group @octaviaflow/type
+@mixin font-weight($weight) {
+  font-weight: font-weight($weight);
+}

package/scss/_prefix.scss

@@ -0,0 +1,28 @@
+//
+// 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.
+//
+
+@use 'sass:map';
+
+/// @type String
+/// @access public
+/// @group @octaviaflow/type
+$prefix: 'cds' !default;
+
+/// @type String
+/// @access public
+/// @group @octaviaflow/type
+$custom-property-prefix: 'cds' !default;
+
+@mixin configure($values) {
+  @if map.has-key($values, 'prefix') {
+    $prefix: map.get($values, 'prefix') !global;
+  }
+
+  @if map.has-key($values, 'custom-property-prefix') {
+    $custom-property-prefix: map.get($values, 'custom-property-prefix') !global;
+  }
+}

package/scss/_reset.scss

@@ -0,0 +1,42 @@
+//
+// 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.
+//
+
+@use 'sass:map';
+@use 'sass:meta';
+@use '@octaviaflow/layout';
+@use 'font-family' as *;
+
+/// Include a type reset for a given body and mono font family
+/// @param {String} $body-font-family [font-family('sans')] - The font family used on the `<body>` element
+/// @param {String} $mono-font-family [font-family('mono')] - The font family used on elements that require mono fonts, like the `<code>` element
+/// @access public
+/// @group @octaviaflow/type
+@mixin reset(
+  $body-font-family: font-family('sans'),
+  $mono-font-family: font-family('mono')
+) {
+  html {
+    font-size: 100%;
+  }
+
+  body {
+    @include font-weight('regular');
+
+    font-family: $body-font-family;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  code {
+    font-family: $mono-font-family;
+  }
+
+  strong {
+    @include font-weight('semibold');
+  }
+}

package/scss/_scale.scss

@@ -0,0 +1,58 @@
+//
+// 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.
+//
+
+@use '@octaviaflow/layout';
+@use 'sass:list';
+@use 'sass:math';
+
+/// Compute the type size for the given type scale step
+/// @param {Number} $step
+/// @return {Number} In px
+/// @access public
+/// @group @octaviaflow/type
+@function get-type-size($step) {
+  @if $step == 1 {
+    @return 12px;
+  }
+  // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
+  @return get-type-size($step - 1) + (math.floor(($step - 2) * 0.25) + 1) * 2;
+}
+
+/// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px
+/// @type Map
+/// @access public
+/// @group @octaviaflow/type
+$type-scale: ();
+@for $i from 1 through 23 {
+  $type-scale: list.append($type-scale, layout.to-rem(get-type-size($i)));
+}
+
+/// Get the value of a specific step in the type scale
+/// @param {Number} $step
+/// @return {Number} In rem
+/// @access public
+/// @group @octaviaflow/type
+@function type-scale($step) {
+  @return list.nth($type-scale, $step);
+}
+
+/// Set the font-size value of a selector with the value at the given `$step`
+/// @param {Number} $step
+/// @access public
+/// @group @octaviaflow/type
+@mixin type-scale($step) {
+  font-size: type-scale($step);
+}
+
+/// Alias of `type-scale` mixin.
+/// @param {Number} $step
+/// @alias type-scale
+/// @access public
+/// @group @octaviaflow/type
+@mixin font-size($step) {
+  font-size: type-scale($step);
+}