@octaviaflow/themes 1.0.1

package/src/v10/metadata.yml

@@ -0,0 +1,217 @@
+tokens:
+  - name: interactive01
+    role:
+      - Primary interactive color
+      - Primary buttons
+  - name: interactive02
+    role:
+      - Secondary interactive color
+      - Secondary button
+  - name: interactive03
+    role:
+      - 4.5:1 AA contrast
+      - Tertiary button
+  - name: interactive04
+    role:
+      - 3:1 AA contrast
+      - Selected elements
+      - Active elements
+      - Accent icons
+  - name: uiBackground
+    role:
+      - Default page background
+  - name: ui01
+    role:
+      - Primary container background
+      - Secondary page background
+  - name: ui02
+    role:
+      - Primary page background
+      - Secondary container background
+  - name: ui03
+    role:
+      - Subtle border
+      - Tertiary background color
+  - name: ui04
+    role:
+      - 3:1 AA element contrast
+      - Medium contrast border
+  - name: ui05
+    role:
+      - 4.5:1 AA element contrast
+      - High contrast border
+      - Emphasis elements
+  - name: text01
+    role:
+      - Primary text
+      - Body copy
+      - Headers
+      - Hover text color for text02
+  - name: text02
+    role:
+      - Secondary text
+      - Input labels
+      - Help text
+  - name: text03
+    role:
+      - Placeholder text
+  - name: text04
+    role:
+      - Text on interactive colors
+  - name: icon01
+    role:
+      - Primary icons
+  - name: icon02
+    role:
+      - Secondary icons
+  - name: icon03
+    role:
+      - Tertiary icons
+      - Icons on interactive colors
+      - Icons on non-ui colors
+  - name: link01
+    role:
+      - Primary links
+      - Ghost button
+  - name: link02
+    role:
+      - Secondary link color for lower contrast backgrounds
+  - name: field01
+    role:
+      - Default input fields
+      - Field color on $ui-backgrounds
+  - name: field02
+    role:
+      - Input field color on ui02 backgrounds
+
+  - name: inverse01
+    role:
+      - Inverse text color
+      - Inverse icon color
+  - name: inverse02
+    role:
+      - High contrast backgrounds
+      - High contrast elements
+  - name: support01
+    role:
+      - Error
+  - name: support02
+    role:
+      - Success
+  - name: support03
+    role:
+      - Warning
+  - name: support04
+    role:
+      - Information
+  - name: inverseSupport01
+    role:
+      - Error on high contrast backgrounds
+  - name: inverseSupport02
+    role:
+      - Success on high contrast backgrounds
+  - name: inverseSupport03
+    role:
+      - Warning on high contrast backgrounds
+  - name: inverseSupport04
+    role:
+      - Information on high contrast backgrounds
+  - name: overlay01
+    role:
+      - Background overlay
+  - name: focus
+    role:
+      - Focus border
+      - Focus underline
+  - name: hoverPrimary
+    role:
+      - interactive01 hover
+  - name: activePrimary
+    role:
+      - interactive01 active
+  - name: hoverPrimaryText
+    role:
+      - interactive01 text hover
+  - name: hoverSecondary
+    role:
+      - interactive02 hover
+  - name: activeSecondary
+    role:
+      - interactive02 active
+      - inverse01 active
+  - name: hoverTertiary
+    role:
+      - interactive03 hover
+      - inverse01 hover
+  - name: activeTertiary
+    role:
+      - interactive03 active
+  - name: hoverUI
+    role:
+      - ui01 hover
+      - ui02 hover
+      - Transparent background hover
+  - name: activeUI
+    role:
+      - ui01 active
+      - ui02 active
+  - name: selectedUI
+    role:
+      - Selected UI elements
+  - name: hoverSelectedUI
+    role:
+      - Data table selected row hover
+  - name: hoverDanger
+    role:
+      - Danger hover
+      - support01 hover
+  - name: activeDanger
+    role:
+      - Danger active
+      - support01 active
+  - name: hoverRow
+    role:
+      - Row hover
+  - name: visitedLink
+    role:
+      - Visited links
+  - name: disabled01
+    role:
+      - Disabled fields
+      - Disabled backgrounds
+      - Disabled border
+  - name: disabled02
+    role:
+      - Disabled elements on disabled01
+      - Disabled label
+      - Disabled text on disabled01
+      - Disabled icons
+      - Disabled border
+  - name: disabled03
+    role:
+      - Disabled text on disabled02
+      - Disabled icons on disabled02
+  - name: highlight
+    role:
+      - interactive01 high light
+  - name: skeleton01
+    role:
+      - Skeleton state of graphics
+  - name: skeleton02
+    role:
+      - Skeleton state of text
+  - name: brand01
+    alias: interactive01
+    deprecated: true
+  - name: brand02
+    alias: interactive02
+    deprecated: true
+  - name: brand03
+    alias: interactive03
+    deprecated: true
+  - name: active01
+    alias: activeUI
+    deprecated: true
+  - name: hoverField
+    alias: hoverUI
+    deprecated: true

package/src/v10/tokens.js

@@ -0,0 +1,400 @@
+/**
+ * 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 { unstable_tokens as type } from '@octaviaflow/type';
+import { unstable_tokens as layout } from '@octaviaflow/layout';
+
+// The color token names for a Carbon theme, value corresponds to what they're
+// exported as in JavaScript
+const colors = [
+  // Core
+  'interactive01',
+  'interactive02',
+  'interactive03',
+  'interactive04',
+
+  'uiBackground',
+
+  'ui01',
+  'ui02',
+  'ui03',
+  'ui04',
+  'ui05',
+
+  'text01',
+  'text02',
+  'text03',
+  'text04',
+  'text05',
+  'textError',
+
+  'icon01',
+  'icon02',
+  'icon03',
+
+  'link01',
+  'link02',
+
+  'inverseLink',
+
+  'field01',
+  'field02',
+
+  'inverse01',
+  'inverse02',
+
+  'support01',
+  'support02',
+  'support03',
+  'support04',
+
+  'inverseSupport01',
+  'inverseSupport02',
+  'inverseSupport03',
+  'inverseSupport04',
+
+  'overlay01',
+
+  'danger01',
+  'danger02',
+
+  // Interactive states
+  'focus',
+  'inverseFocusUi',
+
+  'hoverPrimary',
+  'activePrimary',
+  'hoverPrimaryText',
+
+  'hoverSecondary',
+  'activeSecondary',
+
+  'hoverTertiary',
+  'activeTertiary',
+
+  'hoverUI',
+  'hoverLightUI',
+  'hoverSelectedUI',
+  'activeUI',
+  'activeLightUI',
+  'selectedUI',
+  'selectedLightUI',
+  'inverseHoverUI',
+
+  'hoverDanger',
+  'activeDanger',
+
+  'hoverRow',
+
+  'visitedLink',
+
+  'disabled01',
+  'disabled02',
+  'disabled03',
+
+  'highlight',
+
+  'decorative01',
+
+  'buttonSeparator',
+
+  'skeleton01',
+  'skeleton02',
+
+  // New color tokens
+  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+  'background',
+  'layer',
+  'layerAccent',
+  'layerAccentHover',
+  'layerAccentActive',
+  'field',
+  'backgroundInverse',
+  'backgroundBrand',
+  'interactive',
+
+  'borderSubtle',
+  'borderStrong',
+  'borderInverse',
+  'borderInteractive',
+
+  'textPrimary',
+  'textSecondary',
+  'textPlaceholder',
+  'textHelper',
+  'textOnColor',
+  'textInverse',
+
+  'linkPrimary',
+  'linkSecondary',
+  'linkVisited',
+  'linkInverse',
+
+  'iconPrimary',
+  'iconSecondary',
+  'iconOnColor',
+  'iconInverse',
+
+  'supportError',
+  'supportSuccess',
+  'supportWarning',
+  'supportInfo',
+  'supportErrorInverse',
+  'supportSuccessInverse',
+  'supportWarningInverse',
+  'supportInfoInverse',
+
+  'overlay',
+  'toggleOff',
+  'shadow',
+
+  'buttonPrimary',
+  'buttonSecondary',
+  'buttonTertiary',
+  'buttonDangerPrimary',
+  'buttonDangerSecondary',
+
+  'backgroundActive',
+  'layerActive',
+
+  'buttonDangerActive',
+  'buttonPrimaryActive',
+  'buttonSecondaryActive',
+  'buttonTertiaryActive',
+
+  'focusInset',
+  'focusInverse',
+
+  'backgroundHover',
+  'layerHover',
+  'fieldHover',
+  'backgroundInverseHover',
+  'linkPrimaryHover',
+  'buttonDangerHover',
+  'buttonPrimaryHover',
+  'buttonSecondaryHover',
+  'buttonTertiaryHover',
+
+  'backgroundSelected',
+  'backgroundSelectedHover',
+  'layerSelected',
+  'layerSelectedHover',
+  'layerSelectedInverse',
+  'borderSubtleSelected',
+
+  'borderDisabled',
+
+  'textDisabled',
+  'buttonDisabled',
+  'iconDisabled',
+
+  'textOnColorDisabled',
+  'iconOnColorDisabled',
+  'layerSelectedDisabled',
+
+  'skeletonBackground',
+  'skeletonElement',
+
+  // Deprecated
+  'brand01',
+  'brand02',
+  'brand03',
+  'active01',
+  'hoverField',
+  'danger',
+];
+
+export const tokens = {
+  colors,
+  type,
+  layout,
+};
+
+export const unstable__meta = {
+  colors: [
+    {
+      type: 'core',
+      tokens: [
+        'uiBackground',
+        'interactive01',
+        'interactive02',
+        'interactive03',
+        'interactive04',
+        'brand01',
+        'brand02',
+        'brand03',
+        'danger',
+        'danger01',
+        'danger02',
+        'ui01',
+        'ui02',
+        'ui03',
+        'ui04',
+        'ui05',
+        'text01',
+        'text02',
+        'text03',
+        'text04',
+        'text05',
+        'textError',
+        'link01',
+        'link02',
+        'icon01',
+        'icon02',
+        'icon03',
+        'field01',
+        'field02',
+        'inverse01',
+        'inverse02',
+        'inverseLink',
+        'support01',
+        'support02',
+        'support03',
+        'support04',
+        'inverseSupport01',
+        'inverseSupport02',
+        'inverseSupport03',
+        'inverseSupport04',
+        'overlay01',
+
+        //new tokens
+        'background',
+        'layer',
+        'layerAccent',
+        'layerAccentHover',
+        'layerAccentActive',
+        'field',
+        'backgroundInverse',
+        'backgroundBrand',
+        'interactive',
+
+        'borderSubtle',
+        'borderStrong',
+        'borderInverse',
+        'borderInteractive',
+
+        'textPrimary',
+        'textSecondary',
+        'textPlaceholder',
+        'textHelper',
+        'textOnColor',
+        'textInverse',
+
+        'linkPrimary',
+        'linkSecondary',
+        'linkVisited',
+        'linkInverse',
+
+        'iconPrimary',
+        'iconSecondary',
+        'iconOnColor',
+        'iconInverse',
+
+        'supportError',
+        'supportSuccess',
+        'supportWarning',
+        'supportInfo',
+        'supportErrorInverse',
+        'supportSuccessInverse',
+        'supportWarningInverse',
+        'supportInfoInverse',
+
+        'overlay',
+        'toggleOff',
+        'shadow',
+
+        'buttonPrimary',
+        'buttonSecondary',
+        'buttonTertiary',
+        'buttonDangerPrimary',
+        'buttonDangerSecondary',
+      ],
+    },
+    {
+      type: 'interactive',
+      tokens: [
+        'focus',
+        'inverseFocusUi',
+        'hoverPrimary',
+        'hoverPrimaryText',
+        'hoverSecondary',
+        'hoverTertiary',
+        'hoverUI',
+        'hoverLightUI',
+        'hoverSelectedUI',
+        'hoverDanger',
+        'hoverRow',
+        'activePrimary',
+        'activeSecondary',
+        'activeTertiary',
+        'activeUI',
+        'activeLightUI',
+        'activeDanger',
+        'selectedUI',
+        'selectedLightUI',
+        'highlight',
+        'skeleton01',
+        'skeleton02',
+        'visitedLink',
+        'disabled01',
+        'disabled02',
+        'disabled03',
+        'inverseHoverUI',
+        'active01',
+        'hoverField',
+        'decorative01',
+        'buttonSeparator',
+
+        // new tokens
+        'backgroundActive',
+        'layerActive',
+
+        'buttonDangerActive',
+        'buttonPrimaryActive',
+        'buttonSecondaryActive',
+        'buttonTertiaryActive',
+
+        'focusInset',
+        'focusInverse',
+
+        'backgroundHover',
+        'layerHover',
+        'fieldHover',
+        'backgroundInverseHover',
+        'linkPrimaryHover',
+        'buttonDangerHover',
+        'buttonPrimaryHover',
+        'buttonSecondaryHover',
+        'buttonTertiaryHover',
+
+        'backgroundSelected',
+        'backgroundSelectedHover',
+        'layerSelected',
+        'layerSelectedHover',
+        'layerSelectedInverse',
+        'borderSubtleSelected',
+
+        'borderDisabled',
+
+        'textDisabled',
+        'buttonDisabled',
+        'iconDisabled',
+
+        'textOnColorDisabled',
+        'iconOnColorDisabled',
+        'layerSelectedDisabled',
+
+        'skeletonBackground',
+        'skeletonElement',
+      ],
+    },
+  ],
+  deprecated: ['brand01', 'brand02', 'brand03', 'active01', 'danger'],
+};