From ca0d1957439c3db3469337ac7f1eb1ba4a211ef6 Mon Sep 17 00:00:00 2001 From: Graham Murdoch Date: Fri, 31 Jan 2020 16:22:05 -0800 Subject: [PATCH 1/2] feat(theme): add borderAccentLight --- documentation-site/pages/guides/theming.mdx | 37 ++++++++++--------- src/theme.ts | 1 + .../dark-theme/color-semantic-tokens.js | 3 +- .../light-theme/color-semantic-tokens.js | 3 +- src/themes/types.js | 1 + 5 files changed, 25 insertions(+), 20 deletions(-) diff --git a/documentation-site/pages/guides/theming.mdx b/documentation-site/pages/guides/theming.mdx index 9586a0b916..5481701276 100644 --- 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 + diff --git a/src/theme.ts b/src/theme.ts index 416b2f72fe..1932c619eb 100644 --- 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 index cd5a133d2a..93a5efd2b9 100644 --- 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 index 000aad5781..e9128a9935 100644 --- 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 index 6c30b79731..07aa241e3d 100644 --- 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, From a77e83296f99b3067bdab0d76a2d5b631534fecd Mon Sep 17 00:00:00 2001 From: Graham Murdoch Date: Mon, 3 Feb 2020 10:33:35 -0800 Subject: [PATCH 2/2] chore: add new token to vscode cheatsheet --- packages/baseweb-vscode-extension/src/App.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/baseweb-vscode-extension/src/App.tsx b/packages/baseweb-vscode-extension/src/App.tsx index c8f648e58a..54fe5a0543 100644 --- 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',