diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss index 2cdc49cd9e..d8891cf620 100644 --- a/apps/browser/src/popup/scss/variables.scss +++ b/apps/browser/src/popup/scss/variables.scss @@ -43,6 +43,10 @@ $button-color: lighten($text-color, 40%); $button-color-primary: darken($brand-primary, 8%); $button-color-danger: darken($brand-danger, 10%); +$code-color: #c01176; +$code-color-dark: #f08dc7; +$code-color-nord: #dbb1d5; + $solarizedDarkBase03: #002b36; $solarizedDarkBase02: #073642; $solarizedDarkBase01: #586e75; @@ -122,7 +126,7 @@ $themes: ( // light has no hover so use same color webkitCalendarPickerHoverFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg) brightness(85%) contrast(103%), - codeColor: #e83e8c, + codeColor: $code-color, ), dark: ( textColor: #ffffff, @@ -184,7 +188,7 @@ $themes: ( hue-rotate(184deg) brightness(87%) contrast(93%), webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%), - codeColor: #e83e8c, + codeColor: $code-color-dark, ), nord: ( textColor: $nord5, @@ -246,7 +250,7 @@ $themes: ( // has no hover so use same color webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(5%) saturate(454%) hue-rotate(185deg) brightness(93%) contrast(96%), - codeColor: #e83e8c, + codeColor: $code-color-nord, ), solarizedDark: ( textColor: $solarizedDarkBase2, @@ -307,7 +311,7 @@ $themes: ( hue-rotate(138deg) brightness(92%) contrast(90%), webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(10%) saturate(462%) hue-rotate(345deg) brightness(103%) contrast(87%), - codeColor: #e83e8c, + codeColor: $code-color-dark, ), ); diff --git a/apps/desktop/src/scss/variables.scss b/apps/desktop/src/scss/variables.scss index 3ad4c0f075..e4a2f12476 100644 --- a/apps/desktop/src/scss/variables.scss +++ b/apps/desktop/src/scss/variables.scss @@ -41,7 +41,9 @@ $button-color: lighten($text-color, 40%); $button-color-primary: darken($brand-primary, 8%); $button-color-danger: darken($brand-danger, 10%); -$code-color: #e83e8c; +$code-color: #c01176; +$code-color-dark: #f08dc7; +$code-color-nord: #dbb1d5; $themes: ( light: ( @@ -158,7 +160,7 @@ $themes: ( accountSwitcherTextColor: #ffffff, svgSuffix: "-dark.svg", hrColor: #bac0ce, - codeColor: $code-color, + codeColor: $code-color-dark, ), nord: ( textColor: $nord5, @@ -216,7 +218,7 @@ $themes: ( accountSwitcherTextColor: $nord5, svgSuffix: "-dark.svg", hrColor: $nord4, - codeColor: $code-color, + codeColor: $code-color-nord, ), ); diff --git a/apps/web/src/scss/variables.scss b/apps/web/src/scss/variables.scss index 719f403e38..af61daff51 100644 --- a/apps/web/src/scss/variables.scss +++ b/apps/web/src/scss/variables.scss @@ -88,6 +88,7 @@ $mfaTypes: 0, 2, 3, 4, 6; $lightDangerHover: #c43421; $lightInputColor: #465057; $lightInputPlaceholderColor: #b6b8b8; +$lightCodeColor: #c01176; // Dark @@ -107,6 +108,7 @@ $darkDarkBlue1: #2f343d; $darkDarkBlue2: #1f242e; $darkInputColor: $white; $darkInputPlaceholderColor: $darkGrey1; +$darkCodeColor: #f08dc7; $themes: ( light: ( @@ -167,7 +169,7 @@ $themes: ( calloutBackground: #fafafa, calloutColor: #212529, cdkDraggingBackground: $white, - codeColor: #e83e8c, + codeColor: $lightCodeColor, dropdownBackground: $white, dropdownHover: rgba(0, 0, 0, 0.06), dropdownTextColor: $body-color, @@ -276,7 +278,7 @@ $themes: ( calloutBackground: $darkBlue2, calloutColor: $white, cdkDraggingBackground: $darkDarkBlue1, - codeColor: #e83e8c, + codeColor: $darkCodeColor, dropdownBackground: $darkDarkBlue1, dropdownHover: rgba(255, 255, 255, 0.03), dropdownTextColor: $white,