From 297727d4ced5548dcd6a61bb1152c226cb4bd184 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 16 Mar 2021 08:28:39 -0500 Subject: [PATCH 1/3] files, arrays --- .../components/with_theme/theme_context.tsx | 3 ++- src/global_styling/variables/_colors.ts | 9 +++++++ src/services/index.ts | 2 +- src/services/theme/index.ts | 2 +- src/services/theme/theme.ts | 20 ++++----------- src/services/theme/utils.ts | 4 +-- .../global_styling/variables/_colors.ts | 5 ++++ src/themes/eui-amsterdam/theme.ts | 25 +++++++++++++++++++ 8 files changed, 50 insertions(+), 20 deletions(-) create mode 100644 src/themes/eui-amsterdam/theme.ts diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx index 53b46e2ee0b..bf88a0eb9f0 100644 --- a/src-docs/src/components/with_theme/theme_context.tsx +++ b/src-docs/src/components/with_theme/theme_context.tsx @@ -5,8 +5,9 @@ import { applyTheme } from '../../services'; import { EuiThemeProvider, EuiThemeDefault, - EuiThemeAmsterdam, + // EuiThemeAmsterdam, } from '../../../../src/services'; +import { EuiThemeAmsterdam } from '../../../../src/themes/eui-amsterdam/theme'; const THEME_NAMES = EUI_THEMES.map(({ value }) => value); diff --git a/src/global_styling/variables/_colors.ts b/src/global_styling/variables/_colors.ts index fc67ac505a5..ebd10b2d10d 100644 --- a/src/global_styling/variables/_colors.ts +++ b/src/global_styling/variables/_colors.ts @@ -25,6 +25,11 @@ import { tint, } from '../functions/_colors'; +export const poles = { + ghost: '#FFF', + ink: '#000', +}; + const textVariants = { textPrimary: computed(['colors.primary'], ([primary]) => makeHighContrastColor(primary) @@ -48,6 +53,8 @@ const textVariants = { }; export const light_colors = { + ...poles, + // Brand primary: '#006BB4', accent: '#DD0A73', @@ -85,6 +92,8 @@ export const light_colors = { }; export const dark_colors = { + ...poles, + // Brand primary: '#1BA9F5', accent: '#F990C0', diff --git a/src/services/index.ts b/src/services/index.ts index bc5538365f9..c3348c28f30 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -142,7 +142,7 @@ export { Computed, euiThemeDefault, EuiThemeDefault, - EuiThemeAmsterdam, + // EuiThemeAmsterdam, euiThemeAmsterdam, EuiThemeColor, EuiThemeColorMode, diff --git a/src/services/theme/index.ts b/src/services/theme/index.ts index d7e299b0a43..877b0efe132 100644 --- a/src/services/theme/index.ts +++ b/src/services/theme/index.ts @@ -47,6 +47,6 @@ export { export { EuiThemeDefault, euiThemeDefault, - EuiThemeAmsterdam, + // EuiThemeAmsterdam, euiThemeAmsterdam, } from './theme'; diff --git a/src/services/theme/theme.ts b/src/services/theme/theme.ts index 73d976e6958..06f4fc612f5 100644 --- a/src/services/theme/theme.ts +++ b/src/services/theme/theme.ts @@ -45,19 +45,11 @@ import { titles_ams } from '../../themes/eui-amsterdam/global_styling/variables/ * anything using the `color.` key will remain under `color` */ -// HELP: For some reason removing this causes a type error: -// TypeError: 'getOwnPropertyDescriptor' on proxy: trap reported non-configurability for property 'length' which is either non-existent or configurable in the proxy target -const poles = { - ghost: '#FFF', - ink: '#000', -}; - /* DEFAULT THEME */ // TODO: All theme files need to be imported here or else they error out. // Creation of the themes shouldn't be restricted to a particular file export const light = { - ...poles, ...light_colors, base, size, @@ -67,7 +59,6 @@ export const light = { }; export const dark = { - ...poles, ...dark_colors, base, size, @@ -88,17 +79,16 @@ export const EuiThemeDefault = buildTheme(euiThemeDefault, 'EUI_THEME_DEFAULT'); /* AMSTERDAM THEME */ export const amsterdam_light = { - ...poles, ...light_colors_ams, base, size, ...fonts_ams, border: border_ams, titles: titles_ams, + // array: [1, 2, 3], }; export const amsterdam_dark = { - ...poles, ...dark_colors_ams, base, size, @@ -114,7 +104,7 @@ export const euiThemeAmsterdam = { }, }; -export const EuiThemeAmsterdam = buildTheme( - euiThemeAmsterdam, - 'EUI_THEME_AMSTERDAM' -); +// export const EuiThemeAmsterdam = buildTheme( +// euiThemeAmsterdam, +// 'EUI_THEME_AMSTERDAM' +// ); diff --git a/src/services/theme/utils.ts b/src/services/theme/utils.ts index d9237b5bb94..6fd0b5a9ff3 100644 --- a/src/services/theme/utils.ts +++ b/src/services/theme/utils.ts @@ -161,7 +161,7 @@ export const getComputed = ( over[key] instanceof Computed ? over[key].getValue(base.root, over.root, output, colorMode) : over[key]; - if (isObject(baseValue)) { + if (isObject(baseValue) && !Array.isArray(baseValue)) { loop(baseValue, overValue ?? {}, checkExisting, newPath); } else { setOn(output, newPath, overValue ?? baseValue); @@ -219,7 +219,7 @@ export const buildTheme = (model: T, key: string) => { const target = property === 'root' ? _target : _target.model || _target; // @ts-ignore `string` index signature const value = target[property]; - if (typeof value === 'object' && value !== null) { + if (isObject(value) && !Array.isArray(value)) { return new Proxy( { model: value, diff --git a/src/themes/eui-amsterdam/global_styling/variables/_colors.ts b/src/themes/eui-amsterdam/global_styling/variables/_colors.ts index 2e0d489a148..fabc36df945 100644 --- a/src/themes/eui-amsterdam/global_styling/variables/_colors.ts +++ b/src/themes/eui-amsterdam/global_styling/variables/_colors.ts @@ -23,8 +23,11 @@ import { shade, tint, } from '../../../../global_styling/functions/_colors'; +import { poles } from '../../../../global_styling/variables/_colors'; export const light_colors_ams = { + ...poles, + // Brand primary: '#07C', accent: '#F04E98', @@ -60,6 +63,8 @@ export const light_colors_ams = { }; export const dark_colors_ams = { + ...poles, + // Brand primary: '#36A2EF', accent: '#F68FBE', diff --git a/src/themes/eui-amsterdam/theme.ts b/src/themes/eui-amsterdam/theme.ts new file mode 100644 index 00000000000..3dc37d3d8ed --- /dev/null +++ b/src/themes/eui-amsterdam/theme.ts @@ -0,0 +1,25 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { buildTheme, euiThemeAmsterdam } from '../../../src/services/theme'; + +export const EuiThemeAmsterdam = buildTheme( + euiThemeAmsterdam, + 'EUI_THEME_AMSTERDAM' +); From a94e18f53cd775ec6bd5450322fa7d7d2e69d2f3 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 16 Mar 2021 09:04:00 -0500 Subject: [PATCH 2/3] types --- src/global_styling/variables/_typography.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/global_styling/variables/_typography.ts b/src/global_styling/variables/_typography.ts index bf67b17f262..9842b74aa5f 100644 --- a/src/global_styling/variables/_typography.ts +++ b/src/global_styling/variables/_typography.ts @@ -39,7 +39,7 @@ const scale = { }; export const SCALES = keysOf(scale); -export type EuiFontScale = typeof SCALES[number]; +export type EuiFontScale = keyof typeof scale; const baseline = 4; const lineHeightMultiplier = 1.5; @@ -76,11 +76,13 @@ const fontWeight = { bold: '700', }; -// @ts-ignore HELP needed with TS -const fontSize: { - [mapType in EuiFontScale]: string; -} = SCALES.reduce((acc, elem) => { - // @ts-ignore HELP needed with TS +type EuiFontSize = { + [mapType in EuiFontScale]: { + fontSize: string; + lineHeight: string; + }; +}; +const fontSize = SCALES.reduce((acc, elem) => { acc[elem] = { fontSize: computed( [`${COLOR_MODE_KEY}.base`, `${COLOR_MODE_KEY}.font.scale.${elem}`], @@ -92,7 +94,7 @@ const fontSize: { ), }; return acc; -}, {}); +}, {} as EuiFontSize); // TODO -> MOVE TO COMPONENT // $euiCodeFontWeightRegular: 400; From b2cd915d2ac888442b185440a3b016c95f5e8eb5 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 16 Mar 2021 09:13:34 -0500 Subject: [PATCH 3/3] move all of ams --- src/services/index.ts | 2 +- src/services/theme/index.ts | 4 +- src/services/theme/theme.ts | 64 +++++++++++++++---------------- src/themes/eui-amsterdam/theme.ts | 37 +++++++++++++++++- 4 files changed, 70 insertions(+), 37 deletions(-) diff --git a/src/services/index.ts b/src/services/index.ts index c3348c28f30..c8a64fa2a7a 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -143,7 +143,7 @@ export { euiThemeDefault, EuiThemeDefault, // EuiThemeAmsterdam, - euiThemeAmsterdam, + // euiThemeAmsterdam, EuiThemeColor, EuiThemeColorMode, EuiThemeComputed, diff --git a/src/services/theme/index.ts b/src/services/theme/index.ts index 877b0efe132..43681333238 100644 --- a/src/services/theme/index.ts +++ b/src/services/theme/index.ts @@ -46,7 +46,5 @@ export { } from './types'; export { EuiThemeDefault, - euiThemeDefault, - // EuiThemeAmsterdam, - euiThemeAmsterdam, + euiThemeDefault, // EuiThemeAmsterdam, // euiThemeAmsterdam, } from './theme'; diff --git a/src/services/theme/theme.ts b/src/services/theme/theme.ts index 06f4fc612f5..b1b89ea5171 100644 --- a/src/services/theme/theme.ts +++ b/src/services/theme/theme.ts @@ -24,21 +24,21 @@ import { light_colors, dark_colors, } from '../../global_styling/variables/_colors'; -import { - light_colors_ams, - dark_colors_ams, -} from '../../themes/eui-amsterdam/global_styling/variables/_colors'; +// import { +// light_colors_ams, +// dark_colors_ams, +// } from '../../themes/eui-amsterdam/global_styling/variables/_colors'; import { base, size } from '../../global_styling/variables/_size'; import fonts from '../../global_styling/variables/_typography'; -import fonts_ams from '../../themes/eui-amsterdam/global_styling/variables/_typography'; +// import fonts_ams from '../../themes/eui-amsterdam/global_styling/variables/_typography'; import { border } from '../../global_styling/variables/_borders'; -import { border_ams } from '../../themes/eui-amsterdam/global_styling/variables/_borders'; +// import { border_ams } from '../../themes/eui-amsterdam/global_styling/variables/_borders'; import { titles } from '../../global_styling/variables/title'; -import { titles_ams } from '../../themes/eui-amsterdam/global_styling/variables/title'; +// import { titles_ams } from '../../themes/eui-amsterdam/global_styling/variables/title'; /** * Anything using `COLOR_MODE_KEY` directly, is something that should be top level, while @@ -78,31 +78,31 @@ export const EuiThemeDefault = buildTheme(euiThemeDefault, 'EUI_THEME_DEFAULT'); /* AMSTERDAM THEME */ -export const amsterdam_light = { - ...light_colors_ams, - base, - size, - ...fonts_ams, - border: border_ams, - titles: titles_ams, - // array: [1, 2, 3], -}; - -export const amsterdam_dark = { - ...dark_colors_ams, - base, - size, - ...fonts_ams, - border: border_ams, - titles: titles_ams, -}; - -export const euiThemeAmsterdam = { - [COLOR_MODE_KEY]: { - light: amsterdam_light, - dark: amsterdam_dark, - }, -}; +// export const amsterdam_light = { +// ...light_colors_ams, +// base, +// size, +// ...fonts_ams, +// border: border_ams, +// titles: titles_ams, +// // array: [1, 2, 3], +// }; + +// export const amsterdam_dark = { +// ...dark_colors_ams, +// base, +// size, +// ...fonts_ams, +// border: border_ams, +// titles: titles_ams, +// }; + +// export const euiThemeAmsterdam = { +// [COLOR_MODE_KEY]: { +// light: amsterdam_light, +// dark: amsterdam_dark, +// }, +// }; // export const EuiThemeAmsterdam = buildTheme( // euiThemeAmsterdam, diff --git a/src/themes/eui-amsterdam/theme.ts b/src/themes/eui-amsterdam/theme.ts index 3dc37d3d8ed..e9347b21d29 100644 --- a/src/themes/eui-amsterdam/theme.ts +++ b/src/themes/eui-amsterdam/theme.ts @@ -17,7 +17,42 @@ * under the License. */ -import { buildTheme, euiThemeAmsterdam } from '../../../src/services/theme'; +import { buildTheme } from '../../services/theme'; +import { COLOR_MODE_KEY } from '../../services/theme/utils'; +import { base, size } from '../../global_styling/variables/_size'; +import { + light_colors_ams, + dark_colors_ams, +} from './global_styling/variables/_colors'; +import fonts_ams from './global_styling/variables/_typography'; +import { border_ams } from './global_styling/variables/_borders'; +import { titles_ams } from './global_styling/variables/title'; + +export const amsterdam_light = { + ...light_colors_ams, + base, + size, + ...fonts_ams, + border: border_ams, + titles: titles_ams, + // array: [1, 2, 3], +}; + +export const amsterdam_dark = { + ...dark_colors_ams, + base, + size, + ...fonts_ams, + border: border_ams, + titles: titles_ams, +}; + +export const euiThemeAmsterdam = { + [COLOR_MODE_KEY]: { + light: amsterdam_light, + dark: amsterdam_dark, + }, +}; export const EuiThemeAmsterdam = buildTheme( euiThemeAmsterdam,