Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updated styles and tokens
Browse files Browse the repository at this point in the history
Supernova Bot committed Nov 26, 2024
1 parent 753f810 commit 676c63c
Showing 5 changed files with 1,387 additions and 2 deletions.
172 changes: 172 additions & 0 deletions packages/design-tokens/src/js/themes/theme-light-default/colors.ts
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 packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts
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';
Loading

0 comments on commit 676c63c

Please sign in to comment.