Remove the focused token
Currently we don't have any concept of a true focus state. All states we currently use focus should actually be `active`. Removing this token until we introduce a distinction between active and focused states.
This commit is contained in:
Nate Butler
parent
a7937f2d48
commit
7d22ede804
4 changed files with 2 additions and 34 deletions
|
|
@ -24,55 +24,46 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
|
|||
base: neutral[1],
|
||||
hovered: withOpacity(neutral[2], blend),
|
||||
active: withOpacity(neutral[2], blend * 1.5),
|
||||
focused: withOpacity(neutral[2], blend),
|
||||
},
|
||||
300: {
|
||||
base: neutral[1],
|
||||
hovered: withOpacity(neutral[2], blend),
|
||||
active: withOpacity(neutral[2], blend * 1.5),
|
||||
focused: withOpacity(neutral[2], blend),
|
||||
},
|
||||
500: {
|
||||
base: neutral[0],
|
||||
hovered: withOpacity(neutral[1], blend),
|
||||
active: withOpacity(neutral[1], blend * 1.5),
|
||||
focused: withOpacity(neutral[1], blend),
|
||||
},
|
||||
on300: {
|
||||
base: neutral[0],
|
||||
hovered: withOpacity(neutral[1], blend),
|
||||
active: withOpacity(neutral[1], blend * 2),
|
||||
focused: withOpacity(neutral[1], blend),
|
||||
},
|
||||
on500: {
|
||||
base: neutral[1],
|
||||
hovered: withOpacity(neutral[2], blend),
|
||||
active: withOpacity(neutral[2], blend * 2),
|
||||
focused: withOpacity(neutral[2], blend),
|
||||
},
|
||||
ok: {
|
||||
base: withOpacity(accent.green, 0.15),
|
||||
hovered: withOpacity(accent.green, 0.20),
|
||||
active: withOpacity(accent.green, 0.25),
|
||||
focused: withOpacity(accent.green, 0.20),
|
||||
},
|
||||
error: {
|
||||
base: withOpacity(accent.red, 0.15),
|
||||
hovered: withOpacity(accent.red, 0.20),
|
||||
active: withOpacity(accent.red, 0.25),
|
||||
focused: withOpacity(accent.red, 0.20),
|
||||
},
|
||||
warning: {
|
||||
base: withOpacity(accent.yellow, 0.15),
|
||||
hovered: withOpacity(accent.yellow, 0.20),
|
||||
active: withOpacity(accent.yellow, 0.25),
|
||||
focused: withOpacity(accent.yellow, 0.20),
|
||||
},
|
||||
info: {
|
||||
base: withOpacity(accent.blue, 0.15),
|
||||
hovered: withOpacity(accent.blue, 0.20),
|
||||
active: withOpacity(accent.blue, 0.25),
|
||||
focused: withOpacity(accent.blue, 0.20),
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -80,7 +71,6 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
|
|||
primary: neutral[0],
|
||||
secondary: neutral[1],
|
||||
muted: neutral[3],
|
||||
focused: neutral[3],
|
||||
active: neutral[3],
|
||||
onMedia: withOpacity(neutral[0], 0.1),
|
||||
ok: withOpacity(accent.green, 0.15),
|
||||
|
|
@ -131,7 +121,7 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
|
|||
matchingBracket: backgroundColor[500].active,
|
||||
match: withOpacity(accent.violet, blend * 2),
|
||||
activeMatch: withOpacity(accent.violet, blend * 3),
|
||||
related: backgroundColor[500].focused,
|
||||
related: backgroundColor[500].hovered,
|
||||
},
|
||||
gutter: {
|
||||
primary: textColor.placeholder,
|
||||
|
|
|
|||
|
|
@ -7,55 +7,46 @@ const backgroundColor = {
|
|||
base: colors.neutral[750],
|
||||
hovered: colors.neutral[725],
|
||||
active: colors.neutral[800],
|
||||
focused: colors.neutral[675],
|
||||
},
|
||||
300: {
|
||||
base: colors.neutral[800],
|
||||
hovered: colors.neutral[775],
|
||||
active: colors.neutral[750],
|
||||
focused: colors.neutral[775],
|
||||
},
|
||||
500: {
|
||||
base: colors.neutral[900],
|
||||
hovered: withOpacity(colors.neutral[0], 0.08),
|
||||
active: withOpacity(colors.neutral[0], 0.12),
|
||||
focused: colors.neutral[825],
|
||||
},
|
||||
on300: {
|
||||
base: withOpacity(colors.neutral[850], 0.5),
|
||||
hovered: colors.neutral[875],
|
||||
active: colors.neutral[900],
|
||||
focused: colors.neutral[875],
|
||||
},
|
||||
on500: {
|
||||
base: colors.neutral[850],
|
||||
hovered: colors.neutral[800],
|
||||
active: colors.neutral[775],
|
||||
focused: colors.neutral[800],
|
||||
},
|
||||
ok: {
|
||||
base: withOpacity(colors.green[600], 0.15),
|
||||
hovered: withOpacity(colors.green[600], 0.20),
|
||||
active: withOpacity(colors.green[600], 0.25),
|
||||
focused: withOpacity(colors.green[600], 0.20),
|
||||
},
|
||||
error: {
|
||||
base: withOpacity(colors.red[600], 0.15),
|
||||
hovered: withOpacity(colors.red[600], 0.20),
|
||||
active: withOpacity(colors.red[600], 0.25),
|
||||
focused: withOpacity(colors.red[600], 0.20),
|
||||
},
|
||||
warning: {
|
||||
base: withOpacity(colors.amber[400], 0.15),
|
||||
hovered: withOpacity(colors.amber[400], 0.20),
|
||||
active: withOpacity(colors.amber[400], 0.25),
|
||||
focused: withOpacity(colors.amber[400], 0.20),
|
||||
},
|
||||
info: {
|
||||
base: withOpacity(colors.blue[500], 0.15),
|
||||
hovered: withOpacity(colors.blue[500], 0.20),
|
||||
active: withOpacity(colors.blue[500], 0.25),
|
||||
focused: withOpacity(colors.blue[500], 0.20),
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -63,7 +54,6 @@ const borderColor = {
|
|||
primary: colors.neutral[875],
|
||||
secondary: colors.neutral[775],
|
||||
muted: colors.neutral[675],
|
||||
focused: colors.indigo[500],
|
||||
active: colors.neutral[900],
|
||||
onMedia: withOpacity(colors.neutral[875], 0.1),
|
||||
ok: withOpacity(colors.green[600], 0.15),
|
||||
|
|
@ -127,7 +117,7 @@ const editor = {
|
|||
matchingBracket: backgroundColor[500].active,
|
||||
match: withOpacity(colors.violet[700], 0.5),
|
||||
activeMatch: withOpacity(colors.violet[600], 0.7),
|
||||
related: backgroundColor[500].focused,
|
||||
related: backgroundColor[500].hovered,
|
||||
},
|
||||
gutter: {
|
||||
primary: textColor.placeholder,
|
||||
|
|
|
|||
|
|
@ -7,55 +7,46 @@ const backgroundColor = {
|
|||
base: colors.neutral[75],
|
||||
hovered: colors.neutral[100],
|
||||
active: colors.neutral[150],
|
||||
focused: colors.neutral[100],
|
||||
},
|
||||
300: {
|
||||
base: colors.neutral[25],
|
||||
hovered: colors.neutral[75],
|
||||
active: colors.neutral[100],
|
||||
focused: colors.neutral[75],
|
||||
},
|
||||
500: {
|
||||
base: colors.neutral[0],
|
||||
hovered: withOpacity(colors.neutral[900], 0.03),
|
||||
active: withOpacity(colors.neutral[900], 0.06),
|
||||
focused: colors.neutral[50],
|
||||
},
|
||||
on300: {
|
||||
base: colors.neutral[50],
|
||||
hovered: colors.neutral[100],
|
||||
active: colors.neutral[150],
|
||||
focused: colors.neutral[100],
|
||||
},
|
||||
on500: {
|
||||
base: colors.neutral[50],
|
||||
hovered: colors.neutral[25],
|
||||
active: colors.neutral[0],
|
||||
focused: colors.neutral[25],
|
||||
},
|
||||
ok: {
|
||||
base: withOpacity(colors.green[600], 0.15),
|
||||
hovered: withOpacity(colors.green[600], 0.20),
|
||||
active: withOpacity(colors.green[600], 0.25),
|
||||
focused: withOpacity(colors.green[600], 0.20),
|
||||
},
|
||||
error: {
|
||||
base: withOpacity(colors.red[600], 0.15),
|
||||
hovered: withOpacity(colors.red[600], 0.20),
|
||||
active: withOpacity(colors.red[600], 0.25),
|
||||
focused: withOpacity(colors.red[600], 0.20),
|
||||
},
|
||||
warning: {
|
||||
base: withOpacity(colors.amber[400], 0.15),
|
||||
hovered: withOpacity(colors.amber[400], 0.20),
|
||||
active: withOpacity(colors.amber[400], 0.25),
|
||||
focused: withOpacity(colors.amber[400], 0.20),
|
||||
},
|
||||
info: {
|
||||
base: withOpacity(colors.blue[500], 0.15),
|
||||
hovered: withOpacity(colors.blue[500], 0.20),
|
||||
active: withOpacity(colors.blue[500], 0.25),
|
||||
focused: withOpacity(colors.blue[500], 0.20),
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -63,7 +54,6 @@ const borderColor = {
|
|||
primary: colors.neutral[150],
|
||||
secondary: colors.neutral[150],
|
||||
muted: colors.neutral[100],
|
||||
focused: colors.indigo[500],
|
||||
active: colors.neutral[250],
|
||||
onMedia: withOpacity(colors.neutral[250], 0.3),
|
||||
ok: withOpacity(colors.green[600], 0.15),
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@ export interface BackgroundColorSet {
|
|||
base: ColorToken;
|
||||
hovered: ColorToken;
|
||||
active: ColorToken;
|
||||
focused: ColorToken;
|
||||
}
|
||||
|
||||
export interface Syntax {
|
||||
|
|
@ -85,7 +84,6 @@ export default interface Theme {
|
|||
primary: ColorToken;
|
||||
secondary: ColorToken;
|
||||
muted: ColorToken;
|
||||
focused: ColorToken;
|
||||
active: ColorToken;
|
||||
/**
|
||||
* Used for rendering borders on top of media like avatars, images, video, etc.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue