@octaviaflow/themes 1.0.1

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

@@ -0,0 +1,362 @@
+/**
+ * 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 {
+  red20,
+  red40,
+  red50,
+  red70,
+  red80,
+  red20Hover,
+  red70Hover,
+  magenta20,
+  magenta40,
+  magenta50,
+  magenta70,
+  magenta80,
+  magenta20Hover,
+  magenta70Hover,
+  purple20,
+  purple40,
+  purple50,
+  purple70,
+  purple80,
+  purple20Hover,
+  purple70Hover,
+  blue20,
+  blue40,
+  blue50,
+  blue70,
+  blue80,
+  blue20Hover,
+  blue70Hover,
+  cyan20,
+  cyan40,
+  cyan50,
+  cyan70,
+  cyan80,
+  cyan20Hover,
+  cyan70Hover,
+  teal20,
+  teal40,
+  teal50,
+  teal70,
+  teal80,
+  teal20Hover,
+  teal70Hover,
+  green20,
+  green40,
+  green50,
+  green70,
+  green80,
+  green20Hover,
+  green70Hover,
+  gray10,
+  gray20,
+  gray40,
+  gray50,
+  gray70,
+  gray100,
+  gray20Hover,
+  gray70Hover,
+  warmGray10,
+  warmGray20,
+  warmGray40,
+  warmGray50,
+  warmGray70,
+  warmGray100,
+  warmGray20Hover,
+  warmGray70Hover,
+  coolGray10,
+  coolGray20,
+  coolGray40,
+  coolGray50,
+  coolGray70,
+  coolGray100,
+  coolGray20Hover,
+  coolGray70Hover,
+} from '@octaviaflow/colors';
+
+export const tagBackgroundRed = {
+  whiteTheme: red20,
+  g10: red20,
+  g90: red70,
+  g100: red70,
+};
+
+export const tagColorRed = {
+  whiteTheme: red70,
+  g10: red70,
+  g90: red20,
+  g100: red20,
+};
+
+export const tagHoverRed = {
+  whiteTheme: red20Hover,
+  g10: red20Hover,
+  g90: red70Hover,
+  g100: red70Hover,
+};
+
+export const tagBackgroundMagenta = {
+  whiteTheme: magenta20,
+  g10: magenta20,
+  g90: magenta70,
+  g100: magenta70,
+};
+
+export const tagColorMagenta = {
+  whiteTheme: magenta70,
+  g10: magenta70,
+  g90: magenta20,
+  g100: magenta20,
+};
+
+export const tagHoverMagenta = {
+  whiteTheme: magenta20Hover,
+  g10: magenta20Hover,
+  g90: magenta70Hover,
+  g100: magenta70Hover,
+};
+
+export const tagBackgroundPurple = {
+  whiteTheme: purple20,
+  g10: purple20,
+  g90: purple70,
+  g100: purple70,
+};
+
+export const tagColorPurple = {
+  whiteTheme: purple70,
+  g10: purple70,
+  g90: purple20,
+  g100: purple20,
+};
+
+export const tagHoverPurple = {
+  whiteTheme: purple20Hover,
+  g10: purple20Hover,
+  g90: purple70Hover,
+  g100: purple70Hover,
+};
+
+export const tagBackgroundBlue = {
+  whiteTheme: blue20,
+  g10: blue20,
+  g90: blue70,
+  g100: blue70,
+};
+
+export const tagColorBlue = {
+  whiteTheme: blue70,
+  g10: blue70,
+  g90: blue20,
+  g100: blue20,
+};
+
+export const tagHoverBlue = {
+  whiteTheme: blue20Hover,
+  g10: blue20Hover,
+  g90: blue70Hover,
+  g100: blue70Hover,
+};
+
+export const tagBackgroundCyan = {
+  whiteTheme: cyan20,
+  g10: cyan20,
+  g90: cyan70,
+  g100: cyan70,
+};
+
+export const tagColorCyan = {
+  whiteTheme: cyan70,
+  g10: cyan70,
+  g90: cyan20,
+  g100: cyan20,
+};
+
+export const tagHoverCyan = {
+  whiteTheme: cyan20Hover,
+  g10: cyan20Hover,
+  g90: cyan70Hover,
+  g100: cyan70Hover,
+};
+export const tagBackgroundTeal = {
+  whiteTheme: teal20,
+  g10: teal20,
+  g90: teal70,
+  g100: teal70,
+};
+export const tagColorTeal = {
+  whiteTheme: teal70,
+  g10: teal70,
+  g90: teal20,
+  g100: teal20,
+};
+
+export const tagHoverTeal = {
+  whiteTheme: teal20Hover,
+  g10: teal20Hover,
+  g90: teal70Hover,
+  g100: teal70Hover,
+};
+
+export const tagBackgroundGreen = {
+  whiteTheme: green20,
+  g10: green20,
+  g90: green70,
+  g100: green70,
+};
+
+export const tagColorGreen = {
+  whiteTheme: green70,
+  g10: green70,
+  g90: green20,
+  g100: green20,
+};
+
+export const tagHoverGreen = {
+  whiteTheme: green20Hover,
+  g10: green20Hover,
+  g90: green70Hover,
+  g100: green70Hover,
+};
+
+export const tagBackgroundGray = {
+  whiteTheme: gray20,
+  g10: gray20,
+  g90: gray70,
+  g100: gray70,
+};
+
+export const tagColorGray = {
+  whiteTheme: gray100,
+  g10: gray100,
+  g90: gray10,
+  g100: gray10,
+};
+
+export const tagHoverGray = {
+  whiteTheme: gray20Hover,
+  g10: gray20Hover,
+  g90: gray70Hover,
+  g100: gray70Hover,
+};
+
+export const tagBackgroundCoolGray = {
+  whiteTheme: coolGray20,
+  g10: coolGray20,
+  g90: coolGray70,
+  g100: coolGray70,
+};
+
+export const tagColorCoolGray = {
+  whiteTheme: coolGray100,
+  g10: coolGray100,
+  g90: coolGray10,
+  g100: coolGray10,
+};
+
+export const tagHoverCoolGray = {
+  whiteTheme: coolGray20Hover,
+  g10: coolGray20Hover,
+  g90: coolGray70Hover,
+  g100: coolGray70Hover,
+};
+
+export const tagBackgroundWarmGray = {
+  whiteTheme: warmGray20,
+  g10: warmGray20,
+  g90: warmGray70,
+  g100: warmGray70,
+};
+
+export const tagColorWarmGray = {
+  whiteTheme: warmGray100,
+  g10: warmGray100,
+  g90: warmGray10,
+  g100: warmGray10,
+};
+
+export const tagHoverWarmGray = {
+  whiteTheme: warmGray20Hover,
+  g10: warmGray20Hover,
+  g90: warmGray70Hover,
+  g100: warmGray70Hover,
+};
+
+export const tagBorderRed = {
+  whiteTheme: red40,
+  g10: red40,
+  g90: red50,
+  g100: red50,
+};
+
+export const tagBorderBlue = {
+  whiteTheme: blue40,
+  g10: blue40,
+  g90: blue50,
+  g100: blue50,
+};
+
+export const tagBorderCyan = {
+  whiteTheme: cyan40,
+  g10: cyan40,
+  g90: cyan50,
+  g100: cyan50,
+};
+
+export const tagBorderTeal = {
+  whiteTheme: teal40,
+  g10: teal40,
+  g90: teal50,
+  g100: teal50,
+};
+
+export const tagBorderGreen = {
+  whiteTheme: green40,
+  g10: green40,
+  g90: green50,
+  g100: green50,
+};
+
+export const tagBorderMagenta = {
+  whiteTheme: magenta40,
+  g10: magenta40,
+  g90: magenta50,
+  g100: magenta50,
+};
+
+export const tagBorderPurple = {
+  whiteTheme: purple40,
+  g10: purple40,
+  g90: purple50,
+  g100: purple50,
+};
+
+export const tagBorderGray = {
+  whiteTheme: gray40,
+  g10: gray40,
+  g90: gray50,
+  g100: gray50,
+};
+
+export const tagBorderCoolGray = {
+  whiteTheme: coolGray40,
+  g10: coolGray40,
+  g90: coolGray50,
+  g100: coolGray50,
+};
+
+export const tagBorderWarmGray = {
+  whiteTheme: warmGray40,
+  g10: warmGray40,
+  g90: warmGray50,
+  g100: warmGray50,
+};

package/src/g10.js

@@ -0,0 +1,346 @@
+/**
+ * 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 {
+  // Blue
+  blue10,
+  blue20,
+  blue30,
+  blue40,
+  blue60,
+  blue70,
+  blue100,
+
+  // Gray
+  gray10,
+  gray10Hover,
+  gray20,
+  gray20Hover,
+  gray30,
+  gray40,
+  gray50,
+  gray60,
+  gray70,
+  gray80,
+  gray80Hover,
+  gray100,
+
+  // Support
+  blue50,
+  green40,
+  green50,
+  yellow30,
+  orange40,
+  red50,
+  red60,
+  purple60,
+  purple40,
+
+  // Constants
+  black,
+  white,
+  whiteHover,
+  rgba,
+} from '@octaviaflow/colors';
+import { adjustAlpha } from './tools';
+
+// Background
+export const background = gray10;
+export const backgroundInverse = gray80;
+export const backgroundBrand = blue60;
+export const backgroundActive = adjustAlpha(gray50, 0.5);
+export const backgroundHover = adjustAlpha(gray50, 0.12);
+export const backgroundInverseHover = gray80Hover;
+export const backgroundSelected = adjustAlpha(gray50, 0.2);
+export const backgroundSelectedHover = adjustAlpha(gray50, 0.32);
+
+// Layer
+// layer-01
+export const layer01 = white;
+export const layerActive01 = gray30;
+export const layerHover01 = whiteHover;
+export const layerSelected01 = gray20;
+export const layerSelectedHover01 = gray20Hover;
+
+// layer-02
+export const layer02 = gray10;
+export const layerActive02 = gray30;
+export const layerHover02 = gray10Hover;
+export const layerSelected02 = gray20;
+export const layerSelectedHover02 = gray20Hover;
+
+// layer-03
+export const layer03 = white;
+export const layerActive03 = gray30;
+export const layerHover03 = whiteHover;
+export const layerSelected03 = gray20;
+export const layerSelectedHover03 = gray20Hover;
+
+// layer
+export const layerSelectedInverse = gray100;
+export const layerSelectedDisabled = gray50;
+
+// layer-accent-01
+export const layerAccent01 = gray20;
+export const layerAccentActive01 = gray40;
+export const layerAccentHover01 = gray20Hover;
+
+// layer-accent-02
+export const layerAccent02 = gray20;
+export const layerAccentActive02 = gray40;
+export const layerAccentHover02 = gray20Hover;
+
+// layer-accent-03
+export const layerAccent03 = gray20;
+export const layerAccentActive03 = gray40;
+export const layerAccentHover03 = gray20Hover;
+
+// Field
+// field-01
+export const field01 = white;
+export const fieldHover01 = whiteHover;
+
+// field-02
+export const field02 = gray10;
+export const fieldHover02 = gray10Hover;
+
+// field-03
+export const field03 = white;
+export const fieldHover03 = whiteHover;
+
+// Border
+// border-subtle-00
+export const borderSubtle00 = gray30;
+
+// border-subtle-01
+export const borderSubtle01 = gray20;
+export const borderSubtleSelected01 = gray30;
+
+// border-subtle-02
+export const borderSubtle02 = gray30;
+export const borderSubtleSelected02 = gray30;
+
+// border-subtle-03
+export const borderSubtle03 = gray20;
+export const borderSubtleSelected03 = gray30;
+
+// border-strong
+export const borderStrong01 = gray50;
+export const borderStrong02 = gray50;
+export const borderStrong03 = gray50;
+
+// border-tile
+export const borderTile01 = gray40;
+export const borderTile02 = gray30;
+export const borderTile03 = gray40;
+
+// border-inverse
+export const borderInverse = gray100;
+
+// border-interactive
+export const borderInteractive = blue60;
+
+// border
+export const borderDisabled = gray30;
+
+// Text
+export const textPrimary = gray100;
+export const textSecondary = gray70;
+export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
+export const textHelper = gray60;
+export const textError = red60;
+export const textInverse = white;
+export const textOnColor = white;
+export const textOnColorDisabled = gray50;
+export const textDisabled = adjustAlpha(textPrimary, 0.25);
+
+// Link
+export const linkPrimary = blue60;
+export const linkPrimaryHover = blue70;
+export const linkSecondary = blue70;
+export const linkInverse = blue40;
+export const linkVisited = purple60;
+export const linkInverseVisited = purple40;
+export const linkInverseActive = gray10;
+export const linkInverseHover = blue30;
+
+// Icon
+export const iconPrimary = gray100;
+export const iconSecondary = gray70;
+export const iconInverse = white;
+export const iconOnColor = white;
+export const iconOnColorDisabled = gray50;
+export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
+export const iconInteractive = blue60;
+
+// Support
+export const supportError = red60;
+export const supportSuccess = green50;
+export const supportWarning = yellow30;
+export const supportInfo = blue70;
+export const supportErrorInverse = red50;
+export const supportSuccessInverse = green40;
+export const supportWarningInverse = yellow30;
+export const supportInfoInverse = blue50;
+export const supportCautionMinor = yellow30;
+export const supportCautionMajor = orange40;
+export const supportCautionUndefined = purple60;
+
+// Focus
+export const focus = blue60;
+export const focusInset = white;
+export const focusInverse = white;
+
+// Skeleton
+export const skeletonBackground = gray10Hover;
+export const skeletonElement = gray30;
+
+// Misc
+export const interactive = blue60;
+export const highlight = blue20;
+export const overlay = 'rgba(22, 22, 22, 0.5)';
+export const toggleOff = gray50;
+export const shadow = 'rgba(0, 0, 0, 0.3)';
+
+//// AI - Experimental (Use at your own risk)
+//// Phase 2 - new \\\\
+// Shared
+export const aiInnerShadow = rgba(blue50, 0.1);
+export const aiAuraStartSm = rgba(blue50, 0.16);
+export const aiAuraStart = rgba(blue50, 0.1);
+export const aiAuraEnd = rgba(white, 0);
+export const aiBorderStrong = blue50;
+export const aiBorderStart = rgba(blue30, 0.64);
+export const aiBorderEnd = blue40;
+export const aiDropShadow = rgba(blue60, 0.1);
+export const aiAuraHoverBackground = blue10;
+export const aiAuraHoverStart = rgba(blue50, 0.32);
+export const aiAuraHoverEnd = rgba(white, 0);
+
+// AI Popover
+export const aiPopoverBackground = white;
+export const aiPopoverShadowOuter01 = rgba(blue70, 0.06);
+export const aiPopoverShadowOuter02 = rgba(black, 0.04);
+
+// AI skeleton
+export const aiSkeletonBackground = blue20;
+export const aiSkeletonElementBackground = blue50;
+
+// AI Modal tokens
+export const aiOverlay = rgba(blue100, 0.5);
+
+// One off tokens for caret
+export const aiPopoverCaretCenter = '#A0C3FF';
+export const aiPopoverCaretBottom = blue40;
+export const aiPopoverCaretBottomBackgroundActions = '#E9EFFA';
+export const aiPopoverCaretBottomBackground = '#EAF1FF';
+
+// Chat tokens
+export const chatPromptBackground = white;
+export const chatPromptBorderStart = gray10;
+export const chatPromptBorderEnd = rgba(gray10, 0);
+export const chatBubbleUser = gray20;
+export const chatBubbleAgent = white;
+export const chatBubbleBorder = gray20;
+export const chatAvatarBot = gray60;
+export const chatAvatarAgent = gray80;
+export const chatAvatarUser = blue60;
+export const chatShellBackground = white;
+export const chatHeaderBackground = white;
+
+// Chat button tokens
+export const chatButton = linkPrimary;
+export const chatButtonHover = backgroundHover;
+export const chatButtonTextHover = linkPrimaryHover;
+export const chatButtonActive = backgroundActive;
+export const chatButtonSelected = backgroundSelected;
+export const chatButtonTextSelected = textSecondary;
+
+export {
+  // Type
+  caption01,
+  caption02,
+  label01,
+  label02,
+  helperText01,
+  helperText02,
+  bodyShort01,
+  bodyLong01,
+  bodyShort02,
+  bodyLong02,
+  code01,
+  code02,
+  heading01,
+  productiveHeading01,
+  heading02,
+  productiveHeading02,
+  productiveHeading03,
+  productiveHeading04,
+  productiveHeading05,
+  productiveHeading06,
+  productiveHeading07,
+  expressiveHeading01,
+  expressiveHeading02,
+  expressiveHeading03,
+  expressiveHeading04,
+  expressiveHeading05,
+  expressiveHeading06,
+  expressiveParagraph01,
+  quotation01,
+  quotation02,
+  display01,
+  display02,
+  display03,
+  display04,
+  // Layout
+  // Spacing
+  spacing01,
+  spacing02,
+  spacing03,
+  spacing04,
+  spacing05,
+  spacing06,
+  spacing07,
+  spacing08,
+  spacing09,
+  spacing10,
+  spacing11,
+  spacing12,
+  spacing13,
+  // Fluid spacing
+  fluidSpacing01,
+  fluidSpacing02,
+  fluidSpacing03,
+  fluidSpacing04,
+  // Containers
+  container01,
+  container02,
+  container03,
+  container04,
+  container05,
+  sizeXSmall,
+  sizeSmall,
+  sizeMedium,
+  sizeLarge,
+  sizeXLarge,
+  size2XLarge,
+  // Icon sizes
+  iconSize01,
+  iconSize02,
+  // Layout
+  // Deprecated ☠️
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
+} from './white';