Remove the `focused` token

Nate Butler created 3 years ago

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.

Change summary

styles/src/themes/base16.ts | 12 +-----------
styles/src/themes/dark.ts   | 12 +-----------
styles/src/themes/light.ts  | 10 ----------
styles/src/themes/theme.ts  |  2 --
4 files changed, 2 insertions(+), 34 deletions(-)

Detailed changes

styles/src/themes/base16.ts

@@ -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,

styles/src/themes/dark.ts

@@ -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,

styles/src/themes/light.ts

@@ -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),

styles/src/themes/theme.ts

@@ -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.