@octaviaflow/themes 1.0.1

package/src/index.js

@@ -0,0 +1,42 @@
+/**
+ * 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 * as white from './white';
+import * as g10 from './g10';
+import * as g90 from './g90';
+import * as g100 from './g100';
+import * as v10 from './v10';
+import * as buttonTokens from './component-tokens/button';
+import * as tagTokens from './component-tokens/tag';
+import * as notificationTokens from './component-tokens/notification';
+import { formatTokenName } from './tools';
+import { unstable_metadata } from './tokens';
+
+const themes = {
+  white,
+  g10,
+  g90,
+  g100,
+};
+
+export * from './white';
+export {
+  white,
+  g10,
+  g90,
+  g100,
+  themes,
+  v10,
+  buttonTokens,
+  tagTokens,
+  notificationTokens,
+  unstable_metadata,
+  formatTokenName,
+};

package/src/tokens/Token.js

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+
+/**
+ * A Token is the simplest unit in our theme. It can have a name, properties
+ * that it applies to like border or background, along with a state if the
+ * token should only be used for specific states like hover or focus.
+ */
+export class Token {
+  static create(token) {
+    if (typeof token === 'string') {
+      return new Token(token);
+    }
+
+    return new Token(token.name, token.properties, token.state);
+  }
+
+  constructor(name, properties, state) {
+    this.kind = 'Token';
+    this.name = name;
+
+    if (properties) {
+      this.properties = properties;
+    }
+
+    if (state) {
+      this.state = state;
+    }
+  }
+}

package/src/tokens/TokenFormat.js

@@ -0,0 +1,91 @@
+/**
+ * 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.
+ */
+
+
+const formats = {
+  js: 'javascript',
+  scss: 'scss',
+};
+
+export const TokenFormat = {
+  formats,
+
+  convert({ name, format }) {
+    if (format === formats.js) {
+      const keywords = new Set(['ui']);
+
+      return name
+        .split('-')
+        .map((part, index) => {
+          if (index === 0) {
+            return part;
+          }
+
+          if (keywords.has(part)) {
+            return part.toUpperCase();
+          }
+
+          return part[0].toUpperCase() + part.slice(1);
+        })
+        .join('');
+    }
+
+    if (format === formats.scss) {
+      return formatNameToScss(name);
+    }
+
+    return name;
+  },
+};
+
+const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
+/**
+ * Format a given token into the format expected in CSS/SCSS-based projects.
+ * @param {string} token
+ * @returns {string}
+ */
+function formatNameToScss(token) {
+  let string = '';
+
+  for (let i = 0; i < token.length; i++) {
+    if (token[i] === '-') {
+      continue;
+    }
+
+    // If we run into a number, we hit the scale step at the end of a token name
+    // and can safely truncate the rest of the token
+    if (numbers.indexOf(token[i]) !== -1) {
+      string += '-' + token.slice(i);
+      break;
+    }
+
+    // When encountering an uppercase name, we will want to start adding `-`
+    // between words
+    if (token[i] === token[i].toUpperCase()) {
+      // Check backwards to see if previous letter was also capitalized, if so
+      // we are in a special case like UI where each piece should be connected
+      if (token[i - 1] && token[i - 1] === token[i - 1].toUpperCase()) {
+        string += token[i].toLowerCase();
+        continue;
+      }
+
+      if (token[i - 1] !== '-') {
+        // Otherwise, just concatenate this new part on to the existing string
+        string += '-' + token[i].toLowerCase();
+      }
+      continue;
+    }
+
+    // By default, we add the current character to the output string
+    string += token[i];
+  }
+
+  return string;
+}

package/src/tokens/TokenGroup.js

@@ -0,0 +1,164 @@
+/**
+ * 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 { Token } from './Token';
+
+/**
+ * A TokenGroup allows us to group up a collection of tokens and nested token
+ * groups. A group allows us to colocate related tokens and write information
+ * once that applies to the entire collection of tokens. For example, if all the
+ * tokens apply to the `border` color property then we can specify this property
+ * at the group level
+ *
+ * A TokenGroup allows us to colocate all this information while also providing
+ * ways to get information about the entire group, including properties and
+ * states
+ */
+export class TokenGroup {
+  static create({ name, properties, tokens = [] }) {
+    return new TokenGroup(name, tokens, properties);
+  }
+
+  constructor(name, tokens, properties) {
+    this.kind = 'TokenGroup';
+    this.name = name;
+
+    if (properties) {
+      this.properties = properties;
+    }
+
+    this.children = tokens.map((child) => {
+      if (child.kind === 'TokenGroup') {
+        return child;
+      }
+
+      return Token.create(child);
+    });
+  }
+
+  *[Symbol.iterator]() {
+    yield this;
+
+    for (const child of this.children) {
+      yield child;
+
+      if (child.kind === 'TokenGroup') {
+        yield* child;
+      }
+    }
+  }
+
+  /**
+   * Get all the tokens available in every Token Group in this TokenGroup,
+   * including itself.
+   * @returns {Array<Token>}
+   */
+  getTokens(parentContext = {}) {
+    const context = {
+      ...parentContext,
+      groups: parentContext.groups ? parentContext.groups.concat(this) : [this],
+      properties: this.properties || parentContext.properties,
+    };
+
+    return this.children.flatMap((child) => {
+      if (child.kind === 'TokenGroup') {
+        return child.getTokens(context);
+      }
+
+      const token = {
+        ...context,
+        name: child.name,
+        properties: child.properties || context.properties,
+      };
+
+      if (child.state) {
+        token.state = child.state;
+      }
+
+      return token;
+    });
+  }
+
+  /**
+   * Get a specific token from the TokenGroup, or form one of its nested
+   * TokenGroups
+   * @returns {Token}
+   */
+  getToken(tokenOrName) {
+    const name =
+      typeof tokenOrName === 'string' ? tokenOrName : tokenOrName.name;
+    for (const child of this) {
+      if (child.kind === 'TokenGroup') {
+        continue;
+      }
+
+      if (child.name === name) {
+        return child;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Get all the unique groups in the token group, including this group
+   * @returns {Array<TokenGroup>}
+   */
+  getTokenGroups() {
+    const set = new Set();
+
+    for (const child of this) {
+      if (child.kind !== 'TokenGroup') {
+        continue;
+      }
+      set.add(child);
+    }
+
+    return Array.from(set);
+  }
+
+  /**
+   * Get all the unique properties in the token group, including this group
+   * @returns {Array<string>}
+   */
+  getTokenProperties() {
+    const set = new Set();
+
+    for (const child of this) {
+      if (!Array.isArray(child.properties)) {
+        continue;
+      }
+
+      for (const property of child.properties) {
+        set.add(property);
+      }
+    }
+
+    return Array.from(set);
+  }
+
+  /**
+   * Get all the unique states in the token group, including this group
+   * @returns {Array<string>}
+   */
+  getTokenStates() {
+    const set = new Set();
+
+    for (const child of this) {
+      if (child.kind !== 'Token') {
+        continue;
+      }
+      if (child.state) {
+        set.add(child.state);
+      }
+    }
+
+    return Array.from(set);
+  }
+}

package/src/tokens/TokenSet.js

@@ -0,0 +1,80 @@
+/**
+ * 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.
+ */
+
+
+/**
+ * A token set is a collection of tokens which should be along with each other.
+ * For example, we have tokens that correspond to a layer level in a UI. A
+ * token set allows us to group these tokens together in a way that's different
+ * than their token group.
+ */
+export class TokenSet {
+  static create({ name, tokens }) {
+    return new TokenSet(name, tokens);
+  }
+
+  constructor(name, tokens = []) {
+    this.kind = 'TokenSet';
+    this.name = name;
+    this.children = tokens;
+  }
+
+  *[Symbol.iterator]() {
+    for (const child of this.children) {
+      yield child;
+
+      if (child.kind === 'TokenSet') {
+        yield* child;
+      }
+    }
+  }
+
+  getTokenSets() {
+    const children = this.children
+      .filter((child) => {
+        return child.kind === 'TokenSet';
+      })
+      .flatMap((child) => {
+        return child.getTokenSets();
+      });
+
+    return [this, ...children];
+  }
+
+  getTokenSet(name) {
+    for (const child of this) {
+      if (!child.kind === 'TokenSet') {
+        continue;
+      }
+
+      if (child.name === name) {
+        return child;
+      }
+    }
+
+    return null;
+  }
+
+  hasToken(tokenOrName) {
+    const name =
+      typeof tokenOrName === 'string' ? tokenOrName : tokenOrName.name;
+
+    for (const child of this) {
+      if (child.kind === 'TokenSet') {
+        continue;
+      }
+
+      if (child.name === name) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+}

package/src/tokens/components.js

@@ -0,0 +1,97 @@
+/**
+ * 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 { TokenGroup } from './TokenGroup';
+
+export const button = TokenGroup.create({
+  name: 'Button',
+  properties: [],
+  tokens: [
+    'button-separator',
+    'button-primary',
+    'button-secondary',
+    'button-tertiary',
+    'button-danger-primary',
+    'button-danger-secondary',
+    'button-danger-active',
+    'button-primary-active',
+    'button-secondary-active',
+    'button-tertiary-active',
+    'button-danger-hover',
+    'button-primary-hover',
+    'button-secondary-hover',
+    'button-tertiary-hover',
+    'button-disabled',
+  ],
+});
+
+export const notification = TokenGroup.create({
+  name: 'Notification',
+  properties: [],
+  tokens: [
+    'notification-background-error',
+    'notification-background-success',
+    'notification-background-info',
+    'notification-background-warning',
+    'notification-action-hover',
+    'notification-action-tertiary-inverse',
+    'notification-action-tertiary-inverse-active',
+    'notification-action-tertiary-inverse-hover',
+    'notification-action-tertiary-inverse-text',
+    'notification-action-tertiary-inverse-text-on-color-disabled',
+  ],
+});
+
+export const tag = TokenGroup.create({
+  name: 'Tag',
+  properties: [],
+  tokens: [
+    'tag-background-red',
+    'tag-color-red',
+    'tag-hover-red',
+    'tag-background-magenta',
+    'tag-color-magenta',
+    'tag-hover-magenta',
+    'tag-background-purple',
+    'tag-color-purple',
+    'tag-hover-purple',
+    'tag-background-blue',
+    'tag-color-blue',
+    'tag-hover-blue',
+    'tag-background-cyan',
+    'tag-color-cyan',
+    'tag-hover-cyan',
+    'tag-background-teal',
+    'tag-color-teal',
+    'tag-hover-teal',
+    'tag-background-green',
+    'tag-color-green',
+    'tag-hover-green',
+    'tag-background-gray',
+    'tag-color-gray',
+    'tag-hover-gray',
+    'tag-border-red',
+    'tag-border-blue',
+    'tag-border-cyan',
+    'tag-border-teal',
+    'tag-border-green',
+    'tag-border-magenta',
+    'tag-border-purple',
+    'tag-border-gray',
+    'tag-border-cool-gray',
+    'tag-border-warm-gray',
+    'tag-background-cool-gray',
+    'tag-color-cool-gray',
+    'tag-hover-cool-gray',
+    'tag-background-warm-gray',
+    'tag-color-warm-gray',
+    'tag-hover-warm-gray',
+  ],
+});

package/src/tokens/index.js

@@ -0,0 +1,71 @@
+/**
+ * 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 { Token } from './Token';
+import { TokenFormat } from './TokenFormat';
+import { TokenGroup } from './TokenGroup';
+import { TokenSet } from './TokenSet';
+import { group, contextual } from './v11TokenGroup';
+import { set } from './v11TokenSet';
+import * as components from './components';
+import { type } from './type';
+import { layout } from './layout';
+import { v10 } from './v10';
+
+export { Token, TokenFormat, TokenGroup, TokenSet, group, set };
+
+const v11 = [
+  // Base color tokens
+  ...group.getTokens().map((token) => {
+    return {
+      name: token.name,
+      type: 'color',
+    };
+  }),
+
+  // Contextual tokens
+  ...contextual.getTokens().map((token) => {
+    return {
+      name: token.name,
+      type: 'color',
+    };
+  }),
+
+  // Component tokens
+  ...Object.values(components).flatMap((group) => {
+    return group.getTokens().map((token) => {
+      return {
+        name: token.name,
+        type: 'color',
+      };
+    });
+  }),
+
+  // Typography
+  ...type.getTokens().map((token) => {
+    return {
+      name: token.name,
+      type: 'type',
+    };
+  }),
+
+  // Layout (spacing)
+  ...layout.getTokens().map((token) => {
+    return {
+      name: token.name,
+      type: 'layout',
+    };
+  }),
+];
+
+export const unstable_metadata = {
+  v11,
+  v10,
+};

package/src/tokens/layout.js

@@ -0,0 +1,42 @@
+/**
+ * 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 { TokenGroup } from './TokenGroup';
+
+export const layout = TokenGroup.create({
+  name: 'Layout',
+  properties: [],
+  tokens: [
+    'spacing-01',
+    'spacing-02',
+    'spacing-03',
+    'spacing-04',
+    'spacing-05',
+    'spacing-06',
+    'spacing-07',
+    'spacing-08',
+    'spacing-09',
+    'spacing-10',
+    'spacing-11',
+    'spacing-12',
+    'spacing-13',
+    'fluid-spacing-01',
+    'fluid-spacing-02',
+    'fluid-spacing-03',
+    'fluid-spacing-04',
+    'container-01',
+    'container-02',
+    'container-03',
+    'container-04',
+    'container-05',
+    'icon-size-01',
+    'icon-size-02',
+  ],
+});

package/src/tokens/type.js

@@ -0,0 +1,52 @@
+/**
+ * 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 { TokenGroup } from './TokenGroup';
+
+export const type = TokenGroup.create({
+  name: 'Type',
+  properties: [],
+  tokens: [
+    'caption-01',
+    'caption-02',
+    'label-01',
+    'label-02',
+    'helper-text-01',
+    'helper-text-02',
+    'body-short-01',
+    'body-long-01',
+    'body-short-02',
+    'body-long-02',
+    'code-01',
+    'code-02',
+    'heading-01',
+    'productive-heading-01',
+    'heading-02',
+    'productive-Heading-02',
+    'productive-heading-03',
+    'productive-heading-04',
+    'productive-heading-05',
+    'productive-heading-06',
+    'productive-heading-07',
+    'expressive-heading-01',
+    'expressive-heading-02',
+    'expressive-heading-03',
+    'expressive-heading-04',
+    'expressive-heading-05',
+    'expressive-heading-06',
+    'expressive-paragraph-01',
+    'quotation-01',
+    'quotation-02',
+    'display-01',
+    'display-02',
+    'display-03',
+    'display-04',
+  ],
+});