Snapshots renders a disabled Radio correctly 1`] = `
exports[`
Snapshots renders a simple Radio correctly 1`] = `
diff --git a/packages/flame/themes/helios/colors.ts b/packages/flame/themes/helios/colors.ts
new file mode 100644
index 00000000..64f1896c
--- /dev/null
+++ b/packages/flame/themes/helios/colors.ts
@@ -0,0 +1,146 @@
+import { lightspeedTheme } from '@lightspeed/flame-tokens';
+// @ts-ignore - unified-tokens types may not be fully resolved in this context
+import { lsColorLightTheme } from '@lightspeed/unified-tokens/helios';
+
+const themeColors = lightspeedTheme.colors;
+
+// Helper to remove alpha channel from token values (FF suffix)
+const getColorValue = (tokenValue: string): string => {
+ return tokenValue.replace(/FF$/, '');
+};
+
+// Helios 2.0 Color System - Using tokens from @lightspeed/unified-tokens/helios
+// Maps unified-tokens names to Flame theme color names
+const tokenMapping: Record
= {
+ 'helios-go-default': 'bgGoDefault',
+ 'helios-go-soft': 'bgGoSoft',
+ 'helios-go-strong': 'bgGoStrong',
+ 'helios-no-default': 'bgNoDefault',
+ 'helios-no-soft': 'bgNoSoft',
+ 'helios-no-strong': 'bgNoStrong',
+ 'helios-success-default': 'bgSuccessDefault',
+ 'helios-success-soft': 'bgSuccessSoft',
+ 'helios-success-strong': 'bgSuccessStrong',
+ 'helios-warning-default': 'bgWarningDefault',
+ 'helios-warning-soft': 'bgWarningSoft',
+ 'helios-warning-strong': 'bgWarningStrong',
+ 'helios-supplementary-default': 'bgSupplementaryDefault',
+ 'helios-supplementary-soft': 'bgSupplementarySoft',
+ 'helios-supplementary-strong': 'bgSupplementaryStrong',
+ 'helios-neutral-dark': 'fgNeutralDefault',
+ 'helios-neutral-soft': 'fgNeutralSoft',
+ 'helios-neutral-inert': 'fgNeutralInertDefault',
+ 'helios-neutral-edge': 'bgNeutralEdge',
+ 'helios-neutral-backdrop': 'bgNeutralBackdrop',
+ 'helios-neutral-ondark-default': 'fgNeutralOndarkDefault',
+ // Highlight colors for badges and alerts
+ 'helios-overlay-neutral-soft': 'overlayNeutralSoft',
+ 'helios-overlay-neutral-strong': 'overlayNeutralStrong',
+ 'helios-go-highlight-strong': 'bgGoHighlightStrong',
+ 'helios-go-strong-fg': 'fgGoStrong',
+ 'helios-success-highlight-strong': 'bgSuccessHighlightStrong',
+ 'helios-success-strong-fg': 'fgSuccessStrong',
+ 'helios-warning-highlight-strong': 'bgWarningHighlightStrong',
+ 'helios-warning-strong-fg': 'fgWarningStrong',
+ 'helios-no-highlight-strong': 'bgNoHighlightStrong',
+ 'helios-no-strong-fg': 'fgNoStrong',
+ // Border colors
+ 'helios-border-neutral-soft': 'borderNeutralSoft',
+ 'helios-border-neutral-strong': 'borderNeutralStrong',
+ 'helios-border-go-default': 'borderGoDefault',
+ 'helios-border-success-default': 'borderSuccessDefault',
+ 'helios-border-no-default': 'borderNoDefault',
+ 'helios-border-warning-default': 'borderWarningDefault',
+ // Foreground colors
+ 'helios-fg-go-default': 'fgGoDefault',
+ 'helios-fg-success-default': 'fgSuccessDefault',
+ 'helios-fg-no-default': 'fgNoDefault',
+ 'helios-fg-warning-default': 'fgWarningDefault',
+ 'helios-fg-supplementary-default': 'fgSupplementaryDefault',
+ // Background colors
+ 'helios-bg-neutral-inert-softer': 'bgNeutralInertSofter',
+ 'helios-bg-neutral-inverted-top': 'bgNeutralInvertedTop',
+};
+
+const heliosColors = Object.keys(tokenMapping).reduce((acc, flameName) => {
+ acc[flameName] = getColorValue(lsColorLightTheme[tokenMapping[flameName]]);
+ return acc;
+}, {} as Record);
+
+// Mapping from flame-tokens color names to Helios equivalents
+// This provides backward compatibility for components using the old color names
+const flameTokensToHeliosMapping: Record = {
+ // Maple (red/danger) → Helios "No" colors
+ maple: heliosColors['helios-no-default'],
+ 'maple-100': heliosColors['helios-no-soft'],
+ 'maple-200': heliosColors['helios-no-default'],
+ 'maple-300': heliosColors['helios-no-strong'],
+ // Blue (primary) → Helios "Go" colors (primary action)
+ blue: heliosColors['helios-go-default'],
+ 'blue-100': heliosColors['helios-go-soft'],
+ 'blue-200': heliosColors['helios-go-default'],
+ 'blue-300': heliosColors['helios-go-strong'],
+ // Green (success) → Helios "Success" colors
+ green: heliosColors['helios-success-default'],
+ 'green-100': heliosColors['helios-success-soft'],
+ 'green-200': heliosColors['helios-success-default'],
+ 'green-300': heliosColors['helios-success-strong'],
+ // Orange (warning) → Helios "Warning" colors
+ orange: heliosColors['helios-warning-default'],
+ 'orange-100': heliosColors['helios-warning-soft'],
+ 'orange-200': heliosColors['helios-warning-default'],
+ 'orange-300': heliosColors['helios-warning-strong'],
+ // Yellow (warning/attention) → Helios "Warning" colors
+ yellow: heliosColors['helios-warning-default'],
+ 'yellow-100': heliosColors['helios-warning-soft'],
+ 'yellow-200': heliosColors['helios-warning-default'],
+ 'yellow-300': heliosColors['helios-warning-strong'],
+ // Gray (neutral) → Helios neutral colors
+ gray: heliosColors['helios-neutral-dark'],
+ 'gray-100': heliosColors['helios-neutral-soft'],
+ 'gray-200': heliosColors['helios-neutral-inert'],
+ 'gray-300': heliosColors['helios-neutral-edge'],
+ // Seal (darker gray) → Helios neutral colors
+ seal: heliosColors['helios-neutral-dark'],
+ 'seal-100': heliosColors['helios-neutral-soft'],
+ 'seal-200': heliosColors['helios-neutral-inert'],
+ 'seal-300': heliosColors['helios-neutral-edge'],
+ // Dive (dark blue) → Helios "Supplementary" colors
+ dive: heliosColors['helios-supplementary-default'],
+ 'dive-100': heliosColors['helios-supplementary-soft'],
+ 'dive-200': heliosColors['helios-supplementary-default'],
+ 'dive-300': heliosColors['helios-supplementary-strong'],
+ // Night (very dark/black) → Helios neutral dark
+ night: heliosColors['helios-neutral-dark'],
+ 'night-100': heliosColors['helios-neutral-soft'],
+ 'night-200': heliosColors['helios-neutral-dark'],
+ 'night-300': heliosColors['helios-neutral-ondark-default'],
+ // Snow (white) → white
+ snow: themeColors.white,
+ 'snow-100': themeColors.white,
+ 'snow-200': heliosColors['helios-neutral-backdrop'],
+ 'snow-300': heliosColors['helios-neutral-edge'],
+};
+
+const aliases: ColorAliases = {
+ primary: heliosColors['helios-go-default'], // Helios "Go" color
+ secondary: heliosColors['helios-supplementary-default'], // Helios "Supplementary" color
+ danger: heliosColors['helios-no-default'], // Helios "No" color
+ warning: heliosColors['helios-warning-default'],
+ white: themeColors.white,
+ textBody: heliosColors['helios-neutral-dark'], // Helios neutral dark
+ textHeading: themeColors['gray-1000'],
+ textDimmed: heliosColors['helios-neutral-soft'],
+ dimmed: heliosColors['helios-neutral-edge'],
+ disabled: heliosColors['helios-neutral-inert'],
+ bodyBg: themeColors.white, // Clean white background
+};
+
+const colors = {
+ ...themeColors,
+ ...heliosColors,
+ ...flameTokensToHeliosMapping,
+ ...aliases,
+};
+
+export { colors };
diff --git a/packages/flame/themes/helios/components/alert.ts b/packages/flame/themes/helios/components/alert.ts
new file mode 100644
index 00000000..4b4c1528
--- /dev/null
+++ b/packages/flame/themes/helios/components/alert.ts
@@ -0,0 +1,69 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Alert Styles - Light, subtle backgrounds with colored borders
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+// Alerts use highlight backgrounds (16% opacity) with semantic border colors
+const alertVariants: AlertVariants = {
+ success: {
+ background: (colors as Record)['helios-success-highlight-strong'],
+ borderColor: (colors as Record)['helios-border-success-default'],
+ '.fl-alert__icon svg': {
+ fill: (colors as Record)['helios-fg-success-default'],
+ },
+ },
+ info: {
+ background: (colors as Record)['helios-go-highlight-strong'],
+ borderColor: (colors as Record)['helios-border-go-default'],
+ '.fl-alert__icon svg': {
+ fill: (colors as Record)['helios-fg-go-default'],
+ },
+ },
+ danger: {
+ background: (colors as Record)['helios-no-highlight-strong'],
+ borderColor: (colors as Record)['helios-border-no-default'],
+ '.fl-alert__icon svg': {
+ fill: (colors as Record)['helios-fg-no-default'],
+ },
+ },
+ warning: {
+ background: (colors as Record)['helios-warning-highlight-strong'],
+ borderColor: (colors as Record)['helios-border-warning-default'],
+ '.fl-alert__icon svg': {
+ fill: (colors as Record)['helios-fg-warning-default'],
+ },
+ },
+};
+
+// AlertInCard variants - using slightly less opacity for in-card context
+const alertInCardVariants = {
+ success: {
+ bg: (colors as Record)['helios-success-highlight-strong'],
+ borderColor: (colors as Record)['helios-success-highlight-strong'],
+ '.fl-alert__icon svg': {
+ fill: (colors as Record)['helios-success-strong'],
+ },
+ },
+ info: {
+ bg: (colors as Record)['helios-go-highlight-strong'],
+ borderColor: (colors as Record)['helios-go-highlight-strong'],
+ '.fl-alert__icon svg': {
+ fill: (colors as Record)['helios-go-strong'],
+ },
+ },
+ danger: {
+ bg: (colors as Record)['helios-no-highlight-strong'],
+ borderColor: (colors as Record)['helios-no-highlight-strong'],
+ '.fl-alert__icon svg': {
+ fill: (colors as Record)['helios-no-strong'],
+ },
+ },
+ warning: {
+ bg: (colors as Record)['helios-warning-highlight-strong'],
+ borderColor: (colors as Record)['helios-warning-highlight-strong'],
+ '.fl-alert__icon svg': {
+ fill: (colors as Record)['helios-warning-strong'],
+ },
+ },
+};
+
+export { alertVariants, alertInCardVariants };
diff --git a/packages/flame/themes/helios/components/badge.ts b/packages/flame/themes/helios/components/badge.ts
new file mode 100644
index 00000000..1a2d7183
--- /dev/null
+++ b/packages/flame/themes/helios/components/badge.ts
@@ -0,0 +1,74 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Badge Styles - Exact match with unified-components
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+// These use transparent backgrounds with alpha channel for subtle appearance
+const badgeVariants: BadgeVariants = {
+ default: {
+ // bg-overlay-neutral-soft + text-neutral-default
+ backgroundColor: (colors as Record)['helios-overlay-neutral-soft'],
+ color: (colors as Record)['helios-neutral-dark'],
+ },
+ success: {
+ // bg-success-highlight-strong + text-success-strong
+ backgroundColor: (colors as Record)['helios-success-highlight-strong'],
+ color: (colors as Record)['helios-success-strong-fg'],
+ },
+ warning: {
+ // bg-warning-highlight-strong + text-warning-strong
+ backgroundColor: (colors as Record)['helios-warning-highlight-strong'],
+ color: (colors as Record)['helios-warning-strong-fg'],
+ },
+ danger: {
+ // bg-no-highlight-strong + text-no-strong
+ backgroundColor: (colors as Record)['helios-no-highlight-strong'],
+ color: (colors as Record)['helios-no-strong-fg'],
+ },
+ info: {
+ // bg-go-highlight-strong + text-go-strong
+ backgroundColor: (colors as Record)['helios-go-highlight-strong'],
+ color: (colors as Record)['helios-go-strong-fg'],
+ },
+ important: {
+ // Same as info in Helios
+ backgroundColor: (colors as Record)['helios-go-highlight-strong'],
+ color: (colors as Record)['helios-go-strong-fg'],
+ },
+};
+
+// Next badge variants - matching Helios 2.0 (no borders, just backgrounds)
+// Helios uses shadow-transparent instead of borders, so we set border to 0
+const nextBadgeVariants = {
+ danger: {
+ bg: (colors as Record)['helios-no-highlight-strong'],
+ borderWidth: '0',
+ border: '0',
+ color: (colors as Record)['helios-no-strong-fg'],
+ },
+ default: {
+ bg: (colors as Record)['helios-overlay-neutral-soft'],
+ borderWidth: '0',
+ border: '0',
+ color: (colors as Record)['helios-neutral-dark'],
+ },
+ primary: {
+ bg: (colors as Record)['helios-go-highlight-strong'],
+ borderWidth: '0',
+ border: '0',
+ color: (colors as Record)['helios-go-strong-fg'],
+ },
+ success: {
+ bg: (colors as Record)['helios-success-highlight-strong'],
+ borderWidth: '0',
+ border: '0',
+ color: (colors as Record)['helios-success-strong-fg'],
+ },
+ warning: {
+ bg: (colors as Record)['helios-warning-highlight-strong'],
+ borderWidth: '0',
+ border: '0',
+ color: (colors as Record)['helios-warning-strong-fg'],
+ },
+};
+
+export { badgeVariants, nextBadgeVariants };
diff --git a/packages/flame/themes/helios/components/bone.ts b/packages/flame/themes/helios/components/bone.ts
new file mode 100644
index 00000000..a3e2db61
--- /dev/null
+++ b/packages/flame/themes/helios/components/bone.ts
@@ -0,0 +1,10 @@
+// Helios 2.0 Bone (Skeleton) Styles - Exact match with unified-components
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+// Skeleton components use 10% opacity of bg-neutral-inverted-top
+const boneStyles: BoneStyles = {
+ // Note: bg-neutral-inverted-top is #242427, 10% opacity = #2424271A
+ // This is a derived value, keeping as-is for now since unified-tokens doesn't export this specific variant
+ background: '#2424271A', // rgba(36, 36, 39, 0.1) - 10% opacity of bg-neutral-inverted-top
+};
+
+export { boneStyles };
diff --git a/packages/flame/themes/helios/components/button.ts b/packages/flame/themes/helios/components/button.ts
new file mode 100644
index 00000000..e9734365
--- /dev/null
+++ b/packages/flame/themes/helios/components/button.ts
@@ -0,0 +1,196 @@
+import { colors } from '../colors';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record)[key];
+
+// Helios 2.0 Button Styles - Exact match with unified-components
+// Key features: flat colors (no gradients), no borders (border-none, shadow-transparent)
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const buttonVariants: ButtonVariants = {
+ fill: {
+ primary: {
+ backgroundImage: 'none',
+ backgroundColor: getColor('helios-go-default'), // #3A1AFE (bgGoDefault)
+ borderColor: getColor('helios-go-default'), // Match bg for seamless look
+ color: colors.white,
+ '&:hover': {
+ color: colors.white,
+ backgroundColor: getColor('helios-go-soft'), // #4E58FD (bgGoSoft)
+ backgroundImage: 'none',
+ borderColor: getColor('helios-go-soft'),
+ },
+ '&:active': {
+ backgroundColor: getColor('helios-go-strong'), // #2B13C7 (bgGoStrong)
+ borderColor: getColor('helios-go-strong'),
+ boxShadow: 'none',
+ },
+ },
+ secondary: {
+ backgroundImage: 'none',
+ backgroundColor: getColor('helios-supplementary-default'), // #365B85 (bgSupplementaryDefault)
+ borderColor: getColor('helios-supplementary-default'),
+ color: colors.white,
+ '&:hover': {
+ color: colors.white,
+ backgroundColor: getColor('helios-supplementary-soft'), // #5177A2 (bgSupplementarySoft)
+ backgroundImage: 'none',
+ borderColor: getColor('helios-supplementary-soft'),
+ },
+ '&:active': {
+ backgroundColor: getColor('helios-supplementary-strong'), // #193F66 (bgSupplementaryStrong)
+ borderColor: getColor('helios-supplementary-strong'),
+ boxShadow: 'none',
+ },
+ },
+ danger: {
+ backgroundImage: 'none',
+ backgroundColor: getColor('helios-no-default'), // #AA2128 (bgNoDefault)
+ borderColor: getColor('helios-no-default'),
+ color: colors.white,
+ '&:hover': {
+ color: colors.white,
+ backgroundColor: getColor('helios-no-soft'), // #D3202F (bgNoSoft)
+ backgroundImage: 'none',
+ borderColor: getColor('helios-no-soft'),
+ },
+ '&:active': {
+ backgroundColor: getColor('helios-no-strong'), // #801617 (bgNoStrong)
+ borderColor: getColor('helios-no-strong'),
+ boxShadow: 'none',
+ },
+ },
+ neutral: {
+ backgroundImage: 'none',
+ backgroundColor: colors.white,
+ borderColor: getColor('helios-neutral-edge'),
+ color: colors.textBody,
+ '&:hover': {
+ color: colors.textBody,
+ backgroundColor: getColor('helios-neutral-backdrop'), // #F1F2F7
+ backgroundImage: 'none',
+ borderColor: getColor('helios-neutral-edge'),
+ },
+ '&:active': {
+ backgroundColor: getColor('helios-neutral-edge'), // #E3E4E9
+ borderColor: getColor('helios-neutral-edge'),
+ boxShadow: 'none',
+ },
+ },
+ },
+ // Outline variants styled as "ghost" buttons (Helios 2.0 ghost-primary/ghost-danger/ghost-secondary)
+ // Ghost buttons: transparent bg initially, colored text, fill on hover with white text
+ outline: {
+ primary: {
+ color: getColor('helios-go-default'), // Colored text initially
+ backgroundColor: 'transparent',
+ borderColor: 'transparent',
+ backgroundImage: 'none',
+ '&:hover': {
+ backgroundColor: getColor('helios-go-default'), // Fill with color on hover
+ color: colors.white, // Text becomes white
+ boxShadow: 'none',
+ backgroundImage: 'none',
+ },
+ '&:active': {
+ backgroundColor: getColor('helios-go-strong'), // Darker on active
+ color: colors.white,
+ backgroundImage: 'none',
+ boxShadow: 'none',
+ },
+ },
+ secondary: {
+ color: getColor('helios-supplementary-default'),
+ backgroundColor: 'transparent',
+ borderColor: 'transparent',
+ backgroundImage: 'none',
+ '&:hover': {
+ backgroundColor: getColor('helios-supplementary-default'),
+ color: colors.white,
+ boxShadow: 'none',
+ backgroundImage: 'none',
+ },
+ '&:active': {
+ backgroundColor: getColor('helios-supplementary-strong'),
+ color: colors.white,
+ backgroundImage: 'none',
+ boxShadow: 'none',
+ },
+ },
+ danger: {
+ color: getColor('helios-no-default'),
+ backgroundColor: 'transparent',
+ borderColor: 'transparent',
+ backgroundImage: 'none',
+ '&:hover': {
+ backgroundColor: getColor('helios-no-default'),
+ color: colors.white,
+ boxShadow: 'none',
+ backgroundImage: 'none',
+ },
+ '&:active': {
+ backgroundColor: getColor('helios-no-strong'),
+ color: colors.white,
+ backgroundImage: 'none',
+ boxShadow: 'none',
+ },
+ },
+ },
+};
+
+// Button icon colors - white on filled buttons, colored on ghost/outline buttons
+const buttonIconVariants: ButtonIconVariants = {
+ fill: {
+ primary: {
+ fill: colors.white, // White icons on filled buttons
+ color: colors.white,
+ '.cr-icon__details-2': {
+ color: colors.white,
+ fill: colors.white,
+ },
+ },
+ secondary: {
+ fill: colors.white,
+ color: colors.white,
+ '.cr-icon__details-2': {
+ color: colors.white,
+ fill: colors.white,
+ },
+ },
+ danger: {
+ fill: colors.white,
+ color: colors.white,
+ '.cr-icon__details-2': {
+ color: colors.white,
+ fill: colors.white,
+ },
+ },
+ neutral: {
+ fill: colors.textBody, // Dark icons on neutral (white bg)
+ color: colors.textBody,
+ '.cr-icon__details-2': {
+ color: colors.textBody,
+ fill: colors.textBody,
+ },
+ },
+ },
+ outline: {
+ primary: {
+ fill: getColor('helios-go-default'), // Colored icons on ghost/outline buttons
+ color: getColor('helios-go-default'),
+ },
+ secondary: {
+ fill: getColor('helios-supplementary-default'),
+ color: getColor('helios-supplementary-default'),
+ },
+ danger: {
+ fill: getColor('helios-no-default'),
+ color: getColor('helios-no-default'),
+ },
+ neutral: {
+ fill: colors.textBody,
+ color: colors.textBody,
+ },
+ },
+};
+
+export { buttonVariants, buttonIconVariants };
diff --git a/packages/flame/themes/helios/components/card.ts b/packages/flame/themes/helios/components/card.ts
new file mode 100644
index 00000000..8dcbd112
--- /dev/null
+++ b/packages/flame/themes/helios/components/card.ts
@@ -0,0 +1,29 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Card Styles - Exact match with unified-components
+// Using exact color values from @lightspeed/unified-tokens/helios
+const cardStyles: CardStyles = {
+ background: colors.white, // #FFFFFF (bg-neutral-top)
+ header: {
+ border: (colors as Record)['helios-border-neutral-soft'],
+ },
+ footer: {
+ border: (colors as Record)['helios-border-neutral-soft'],
+ },
+};
+
+// Card variants use subtle shadows matching Helios design
+const cardVariants: CardVariants = {
+ neutral: {
+ // Neutral card with subtle border shadow
+ boxShadow:
+ '0 0 0 1px rgba(0, 0, 0, 0.06), 0 3px 6px 0 rgba(0, 0, 0, 0.03), 0 1px 2px 0 rgba(0, 0, 0, 0.1)',
+ },
+ top: {
+ // Floating card with more prominent shadow (appearance="floating")
+ boxShadow:
+ '0 0 0 1px rgba(0, 0, 0, 0.06), 0 6px 12px 0 rgba(0, 0, 0, 0.03), 0 4px 8px 0 rgba(0, 0, 0, 0.08)',
+ },
+};
+
+export { cardStyles, cardVariants };
diff --git a/packages/flame/themes/helios/components/checkbox.ts b/packages/flame/themes/helios/components/checkbox.ts
new file mode 100644
index 00000000..df215498
--- /dev/null
+++ b/packages/flame/themes/helios/components/checkbox.ts
@@ -0,0 +1,37 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Checkbox Styles - Exact match with unified-components
+// Using exact color values from @lightspeed/unified-tokens/helios
+// Key features: border-none when checked, hover states, clean focus outline
+const checkboxStyles: CheckboxStyles = {
+ background: colors.white, // White background when unchecked
+ borderColor: (colors as Record)['helios-border-neutral-strong'],
+ color: '',
+ focus: {
+ // Focus outline uses go-default color
+ boxShadow: `0 0 0 1px ${colors.white}, 0 0 0 3px ${
+ (colors as Record)['helios-go-default']
+ }`,
+ },
+ indeterminate: {
+ // Indeterminate: In Helios 2.0, this should be fully filled like checked state
+ // NOTE: Flame's component limitation - only border changes, not wrapper background
+ // Using go-default for both border and dash to maintain Helios color consistency
+ border: (colors as Record)['helios-go-default'], // #3A1AFE (border accent)
+ background: (colors as Record)['helios-go-default'], // #3A1AFE (dash color, same as border)
+ },
+ checked: {
+ // Checked state: filled with go-default color, white checkmark, no border
+ background: (colors as Record)['helios-go-default'], // #3A1AFE (bg-go-default)
+ border: 'transparent', // border-none when checked
+ color: colors.white, // #FFFFFF (text-neutral-ondark-default)
+ },
+ label: {
+ color: colors.textBody, // #1E1E21 (text-neutral-default)
+ },
+ description: {
+ color: colors.textBody, // #1E1E21 (text-neutral-default)
+ },
+};
+
+export { checkboxStyles };
diff --git a/packages/flame/themes/helios/components/divider.ts b/packages/flame/themes/helios/components/divider.ts
new file mode 100644
index 00000000..c0b6fd47
--- /dev/null
+++ b/packages/flame/themes/helios/components/divider.ts
@@ -0,0 +1,10 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Divider Styles - Exact match with Helios design
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const dividerStyles: DividerStyles = {
+ color: (colors as Record)['helios-border-neutral-soft'],
+ cardColor: (colors as Record)['helios-border-neutral-soft'],
+};
+
+export { dividerStyles };
diff --git a/packages/flame/themes/helios/components/group.ts b/packages/flame/themes/helios/components/group.ts
new file mode 100644
index 00000000..4fd8983b
--- /dev/null
+++ b/packages/flame/themes/helios/components/group.ts
@@ -0,0 +1,11 @@
+import { colors } from '../colors';
+
+// Helios 2 Group Styles
+const groupStyles: GroupStyles = {
+ addon: {
+ background: (colors as Record)['helios-neutral-backdrop'],
+ borderColor: (colors as Record)['helios-neutral-edge'],
+ },
+};
+
+export { groupStyles };
diff --git a/packages/flame/themes/helios/components/input.ts b/packages/flame/themes/helios/components/input.ts
new file mode 100644
index 00000000..45fd34bc
--- /dev/null
+++ b/packages/flame/themes/helios/components/input.ts
@@ -0,0 +1,88 @@
+import { shadows } from '../shadows';
+import { colors } from '../colors';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record)[key];
+
+// Helios 2.0 Input Styles - Exact match with unified-components
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const inputStyles: InputStyles = {
+ background: colors.white, // #FFFFFF (bg-neutral-top)
+ color: colors.textBody, // #1E1E21 (text-neutral-default)
+ border: (colors as Record)['helios-border-neutral-soft'],
+ // @ts-ignore
+ boxShadow: shadows.inner['inner-shadow-1'],
+ placeholder: {
+ color: (colors as Record)['helios-fg-supplementary-default'],
+ },
+ hover: {
+ border: getColor('helios-neutral-soft'), // #69696D
+ },
+ active: {
+ border: getColor('helios-go-default'), // #3A1AFE (border-go-default)
+ },
+ disabled: {
+ color: getColor('helios-neutral-inert'),
+ background: getColor('helios-bg-neutral-inert-softer'),
+ },
+ focus: {
+ border: getColor('helios-go-default'), // #3A1AFE (border-go-default)
+ },
+ helper: {
+ background: getColor('helios-neutral-dark'),
+ },
+ warning: {
+ color: getColor('helios-warning-default'),
+ },
+ error: {
+ border: (colors as Record)['helios-border-no-default'],
+ color: (colors as Record)['helios-fg-no-default'],
+ },
+ valid: {
+ color: (colors as Record)['helios-fg-success-default'],
+ },
+ readonly: {
+ color: colors.textBody, // #1E1E21
+ background: (colors as Record)['helios-bg-neutral-inert-softer'],
+ },
+ label: {
+ color: colors.textBody,
+ },
+ autofilled: {
+ background: colors.white,
+ color: colors.textBody,
+ },
+ autocomplete: {
+ border: getColor('helios-neutral-edge'),
+ controlDropdownIndicator: {
+ color: getColor('helios-neutral-backdrop'),
+ },
+ controlHover: {
+ border: getColor('helios-neutral-soft'),
+ },
+ indicator: {
+ color: getColor('helios-neutral-edge'),
+ },
+ optionSelected: {
+ background: getColor('helios-neutral-backdrop'),
+ color: colors.textBody,
+ },
+ multiValue: {
+ color: colors.textBody,
+ background: colors.white,
+ backgroundDisabled: colors.white,
+ border: getColor('helios-neutral-edge'),
+ borderDisabled: getColor('helios-neutral-edge'),
+ },
+ multiValueLabel: {
+ color: colors.textBody,
+ colorDisabled: getColor('helios-neutral-dark'),
+ },
+ multiValueRemove: {
+ color: '',
+ colorDisabled: colors.textHeading,
+ },
+ },
+};
+
+export { inputStyles };
diff --git a/packages/flame/themes/helios/components/logo.ts b/packages/flame/themes/helios/components/logo.ts
new file mode 100644
index 00000000..1bfe9397
--- /dev/null
+++ b/packages/flame/themes/helios/components/logo.ts
@@ -0,0 +1,46 @@
+import { colors } from '../colors';
+
+const logoVariants: LogoVariants = {
+ flame: {
+ default: {
+ fill: colors['maple-400'],
+ },
+ 'red-white': {
+ fill: colors['maple-400'],
+ },
+ dive: {
+ fill: colors['gray-900'],
+ },
+ night: {
+ fill: colors['gray-1000'],
+ },
+ snow: {
+ fill: colors.white,
+ },
+ maple: {
+ fill: colors['maple-400'],
+ },
+ },
+ word: {
+ default: {
+ fill: colors['gray-1000'],
+ },
+ 'red-white': {
+ fill: colors.white,
+ },
+ dive: {
+ fill: colors['gray-900'],
+ },
+ night: {
+ fill: colors['gray-1000'],
+ },
+ snow: {
+ fill: colors.white,
+ },
+ maple: {
+ fill: colors['maple-400'],
+ },
+ },
+};
+
+export { logoVariants };
diff --git a/packages/flame/themes/helios/components/modal.ts b/packages/flame/themes/helios/components/modal.ts
new file mode 100644
index 00000000..f759791c
--- /dev/null
+++ b/packages/flame/themes/helios/components/modal.ts
@@ -0,0 +1,23 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Modal Styles - Exact match with unified-components Dialog
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const modalStyles: ModalStyles = {
+ overlay: {
+ background: (colors as Record)['helios-overlay-neutral-strong'],
+ },
+ modal: {
+ background: colors.white, // #FFFFFF (bg-neutral-top)
+ color: colors.textBody, // #1E1E21 (text-neutral-default)
+ },
+ header: {
+ border: (colors as Record)['helios-border-neutral-soft'],
+ color: colors.textBody, // #1E1E21 (text-neutral-default)
+ },
+ footer: {
+ background: (colors as Record)['helios-neutral-backdrop'],
+ border: (colors as Record)['helios-border-neutral-soft'],
+ },
+};
+
+export { modalStyles };
diff --git a/packages/flame/themes/helios/components/nps.ts b/packages/flame/themes/helios/components/nps.ts
new file mode 100644
index 00000000..742e7860
--- /dev/null
+++ b/packages/flame/themes/helios/components/nps.ts
@@ -0,0 +1,9 @@
+import { colors } from '../colors';
+
+const npsStyles: NpsStyles = {
+ text: {
+ dimmed: colors['gray-300'],
+ },
+};
+
+export { npsStyles };
diff --git a/packages/flame/themes/helios/components/popover.ts b/packages/flame/themes/helios/components/popover.ts
new file mode 100644
index 00000000..6888edab
--- /dev/null
+++ b/packages/flame/themes/helios/components/popover.ts
@@ -0,0 +1,16 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Popover Styles - Exact match with unified-components
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const popoverStyles: PopoverStyles = {
+ boxShadow: '0 0 0 0.0625rem rgba(12, 13, 13, 0.15), 0 0.1875rem 0.375rem rgba(12, 13, 13, 0.15)',
+ arrowColor: colors.white, // #FFFFFF (bg-neutral-top for arrow)
+ light: {
+ background: colors.white, // #FFFFFF (bg-neutral-top)
+ },
+ dark: {
+ background: (colors as Record)['helios-neutral-backdrop'],
+ },
+};
+
+export { popoverStyles };
diff --git a/packages/flame/themes/helios/components/progress.ts b/packages/flame/themes/helios/components/progress.ts
new file mode 100644
index 00000000..85da066d
--- /dev/null
+++ b/packages/flame/themes/helios/components/progress.ts
@@ -0,0 +1,26 @@
+import { colors } from '../colors';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record)[key];
+
+// Helios 2 Progress Styles
+const progressStyles: ProgressStyles = {
+ background: getColor('helios-neutral-edge'),
+ progressBar: {
+ background: `${getColor('helios-neutral-edge')}
+linear-gradient(
+ 45deg,
+ ${getColor('helios-go-default')} 0%,
+ ${getColor('helios-go-soft')} 25%,
+ ${getColor('helios-go-default')} 75%,
+ ${getColor('helios-go-soft')} 100%
+)
+`,
+ backgroundSize: '400% 400%',
+ },
+ progressBarStatic: {
+ background: getColor('helios-go-default'),
+ },
+};
+
+export { progressStyles };
diff --git a/packages/flame/themes/helios/components/radio.ts b/packages/flame/themes/helios/components/radio.ts
new file mode 100644
index 00000000..935d94dd
--- /dev/null
+++ b/packages/flame/themes/helios/components/radio.ts
@@ -0,0 +1,26 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Radio Styles - Exact match with unified-components
+// Using exact color values from @lightspeed/unified-tokens/helios
+const radioStyles: RadioStyles = {
+ background: colors.white, // #FFFFFF (bg-neutral-top)
+ border: (colors as Record)['helios-border-neutral-strong'],
+ color: colors.white, // #FFFFFF (inner dot color)
+ focus: {
+ boxShadow: `${colors.white} 0px 0px 0px 1px, ${
+ (colors as Record)['helios-go-default']
+ } 0px 0px 0px 3px`,
+ },
+ checked: {
+ background: (colors as Record)['helios-go-default'], // #3A1AFE (bg-go-default)
+ border: 'transparent', // border-none when checked
+ },
+ description: {
+ color: colors.textBody, // #1E1E21 (text-neutral-default)
+ },
+ label: {
+ color: colors.textBody, // #1E1E21 (text-neutral-default)
+ },
+};
+
+export { radioStyles };
diff --git a/packages/flame/themes/helios/components/select.ts b/packages/flame/themes/helios/components/select.ts
new file mode 100644
index 00000000..33f4b4e1
--- /dev/null
+++ b/packages/flame/themes/helios/components/select.ts
@@ -0,0 +1,15 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Select Styles - Exact match with unified-components
+// Using exact color values from @lightspeed/unified-tokens/helios
+const selectStyles: SelectStyles = {
+ backgroundColor: '',
+ background: colors.white, // #FFFFFF (bg-neutral-top)
+ border: (colors as Record)['helios-border-neutral-soft'],
+ color: colors.textBody, // #1E1E21 (text-neutral-default)
+ focusBorder: (colors as Record)['helios-go-default'], // #3A1AFE (border-go-default)
+ disabledColor: (colors as Record)['helios-neutral-inert'],
+ disabledBackground: (colors as Record)['helios-bg-neutral-inert-softer'],
+};
+
+export { selectStyles };
diff --git a/packages/flame/themes/helios/components/sidebar.ts b/packages/flame/themes/helios/components/sidebar.ts
new file mode 100644
index 00000000..f2b942fc
--- /dev/null
+++ b/packages/flame/themes/helios/components/sidebar.ts
@@ -0,0 +1,37 @@
+import { colors } from '../colors';
+
+const sidebarStyles: SidebarStyles = {
+ background: colors['gray-900'],
+ borderColor: colors['gray-700'],
+ iconDetails: colors['gray-900'],
+ sidebarLink: {
+ focus: {
+ background: colors['gray-800'],
+ },
+ active: {
+ background: colors['blue-500'],
+ },
+ },
+ menulink: {
+ normal: {
+ color: colors['blue-500'],
+ },
+ danger: {
+ color: colors['maple-600'],
+ },
+ },
+ shopButton: {
+ background: colors['gray-800'],
+ active: {
+ background: colors['gray-700'],
+ },
+ hover: {
+ background: colors['gray-700'],
+ },
+ },
+ lockButton: {
+ borderColor: colors['gray-500'],
+ },
+};
+
+export { sidebarStyles };
diff --git a/packages/flame/themes/helios/components/switch.ts b/packages/flame/themes/helios/components/switch.ts
new file mode 100644
index 00000000..90f7567d
--- /dev/null
+++ b/packages/flame/themes/helios/components/switch.ts
@@ -0,0 +1,32 @@
+import { colors } from '../colors';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record)[key];
+
+// Helios 2 Switch Styles - Using Helios semantic colors
+const switchStyles: SwitchStyles = {
+ on: {
+ background: getColor('helios-go-default'),
+ border: getColor('helios-go-default'),
+ color: colors.white,
+ focusBorder: getColor('helios-go-default'),
+ errorBorder: getColor('helios-no-default'),
+ checkedBorder: getColor('helios-go-default'),
+ },
+ off: {
+ background: colors.white,
+ border: getColor('helios-neutral-edge'),
+ color: getColor('helios-neutral-soft'),
+ },
+ slider: {
+ border: getColor('helios-neutral-edge'),
+ background: colors.white,
+ shadow: '0 0.125rem 0.25rem rgba(12, 13, 13, 0.15)',
+ },
+ icons: {
+ checkmarkBackground: colors.white,
+ crossBackground: getColor('helios-neutral-soft'),
+ },
+};
+
+export { switchStyles };
diff --git a/packages/flame/themes/helios/components/table.ts b/packages/flame/themes/helios/components/table.ts
new file mode 100644
index 00000000..f347aeb9
--- /dev/null
+++ b/packages/flame/themes/helios/components/table.ts
@@ -0,0 +1,44 @@
+import { darken, saturate, rgba } from 'polished';
+import { colors } from '../colors';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record)[key];
+
+// Helios 2.0 Table Styles - Exact match with unified-components
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const blue = getColor('helios-go-default'); // #3A1AFE
+const lightBlue = darken(0.1, saturate(0.2, '#869DFF29')); // Derived from go-highlight
+const sortableButtonColor = rgba(getColor('helios-go-default'), 0.1);
+const progressBackground = `linear-gradient(
+ 45deg,
+ ${blue} 0%,
+ ${lightBlue} 25%,
+ ${blue} 75%,
+ ${lightBlue} 100%
+)`;
+
+const tableStyles: TableStyles = {
+ progress: {
+ background: progressBackground,
+ backgroundSize: '400% 400%',
+ loadingBackground: getColor('helios-neutral-backdrop'),
+ },
+ tr: {
+ hover: {
+ background: getColor('helios-go-highlight-strong'),
+ },
+ borderColor: getColor('helios-border-neutral-soft'),
+ },
+ dropdown: {
+ hover: {
+ background: getColor('helios-neutral-backdrop'),
+ },
+ },
+ sortable: {
+ button: {
+ background: sortableButtonColor,
+ },
+ },
+};
+
+export { tableStyles };
diff --git a/packages/flame/themes/helios/components/tag.ts b/packages/flame/themes/helios/components/tag.ts
new file mode 100644
index 00000000..6c1c4291
--- /dev/null
+++ b/packages/flame/themes/helios/components/tag.ts
@@ -0,0 +1,38 @@
+import { rgba } from 'polished';
+import { colors } from '../colors';
+import { shadows } from '../shadows';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record)[key];
+
+// Helios 2 Tag Styles - Using Helios Go colors
+const tagStyles: TagStyles = {
+ main: {
+ background: getColor('helios-go-default'),
+ hoverBackground: getColor('helios-go-soft'),
+ activeBackground: getColor('helios-go-strong'),
+ focusBorder: getColor('helios-go-default'),
+ color: colors.white,
+ boxShadow: `0 0 0 0.0625rem ${colors.white}, 0 0 0 0.1875rem ${getColor(
+ 'helios-go-default',
+ )}, ${
+ // @ts-ignore
+ shadows.inner['inner-shadow-2']
+ }`,
+ },
+ remove: {
+ background: getColor('helios-go-default'),
+ hoverBackground: getColor('helios-go-soft'),
+ activeBackground: getColor('helios-go-strong'),
+ icon: {
+ background: rgba(getColor('helios-neutral-dark'), 0.4),
+ details: colors.white,
+ hoverBackground: '',
+ focusBackground: '',
+ focusBoxShadow: `0 0 0 0.0625rem transparent, 0 0 0 0.125rem ${colors.white}`,
+ activeBackground: '',
+ },
+ },
+};
+
+export { tagStyles };
diff --git a/packages/flame/themes/helios/components/text.ts b/packages/flame/themes/helios/components/text.ts
new file mode 100644
index 00000000..a4d29ef9
--- /dev/null
+++ b/packages/flame/themes/helios/components/text.ts
@@ -0,0 +1,11 @@
+import { colors } from '../colors';
+
+// Helios 2 Text Styles
+const textStyles: TextStyles = {
+ color: colors.textBody,
+ link: {
+ color: (colors as Record)['helios-go-default'],
+ },
+};
+
+export { textStyles };
diff --git a/packages/flame/themes/helios/components/toaster.ts b/packages/flame/themes/helios/components/toaster.ts
new file mode 100644
index 00000000..c6545f90
--- /dev/null
+++ b/packages/flame/themes/helios/components/toaster.ts
@@ -0,0 +1,53 @@
+// Helios 2.0 Toaster Styles - Aligned with Toasts (unified-components)
+// Toasts use filled backgrounds: bg-success-default, bg-no-default
+// ALL text and icons are white (text-neutral-ondark-default)
+// Using token names from the Helios theme colors object
+import { colors } from '../colors';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record)[key];
+
+const toasterVariants = {
+ success: {
+ '.fl-toaster__container': {
+ bg: getColor('helios-success-default'),
+ },
+ '.fl-toaster__countdown': {
+ bg: getColor('helios-success-strong'), // darker green for countdown bar
+ },
+ '.fl-toaster__icon svg': {
+ fill: getColor('helios-neutral-ondark-default'), // icon color
+ },
+ '.fl-toaster__content': {
+ color: getColor('helios-neutral-ondark-default'), // text color
+ },
+ '.fl-toaster__dismiss-btn svg': {
+ fill: getColor('helios-neutral-ondark-default'), // close button
+ },
+ '.fl-toast__action-btn': {
+ color: getColor('helios-neutral-ondark-default'), // action button
+ },
+ },
+ error: {
+ '.fl-toaster__container': {
+ bg: getColor('helios-no-default'),
+ },
+ '.fl-toaster__countdown': {
+ bg: getColor('helios-no-strong'), // darker red for countdown bar
+ },
+ '.fl-toaster__icon svg': {
+ fill: getColor('helios-neutral-ondark-default'), // icon color
+ },
+ '.fl-toaster__content': {
+ color: getColor('helios-neutral-ondark-default'), // text color
+ },
+ '.fl-toaster__dismiss-btn svg': {
+ fill: getColor('helios-neutral-ondark-default'), // close button
+ },
+ '.fl-toast__action-btn': {
+ color: getColor('helios-neutral-ondark-default'), // action button
+ },
+ },
+};
+
+export { toasterVariants };
diff --git a/packages/flame/themes/helios/components/tooltip.ts b/packages/flame/themes/helios/components/tooltip.ts
new file mode 100644
index 00000000..f26a4788
--- /dev/null
+++ b/packages/flame/themes/helios/components/tooltip.ts
@@ -0,0 +1,19 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Tooltip Styles - Exact match with unified-components
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const tooltipStyles: TooltipStyles = {
+ light: {
+ background: (colors as Record)['helios-neutral-backdrop'],
+ border: (colors as Record)['helios-border-neutral-soft'],
+ color: colors.textBody, // #1E1E21 (text-neutral-default)
+ },
+ dark: {
+ // Default Helios tooltip uses inverted dark background
+ background: (colors as Record)['helios-bg-neutral-inverted-top'],
+ border: (colors as Record)['helios-bg-neutral-inverted-top'],
+ color: colors.white, // #FFFFFF (text-neutral-inverted-default)
+ },
+};
+
+export { tooltipStyles };
diff --git a/packages/flame/themes/helios/components/wordmark.ts b/packages/flame/themes/helios/components/wordmark.ts
new file mode 100644
index 00000000..d8e63e05
--- /dev/null
+++ b/packages/flame/themes/helios/components/wordmark.ts
@@ -0,0 +1,13 @@
+import { colors } from '../colors';
+
+const wordmarkStyles: WordmarkStyles = {
+ border: colors['maple-400'],
+ light: {
+ color: colors.white,
+ },
+ dark: {
+ color: colors['gray-1000'],
+ },
+};
+
+export { wordmarkStyles };
diff --git a/packages/flame/themes/helios/index.ts b/packages/flame/themes/helios/index.ts
new file mode 100644
index 00000000..276d7487
--- /dev/null
+++ b/packages/flame/themes/helios/index.ts
@@ -0,0 +1,67 @@
+import { lightspeedTheme } from '@lightspeed/flame-tokens';
+
+import { colors } from './colors';
+
+import { alertVariants, alertInCardVariants } from './components/alert';
+import { badgeVariants, nextBadgeVariants } from './components/badge';
+import { buttonVariants, buttonIconVariants } from './components/button';
+import { cardStyles, cardVariants } from './components/card';
+import { checkboxStyles } from './components/checkbox';
+import { dividerStyles } from './components/divider';
+import { inputStyles } from './components/input';
+import { logoVariants } from './components/logo';
+import { radioStyles } from './components/radio';
+import { selectStyles } from './components/select';
+import { switchStyles } from './components/switch';
+import { tagStyles } from './components/tag';
+import { tooltipStyles } from './components/tooltip';
+import { modalStyles } from './components/modal';
+import { progressStyles } from './components/progress';
+import { popoverStyles } from './components/popover';
+import { textStyles } from './components/text';
+import { boneStyles } from './components/bone';
+import { groupStyles } from './components/group';
+import { wordmarkStyles } from './components/wordmark';
+import { tableStyles } from './components/table';
+import { sidebarStyles } from './components/sidebar';
+import { npsStyles } from './components/nps';
+import { toasterVariants } from './components/toaster';
+
+const themeUI = {
+ ...lightspeedTheme,
+ colors,
+};
+
+const theme: FlameUI = {
+ ...themeUI,
+ alertVariants,
+ alertInCardVariants,
+ badgeVariants,
+ nextBadgeVariants,
+ buttonVariants,
+ buttonIconVariants,
+ cardStyles,
+ cardVariants,
+ checkboxStyles,
+ dividerStyles,
+ inputStyles,
+ logoVariants,
+ radioStyles,
+ selectStyles,
+ switchStyles,
+ tagStyles,
+ tooltipStyles,
+ modalStyles,
+ progressStyles,
+ popoverStyles,
+ textStyles,
+ boneStyles,
+ groupStyles,
+ wordmarkStyles,
+ tableStyles,
+ sidebarStyles,
+ npsStyles,
+ toasterVariants,
+};
+
+export { themeUI, theme };
diff --git a/packages/flame/themes/helios/shadows.ts b/packages/flame/themes/helios/shadows.ts
new file mode 100644
index 00000000..d41b6974
--- /dev/null
+++ b/packages/flame/themes/helios/shadows.ts
@@ -0,0 +1,6 @@
+import { shadows } from '@lightspeed/flame-tokens';
+
+// You can override shadows here if needed
+// const customShadows = ['0 1px 2px rgba(0,0,0,0.1)', ...];
+
+export { shadows };
diff --git a/yarn.lock b/yarn.lock
index 037bc9d9..5f1e7c43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2558,6 +2558,11 @@
eslint-plugin-react "^7.12.4"
eslint-plugin-react-hooks "^1.6.0"
+"@lightspeed/unified-tokens@^3.3.0":
+ version "3.4.0"
+ resolved "https://npm.pkg.github.com/download/@lightspeed/unified-tokens/3.4.0/c1abddccc8b9bd8a414ad0319a9039cb42676fd4#c1abddccc8b9bd8a414ad0319a9039cb42676fd4"
+ integrity sha512-7CSKcOyaOV2NUAb0uV9vlATBwS3FH17u4tynregHraU2Cpc/+djgzPB4rn/nceUv10+VwdAcIv9SM0y0xIBoIA==
+
"@mdx-js/mdx@^1.6.22":
version "1.6.22"
resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"