feat(theme): add borderAccentLight (uber#2783)

* feat(theme): add borderAccentLight * chore: add new token to vscode cheatsheet
VladimirMilenko · Apr 2, 2020 · 93d33b8 · 93d33b8
1 parent 91ca27d
commit 93d33b8
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 20 deletions.
diff --git a/documentation-site/pages/guides/theming.mdx b/documentation-site/pages/guides/theming.mdx
@@ -171,15 +171,15 @@ import {createTheme, lightThemePrimitives} from 'baseui';
 
 const primitives = {
   ...lightThemePrimitives,
-  accent: "#F127E4", // hot pink
-  accent50: "#FDEDFC",
-  accent100: "#FCD3F9",
-  accent200: "#F89FF3",
-  accent300: "#F45AEA",
-  accent400: "#F127E4",
-  accent500: "#B71DAD",
-  accent600: "#901788",
-  accent700: "#600F5B"
+  accent: '#F127E4', // hot pink
+  accent50: '#FDEDFC',
+  accent100: '#FCD3F9',
+  accent200: '#F89FF3',
+  accent300: '#F45AEA',
+  accent400: '#F127E4',
+  accent500: '#B71DAD',
+  accent600: '#901788',
+  accent700: '#600F5B',
 };
 
 const theme = createTheme(primitives);
@@ -200,15 +200,15 @@ import {createTheme, lightThemePrimitives} from 'baseui';
 
 const primitives = {
   ...lightThemePrimitives,
-  accent: "#F127E4", // hot pink
-  accent50: "#FDEDFC",
-  accent100: "#FCD3F9",
-  accent200: "#F89FF3",
-  accent300: "#F45AEA",
-  accent400: "#F127E4",
-  accent500: "#B71DAD",
-  accent600: "#901788",
-  accent700: "#600F5B"
+  accent: '#F127E4', // hot pink
+  accent50: '#FDEDFC',
+  accent100: '#FCD3F9',
+  accent200: '#F89FF3',
+  accent300: '#F45AEA',
+  accent400: '#F127E4',
+  accent500: '#B71DAD',
+  accent600: '#901788',
+  accent700: '#600F5B',
 };
 
 const overrides = {
@@ -587,6 +587,7 @@ Control literal and semantic color values. These differ between light and dark t
 
 <Color value="borderStateDisabled" />
 <Color value="borderAccent" />
+<Color value="borderAccentLight" />
 <Color value="borderNegative" />
 <Color value="borderWarning" />
 <Color value="borderPositive" />

diff --git a/packages/baseweb-vscode-extension/src/App.tsx b/packages/baseweb-vscode-extension/src/App.tsx
@@ -72,6 +72,7 @@ const COLORS = [
   'contentOnColor',
   'borderStateDisabled',
   'borderAccent',
+  'borderAccentLight',
   'borderNegative',
   'borderWarning',
   'borderPositive',

diff --git a/src/theme.ts b/src/theme.ts
@@ -150,6 +150,7 @@ interface Colors {
   // Border
   borderStateDisabled: string;
   borderAccent: string;
+  borderAccentLight: string;
   borderNegative: string;
   borderWarning: string;
   borderPositive: string;

diff --git a/src/themes/dark-theme/color-semantic-tokens.js b/src/themes/dark-theme/color-semantic-tokens.js
@@ -70,7 +70,8 @@ export default (
 
     // Border
     borderStateDisabled: colors.gray800,
-    borderAccent: colors.blue500,
+    borderAccent: colors.blue400,
+    borderAccentLight: colors.blue500,
     borderNegative: colors.red500,
     borderWarning: colors.yellow500,
     borderPositive: colors.green500,

diff --git a/src/themes/light-theme/color-semantic-tokens.js b/src/themes/light-theme/color-semantic-tokens.js
@@ -70,7 +70,8 @@ export default (
 
     // Border
     borderStateDisabled: colors.gray50,
-    borderAccent: colors.blue200,
+    borderAccent: colors.blue400,
+    borderAccentLight: colors.blue200,
     borderNegative: colors.red200,
     borderWarning: colors.yellow200,
     borderPositive: colors.green200,

diff --git a/src/themes/types.js b/src/themes/types.js
@@ -135,6 +135,7 @@ export type CoreExtensionSemanticColorTokensT = {
   // Border
   borderStateDisabled: string,
   borderAccent: string,
+  borderAccentLight: string,
   borderNegative: string,
   borderWarning: string,
   borderPositive: string,