From 1477b7b0e9b3aa935635d13dc857091b16d5a712 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 22 Apr 2020 17:26:40 -0500 Subject: [PATCH 01/33] WIP: guide_rule conversion; cobbled together a theme --- .babelrc.js | 3 +- package.json | 4 + .../babel/proptypes-from-ts-props/index.js | 35 ++- .../src/components/guide_rule/_index.scss | 8 +- .../src/components/guide_rule/guide_rule.js | 45 ++-- .../guide_rule/guide_rule_description.js | 11 +- .../guide_rule/guide_rule_example.js | 65 ++++-- .../components/guide_rule/guide_rule_title.js | 17 +- .../components/with_theme/theme_context.tsx | 20 +- src/global_styling/functions/colors.ts | 178 +++++++++++++++ src/global_styling/functions/index.ts | 20 ++ src/global_styling/variables/borders.ts | 40 ++++ src/global_styling/variables/index.ts | 41 ++++ src/global_styling/variables/sizes.ts | 45 ++++ src/global_styling/variables/typography.ts | 133 +++++++++++ src/theme_dark.ts | 23 ++ src/theme_light.ts | 23 ++ src/themes/create_theme.ts | 28 +++ src/themes/eui/eui_colors_dark.ts | 130 +++++++++++ src/themes/eui/eui_colors_light.ts | 216 ++++++++++++++++++ yarn.lock | 189 ++++++++++++++- 21 files changed, 1207 insertions(+), 67 deletions(-) create mode 100644 src/global_styling/functions/colors.ts create mode 100644 src/global_styling/functions/index.ts create mode 100644 src/global_styling/variables/borders.ts create mode 100644 src/global_styling/variables/index.ts create mode 100644 src/global_styling/variables/sizes.ts create mode 100644 src/global_styling/variables/typography.ts create mode 100644 src/theme_dark.ts create mode 100644 src/theme_light.ts create mode 100644 src/themes/create_theme.ts create mode 100644 src/themes/eui/eui_colors_dark.ts create mode 100644 src/themes/eui/eui_colors_light.ts diff --git a/.babelrc.js b/.babelrc.js index c9f1b2e1a2e..555442b6ff6 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -18,7 +18,8 @@ module.exports = { "modules": process.env.BABEL_MODULES ? process.env.BABEL_MODULES : "commonjs" // babel's default is commonjs }], ["@babel/typescript", { isTSX: true, allExtensions: true }], - "@babel/react" + "@babel/react", + "@emotion/babel-preset-css-prop", ], "plugins": [ "@babel/plugin-syntax-dynamic-import", diff --git a/package.json b/package.json index 54fd1410123..58f28b2b68d 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "@types/react-virtualized": "^9.18.7", "chroma-js": "^2.0.4", "classnames": "^2.2.5", + "emotion-theming": "^10.0.27", "highlight.js": "^9.12.0", "html": "^1.0.0", "keymirror": "^0.1.1", @@ -85,6 +86,8 @@ "@elastic/charts": "^17.0.3", "@elastic/datemath": "^5.0.2", "@elastic/eslint-config-kibana": "^0.15.0", + "@emotion/babel-preset-css-prop": "^10.0.27", + "@emotion/core": "^10.0.28", "@svgr/core": "5.0.1", "@svgr/plugin-svgo": "^4.0.3", "@types/classnames": "^2.2.6", @@ -205,6 +208,7 @@ }, "peerDependencies": { "@elastic/datemath": "^5.0.2", + "@emotion/core": "10.x", "@types/react": "^16.9.23", "@types/react-dom": "^16.9.5", "moment": "^2.13.0", diff --git a/scripts/babel/proptypes-from-ts-props/index.js b/scripts/babel/proptypes-from-ts-props/index.js index c65a1cb4a32..acedc3414a0 100644 --- a/scripts/babel/proptypes-from-ts-props/index.js +++ b/scripts/babel/proptypes-from-ts-props/index.js @@ -1,3 +1,23 @@ +/* + * 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. + */ + + /* eslint-disable new-cap */ const fs = require('fs'); @@ -503,7 +523,7 @@ function getPropTypesForNode(node, optional, state) { // translates intersections (Foo & Bar & Baz) to a shape with the types' members (Foo, Bar, Baz) merged together case 'TSIntersectionType': const usableNodes = [...node.types].filter(node => { - let nodePropTypes = getPropTypesForNode(node, true, state); + const nodePropTypes = getPropTypesForNode(node, true, state); if ( types.isMemberExpression(nodePropTypes) && @@ -753,11 +773,14 @@ function getPropTypesForNode(node, optional, state) { ), [ types.arrayExpression( - node.properties.map(property => - types.stringLiteral( - property.key.name || property.key.name || property.key.value - ) - ) + node.properties.map(property => { + if (property.key) { + return types.stringLiteral( + property.key.name || property.key.value + ) + } + return null; + }) ), ] ); diff --git a/src-docs/src/components/guide_rule/_index.scss b/src-docs/src/components/guide_rule/_index.scss index 36a67dbe3bd..0bf8545890e 100644 --- a/src-docs/src/components/guide_rule/_index.scss +++ b/src-docs/src/components/guide_rule/_index.scss @@ -1,4 +1,4 @@ -@import 'guide_rule'; -@import 'guide_rule_title'; -@import 'guide_rule_example'; -@import 'guide_rule_description'; +// @import 'guide_rule'; +// @import 'guide_rule_title'; +// @import 'guide_rule_example'; +// @import 'guide_rule_description'; diff --git a/src-docs/src/components/guide_rule/guide_rule.js b/src-docs/src/components/guide_rule/guide_rule.js index bf90ec20189..41fcc1b05c9 100644 --- a/src-docs/src/components/guide_rule/guide_rule.js +++ b/src-docs/src/components/guide_rule/guide_rule.js @@ -1,25 +1,34 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import { css } from '@emotion/core'; +import { useTheme } from 'emotion-theming'; import { EuiFlexGroup } from '../../../../src/components'; import { GuideRuleDescription } from './guide_rule_description'; +import { componentClassName as guideRuleTitleClass } from './guide_rule_title'; -export const GuideRule = ({ - children, - className, - heading, - description, - ...rest -}) => { - const classes = classNames( - 'guideRule', - { - 'guideRule--hasHeading': heading, - 'guideRule--hasDescription': description, - }, - className - ); +export const GuideRule = ({ children, heading, description, ...rest }) => { + const theme = useTheme(); + + let siblingMarginTop = theme.sizes.euiSizeL; + if (description) { + siblingMarginTop = theme.sizes.euiSizeXXL * 1.5; + } + if (heading) { + siblingMarginTop = theme.sizes.euiSizeXXL * 2; + } + const guideRule = css` + margin-top: ${theme.sizes.euiSizeXXL}px; + + & + & { + margin-top: ${siblingMarginTop}px; + } + + // Not sure this pattern is great + .${guideRuleTitleClass} + & { + ${!heading && 'margin-top: 0'}; + } + `; let descriptionNode; @@ -30,10 +39,10 @@ export const GuideRule = ({ } return ( -
+
{descriptionNode} - + {children}
diff --git a/src-docs/src/components/guide_rule/guide_rule_description.js b/src-docs/src/components/guide_rule/guide_rule_description.js index d5a4ee1ab0c..8be9cc40edd 100644 --- a/src-docs/src/components/guide_rule/guide_rule_description.js +++ b/src-docs/src/components/guide_rule/guide_rule_description.js @@ -1,16 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import { css } from '@emotion/core'; +import { useTheme } from 'emotion-theming'; import { EuiText } from '../../../../src/components'; export const GuideRuleDescription = ({ children, - className, heading, description, ...rest }) => { - const classes = classNames('guideRule__description', className); + const theme = useTheme(); + const guideRule_Description = css` + margin-bottom: ${theme.sizes.euiSizeXL}px; + `; let headingNode; @@ -19,7 +22,7 @@ export const GuideRuleDescription = ({ } return ( -
+
{headingNode}

{description}

diff --git a/src-docs/src/components/guide_rule/guide_rule_example.js b/src-docs/src/components/guide_rule/guide_rule_example.js index 33f4a48cbb1..5700621edb8 100644 --- a/src-docs/src/components/guide_rule/guide_rule_example.js +++ b/src-docs/src/components/guide_rule/guide_rule_example.js @@ -1,13 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import { css } from '@emotion/core'; +import { useTheme } from 'emotion-theming'; import { EuiFlexItem, EuiPanel } from '../../../../src/components'; -const typeToClassNameMap = { - do: 'guideRule__example--do', - dont: 'guideRule__example--dont', -}; - const typeToSubtitleTextMap = { do: 'Do', dont: "Don't", @@ -15,7 +11,6 @@ const typeToSubtitleTextMap = { export const GuideRuleExample = ({ children, - className, type, text, panel, @@ -25,14 +20,46 @@ export const GuideRuleExample = ({ panelStyles, ...rest }) => { - const classes = classNames( - 'guideRule__example', - typeToClassNameMap[type], - { - 'guideRule__example--frame': frame, - }, - className - ); + const theme = useTheme(); + + const guideRuleExample = css` + pre { + margin-bottom: 0; + padding: 0; + } + `; + + const guideRuleExamplePanel = css` + border-bottom: 2px solid; + margin-bottom: ${theme.sizes.euiSizeS}px; + flex-grow: 1; /* 1 */ + + ${!panel && `padding-bottom: ${theme.sizes.euiSize}px;`} + + ${type === 'do' && `border-bottom-color: ${theme.colors.euiColorSuccess};`} + + ${type === 'dont' && `border-bottom-color: ${theme.colors.euiColorDanger};`} + + ${frame && + `padding: ${theme.sizes.euiSizeL}px; + background-color: ${theme.colors.euiColorLightestShade}; + display: flex; + align-items: center; + justify-content: space-around;`} + `; + + const guideRuleExampleCaption = css` + @include euiFontSizeS; // TODO + font-size: ${theme.typography.euiFontSizeS}px; // TODO + line-height: ${theme.typography.euiLineHeight}; // TODO + max-height: ${theme.typography.euiFontSizeS * + theme.typography.euiLineHeight}px; /* 1 */ + overflow-y: visible; /* 1 */ + + ${type === 'do' && `color: ${theme.colors.euiColorSuccessText};`} + + ${type === 'dont' && `color: ${theme.colors.euiColorDanger};`} + `; const ChildrenComponent = panel ? EuiPanel : 'div'; @@ -41,15 +68,13 @@ export const GuideRuleExample = ({ return ( - + {children} -
+
{text || typeToSubtitleTextMap[type]}
diff --git a/src-docs/src/components/guide_rule/guide_rule_title.js b/src-docs/src/components/guide_rule/guide_rule_title.js index 96810227590..2f059d314a0 100644 --- a/src-docs/src/components/guide_rule/guide_rule_title.js +++ b/src-docs/src/components/guide_rule/guide_rule_title.js @@ -1,13 +1,26 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import { css } from '@emotion/core'; +import { useTheme } from 'emotion-theming'; import { EuiTitle } from '../../../../src/components'; +export const componentClassName = 'euiGuideRuleTitle'; + export const GuideRuleTitle = ({ children, className, ...rest }) => { - const classes = classNames('guideRule__title', className); + const theme = useTheme(); + + const classes = classNames(componentClassName, className); + + const guideRuleTitle = css` + margin-top: ${theme.sizes.euiSizeXXL}px; + border-top: 1px solid ${theme.borders.euiBorderColor}; + padding-top: ${theme.sizes.euiSizeXXL}px; + margin-bottom: ${theme.sizes.euiSizeS}px; + `; return ( - +

{children}

 ); diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx index b64bc758eb8..9e9031071ab 100644 --- a/src-docs/src/components/with_theme/theme_context.tsx +++ b/src-docs/src/components/with_theme/theme_context.tsx @@ -1,5 +1,8 @@ import React from 'react'; +import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'; import { EUI_THEMES, EUI_THEME } from '../../../../src/themes'; +import EuiLightTheme from '../../../../src/theme_light'; +import EuiDarkTheme from '../../../../src/theme_dark'; // @ts-ignore import { applyTheme } from '../../services'; @@ -38,14 +41,17 @@ export class ThemeProvider extends React.Component { render() { const { children } = this.props; const { theme } = this.state; + const fullTheme = theme === 'light' ? EuiLightTheme : EuiDarkTheme; return ( - - {children} - + + + {children} + + ); } } diff --git a/src/global_styling/functions/colors.ts b/src/global_styling/functions/colors.ts new file mode 100644 index 00000000000..beff85aeb6f --- /dev/null +++ b/src/global_styling/functions/colors.ts @@ -0,0 +1,178 @@ +/* + * 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. + */ + +// // Converting a normal hex color to RBG +// @function hexToRGB($color) { +// @return 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29'; +// } +// +// // Mixes a provided color with white. +// @function tint($color, $percent) { +// @return mix($euiColorGhost, $color, $percent); +// } +// +// // Mixes a provided color with black. +// @function shade($color, $percent) { +// @return mix($euiColorInk, $color, $percent); +// } +// +// // For theming. Checks the text color and tells us whether it's light or dark. +// // Based on that we either tint (add white) or shade (add black). +// @function tintOrShade($color, $tint, $shade) { +// @if (lightness($euiTextColor) > 50) { +// @return shade($color, $shade); +// } @else { +// @return tint($color, $tint); +// } +// } +// +// // The reverse of the above +// @function shadeOrTint($color, $shade, $tint) { +// @if (lightness($euiTextColor) < 50) { +// @return shade($color, $shade); +// } @else { +// @return tint($color, $tint); +// } +// } +// +// // Similar to above, but uses the light or dark color based +// // on whether it's the light or dark theme +// @function lightOrDarkTheme($lightColor, $darkColor) { +// @if (lightness($euiTextColor) < 50) { +// @return $lightColor; +// } @else { +// @return $darkColor; +// } +// } +// +// // Calculates luminance, which is better than brightness for checking colors +// // pow, nth functions come from the _math.scss functions +// @function luminance($color) { +// // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef +// $rgba: red($color), green($color), blue($color); +// $rgba2: (); +// +// @for $i from 1 through 3 { +// $rgb: nth($rgba, $i); +// $rgb: $rgb / 255; +// +// $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4)); +// +// $rgba2: append($rgba2, $rgb); +// } +// +// @return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + .0722 * nth($rgba2, 3); +// } +// +// // Calculate contrast +// @function contrastRatio($background, $foreground) { +// $backgroundLum: luminance($background) + .05; +// $foregroundLum: luminance($foreground) + .05; +// +// @return max($backgroundLum, $foregroundLum) / min($backgroundLum, $foregroundLum); +// } +// +// // Given $color, decide whether $lightText or $darkText should be used as the text color +// // ex: chooseLightOrDarkText(#EEE, #FFF, #000) would return #000 because it has +// // a higher contrast than #FFF against a #EEE background. +// @function chooseLightOrDarkText($background, $lightText, $darkText) { +// $lightContrast: contrastRatio($background, $lightText); +// $darkContrast: contrastRatio($background, $darkText); +// +// @if ($lightContrast > $darkContrast) { +// @return $lightText; +// } @else { +// @return $darkText; +// } +// } +// +// // Given a $foreground and a $background, make the $foreground AA accessibility by slightly +// // adjusting it till the contrast is high enough +// // By default it will compare against the page background color +// +// // ex: makeContrastColor($lightPink, #FFF) would continually shade the pink until +// // it had higher than 4.5 contrast on a white background. +// @function makeHighContrastColor($foreground, $background: $euiPageBackgroundColor, $ratio: 4.5) { +// $contrast: contrastRatio($foreground, $background); +// +// // Determine the lightness factor of the background color first to +// // determine whether to shade or tint the foreground. +// $brightness: lightness($background); +// +// $highContrastTextColor: $foreground; +// +// @while ($contrast < $ratio) { +// @if ($brightness > 50) { +// $highContrastTextColor: shade($highContrastTextColor, 5%); +// } @else { +// $highContrastTextColor: tint($highContrastTextColor, 5%); +// } +// +// $contrast: contrastRatio($highContrastTextColor, $background); +// +// @if (lightness($highContrastTextColor) < 5) { +// @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for light mode.'; +// @return $highContrastTextColor; +// } +// +// @if (lightness($highContrastTextColor) > 95) { +// @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for dark mode.'; +// @return $highContrastTextColor; +// } +// } +// +// @return $highContrastTextColor; +// } +// +// // Graphics such as stand alone icons and pieces of a graph only need a minimum ratio of 3:1 with its background. +// // Therefore, we can reuse the `makeHighContrastColor()` function but only attain a min contrast of 3.0. +// // It is still recommended to use `makeHighContrastColor()` to attain a 4.5:1 ratio if the graphic is small or thinly stroked. +// // https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum) +// @function makeGraphicContrastColor($color, $background: $euiPageBackgroundColor) { +// @return makeHighContrastColor($color, $background, 3); +// } + +export const makeHighContrastColor = (color: string, color2?: string) => { + if (color2) return color; + return color; +}; +export const shade = (color: string, param1?: string) => { + if (param1) return color; + return color; +}; +export const tint = (color: string, param1?: string) => { + if (param1) return color; + return color; +}; +export const tintOrShade = ( + color: string, + param1?: string, + param2?: string +) => { + if (param1 || param2) return color; + return color; +}; +export const shadeOrTint = ( + color: string, + param1?: string, + param2?: string +) => { + if (param1 || param2) return color; + return color; +}; diff --git a/src/global_styling/functions/index.ts b/src/global_styling/functions/index.ts new file mode 100644 index 00000000000..0593e2431ea --- /dev/null +++ b/src/global_styling/functions/index.ts @@ -0,0 +1,20 @@ +/* + * 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. + */ + +export * from './colors'; diff --git a/src/global_styling/variables/borders.ts b/src/global_styling/variables/borders.ts new file mode 100644 index 00000000000..799284333e1 --- /dev/null +++ b/src/global_styling/variables/borders.ts @@ -0,0 +1,40 @@ +/* + * 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. + */ + +export const createBorders = (colors: any) => { + const euiBorderWidthThin = '1px'; + const euiBorderWidthThick = '2px'; + + const euiBorderColor = colors.euiColorLightShade; + const euiBorderRadius = '4px'; + const euiBorderThick = `${euiBorderWidthThick} solid ${euiBorderColor}`; + const euiBorderThin = `${euiBorderWidthThin} solid ${euiBorderColor}`; + const euiBorderEditable = `${euiBorderWidthThick} dotted ${euiBorderColor}`; + + const borders = { + euiBorderWidthThin, + euiBorderWidthThick, + euiBorderColor, + euiBorderRadius, + euiBorderThick, + euiBorderThin, + euiBorderEditable, + }; + return borders; +}; diff --git a/src/global_styling/variables/index.ts b/src/global_styling/variables/index.ts new file mode 100644 index 00000000000..a190e4f4971 --- /dev/null +++ b/src/global_styling/variables/index.ts @@ -0,0 +1,41 @@ +/* + * 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. + */ + +// -------------------------------------------------------------------------------------- +// EUI global variables +// -------------------------------------------------------------------------------------- +// This module contains all global variables available within EUI. Every variable in this +// document should be prefixed with $eui. This lets us know where the variable is +// coming from when looking inside the individual component files. Any component local +// variables should be declared at the top of those documents prefixed with $componentName. + +// Import order is important. Size and color..etc are used in other variables. +export { sizes } from './sizes'; +// import colors from './colors'; +// export {} from './animations'; +export { typography } from './typography'; +export { createBorders } from './borders'; +// export {} from './shadows'; +// export {} from './states'; +// export {} from './z_index'; +// +// export {} from './buttons'; +// export {} from './form'; +// export {} from './panel'; +// export {} from './tool_tip'; diff --git a/src/global_styling/variables/sizes.ts b/src/global_styling/variables/sizes.ts new file mode 100644 index 00000000000..11919674d3a --- /dev/null +++ b/src/global_styling/variables/sizes.ts @@ -0,0 +1,45 @@ +/* + * 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. + */ + +const euiSize = 16; + +const sizeScale = { + euiSizeXS: euiSize * 0.25, + euiSizeS: euiSize * 0.5, + euiSizeM: euiSize * 0.75, + euiSizeL: euiSize * 1.5, + euiSizeXL: euiSize * 2, + euiSizeXXL: euiSize * 2.5, +}; + +const euiButtonMinWidth = euiSize * 7; + +const euiScrollBar = euiSize; +const euiScrollBarCorner = sizeScale.euiSizeS * 0.75; + +const sizes = { + euiSize, + ...sizeScale, + euiButtonMinWidth, + euiScrollBar, + euiScrollBarCorner, +}; + +export default sizes; +export { sizes, euiSize }; diff --git a/src/global_styling/variables/typography.ts b/src/global_styling/variables/typography.ts new file mode 100644 index 00000000000..d1179f0ac57 --- /dev/null +++ b/src/global_styling/variables/typography.ts @@ -0,0 +1,133 @@ +/* + * 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 { euiSize } from './sizes'; +// Some mixins that help us deal with browser scaling of text more consistantly. +// Essentially, fonts across eui should scale agains the root html element, not +// against parent inheritance. + +// Typography mixins + +const convertToRem = (size: number) => `${size / euiFontSize}rem`; + +// Spit out rem and px +const fontSize = (size: number = euiFontSize) => ` + font-size: ${size}px; + font-size: ${convertToRem(size)}; +`; + +// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline. +// EX: A proper line-height for text is 1.5 times the font-size. +// If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the +// text stays on the baseline, we pass a multiplier to calculate a line-height in rems. +const _lineHeightFromBaseline = (multiplier: number = 3) => + convertToRem((euiFontSize / 2) * multiplier); + +// ?? +const lineHeightFromBaseline = (multiplier: number = 3) => + `line-height: ${_lineHeightFromBaseline(multiplier)}`; + +// Families +const families = { + euiFontFamily: + "'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + euiCodeFontFamily: "'Roboto Mono', Consolas, Menlo, Courier, monospace", +}; + +// Careful using ligatures. Code editors like ACE will often error because of width calculations +const euiFontFeatureSettings = "'calt' 1, 'kern' 1, 'liga' 1"; + +// Font sizes -- scale is loosely based on Major Third (1.250) +const euiTextScale = [2.25, 1.75, 1.25, 1.125, 1, 0.875, 0.75]; + +const euiFontSize = euiSize; // 5th position in scale +const sizes = { + euiFontSizeXS: euiFontSize * euiTextScale[6], // 12px + euiFontSizeS: euiFontSize * euiTextScale[5], // 14px + euiFontSizeM: euiFontSize * euiTextScale[3], // 18px + euiFontSizeL: euiFontSize * euiTextScale[2], // 20px + euiFontSizeXL: euiFontSize * euiTextScale[1], // 28px + euiFontSizeXXL: euiFontSize * euiTextScale[0], // 36px +}; + +// Line height +const euiLineHeight = 1.5; + +// Font weights +const weights = { + euiFontWeightLight: 300, + euiFontWeightRegular: 400, + euiFontWeightMedium: 500, + euiFontWeightSemiBold: 600, + euiFontWeightBold: 700, +}; + +// Titles map +// Lists all the properties per EuiTitle size that then gets looped through to create the selectors. +// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves +const titles = { + xxxs: ` + font-size: ${sizes.euiFontSizeXS}px, + line-height: ${lineHeightFromBaseline(3)}, + font-weight: ${weights.euiFontWeightBold}, + `, + xxs: ` + font-size: ${sizes.euiFontSizeS}px, + line-height: ${lineHeightFromBaseline(3)}, + font-weight: ${weights.euiFontWeightBold}, + `, + xs: ` + font-size: ${euiFontSize}px, + line-height: ${lineHeightFromBaseline(3)}, + font-weight: ${weights.euiFontWeightSemiBold}, + letter-spacing: -.02em, + `, + s: ` + font-size: ${sizes.euiFontSizeL}px, + line-heigh': ${lineHeightFromBaseline(4)}, + font-weight: ${weights.euiFontWeightMedium}, + letter-spacing: -.025em, + `, + m: ` + font-size: ${sizes.euiFontSizeXL}px, + line-height: ${lineHeightFromBaseline(5)}, + font-weight: ${weights.euiFontWeightLight}, + letter-spacing: -.04em, + `, + l: ` + font-size: ${sizes.euiFontSizeXXL}px, + line-height: ${lineHeightFromBaseline(6)}, + font-weight: ${weights.euiFontWeightLight}, + letter-spacing: -.03em, + `, +}; + +const typography = { + fontSize, + ...families, + euiFontFeatureSettings, + euiTextScale, + ...sizes, + euiLineHeight, + ...weights, + ...titles, +}; + +export default typography; +export { typography }; diff --git a/src/theme_dark.ts b/src/theme_dark.ts new file mode 100644 index 00000000000..430564f098f --- /dev/null +++ b/src/theme_dark.ts @@ -0,0 +1,23 @@ +/* + * 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 { createTheme } from './themes/create_theme'; +import euiColorsDark from './themes/eui/eui_colors_dark'; + +export default createTheme(euiColorsDark); diff --git a/src/theme_light.ts b/src/theme_light.ts new file mode 100644 index 00000000000..3356f144ff2 --- /dev/null +++ b/src/theme_light.ts @@ -0,0 +1,23 @@ +/* + * 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 { createTheme } from './themes/create_theme'; +import euiColorsLight from './themes/eui/eui_colors_light'; + +export default createTheme(euiColorsLight); diff --git a/src/themes/create_theme.ts b/src/themes/create_theme.ts new file mode 100644 index 00000000000..4394c47d8da --- /dev/null +++ b/src/themes/create_theme.ts @@ -0,0 +1,28 @@ +/* + * 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 { createBorders, sizes, typography } from '../global_styling/variables'; +export const createTheme = (colors: any) => { + return { + colors, + sizes, + typography, + borders: createBorders(colors), + }; +}; diff --git a/src/themes/eui/eui_colors_dark.ts b/src/themes/eui/eui_colors_dark.ts new file mode 100644 index 00000000000..a01327b1c46 --- /dev/null +++ b/src/themes/eui/eui_colors_dark.ts @@ -0,0 +1,130 @@ +/* + * 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 euiColorsLight from './eui_colors_light'; +import { + makeHighContrastColor, + shade, + tint, +} from '../../global_styling/functions'; + +const coreColors = { + euiColorPrimary: '#1BA9F5', + euiColorSecondary: '#7DE2D1', + euiColorAccent: '#F990C0', + euiColorHighlight: '#2E2D25', +}; + +const genericColors = { + // Core + ...coreColors, + + // These colors stay the same no matter the theme + euiColorGhost: '#FFF', + euiColorInk: '#000', + + // Status + euiColorSuccess: coreColors.euiColorSecondary, + euiColorDanger: '#F66', + euiColorWarning: '#FFCE7A', + + // Grays + euiColorEmptyShade: '#1D1E24', + euiColorLightestShade: '#25262E', + euiColorLightShade: '#343741', + euiColorMediumShade: '#535966', + euiColorDarkShade: '#98A2B3', + euiColorDarkestShade: '#D4DAE5', + euiColorFullShade: '#FFF', +}; + +const euiTextColor = '#DFE5EF'; +const elementColors = { + euiTextColor, + euiTitleColor: euiTextColor, + euiLinkColor: genericColors.euiColorPrimary, + euiTextSubduedColor: makeHighContrastColor(genericColors.euiColorMediumShade), + euiPageBackgroundColor: shade(genericColors.euiColorLightestShade, '30%'), + euiFocusBackgroundColor: '#232635', +}; + +// // Variations from core +// $euiShadowColor: #000; +// $euiShadowColorLarge: #000; + +// Contrasty text variants +const euiColorPrimaryText = makeHighContrastColor( + genericColors.euiColorPrimary +); +const euiColorSecondaryText = makeHighContrastColor( + genericColors.euiColorSecondary +); +const textColors = { + euiColorPrimaryText, + euiColorSecondaryText, + euiColorAccentText: makeHighContrastColor(genericColors.euiColorAccent), + euiColorWarningText: makeHighContrastColor(genericColors.euiColorWarning), + euiColorDangerText: makeHighContrastColor( + genericColors.euiColorDanger, + genericColors.euiColorLightShade + ), + euiColorSuccessText: euiColorSecondaryText, +}; + +// Charts +const euiColorChartLine = genericColors.euiColorLightShade; +const euiColorChartBand = tint(genericColors.euiColorLightShade, '2.5%'); + +// Code +const codeBlockColors = { + euiCodeBlockCommentColor: '#656565', + euiCodeBlockSelectorTagColor: '#C792EA', + euiCodeBlockStringColor: '#C3E88D', + euiCodeBlockNumberColor: '#F77669', + euiCodeBlockKeywordColor: '#C792EA', + euiCodeBlockFunctionTitleColor: '#75A5FF', + euiCodeBlockTagColor: '#ABB2BF', + euiCodeBlockNameColor: '#E06C75', + euiCodeBlockTypeColor: '#DA4939', + euiCodeBlockAttributeColor: '#80CBBF', + euiCodeBlockSymbolColor: '#C792EA', + euiCodeBlockParamsColor: '#EEFFF7', + euiCodeBlockMetaColor: '#75A5FF', + euiCodeBlockTitleColor: '#75A5FF', + euiCodeBlockSectionColor: '#FFC66D', + euiCodeBlockAdditionBackgroundColor: '#144212', + euiCodeBlockAdditionColor: '#E6E1DC', + euiCodeBlockDeletionBackgroundColor: '#600', + euiCodeBlockDeletionColor: '#E6E1DC', + euiCodeBlockSelectorClassColor: '#FFCB68', + euiCodeBlockSelectorIdColor: '#F77669', +}; + +const colors = { + ...euiColorsLight, + ...genericColors, + ...elementColors, + ...textColors, + euiColorChartLine, + euiColorChartBand, + ...codeBlockColors, +}; + +export default colors; +export { genericColors }; diff --git a/src/themes/eui/eui_colors_light.ts b/src/themes/eui/eui_colors_light.ts new file mode 100644 index 00000000000..9e196b98b36 --- /dev/null +++ b/src/themes/eui/eui_colors_light.ts @@ -0,0 +1,216 @@ +/* + * 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 { + makeHighContrastColor, + shade, + shadeOrTint, + tintOrShade, +} from '../../global_styling/functions'; + +const coreColors = { + // Core + euiColorPrimary: '#006BB4', + euiColorSecondary: '#017D73', + euiColorAccent: '#DD0A73', + euiColorHighlight: '#FFFCDD', +}; + +const genericColors = { + // Core + ...coreColors, + + // These colors stay the same no matter the theme + euiColorGhost: '#FFF', + euiColorInk: '#000', + + // Status + euiColorSuccess: coreColors.euiColorSecondary, + euiColorDanger: '#BD271E', + euiColorWarning: '#F5A700', + + // Grays + euiColorEmptyShade: '#FFF', + euiColorLightestShade: '#F5F7FA', + euiColorLightShade: '#D3DAE6', + euiColorMediumShade: '#98A2B3', + euiColorDarkShade: '#69707D', + euiColorDarkestShade: '#343741', + euiColorFullShade: '#000', +}; + +// Every color below must be based mathmatically on the set above and in a particular order. +const euiTextColor = genericColors.euiColorDarkestShade; +const elementColors = { + euiTextColor, + euiPageBackgroundColor: tintOrShade( + genericColors.euiColorLightestShade, + '50%', + '30%' + ), + euiTextSubduedColor: makeHighContrastColor(genericColors.euiColorMediumShade), + euiTitleColor: shadeOrTint(euiTextColor, '50%', '0%'), + euiLinkColor: genericColors.euiColorPrimary, + euiFocusBackgroundColor: tintOrShade( + genericColors.euiColorPrimary, + '90%', + '50%' + ), +}; + +// Contrasty text variants +const euiColorPrimaryText = makeHighContrastColor( + genericColors.euiColorPrimary +); +const euiColorSecondaryText = makeHighContrastColor( + genericColors.euiColorSecondary +); +const textColors = { + euiColorPrimaryText, + euiColorSecondaryText, + euiColorAccentText: makeHighContrastColor(genericColors.euiColorAccent), + euiColorWarningText: makeHighContrastColor(genericColors.euiColorWarning), + euiColorDangerText: makeHighContrastColor(genericColors.euiColorDanger), + euiColorSuccessText: euiColorSecondaryText, +}; + +// Visualization colors + +// Maps allow for easier JSON usage +// Use map_merge(euiColorVisColors, yourMap) to change individual colors after importing ths file +// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function +const euiPaletteColorBlind = { + euiColorVis0: { + graphic: '#54B399', + behindText: '#6DCCB1', + }, + euiColorVis1: { + graphic: '#6092C0', + behindText: '#79AAD9', + }, + euiColorVis2: { + graphic: '#D36086', + behindText: '#EE789D', + }, + euiColorVis3: { + graphic: '#9170B8', + behindText: '#A987D1', + }, + euiColorVis4: { + graphic: '#CA8EAE', + behindText: '#E4A6C7', + }, + euiColorVis5: { + graphic: '#D6BF57', + behindText: '#F1D86F', + }, + euiColorVis6: { + graphic: '#B9A888', + behindText: '#D2C0A0', + }, + euiColorVis7: { + graphic: '#DA8B45', + behindText: '#F5A35C', + }, + euiColorVis8: { + graphic: '#AA6556', + behindText: '#C47C6C', + }, + euiColorVis9: { + graphic: '#E7664C', + behindText: '#FF7E62', + }, +}; + +// euiPaletteColorBlindKeys: euiPaletteColorBlind; +// +const euiColorVisGraphic = { + euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic, + euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic, + euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic, + euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic, + euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic, + euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic, + euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic, + euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic, + euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic, + euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic, +}; + +const euiColorVisBehindText = { + euiColorVis0: euiPaletteColorBlind.euiColorVis0.behindText, + euiColorVis1: euiPaletteColorBlind.euiColorVis1.behindText, + euiColorVis2: euiPaletteColorBlind.euiColorVis2.behindText, + euiColorVis3: euiPaletteColorBlind.euiColorVis3.behindText, + euiColorVis4: euiPaletteColorBlind.euiColorVis4.behindText, + euiColorVis5: euiPaletteColorBlind.euiColorVis5.behindText, + euiColorVis6: euiPaletteColorBlind.euiColorVis6.behindText, + euiColorVis7: euiPaletteColorBlind.euiColorVis7.behindText, + euiColorVis8: euiPaletteColorBlind.euiColorVis8.behindText, + euiColorVis9: euiPaletteColorBlind.euiColorVis9.behindText, +}; + +// // Charts +const euiColorChartLines = shade(genericColors.euiColorLightestShade, '3%'); +const euiColorChartBand = genericColors.euiColorLightestShade; +// +// Code +const codeBlockColors = { + euiCodeBlockBackgroundColor: genericColors.euiColorLightestShade, + euiCodeBlockColor: euiTextColor, + euiCodeBlockSelectedBackgroundColor: 'inherit', + euiCodeBlockCommentColor: '#998', + euiCodeBlockSelectorTagColor: 'inherit', + euiCodeBlockStringColor: '#DD0A73', + euiCodeBlockNumberColor: '#00A69B', + euiCodeBlockKeywordColor: '#333', + euiCodeBlockFunctionTitleColor: 'inherit', + euiCodeBlockTagColor: '#0079A5', + euiCodeBlockNameColor: 'inherit', + euiCodeBlockTypeColor: '#0079A5', + euiCodeBlockAttributeColor: 'inherit', + euiCodeBlockSymbolColor: '#990073', + euiCodeBlockParamsColor: 'inherit', + euiCodeBlockMetaColor: '#999', + euiCodeBlockTitleColor: '#900', + euiCodeBlockRegexpColor: '#009926', + euiCodeBlockBuiltInColor: '#0086B3', + euiCodeBlockSectionColor: '#FFC66D', + euiCodeBlockAdditionBackgroundColor: '#DFD', + euiCodeBlockAdditionColor: 'inherit', + euiCodeBlockDeletionBackgroundColor: '#FDD', + euiCodeBlockDeletionColor: 'inherit', + euiCodeBlockSelectorClassColor: 'inherit', + euiCodeBlockSelectorIdColor: 'inherit', +}; + +const colors = { + ...genericColors, + ...elementColors, + ...textColors, + ...euiPaletteColorBlind, + euiColorChartLines, + euiColorChartBand, + ...codeBlockColors, + ...euiColorVisGraphic, + ...euiColorVisBehindText, +}; + +export default colors; +export { genericColors }; diff --git a/yarn.lock b/yarn.lock index 6ef643a020c..e868b4350c2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -117,6 +117,15 @@ "@babel/helper-explode-assignable-expression" "^7.8.3" "@babel/types" "^7.8.3" +"@babel/helper-builder-react-jsx-experimental@^7.9.0": + version "7.9.0" + resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.9.0.tgz#066d80262ade488f9c1b1823ce5db88a4cedaa43" + integrity sha512-3xJEiyuYU4Q/Ar9BsHisgdxZsRlsShMe90URZ0e6przL26CCs8NJbDoxH94kKT17PcxlMhsCAwZd90evCo26VQ== + dependencies: + "@babel/helper-annotate-as-pure" "^7.8.3" + "@babel/helper-module-imports" "^7.8.3" + "@babel/types" "^7.9.0" + "@babel/helper-builder-react-jsx@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.8.3.tgz#dee98d7d79cc1f003d80b76fe01c7f8945665ff6" @@ -125,6 +134,14 @@ "@babel/types" "^7.8.3" esutils "^2.0.0" +"@babel/helper-builder-react-jsx@^7.9.0": + version "7.9.0" + resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.9.0.tgz#16bf391990b57732700a3278d4d9a81231ea8d32" + integrity sha512-weiIo4gaoGgnhff54GQ3P5wsUQmnSwpkvU0r6ZHq6TzoSzKy4JxHEgnxNytaKbov2a9z/CVNyzliuCOUPEX3Jw== + dependencies: + "@babel/helper-annotate-as-pure" "^7.8.3" + "@babel/types" "^7.9.0" + "@babel/helper-call-delegate@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.8.3.tgz#de82619898aa605d409c42be6ffb8d7204579692" @@ -228,7 +245,7 @@ dependencies: "@babel/types" "^7.8.3" -"@babel/helper-module-imports@^7.8.3": +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498" integrity sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg== @@ -314,6 +331,11 @@ dependencies: "@babel/types" "^7.8.3" +"@babel/helper-validator-identifier@^7.9.0": + version "7.9.0" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.0.tgz#ad53562a7fc29b3b9a91bbf7d10397fd146346ed" + integrity sha512-6G8bQKjOh+of4PV/ThDm/rRqlU7+IGoJuofpagU5GlEl29Vv0RGqqt86ZGRV8ZuSOY3o+8yXl5y782SMcG7SHw== + "@babel/helper-wrap-function@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz#9dbdb2bb55ef14aaa01fe8c99b629bd5352d8610" @@ -464,7 +486,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.8.0" -"@babel/plugin-syntax-jsx@^7.8.3": +"@babel/plugin-syntax-jsx@^7.2.0", "@babel/plugin-syntax-jsx@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz#521b06c83c40480f1e58b4fd33b92eceb1d6ea94" integrity sha512-WxdW9xyLgBdefoo0Ynn3MRSkhe5tFVxxKNVdnZSh318WrG2e2jH+E9wd/++JsqcLJZPfz87njQJ8j2Upjm0M0A== @@ -729,6 +751,16 @@ "@babel/helper-plugin-utils" "^7.8.3" "@babel/plugin-syntax-jsx" "^7.8.3" +"@babel/plugin-transform-react-jsx@^7.3.0": + version "7.9.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.9.4.tgz#86f576c8540bd06d0e95e0b61ea76d55f6cbd03f" + integrity sha512-Mjqf3pZBNLt854CK0C/kRuXAnE6H/bo7xYojP+WGtX8glDGSibcwnsWwhwoSuRg0+EBnxPC1ouVnuetUIlPSAw== + dependencies: + "@babel/helper-builder-react-jsx" "^7.9.0" + "@babel/helper-builder-react-jsx-experimental" "^7.9.0" + "@babel/helper-plugin-utils" "^7.8.3" + "@babel/plugin-syntax-jsx" "^7.8.3" + "@babel/plugin-transform-react-jsx@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.8.3.tgz#4220349c0390fdefa505365f68c103562ab2fc4a" @@ -913,7 +945,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.4.5": +"@babel/runtime@^7.4.5", "@babel/runtime@^7.7.2": version "7.9.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06" integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q== @@ -993,6 +1025,15 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@babel/types@^7.9.0": + version "7.9.0" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.0.tgz#00b064c3df83ad32b2dbf5ff07312b15c7f1efb5" + integrity sha512-BS9JKfXkzzJl8RluW4JGknzpiUV7ZrvTayM6yfqLTVBEnFtyowVIOu6rqxRd5cVO6yGoWf4T8u8dgK9oB+GCng== + dependencies: + "@babel/helper-validator-identifier" "^7.9.0" + lodash "^4.17.13" + to-fast-properties "^2.0.0" + "@elastic/charts@^17.0.3": version "17.0.3" resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-17.0.3.tgz#4117e18f572b751519a07d3ddfc0763e46f50e95" @@ -1031,6 +1072,100 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-config-kibana/-/eslint-config-kibana-0.15.0.tgz#a552793497cdfc1829c2f9b7cd7018eb008f1606" integrity sha1-pVJ5NJfN/Bgpwvm3zXAY6wCPFgY= +"@emotion/babel-plugin-jsx-pragmatic@^0.1.5": + version "0.1.5" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz#27debfe9c27c4d83574d509787ae553bf8a34d7e" + integrity sha512-y+3AJ0SItMDaAgGPVkQBC/S/BaqaPACkQ6MyCI2CUlrjTxKttTVfD3TMtcs7vLEcLxqzZ1xiG0vzwCXjhopawQ== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + +"@emotion/babel-preset-css-prop@^10.0.27": + version "10.0.27" + resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.0.27.tgz#58868d9a6afee0eeaeb0fa9dc5ccb1b12d4f786b" + integrity sha512-rducrjTpLGDholp0l2l4pXqpzAqYYGMg/x4IteO0db2smf6zegn6RRZdDnbaoMSs63tfPWgo2WukT1/F1gX/AA== + dependencies: + "@babel/plugin-transform-react-jsx" "^7.3.0" + "@babel/runtime" "^7.5.5" + "@emotion/babel-plugin-jsx-pragmatic" "^0.1.5" + babel-plugin-emotion "^10.0.27" + +"@emotion/cache@^10.0.27": + version "10.0.29" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0" + integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ== + dependencies: + "@emotion/sheet" "0.9.4" + "@emotion/stylis" "0.8.5" + "@emotion/utils" "0.11.3" + "@emotion/weak-memoize" "0.2.5" + +"@emotion/core@^10.0.28": + version "10.0.28" + resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.28.tgz#bb65af7262a234593a9e952c041d0f1c9b9bef3d" + integrity sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA== + dependencies: + "@babel/runtime" "^7.5.5" + "@emotion/cache" "^10.0.27" + "@emotion/css" "^10.0.27" + "@emotion/serialize" "^0.11.15" + "@emotion/sheet" "0.9.4" + "@emotion/utils" "0.11.3" + +"@emotion/css@^10.0.27": + version "10.0.27" + resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c" + integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw== + dependencies: + "@emotion/serialize" "^0.11.15" + "@emotion/utils" "0.11.3" + babel-plugin-emotion "^10.0.27" + +"@emotion/hash@0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" + integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== + +"@emotion/memoize@0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + +"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16": + version "0.11.16" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad" + integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg== + dependencies: + "@emotion/hash" "0.8.0" + "@emotion/memoize" "0.7.4" + "@emotion/unitless" "0.7.5" + "@emotion/utils" "0.11.3" + csstype "^2.5.7" + +"@emotion/sheet@0.9.4": + version "0.9.4" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5" + integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA== + +"@emotion/stylis@0.8.5": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + +"@emotion/unitless@0.7.5": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + +"@emotion/utils@0.11.3": + version "0.11.3" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924" + integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw== + +"@emotion/weak-memoize@0.2.5": + version "0.2.5" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" + integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== + "@sentry/core@4.2.4": version "4.2.4" resolved "https://registry.yarnpkg.com/@sentry/core/-/core-4.2.4.tgz#e4a331512a4db149f14a2976b75a5b3c8ef47f87" @@ -2295,6 +2430,22 @@ babel-plugin-dynamic-import-node@^2.3.0: dependencies: object.assign "^4.1.0" +babel-plugin-emotion@^10.0.27: + version "10.0.29" + resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.29.tgz#89d8e497091fcd3d10331f097f1471e4cc3f35b4" + integrity sha512-7Jpi1OCxjyz0k163lKtqP+LHMg5z3S6A7vMBfHnF06l2unmtsOmFDzZBpGf0CWo1G4m8UACfVcDJiSiRuu/cSw== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@emotion/hash" "0.8.0" + "@emotion/memoize" "0.7.4" + "@emotion/serialize" "^0.11.16" + babel-plugin-macros "^2.0.0" + babel-plugin-syntax-jsx "^6.18.0" + convert-source-map "^1.5.0" + escape-string-regexp "^1.0.5" + find-root "^1.1.0" + source-map "^0.5.7" + babel-plugin-inline-react-svg@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/babel-plugin-inline-react-svg/-/babel-plugin-inline-react-svg-1.0.1.tgz#1457edae1035a12b3c5026ef28a1239edc71d2a2" @@ -2320,6 +2471,15 @@ babel-plugin-jest-hoist@^24.1.0: resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.1.0.tgz#dfecc491fb15e2668abbd690a697a8fd1411a7f8" integrity sha512-gljYrZz8w1b6fJzKcsfKsipSru2DU2DmQ39aB6nV3xQ0DDv3zpIzKGortA5gknrhNnPN8DweaEgrnZdmbGmhnw== +babel-plugin-macros@^2.0.0: + version "2.8.0" + resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138" + integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg== + dependencies: + "@babel/runtime" "^7.7.2" + cosmiconfig "^6.0.0" + resolve "^1.12.0" + babel-plugin-pegjs-inline-precompile@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/babel-plugin-pegjs-inline-precompile/-/babel-plugin-pegjs-inline-precompile-0.1.0.tgz#3307f2b373a844296385311a7c528c53414dc57e" @@ -2337,6 +2497,11 @@ babel-plugin-react-docgen@^3.1.0: react-docgen "^4.1.0" recast "^0.14.7" +babel-plugin-syntax-jsx@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= + babel-preset-jest@^24.1.0: version "24.1.0" resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.1.0.tgz#83bc564fdcd4903641af65ec63f2f5de6b04132e" @@ -3789,7 +3954,7 @@ convert-source-map@^1.4.0: resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5" integrity sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU= -convert-source-map@^1.7.0: +convert-source-map@^1.5.0, convert-source-map@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA== @@ -4302,6 +4467,11 @@ csstype@^2.2.0: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098" integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q== +csstype@^2.5.7: + version "2.6.10" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b" + integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w== + csstype@^2.6.7: version "2.6.7" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5" @@ -4990,6 +5160,15 @@ emojis-list@^2.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k= +emotion-theming@^10.0.27: + version "10.0.27" + resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10" + integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw== + dependencies: + "@babel/runtime" "^7.5.5" + "@emotion/weak-memoize" "0.2.5" + hoist-non-react-statics "^3.3.0" + encodeurl@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" @@ -14025,7 +14204,7 @@ source-map-url@^0.4.0: resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3" integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM= -source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.6: +source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.6: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= From ea99f2f051c315fecdf15a2146ff9dbe87762594 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 6 May 2020 13:31:16 -0500 Subject: [PATCH 02/33] WIP --- .../src/components/guide_rule/guide_rule.js | 15 +- .../guide_rule/guide_rule_description.js | 9 +- .../guide_rule/guide_rule_example.js | 33 ++-- .../components/guide_rule/guide_rule_title.js | 14 +- .../guide_theme_selector.js | 27 +-- .../components/with_theme/theme_context.tsx | 49 +++++- src/services/propagate/propagate.test.ts | 162 ++++++++++++++++++ src/services/propagate/propagate.ts | 152 ++++++++++++++++ src/services/propagate/propagate_context.ts | 23 +++ src/services/propagate/use_propagate.test.tsx | 78 +++++++++ src/services/propagate/use_propagate.tsx | 53 ++++++ src/theme_dark.ts | 9 +- src/theme_light.ts | 8 +- src/themes/create_theme.ts | 41 ++++- 14 files changed, 615 insertions(+), 58 deletions(-) create mode 100644 src/services/propagate/propagate.test.ts create mode 100644 src/services/propagate/propagate.ts create mode 100644 src/services/propagate/propagate_context.ts create mode 100644 src/services/propagate/use_propagate.test.tsx create mode 100644 src/services/propagate/use_propagate.tsx diff --git a/src-docs/src/components/guide_rule/guide_rule.js b/src-docs/src/components/guide_rule/guide_rule.js index 41fcc1b05c9..8bbbc83bc08 100644 --- a/src-docs/src/components/guide_rule/guide_rule.js +++ b/src-docs/src/components/guide_rule/guide_rule.js @@ -1,24 +1,27 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/core'; -import { useTheme } from 'emotion-theming'; +// import { useTheme } from 'emotion-theming'; +import usePropagate from '../../../../src/services/propagate/use_propagate'; import { EuiFlexGroup } from '../../../../src/components'; import { GuideRuleDescription } from './guide_rule_description'; import { componentClassName as guideRuleTitleClass } from './guide_rule_title'; export const GuideRule = ({ children, heading, description, ...rest }) => { - const theme = useTheme(); + const [sizes] = usePropagate(['sizes']); + // const theme = useTheme(); + // console.log(theme[0].euiSizeL); - let siblingMarginTop = theme.sizes.euiSizeL; + let siblingMarginTop = sizes.euiSizeL; if (description) { - siblingMarginTop = theme.sizes.euiSizeXXL * 1.5; + siblingMarginTop = sizes.euiSizeXXL * 1.5; } if (heading) { - siblingMarginTop = theme.sizes.euiSizeXXL * 2; + siblingMarginTop = sizes.euiSizeXXL * 2; } const guideRule = css` - margin-top: ${theme.sizes.euiSizeXXL}px; + margin-top: ${sizes.euiSizeXXL}px; & + & { margin-top: ${siblingMarginTop}px; diff --git a/src-docs/src/components/guide_rule/guide_rule_description.js b/src-docs/src/components/guide_rule/guide_rule_description.js index 8be9cc40edd..891a78cbc48 100644 --- a/src-docs/src/components/guide_rule/guide_rule_description.js +++ b/src-docs/src/components/guide_rule/guide_rule_description.js @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/core'; -import { useTheme } from 'emotion-theming'; +// import { useTheme } from 'emotion-theming'; +import usePropagate from '../../../../src/services/propagate/use_propagate'; import { EuiText } from '../../../../src/components'; export const GuideRuleDescription = ({ @@ -10,9 +11,11 @@ export const GuideRuleDescription = ({ description, ...rest }) => { - const theme = useTheme(); + // const theme = useTheme(); + const [sizes] = usePropagate(['sizes']); + const guideRule_Description = css` - margin-bottom: ${theme.sizes.euiSizeXL}px; + margin-bottom: ${sizes.euiSizeXL}px; `; let headingNode; diff --git a/src-docs/src/components/guide_rule/guide_rule_example.js b/src-docs/src/components/guide_rule/guide_rule_example.js index 5700621edb8..027682e31f6 100644 --- a/src-docs/src/components/guide_rule/guide_rule_example.js +++ b/src-docs/src/components/guide_rule/guide_rule_example.js @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/core'; -import { useTheme } from 'emotion-theming'; +// import { useTheme } from 'emotion-theming'; +import usePropagate from '../../../../src/services/propagate/use_propagate'; import { EuiFlexItem, EuiPanel } from '../../../../src/components'; const typeToSubtitleTextMap = { @@ -20,7 +21,12 @@ export const GuideRuleExample = ({ panelStyles, ...rest }) => { - const theme = useTheme(); + // const theme = useTheme(); + const [colors, sizes, typography] = usePropagate([ + 'colors', + 'sizes', + 'typography', + ]); const guideRuleExample = css` pre { @@ -31,18 +37,18 @@ export const GuideRuleExample = ({ const guideRuleExamplePanel = css` border-bottom: 2px solid; - margin-bottom: ${theme.sizes.euiSizeS}px; + margin-bottom: ${sizes.euiSizeS}px; flex-grow: 1; /* 1 */ - ${!panel && `padding-bottom: ${theme.sizes.euiSize}px;`} + ${!panel && `padding-bottom: ${sizes.euiSize}px;`} - ${type === 'do' && `border-bottom-color: ${theme.colors.euiColorSuccess};`} + ${type === 'do' && `border-bottom-color: ${colors.euiColorSuccess};`} - ${type === 'dont' && `border-bottom-color: ${theme.colors.euiColorDanger};`} + ${type === 'dont' && `border-bottom-color: ${colors.euiColorDanger};`} ${frame && - `padding: ${theme.sizes.euiSizeL}px; - background-color: ${theme.colors.euiColorLightestShade}; + `padding: ${sizes.euiSizeL}px; + background-color: ${colors.euiColorLightestShade}; display: flex; align-items: center; justify-content: space-around;`} @@ -50,15 +56,14 @@ export const GuideRuleExample = ({ const guideRuleExampleCaption = css` @include euiFontSizeS; // TODO - font-size: ${theme.typography.euiFontSizeS}px; // TODO - line-height: ${theme.typography.euiLineHeight}; // TODO - max-height: ${theme.typography.euiFontSizeS * - theme.typography.euiLineHeight}px; /* 1 */ + font-size: ${typography.euiFontSizeS}px; // TODO + line-height: ${typography.euiLineHeight}; // TODO + max-height: ${typography.euiFontSizeS * typography.euiLineHeight}px; /* 1 */ overflow-y: visible; /* 1 */ - ${type === 'do' && `color: ${theme.colors.euiColorSuccessText};`} + ${type === 'do' && `color: ${colors.euiColorSuccessText};`} - ${type === 'dont' && `color: ${theme.colors.euiColorDanger};`} + ${type === 'dont' && `color: ${colors.euiColorDanger};`} `; const ChildrenComponent = panel ? EuiPanel : 'div'; diff --git a/src-docs/src/components/guide_rule/guide_rule_title.js b/src-docs/src/components/guide_rule/guide_rule_title.js index 2f059d314a0..cf0f9afbd08 100644 --- a/src-docs/src/components/guide_rule/guide_rule_title.js +++ b/src-docs/src/components/guide_rule/guide_rule_title.js @@ -2,21 +2,23 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { css } from '@emotion/core'; -import { useTheme } from 'emotion-theming'; +// import { useTheme } from 'emotion-theming'; +import usePropagate from '../../../../src/services/propagate/use_propagate'; import { EuiTitle } from '../../../../src/components'; export const componentClassName = 'euiGuideRuleTitle'; export const GuideRuleTitle = ({ children, className, ...rest }) => { - const theme = useTheme(); + // const theme = useTheme(); + const [sizes, borders] = usePropagate(['sizes', 'borders']); const classes = classNames(componentClassName, className); const guideRuleTitle = css` - margin-top: ${theme.sizes.euiSizeXXL}px; - border-top: 1px solid ${theme.borders.euiBorderColor}; - padding-top: ${theme.sizes.euiSizeXXL}px; - margin-bottom: ${theme.sizes.euiSizeS}px; + margin-top: ${sizes.euiSizeXXL}px; + border-top: 1px solid ${borders.euiBorderColor}; + padding-top: ${sizes.euiSizeXXL}px; + margin-bottom: ${sizes.euiSizeS}px; `; return ( diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js index 7138a616770..b79acec8dff 100644 --- a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js +++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js @@ -1,7 +1,7 @@ import React from 'react'; import { ThemeContext } from '../with_theme'; -import { EuiSelect, EuiFormRow } from '../../../../src/components'; +import { EuiButton, EuiSelect, EuiFormRow } from '../../../../src/components'; import { EUI_THEMES } from '../../../../src/themes'; export const GuideThemeSelector = () => { @@ -14,15 +14,20 @@ export const GuideThemeSelector = () => { const GuideThemeSelectorComponent = ({ context }) => { return ( - - { - context.changeTheme(e.target.value); - }} - aria-label="Switch the theme" - /> - + <> + + { + context.changeTheme(e.target.value); + }} + aria-label="Switch the theme" + /> + + + Randomize + + ); }; diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx index 9e9031071ab..8666e5e6bd7 100644 --- a/src-docs/src/components/with_theme/theme_context.tsx +++ b/src-docs/src/components/with_theme/theme_context.tsx @@ -1,20 +1,25 @@ import React from 'react'; -import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'; +// import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'; import { EUI_THEMES, EUI_THEME } from '../../../../src/themes'; -import EuiLightTheme from '../../../../src/theme_light'; -import EuiDarkTheme from '../../../../src/theme_dark'; +import euiLightTheme from '../../../../src/theme_light'; +import euiDarkTheme from '../../../../src/theme_dark'; +import PropagateContext from '../../../../src/services/propagate/propagate_context'; // @ts-ignore import { applyTheme } from '../../services'; const defaultState = { theme: EUI_THEMES[0].value, + fullTheme: euiLightTheme(), changeTheme: (themeValue: EUI_THEME['value']) => { applyTheme(themeValue); }, + randomizeLightShade: () => {}, }; interface State { theme: EUI_THEME['value']; + fullTheme: any; + randomizeLightShade: () => void; } export const ThemeContext = React.createContext(defaultState); @@ -25,33 +30,61 @@ export class ThemeProvider extends React.Component { const theme = localStorage.getItem('theme') || defaultState.theme; applyTheme(theme); + const fullTheme = + theme === 'light' + ? defaultState.fullTheme + : euiDarkTheme(defaultState.fullTheme); this.state = { theme, + fullTheme, + randomizeLightShade: () => {}, }; } changeTheme = (themeValue: EUI_THEME['value']) => { - this.setState({ theme: themeValue }, () => { + console.log(this.state.fullTheme); + const fullTheme = + themeValue === 'light' + ? euiLightTheme(this.state.fullTheme) + : euiDarkTheme(this.state.fullTheme); + this.setState({ theme: themeValue, fullTheme }, () => { localStorage.setItem('theme', themeValue); applyTheme(themeValue); }); }; + randomizeLightShade = () => { + this.state.fullTheme.set('colors', { + ...this.state.fullTheme.get('colors'), + euiColorLightShade: `#${Math.floor(Math.random() * 16777215).toString( + 16 + )}`, + }); + // this.state.fullTheme.set( + // 'euiColorLightShade', + // `#${Math.floor(Math.random() * 16777215).toString(16)}` + // ); + // euiBorderColor + }; + render() { const { children } = this.props; - const { theme } = this.state; - const fullTheme = theme === 'light' ? EuiLightTheme : EuiDarkTheme; + const { theme, fullTheme } = this.state; return ( - + + {/**/} {children} - + {/**/} + ); } } diff --git a/src/services/propagate/propagate.test.ts b/src/services/propagate/propagate.test.ts new file mode 100644 index 00000000000..75de3205b41 --- /dev/null +++ b/src/services/propagate/propagate.test.ts @@ -0,0 +1,162 @@ +/* + * 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 Propagate from './propagate'; + +describe('Propagate', () => { + describe('value storage & looking', () => { + it('stores a single value for lookup', () => { + const propagate = new Propagate(); + propagate.set('mykey', 'myvalue'); + expect(propagate.get('mykey')).toBe('myvalue'); + }); + + it('stores multiple values for lookup', () => { + const propagate = new Propagate(); + propagate.set('mykey', 'myvalue'); + propagate.set('otherkey', 'othervalue'); + expect(propagate.get('mykey')).toBe('myvalue'); + expect(propagate.get('otherkey')).toBe('othervalue'); + }); + }); + + describe('subscriptions', () => { + it('allows subscribing to a single value', () => { + const propagate = new Propagate(); + + const subscriber = jest.fn(); + propagate.subscribe('key', subscriber); + + expect(subscriber).toHaveBeenCalledTimes(0); + + propagate.set('key', 'value'); + + expect(subscriber).toHaveBeenCalledTimes(1); + expect(subscriber).lastCalledWith('value'); + }); + + it('allows unsubscribing', () => { + const propagate = new Propagate(); + + const subscriber = jest.fn(); + const unsubscribe = propagate.subscribe('key', subscriber); + + expect(subscriber).toHaveBeenCalledTimes(0); + + propagate.set('key', 'value'); + expect(subscriber).toHaveBeenCalledTimes(1); + expect(subscriber).lastCalledWith('value'); + + unsubscribe(); + + propagate.set('key', 'value2'); + expect(subscriber).toHaveBeenCalledTimes(1); + expect(subscriber).lastCalledWith('value'); + }); + }); + + describe('computations', () => { + it('computes a single field on creation', () => { + const propagate = new Propagate(); + propagate.set('key', [], () => 5); + expect(propagate.get('key')).toBe(5); + }); + + it('allows references to static values', () => { + const propagate = new Propagate(); + propagate.set('four', 4); + propagate.set('six', 6); + propagate.set('ten', ['four', 'six'], (...args) => + args.reduce((acc, val) => acc + val, 0) + ); + expect(propagate.get('ten')).toBe(10); + }); + + it('allows computations to depend on other computations', () => { + const propagate = new Propagate(); + propagate.set('chars', [], () => ['A', 'B', 'C']); + propagate.set('charsLower', ['chars'], chars => + chars.map(char => char.toLowerCase()) + ); + expect(propagate.get('charsLower')).toEqual(['a', 'b', 'c']); + }); + + it('re-computes a value when a static dependency updates', () => { + const propagate = new Propagate(); + propagate.set('root', 4); + propagate.set('square', ['root'], root => root ** 2); + expect(propagate.get('square')).toBe(16); + + propagate.set('root', 3); + expect(propagate.get('square')).toBe(9); + }); + + describe('circular dependencies', () => { + it('errors when one field depends on itself', () => { + const propagate = new Propagate(); + expect(() => { + propagate.set('first', ['first'], () => null); + }).toThrow(); + }); + + it('errors when two fields depend on each other', () => { + const propagate = new Propagate(); + propagate.set('first', ['second'], () => null); + expect(() => { + propagate.set('second', ['first'], () => null); + }).toThrow(); + }); + + it('errors when two fields depend on each other through separation', () => { + const propagate = new Propagate(); + propagate.set('first', ['second'], () => null); + propagate.set('second', ['third'], () => null); + expect(() => { + propagate.set('third', ['third'], () => null); + }).toThrow(); + }); + + it('does not error when a potential circular dependency is first resolved', () => { + const propagate = new Propagate(); + propagate.set('first', ['second'], () => null); + propagate.set('first', 1); + propagate.set('second', ['first'], x => x + 1); + expect(propagate.get('second')).toBe(2); + }); + }); + + describe('computation subscriptions', () => { + it('calls a subscription to a computed value on update', () => { + const propagate = new Propagate(); + propagate.set('root', 3); + propagate.set('square', ['root'], root => root ** 2); + + const subscriber = jest.fn(); + propagate.subscribe('square', subscriber); + + expect(subscriber).toHaveBeenCalledTimes(0); + + propagate.set('root', 4); + + expect(subscriber).toHaveBeenCalledTimes(1); + expect(subscriber).toHaveBeenLastCalledWith(16); + }); + }); + }); +}); diff --git a/src/services/propagate/propagate.ts b/src/services/propagate/propagate.ts new file mode 100644 index 00000000000..07bff227f65 --- /dev/null +++ b/src/services/propagate/propagate.ts @@ -0,0 +1,152 @@ +/* + * 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. + */ + +type Subscriber = (value: string) => void; +type Computation = (...args: any[]) => any; +type ComputationDef = [string[], Computation]; + +export default class Propagate { + values = new Map(); + subscriptions = new Map>(); + computations = new Map(); + + dependencies = new Map(); + dependants = new Map>(); + + set(key: string, references: string[], computation: Computation): any; + set(key: string, value: any): any; + set( + key: string, + valueOrReferences: any | string[], + computation?: Computation + ) { + if (typeof computation !== 'undefined') { + const references = valueOrReferences as string[]; + const computationDefinition: ComputationDef = [references, computation]; + + // update dependants lists for the referenced values + this.checkForCircularDependencies(key, references); + + // remove old dependencies first, then refresh with the new list + const oldDependencies = this.dependencies.get(key) || []; + for (let i = 0; i < oldDependencies.length; i++) { + const referencedKey = oldDependencies[i]; + const referencedDependants = this.dependants.get(referencedKey); + if (referencedDependants) { + referencedDependants.delete(key); + this.dependants.set(referencedKey, referencedDependants); + } + } + for (let i = 0; i < references.length; i++) { + const referencedKey = references[i]; + const referencedDependants = + this.dependants.get(referencedKey) || new Set(); + referencedDependants.add(key); + this.dependants.set(referencedKey, referencedDependants); + } + + this.dependencies.set(key, references); + this.computations.set(key, computationDefinition); + + this.computeValue(key); + } else { + // this value no longer has any references, if they ever existed + this.dependencies.set(key, []); + + this.values.set(key, valueOrReferences); + } + + // update dependants + const dependants = this.dependants.get(key); + if (dependants) { + dependants.forEach(dependantKey => { + this.computeValue(dependantKey); + }); + } + + // call subscriptions + const subscriptions = this.subscriptions.get(key) || new Set(); + const value = this.values.get(key); + subscriptions.forEach(subscription => subscription(value)); + } + + get(key: string) { + return this.values.get(key); + } + + subscribe(key: string, subscriber: Subscriber) { + const subscriptions = this.subscriptions.get(key) || new Set(); + subscriptions.add(subscriber); + this.subscriptions.set(key, subscriptions); + + return () => { + const subscriptions = this.subscriptions.get(key) || new Set(); + subscriptions.delete(subscriber); + this.subscriptions.set(key, subscriptions); + }; + } + + computeValue(key: string) { + const computationDef = this.computations.get(key); + + if (computationDef === undefined) return undefined; + + const [references, computation] = computationDef; + const dependentValues = references.map(key => this.get(key)); + const value = computation(...dependentValues); + + this.values.set(key, value); + + // call subscriptions + const subscriptions = this.subscriptions.get(key) || new Set(); + subscriptions.forEach(subscription => subscription(value)); + } + + checkForCircularDependencies(key: string, nextReferences: string[]) { + interface Check { + path: Set; + dependencies: string[]; + } + const remainingChecks: Check[] = [ + { path: new Set([key]), dependencies: nextReferences }, + ]; + + while (remainingChecks.length) { + const check = remainingChecks.shift(); + const { path, dependencies } = check; + + for (let i = 0; i < dependencies.length; i++) { + const dependencyKey = dependencies[i]; + if (path.has(dependencyKey)) { + throw new Error( + `Circular dependency: ${Array.from(path).join('->')}` + ); + } + const subDependencies = this.dependencies.get(dependencyKey); + if (subDependencies) { + const subPath = new Set(path).add(dependencyKey); + remainingChecks.push({ + path: subPath, + dependencies: subDependencies, + }); + } + } + } + } +} diff --git a/src/services/propagate/propagate_context.ts b/src/services/propagate/propagate_context.ts new file mode 100644 index 00000000000..3385e7b3217 --- /dev/null +++ b/src/services/propagate/propagate_context.ts @@ -0,0 +1,23 @@ +/* + * 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 { createContext } from 'react'; +import Propagate from './propagate'; + +export default createContext(new Propagate()); diff --git a/src/services/propagate/use_propagate.test.tsx b/src/services/propagate/use_propagate.test.tsx new file mode 100644 index 00000000000..1c1b65f0e1f --- /dev/null +++ b/src/services/propagate/use_propagate.test.tsx @@ -0,0 +1,78 @@ +/* + * 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 * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { act } from 'react-dom/test-utils'; +import Propagate from './propagate'; +import PropagateContext from './propagate_context'; +import usePropagate from './use_propagate'; + +const container = document.createElement('div'); +describe('usePropagation', () => { + it('starts with the references values', () => { + const propagate = new Propagate(); + propagate.set('one', 1); + propagate.set('two', ['one'], one => one + 1); + + const Component = () => { + const values = usePropagate(['one', 'two']); + return {values.join(',')}; + }; + + ReactDOM.render( + + + , + container + ); + + expect(container.innerHTML).toBe('1,2'); + + ReactDOM.unmountComponentAtNode(container); + }); + + it('re-renders when referenced values update', async () => { + const propagate = new Propagate(); + propagate.set('root', 4); + propagate.set('square', ['root'], root => root ** 2); + + const Component = () => { + const values = usePropagate(['root', 'square']); + return {values.join(',')}; + }; + + ReactDOM.render( + + + , + container + ); + + expect(container.innerHTML).toBe('4,16'); + + await new Promise(resolve => setTimeout(resolve, 100)); + act(() => propagate.set('root', 3)); + await new Promise(resolve => setTimeout(resolve, 100)); + + expect(container.innerHTML).toBe('3,9'); + + ReactDOM.unmountComponentAtNode(container); + }); +}); diff --git a/src/services/propagate/use_propagate.tsx b/src/services/propagate/use_propagate.tsx new file mode 100644 index 00000000000..3c1c9b5221c --- /dev/null +++ b/src/services/propagate/use_propagate.tsx @@ -0,0 +1,53 @@ +/* + * 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 { useContext, useEffect, useState } from 'react'; +import PropagateContext from './propagate_context'; + +export default function usePropagate(references: string[]) { + const propagate = useContext(PropagateContext); + const [values, setValues] = useState( + references.map(reference => propagate.get(reference)) + ); + + useEffect(() => { + const unsubscribes: any[] = []; + + for (let i = 0; i < references.length; i++) { + const reference = references[i]; + const index = i; + const unsubscribe = propagate.subscribe(reference, value => { + setValues(values => { + const nextValues = [...values]; + nextValues[index] = value; + return nextValues; + }); + }); + unsubscribes.push(unsubscribe); + } + + return () => { + for (let i = 0; i < unsubscribes.length; i++) { + unsubscribes[i](); + } + }; + }, [propagate, references, setValues]); + + return values; +} diff --git a/src/theme_dark.ts b/src/theme_dark.ts index 430564f098f..d29f74be638 100644 --- a/src/theme_dark.ts +++ b/src/theme_dark.ts @@ -17,7 +17,12 @@ * under the License. */ -import { createTheme } from './themes/create_theme'; +// import { createTheme } from './themes/create_theme'; import euiColorsDark from './themes/eui/eui_colors_dark'; -export default createTheme(euiColorsDark); +// export default createTheme(euiColorsDark); + +export default (theme: any) => { + theme.set('colors', euiColorsDark); + return theme; +}; diff --git a/src/theme_light.ts b/src/theme_light.ts index 3356f144ff2..1cb1d4bf920 100644 --- a/src/theme_light.ts +++ b/src/theme_light.ts @@ -20,4 +20,10 @@ import { createTheme } from './themes/create_theme'; import euiColorsLight from './themes/eui/eui_colors_light'; -export default createTheme(euiColorsLight); +export default (theme?: any) => { + if (theme) { + theme.set('colors', euiColorsLight); + return theme; + } + return createTheme(euiColorsLight); +}; diff --git a/src/themes/create_theme.ts b/src/themes/create_theme.ts index 4394c47d8da..0e0f479d38b 100644 --- a/src/themes/create_theme.ts +++ b/src/themes/create_theme.ts @@ -17,12 +17,39 @@ * under the License. */ -import { createBorders, sizes, typography } from '../global_styling/variables'; +import Propagate from '../services/propagate/propagate'; +import { + // createBorders, + sizes, + typography, +} from '../global_styling/variables'; export const createTheme = (colors: any) => { - return { - colors, - sizes, - typography, - borders: createBorders(colors), - }; + const propagate = new Propagate(); + propagate.set('colors', colors); + propagate.set('sizes', sizes); + propagate.set('typography', typography); + + //propagate.set('euiBorderColor', ['euiPrimaryColor'], color => shade(color)); + propagate.set('borders', ['colors'], colors => { + const euiBorderWidthThin = '1px'; + const euiBorderWidthThick = '2px'; + + const euiBorderColor = colors.euiColorLightShade; + const euiBorderRadius = '4px'; + const euiBorderThick = `${euiBorderWidthThick} solid ${euiBorderColor}`; + const euiBorderThin = `${euiBorderWidthThin} solid ${euiBorderColor}`; + const euiBorderEditable = `${euiBorderWidthThick} dotted ${euiBorderColor}`; + + const borders = { + euiBorderWidthThin, + euiBorderWidthThick, + euiBorderColor, + euiBorderRadius, + euiBorderThick, + euiBorderThin, + euiBorderEditable, + }; + return borders; + }); + return propagate; }; From e662d4c0ecc5bdc1d04ff95438b639e5983bf08c Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 16 Jul 2020 14:39:50 -0700 Subject: [PATCH 03/33] update types --- src/services/propagate/propagate.test.ts | 2 +- src/services/propagate/propagate.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/services/propagate/propagate.test.ts b/src/services/propagate/propagate.test.ts index 75de3205b41..47836b20fe7 100644 --- a/src/services/propagate/propagate.test.ts +++ b/src/services/propagate/propagate.test.ts @@ -92,7 +92,7 @@ describe('Propagate', () => { const propagate = new Propagate(); propagate.set('chars', [], () => ['A', 'B', 'C']); propagate.set('charsLower', ['chars'], chars => - chars.map(char => char.toLowerCase()) + chars.map((char: string) => char.toLowerCase()) ); expect(propagate.get('charsLower')).toEqual(['a', 'b', 'c']); }); diff --git a/src/services/propagate/propagate.ts b/src/services/propagate/propagate.ts index 07bff227f65..d401bd1193b 100644 --- a/src/services/propagate/propagate.ts +++ b/src/services/propagate/propagate.ts @@ -128,7 +128,7 @@ export default class Propagate { ]; while (remainingChecks.length) { - const check = remainingChecks.shift(); + const check = remainingChecks.shift()!; const { path, dependencies } = check; for (let i = 0; i < dependencies.length; i++) { From 8ec03546747a145b4d5b687f97cdb160c476d7e2 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 16 Jul 2020 15:07:47 -0700 Subject: [PATCH 04/33] clean up --- .../babel/proptypes-from-ts-props/index.js | 35 ++++--------------- 1 file changed, 6 insertions(+), 29 deletions(-) diff --git a/scripts/babel/proptypes-from-ts-props/index.js b/scripts/babel/proptypes-from-ts-props/index.js index acedc3414a0..c65a1cb4a32 100644 --- a/scripts/babel/proptypes-from-ts-props/index.js +++ b/scripts/babel/proptypes-from-ts-props/index.js @@ -1,23 +1,3 @@ -/* - * 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. - */ - - /* eslint-disable new-cap */ const fs = require('fs'); @@ -523,7 +503,7 @@ function getPropTypesForNode(node, optional, state) { // translates intersections (Foo & Bar & Baz) to a shape with the types' members (Foo, Bar, Baz) merged together case 'TSIntersectionType': const usableNodes = [...node.types].filter(node => { - const nodePropTypes = getPropTypesForNode(node, true, state); + let nodePropTypes = getPropTypesForNode(node, true, state); if ( types.isMemberExpression(nodePropTypes) && @@ -773,14 +753,11 @@ function getPropTypesForNode(node, optional, state) { ), [ types.arrayExpression( - node.properties.map(property => { - if (property.key) { - return types.stringLiteral( - property.key.name || property.key.value - ) - } - return null; - }) + node.properties.map(property => + types.stringLiteral( + property.key.name || property.key.name || property.key.value + ) + ) ), ] ); From 78cfd444c5c38f3011ca67519154347f3fac5ae7 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 16 Jul 2020 15:11:55 -0700 Subject: [PATCH 05/33] clean up --- src-docs/src/components/guide_rule/guide_rule.js | 3 --- .../src/components/guide_rule/guide_rule_description.js | 2 -- src-docs/src/components/guide_rule/guide_rule_example.js | 8 +++----- src-docs/src/components/guide_rule/guide_rule_title.js | 2 -- src-docs/src/components/with_theme/theme_context.tsx | 8 -------- src/themes/eui/eui_colors_light.ts | 1 - 6 files changed, 3 insertions(+), 21 deletions(-) diff --git a/src-docs/src/components/guide_rule/guide_rule.js b/src-docs/src/components/guide_rule/guide_rule.js index 8bbbc83bc08..7a2e629e8cb 100644 --- a/src-docs/src/components/guide_rule/guide_rule.js +++ b/src-docs/src/components/guide_rule/guide_rule.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/core'; -// import { useTheme } from 'emotion-theming'; import usePropagate from '../../../../src/services/propagate/use_propagate'; import { EuiFlexGroup } from '../../../../src/components'; @@ -10,8 +9,6 @@ import { componentClassName as guideRuleTitleClass } from './guide_rule_title'; export const GuideRule = ({ children, heading, description, ...rest }) => { const [sizes] = usePropagate(['sizes']); - // const theme = useTheme(); - // console.log(theme[0].euiSizeL); let siblingMarginTop = sizes.euiSizeL; if (description) { diff --git a/src-docs/src/components/guide_rule/guide_rule_description.js b/src-docs/src/components/guide_rule/guide_rule_description.js index 891a78cbc48..8bd5b230601 100644 --- a/src-docs/src/components/guide_rule/guide_rule_description.js +++ b/src-docs/src/components/guide_rule/guide_rule_description.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/core'; -// import { useTheme } from 'emotion-theming'; import usePropagate from '../../../../src/services/propagate/use_propagate'; import { EuiText } from '../../../../src/components'; @@ -11,7 +10,6 @@ export const GuideRuleDescription = ({ description, ...rest }) => { - // const theme = useTheme(); const [sizes] = usePropagate(['sizes']); const guideRule_Description = css` diff --git a/src-docs/src/components/guide_rule/guide_rule_example.js b/src-docs/src/components/guide_rule/guide_rule_example.js index 027682e31f6..a8af8c8c0f9 100644 --- a/src-docs/src/components/guide_rule/guide_rule_example.js +++ b/src-docs/src/components/guide_rule/guide_rule_example.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/core'; -// import { useTheme } from 'emotion-theming'; import usePropagate from '../../../../src/services/propagate/use_propagate'; import { EuiFlexItem, EuiPanel } from '../../../../src/components'; @@ -21,7 +20,6 @@ export const GuideRuleExample = ({ panelStyles, ...rest }) => { - // const theme = useTheme(); const [colors, sizes, typography] = usePropagate([ 'colors', 'sizes', @@ -55,9 +53,9 @@ export const GuideRuleExample = ({ `; const guideRuleExampleCaption = css` - @include euiFontSizeS; // TODO - font-size: ${typography.euiFontSizeS}px; // TODO - line-height: ${typography.euiLineHeight}; // TODO + @include euiFontSizeS; // TODO: not yet part of emotion theme + font-size: ${typography.euiFontSizeS}px; // TODO: not yet part of emotion theme + line-height: ${typography.euiLineHeight}; // TODO: not yet part of emotion theme max-height: ${typography.euiFontSizeS * typography.euiLineHeight}px; /* 1 */ overflow-y: visible; /* 1 */ diff --git a/src-docs/src/components/guide_rule/guide_rule_title.js b/src-docs/src/components/guide_rule/guide_rule_title.js index cf0f9afbd08..5b98c7e24d3 100644 --- a/src-docs/src/components/guide_rule/guide_rule_title.js +++ b/src-docs/src/components/guide_rule/guide_rule_title.js @@ -2,14 +2,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { css } from '@emotion/core'; -// import { useTheme } from 'emotion-theming'; import usePropagate from '../../../../src/services/propagate/use_propagate'; import { EuiTitle } from '../../../../src/components'; export const componentClassName = 'euiGuideRuleTitle'; export const GuideRuleTitle = ({ children, className, ...rest }) => { - // const theme = useTheme(); const [sizes, borders] = usePropagate(['sizes', 'borders']); const classes = classNames(componentClassName, className); diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx index 773f66e4b9c..fa971e0ef9a 100644 --- a/src-docs/src/components/with_theme/theme_context.tsx +++ b/src-docs/src/components/with_theme/theme_context.tsx @@ -1,5 +1,4 @@ import React from 'react'; -// import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'; import { EUI_THEMES, EUI_THEME } from '../../../../src/themes'; import euiLightTheme from '../../../../src/theme_light'; import euiDarkTheme from '../../../../src/theme_dark'; @@ -64,11 +63,6 @@ export class ThemeProvider extends React.Component { 16 )}`, }); - // this.state.fullTheme.set( - // 'euiColorLightShade', - // `#${Math.floor(Math.random() * 16777215).toString(16)}` - // ); - // euiBorderColor }; render() { @@ -76,7 +70,6 @@ export class ThemeProvider extends React.Component { const { theme, fullTheme } = this.state; return ( - {/**/} { }}> {children} - {/**/} ); } diff --git a/src/themes/eui/eui_colors_light.ts b/src/themes/eui/eui_colors_light.ts index 9e196b98b36..b8dc76d6bd4 100644 --- a/src/themes/eui/eui_colors_light.ts +++ b/src/themes/eui/eui_colors_light.ts @@ -138,7 +138,6 @@ const euiPaletteColorBlind = { }, }; -// euiPaletteColorBlindKeys: euiPaletteColorBlind; // const euiColorVisGraphic = { euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic, From 735803fb497df36552b336bad6daca736963e2d0 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 16 Jul 2020 16:03:55 -0700 Subject: [PATCH 06/33] Revert "clean up" This reverts commit 8ec03546747a145b4d5b687f97cdb160c476d7e2. --- .../babel/proptypes-from-ts-props/index.js | 35 +++++++++++++++---- 1 file changed, 29 insertions(+), 6 deletions(-) diff --git a/scripts/babel/proptypes-from-ts-props/index.js b/scripts/babel/proptypes-from-ts-props/index.js index c65a1cb4a32..acedc3414a0 100644 --- a/scripts/babel/proptypes-from-ts-props/index.js +++ b/scripts/babel/proptypes-from-ts-props/index.js @@ -1,3 +1,23 @@ +/* + * 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. + */ + + /* eslint-disable new-cap */ const fs = require('fs'); @@ -503,7 +523,7 @@ function getPropTypesForNode(node, optional, state) { // translates intersections (Foo & Bar & Baz) to a shape with the types' members (Foo, Bar, Baz) merged together case 'TSIntersectionType': const usableNodes = [...node.types].filter(node => { - let nodePropTypes = getPropTypesForNode(node, true, state); + const nodePropTypes = getPropTypesForNode(node, true, state); if ( types.isMemberExpression(nodePropTypes) && @@ -753,11 +773,14 @@ function getPropTypesForNode(node, optional, state) { ), [ types.arrayExpression( - node.properties.map(property => - types.stringLiteral( - property.key.name || property.key.name || property.key.value - ) - ) + node.properties.map(property => { + if (property.key) { + return types.stringLiteral( + property.key.name || property.key.value + ) + } + return null; + }) ), ] ); From 090f6113a9340ae6fce083698dd551268f3b6d7e Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 21 Jul 2020 15:22:29 -0700 Subject: [PATCH 07/33] ts build updates --- .../guide_theme_selector.js | 9 ++++++++- .../components/with_theme/theme_context.tsx | 18 +++++++++++++---- .../color_picker/color_picker_swatch.tsx | 13 ++++++------ src/components/color_picker/saturation.tsx | 20 +++++++++---------- src/components/mark/_index.scss | 2 +- src/components/mark/mark.tsx | 15 +++++++++++++- tsconfig.json | 4 ++-- 7 files changed, 56 insertions(+), 25 deletions(-) diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js index b79acec8dff..cbd8e65be28 100644 --- a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js +++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js @@ -26,7 +26,14 @@ const GuideThemeSelectorComponent = ({ context }) => { /> - Randomize + + Randomize + + + + + Randomize + ); diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx index fa971e0ef9a..e2b0c960da0 100644 --- a/src-docs/src/components/with_theme/theme_context.tsx +++ b/src-docs/src/components/with_theme/theme_context.tsx @@ -15,12 +15,14 @@ const defaultState = { applyTheme(themeValue); }, randomizeLightShade: () => {}, + randomizeHighlight: () => {}, }; interface State { theme: EUI_THEME['value']; fullTheme: any; randomizeLightShade: () => void; + randomizeHighlight: () => void; } export const ThemeContext = React.createContext(defaultState); @@ -41,6 +43,7 @@ export class ThemeProvider extends React.Component { theme, fullTheme, randomizeLightShade: () => {}, + randomizeHighlight: () => {}, }; } @@ -56,15 +59,21 @@ export class ThemeProvider extends React.Component { }); }; - randomizeLightShade = () => { + randomizeColor = (variable: string) => { this.state.fullTheme.set('colors', { ...this.state.fullTheme.get('colors'), - euiColorLightShade: `#${Math.floor(Math.random() * 16777215).toString( - 16 - )}`, + [variable]: `#${Math.floor(Math.random() * 16777215).toString(16)}`, }); }; + randomizeLightShade = () => { + this.randomizeColor('euiColorLightShade'); + }; + + randomizeHighlight = () => { + this.randomizeColor('euiColorHighlight'); + }; + render() { const { children } = this.props; const { theme, fullTheme } = this.state; @@ -76,6 +85,7 @@ export class ThemeProvider extends React.Component { fullTheme, changeTheme: this.changeTheme, randomizeLightShade: this.randomizeLightShade, + randomizeHighlight: this.randomizeHighlight, }}> {children} diff --git a/src/components/color_picker/color_picker_swatch.tsx b/src/components/color_picker/color_picker_swatch.tsx index a3d0f6edf67..13c4c325d81 100644 --- a/src/components/color_picker/color_picker_swatch.tsx +++ b/src/components/color_picker/color_picker_swatch.tsx @@ -17,19 +17,20 @@ * under the License. */ -import React, { ButtonHTMLAttributes, forwardRef, useMemo } from 'react'; +import React, { ButtonHTMLAttributes, useMemo } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../common'; import { getChromaColor } from './utils'; -export type EuiColorPickerSwatchProps = CommonProps & - Omit, 'color'> & { - color?: string; - }; +export interface EuiColorPickerSwatchProps + extends CommonProps, + Omit, 'color'> { + color?: string; +} -export const EuiColorPickerSwatch = forwardRef< +export const EuiColorPickerSwatch = React.forwardRef< HTMLButtonElement, EuiColorPickerSwatchProps >(({ className, color, style, ...rest }, ref) => { diff --git a/src/components/color_picker/saturation.tsx b/src/components/color_picker/saturation.tsx index 2b949e1055a..8bf9a76bb39 100644 --- a/src/components/color_picker/saturation.tsx +++ b/src/components/color_picker/saturation.tsx @@ -20,7 +20,6 @@ import React, { HTMLAttributes, KeyboardEvent, - forwardRef, useEffect, useRef, useState, @@ -47,16 +46,17 @@ interface HTMLDivElementOverrides { color?: ColorSpaces['hsv']; onChange: (color: ColorSpaces['hsv']) => void; } -export type EuiSaturationProps = Omit< - HTMLAttributes, - keyof HTMLDivElementOverrides -> & - CommonProps & - HTMLDivElementOverrides & { - hex?: string; - }; +export interface EuiSaturationProps + extends Omit, keyof HTMLDivElementOverrides>, + CommonProps, + HTMLDivElementOverrides { + hex?: string; +} -export const EuiSaturation = forwardRef( +export const EuiSaturation = React.forwardRef< + HTMLDivElement, + EuiSaturationProps +>( ( { className, diff --git a/src/components/mark/_index.scss b/src/components/mark/_index.scss index 4888bf861b6..8729a951da0 100644 --- a/src/components/mark/_index.scss +++ b/src/components/mark/_index.scss @@ -1 +1 @@ -@import 'mark'; \ No newline at end of file +// @import 'mark'; diff --git a/src/components/mark/mark.tsx b/src/components/mark/mark.tsx index a2be7082335..2a0db13c5de 100644 --- a/src/components/mark/mark.tsx +++ b/src/components/mark/mark.tsx @@ -20,6 +20,9 @@ import React, { HTMLAttributes, FunctionComponent } from 'react'; import { CommonProps } from '../common'; import classNames from 'classnames'; +import { css } from '@emotion/core'; +import usePropagate from '../../services/propagate/use_propagate'; + export type EuiMarkProps = HTMLAttributes & CommonProps & { children: string; @@ -30,10 +33,20 @@ export const EuiMark: FunctionComponent = ({ className, ...rest }) => { + const [colors, sizes] = usePropagate(['colors', 'sizes']); + + const mark = css` + margin: ${sizes.euiSizeXS}px; + padding: ${sizes.euiSizeXS}px; + // For testing only + background-color: ${colors.euiColorHighlight}; + color: inherit; + `; + const classes = classNames('euiMark', className); return ( - + {children} ); diff --git a/tsconfig.json b/tsconfig.json index f44780013ce..13dda834244 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,7 +25,7 @@ "allowSyntheticDefaultImports": true, // Support .tsx files and transform JSX into calls to React.createElement - "jsx": "react", + "jsx": "preserve", // Emits __importStar and __importDefault helpers for runtime babel ecosystem compatibility. "esModuleInterop": true, @@ -47,7 +47,7 @@ // Specifies where to find library definitions. When this is explicitly set, // it has to include the default location i.e. node_modules/@types - "typeRoots": ["node_modules/@types", "src/custom_typings"] + "typeRoots": ["node_modules/@types", "node_modules/@emotion/core/types", "src/custom_typings"] }, "include": [ "./src/**/*", From 2cafe78ea51331509a6ba7d2efb48e16a6c98d2f Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 27 Jul 2020 10:12:06 -0400 Subject: [PATCH 08/33] Fixing light theme --- .../src/components/with_theme/theme_context.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx index e2b0c960da0..df27ede0414 100644 --- a/src-docs/src/components/with_theme/theme_context.tsx +++ b/src-docs/src/components/with_theme/theme_context.tsx @@ -34,10 +34,9 @@ export class ThemeProvider extends React.Component { let theme = localStorage.getItem('theme'); if (!theme || !THEME_NAMES.includes(theme)) theme = defaultState.theme; applyTheme(theme); - const fullTheme = - theme === 'light' - ? defaultState.fullTheme - : euiDarkTheme(defaultState.fullTheme); + const fullTheme = theme.includes('light') + ? defaultState.fullTheme + : euiDarkTheme(defaultState.fullTheme); this.state = { theme, @@ -49,10 +48,9 @@ export class ThemeProvider extends React.Component { changeTheme = (themeValue: EUI_THEME['value']) => { console.log(this.state.fullTheme); - const fullTheme = - themeValue === 'light' - ? euiLightTheme(this.state.fullTheme) - : euiDarkTheme(this.state.fullTheme); + const fullTheme = themeValue.includes('light') + ? euiLightTheme(this.state.fullTheme) + : euiDarkTheme(this.state.fullTheme); this.setState({ theme: themeValue, fullTheme }, () => { localStorage.setItem('theme', themeValue); applyTheme(themeValue); From 91f6626b2190aaf5ed5486aa294608f2de3acfe0 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 27 Jul 2020 10:46:23 -0400 Subject: [PATCH 09/33] Simplifying sizes --- src/components/mark/mark.tsx | 6 ++++-- src/global_styling/variables/sizes.ts | 31 +++++++++++---------------- 2 files changed, 16 insertions(+), 21 deletions(-) diff --git a/src/components/mark/mark.tsx b/src/components/mark/mark.tsx index 2a0db13c5de..bde6c2fac5b 100644 --- a/src/components/mark/mark.tsx +++ b/src/components/mark/mark.tsx @@ -36,8 +36,10 @@ export const EuiMark: FunctionComponent = ({ const [colors, sizes] = usePropagate(['colors', 'sizes']); const mark = css` - margin: ${sizes.euiSizeXS}px; - padding: ${sizes.euiSizeXS}px; + margin: ${sizes.euiSize( + 0.25 + )}; // The only one that is a function for calculations + padding: ${sizes.euiSizeXS}; // Named sizes as strings // For testing only background-color: ${colors.euiColorHighlight}; color: inherit; diff --git a/src/global_styling/variables/sizes.ts b/src/global_styling/variables/sizes.ts index 11919674d3a..cbcc043249c 100644 --- a/src/global_styling/variables/sizes.ts +++ b/src/global_styling/variables/sizes.ts @@ -17,29 +17,22 @@ * under the License. */ -const euiSize = 16; +// The actual number for the scale +const euiBaseSize = 16; -const sizeScale = { - euiSizeXS: euiSize * 0.25, - euiSizeS: euiSize * 0.5, - euiSizeM: euiSize * 0.75, - euiSizeL: euiSize * 1.5, - euiSizeXL: euiSize * 2, - euiSizeXXL: euiSize * 2.5, -}; - -const euiButtonMinWidth = euiSize * 7; - -const euiScrollBar = euiSize; -const euiScrollBarCorner = sizeScale.euiSizeS * 0.75; +// Does the scale calculation, then appends the `px` value +const euiSize = (scale?: number) => `${euiBaseSize * (scale || 1)}px`; +// The calculated scales, only `euiSize` is a function const sizes = { euiSize, - ...sizeScale, - euiButtonMinWidth, - euiScrollBar, - euiScrollBarCorner, + euiSizeXS: euiSize(0.25), + euiSizeS: euiSize(0.5), + euiSizeM: euiSize(0.75), + euiSizeL: euiSize(1.5), + euiSizeXL: euiSize(2), + euiSizeXXL: euiSize(2.5), }; export default sizes; -export { sizes, euiSize }; +export { sizes, euiSize, euiBaseSize }; From 30c91248bbd565c08d3381b8dcd214b14780e23e Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 27 Jul 2020 11:02:02 -0400 Subject: [PATCH 10/33] Simplifying colors --- src/components/mark/mark.tsx | 8 +- src/themes/eui/eui_colors_dark.ts | 90 ++------------- src/themes/eui/eui_colors_light.ts | 174 +---------------------------- 3 files changed, 17 insertions(+), 255 deletions(-) diff --git a/src/components/mark/mark.tsx b/src/components/mark/mark.tsx index bde6c2fac5b..167633e9858 100644 --- a/src/components/mark/mark.tsx +++ b/src/components/mark/mark.tsx @@ -36,10 +36,10 @@ export const EuiMark: FunctionComponent = ({ const [colors, sizes] = usePropagate(['colors', 'sizes']); const mark = css` - margin: ${sizes.euiSize( - 0.25 - )}; // The only one that is a function for calculations - padding: ${sizes.euiSizeXS}; // Named sizes as strings + // The only one that is a function for calculations + margin: ${sizes.euiSize(0.25)}; + // Named sizes as strings + padding: ${sizes.euiSizeXS}; // For testing only background-color: ${colors.euiColorHighlight}; color: inherit; diff --git a/src/themes/eui/eui_colors_dark.ts b/src/themes/eui/eui_colors_dark.ts index a01327b1c46..08425d6247d 100644 --- a/src/themes/eui/eui_colors_dark.ts +++ b/src/themes/eui/eui_colors_dark.ts @@ -17,30 +17,24 @@ * under the License. */ -import euiColorsLight from './eui_colors_light'; -import { - makeHighContrastColor, - shade, - tint, -} from '../../global_styling/functions'; +// import euiColorsLight from './eui_colors_light'; -const coreColors = { +const brand = { euiColorPrimary: '#1BA9F5', euiColorSecondary: '#7DE2D1', euiColorAccent: '#F990C0', - euiColorHighlight: '#2E2D25', }; -const genericColors = { +const colors = { // Core - ...coreColors, + ...brand, // These colors stay the same no matter the theme euiColorGhost: '#FFF', euiColorInk: '#000', // Status - euiColorSuccess: coreColors.euiColorSecondary, + euiColorSuccess: brand.euiColorSecondary, euiColorDanger: '#F66', euiColorWarning: '#FFCE7A', @@ -52,79 +46,9 @@ const genericColors = { euiColorDarkShade: '#98A2B3', euiColorDarkestShade: '#D4DAE5', euiColorFullShade: '#FFF', -}; -const euiTextColor = '#DFE5EF'; -const elementColors = { - euiTextColor, - euiTitleColor: euiTextColor, - euiLinkColor: genericColors.euiColorPrimary, - euiTextSubduedColor: makeHighContrastColor(genericColors.euiColorMediumShade), - euiPageBackgroundColor: shade(genericColors.euiColorLightestShade, '30%'), - euiFocusBackgroundColor: '#232635', -}; - -// // Variations from core -// $euiShadowColor: #000; -// $euiShadowColorLarge: #000; - -// Contrasty text variants -const euiColorPrimaryText = makeHighContrastColor( - genericColors.euiColorPrimary -); -const euiColorSecondaryText = makeHighContrastColor( - genericColors.euiColorSecondary -); -const textColors = { - euiColorPrimaryText, - euiColorSecondaryText, - euiColorAccentText: makeHighContrastColor(genericColors.euiColorAccent), - euiColorWarningText: makeHighContrastColor(genericColors.euiColorWarning), - euiColorDangerText: makeHighContrastColor( - genericColors.euiColorDanger, - genericColors.euiColorLightShade - ), - euiColorSuccessText: euiColorSecondaryText, -}; - -// Charts -const euiColorChartLine = genericColors.euiColorLightShade; -const euiColorChartBand = tint(genericColors.euiColorLightShade, '2.5%'); - -// Code -const codeBlockColors = { - euiCodeBlockCommentColor: '#656565', - euiCodeBlockSelectorTagColor: '#C792EA', - euiCodeBlockStringColor: '#C3E88D', - euiCodeBlockNumberColor: '#F77669', - euiCodeBlockKeywordColor: '#C792EA', - euiCodeBlockFunctionTitleColor: '#75A5FF', - euiCodeBlockTagColor: '#ABB2BF', - euiCodeBlockNameColor: '#E06C75', - euiCodeBlockTypeColor: '#DA4939', - euiCodeBlockAttributeColor: '#80CBBF', - euiCodeBlockSymbolColor: '#C792EA', - euiCodeBlockParamsColor: '#EEFFF7', - euiCodeBlockMetaColor: '#75A5FF', - euiCodeBlockTitleColor: '#75A5FF', - euiCodeBlockSectionColor: '#FFC66D', - euiCodeBlockAdditionBackgroundColor: '#144212', - euiCodeBlockAdditionColor: '#E6E1DC', - euiCodeBlockDeletionBackgroundColor: '#600', - euiCodeBlockDeletionColor: '#E6E1DC', - euiCodeBlockSelectorClassColor: '#FFCB68', - euiCodeBlockSelectorIdColor: '#F77669', -}; - -const colors = { - ...euiColorsLight, - ...genericColors, - ...elementColors, - ...textColors, - euiColorChartLine, - euiColorChartBand, - ...codeBlockColors, + euiColorHighlight: '#2E2D25', }; export default colors; -export { genericColors }; +export { colors }; diff --git a/src/themes/eui/eui_colors_light.ts b/src/themes/eui/eui_colors_light.ts index b8dc76d6bd4..743049ea232 100644 --- a/src/themes/eui/eui_colors_light.ts +++ b/src/themes/eui/eui_colors_light.ts @@ -17,31 +17,23 @@ * under the License. */ -import { - makeHighContrastColor, - shade, - shadeOrTint, - tintOrShade, -} from '../../global_styling/functions'; - -const coreColors = { +const brand = { // Core euiColorPrimary: '#006BB4', euiColorSecondary: '#017D73', euiColorAccent: '#DD0A73', - euiColorHighlight: '#FFFCDD', }; -const genericColors = { +const colors = { // Core - ...coreColors, + ...brand, // These colors stay the same no matter the theme euiColorGhost: '#FFF', euiColorInk: '#000', // Status - euiColorSuccess: coreColors.euiColorSecondary, + euiColorSuccess: brand.euiColorSecondary, euiColorDanger: '#BD271E', euiColorWarning: '#F5A700', @@ -53,163 +45,9 @@ const genericColors = { euiColorDarkShade: '#69707D', euiColorDarkestShade: '#343741', euiColorFullShade: '#000', -}; - -// Every color below must be based mathmatically on the set above and in a particular order. -const euiTextColor = genericColors.euiColorDarkestShade; -const elementColors = { - euiTextColor, - euiPageBackgroundColor: tintOrShade( - genericColors.euiColorLightestShade, - '50%', - '30%' - ), - euiTextSubduedColor: makeHighContrastColor(genericColors.euiColorMediumShade), - euiTitleColor: shadeOrTint(euiTextColor, '50%', '0%'), - euiLinkColor: genericColors.euiColorPrimary, - euiFocusBackgroundColor: tintOrShade( - genericColors.euiColorPrimary, - '90%', - '50%' - ), -}; - -// Contrasty text variants -const euiColorPrimaryText = makeHighContrastColor( - genericColors.euiColorPrimary -); -const euiColorSecondaryText = makeHighContrastColor( - genericColors.euiColorSecondary -); -const textColors = { - euiColorPrimaryText, - euiColorSecondaryText, - euiColorAccentText: makeHighContrastColor(genericColors.euiColorAccent), - euiColorWarningText: makeHighContrastColor(genericColors.euiColorWarning), - euiColorDangerText: makeHighContrastColor(genericColors.euiColorDanger), - euiColorSuccessText: euiColorSecondaryText, -}; -// Visualization colors - -// Maps allow for easier JSON usage -// Use map_merge(euiColorVisColors, yourMap) to change individual colors after importing ths file -// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function -const euiPaletteColorBlind = { - euiColorVis0: { - graphic: '#54B399', - behindText: '#6DCCB1', - }, - euiColorVis1: { - graphic: '#6092C0', - behindText: '#79AAD9', - }, - euiColorVis2: { - graphic: '#D36086', - behindText: '#EE789D', - }, - euiColorVis3: { - graphic: '#9170B8', - behindText: '#A987D1', - }, - euiColorVis4: { - graphic: '#CA8EAE', - behindText: '#E4A6C7', - }, - euiColorVis5: { - graphic: '#D6BF57', - behindText: '#F1D86F', - }, - euiColorVis6: { - graphic: '#B9A888', - behindText: '#D2C0A0', - }, - euiColorVis7: { - graphic: '#DA8B45', - behindText: '#F5A35C', - }, - euiColorVis8: { - graphic: '#AA6556', - behindText: '#C47C6C', - }, - euiColorVis9: { - graphic: '#E7664C', - behindText: '#FF7E62', - }, -}; - -// -const euiColorVisGraphic = { - euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic, - euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic, - euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic, - euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic, - euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic, - euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic, - euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic, - euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic, - euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic, - euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic, -}; - -const euiColorVisBehindText = { - euiColorVis0: euiPaletteColorBlind.euiColorVis0.behindText, - euiColorVis1: euiPaletteColorBlind.euiColorVis1.behindText, - euiColorVis2: euiPaletteColorBlind.euiColorVis2.behindText, - euiColorVis3: euiPaletteColorBlind.euiColorVis3.behindText, - euiColorVis4: euiPaletteColorBlind.euiColorVis4.behindText, - euiColorVis5: euiPaletteColorBlind.euiColorVis5.behindText, - euiColorVis6: euiPaletteColorBlind.euiColorVis6.behindText, - euiColorVis7: euiPaletteColorBlind.euiColorVis7.behindText, - euiColorVis8: euiPaletteColorBlind.euiColorVis8.behindText, - euiColorVis9: euiPaletteColorBlind.euiColorVis9.behindText, -}; - -// // Charts -const euiColorChartLines = shade(genericColors.euiColorLightestShade, '3%'); -const euiColorChartBand = genericColors.euiColorLightestShade; -// -// Code -const codeBlockColors = { - euiCodeBlockBackgroundColor: genericColors.euiColorLightestShade, - euiCodeBlockColor: euiTextColor, - euiCodeBlockSelectedBackgroundColor: 'inherit', - euiCodeBlockCommentColor: '#998', - euiCodeBlockSelectorTagColor: 'inherit', - euiCodeBlockStringColor: '#DD0A73', - euiCodeBlockNumberColor: '#00A69B', - euiCodeBlockKeywordColor: '#333', - euiCodeBlockFunctionTitleColor: 'inherit', - euiCodeBlockTagColor: '#0079A5', - euiCodeBlockNameColor: 'inherit', - euiCodeBlockTypeColor: '#0079A5', - euiCodeBlockAttributeColor: 'inherit', - euiCodeBlockSymbolColor: '#990073', - euiCodeBlockParamsColor: 'inherit', - euiCodeBlockMetaColor: '#999', - euiCodeBlockTitleColor: '#900', - euiCodeBlockRegexpColor: '#009926', - euiCodeBlockBuiltInColor: '#0086B3', - euiCodeBlockSectionColor: '#FFC66D', - euiCodeBlockAdditionBackgroundColor: '#DFD', - euiCodeBlockAdditionColor: 'inherit', - euiCodeBlockDeletionBackgroundColor: '#FDD', - euiCodeBlockDeletionColor: 'inherit', - euiCodeBlockSelectorClassColor: 'inherit', - euiCodeBlockSelectorIdColor: 'inherit', -}; - -const colors = { - ...genericColors, - ...elementColors, - ...textColors, - ...euiPaletteColorBlind, - euiColorChartLines, - euiColorChartBand, - ...codeBlockColors, - ...euiColorVisGraphic, - ...euiColorVisBehindText, + euiColorHighlight: '#FFFCDD', }; export default colors; -export { genericColors }; +export { colors }; From 2234dedca552d5b02e14d7878014c5a9c37f96d1 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 27 Jul 2020 11:31:48 -0400 Subject: [PATCH 11/33] Added support for Amsterdam themes --- .../components/with_theme/theme_context.tsx | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx index df27ede0414..ad9cb6807fc 100644 --- a/src-docs/src/components/with_theme/theme_context.tsx +++ b/src-docs/src/components/with_theme/theme_context.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { EUI_THEMES, EUI_THEME } from '../../../../src/themes'; import euiLightTheme from '../../../../src/theme_light'; import euiDarkTheme from '../../../../src/theme_dark'; +import amsterdamLightTheme from '../../../../src/theme_amsterdam_light'; +import amsterdamDarkTheme from '../../../../src/theme_amsterdam_dark'; import PropagateContext from '../../../../src/services/propagate/propagate_context'; // @ts-ignore importing from a JS file import { applyTheme } from '../../services'; @@ -46,11 +48,27 @@ export class ThemeProvider extends React.Component { }; } + setTheme = ( + themeValue: EUI_THEME['value'], + currentTheme: State['fullTheme'] + ): State['fullTheme'] => { + switch (themeValue) { + case 'light': + return euiLightTheme(currentTheme); + case 'dark': + return euiDarkTheme(currentTheme); + case 'amsterdam-light': + return amsterdamLightTheme(currentTheme); + case 'amsterdam-dark': + return amsterdamDarkTheme(currentTheme); + default: + return defaultState.fullTheme; + } + }; + changeTheme = (themeValue: EUI_THEME['value']) => { - console.log(this.state.fullTheme); - const fullTheme = themeValue.includes('light') - ? euiLightTheme(this.state.fullTheme) - : euiDarkTheme(this.state.fullTheme); + // console.log(this.state.fullTheme); + const fullTheme = this.setTheme(themeValue, this.state.fullTheme); this.setState({ theme: themeValue, fullTheme }, () => { localStorage.setItem('theme', themeValue); applyTheme(themeValue); From 3471d717b4a82c4814934c44578463781a6492a1 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 27 Jul 2020 11:44:26 -0400 Subject: [PATCH 12/33] Added support for Amsterdam themes (fix default load) --- .../components/with_theme/theme_context.tsx | 6 +-- src/theme_amsterdam_dark.ts | 28 ++++++++++++++ src/theme_amsterdam_light.ts | 29 +++++++++++++++ src/themes/eui-amsterdam/colors_dark.ts | 36 ++++++++++++++++++ src/themes/eui-amsterdam/colors_light.ts | 37 +++++++++++++++++++ 5 files changed, 132 insertions(+), 4 deletions(-) create mode 100644 src/theme_amsterdam_dark.ts create mode 100644 src/theme_amsterdam_light.ts create mode 100644 src/themes/eui-amsterdam/colors_dark.ts create mode 100644 src/themes/eui-amsterdam/colors_light.ts diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx index ad9cb6807fc..bb0f6e97e60 100644 --- a/src-docs/src/components/with_theme/theme_context.tsx +++ b/src-docs/src/components/with_theme/theme_context.tsx @@ -36,9 +36,7 @@ export class ThemeProvider extends React.Component { let theme = localStorage.getItem('theme'); if (!theme || !THEME_NAMES.includes(theme)) theme = defaultState.theme; applyTheme(theme); - const fullTheme = theme.includes('light') - ? defaultState.fullTheme - : euiDarkTheme(defaultState.fullTheme); + const fullTheme = this.setTheme(theme, defaultState.fullTheme); this.state = { theme, @@ -62,7 +60,7 @@ export class ThemeProvider extends React.Component { case 'amsterdam-dark': return amsterdamDarkTheme(currentTheme); default: - return defaultState.fullTheme; + return currentTheme; } }; diff --git a/src/theme_amsterdam_dark.ts b/src/theme_amsterdam_dark.ts new file mode 100644 index 00000000000..ef397a6fe19 --- /dev/null +++ b/src/theme_amsterdam_dark.ts @@ -0,0 +1,28 @@ +/* + * 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 { createTheme } from './themes/create_theme'; +import colorsDark from './themes/eui-amsterdam/colors_dark'; + +// export default createTheme(colorsDark); + +export default (theme: any) => { + theme.set('colors', colorsDark); + return theme; +}; diff --git a/src/theme_amsterdam_light.ts b/src/theme_amsterdam_light.ts new file mode 100644 index 00000000000..c243b3d0505 --- /dev/null +++ b/src/theme_amsterdam_light.ts @@ -0,0 +1,29 @@ +/* + * 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 { createTheme } from './themes/create_theme'; +import colorsLight from './themes/eui-amsterdam/colors_light'; + +export default (theme?: any) => { + if (theme) { + theme.set('colors', colorsLight); + return theme; + } + return createTheme(colorsLight); +}; diff --git a/src/themes/eui-amsterdam/colors_dark.ts b/src/themes/eui-amsterdam/colors_dark.ts new file mode 100644 index 00000000000..65061dbc859 --- /dev/null +++ b/src/themes/eui-amsterdam/colors_dark.ts @@ -0,0 +1,36 @@ +/* + * 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 euiColorsDark from '../eui/eui_colors_dark'; + +const brand = { + euiColorPrimary: '#238CFF', + euiColorSecondary: '#7DE2D1', + euiColorAccent: '#F990C0', +}; + +const colors = { + ...euiColorsDark, + ...brand, + + euiColorHighlight: '#232635', +}; + +export default colors; +export { colors }; diff --git a/src/themes/eui-amsterdam/colors_light.ts b/src/themes/eui-amsterdam/colors_light.ts new file mode 100644 index 00000000000..ed77f3e5808 --- /dev/null +++ b/src/themes/eui-amsterdam/colors_light.ts @@ -0,0 +1,37 @@ +/* + * 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 euiColorsLight from '../eui/eui_colors_light'; + +const brand = { + // Core + euiColorPrimary: '#006DE4', + euiColorSecondary: '#00BFB3', + euiColorAccent: '#FC358E', +}; + +const colors = { + ...euiColorsLight, + ...brand, + + euiColorHighlight: '#E6F0F8', +}; + +export default colors; +export { colors }; From 8527887e37ea6b4786f1c0ce83e4a4a1ccb1ee38 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 27 Jul 2020 11:46:35 -0400 Subject: [PATCH 13/33] Fixing typography --- src/global_styling/variables/typography.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/global_styling/variables/typography.ts b/src/global_styling/variables/typography.ts index d1179f0ac57..b1ea2202b9f 100644 --- a/src/global_styling/variables/typography.ts +++ b/src/global_styling/variables/typography.ts @@ -17,7 +17,7 @@ * under the License. */ -import { euiSize } from './sizes'; +import { euiBaseSize } from './sizes'; // Some mixins that help us deal with browser scaling of text more consistantly. // Essentially, fonts across eui should scale agains the root html element, not // against parent inheritance. @@ -56,7 +56,7 @@ const euiFontFeatureSettings = "'calt' 1, 'kern' 1, 'liga' 1"; // Font sizes -- scale is loosely based on Major Third (1.250) const euiTextScale = [2.25, 1.75, 1.25, 1.125, 1, 0.875, 0.75]; -const euiFontSize = euiSize; // 5th position in scale +const euiFontSize = euiBaseSize; // 5th position in scale const sizes = { euiFontSizeXS: euiFontSize * euiTextScale[6], // 12px euiFontSizeS: euiFontSize * euiTextScale[5], // 14px From e8370d01e3dc2bdbe5b2ca396303b62a3798ef50 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 27 Jul 2020 14:31:42 -0400 Subject: [PATCH 14/33] all keys return strings --- .../horizontal_rule/_horizontal_rule.scss | 54 +++++++++---------- .../horizontal_rule/horizontal_rule.tsx | 50 ++++++++++++++++- src/components/mark/mark.tsx | 3 +- src/global_styling/variables/sizes.ts | 2 +- 4 files changed, 79 insertions(+), 30 deletions(-) diff --git a/src/components/horizontal_rule/_horizontal_rule.scss b/src/components/horizontal_rule/_horizontal_rule.scss index b90b06bf18b..82bb3a9aa52 100644 --- a/src/components/horizontal_rule/_horizontal_rule.scss +++ b/src/components/horizontal_rule/_horizontal_rule.scss @@ -1,38 +1,38 @@ .euiHorizontalRule { border: none; height: 1px; - background-color: $euiBorderColor; flex-shrink: 0; // Ensure when used in flex group, it retains its size flex-grow: 0; // Ensure when used in flex group, it retains its size + // background-color: $euiBorderColor; - &.euiHorizontalRule--full { - width: 100%; - } + // &.euiHorizontalRule--full { + // width: 100%; + // } - &.euiHorizontalRule--half { - width: 50%; - margin-left: auto; - margin-right: auto; - } + // &.euiHorizontalRule--half { + // width: 50%; + // margin-left: auto; + // margin-right: auto; + // } - &.euiHorizontalRule--quarter { - width: 25%; - margin-left: auto; - margin-right: auto; - } + // &.euiHorizontalRule--quarter { + // width: 25%; + // margin-left: auto; + // margin-right: auto; + // } } -$ruleMargins: ( - marginXSmall: $euiSizeS, - marginSmall: $euiSizeM, - marginMedium: $euiSize, - marginLarge: $euiSizeL, - marginXLarge: $euiSizeXL, - marginXXLarge: $euiSizeXXL, -); +// $ruleMargins: ( +// marginXSmall: $euiSizeS, +// marginSmall: $euiSizeM, +// marginMedium: $euiSize, +// marginLarge: $euiSizeL, +// marginXLarge: $euiSizeXL, +// marginXXLarge: $euiSizeXXL, +// ); -@each $name, $size in $ruleMargins { - .euiHorizontalRule--#{$name} { - margin: $size 0; - } -} +// @each $name, $size in $ruleMargins { +// .euiHorizontalRule--#{$name} { +// margin: $size 0; +// } +// } diff --git a/src/components/horizontal_rule/horizontal_rule.tsx b/src/components/horizontal_rule/horizontal_rule.tsx index 2ca681e17b3..aab26e7cb32 100644 --- a/src/components/horizontal_rule/horizontal_rule.tsx +++ b/src/components/horizontal_rule/horizontal_rule.tsx @@ -17,8 +17,12 @@ * under the License. */ +// below comment line is required +// it tells babel how to convert properly import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; +import { css } from '@emotion/core'; +import usePropagate from '../../services/propagate/use_propagate'; import { CommonProps } from '../common'; @@ -39,6 +43,22 @@ const sizeToClassNameMap = { quarter: 'euiHorizontalRule--quarter', }; +const sizeToCssMap = { + full: { + width: '100%', + }, + half: { + width: '50%', + marginLeft: 'auto', + marginRight: 'auto', + }, + quarter: { + width: '25%', + marginLeft: 'auto', + marginRight: 'auto', + }, +}; + export const SIZES = Object.keys(sizeToClassNameMap); const marginToClassNameMap = { @@ -51,11 +71,33 @@ const marginToClassNameMap = { xxl: 'euiHorizontalRule--marginXXLarge', }; +const marginToVariableMap = { + xs: 'euiSizeS', + s: 'euiSizeM', + m: 'euiSize', + l: 'euiSizeL', + xl: 'euiSizeXL', + xxl: 'euiSizeXXL', +}; + export const MARGINS = Object.keys(marginToClassNameMap); export const EuiHorizontalRule: FunctionComponent< CommonProps & HTMLAttributes & EuiHorizontalRuleProps > = ({ className, size = 'full', margin = 'l', ...rest }) => { + const [borders, sizes] = usePropagate(['borders', 'sizes']); + + const horizontalRuleMargin = + margin in marginToVariableMap + ? sizes[marginToVariableMap[margin]] + : undefined; + + const horizontalRuleAnyName = css` + background-color: ${borders.euiBorderColor}; + margin: ${horizontalRuleMargin} 0; + `; + + const horizontalRuleSize = sizeToCssMap[size]; const classes = classNames( 'euiHorizontalRule', sizeToClassNameMap[size], @@ -63,5 +105,11 @@ export const EuiHorizontalRule: FunctionComponent< className ); - return
; + return ( +
+ ); }; diff --git a/src/components/mark/mark.tsx b/src/components/mark/mark.tsx index 167633e9858..2f5988e9d4e 100644 --- a/src/components/mark/mark.tsx +++ b/src/components/mark/mark.tsx @@ -22,6 +22,7 @@ import { CommonProps } from '../common'; import classNames from 'classnames'; import { css } from '@emotion/core'; import usePropagate from '../../services/propagate/use_propagate'; +import { euiSize } from '../../global_styling/variables/sizes'; export type EuiMarkProps = HTMLAttributes & CommonProps & { @@ -37,7 +38,7 @@ export const EuiMark: FunctionComponent = ({ const mark = css` // The only one that is a function for calculations - margin: ${sizes.euiSize(0.25)}; + margin: ${euiSize(0.25)}; // Named sizes as strings padding: ${sizes.euiSizeXS}; // For testing only diff --git a/src/global_styling/variables/sizes.ts b/src/global_styling/variables/sizes.ts index cbcc043249c..a46b868ae4a 100644 --- a/src/global_styling/variables/sizes.ts +++ b/src/global_styling/variables/sizes.ts @@ -25,10 +25,10 @@ const euiSize = (scale?: number) => `${euiBaseSize * (scale || 1)}px`; // The calculated scales, only `euiSize` is a function const sizes = { - euiSize, euiSizeXS: euiSize(0.25), euiSizeS: euiSize(0.5), euiSizeM: euiSize(0.75), + euiSize: euiSize(), euiSizeL: euiSize(1.5), euiSizeXL: euiSize(2), euiSizeXXL: euiSize(2.5), From cee3239d0e7920c3cc6db01c80d399a405bc56a8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 27 Jul 2020 16:27:15 -0400 Subject: [PATCH 15/33] cleanup --- .../horizontal_rule/horizontal_rule.tsx | 4 +-- src/themes/create_theme.ts | 28 ++----------------- 2 files changed, 4 insertions(+), 28 deletions(-) diff --git a/src/components/horizontal_rule/horizontal_rule.tsx b/src/components/horizontal_rule/horizontal_rule.tsx index aab26e7cb32..1e35e19607a 100644 --- a/src/components/horizontal_rule/horizontal_rule.tsx +++ b/src/components/horizontal_rule/horizontal_rule.tsx @@ -88,9 +88,7 @@ export const EuiHorizontalRule: FunctionComponent< const [borders, sizes] = usePropagate(['borders', 'sizes']); const horizontalRuleMargin = - margin in marginToVariableMap - ? sizes[marginToVariableMap[margin]] - : undefined; + margin !== 'none' ? sizes[marginToVariableMap[margin]] : undefined; const horizontalRuleAnyName = css` background-color: ${borders.euiBorderColor}; diff --git a/src/themes/create_theme.ts b/src/themes/create_theme.ts index 0e0f479d38b..1825e4a2b04 100644 --- a/src/themes/create_theme.ts +++ b/src/themes/create_theme.ts @@ -18,38 +18,16 @@ */ import Propagate from '../services/propagate/propagate'; -import { - // createBorders, - sizes, - typography, -} from '../global_styling/variables'; +import { sizes, typography, createBorders } from '../global_styling/variables'; + export const createTheme = (colors: any) => { const propagate = new Propagate(); propagate.set('colors', colors); propagate.set('sizes', sizes); propagate.set('typography', typography); - //propagate.set('euiBorderColor', ['euiPrimaryColor'], color => shade(color)); propagate.set('borders', ['colors'], colors => { - const euiBorderWidthThin = '1px'; - const euiBorderWidthThick = '2px'; - - const euiBorderColor = colors.euiColorLightShade; - const euiBorderRadius = '4px'; - const euiBorderThick = `${euiBorderWidthThick} solid ${euiBorderColor}`; - const euiBorderThin = `${euiBorderWidthThin} solid ${euiBorderColor}`; - const euiBorderEditable = `${euiBorderWidthThick} dotted ${euiBorderColor}`; - - const borders = { - euiBorderWidthThin, - euiBorderWidthThick, - euiBorderColor, - euiBorderRadius, - euiBorderThick, - euiBorderThin, - euiBorderEditable, - }; - return borders; + return createBorders(colors); }); return propagate; }; From d3aa72b3d32f1baed7c80d12e3953d8da8758800 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 27 Jul 2020 16:22:08 -0700 Subject: [PATCH 16/33] add theme names --- src/theme_amsterdam_dark.ts | 1 + src/theme_amsterdam_light.ts | 5 ++++- src/theme_dark.ts | 1 + src/theme_light.ts | 5 ++++- src/themes/create_theme.ts | 5 ++++- 5 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/theme_amsterdam_dark.ts b/src/theme_amsterdam_dark.ts index ef397a6fe19..6cff1132463 100644 --- a/src/theme_amsterdam_dark.ts +++ b/src/theme_amsterdam_dark.ts @@ -23,6 +23,7 @@ import colorsDark from './themes/eui-amsterdam/colors_dark'; // export default createTheme(colorsDark); export default (theme: any) => { + theme.set('name', 'EuiAmsterdamDark'); theme.set('colors', colorsDark); return theme; }; diff --git a/src/theme_amsterdam_light.ts b/src/theme_amsterdam_light.ts index c243b3d0505..a0e236531d4 100644 --- a/src/theme_amsterdam_light.ts +++ b/src/theme_amsterdam_light.ts @@ -20,10 +20,13 @@ import { createTheme } from './themes/create_theme'; import colorsLight from './themes/eui-amsterdam/colors_light'; +const name = 'EuiAmsterdamLight'; + export default (theme?: any) => { if (theme) { + theme.set('name', name); theme.set('colors', colorsLight); return theme; } - return createTheme(colorsLight); + return createTheme(colorsLight, name); }; diff --git a/src/theme_dark.ts b/src/theme_dark.ts index d29f74be638..c961c86c4cf 100644 --- a/src/theme_dark.ts +++ b/src/theme_dark.ts @@ -23,6 +23,7 @@ import euiColorsDark from './themes/eui/eui_colors_dark'; // export default createTheme(euiColorsDark); export default (theme: any) => { + theme.set('name', 'EuiDark'); theme.set('colors', euiColorsDark); return theme; }; diff --git a/src/theme_light.ts b/src/theme_light.ts index 1cb1d4bf920..2ebe691b841 100644 --- a/src/theme_light.ts +++ b/src/theme_light.ts @@ -20,10 +20,13 @@ import { createTheme } from './themes/create_theme'; import euiColorsLight from './themes/eui/eui_colors_light'; +const name = 'EuiLight'; + export default (theme?: any) => { if (theme) { + theme.set('name', name); theme.set('colors', euiColorsLight); return theme; } - return createTheme(euiColorsLight); + return createTheme(euiColorsLight, name); }; diff --git a/src/themes/create_theme.ts b/src/themes/create_theme.ts index 1825e4a2b04..83e149ff5d4 100644 --- a/src/themes/create_theme.ts +++ b/src/themes/create_theme.ts @@ -20,8 +20,11 @@ import Propagate from '../services/propagate/propagate'; import { sizes, typography, createBorders } from '../global_styling/variables'; -export const createTheme = (colors: any) => { +export const createTheme = (colors: any, name?: string) => { const propagate = new Propagate(); + if (name) { + propagate.set('name', name); + } propagate.set('colors', colors); propagate.set('sizes', sizes); propagate.set('typography', typography); From eafc84351caea3d9efad655ee1f664e6deddb5df Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 28 Jul 2020 10:58:36 -0400 Subject: [PATCH 17/33] EuiCallOut as a working example of checking theme names in the component --- src/components/call_out/_call_out.scss | 6 ++++++ src/components/call_out/call_out.tsx | 19 +++++++++++++++++-- src/theme_amsterdam_dark.ts | 2 +- src/theme_amsterdam_light.ts | 2 +- src/theme_dark.ts | 2 +- src/theme_light.ts | 2 +- .../eui-amsterdam/overrides/_call_out.scss | 14 +++++++------- 7 files changed, 34 insertions(+), 13 deletions(-) diff --git a/src/components/call_out/_call_out.scss b/src/components/call_out/_call_out.scss index 59e323b4101..48a3e5529ca 100644 --- a/src/components/call_out/_call_out.scss +++ b/src/components/call_out/_call_out.scss @@ -18,6 +18,12 @@ } } +.euiCallOut--amsterdam { + .euiCallOutHeader__title { + font-weight: $euiFontWeightMedium; + } +} + // smaller font size for headers in small callout .euiCallOut--small .euiCallOutHeader__title { @include euiCallOutTitle('s'); diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx index 35322ecceea..9f2e270d490 100644 --- a/src/components/call_out/call_out.tsx +++ b/src/components/call_out/call_out.tsx @@ -18,6 +18,7 @@ */ import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; +import { css } from '@emotion/core'; import classNames from 'classnames'; @@ -25,6 +26,7 @@ import { CommonProps, keysOf } from '../common'; import { IconType, EuiIcon } from '../icon'; import { EuiText } from '../text'; +import usePropagate from '../../services/propagate/use_propagate'; type Color = 'primary' | 'success' | 'warning' | 'danger'; type Size = 's' | 'm'; @@ -64,15 +66,28 @@ export const EuiCallOut: FunctionComponent = ({ heading, ...rest }) => { + const [themeName, borders] = usePropagate(['name', 'borders']); + + const amsterdamClass = themeName.includes('amsterdam') + ? 'euiCallOut--amsterdam' + : undefined; + const classes = classNames( 'euiCallOut', colorToClassNameMap[color], sizeToClassNameMap[size], + amsterdamClass, className ); - let headerIcon; + const amsterdamStyles = themeName.includes('amsterdam') + ? css` + border-radius: ${borders.euiBorderRadius}; + border-left-width: 0; + ` + : undefined; + let headerIcon; if (iconType) { headerIcon = ( = ({ ); } return ( -
+
{header} {optionalChildren} diff --git a/src/theme_amsterdam_dark.ts b/src/theme_amsterdam_dark.ts index 6cff1132463..d3e9a0e9905 100644 --- a/src/theme_amsterdam_dark.ts +++ b/src/theme_amsterdam_dark.ts @@ -23,7 +23,7 @@ import colorsDark from './themes/eui-amsterdam/colors_dark'; // export default createTheme(colorsDark); export default (theme: any) => { - theme.set('name', 'EuiAmsterdamDark'); + theme.set('name', 'amsterdam-dark'); theme.set('colors', colorsDark); return theme; }; diff --git a/src/theme_amsterdam_light.ts b/src/theme_amsterdam_light.ts index a0e236531d4..0e13e1522f9 100644 --- a/src/theme_amsterdam_light.ts +++ b/src/theme_amsterdam_light.ts @@ -20,7 +20,7 @@ import { createTheme } from './themes/create_theme'; import colorsLight from './themes/eui-amsterdam/colors_light'; -const name = 'EuiAmsterdamLight'; +const name = 'amsterdam-light'; export default (theme?: any) => { if (theme) { diff --git a/src/theme_dark.ts b/src/theme_dark.ts index c961c86c4cf..912818ad945 100644 --- a/src/theme_dark.ts +++ b/src/theme_dark.ts @@ -23,7 +23,7 @@ import euiColorsDark from './themes/eui/eui_colors_dark'; // export default createTheme(euiColorsDark); export default (theme: any) => { - theme.set('name', 'EuiDark'); + theme.set('name', 'dark'); theme.set('colors', euiColorsDark); return theme; }; diff --git a/src/theme_light.ts b/src/theme_light.ts index 2ebe691b841..25dd7330081 100644 --- a/src/theme_light.ts +++ b/src/theme_light.ts @@ -20,7 +20,7 @@ import { createTheme } from './themes/create_theme'; import euiColorsLight from './themes/eui/eui_colors_light'; -const name = 'EuiLight'; +const name = 'light'; export default (theme?: any) => { if (theme) { diff --git a/src/themes/eui-amsterdam/overrides/_call_out.scss b/src/themes/eui-amsterdam/overrides/_call_out.scss index c13e2c1e396..f4795799310 100644 --- a/src/themes/eui-amsterdam/overrides/_call_out.scss +++ b/src/themes/eui-amsterdam/overrides/_call_out.scss @@ -1,8 +1,8 @@ -.euiCallOut { - border-radius: $euiBorderRadius; - border-left: none; +// .euiCallOut { +// border-radius: $euiBorderRadius; +// border-left: none; - .euiCallOutHeader__title { - font-weight: $euiFontWeightMedium; - } -} +// .euiCallOutHeader__title { +// font-weight: $euiFontWeightMedium; +// } +// } From d50ae389535ed3e8993761ee90fd89410ee86710 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 28 Jul 2020 11:21:33 -0400 Subject: [PATCH 18/33] Custom borders for Amsterdam --- src/global_styling/variables/borders.ts | 4 ++-- src/theme_amsterdam_dark.ts | 2 ++ src/theme_amsterdam_light.ts | 2 ++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/global_styling/variables/borders.ts b/src/global_styling/variables/borders.ts index 799284333e1..9848948f566 100644 --- a/src/global_styling/variables/borders.ts +++ b/src/global_styling/variables/borders.ts @@ -17,12 +17,12 @@ * under the License. */ -export const createBorders = (colors: any) => { +export const createBorders = (colors: any, radius: number = 4) => { const euiBorderWidthThin = '1px'; const euiBorderWidthThick = '2px'; const euiBorderColor = colors.euiColorLightShade; - const euiBorderRadius = '4px'; + const euiBorderRadius = `${radius}px`; const euiBorderThick = `${euiBorderWidthThick} solid ${euiBorderColor}`; const euiBorderThin = `${euiBorderWidthThin} solid ${euiBorderColor}`; const euiBorderEditable = `${euiBorderWidthThick} dotted ${euiBorderColor}`; diff --git a/src/theme_amsterdam_dark.ts b/src/theme_amsterdam_dark.ts index d3e9a0e9905..6c406eb7d42 100644 --- a/src/theme_amsterdam_dark.ts +++ b/src/theme_amsterdam_dark.ts @@ -19,11 +19,13 @@ // import { createTheme } from './themes/create_theme'; import colorsDark from './themes/eui-amsterdam/colors_dark'; +import { createBorders } from './global_styling/variables'; // export default createTheme(colorsDark); export default (theme: any) => { theme.set('name', 'amsterdam-dark'); theme.set('colors', colorsDark); + theme.set('borders', createBorders(colorsDark, 6)); return theme; }; diff --git a/src/theme_amsterdam_light.ts b/src/theme_amsterdam_light.ts index 0e13e1522f9..406be8d2752 100644 --- a/src/theme_amsterdam_light.ts +++ b/src/theme_amsterdam_light.ts @@ -19,6 +19,7 @@ import { createTheme } from './themes/create_theme'; import colorsLight from './themes/eui-amsterdam/colors_light'; +import { createBorders } from './global_styling/variables'; const name = 'amsterdam-light'; @@ -26,6 +27,7 @@ export default (theme?: any) => { if (theme) { theme.set('name', name); theme.set('colors', colorsLight); + theme.set('borders', createBorders(colorsLight, 6)); return theme; } return createTheme(colorsLight, name); From 3312b3b83dde12a13a942ae53b88c18b244548e1 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 28 Jul 2020 12:05:25 -0400 Subject: [PATCH 19/33] EuiButtonEmpty using Emotion for text color and forcing colors to change based on "ghost" --- .../button/button_empty/_button_empty.scss | 2 +- .../button/button_empty/button_empty.tsx | 26 +++++++++++++++++++ src/themes/eui/eui_colors_dark.ts | 1 + src/themes/eui/eui_colors_light.ts | 1 + 4 files changed, 29 insertions(+), 1 deletion(-) diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss index 79d9b9d8f9c..e15597b4ff2 100644 --- a/src/components/button/button_empty/_button_empty.scss +++ b/src/components/button/button_empty/_button_empty.scss @@ -64,7 +64,7 @@ $euiButtonEmptyTypes: ( .euiButtonEmpty--#{$name} { @if ($name == 'ghost') { // Ghost is unique and ALWAYS sits against a dark background. - color: $color; + // color: $color; } @else if ($name == 'text') { // The default color is lighter than the normal text color, make the it the text color color: $euiTextColor; diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx index cc72e2caa59..6ac5f0e1fb9 100644 --- a/src/components/button/button_empty/button_empty.tsx +++ b/src/components/button/button_empty/button_empty.tsx @@ -19,6 +19,10 @@ import React, { FunctionComponent } from 'react'; import classNames from 'classnames'; +import { css } from '@emotion/core'; +import usePropagate from '../../../services/propagate/use_propagate'; +import euiColorsDark from '../../../themes/eui/eui_colors_dark'; +import amsterdamColorsDark from '../../../themes/eui-amsterdam/colors_dark'; import { CommonProps, @@ -49,6 +53,14 @@ const colorToClassNameMap: { [color in EuiButtonEmptyColor]: string } = { ghost: 'euiButtonEmpty--ghost', }; +const textColorToThemeMap: { [color in EuiButtonEmptyColor]: string } = { + primary: 'euiColorPrimary', + danger: 'euiColorDanger', + disabled: 'euiTextColor', + text: 'euiTextColor', + ghost: 'euiTextColor', +}; + export const COLORS = keysOf(colorToClassNameMap); const sizeToClassNameMap = { @@ -130,6 +142,17 @@ export const EuiButtonEmpty: FunctionComponent = ({ textProps, ...rest }) => { + let [themeName, colors] = usePropagate(['name', 'colors']); + + if (color === 'ghost') { + // TODO: Can this be moved to a service for reuse elsewhere? + colors = themeName.includes('amsterdam') + ? amsterdamColorsDark + : euiColorsDark; + } + + const textColor = colors[textColorToThemeMap[color]]; + // If in the loading state, force disabled to true const buttonIsDisabled = isLoading || isDisabled || disabled; @@ -187,6 +210,9 @@ export const EuiButtonEmpty: FunctionComponent = ({ return (