-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Supernova Bot
committed
Nov 26, 2024
1 parent
753f810
commit 676c63c
Showing
5 changed files
with
1,387 additions
and
2 deletions.
There are no files selected for viewing
172 changes: 172 additions & 0 deletions
172
packages/design-tokens/src/js/themes/theme-light-default/colors.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,174 @@ | ||
/* This file was generated by Supernova, don't change manually */ | ||
export const backgroundBackdrop = '#1a1b1b80'; | ||
|
||
export const backgroundInteractiveStateActive = '#f1edff'; | ||
export const backgroundInteractiveStateDefault = '#fff0'; | ||
export const backgroundInteractiveStateHover = '#f8f6ff'; | ||
|
||
export const backgroundPrimary = '#fff'; | ||
export const backgroundSecondary = '#f2f2f2'; | ||
export const backgroundTertiary = '#f1edff'; | ||
|
||
export const borderBasic = '#d9d9d9'; | ||
export const borderFocus = '#7847ff'; | ||
|
||
export const borderInteractiveStateActive = '#a5a5a5'; | ||
export const borderInteractiveStateDefault = '#bfbfbf'; | ||
export const borderInteractiveStateHover = '#b2b2b2'; | ||
export const borderInteractiveStateSelected = '#7847ff'; | ||
|
||
export const componentButtonPlainBorder = '#fff0'; | ||
export const componentButtonPlainContent = '#6039cc'; | ||
export const componentButtonPlainStateActive = '#e4daff'; | ||
export const componentButtonPlainStateDefault = '#fff0'; | ||
export const componentButtonPlainStateHover = '#f1edff'; | ||
|
||
export const componentButtonPrimaryBorder = '#4e2ea6'; | ||
export const componentButtonPrimaryContent = '#fff'; | ||
export const componentButtonPrimaryStateActive = '#6039cc'; | ||
export const componentButtonPrimaryStateDefault = '#7847ff'; | ||
export const componentButtonPrimaryStateHover = '#6c40e5'; | ||
|
||
export const componentButtonSecondaryBorder = '#7847ff'; | ||
export const componentButtonSecondaryContent = '#6039cc'; | ||
export const componentButtonSecondaryStateActive = '#e4daff'; | ||
export const componentButtonSecondaryStateDefault = '#fff'; | ||
export const componentButtonSecondaryStateHover = '#f1edff'; | ||
|
||
export const componentButtonTertiaryBorder = '#e5e5e5'; | ||
export const componentButtonTertiaryContent = '#202020'; | ||
export const componentButtonTertiaryStateActive = '#d9d9d9'; | ||
export const componentButtonTertiaryStateDefault = '#f2f2f2'; | ||
export const componentButtonTertiaryStateHover = '#e5e5e5'; | ||
|
||
export const componentHeaderBackground = '#fff'; | ||
export const componentHeaderItemBackgroundStateActive = '#f1edff'; | ||
export const componentHeaderItemBackgroundStateDefault = '#fff0'; | ||
export const componentHeaderItemBackgroundStateHover = '#f8f6ff'; | ||
export const componentHeaderItemBackgroundStateSelected = '#fff0'; | ||
export const componentHeaderItemStateActive = '#4e2ea6'; | ||
export const componentHeaderItemStateDefault = '#404040'; | ||
export const componentHeaderItemStateHover = '#6039cc'; | ||
export const componentHeaderItemStateSelected = '#6039cc'; | ||
export const componentHeaderStripeStateSelected = '#ffbe00'; | ||
export const componentHeaderStripeStateUnselected = '#e4daff'; | ||
|
||
export const componentToggleSelectedBorder = '#327c3f'; | ||
export const componentToggleSelectedContent = '#fff'; | ||
export const componentToggleSelectedStateActive = '#3e9b4f'; | ||
export const componentToggleSelectedStateDefault = '#327c3f'; | ||
export const componentToggleSelectedStateHover = '#388b47'; | ||
export const componentToggleUnselectedBorder = '#a5a5a5'; | ||
export const componentToggleUnselectedContent = '#404040'; | ||
export const componentToggleUnselectedStateActive = '#f2f2f2'; | ||
export const componentToggleUnselectedStateDefault = '#fff'; | ||
export const componentToggleUnselectedStateHover = '#f9f9f9'; | ||
|
||
export const disabledBackground = '#f9f9f9'; | ||
export const disabledBorder = '#e5e5e5'; | ||
export const disabledContent = '#a5a5a5'; | ||
export const disabledForeground = '#d9d9d9'; | ||
|
||
export const emotionDangerBackgroundBasic = '#b60000'; | ||
export const emotionDangerBackgroundSubtle = '#fef2f2'; | ||
export const emotionDangerBorderBasic = '#b60000'; | ||
export const emotionDangerBorderSubtle = '#f18080'; | ||
export const emotionDangerContentBasic = '#940000'; | ||
export const emotionDangerContentSubtle = '#fff'; | ||
export const emotionDangerStateActive = '#e40000'; | ||
export const emotionDangerStateDefault = '#b60000'; | ||
export const emotionDangerStateHover = '#cd0000'; | ||
|
||
export const emotionInformativeBackgroundBasic = '#0052ad'; | ||
export const emotionInformativeBackgroundSubtle = '#f2f7fd'; | ||
export const emotionInformativeBorderBasic = '#0052ad'; | ||
export const emotionInformativeBorderSubtle = '#80b2eb'; | ||
export const emotionInformativeContentBasic = '#00428c'; | ||
export const emotionInformativeContentSubtle = '#fff'; | ||
export const emotionInformativeStateActive = '#0066d8'; | ||
export const emotionInformativeStateDefault = '#0052ad'; | ||
export const emotionInformativeStateHover = '#005cc2'; | ||
|
||
export const emotionSuccessBackgroundBasic = '#327c3f'; | ||
export const emotionSuccessBackgroundSubtle = '#f5faf6'; | ||
export const emotionSuccessBorderBasic = '#327c3f'; | ||
export const emotionSuccessBorderSubtle = '#9ecda7'; | ||
export const emotionSuccessContentBasic = '#286533'; | ||
export const emotionSuccessContentSubtle = '#fff'; | ||
export const emotionSuccessStateActive = '#3e9b4f'; | ||
export const emotionSuccessStateDefault = '#327c3f'; | ||
export const emotionSuccessStateHover = '#388b47'; | ||
|
||
export const emotionWarningBackgroundBasic = '#c26400'; | ||
export const emotionWarningBackgroundSubtle = '#fef8f2'; | ||
export const emotionWarningBorderBasic = '#c26400'; | ||
export const emotionWarningBorderSubtle = '#f9be80'; | ||
export const emotionWarningContentBasic = '#9d5100'; | ||
export const emotionWarningContentSubtle = '#fff'; | ||
export const emotionWarningStateActive = '#f27d00'; | ||
export const emotionWarningStateDefault = '#c26400'; | ||
export const emotionWarningStateHover = '#da7100'; | ||
|
||
export const focusFocusRingColor01 = '#d2c2ffb2'; | ||
|
||
export const formFieldDanger = '#b60000'; | ||
|
||
export const formFieldFilledBackgroundStateActive = '#fff'; | ||
export const formFieldFilledBackgroundStateDefault = '#fff'; | ||
export const formFieldFilledBackgroundStateHover = '#f9f9f9'; | ||
export const formFieldFilledBorderStateActive = '#7f7f7f'; | ||
export const formFieldFilledBorderStateDefault = '#a5a5a5'; | ||
export const formFieldFilledBorderStateHover = '#999'; | ||
export const formFieldFilledBorderStateSelected = '#7847ff'; | ||
export const formFieldFilledContent = '#202020'; | ||
export const formFieldFilledPlaceholder = '#666'; | ||
|
||
export const formFieldHelperText = '#7f7f7f'; | ||
export const formFieldLabel = '#202020'; | ||
export const formFieldSuccess = '#327c3f'; | ||
export const formFieldWarning = '#c26400'; | ||
|
||
export const gradientBasicOverlayColor01 = '#fff'; | ||
export const gradientBasicOverlayColor02 = '#fff0'; | ||
|
||
export const linkPrimaryStateActive = '#3c2480'; | ||
export const linkPrimaryStateDefault = '#6039cc'; | ||
export const linkPrimaryStateHover = '#4e2ea6'; | ||
|
||
export const linkSecondaryStateActive = '#3c2480'; | ||
export const linkSecondaryStateDefault = '#535353'; | ||
export const linkSecondaryStateHover = '#4e2ea6'; | ||
|
||
export const linkStateVisited = '#3c2480'; | ||
|
||
export const linkTertiaryStateActive = '#3c2480'; | ||
export const linkTertiaryStateDefault = '#7f7f7f'; | ||
export const linkTertiaryStateHover = '#4e2ea6'; | ||
|
||
export const neutralBackgroundBasic = '#202020'; | ||
export const neutralBackgroundSubtle = '#f2f2f2'; | ||
export const neutralBorderBasic = '#202020'; | ||
export const neutralBorderSubtle = '#bfbfbf'; | ||
export const neutralContentBasic = '#202020'; | ||
export const neutralContentSubtle = '#fff'; | ||
export const neutralStateActive = '#535353'; | ||
export const neutralStateDefault = '#202020'; | ||
export const neutralStateHover = '#404040'; | ||
|
||
export const selectedContentBasic = '#4e2ea6'; | ||
export const selectedContentSubtle = '#fff'; | ||
export const selectedStateActive = '#6039cc'; | ||
export const selectedStateDefault = '#7847ff'; | ||
export const selectedStateHover = '#6c40e5'; | ||
|
||
export const shadowShadow100Color01 = '#00000026'; | ||
|
||
export const shadowShadow200Color01 = '#0003'; | ||
|
||
export const shadowShadow300Color01 = '#00000040'; | ||
|
||
export const shadowShadow400Color01 = '#00000040'; | ||
|
||
export const textPrimary = '#202020'; | ||
export const textSecondary = '#535353'; | ||
export const textTertiary = '#7f7f7f'; |
172 changes: 172 additions & 0 deletions
172
packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,174 @@ | ||
/* This file was generated by Supernova, don't change manually */ | ||
export const backgroundBackdrop = '#1a1b1b80'; | ||
|
||
export const backgroundInteractiveStateActive = '#ffffff1a'; | ||
export const backgroundInteractiveStateDefault = '#fff0'; | ||
export const backgroundInteractiveStateHover = '#ffffff0d'; | ||
|
||
export const backgroundPrimary = '#6039cc'; | ||
export const backgroundSecondary = '#3c2480'; | ||
export const backgroundTertiary = '#1e1240'; | ||
|
||
export const borderBasic = '#a07eff'; | ||
export const borderFocus = '#1e1240'; | ||
|
||
export const borderInteractiveStateActive = '#bba3ff'; | ||
export const borderInteractiveStateDefault = '#a07eff'; | ||
export const borderInteractiveStateHover = '#ae91ff'; | ||
export const borderInteractiveStateSelected = '#ffbe00'; | ||
|
||
export const componentButtonPlainBorder = '#fff0'; | ||
export const componentButtonPlainContent = '#fff'; | ||
export const componentButtonPlainStateActive = '#ffffff26'; | ||
export const componentButtonPlainStateDefault = '#fff0'; | ||
export const componentButtonPlainStateHover = '#ffffff1a'; | ||
|
||
export const componentButtonPrimaryBorder = '#1e1240'; | ||
export const componentButtonPrimaryContent = '#3c2480'; | ||
export const componentButtonPrimaryStateActive = '#e4daff'; | ||
export const componentButtonPrimaryStateDefault = '#fff'; | ||
export const componentButtonPrimaryStateHover = '#f1edff'; | ||
|
||
export const componentButtonSecondaryBorder = '#f8f6ff'; | ||
export const componentButtonSecondaryContent = '#fff'; | ||
export const componentButtonSecondaryStateActive = '#1a1b1b26'; | ||
export const componentButtonSecondaryStateDefault = '#1a1b1b00'; | ||
export const componentButtonSecondaryStateHover = '#1a1b1b1a'; | ||
|
||
export const componentButtonTertiaryBorder = '#1a1b1b00'; | ||
export const componentButtonTertiaryContent = '#fff'; | ||
export const componentButtonTertiaryStateActive = '#1a1b1b4d'; | ||
export const componentButtonTertiaryStateDefault = '#1a1b1b33'; | ||
export const componentButtonTertiaryStateHover = '#1a1b1b40'; | ||
|
||
export const componentHeaderBackground = '#6039cc'; | ||
export const componentHeaderItemBackgroundStateActive = '#1a1b1b26'; | ||
export const componentHeaderItemBackgroundStateDefault = '#fff0'; | ||
export const componentHeaderItemBackgroundStateHover = '#1a1b1b1a'; | ||
export const componentHeaderItemBackgroundStateSelected = '#fff0'; | ||
export const componentHeaderItemStateActive = '#e5e5e5'; | ||
export const componentHeaderItemStateDefault = '#fff'; | ||
export const componentHeaderItemStateHover = '#f2f2f2'; | ||
export const componentHeaderItemStateSelected = '#ffbe00'; | ||
export const componentHeaderStripeStateSelected = '#fff'; | ||
export const componentHeaderStripeStateUnselected = '#ffffff40'; | ||
|
||
export const componentToggleSelectedBorder = '#a07eff'; | ||
export const componentToggleSelectedContent = '#fff'; | ||
export const componentToggleSelectedStateActive = '#3e9b4f'; | ||
export const componentToggleSelectedStateDefault = '#327c3f'; | ||
export const componentToggleSelectedStateHover = '#388b47'; | ||
export const componentToggleUnselectedBorder = '#a07eff'; | ||
export const componentToggleUnselectedContent = '#4e2ea6'; | ||
export const componentToggleUnselectedStateActive = '#e4daff'; | ||
export const componentToggleUnselectedStateDefault = '#fff'; | ||
export const componentToggleUnselectedStateHover = '#f1edff'; | ||
|
||
export const disabledBackground = '#ffffff1a'; | ||
export const disabledBorder = '#fff3'; | ||
export const disabledContent = '#ffffff80'; | ||
export const disabledForeground = '#fff3'; | ||
|
||
export const emotionDangerBackgroundBasic = '#e40000'; | ||
export const emotionDangerBackgroundSubtle = '#fce5e5'; | ||
export const emotionDangerBorderBasic = '#e93333'; | ||
export const emotionDangerBorderSubtle = '#ef6666'; | ||
export const emotionDangerContentBasic = '#720000'; | ||
export const emotionDangerContentSubtle = '#fff'; | ||
export const emotionDangerStateActive = '#ec4d4d'; | ||
export const emotionDangerStateDefault = '#e40000'; | ||
export const emotionDangerStateHover = '#e93333'; | ||
|
||
export const emotionInformativeBackgroundBasic = '#0066d8'; | ||
export const emotionInformativeBackgroundSubtle = '#e5f0fb'; | ||
export const emotionInformativeBorderBasic = '#3385e0'; | ||
export const emotionInformativeBorderSubtle = '#66a3e8'; | ||
export const emotionInformativeContentBasic = '#00336c'; | ||
export const emotionInformativeContentSubtle = '#fff'; | ||
export const emotionInformativeStateActive = '#4d94e4'; | ||
export const emotionInformativeStateDefault = '#0066d8'; | ||
export const emotionInformativeStateHover = '#3385e0'; | ||
|
||
export const emotionSuccessBackgroundBasic = '#3e9b4f'; | ||
export const emotionSuccessBackgroundSubtle = '#ecf5ed'; | ||
export const emotionSuccessBorderBasic = '#65af72'; | ||
export const emotionSuccessBorderSubtle = '#8bc395'; | ||
export const emotionSuccessContentBasic = '#1f4e28'; | ||
export const emotionSuccessContentSubtle = '#fff'; | ||
export const emotionSuccessStateActive = '#78b984'; | ||
export const emotionSuccessStateDefault = '#3e9b4f'; | ||
export const emotionSuccessStateHover = '#65af72'; | ||
|
||
export const emotionWarningBackgroundBasic = '#f27d00'; | ||
export const emotionWarningBackgroundSubtle = '#fef2e5'; | ||
export const emotionWarningBorderBasic = '#f59733'; | ||
export const emotionWarningBorderSubtle = '#f7b166'; | ||
export const emotionWarningContentBasic = '#793f00'; | ||
export const emotionWarningContentSubtle = '#fff'; | ||
export const emotionWarningStateActive = '#f6a44d'; | ||
export const emotionWarningStateDefault = '#f27d00'; | ||
export const emotionWarningStateHover = '#f59733'; | ||
|
||
export const focusFocusRingColor01 = '#d2c2ffb2'; | ||
|
||
export const formFieldDanger = '#ec4d4d'; | ||
|
||
export const formFieldFilledBackgroundStateActive = '#fff'; | ||
export const formFieldFilledBackgroundStateDefault = '#f9f9f9'; | ||
export const formFieldFilledBackgroundStateHover = '#f1edff'; | ||
export const formFieldFilledBorderStateActive = '#936cff'; | ||
export const formFieldFilledBorderStateDefault = '#ae91ff'; | ||
export const formFieldFilledBorderStateHover = '#a07eff'; | ||
export const formFieldFilledBorderStateSelected = '#ffbe00'; | ||
export const formFieldFilledContent = '#202020'; | ||
export const formFieldFilledPlaceholder = '#666'; | ||
|
||
export const formFieldHelperText = '#c9b5ff'; | ||
export const formFieldLabel = '#fff'; | ||
export const formFieldSuccess = '#78b984'; | ||
export const formFieldWarning = '#f6a44d'; | ||
|
||
export const gradientBasicOverlayColor01 = '#606060'; | ||
export const gradientBasicOverlayColor02 = '#60606000'; | ||
|
||
export const linkPrimaryStateActive = '#e5e5e5'; | ||
export const linkPrimaryStateDefault = '#fff'; | ||
export const linkPrimaryStateHover = '#f2f2f2'; | ||
|
||
export const linkSecondaryStateActive = '#e5e5e5'; | ||
export const linkSecondaryStateDefault = '#d6c8ff'; | ||
export const linkSecondaryStateHover = '#f2f2f2'; | ||
|
||
export const linkStateVisited = '#ffbe00'; | ||
|
||
export const linkTertiaryStateActive = '#e5e5e5'; | ||
export const linkTertiaryStateDefault = '#bba3ff'; | ||
export const linkTertiaryStateHover = '#f2f2f2'; | ||
|
||
export const neutralBackgroundBasic = '#202020'; | ||
export const neutralBackgroundSubtle = '#f2f2f2'; | ||
export const neutralBorderBasic = '#202020'; | ||
export const neutralBorderSubtle = '#bfbfbf'; | ||
export const neutralContentBasic = '#202020'; | ||
export const neutralContentSubtle = '#fff'; | ||
export const neutralStateActive = '#535353'; | ||
export const neutralStateDefault = '#202020'; | ||
export const neutralStateHover = '#404040'; | ||
|
||
export const selectedContentBasic = '#fff'; | ||
export const selectedContentSubtle = '#3c2480'; | ||
export const selectedStateActive = '#ffd24d'; | ||
export const selectedStateDefault = '#ffbe00'; | ||
export const selectedStateHover = '#ffcb33'; | ||
|
||
export const shadowShadow100Color01 = '#00000026'; | ||
|
||
export const shadowShadow200Color01 = '#0003'; | ||
|
||
export const shadowShadow300Color01 = '#00000040'; | ||
|
||
export const shadowShadow400Color01 = '#00000040'; | ||
|
||
export const textPrimary = '#f9f9f9'; | ||
export const textSecondary = '#d9d9d9'; | ||
export const textTertiary = '#b2b2b2'; |
Oops, something went wrong.