@octaviaflow/themes 1.0.1

package/src/tokens/v10.js

@@ -0,0 +1,191 @@
+/**
+ * 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';
+
+const color = TokenGroup.create({
+  name: 'Color',
+  properties: [],
+  tokens: [
+    'interactive-01',
+    'interactive-02',
+    'interactive-03',
+    'interactive-04',
+    'ui-background',
+    'ui-01',
+    'ui-02',
+    'ui-03',
+    'ui-04',
+    'ui-05',
+    'text-01',
+    'text-02',
+    'text-03',
+    'text-04',
+    'text-05',
+    'text-error',
+    'icon-01',
+    'icon-02',
+    'icon-03',
+    'link-01',
+    'link-02',
+    'inverse-link',
+    'field-01',
+    'field-02',
+    'inverse-01',
+    'inverse-02',
+    'support-01',
+    'support-02',
+    'support-03',
+    'support-04',
+    'inverse-support-01',
+    'inverse-support-02',
+    'inverse-support-03',
+    'inverse-support-04',
+    'overlay-01',
+    'danger-01',
+    'danger-02',
+    'focus',
+    'inverse-focus-ui',
+    'hover-primary',
+    'active-primary',
+    'hover-primary-text',
+    'hover-secondary',
+    'active-secondary',
+    'hover-tertiary',
+    'active-tertiary',
+    'hover-ui',
+    'hover-light-ui',
+    'hover-selected-ui',
+    'active-ui',
+    'active-light-ui',
+    'selected-ui',
+    'selected-light-ui',
+    'inverse-hover-ui',
+    'hover-danger',
+    'active-danger',
+    'hover-row',
+    'visited-link',
+    'disabled-01',
+    'disabled-02',
+    'disabled-03',
+    'highlight',
+    'decorative-01',
+    'button-separator',
+    'skeleton-01',
+    'skeleton-02',
+    // deprecated
+    'brand-01',
+    'brand-02',
+    'brand-03',
+    'active-01',
+    'hover-field',
+    'danger',
+  ],
+});
+
+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',
+  ],
+});
+
+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',
+    'layout-01',
+    'layout-02',
+    'layout-03',
+    'layout-04',
+    'layout-05',
+    'layout-06',
+    'layout-07',
+    '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',
+  ],
+});
+
+export const v10 = [
+  ...color.getTokens().map((token) => {
+    return {
+      name: token.name,
+      type: 'color',
+    };
+  }),
+  ...type.getTokens().map((token) => {
+    return {
+      name: token.name,
+      type: 'type',
+    };
+  }),
+  ...layout.getTokens().map((token) => {
+    return {
+      name: token.name,
+      type: 'layout',
+    };
+  }),
+];

package/src/tokens/v11TokenGroup.js

@@ -0,0 +1,436 @@
+/**
+ * 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 background = TokenGroup.create({
+  name: 'Background',
+  properties: ['background'],
+  tokens: [
+    'background',
+    {
+      name: 'background-active',
+      state: 'active',
+    },
+    {
+      name: 'background-selected',
+      state: 'selected',
+    },
+    {
+      name: 'background-selected-hover',
+      state: 'hover',
+    },
+    {
+      name: 'background-hover',
+      state: 'hover',
+    },
+    'background-brand',
+    'background-inverse',
+    {
+      state: 'hover',
+      name: 'background-inverse-hover',
+    },
+  ],
+});
+
+export const layer = TokenGroup.create({
+  name: 'Layer',
+  properties: ['background'],
+  tokens: [
+    {
+      name: 'layer-01',
+    },
+    {
+      state: 'active',
+      name: 'layer-active-01',
+    },
+    {
+      state: 'hover',
+      name: 'layer-hover-01',
+    },
+    {
+      state: 'selected',
+      name: 'layer-selected-01',
+    },
+    {
+      state: 'hover',
+      name: 'layer-selected-hover-01',
+    },
+    {
+      name: 'layer-02',
+    },
+    {
+      state: 'active',
+      name: 'layer-active-02',
+    },
+    {
+      state: 'hover',
+      name: 'layer-hover-02',
+    },
+    {
+      state: 'selected',
+      name: 'layer-selected-02',
+    },
+    {
+      state: 'hover',
+      name: 'layer-selected-hover-02',
+    },
+    {
+      name: 'layer-03',
+    },
+    {
+      state: 'active',
+      name: 'layer-active-03',
+    },
+    {
+      state: 'hover',
+      name: 'layer-hover-03',
+    },
+    {
+      state: 'selected',
+      name: 'layer-selected-03',
+    },
+    {
+      state: 'hover',
+      name: 'layer-selected-hover-03',
+    },
+    {
+      name: 'layer-selected-inverse',
+    },
+    {
+      state: 'disabled',
+      name: 'layer-selected-disabled',
+    },
+    {
+      name: 'layer-accent-01',
+    },
+    {
+      state: 'active',
+      name: 'layer-accent-active-01',
+    },
+    {
+      state: 'hover',
+      name: 'layer-accent-hover-01',
+    },
+    {
+      name: 'layer-accent-02',
+    },
+    {
+      state: 'active',
+      name: 'layer-accent-active-02',
+    },
+    {
+      state: 'hover',
+      name: 'layer-accent-hover-02',
+    },
+    {
+      name: 'layer-accent-03',
+    },
+    {
+      state: 'active',
+      name: 'layer-accent-active-03',
+    },
+    {
+      state: 'hover',
+      name: 'layer-accent-hover-03',
+    },
+  ],
+});
+
+export const field = TokenGroup.create({
+  name: 'Field',
+  properties: ['background'],
+  tokens: [
+    {
+      name: 'field-01',
+    },
+    {
+      state: 'hover',
+      name: 'field-hover-01',
+    },
+    {
+      name: 'field-02',
+    },
+    {
+      state: 'hover',
+      name: 'field-hover-02',
+    },
+    {
+      name: 'field-03',
+    },
+    {
+      state: 'hover',
+      name: 'field-hover-03',
+    },
+  ],
+});
+
+export const border = TokenGroup.create({
+  name: 'Borders',
+  properties: ['border'],
+  tokens: [
+    {
+      name: 'border-subtle-00',
+    },
+    {
+      name: 'border-subtle-01',
+    },
+    {
+      state: 'selected',
+      name: 'border-subtle-selected-01',
+    },
+    {
+      name: 'border-subtle-02',
+    },
+    {
+      state: 'selected',
+      name: 'border-subtle-selected-02',
+    },
+    {
+      name: 'border-subtle-03',
+    },
+    {
+      state: 'selected',
+      name: 'border-subtle-selected-03',
+    },
+
+    // Border strong
+    'border-strong-01',
+    'border-strong-02',
+    'border-strong-03',
+
+    // Border tile
+    'border-tile-01',
+    'border-tile-02',
+    'border-tile-03',
+
+    // Border inverse
+    'border-inverse',
+
+    // Border interactive
+    'border-interactive',
+
+    {
+      state: 'disabled',
+      name: 'border-disabled',
+    },
+  ],
+});
+
+export const text = TokenGroup.create({
+  name: 'Text',
+  properties: ['text'],
+  tokens: [
+    'text-primary',
+    'text-secondary',
+    'text-placeholder',
+    'text-helper',
+    'text-error',
+    'text-inverse',
+    {
+      name: 'text-on-color',
+    },
+    {
+      state: 'disabled',
+      name: 'text-on-color-disabled',
+    },
+
+    {
+      state: 'disabled',
+      name: 'text-disabled',
+    },
+  ],
+});
+
+export const link = TokenGroup.create({
+  name: 'Link',
+  properties: ['text'],
+  tokens: [
+    {
+      name: 'link-primary',
+    },
+    {
+      state: 'hover',
+      name: 'link-primary-hover',
+    },
+    'link-secondary',
+    {
+      state: 'visited',
+      name: 'link-inverse-visited',
+    },
+    'link-visited',
+    'link-inverse',
+    'link-inverse-active',
+    'link-inverse-hover',
+  ],
+});
+
+export const icon = TokenGroup.create({
+  name: 'Icons',
+  properties: ['background', 'fill', 'stroke'],
+  tokens: [
+    'icon-primary',
+    'icon-secondary',
+    'icon-inverse',
+    {
+      name: 'icon-on-color',
+    },
+    {
+      state: 'disabled',
+      name: 'icon-on-color-disabled',
+    },
+    {
+      state: 'disabled',
+      name: 'icon-disabled',
+    },
+    'icon-interactive',
+  ],
+});
+
+export const support = TokenGroup.create({
+  name: 'Support',
+  properties: ['background', 'fill', 'stroke'],
+  tokens: [
+    'support-error',
+    'support-success',
+    'support-warning',
+    'support-info',
+    'support-error-inverse',
+    'support-success-inverse',
+    'support-warning-inverse',
+    'support-info-inverse',
+    'support-caution-major',
+    'support-caution-minor',
+    'support-caution-undefined',
+  ],
+});
+
+export const focus = TokenGroup.create({
+  name: 'Focus',
+  properties: ['border'],
+  tokens: ['focus', 'focus-inset', 'focus-inverse'],
+});
+
+export const skeleton = TokenGroup.create({
+  name: 'Skeleton',
+  properties: ['background'],
+  tokens: ['skeleton-background', 'skeleton-element'],
+});
+
+export const contextual = TokenGroup.create({
+  name: 'Contextual',
+  properties: [],
+  tokens: [
+    'layer',
+    'layer-active',
+    'layer-hover',
+    'layer-selected',
+    'layer-selected-hover',
+    'layer-accent',
+    'layer-accent-hover',
+    'layer-accent-active',
+    'field',
+    'field-hover',
+    'border-subtle',
+    'border-subtle-selected',
+    'border-strong',
+    'border-tile',
+  ],
+});
+
+export const ai = TokenGroup.create({
+  name: 'AI',
+  properties: ['background'],
+  tokens: [
+    // Phase 2
+    'ai-popover-background',
+    'ai-popover-shadow-outer-01',
+    'ai-popover-shadow-outer-02',
+    // Linear gradient refactor
+    'ai-inner-shadow',
+    'ai-aura-start-sm',
+    'ai-aura-start',
+    'ai-aura-end',
+    'ai-aura-hover-background',
+    'ai-aura-hover-start',
+    'ai-aura-hover-end',
+    'ai-border-strong',
+    'ai-border-start',
+    'ai-border-end',
+    'ai-drop-shadow',
+    'ai-skeleton-background',
+    'ai-skeleton-element-background',
+    'ai-overlay',
+    // Caret tokens
+    'ai-popover-caret-center',
+    'ai-popover-caret-bottom',
+    'ai-popover-caret-bottom-background',
+    'ai-popover-caret-bottom-background-actions',
+    // Chat tokens
+    'chat-prompt-background',
+    'chat-prompt-border-start',
+    'chat-prompt-border-end',
+    'chat-bubble-user',
+    'chat-bubble-agent',
+    'chat-bubble-border',
+    'chat-avatar-bot',
+    'chat-avatar-agent',
+    'chat-avatar-user',
+    'chat-shell-background',
+    'chat-header-background',
+    // Chat button tokens
+    'chat-button',
+    'chat-button-hover',
+    'chat-button-text-hover',
+    'chat-button-active',
+    'chat-button-selected',
+    'chat-button-text-selected',
+  ],
+});
+
+export const group = TokenGroup.create({
+  name: 'All',
+  tokens: [
+    background,
+    layer,
+    field,
+
+    // Interactive
+    {
+      name: 'interactive',
+      properties: ['background', 'text'],
+    },
+
+    border,
+    text,
+    link,
+    icon,
+    support,
+    ai,
+
+    // Misc
+    {
+      name: 'highlight',
+    },
+    {
+      name: 'overlay',
+      properties: ['background'],
+    },
+    {
+      name: 'toggle-off',
+    },
+    {
+      name: 'shadow',
+    },
+
+    focus,
+    skeleton,
+  ],
+});

package/src/tokens/v11TokenSet.js

@@ -0,0 +1,94 @@
+/**
+ * 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 { TokenSet } from './TokenSet';
+import { background, border, field, layer } from './v11TokenGroup';
+
+export const set = TokenSet.create({
+  name: 'All',
+  tokens: [
+    TokenSet.create({
+      name: 'Base set',
+      tokens: [
+        background.getToken('background'),
+        background.getToken('background-hover'),
+        background.getToken('background-selected'),
+        background.getToken('background-selected-hover'),
+        border.getToken('border-subtle-00'),
+      ],
+    }),
+    TokenSet.create({
+      name: '01 Layer set',
+      tokens: [
+        layer.getToken('layer-01'),
+        layer.getToken('layer-active-01'),
+        layer.getToken('layer-hover-01'),
+        layer.getToken('layer-selected-hover-01'),
+        layer.getToken('layer-accent-01'),
+        layer.getToken('layer-accent-active-01'),
+        layer.getToken('layer-accent-hover-01'),
+
+        field.getToken('field-01'),
+        field.getToken('field-hover-01'),
+
+        border.getToken('border-subtle-01'),
+        border.getToken('border-subtle-selected-01'),
+
+        border.getToken('border-strong-01'),
+
+        border.getToken('border-tile-01'),
+      ],
+    }),
+    TokenSet.create({
+      name: '02 Layer set',
+      tokens: [
+        layer.getToken('layer-02'),
+        layer.getToken('layer-active-02'),
+        layer.getToken('layer-hover-02'),
+        layer.getToken('layer-selected-hover-02'),
+        layer.getToken('layer-accent-02'),
+        layer.getToken('layer-accent-active-02'),
+        layer.getToken('layer-accent-hover-02'),
+
+        field.getToken('field-02'),
+        field.getToken('field-hover-02'),
+
+        border.getToken('border-subtle-02'),
+        border.getToken('border-subtle-selected-02'),
+
+        border.getToken('border-strong-02'),
+
+        border.getToken('border-tile-02'),
+      ],
+    }),
+    TokenSet.create({
+      name: '03 Layer set',
+      tokens: [
+        layer.getToken('layer-03'),
+        layer.getToken('layer-active-03'),
+        layer.getToken('layer-hover-03'),
+        layer.getToken('layer-selected-hover-03'),
+        layer.getToken('layer-accent-03'),
+        layer.getToken('layer-accent-active-03'),
+        layer.getToken('layer-accent-hover-03'),
+
+        field.getToken('field-03'),
+        field.getToken('field-hover-03'),
+
+        border.getToken('border-subtle-03'),
+        border.getToken('border-subtle-selected-03'),
+
+        border.getToken('border-strong-03'),
+
+        border.getToken('border-tile-03'),
+      ],
+    }),
+  ],
+});