diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx index 1b3827246fe..49487d9e91b 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/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; diff --git a/src/services/index.ts b/src/services/index.ts index bc5538365f9..c8a64fa2a7a 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -142,8 +142,8 @@ export { Computed, euiThemeDefault, EuiThemeDefault, - EuiThemeAmsterdam, - euiThemeAmsterdam, + // EuiThemeAmsterdam, + // euiThemeAmsterdam, EuiThemeColor, EuiThemeColorMode, EuiThemeComputed, diff --git a/src/services/theme/index.ts b/src/services/theme/index.ts index d7e299b0a43..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 73d976e6958..b1b89ea5171 100644 --- a/src/services/theme/theme.ts +++ b/src/services/theme/theme.ts @@ -24,40 +24,32 @@ 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 * 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, @@ -87,34 +78,33 @@ 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, -}; - -export const amsterdam_dark = { - ...poles, - ...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, - 'EUI_THEME_AMSTERDAM' -); +// 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, +// '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..e9347b21d29 --- /dev/null +++ b/src/themes/eui-amsterdam/theme.ts @@ -0,0 +1,60 @@ +/* + * 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 } 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, + 'EUI_THEME_AMSTERDAM' +);