@octaviaflow/themes 1.0.1

package/scss/compat/generated/_tokens.scss

@@ -0,0 +1,206 @@
+// Code generated by @octaviaflow/themes. DO NOT EDIT.
+//
+// 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 '../../config';
+@use '../../theme';
+
+/// Internal helper for generating CSS Custom Properties
+@function _get($token) {
+  @if config.$use-fallback-value == false {
+    @return var(--#{config.$prefix}-#{$token});
+  } @else {
+    @return var(--#{config.$prefix}-#{$token}, #{theme.get($token)});
+  }
+}
+
+/// CSS Custom Property for the interactive-01 token
+$interactive-01: _get('interactive-01') !default;
+
+/// CSS Custom Property for the interactive-02 token
+$interactive-02: _get('interactive-02') !default;
+
+/// CSS Custom Property for the interactive-03 token
+$interactive-03: _get('interactive-03') !default;
+
+/// CSS Custom Property for the interactive-04 token
+$interactive-04: _get('interactive-04') !default;
+
+/// CSS Custom Property for the ui-background token
+$ui-background: _get('ui-background') !default;
+
+/// CSS Custom Property for the ui-01 token
+$ui-01: _get('ui-01') !default;
+
+/// CSS Custom Property for the ui-02 token
+$ui-02: _get('ui-02') !default;
+
+/// CSS Custom Property for the ui-03 token
+$ui-03: _get('ui-03') !default;
+
+/// CSS Custom Property for the ui-04 token
+$ui-04: _get('ui-04') !default;
+
+/// CSS Custom Property for the ui-05 token
+$ui-05: _get('ui-05') !default;
+
+/// CSS Custom Property for the text-01 token
+$text-01: _get('text-01') !default;
+
+/// CSS Custom Property for the text-02 token
+$text-02: _get('text-02') !default;
+
+/// CSS Custom Property for the text-03 token
+$text-03: _get('text-03') !default;
+
+/// CSS Custom Property for the text-04 token
+$text-04: _get('text-04') !default;
+
+/// CSS Custom Property for the text-05 token
+$text-05: _get('text-05') !default;
+
+/// CSS Custom Property for the icon-01 token
+$icon-01: _get('icon-01') !default;
+
+/// CSS Custom Property for the icon-02 token
+$icon-02: _get('icon-02') !default;
+
+/// CSS Custom Property for the icon-03 token
+$icon-03: _get('icon-03') !default;
+
+/// CSS Custom Property for the link-01 token
+$link-01: _get('link-01') !default;
+
+/// CSS Custom Property for the link-02 token
+$link-02: _get('link-02') !default;
+
+/// CSS Custom Property for the inverse-link token
+$inverse-link: _get('inverse-link') !default;
+
+/// CSS Custom Property for the inverse-01 token
+$inverse-01: _get('inverse-01') !default;
+
+/// CSS Custom Property for the inverse-02 token
+$inverse-02: _get('inverse-02') !default;
+
+/// CSS Custom Property for the support-01 token
+$support-01: _get('support-01') !default;
+
+/// CSS Custom Property for the support-02 token
+$support-02: _get('support-02') !default;
+
+/// CSS Custom Property for the support-03 token
+$support-03: _get('support-03') !default;
+
+/// CSS Custom Property for the support-04 token
+$support-04: _get('support-04') !default;
+
+/// CSS Custom Property for the inverse-support-01 token
+$inverse-support-01: _get('inverse-support-01') !default;
+
+/// CSS Custom Property for the inverse-support-02 token
+$inverse-support-02: _get('inverse-support-02') !default;
+
+/// CSS Custom Property for the inverse-support-03 token
+$inverse-support-03: _get('inverse-support-03') !default;
+
+/// CSS Custom Property for the inverse-support-04 token
+$inverse-support-04: _get('inverse-support-04') !default;
+
+/// CSS Custom Property for the overlay-01 token
+$overlay-01: _get('overlay-01') !default;
+
+/// CSS Custom Property for the danger-01 token
+$danger-01: _get('danger-01') !default;
+
+/// CSS Custom Property for the danger-02 token
+$danger-02: _get('danger-02') !default;
+
+/// CSS Custom Property for the inverse-focus-ui token
+$inverse-focus-ui: _get('inverse-focus-ui') !default;
+
+/// CSS Custom Property for the hover-primary token
+$hover-primary: _get('hover-primary') !default;
+
+/// CSS Custom Property for the active-primary token
+$active-primary: _get('active-primary') !default;
+
+/// CSS Custom Property for the hover-primary-text token
+$hover-primary-text: _get('hover-primary-text') !default;
+
+/// CSS Custom Property for the hover-secondary token
+$hover-secondary: _get('hover-secondary') !default;
+
+/// CSS Custom Property for the active-secondary token
+$active-secondary: _get('active-secondary') !default;
+
+/// CSS Custom Property for the hover-tertiary token
+$hover-tertiary: _get('hover-tertiary') !default;
+
+/// CSS Custom Property for the active-tertiary token
+$active-tertiary: _get('active-tertiary') !default;
+
+/// CSS Custom Property for the hover-ui token
+$hover-ui: _get('hover-ui') !default;
+
+/// CSS Custom Property for the hover-light-ui token
+$hover-light-ui: _get('hover-light-ui') !default;
+
+/// CSS Custom Property for the hover-selected-ui token
+$hover-selected-ui: _get('hover-selected-ui') !default;
+
+/// CSS Custom Property for the active-ui token
+$active-ui: _get('active-ui') !default;
+
+/// CSS Custom Property for the active-light-ui token
+$active-light-ui: _get('active-light-ui') !default;
+
+/// CSS Custom Property for the selected-ui token
+$selected-ui: _get('selected-ui') !default;
+
+/// CSS Custom Property for the selected-light-ui token
+$selected-light-ui: _get('selected-light-ui') !default;
+
+/// CSS Custom Property for the inverse-hover-ui token
+$inverse-hover-ui: _get('inverse-hover-ui') !default;
+
+/// CSS Custom Property for the hover-danger token
+$hover-danger: _get('hover-danger') !default;
+
+/// CSS Custom Property for the active-danger token
+$active-danger: _get('active-danger') !default;
+
+/// CSS Custom Property for the hover-row token
+$hover-row: _get('hover-row') !default;
+
+/// CSS Custom Property for the visited-link token
+$visited-link: _get('visited-link') !default;
+
+/// CSS Custom Property for the disabled-01 token
+$disabled-01: _get('disabled-01') !default;
+
+/// CSS Custom Property for the disabled-02 token
+$disabled-02: _get('disabled-02') !default;
+
+/// CSS Custom Property for the disabled-03 token
+$disabled-03: _get('disabled-03') !default;
+
+/// CSS Custom Property for the decorative-01 token
+$decorative-01: _get('decorative-01') !default;
+
+/// CSS Custom Property for the button-separator token
+$button-separator: _get('button-separator') !default;
+
+/// CSS Custom Property for the skeleton-01 token
+$skeleton-01: _get('skeleton-01') !default;
+
+/// CSS Custom Property for the skeleton-02 token
+$skeleton-02: _get('skeleton-02') !default;
+
+/// CSS Custom Property for the hover-field token
+$hover-field: _get('hover-field') !default;

package/src/component-tokens/button/index.js

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+export * as buttonTokens from './tokens';

package/src/component-tokens/button/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.
+ */
+
+const buttonSeparator = {
+  fallback: '#e0e0e0',
+  whiteTheme: '#e0e0e0',
+  g10: '#e0e0e0',
+  g90: '#161616',
+  g100: '#161616',
+};
+
+const buttonPrimary = {
+  whiteTheme: '#0f62fe',
+  g10: '#0f62fe',
+  g90: '#0f62fe',
+  g100: '#0f62fe',
+};
+
+const buttonSecondary = {
+  whiteTheme: '#393939',
+  g10: '#393939',
+  g90: '#6f6f6f',
+  g100: '#6f6f6f',
+};
+
+const buttonTertiary = {
+  whiteTheme: '#0f62fe',
+  g10: '#0f62fe',
+  g90: '#ffffff',
+  g100: '#ffffff',
+};
+
+const buttonDangerPrimary = {
+  whiteTheme: '#da1e28',
+  g10: '#da1e28',
+  g90: '#da1e28',
+  g100: '#da1e28',
+};
+
+const buttonDangerSecondary = {
+  whiteTheme: '#da1e28',
+  g10: '#da1e28',
+  g90: '#ff8389',
+  g100: '#fa4d56',
+};
+
+const buttonDangerActive = {
+  whiteTheme: '#750e13',
+  g10: '#750e13',
+  g90: '#750e13',
+  g100: '#750e13',
+};
+
+const buttonPrimaryActive = {
+  whiteTheme: '#002d9c',
+  g10: '#002d9c',
+  g90: '#002d9c',
+  g100: '#002d9c',
+};
+
+const buttonSecondaryActive = {
+  whiteTheme: '#6f6f6f',
+  g10: '#6f6f6f',
+  g90: '#393939',
+  g100: '#393939',
+};
+
+const buttonTertiaryActive = {
+  whiteTheme: '#002d9c',
+  g10: '#002d9c',
+  g90: '#c6c6c6',
+  g100: '#c6c6c6',
+};
+
+const buttonDangerHover = {
+  whiteTheme: '#b81921',
+  g10: '#b81921',
+  g90: '#b81921',
+  g100: '#b81921',
+};
+
+const buttonPrimaryHover = {
+  whiteTheme: '#0050e6',
+  g10: '#0050e6',
+  g90: '#0050e6',
+  g100: '#0050e6',
+};
+
+const buttonSecondaryHover = {
+  whiteTheme: '#474747',
+  g10: '#474747',
+  g90: '#5e5e5e',
+  g100: '#5e5e5e',
+};
+
+const buttonTertiaryHover = {
+  whiteTheme: '#0050e6',
+  g10: '#0050e6',
+  g90: '#f4f4f4',
+  g100: '#f4f4f4',
+};
+
+const buttonDisabled = {
+  whiteTheme: '#c6c6c6',
+  g10: '#c6c6c6',
+  g90: 'rgb(141 141 141 / 30%)',
+  g100: 'rgb(141 141 141 / 30%)',
+};
+
+export {
+  buttonSeparator,
+  buttonPrimary,
+  buttonSecondary,
+  buttonTertiary,
+  buttonDangerPrimary,
+  buttonDangerSecondary,
+  buttonDangerActive,
+  buttonPrimaryActive,
+  buttonSecondaryActive,
+  buttonTertiaryActive,
+  buttonDangerHover,
+  buttonPrimaryHover,
+  buttonSecondaryHover,
+  buttonTertiaryHover,
+  buttonDisabled,
+};

package/src/component-tokens/notification/index.js

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+export * as notificationTokens from './tokens';

package/src/component-tokens/notification/tokens.js

@@ -0,0 +1,107 @@
+/**
+ * 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 {
+  red10,
+  gray80,
+  gray90,
+  green10,
+  blue10,
+  yellow10,
+  white0,
+} from '@octaviaflow/colors';
+import {
+  textInverse as textInverseWhite,
+  textOnColorDisabled as textOnColorDisabledWhite,
+} from '../../white';
+import {
+  textInverse as textInverseG10,
+  textOnColorDisabled as textOnColorDisabledG10,
+} from '../../g10';
+import {
+  textInverse as textInverseG90,
+  textOnColorDisabled as textOnColorDisabledG90,
+} from '../../g90';
+import {
+  textInverse as textInverseG100,
+  textOnColorDisabled as textOnColorDisabledG100,
+} from '../../g100';
+import {
+  buttonTertiaryActive,
+  buttonTertiaryHover,
+  buttonTertiary,
+} from '../button/tokens';
+
+export const notificationBackgroundError = {
+  whiteTheme: red10,
+  g10: red10,
+  g90: gray80,
+  g100: gray90,
+};
+
+export const notificationBackgroundSuccess = {
+  whiteTheme: green10,
+  g10: green10,
+  g90: gray80,
+  g100: gray90,
+};
+
+export const notificationBackgroundInfo = {
+  whiteTheme: blue10,
+  g10: blue10,
+  g90: gray80,
+  g100: gray90,
+};
+
+export const notificationBackgroundWarning = {
+  whiteTheme: yellow10,
+  g10: yellow10,
+  g90: gray80,
+  g100: gray90,
+};
+
+export const notificationActionHover = {
+  whiteTheme: white0,
+  g10: white0,
+};
+
+export const notificationActionTertiaryInverse = {
+  whiteTheme: buttonTertiary.g100,
+  g10: buttonTertiary.g90,
+  g90: buttonTertiary.g10,
+  g100: buttonTertiary.whiteTheme,
+};
+
+export const notificationActionTertiaryInverseActive = {
+  whiteTheme: buttonTertiaryActive.g100,
+  g10: buttonTertiaryActive.g90,
+  g90: buttonTertiaryActive.g10,
+  g100: buttonTertiaryActive.whiteTheme,
+};
+
+export const notificationActionTertiaryInverseHover = {
+  whiteTheme: buttonTertiaryHover.g100,
+  g10: buttonTertiaryHover.g90,
+  g90: buttonTertiaryHover.g10,
+  g100: buttonTertiaryHover.whiteTheme,
+};
+
+export const notificationActionTertiaryInverseText = {
+  whiteTheme: textInverseG100,
+  g10: textInverseG90,
+  g90: textInverseG10,
+  g100: textInverseWhite,
+};
+
+export const notificationActionTertiaryInverseTextOnColorDisabled = {
+  whiteTheme: textOnColorDisabledG100,
+  g10: textOnColorDisabledG90,
+  g90: textOnColorDisabledG10,
+  g100: textOnColorDisabledWhite,
+};

package/src/component-tokens/tag/index.js

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+export * as tagTokens from './tokens';