Skip to content

Commit

Permalink
VPN-6213 part 4: Remove unused colors (#10019)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcleinman
mcleinman authored Nov 7, 2024
1 parent d1d2832 commit 7f42770
Showing 1 changed file with 5 additions and 143 deletions.
148 changes: 5 additions & 143 deletions nebula/ui/themes/main/colors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,10 +127,6 @@ color.washedBlue = '#D4E2F6';
color.washedLightBlue = '#AECBF2';
color.strongBlue = '#0A84FF';

color.customGradientColorPurple = '#9D62FC';
color.customGradientColorPink = '#FD3296';
color.customGradientColorBlue = '#5B6DF8';

color.onboardingGradientStart = '#472C87';
color.onboardingGradientMiddle = '#301962';
color.onboardingGradientEnd = '#1D0942';
Expand All @@ -147,6 +143,10 @@ const percentToHex = percent => {
return hexAlphaValue.toUpperCase();
};

// Not all #00xxxxx colors are identical. While they look identical
// on screen, in transitions or with opacity changes they may look different.
// Changing all `addTransparency(color.[anything], 0.0)` to color.transparency
// will cause UI bugs.
const addTransparency = (hexColor, percent) => {
const hexValue = hexColor.substring(1);
const hexAlphaValue = percentToHex(percent);
Expand All @@ -160,7 +160,6 @@ const addTransparency = (hexColor, percent) => {

color.bgColor = color.grey5;
color.bgColor30 = addTransparency(color.grey5, 0.3);
color.bgColor80 = addTransparency(color.grey5, 0.3);
color.bgColorTransparent = addTransparency(color.grey5, 0.0);

color.blue = color.blue50;
Expand All @@ -172,7 +171,6 @@ color.blueFocusBorder = color.strongBlue;

color.divider = addTransparency(color.grey60, 0.04);
color.green = color.green50;
color.grey = color.grey20;
color.greyHovered = color.grey10;
color.greyPressed = color.grey20;
color.greyDisabled = color.grey15;
Expand All @@ -196,8 +194,6 @@ color.blueBadgeBackground = addTransparency(color.blue50, 0.4);

color.overlayBackground = addTransparency(color.black, 0.0);

color.checkBoxWarning = color.yellow70;

color.fontColor = color.grey40;
color.fontColorDark = color.grey50;

Expand All @@ -208,9 +204,6 @@ color.lightFocusBorder = color.grey15;
* Main palette
*/
color.primary = color.purple90;
color.secondary = color.green50;
color.dark = color.grey60;
color.light = color.grey5;

/**
* Functional
Expand All @@ -234,136 +227,50 @@ color.yellowFocus = color.orange10;

color.informational = {
default: color.blue,
active: color.blueActive,
hover: color.blueHover,
focus: color.blueFocus,
};

color.success = {
default: color.green,
active: color.greenActive,
hover: color.greenHover,
focus: color.greenFocus,
default: color.green
};

color.error = {
default: color.red50,
active: color.redActive,
hover: color.redHover,
focus: color.redFocus,
};

color.warning = {
default: color.yellow,
active: color.yellowActive,
hover: color.yellowHover,
focus: color.yellowFocus,
};

/**
* Gradients
*/

// Pink gradient
color.gradientPink = {
type: 'radial',
stops: [
{
position: 0.0,
color: color.customGradientColorPurple,
},
{
position: 0.0,
color: color.customGradientColorPink,
},
],
};

// Blue gradient
color.gradientBlue = {
type: 'radial',
stops: [
{
position: 0.0,
color: color.violet50,
},
{
position: 0.371,
color: color.purple50,
},
{
position: 0.614,
color: color.customGradientColorBlue,
},
{
position: 1.0,
color: color.blue40,
},
],
};

// Orange gradient
color.gradientOrange = {
type: 'radial',
stops: [
{
position: 0.0,
color: color.red60,
},
{
position: 1.0,
color: color.yellow50,
},
],
};

// Green gradient
color.gradientGreen = {
type: 'radial',
stops: [
{
position: 0.0,
color: color.blue50,
},
{
position: 1.0,
color: color.green50,
},
],
};

/**
* Inputs
*/
color.inputState = {
default: {
background: color.white,
border: color.grey30,
placeholder: color.grey40,
text: color.grey50,
},
hover: {
background: color.white,
border: color.grey40,
placeholder: color.grey50,
text: color.grey50,
},
focus: {
background: color.white,
border: color.informational.default,
highlight: color.informational.focus,
placeholder: color.grey40,
text: color.grey50,
},
error: {
background: color.white,
border: color.error.default,
highlight: color.error.focus,
placeholder: color.grey40,
text: color.grey50,
},
disabled: {
background: color.white,
border: color.grey20,
placeholder: color.grey20,
text: color.grey20,
Expand All @@ -386,21 +293,6 @@ color.blueButton = {
focusBorder: color.blueFocusBorder,
};

color.wasmOptionBtn = {
defaultColor: color.transparent,
buttonHovered: addTransparency(color.strongBlue, 0.2),
buttonPressed: addTransparency(color.strongBlue, 0.3),
buttonDisabled: color.blueDisabled,
focusBgColor: color.blue,
focusOutline: color.blueFocusOutline,
focusBorder: color.blueFocusBorder,
};

color.warningAlertFocusBorders = {
focusOutline: color.orangeFocus,
focusBorder: color.orangePressed,
};

color.clickableRowBlue = {
defaultColor: color.bgColor,
buttonHovered: color.washedBlue,
Expand All @@ -409,14 +301,6 @@ color.clickableRowBlue = {
focusBorder: color.blueFocusBorder,
};

color.clickableRowPurple = {
defaultColor: color.bgColorTransparent,
buttonHovered: color.purple5,
buttonPressed: color.purple10,
focusOutline: color.bgColorTransparent,
focusBorder: color.purple70,
};

color.iconButtonLightBackground = {
defaultColor: color.bgColorTransparent,
buttonHovered: color.greyHovered,
Expand Down Expand Up @@ -454,11 +338,6 @@ color.whiteButton = {

color.greyButton = {
defaultColor: color.grey20,
buttonHovered: color.greyHovered,
buttonPressed: color.greyPressed,
buttonDisabled: color.greyDisabled,
focusOutline: color.greyHovered,
focusBorder: color.greyPressed,
};

color.redButton = {
Expand All @@ -479,15 +358,6 @@ color.redLinkButton = {
focusBorder: color.redPressed,
};

color.removeDeviceBtn = {
defaultColor: color.bgColorTransparent,
buttonHovered: color.red5,
buttonPressed: color.red10,
buttonDisabled: color.bgColorTransparent,
focusOutline: color.bgColorTransparent,
focusBorder: color.red,
};

color.vpnToggleConnected = {
defaultColor: color.green,
buttonHovered: color.green60,
Expand Down Expand Up @@ -532,15 +402,7 @@ color.greyLink = {

color.input = {
backgroundColor: color.white,
borderColor: color.grey30,
highlight: color.grey10,
defaultColor: color.white,
buttonHovered: color.blueHovered,
buttonPressed: color.bluePressed,
buttonDisabled: color.blueDisabled,
focusBgColor: color.blue,
focusOutline: color.blueFocusOutline,
focusBorder: color.blueFocusBorder,
};

color.greenBadge = {
Expand Down

0 comments on commit 7f42770

Please sign in to comment.