@gainsight-hub/design-tokens 0.1.0

package/dist/tokens.js

@@ -0,0 +1,371 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const BorderWidth100 = "1px";
+export const BorderWidth200 = "2px";
+export const ColorBrand100 = "#E9F2FF";
+export const ColorBrand200 = "#CCE0FF";
+export const ColorBrand300 = "#85B8FF";
+export const ColorBrand400 = "#579DFF";
+export const ColorBrand500 = "#388BFF";
+export const ColorBrand600 = "#1D7AFC";
+export const ColorBrand700 = "#0C66E4";
+export const ColorBrand800 = "#0055CC";
+export const ColorBrand900 = "#09326C";
+export const ColorBrand1000 = "#1C2B41";
+export const ColorNeutral0 = "#FFFFFF";
+export const ColorNeutral100 = "#FAFAFA";
+export const ColorNeutral200 = "#F4F5F6";
+export const ColorNeutral300 = "#DEDFE2";
+export const ColorNeutral400 = "#B8BBC2";
+export const ColorNeutral500 = "#8D919B";
+export const ColorNeutral600 = "#7B808E";
+export const ColorNeutral700 = "#696E7C";
+export const ColorNeutral800 = "#4F5663";
+export const ColorNeutral900 = "#3B4254";
+export const ColorNeutral1000 = "#2B3346";
+export const ColorNeutralA100 = "#2b33460a";
+export const ColorNeutralA200 = "#2b334614";
+export const ColorNeutralA300 = "#2b334629";
+export const ColorNeutralA400 = "#2b334652";
+export const ColorNeutralA500 = "#2b33467a";
+export const ColorBlue100 = "#e9f2ff";
+export const ColorBlue200 = "#cce0ff";
+export const ColorBlue300 = "#85b8ff";
+export const ColorBlue400 = "#579dff";
+export const ColorBlue500 = "#388bff";
+export const ColorBlue600 = "#1d7afc";
+export const ColorBlue700 = "#0c66e4";
+export const ColorBlue800 = "#0055cc";
+export const ColorBlue900 = "#09326c";
+export const ColorBlue1000 = "#1c2b41";
+export const ColorGreen100 = "#dcffeb";
+export const ColorGreen200 = "#baf3d2";
+export const ColorGreen300 = "#7ee2a6";
+export const ColorGreen400 = "#4bce7f";
+export const ColorGreen500 = "#2abb62";
+export const ColorGreen600 = "#22a052";
+export const ColorGreen700 = "#1f8444";
+export const ColorGreen800 = "#216e3d";
+export const ColorGreen900 = "#164b29";
+export const ColorGreen1000 = "#1c3324";
+export const ColorRed100 = "#ffeceb";
+export const ColorRed200 = "#ffd3d2";
+export const ColorRed300 = "#fd9391";
+export const ColorRed400 = "#f86a68";
+export const ColorRed500 = "#f15050";
+export const ColorRed600 = "#e23d3d";
+export const ColorRed700 = "#c92c2f";
+export const ColorRed800 = "#ae2426";
+export const ColorRed900 = "#5d1a1c";
+export const ColorRed1000 = "#421f21";
+export const ColorYellow100 = "#fff7d6";
+export const ColorYellow200 = "#f8e6a0";
+export const ColorYellow300 = "#f5cd47";
+export const ColorYellow400 = "#e2b203";
+export const ColorYellow500 = "#cf9f02";
+export const ColorYellow600 = "#b38600";
+export const ColorYellow700 = "#946f00";
+export const ColorYellow800 = "#7f5f01";
+export const ColorYellow900 = "#533f04";
+export const ColorYellow1000 = "#332e1b";
+export const ColorActionPrimaryDefault = "#0C66E4"; // default color used for the most prominent call-to-action in the interface
+export const ColorActionPrimaryHover = "#0055CC"; // color used when a primary action is hovered
+export const ColorActionPrimaryPressed = "#09326C"; // color used when a primary action is actively pressed
+export const ColorActionNeutralDefault = "#FFFFFF"; // color used for less prominent actions that support the primary action
+export const ColorActionNeutralHover = "#FAFAFA"; // color used when a secondary action is hovered
+export const ColorActionNeutralPressed = "#F4F5F6"; // color used when a secondary action is actively pressed
+export const ColorActionDestructiveDefault = "#c92c2f"; // color used for actions that perform irreversible or potentially harmful operations
+export const ColorActionDestructiveHover = "#ae2426"; // color used when a destructive action is hovered
+export const ColorActionDestructivePressed = "#5d1a1c"; // color used when a destructive action is actively pressed
+export const ColorSurfacePage = "#FAFAFA"; // application canvas background used behind all UI surfaces
+export const ColorSurfaceDefault = "#FFFFFF"; // default container surface for standard UI sections (cards, panels, content areas)
+export const ColorSurfaceMuted = "#F4F5F6"; // sub-surface used inside containers to visually group secondary areas (e.g., comment/reply bubbles)
+export const ColorSurfaceDisabled = "#F4F5F6"; // background of disabled interactive elements such as inputs, buttons, or selection controls
+export const ColorSurfaceOverlay = "#FFFFFF"; // elevated surface for overlays and floating layers (modals, dropdowns, popovers).
+export const ColorSurfaceInverse = "#2B3346"; // color used for inverse surfaces such as tooltips and high-contrast floating UI
+export const ColorContentDefault = "#2B3346"; // default color used for primary body text and high-emphasis content
+export const ColorContentSubtle = "#4F5663"; // color used for secondary text such as helper text, metadata, or supporting information
+export const ColorContentSubtlest = "#696E7C"; // color used for low-emphasis text such as placeholders or less important UI copy
+export const ColorContentHeadingDefault = "#2B3346"; // default color used for section and component headings
+export const ColorContentHeadingHero = "#FFFFFF"; // color used for prominent page-level headings displayed on hero or banner areas
+export const ColorContentInverse = "#FFFFFF"; // color used for text displayed on high-contrast or brand-colored backgrounds
+export const ColorContentDisabled = "#B8BBC2"; // color used for text on disabled elements or unavailable content
+export const ColorLineDefault = "#DEDFE2"; // default border and divider color used for standard UI boundaries, separators, and component outlines
+export const ColorLineDisabled = "#DEDFE2"; // border and divider color used for disabled components or non-interactive states where visual emphasis is reduced
+export const ColorStatusSuccessBold = "#1f8444"; // high-emphasis color used to communicate successful outcomes or confirmations
+export const ColorStatusInformationBold = "#0c66e4"; // high-emphasis color used to indicate errors or critical issues
+export const ColorStatusDangerBold = "#c92c2f"; // high-emphasis color used for neutral informational messages
+export const ColorCommunityAnswered = "#1f8444"; // color used to indicate that a question or thread has received an accepted answer
+export const ColorCommunityUnanswered = "#696E7C"; // color used to indicate that a question or thread has not yet received a response
+export const ColorCommunityHighlighted = "#0C66E4"; // color used to highlight content that is featured or editorially promoted
+export const ColorCommunityPinned = "#0C66E4"; // color used to indicate content that is pinned and prioritized in listings
+export const ColorLinkDefault = "#0C66E4"; // default color used for interactive text links
+export const ColorLinkHover = "#0055CC"; // color used for interactive text links on hover
+export const ColorFocusRing = "#388bff"; // default color used for focus rings on interactive elements
+export const ColorOverlayBackdrop = "#2b33467a"; // semi-transparent color displayed behind modals to obscure background content
+export const ColorOverlayInteractiveHover = "#2b33460a"; // overlay color applied to interactive elements to indicate a hover state
+export const ColorOverlayInteractivePressed = "#2b334614"; // overlay color applied to interactive elements to indicate an active or pressed state
+export const ColorSkeletonDefault = "#F4F5F6"; // base color used for loading placeholders while content is being fetched
+export const ColorSkeletonSubtle = "#2b33460a"; // highlight color used in animated skeleton states to simulate loading progress
+export const FontFamilySans = "Roboto";
+export const FontFamilyMono = "Roboto Mono";
+export const FontWeightRegular = 400;
+export const FontWeightMedium = 500;
+export const FontWeightBold = 700;
+export const FontSize100 = "0.75rem";
+export const FontSize200 = "0.875rem";
+export const FontSize300 = "1rem";
+export const FontSize400 = "1.25rem";
+export const FontSize500 = "1.5rem";
+export const FontSize600 = "1.75rem";
+export const FontSize700 = "2rem";
+export const LineHeightRatioTight = 1.25;
+export const LineHeightRatioRelaxed = 1.5;
+export const LineHeightGrid100 = "1rem";
+export const LineHeightGrid200 = "1.25rem";
+export const LineHeightGrid300 = "1.5rem";
+export const LineHeightGrid400 = "1.75rem";
+export const LineHeightGrid500 = "2rem";
+export const LineHeightGrid600 = "2.25rem";
+export const LineHeightGrid700 = "2.5rem";
+export const Radius100 = "8px";
+export const Radius150 = "12px";
+export const Radius200 = "16px";
+export const Radius025 = "2px";
+export const Radius050 = "4px";
+export const RadiusFull = "9999px";
+export const Shadow100 =
+  "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)";
+export const Shadow200 =
+  "0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)";
+export const Shadow300 =
+  "0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)";
+export const Space0 = "0px";
+export const Space100 = "8px";
+export const Space125 = "12px";
+export const Space200 = "16px";
+export const Space250 = "20px";
+export const Space300 = "24px";
+export const Space400 = "32px";
+export const Space500 = "40px";
+export const Space600 = "48px";
+export const Space800 = "64px";
+export const Space1000 = "80px";
+export const Space025 = "2px";
+export const Space050 = "4px";
+export const Space075 = "6px";
+export const SpaceLayoutGutter = "12px"; // space used as the default gap between columns or layout elements
+export const Elevation1 =
+  "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)"; // low elevation used for raised surfaces above the base layout
+export const Elevation2 =
+  "0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)"; // medium elevation used for floating surfaces above regular content
+export const Elevation3 =
+  "0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)"; // high elevation used for top-level surfaces above other floating elements
+export const TextHeroFontFamily = "Roboto";
+export const TextHeroFontWeight = 700;
+export const TextHeroFontSize = "2rem";
+export const TextHeroLineHeight = 1.25;
+export const TextHeadingSmallFontFamily = "Roboto";
+export const TextHeadingSmallFontWeight = 500;
+export const TextHeadingSmallFontSize = "1.25rem";
+export const TextHeadingSmallLineHeight = 1.25;
+export const TextHeadingMediumFontFamily = "Roboto";
+export const TextHeadingMediumFontWeight = 500;
+export const TextHeadingMediumFontSize = "1.5rem";
+export const TextHeadingMediumLineHeight = 1.25;
+export const TextHeadingLargeFontFamily = "Roboto";
+export const TextHeadingLargeFontWeight = 700;
+export const TextHeadingLargeFontSize = "1.75rem";
+export const TextHeadingLargeLineHeight = 1.25;
+export const TextHeadingXlargeFontFamily = "Roboto";
+export const TextHeadingXlargeFontWeight = 700;
+export const TextHeadingXlargeFontSize = "2rem";
+export const TextHeadingXlargeLineHeight = 1.25;
+export const TextBodySmallFontFamily = "Roboto";
+export const TextBodySmallFontWeight = 400;
+export const TextBodySmallFontSize = "0.875rem";
+export const TextBodySmallLineHeight = 1.5;
+export const TextBodyMediumFontFamily = "Roboto";
+export const TextBodyMediumFontWeight = 400;
+export const TextBodyMediumFontSize = "1rem";
+export const TextBodyMediumLineHeight = 1.5;
+export const TextBodyLargeFontFamily = "Roboto";
+export const TextBodyLargeFontWeight = 400;
+export const TextBodyLargeFontSize = "1.25rem";
+export const TextBodyLargeLineHeight = 1.5;
+export const TextNavigationFontFamily = "Roboto";
+export const TextNavigationFontWeight = 400;
+export const TextNavigationFontSize = "0.875rem";
+export const TextNavigationLineHeight = "1.25rem";
+export const TextMenuFontFamily = "Roboto";
+export const TextMenuFontWeight = 400;
+export const TextMenuFontSize = "0.875rem";
+export const TextMenuLineHeight = "1.25rem";
+export const TextButtonFontFamily = "Roboto";
+export const TextButtonFontWeight = 500;
+export const TextButtonFontSize = "0.875rem";
+export const TextButtonLineHeight = "1.25rem";
+export const TextLabelSmallFontFamily = "Roboto";
+export const TextLabelSmallFontWeight = 500;
+export const TextLabelSmallFontSize = "0.875rem";
+export const TextLabelSmallLineHeight = "1.25rem";
+export const TextLabelMediumFontFamily = "Roboto";
+export const TextLabelMediumFontWeight = 500;
+export const TextLabelMediumFontSize = "1rem";
+export const TextLabelMediumLineHeight = "1.5rem";
+export const TextCaptionFontFamily = "Roboto";
+export const TextCaptionFontWeight = 400;
+export const TextCaptionFontSize = "0.75rem";
+export const TextCaptionLineHeight = "1rem";
+export const TextCodeFontFamily = "Roboto Mono";
+export const TextCodeFontWeight = 400;
+export const TextCodeFontSize = "1rem";
+export const TextCodeLineHeight = 1.5;
+export const BacktotopBackground = "#2B3346"; // Back-to-top button background.
+export const BacktotopContent = "#FFFFFF"; // Back-to-top button icon/content color.
+export const ButtonRadius = "8px"; // Border radius used for all button variants.
+export const ButtonBorderWidth = "1px"; // Border width used for all button variants.
+export const ButtonFontWeight = 500; // Font weight used for button labels across all variants.
+export const ButtonTextTransform = "none"; // Text transform applied to button labels (e.g., none/uppercase).
+export const ButtonPrimaryBackgroundDefault = "#0C66E4"; // Primary button background in default state.
+export const ButtonPrimaryBackgroundHover = "#0055CC"; // Primary button background on hover.
+export const ButtonPrimaryBackgroundPressed = "#09326C"; // Primary button background on press.
+export const ButtonPrimaryContentDefault = "#FFFFFF"; // Primary button label/icon color in default state.
+export const ButtonPrimaryContentHover = "#FFFFFF"; // Primary button label/icon color on hover.
+export const ButtonPrimaryContentPressed = "#FFFFFF"; // Primary button label/icon color on press.
+export const ButtonPrimaryBorderDefault = "#00000000"; // Primary button border color in default state (no visible border).
+export const ButtonPrimaryBorderHover = "#00000000"; // Primary button border color on hover (no visible border).
+export const ButtonPrimaryBorderPressed = "#00000000"; // Primary button border color on press (no visible border).
+export const ButtonPrimaryShadow = "none"; // Primary button shadow (none).
+export const ButtonSecondaryBackgroundDefault = "#FFFFFF"; // Secondary button background in default state.
+export const ButtonSecondaryBackgroundHover = "#FAFAFA"; // Secondary button background on hover.
+export const ButtonSecondaryBackgroundPressed = "#F4F5F6"; // Secondary button background on press.
+export const ButtonSecondaryContentDefault = "#2B3346"; // Secondary button label/icon color in default state.
+export const ButtonSecondaryContentHover = "#2B3346"; // Secondary button label/icon color on hover.
+export const ButtonSecondaryContentPressed = "#2B3346"; // Secondary button label/icon color on press.
+export const ButtonSecondaryBorderDefault = "#DEDFE2"; // Secondary button border color in default state.
+export const ButtonSecondaryBorderHover = "#DEDFE2"; // Secondary button border color on hover.
+export const ButtonSecondaryBorderPressed = "#DEDFE2"; // Secondary button border color on press.
+export const ButtonSecondaryShadow = "none"; // Secondary button shadow (none).
+export const ButtonDestructiveBackgroundDefault = "#c92c2f"; // Destructive button background in default state.
+export const ButtonDestructiveBackgroundHover = "#ae2426"; // Destructive button background on hover.
+export const ButtonDestructiveBackgroundPressed = "#5d1a1c"; // Destructive button background on press.
+export const ButtonDestructiveContentDefault = "#FFFFFF"; // Destructive button label/icon color in default state.
+export const ButtonDestructiveContentHover = "#FFFFFF"; // Destructive button label/icon color on hover.
+export const ButtonDestructiveContentPressed = "#FFFFFF"; // Destructive button label/icon color on press.
+export const ButtonDestructiveBorderDefault = "#00000000"; // Destructive button border color in default state (no visible border).
+export const ButtonDestructiveBorderHover = "#00000000"; // Destructive button border color on hover (no visible border).
+export const ButtonDestructiveBorderPressed = "#00000000"; // Destructive button border color on press (no visible border).
+export const ButtonDestructiveShadow = "none"; // Destructive button shadow (none).
+export const ButtonVoteBackgroundDefault = "#FFFFFF"; // Vote button background in default state.
+export const ButtonVoteBackgroundHover = "#FAFAFA"; // Vote button background on hover.
+export const ButtonVoteBackgroundPressed = "#F4F5F6"; // Vote button background on press.
+export const ButtonVoteContentDefault = "#2B3346"; // Vote button content color in default state.
+export const ButtonVoteContentHover = "#2B3346"; // Vote button content color on hover.
+export const ButtonVoteContentPressed = "#2B3346"; // Vote button content color on press.
+export const ButtonVoteBorderDefault = "#DEDFE2"; // Vote button border color in default state.
+export const ButtonVoteBorderHover = "#DEDFE2"; // Vote button border color on hover.
+export const ButtonVoteBorderPressed = "#DEDFE2"; // Vote button border color on press.
+export const ButtonVoteShadowDefault = "none"; // Vote button shadow in default state (none).
+export const ButtonVoteShadowHover = "none"; // Vote button shadow on hover (none).
+export const ButtonVoteShadowPressed = "none"; // Vote button shadow on press (none).
+export const ButtonVoteSelectedBackgroundDefault = "#0C66E4"; // Vote button background when selected (default).
+export const ButtonVoteSelectedBackgroundHover = "#0055CC"; // Vote button background when selected (hovered).
+export const ButtonVoteSelectedBackgroundPressed = "#09326C"; // Vote button background when selected (pressed).
+export const ButtonVoteSelectedContentDefault = "#FFFFFF"; // Vote button content color when selected (default).
+export const ButtonVoteSelectedContentHover = "#FFFFFF"; // Vote button content color when selected (hovered).
+export const ButtonVoteSelectedContentPressed = "#FFFFFF"; // Vote button content color when selected (pressed).
+export const ButtonVoteSelectedBorderDefault = "#00000000"; // Vote button border when selected (default) (no visible border).
+export const ButtonVoteSelectedBorderHover = "#00000000"; // Vote button border when selected (hovered) (no visible border).
+export const ButtonVoteSelectedBorderPressed = "#00000000"; // Vote button border when selected (pressed) (no visible border).
+export const ButtonVoteSelectedShadowDefault = "none"; // Vote button shadow when selected (default) (none).
+export const ButtonVoteSelectedShadowHover = "none"; // Vote button shadow when selected (hovered) (none).
+export const ButtonVoteSelectedShadowPressed = "none"; // Vote button shadow when selected (pressed) (none).
+export const CardRadius = "8px"; // Border radius used for cards.
+export const CardBorderWidth = "1px"; // Border width used for cards.
+export const CardBorderDefault = "#DEDFE2"; // Card border color in default state.
+export const CardBorderHover = "#DEDFE2"; // Card border color on hover.
+export const CardBorderPressed = "#DEDFE2"; // Card border color on press.
+export const CardBackgroundDefault = "#FFFFFF"; // Card background in default state.
+export const CardBackgroundHover = "#FFFFFF"; // Card background on hover.
+export const CardBackgroundPressed = "#FFFFFF"; // Card background on press.
+export const CardTitleDefault = "#2B3346"; // Card title color in default state.
+export const CardTitleHover = "#0C66E4"; // Card title color on hover (link styling).
+export const CardTitlePressed = "#2B3346"; // Card title color on press.
+export const CardContentDefault = "#2B3346"; // Card body/content color in default state.
+export const CardContentHover = "#2B3346"; // Card body/content color on hover.
+export const CardContentPressed = "#0055CC"; // Card body/content color on press (link hovered styling).
+export const CardShadowDefault = "none"; // Card shadow in default state (none).
+export const CardShadowHover =
+  "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)"; // Card shadow on hover.
+export const CardShadowPressed =
+  "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)"; // Card shadow on press.
+export const FeedContainerRadius = "8px"; // Border radius used for the feed container.
+export const FeedContainerBorderWidth = "1px"; // Border width used for the feed container.
+export const FeedContainerBorderColor = "#DEDFE2"; // Feed container border color.
+export const FeedContainerBackground = "#FFFFFF"; // Feed container background.
+export const FeedContainerShadow = "none"; // Feed container shadow (none).
+export const FeedItemRadius = "8px"; // Border radius used for feed items.
+export const FeedItemBorderWidth = "1px"; // Border width used for feed items.
+export const FeedItemBorderDefault = "#DEDFE2"; // Feed item border color in default state.
+export const FeedItemBorderHover = "#DEDFE2"; // Feed item border color on hover.
+export const FeedItemBorderPressed = "#DEDFE2"; // Feed item border color on press.
+export const FeedItemBackgroundDefault = "#FFFFFF"; // Feed item background in default state.
+export const FeedItemBackgroundHover = "#FFFFFF"; // Feed item background on hover.
+export const FeedItemBackgroundPressed = "#FFFFFF"; // Feed item background on press.
+export const FeedItemTitleDefault = "#2B3346"; // Feed item title color in default state.
+export const FeedItemTitleHover = "#0C66E4"; // Feed item title color on hover (link styling).
+export const FeedItemTitlePressed = "#0055CC"; // Feed item title color on press (link hovered styling).
+export const FeedItemContentDefault = "#2B3346"; // Feed item content color in default state.
+export const FeedItemContentHover = "#2B3346"; // Feed item content color on hover.
+export const FeedItemContentPressed = "#0055CC"; // Feed item content color on press (link hovered styling).
+export const FeedItemShadowDefault = "none"; // Feed item shadow in default state (none).
+export const FeedItemShadowHover =
+  "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)"; // Feed item shadow on hover.
+export const FeedItemShadowPressed =
+  "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)"; // Feed item shadow on press.
+export const NavigationBackground = "#FFFFFF"; // Navigation bar background.
+export const NavigationContent = "#2B3346"; // Navigation bar content color (text/icons).
+export const NavigationDropdownBackground = "#FFFFFF"; // Navigation dropdown background.
+export const NavigationDropdownContent = "#2B3346"; // Navigation dropdown content color.
+export const NavigationBorderTop = "#00000000"; // Top border of navigation (transparent).
+export const NavigationBorderBottom = "#DEDFE2"; // Bottom border of navigation.
+export const WidgetTitle = "#2B3346"; // Default widget title color.
+export const WidgetSubtitle = "#2B3346"; // Default widget subtitle color.
+export const WidgetBackground = "#FAFAFA"; // Default widget background.
+export const WidgetShadow = "none"; // Default widget shadow (none).
+export const WidgetHeroTitle = "#FFFFFF"; // Hero widget title color.
+export const WidgetHeroSubtitle = "#FFFFFF"; // Hero widget subtitle color.
+export const WidgetHeroContentShadow = "none"; // Hero widget content shadow (none; handled by image/overlay as needed).
+export const WidgetHeroBackground = "uploaded image"; // Background of the hero section.
+export const WidgetHeroHeight = "240px"; // Height of the hero section.
+export const WidgetFeaturedBackground = "#0c66e4"; // Featured topic widget background.
+export const WidgetFeaturedContent = "#FFFFFF"; // Featured topic widget content color.
+export const WidgetIntroductionBackground = "#FFFFFF"; // Introduction widget background.
+export const WidgetIntroductionContent = "#2B3346"; // Introduction widget body/content color.
+export const WidgetIntroductionIconBackground = "#1f8444"; // Introduction widget icon container background.
+export const WidgetIntroductionIconContent = "#FFFFFF"; // Introduction widget icon color.
+export const WidgetIntroductionCloseContent = "#696E7C"; // Introduction widget close button color.
+export const ThemeBrand100 = "#E9F2FF";
+export const ThemeBrand200 = "#CCE0FF";
+export const ThemeBrand300 = "#85B8FF";
+export const ThemeBrand400 = "#579DFF";
+export const ThemeBrand500 = "#388BFF";
+export const ThemeBrand600 = "#1D7AFC";
+export const ThemeBrand700 = "#0C66E4";
+export const ThemeBrand800 = "#0055CC";
+export const ThemeBrand900 = "#09326C";
+export const ThemeBrand1000 = "#1C2B41";
+export const ThemeNeutral0 = "#FFFFFF";
+export const ThemeNeutral100 = "#FAFAFA";
+export const ThemeNeutral200 = "#F4F5F6";
+export const ThemeNeutral300 = "#DEDFE2";
+export const ThemeNeutral400 = "#B8BBC2";
+export const ThemeNeutral500 = "#8D919B";
+export const ThemeNeutral600 = "#7B808E";
+export const ThemeNeutral700 = "#696E7C";
+export const ThemeNeutral800 = "#4F5663";
+export const ThemeNeutral900 = "#3B4254";
+export const ThemeNeutral1000 = "#2B3346";