Merge pull request #43 from thompsongl/feature/css-in-js_themes

Support more files, and arrays in theme
cchaos · Mar 16, 2021 · 93098f7 · 93098f7
2 parents f24ec3d + b2cd915
commit 93098f7
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 62 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -161,7 +161,7 @@ export const getComputed = <T = EuiThemeShape>(
             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 = <T extends {}>(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
@@ -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
@@ -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'
+);