Colors

constructor(brand: StreamDesign.ColorScale, chrome: StreamDesign.ChromeScale, accentPrimary: Color, accentError: Color, accentSuccess: Color, accentWarning: Color, accentNeutral: Color, textPrimary: Color, textSecondary: Color, textTertiary: Color, textDisabled: Color, textOnAccent: Color, textOnInverse: Color, textLink: Color, backgroundCoreElevation0: Color, backgroundCoreElevation1: Color, backgroundCoreElevation2: Color, backgroundCoreElevation3: Color, backgroundCoreSurfaceDefault: Color, backgroundCoreSurfaceSubtle: Color, backgroundCoreSurfaceStrong: Color, backgroundCoreSurfaceCard: Color, backgroundCoreInverse: Color, backgroundCoreOnAccent: Color, backgroundCoreScrim: Color, backgroundCoreOverlayDark: Color, backgroundCoreOverlayLight: Color, backgroundCoreHighlight: Color, backgroundCoreApp: Color, backgroundUtilitySelected: Color, backgroundUtilityDisabled: Color, borderCoreDefault: Color, borderCoreStrong: Color, borderCoreSubtle: Color, borderCoreOpacitySubtle: Color, borderCoreOpacityStrong: Color, borderCoreOnAccent: Color, borderCoreOnInverse: Color, borderCoreOnSurface: Color, borderUtilitySelected: Color, borderUtilityFocused: Color, borderUtilityActive: Color, borderUtilityDisabled: Color, borderUtilityDisabledOnSurface: Color, borderUtilityError: Color, borderUtilityWarning: Color, borderUtilitySuccess: Color, avatarBgPlaceholder: Color, avatarPaletteBg1: Color, avatarPaletteBg2: Color, avatarPaletteBg3: Color, avatarPaletteBg4: Color, avatarPaletteBg5: Color, avatarPaletteText1: Color, avatarPaletteText2: Color, avatarPaletteText3: Color, avatarPaletteText4: Color, avatarPaletteText5: Color, avatarTextPlaceholder: Color, avatarPresenceBorder: Color, skeletonLoadingBase: Color, skeletonLoadingHighlight: Color, systemCaret: Color)

Parameters

brand

The brand (accent) color scale. See ColorScale.

chrome

The chrome (neutral gray) color scale. See ChromeScale.

accentPrimary

Main brand accent for interactive elements.

accentError

Destructive actions and error states.

accentSuccess

Success states and positive actions.

accentWarning

Warning or caution messages.

accentNeutral

Neutral accent for low-priority badges.

textPrimary

Main text color.

textSecondary

Secondary metadata text.

textTertiary

Lowest priority text.

textDisabled

Disabled text.

textOnAccent

Text on dark or accent backgrounds.

textOnInverse

Text on inverse backgrounds.

textLink

Hyperlinks and inline actions.

backgroundCoreElevation0

Flat surfaces.

backgroundCoreElevation1

Slightly elevated surfaces.

backgroundCoreElevation2

Card-like elements.

backgroundCoreElevation3

Popovers.

backgroundCoreSurfaceDefault

Standard section background.

backgroundCoreSurfaceSubtle

Very light section background.

backgroundCoreSurfaceStrong

Stronger section background.

backgroundCoreSurfaceCard

Card surfaces inside elevated containers like sheets and dialogs. In dark mode, resolves lighter than the container background to maintain separation.

backgroundCoreInverse

Inverse background for elevated, transient, or high-attention UI surfaces that sit on top of the default app background.

backgroundCoreOnAccent

Surfaces that must remain white across themes (e.g., media controls over video). Do not use for general UI surfaces.

backgroundCoreScrim

Dimmed overlay for modals.

backgroundCoreOverlayDark

Selected overlay (dark variant).

backgroundCoreOverlayLight

Selected overlay (light variant).

backgroundCoreHighlight

Highlight background (e.g. message focus/pin).

backgroundCoreApp

Global application background.

backgroundUtilitySelected

Selected overlay.

backgroundUtilityDisabled

Disabled backgrounds.

borderCoreDefault

Standard surface border.

borderCoreStrong

Stronger surface border.

borderCoreSubtle

Very light separators.

borderCoreOpacitySubtle

Image frame border treatment (subtle).

borderCoreOpacityStrong

Image frame border treatment (strong).

borderCoreOnAccent

Borders on accent backgrounds.

borderCoreOnInverse

Border on inverse backgrounds.

borderCoreOnSurface

Border for elements sitting on elevated surfaces.

borderUtilitySelected

Selected overlay border.

borderUtilityFocused

Focus ring or focus border.

borderUtilityActive

Active state focus border.

borderUtilityDisabled

Optional disabled border for inputs, buttons, or chips.

borderUtilityDisabledOnSurface

Border for disabled elements on elevated surfaces.

borderUtilityError

Error state border.

borderUtilityWarning

Warning state border.

borderUtilitySuccess

Success state border.

avatarBgPlaceholder

Avatar placeholder background.

avatarPaletteBg1

Avatar background (slot 1).

avatarPaletteBg2

Avatar background (slot 2).

avatarPaletteBg3

Avatar background (slot 3).

avatarPaletteBg4

Avatar background (slot 4).

avatarPaletteBg5

Avatar background (slot 5).

avatarPaletteText1

Avatar text (slot 1).

avatarPaletteText2

Avatar text (slot 2).

avatarPaletteText3

Avatar text (slot 3).

avatarPaletteText4

Avatar text (slot 4).

avatarPaletteText5

Avatar text (slot 5).

avatarTextPlaceholder

Avatar placeholder text.

avatarPresenceBorder

The thin outline around the presence dot. Matches the local surface behind the avatar.

skeletonLoadingBase

Base color for the skeleton loading gradient (placeholder surfaces).

skeletonLoadingHighlight

Highlight for the skeleton loading gradient (moving shimmer).

systemCaret

System caret color.