From 1dcc096917edf17204f8ff1288ee80746ee6dc94 Mon Sep 17 00:00:00 2001 From: Nurai <57894834+Naurabay@users.noreply.github.com> Date: Tue, 19 Sep 2023 23:46:39 +0600 Subject: [PATCH 01/15] Update README.md (#570) Signed-off-by: Nuraiym Omurbekova Co-authored-by: Josh Romero Signed-off-by: ShatilKhan --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2cce8682f4..d7d9429f25 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ > The OpenSearch UI (OUI) Framework is a collection of React UI components for quickly building user interfaces > for the OpenSearch Project. -You should check out our [living style guide][docs], which contains many examples of components in the OUI framework aesthetic, and how to use them in your products. We also have a [FAQ][FAQ.md] that covers common usage questions. +You should check out our [living style guide][docs], which contains many examples of components in the OUI framework aesthetic, and how to use them in your products. We also have a [FAQ](FAQ.md) that covers common usage questions. ### Goals From 150eb7daf55c71eee61681db05292d294f1c3768 Mon Sep 17 00:00:00 2001 From: Miki Date: Wed, 27 Sep 2023 14:09:23 -0700 Subject: [PATCH 02/15] Replace `node-sass` with `sass-embedded` (#1001) Also: * Implement sass variable extraction * Implement sass variable importing in typescript * Add guards to post-install cleanup * Make sources compatible with dart sass by wrapping divisions in `calc()` and adding units were necessary * Fold in `@elastic/charts/dist/theme.scss` to modify it for dart-sass compatibility * Break out compiling `charts` Signed-off-by: Miki Signed-off-by: ShatilKhan --- .babelrc.js | 1 + .gitattributes | 2 +- .gitignore | 6 +- .sass-lint.yml | 2 + CHANGELOG.md | 1 + package.json | 9 +- scripts/babel/variables-from-scss/index.js | 40 ++ scripts/compile-charts.js | 88 ++++ scripts/compile-oui.js | 49 -- .../{compile-scss.js => compile-themes.js} | 26 +- scripts/lib/compile-scss-with-variables.js | 187 +++++++ .../{ => lib}/derive-sass-variable-types.js | 0 scripts/preinstall.js | 14 +- scripts/sass-extract-js-plugin.js | 110 ----- src-docs/src/components/guide_components.scss | 2 +- src-docs/src/theme_dark.scss | 1 - src-docs/src/theme_light.scss | 1 - src-docs/src/theme_next_dark.scss | 1 - src-docs/src/theme_next_light.scss | 1 - .../src/views/guidelines/_get_sass_vars.js | 8 +- .../guidelines/colors/_color_section.scss | 2 +- src-docs/src/views/guidelines/sass.js | 8 +- src-docs/src/views/header/header_dark.tsx | 2 +- .../views/header/header_elastic_pattern.js | 2 +- src-docs/src/views/header/header_example.js | 2 +- .../views/suggest/_global_filter_item.scss | 4 +- .../src/views/suggest/_saved_queries.scss | 4 +- .../utility_classes_responsive.js | 2 +- src/components/badge/_badge.scss | 2 +- src/components/breadcrumbs/_breadcrumbs.scss | 8 +- src/components/call_out/_call_out.scss | 4 +- src/components/call_out/_mixins.scss | 2 +- src/components/card/_card.scss | 4 +- .../color_picker/_color_picker_swatch.scss | 2 +- src/components/color_picker/_saturation.scss | 4 +- src/components/comment_list/_comment.scss | 4 +- src/components/control_bar/_control_bar.scss | 2 +- src/components/datagrid/_data_grid.scss | 2 +- .../datagrid/_data_grid_column_resizer.scss | 2 +- .../datagrid/_data_grid_data_row.scss | 4 +- src/components/datagrid/_variables.scss | 2 +- src/components/date_picker/_date_picker.scss | 20 +- .../date_picker/_date_picker_range.scss | 4 +- src/components/drag_and_drop/_variables.scss | 6 +- src/components/expression/_expression.scss | 2 +- src/components/facet/_facet_group.scss | 4 +- src/components/flyout/_flyout.scss | 2 +- src/components/form/checkbox/_checkbox.scss | 2 +- .../_form_control_layout.scss | 2 +- .../_form_control_layout_delimited.scss | 6 +- .../_form_control_layout_icons.scss | 2 +- src/components/form/form_row/_form_row.scss | 2 +- src/components/form/radio/_radio.scss | 2 +- src/components/form/range/_range.scss | 2 +- .../form/range/_range_draggable.scss | 8 +- .../form/range/_range_highlight.scss | 6 +- src/components/form/range/_range_levels.scss | 8 +- src/components/form/range/_range_slider.scss | 8 +- src/components/form/range/_range_thumb.scss | 2 +- src/components/form/range/_range_ticks.scss | 6 +- src/components/form/range/_range_tooltip.scss | 12 +- src/components/form/switch/_switch.scss | 8 +- .../key_pad_menu/_key_pad_menu.scss | 2 +- src/components/loading/_loading_chart.scss | 12 +- src/components/loading/_loading_spinner.scss | 2 +- .../markdown_editor/_markdown_format.scss | 2 +- .../markdown_editor/_variables.scss | 2 +- .../_page_content_header_section.scss | 2 +- .../pagination/_pagination_button.scss | 2 +- src/components/progress/_progress.scss | 2 +- .../_resizable_button.scss | 10 +- src/components/schema/_schema_item.scss | 8 +- src/components/search_bar/_search_bar.scss | 2 +- src/components/side_nav/_side_nav_item.scss | 2 +- src/components/steps/_steps.scss | 8 +- src/components/steps/_steps_horizontal.scss | 6 +- src/components/table/_responsive.scss | 4 +- src/components/table/_variables.scss | 2 +- src/components/tabs/_tabs.scss | 4 +- src/components/text/_text.scss | 2 +- src/components/tool_tip/_tool_tip.scss | 4 +- src/components/tour/_tour.scss | 8 +- src/components/tree_view/tree_view.scss | 4 +- src/global_styling/functions/_colors.scss | 6 +- src/global_styling/functions/_math.scss | 6 +- src/global_styling/mixins/_beta_badge.scss | 4 +- src/global_styling/mixins/_form.scss | 6 +- src/global_styling/mixins/_shadow.scss | 2 +- src/global_styling/variables/_borders.scss | 2 +- src/global_styling/variables/_form.scss | 4 +- src/global_styling/variables/_typography.scss | 4 +- src/themes/charts/theme.scss | 465 +++++++++++++++++- src/themes/charts/themes.ts | 134 +++-- .../global_styling/functions/_colors.scss | 6 +- .../global_styling/functions/_math.scss | 6 +- .../global_styling/mixins/_beta_badge.scss | 4 +- .../oui-next/global_styling/mixins/_form.scss | 6 +- .../global_styling/mixins/_shadow.scss | 2 +- .../global_styling/variables/_borders.scss | 2 +- .../global_styling/variables/_form.scss | 4 +- .../global_styling/variables/_typography.scss | 4 +- yarn.lock | 320 ++++-------- 102 files changed, 1188 insertions(+), 620 deletions(-) create mode 100644 scripts/babel/variables-from-scss/index.js create mode 100755 scripts/compile-charts.js rename scripts/{compile-scss.js => compile-themes.js} (91%) create mode 100644 scripts/lib/compile-scss-with-variables.js rename scripts/{ => lib}/derive-sass-variable-types.js (100%) delete mode 100644 scripts/sass-extract-js-plugin.js diff --git a/.babelrc.js b/.babelrc.js index a8a3396af2..be62020ecc 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -29,6 +29,7 @@ module.exports = { "@babel/plugin-syntax-dynamic-import", "pegjs-inline-precompile", "./scripts/babel/proptypes-from-ts-props", + "./scripts/babel/variables-from-scss", "add-module-exports", // stage 3 "@babel/proposal-object-rest-spread", diff --git a/.gitattributes b/.gitattributes index 7462edee66..81fb44afa4 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,5 +1,5 @@ # force unix-style LF (\n) line endings for source files -# this is necessary for prettier's linting and sass-vars-to-js-loader +# this is necessary for prettier's linting *.js text eol=lf *.ts text eol=lf *.tsx text eol=lf diff --git a/.gitignore b/.gitignore index b18c9489a7..db417fdf47 100644 --- a/.gitignore +++ b/.gitignore @@ -8,9 +8,9 @@ test/failure-screenshots/**/*.png coverage/ reports/ tmp/ -dist/ -docs/ -lib/ +/dist/ +/docs/ +/lib/ es/ test-env/ .idea diff --git a/.sass-lint.yml b/.sass-lint.yml index f2031b4e4f..2b5b5da73c 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -61,6 +61,8 @@ rules: space-around-operator: 2 # We minify css, so this doesn't apply no-css-comments: 0 + # sass wants units + zero-unit: 0 # We use _ (underscores) for import path that don't directly compile clean-import-paths: 0 # Allows input[type=search] diff --git a/CHANGELOG.md b/CHANGELOG.md index 62ebe84782..7914aa84e7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -78,6 +78,7 @@ - [CVE-2023-26115] Bump word-wrap from 1.2.3 to 1.2.4 ([#891](https://github.com/opensearch-project/oui/pull/891)) - Bump Node version to 18.16.0 ([#900](https://github.com/opensearch-project/oui/pull/900)) - Bump `node-sass` to a patched version based on `libsass@3.6.5` ([#977](https://github.com/opensearch-project/oui/pull/977)); see [patch commit](https://github.com/AMoo-Miki/node-sass/commit/43c74c0966b05c1e21a1e5e20a0c467ec8e669b4) for details. +- Replace `node-sass` with `sass-embedded` ([#1001](https://github.com/opensearch-project/oui/pull/1001)) ### 🪛 Refactoring diff --git a/package.json b/package.json index 9640ec2f94..a8d6d0efcf 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "test-docker": "node ./scripts/test-docker.js", "sync-docs": "node ./scripts/docs-sync.js", "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js", - "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-oui.js && node ./scripts/compile-scss.js $npm_package_name", + "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-oui.js && node ./scripts/compile-themes.js $npm_package_name && node ./scripts/compile-charts.js", "clean": "node ./scripts/compile-clean.js", "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.js\"", "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings", @@ -67,7 +67,6 @@ "jest-cli/**/tough-cookie": "^4.1.3", "jest/**/node-notifier": "^10.0.1", "jest/**/tough-cookie": "^4.1.3", - "node-sass/sass-graph/scss-tokenizer": "^0.4.3", "postcss-cli/chokidar/glob-parent": "^6.0.1", "postcss-inline-svg/css-select/nth-check": "^2.0.1", "react-view/**/ansi-regex": "^5.0.1", @@ -214,7 +213,6 @@ "jest-cli": "^24.1.0", "moment": "^2.29.4", "moment-timezone": "^0.5.41", - "node-sass": "npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5", "pegjs": "^0.10.0", "postcss-cli": "^7.1.2", "postcss-inline-svg": "^4.1.0", @@ -236,11 +234,10 @@ "redux-thunk": "^2.4.2", "resolve": "^1.22.1", "rimraf": "^5.0.1", - "sass-extract": "^2.1.0", + "sass-embedded": "^1.66.1", "sass-lint": "^1.13.1", "sass-lint-auto-fix": "^0.21.2", - "sass-loader": "npm:@bsfishy/sass-loader@node-sass-9", - "sass-vars-to-js-loader": "^2.1.1", + "sass-loader": "npm:@bsfishy/sass-loader@10.4.1-support-sass-embedded.3", "shelljs": "^0.8.5", "start-server-and-test": "^2.0.0", "style-loader": "^1.2.1", diff --git a/scripts/babel/variables-from-scss/index.js b/scripts/babel/variables-from-scss/index.js new file mode 100644 index 0000000000..dfab60af80 --- /dev/null +++ b/scripts/babel/variables-from-scss/index.js @@ -0,0 +1,40 @@ +const fs = require('fs'); +const { join, dirname, parse } = require('path'); +const { compileWithVariablesSync } = require('../../lib/compile-scss-with-variables'); + +const idKey = '!!variables-from-scss!!'; +const keyLength = idKey.length; + +const forbiddenKeyNames = [...Object.getOwnPropertyNames(Object.prototype), 'prototype']; + +module.exports = (babel) => ({ + visitor: { + ImportDeclaration(path, state) { + if (path.node.source.value.startsWith(idKey)) { + const deconstructedAssignments = []; + const usedVariableNames = []; + const assignments = []; + for (const specifier of path.node.specifiers) { + if (specifier.type === 'ImportDefaultSpecifier') { + assignments.push(specifier.local.name); + } else if (specifier.type === 'ImportSpecifier') { + usedVariableNames.push(specifier.imported.name); + deconstructedAssignments.push(specifier.imported.name === specifier.local.name ? specifier.local.name : `${specifier.imported.name}: ${specifier.local.name}`); + } + } + + const importTarget = join(dirname(state.file.opts.filename), path.node.source.value.substring(keyLength)); + const { variables } = compileWithVariablesSync(importTarget); + + // If no default specifier is used, reduce the variables to only those needed + const importedVariables = assignments.length === 0 ? usedVariableNames.reduce((acc, name) => { + if (!forbiddenKeyNames.includes(name)) acc[name] = variables[name]; + return acc; + }, {}) : variables; + + if (deconstructedAssignments.length > 0) assignments.push(`{ ${deconstructedAssignments.join(', ')} }`); + path.replaceWith(babel.template.statement.ast(`const ${assignments.join(', ')} = ${JSON.stringify(importedVariables)};`)); + } + } + } +}); diff --git a/scripts/compile-charts.js b/scripts/compile-charts.js new file mode 100755 index 0000000000..82df4de4a2 --- /dev/null +++ b/scripts/compile-charts.js @@ -0,0 +1,88 @@ +/* + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +/* + * 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 { execSync } = require('child_process'); +const chalk = require('chalk'); +const path = require('path'); +const dtsGenerator = require('dts-generator').default; + +function compileChartsBundle() { + console.log('Building chart theme module...'); + execSync( + 'webpack src/themes/charts/themes.ts -o dist/oui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js', + { + stdio: 'inherit', + } + ); + dtsGenerator({ + prefix: '', + out: 'dist/oui_charts_theme.d.ts', + baseDir: path.resolve(__dirname, '..', 'src/themes/charts/'), + files: ['themes.ts'], + resolveModuleId() { + return '@opensearch-project/oui/dist/oui_charts_theme'; + }, + resolveModuleImport(params) { + if (params.importedModuleId === '../../components/common') { + return '@opensearch-project/oui/src/components/common'; + } + return null; + } + }); + + /* OUI -> EUI Aliases */ + execSync( + 'webpack src/themes/charts/themes.ts -o dist/eui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js', + { + stdio: 'inherit', + } + ); + dtsGenerator({ + prefix: '', + out: 'dist/eui_charts_theme.d.ts', + baseDir: path.resolve(__dirname, '..', 'src/themes/charts/'), + files: ['themes.ts'], + resolveModuleId() { + return '@elastic/eui/dist/eui_charts_theme'; + }, + resolveModuleImport(params) { + if (params.importedModuleId === '../../components/common') { + return '@elastic/eui/src/components/common'; + } + return null; + } + }); + /* End of Aliases */ + + console.log(chalk.green('✔ Finished chart theme module')); +} + +compileChartsBundle(); diff --git a/scripts/compile-oui.js b/scripts/compile-oui.js index 1746eb6ee2..96b9a02ed6 100755 --- a/scripts/compile-oui.js +++ b/scripts/compile-oui.js @@ -308,55 +308,6 @@ function compileBundle() { } }); console.log(chalk.green('✔ Finished test utils files')); - - console.log('Building chart theme module...'); - execSync( - 'webpack src/themes/charts/themes.ts -o dist/oui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js', - { - stdio: 'inherit', - } - ); - dtsGenerator({ - prefix: '', - out: 'dist/oui_charts_theme.d.ts', - baseDir: path.resolve(__dirname, '..', 'src/themes/charts/'), - files: ['themes.ts'], - resolveModuleId() { - return '@opensearch-project/oui/dist/oui_charts_theme'; - }, - resolveModuleImport(params) { - if (params.importedModuleId === '../../components/common') { - return '@opensearch-project/oui/src/components/common'; - } - return null; - } - }); - - /* OUI -> EUI Aliases */ - execSync( - 'webpack src/themes/charts/themes.ts -o dist/eui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js', - { - stdio: 'inherit', - } - ); - dtsGenerator({ - prefix: '', - out: 'dist/eui_charts_theme.d.ts', - baseDir: path.resolve(__dirname, '..', 'src/themes/charts/'), - files: ['themes.ts'], - resolveModuleId() { - return '@elastic/eui/dist/eui_charts_theme'; - }, - resolveModuleImport(params) { - if (params.importedModuleId === '../../components/common') { - return '@elastic/eui/src/components/common'; - } - return null; - } - }); - /* End of Aliases */ - - console.log(chalk.green('✔ Finished chart theme module')); } /* OUI -> EUI Aliases */ diff --git a/scripts/compile-scss.js b/scripts/compile-themes.js similarity index 91% rename from scripts/compile-scss.js rename to scripts/compile-themes.js index e358c4a19d..8d5ee99744 100755 --- a/scripts/compile-scss.js +++ b/scripts/compile-themes.js @@ -11,19 +11,17 @@ const path = require('path'); const util = require('util'); -const fs = require('fs'); +const { writeFile, mkdir, readFile } = require('fs/promises'); const globModule = require('glob'); const chalk = require('chalk'); const postcss = require('postcss'); -const sassExtract = require('sass-extract'); -const { deriveSassVariableTypes } = require('./derive-sass-variable-types'); -const sassExtractJsPlugin = require('./sass-extract-js-plugin'); + +const { compileWithVariables } = require('./lib/compile-scss-with-variables'); +const { deriveSassVariableTypes } = require('./lib/derive-sass-variable-types'); const postcssConfiguration = require('../postcss.config.js'); -const writeFile = util.promisify(fs.writeFile); -const mkdir = util.promisify(fs.mkdir); const glob = util.promisify(globModule); const postcssConfigurationWithMinification = { @@ -125,15 +123,7 @@ async function compileScssFile( '.min.css' ); - const { css: renderedCss, vars: extractedVars } = await sassExtract.render( - { - file: inputFilename, - outFile: outputCssFilename, - }, - { - plugins: [sassExtractJsPlugin], - } - ); + const { css: renderedCss, variables: extractedVars } = await compileWithVariables(path.resolve(inputFilename)); /* OUI -> EUI Aliases: Modified */ // const extractedVarTypes = await deriveSassVariableTypes( @@ -208,5 +198,9 @@ if (require.main === module) { process.exit(1); } - compileScssFiles(path.join('src', 'theme_*.scss'), 'dist', ouiPackageName); + compileScssFiles(path.join('src', 'theme_*.scss'), 'dist', ouiPackageName) + .catch((err) => { + console.error(err); + process.exit(2); + }); } diff --git a/scripts/lib/compile-scss-with-variables.js b/scripts/lib/compile-scss-with-variables.js new file mode 100644 index 0000000000..40e97acd84 --- /dev/null +++ b/scripts/lib/compile-scss-with-variables.js @@ -0,0 +1,187 @@ +const sass = require('sass-embedded'); +const { pathToFileURL } = require('url'); +const path = require('path'); + +/* The markers are chosen as symbols that would never be used as variable names under normal + * circumstances. They also get wrapped in "--" to reduce the chances of collision with an actual variable. + * The markers could have been dynamically generated after inspecting all of the variables but it is not + * worth the performance penalty. + * + * Note: The `varListMarker` has to start with a colon or period to avoid Sass errors. + */ +const varListMarker = ':֍෴֍߷'; +const arrayMarker = '෴'; +const objectMarker = '߷'; +const forbiddenKeyNames = [...Object.getOwnPropertyNames(Object.prototype), 'prototype']; + +/* This loads the entry file as a module to be able to employ sass:meta for extracting + * the local variables to the module which are in fact our global variables. It then + * serializes them into CSS variables; if not formatted as CSS variables, there is a risk + * of Sass errors. + * The result of the compilation would be made of the actual compiled CSS followed by the + * injected variables in the form of: + * :֍෴֍߷ { // <-- start of the injected portion is marked by `varListMarker` + * --name: value; + * --name--෴--0: value1; // <-- arrays are identified by `arrayMarker` + * --name--෴--1: value2; + * --name--߷--key: value; // <-- objects are identified by `objectMarker` + * } + */ +const compileTemplate = ` +@use "sass:map"; +@use "sass:meta"; +@use "sass:math"; +@use "sass:list"; + +@use "#MODULE_NAME#"; + +@function to-vars($key, $value) { + $result: (); + $type: meta.type-of($value); + + @if $type == 'list' { + $len: length($value); + @for $idx from 1 through $len { + // indexes start at 1 in Sass and we need to deduct 1 to make them zero-indexed. + $result: map.merge($result, to-vars(#{$key + '--${arrayMarker}--' + calc($idx - 1)}, list.nth($value, $idx))); + } + } @else if $type == 'map' { + @each $k, $v in $value { + $result: map.merge($result, to-vars(#{$key + '--${objectMarker}--' + $k}, $v)); + } + } @else { + $result: map.set($result, $key, $value); + } + + @return $result; +} + +${varListMarker} { + @each $key, $value in meta.module-variables("#MODULE_NAME#") { + @each $k, $v in to-vars($key, $value) { + --#{$k}: #{$v}; + } + } +}`; + +/* `renderedVariables` is a large string of CSS variables, each on a line of their own. The extraction + * is done by picking each variable's name and value, and translating each name to an object path for + * setting the value. + * + * ToDo: For backward compatibility, arrays are flattened into strings which makes their consumption + * challenging. Remove all of the "bwc" logic for OUI 2. + */ +const extractVars = renderedVariables => { + if (!renderedVariables) return; + + const result = {}; + // For bwc, arrays are flattened into a single string + const foundArrays = []; + // For bwc, arrays that point to variable names are comma-seperated and others are space-seperated + const knownKeys = new Set(); + + // originalKey is only used for displaying errors + const _set = (o, path, value, originalKey) => { + // To improve performance, since this is a private method, it is not validating `path` + const [key, type, ...rest] = path; + if (forbiddenKeyNames.includes(key)) return; + if (rest.length === 0) { + if (type) { + throw new Error(`Unexpected type ${type} for ${key} was found on ${originalKey}`); + } + // For bwc, 0px -> 0 + o[key] = isFinite(value) ? parseFloat(value) : (value === '0px' ? 0 : value); + } else { + switch (type) { + case arrayMarker: + if (key in o) { + if (!Array.isArray(o[key])) + throw new Error(`${key} of ${originalKey} was found to be ${Object.prototype.toString.call(o[key])}`); + } else { + o[key] = []; + // Inserting to the beginning to make sure the inner references appear before the outer ones. + foundArrays.unshift({ node: o, key }); + } + _set(o[key], rest, value); + break; + + case objectMarker: + if (key in o) { + if (Object.prototype.toString.call(o[key]) !== '[object Object]') + throw new Error(`${key} of ${originalKey} was found to be ${Object.prototype.toString.call(o[key])}`); + } else { + o[key] = {}; + knownKeys.add(key); + } + _set(o[key], rest, value); + break; + + default: + throw new Error(`Unknown type [${type}] in ${originalKey}`); + } + } + }; + + for (const varLine of renderedVariables.split(/[\r\n]+/)) { + const [, key, value] = varLine.match(/^\s*--([^:]+):\s*(.*);$/) || []; + if (key) _set(result, key.split('--'), value, key); + } + + // For bwc, arrays are flattened into a single string. The inner references appear before the outer ones. + for (const { node, key } of foundArrays) { + // For bwc, arrays that point to variable names are comma-seperated and others are space-seperated + if (knownKeys.has(node[key][0])) { + node[key] = node[key].map(value => `'${value}'`).join(', '); + } else { + node[key] = node[key].join(' '); + } + } + + // For bwc, hyphens in the names of root variables are converted to underscores + for (const [key, value] of Object.entries(result)) { + if (key.indexOf('-') === -1) continue; + const snakeCaseKeyName = key.replace(/-/g, '_'); + result[snakeCaseKeyName] = value; + delete result[key]; + } + + return result; +}; + +const parseResult = compileResult => { + const [renderedCss, renderedVariables] = compileResult.css?.split(varListMarker) || []; + const extractedVars = extractVars(renderedVariables); + + return { + css: renderedCss || '', + variables: extractedVars || {}, + }; +}; + +const parseOptions = file => { + const { name, dir } = path.parse(file); + // Adding the trailing path separator to indicate that the destination is a directory + const rootURL = pathToFileURL(dir + path.sep); + return { + // Sass uses the filename, after stripping starting underscores, as the module name + moduleName: name.replace(/\.scss$/, '').replace(/^_/, '').replace(/["';]/g, ''), + compileOptions: { + importer: { + findFileUrl: (url) => new URL(url + '.scss', rootURL) + } + } + }; +}; + +module.exports = { + compileWithVariables: async (file) => { + const { moduleName, compileOptions } = parseOptions(file); + return parseResult(await sass.compileStringAsync(compileTemplate.replace(/#MODULE_NAME#/g, moduleName), compileOptions)); + }, + + compileWithVariablesSync: (file) => { + const { moduleName, compileOptions } = parseOptions(file); + + return parseResult(sass.compileString(compileTemplate.replace(/#MODULE_NAME#/g, moduleName), compileOptions)); + } +}; diff --git a/scripts/derive-sass-variable-types.js b/scripts/lib/derive-sass-variable-types.js similarity index 100% rename from scripts/derive-sass-variable-types.js rename to scripts/lib/derive-sass-variable-types.js diff --git a/scripts/preinstall.js b/scripts/preinstall.js index c9b1dd835f..9031e69505 100644 --- a/scripts/preinstall.js +++ b/scripts/preinstall.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -const { rmSync, readdirSync } = require('fs'); +const { rmSync, readdirSync, existsSync } = require('fs'); const { join } = require('path'); const { INIT_CWD, PWD = process.cwd() } = process.env; @@ -51,8 +51,10 @@ if (!INIT_CWD?.startsWith?.(PWD)) { 'vfile-message', ]; - for (const name of readdirSync('node_modules')) { - if (!depsToKeep.includes(name)) rmSync(join('node_modules', name), { recursive: true, force: true }); + if (existsSync('node_modules')) { + for (const name of readdirSync('node_modules')) { + if (!depsToKeep.includes(name)) rmSync(join('node_modules', name), { recursive: true, force: true }); + } } const typesToKeep = [ @@ -74,8 +76,10 @@ if (!INIT_CWD?.startsWith?.(PWD)) { 'vfile-message', ]; - for (const name of readdirSync('node_modules/@types')) { - if (!typesToKeep.includes(name)) rmSync(join('node_modules/@types', name), { recursive: true, force: true }); + if (existsSync('node_modules/@types')) { + for (const name of readdirSync('node_modules/@types')) { + if (!typesToKeep.includes(name)) rmSync(join('node_modules/@types', name), { recursive: true, force: true }); + } } const toDeleteFromRoot = [ diff --git a/scripts/sass-extract-js-plugin.js b/scripts/sass-extract-js-plugin.js deleted file mode 100644 index 20d0acad82..0000000000 --- a/scripts/sass-extract-js-plugin.js +++ /dev/null @@ -1,110 +0,0 @@ -/* - * SPDX-License-Identifier: Apache-2.0 - * - * The OpenSearch Contributors require contributions made to - * this file be licensed under the Apache-2.0 license or a - * compatible open source license. - * - * Modifications Copyright OpenSearch Contributors. See - * GitHub history for details. - */ - -// The contents of this file is derived from https://github.com/adamgruber/sass-extract-js by Adam Gruber -// MIT License -// Copyright (c) 2017 Adam Gruber -// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: -// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - -/* - * Add escaped quotes around font names other than the generic CSS font families - * While quotes are not required, they are recommended by the spec - * https://www.w3.org/TR/css-fonts-3/#generic-font-families - * - * @param {string} str Font family name - * - * @return {string} - */ -function quoteFontName(str) { - const genericFonts = [ - 'serif', - 'sans-serif', - 'cursive', - 'fantasy', - 'monospace', - ]; - return genericFonts.includes(str.toLowerCase()) ? str : `'${str}'`; -} - -/* - * Get the CSS value from a sass-extract data structure - * https://github.com/jgranstrom/sass-extract#general-variable-value-structure - * - * @param {object} sassVar Abstract data structure for SASS variable - * - * @return {string|int} CSS value - */ -function getSassValue(sassVar) { - const { type, value } = sassVar; - switch (type) { - case 'SassNumber': - return sassVar.unit ? `${value}${sassVar.unit}` : value; - - case 'SassColor': { - const { r, g, b, a, hex } = value; - const hasAlpha = a !== 1; - return hasAlpha - ? `rgba(${r.toFixed()}, ${g.toFixed()}, ${b.toFixed()}, ${a})` - : hex; - } - - case 'SassList': { - const isStringList = value.every(item => item.type === 'SassString'); - const newList = value.map(getSassValue); - return isStringList - ? newList.map(quoteFontName).join(', ') - : newList.join(' '); - } - - case 'SassMap': - return transformVars(value); - - default: - return value; - } -} - -/* - * Transform style object key - * - Strip leading '$' - * - * @param {string} key Style object key - * - * @return {string} Converted key - */ -function transformKey(key) { - return key.replace('$', ''); -} - -/* - * Reduce SASS-compiled variables object into theme object - * - * @param {object} varsObj Output from `sass-extract` render - * - * @return {object} Transformed variables object - */ -function transformVars(varsObj) { - return Object.keys(varsObj).reduce((acc, key) => { - const newKey = transformKey(key); - const newVal = getSassValue(varsObj[key]); - acc[newKey] = newVal; - return acc; - }, {}); -} - -module.exports = { - run: () => ({ - postExtract: extractedVariables => - transformVars(extractedVariables.global), - }), -}; diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index f5cff78bcc..79b7c46aeb 100644 --- a/src-docs/src/components/guide_components.scss +++ b/src-docs/src/components/guide_components.scss @@ -217,7 +217,7 @@ body { .guideCharts__customLegendLine { display: inline-block; width: $ouiSize; - height: $ouiSizeM / 2; + height: calc($ouiSizeM / 2); background-color: currentColor; vertical-align: middle; margin-right: $ouiSizeS; diff --git a/src-docs/src/theme_dark.scss b/src-docs/src/theme_dark.scss index 0cfed9c329..f86cd0c8a0 100644 --- a/src-docs/src/theme_dark.scss +++ b/src-docs/src/theme_dark.scss @@ -19,5 +19,4 @@ @import './views/suggest/global_filter_group'; // Elastic charts -@import '~@elastic/charts/dist/theme'; @import '../../src/themes/charts/theme'; diff --git a/src-docs/src/theme_light.scss b/src-docs/src/theme_light.scss index b88c094394..c4ac6ccee7 100644 --- a/src-docs/src/theme_light.scss +++ b/src-docs/src/theme_light.scss @@ -19,5 +19,4 @@ @import './views/suggest/global_filter_group'; // Elastic charts -@import '~@elastic/charts/dist/theme'; @import '../../src/themes/charts/theme'; diff --git a/src-docs/src/theme_next_dark.scss b/src-docs/src/theme_next_dark.scss index cab47044b0..b93190f246 100644 --- a/src-docs/src/theme_next_dark.scss +++ b/src-docs/src/theme_next_dark.scss @@ -18,5 +18,4 @@ @import './views/suggest/global_filter_group'; // Elastic charts -@import '~@elastic/charts/dist/theme'; @import '../../src/themes/charts/theme'; diff --git a/src-docs/src/theme_next_light.scss b/src-docs/src/theme_next_light.scss index 4ce311637c..db5f51cd6c 100644 --- a/src-docs/src/theme_next_light.scss +++ b/src-docs/src/theme_next_light.scss @@ -18,5 +18,4 @@ @import './views/suggest/global_filter_group'; // Elastic charts -@import '~@elastic/charts/dist/theme'; @import '../../src/themes/charts/theme'; diff --git a/src-docs/src/views/guidelines/_get_sass_vars.js b/src-docs/src/views/guidelines/_get_sass_vars.js index b6e4c1cf1f..8dfd15d0d4 100644 --- a/src-docs/src/views/guidelines/_get_sass_vars.js +++ b/src-docs/src/views/guidelines/_get_sass_vars.js @@ -9,10 +9,10 @@ * GitHub history for details. */ -import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_colors.scss'; -import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/oui/oui_colors_dark.scss'; -import lightNextColors from '!!sass-vars-to-js-loader!../../../../src/themes/oui-next/global_styling/variables/_colors.scss'; -import darkNextColors from '!!sass-vars-to-js-loader!../../../../src/themes/oui-next/oui_next_colors_dark.scss'; +import lightColors from '!!variables-from-scss!!../../../../src/global_styling/variables/_colors.scss'; +import darkColors from '!!variables-from-scss!!../../../../src/themes/oui/oui_colors_dark.scss'; +import lightNextColors from '!!variables-from-scss!!../../../../src/themes/oui-next/global_styling/variables/_colors.scss'; +import darkNextColors from '!!variables-from-scss!!../../../../src/themes/oui-next/oui_next_colors_dark.scss'; export const getSassVars = (theme) => { let palette; diff --git a/src-docs/src/views/guidelines/colors/_color_section.scss b/src-docs/src/views/guidelines/colors/_color_section.scss index 12404eef41..a77993b4df 100644 --- a/src-docs/src/views/guidelines/colors/_color_section.scss +++ b/src-docs/src/views/guidelines/colors/_color_section.scss @@ -19,7 +19,7 @@ .guideColorSection__button { padding: $ouiSizeXS; - margin-bottom: $ouiSizeXS / 2; + margin-bottom: calc($ouiSizeXS / 2); border-radius: $ouiBorderRadius; width: 100%; max-width: 300px; diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js index 73eb9ca0ff..f6c2836884 100644 --- a/src-docs/src/views/guidelines/sass.js +++ b/src-docs/src/views/guidelines/sass.js @@ -10,10 +10,10 @@ */ import React from 'react'; -import sizes from '!!sass-vars-to-js-loader?preserveKeys=true!../../../../src/global_styling/variables/_size.scss'; -import zindexs from '!!sass-vars-to-js-loader?preserveKeys=true!../../../../src/global_styling/variables/_z_index.scss'; -import animations from '!!sass-vars-to-js-loader?preserveKeys=true!../../../../src/global_styling/variables/_animations.scss'; -import breakpoints from '!!sass-vars-to-js-loader?preserveKeys=true!../../../../src/global_styling/variables/_responsive.scss'; +import sizes from '!!variables-from-scss!!../../../../src/global_styling/variables/_size.scss'; +import zindexs from '!!variables-from-scss!!../../../../src/global_styling/variables/_z_index.scss'; +import animations from '!!variables-from-scss!!../../../../src/global_styling/variables/_animations.scss'; +import breakpoints from '!!variables-from-scss!!../../../../src/global_styling/variables/_responsive.scss'; import { rgbToHex } from '../../../../src/services'; import { Link } from 'react-router-dom'; diff --git a/src-docs/src/views/header/header_dark.tsx b/src-docs/src/views/header/header_dark.tsx index a6efd16807..6611180ddf 100644 --- a/src-docs/src/views/header/header_dark.tsx +++ b/src-docs/src/views/header/header_dark.tsx @@ -56,7 +56,7 @@ export default ({ theme }: { theme: any }) => { { items: [ Production logs diff --git a/src-docs/src/views/header/header_elastic_pattern.js b/src-docs/src/views/header/header_elastic_pattern.js index 4b0f6663eb..7f9fc3e639 100644 --- a/src-docs/src/views/header/header_elastic_pattern.js +++ b/src-docs/src/views/header/header_elastic_pattern.js @@ -222,7 +222,7 @@ export default ({ theme }) => { repositionOnScroll button={ * { - margin-left: $ouiSizeXS / 2; + margin-left: calc($ouiSizeXS / 2); } } diff --git a/src/components/datagrid/_data_grid_column_resizer.scss b/src/components/datagrid/_data_grid_column_resizer.scss index 2b3d13c7f4..cbf39cc175 100644 --- a/src/components/datagrid/_data_grid_column_resizer.scss +++ b/src/components/datagrid/_data_grid_column_resizer.scss @@ -49,7 +49,7 @@ .ouiDataGridColumnResizer { right: 0; - width: $ouiSize / 2; + width: calc($ouiSize / 2); &:after { left: auto; diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 480477c43c..720b5efa8e 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -172,7 +172,7 @@ .ouiDataGridRowCell__expandButtonIcon { height: $ouiSizeM; - border-radius: $ouiBorderRadius / 2; + border-radius: calc($ouiBorderRadius / 2); width: 0; overflow: hidden; transition: none; // Have to take out the generic transition so it is instaneous on focus @@ -194,7 +194,7 @@ .ouiDataGridRowCell__actionButtonIcon { height: $ouiSizeM; - border-radius: $ouiBorderRadius / 2; + border-radius: calc($ouiBorderRadius / 2); width: 0; overflow: hidden; transition: none; // Have to take out the generic transition so it is instaneous on focus diff --git a/src/components/datagrid/_variables.scss b/src/components/datagrid/_variables.scss index 467fcb3e61..db86a6a271 100644 --- a/src/components/datagrid/_variables.scss +++ b/src/components/datagrid/_variables.scss @@ -13,7 +13,7 @@ $ouiDataGridColumnResizerWidth: 3px; // Odd number because it straddles a border $ouiDataGridPopoverMaxHeight: $ouiSize * 25; $ouiDataGridCellPaddingS: $ouiSizeXS; -$ouiDataGridCellPaddingM: $ouiSizeM / 2; +$ouiDataGridCellPaddingM: calc($ouiSizeM / 2); $ouiDataGridCellPaddingL: $ouiSizeS; $ouiDataGridVerticalBorder: solid 1px tintOrShade($ouiBorderColor, 60%, 30%); diff --git a/src/components/date_picker/_date_picker.scss b/src/components/date_picker/_date_picker.scss index ea84f72e76..ed942be6c3 100644 --- a/src/components/date_picker/_date_picker.scss +++ b/src/components/date_picker/_date_picker.scss @@ -196,7 +196,7 @@ cursor: pointer; position: absolute; // Pixel pushing because these are icons against text - top: $ouiSize + ($ouiSizeXS / 2); + top: $ouiSize + calc($ouiSizeXS / 2); width: 0; padding: 0; z-index: 1; @@ -218,12 +218,12 @@ &:hover { background-color: $ouiColorLightestShade; - box-shadow: 0 0 0 ($ouiSizeXS / 2) $ouiColorLightestShade; + box-shadow: 0 0 0 calc($ouiSizeXS / 2) $ouiColorLightestShade; } &:focus { background-color: $ouiFocusBackgroundColor; - box-shadow: 0 0 0 ($ouiSizeXS / 2) $ouiFocusBackgroundColor; + box-shadow: 0 0 0 calc($ouiSizeXS / 2) $ouiFocusBackgroundColor; } &--disabled, @@ -254,12 +254,12 @@ &:hover { background-color: $ouiColorLightestShade; - box-shadow: 0 0 0 ($ouiSizeXS / 2) $ouiColorLightestShade; + box-shadow: 0 0 0 calc($ouiSizeXS / 2) $ouiColorLightestShade; } &:focus { background-color: $ouiFocusBackgroundColor; - box-shadow: 0 0 0 ($ouiSizeXS / 2) $ouiFocusBackgroundColor; + box-shadow: 0 0 0 calc($ouiSizeXS / 2) $ouiFocusBackgroundColor; } &--disabled, @@ -355,7 +355,7 @@ &--selected { background-color: $ouiColorPrimary; color: white; - border-radius: $ouiBorderRadius / 2; + border-radius: calc($ouiBorderRadius / 2); &:hover { background-color: $ouiColorPrimary; } @@ -404,7 +404,7 @@ width: $ouiSizeXL; line-height: $ouiSizeXL - $ouiSizeXS; text-align: center; - margin: 0 $ouiSizeXS / 2; + margin: 0 calc($ouiSizeXS / 2); } .react-datepicker__day-name { @@ -455,11 +455,11 @@ &--selected, &--in-selecting-range { height: $ouiSizeXL; - margin: 0 $ouiSizeXS / 2; + margin: 0 calc($ouiSizeXS / 2); border-radius: $ouiBorderRadius; background-color: $ouiColorPrimary; line-height: $ouiSizeL + $ouiSizeXS; - border: solid $ouiSizeXS / 2 $ouiColorPrimary; + border: solid calc($ouiSizeXS / 2) $ouiColorPrimary; color: $ouiColorGhost; &:hover { @@ -469,7 +469,7 @@ &--keyboard-selected { border-radius: $ouiBorderRadius; - border: solid $ouiSizeXS / 2 $ouiColorPrimary; + border: solid calc($ouiSizeXS / 2) $ouiColorPrimary; font-weight: $ouiFontWeightBold; &:hover { diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss index 5ba820eb6c..769c3e9f86 100644 --- a/src/components/date_picker/_date_picker_range.scss +++ b/src/components/date_picker/_date_picker_range.scss @@ -52,8 +52,8 @@ background-color: transparent !important; // override .ouiFormControlLayout--group .ouiText line-height: 1 !important; flex: 0 0 auto; - padding-left: $ouiFormControlPadding / 2; - padding-right: $ouiFormControlPadding / 2; + padding-left: calc($ouiFormControlPadding / 2); + padding-right: calc($ouiFormControlPadding / 2); } } diff --git a/src/components/drag_and_drop/_variables.scss b/src/components/drag_and_drop/_variables.scss index f7e56f2fdf..3d57834eda 100644 --- a/src/components/drag_and_drop/_variables.scss +++ b/src/components/drag_and_drop/_variables.scss @@ -10,9 +10,9 @@ */ $ouiDragAndDropSpacing: ( - s: ($ouiSizeXS / 2), - m: ($ouiSizeS / 2), - l: ($ouiSize / 2), + s: calc($ouiSizeXS / 2), + m: calc($ouiSizeS / 2), + l: calc($ouiSize / 2), ); diff --git a/src/components/expression/_expression.scss b/src/components/expression/_expression.scss index 886062fa17..e439e971e9 100644 --- a/src/components/expression/_expression.scss +++ b/src/components/expression/_expression.scss @@ -21,7 +21,7 @@ border-bottom: $ouiBorderWidthThick solid transparent; display: inline-block; /* 1 */ text-align: left; - padding: ($ouiSizeXS / 2) 0; + padding: calc($ouiSizeXS / 2) 0; transition: all $ouiAnimSpeedNormal ease-in-out; color: $ouiTextColor; diff --git a/src/components/facet/_facet_group.scss b/src/components/facet/_facet_group.scss index b4c9e6a58a..24b0198f72 100644 --- a/src/components/facet/_facet_group.scss +++ b/src/components/facet/_facet_group.scss @@ -13,8 +13,8 @@ .ouiFacetGroup--#{$gutterName} { .ouiFacetButton { // Split the margin between top and bottom - margin-top: $gutterSize / 2; - margin-bottom: $gutterSize / 2; + margin-top: calc($gutterSize / 2); + margin-bottom: calc($gutterSize / 2); } &.ouiFacetGroup--horizontal { diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss index 0fec0c694a..94258b573f 100644 --- a/src/components/flyout/_flyout.scss +++ b/src/components/flyout/_flyout.scss @@ -103,7 +103,7 @@ $flyoutSizes: ( .ouiFlyoutFooter { @if $paddingAmount == $ouiSizeL { - padding: ($paddingAmount / 1.5) $paddingAmount; + padding: calc($paddingAmount / 1.5) $paddingAmount; } @else if $paddingAmount == $ouiSize { padding: ($paddingAmount * .75) $paddingAmount; } @else { diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss index 28376894cc..68b78f4cac 100644 --- a/src/components/form/checkbox/_checkbox.scss +++ b/src/components/form/checkbox/_checkbox.scss @@ -31,7 +31,7 @@ display: inline-block; position: absolute; left: 0; - top: (($ouiSizeL - $ouiCheckBoxSize) / 2) - 1px; + top: calc(($ouiSizeL - $ouiCheckBoxSize) / 2) - 1px; } &:checked { diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss index ec5cfd2c83..e25a3ae2a2 100644 --- a/src/components/form/form_control_layout/_form_control_layout.scss +++ b/src/components/form/form_control_layout/_form_control_layout.scss @@ -152,7 +152,7 @@ &.ouiFormControlLayout--compressed { @include ouiFormControlDefaultShadow($borderOnly: true); - border-radius: $ouiBorderRadius / 2; + border-radius: calc($ouiBorderRadius / 2); overflow: hidden; // Keeps backgrounds inside border radius // Padding diff --git a/src/components/form/form_control_layout/_form_control_layout_delimited.scss b/src/components/form/form_control_layout/_form_control_layout_delimited.scss index ccf58d4e04..f3116879b3 100644 --- a/src/components/form/form_control_layout/_form_control_layout_delimited.scss +++ b/src/components/form/form_control_layout/_form_control_layout_delimited.scss @@ -29,7 +29,7 @@ // Target when the ouiFormControlLayout is compressed without specifying the full class name in case it ever changes &[class*='--compressed'] { @include ouiFormControlDefaultShadow($borderOnly: true); - border-radius: $ouiBorderRadius / 2; + border-radius: calc($ouiBorderRadius / 2); .ouiFormControlLayoutDelimited__input { height: 100%; @@ -102,6 +102,6 @@ // sass-lint:disable-block no-important line-height: 1 !important; // Override OuiText line-height flex: 0 0 auto; - padding-left: $ouiFormControlPadding / 2; - padding-right: $ouiFormControlPadding / 2; + padding-left: calc($ouiFormControlPadding / 2); + padding-right: calc($ouiFormControlPadding / 2); } diff --git a/src/components/form/form_control_layout/_form_control_layout_icons.scss b/src/components/form/form_control_layout/_form_control_layout_icons.scss index 30b1447577..a192df952a 100644 --- a/src/components/form/form_control_layout/_form_control_layout_icons.scss +++ b/src/components/form/form_control_layout/_form_control_layout_icons.scss @@ -19,7 +19,7 @@ align-items: center; > * + * { - margin-left: $ouiFormControlPadding / 2; + margin-left: calc($ouiFormControlPadding / 2); } .ouiFormControlLayout--compressed & { diff --git a/src/components/form/form_row/_form_row.scss b/src/components/form/form_row/_form_row.scss index 7c7a6610c0..2c24d28e64 100644 --- a/src/components/form/form_row/_form_row.scss +++ b/src/components/form/form_row/_form_row.scss @@ -85,7 +85,7 @@ width: auto; .ouiSwitch--compressed { - margin-top: $ouiSizeXS / 2; // Better vertical alignment of a compressed switch to the horizontal label + margin-top: calc($ouiSizeXS / 2); // Better vertical alignment of a compressed switch to the horizontal label } } diff --git a/src/components/form/radio/_radio.scss b/src/components/form/radio/_radio.scss index 90c9563199..c656f50c75 100644 --- a/src/components/form/radio/_radio.scss +++ b/src/components/form/radio/_radio.scss @@ -31,7 +31,7 @@ display: inline-block; position: absolute; left: 0; - top: (($ouiSizeL - $ouiRadioSize) / 2) - 1px; + top: calc(($ouiSizeL - $ouiRadioSize) / 2) - 1px; } &:checked { diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss index fd5331e9bf..c6152fcdf2 100644 --- a/src/components/form/range/_range.scss +++ b/src/components/form/range/_range.scss @@ -14,5 +14,5 @@ } .ouiRange__slimHorizontalSpacer { - width: $ouiSize / 2; + width: calc($ouiSize / 2); } diff --git a/src/components/form/range/_range_draggable.scss b/src/components/form/range/_range_draggable.scss index 655b5ae677..794e969a8e 100644 --- a/src/components/form/range/_range_draggable.scss +++ b/src/components/form/range/_range_draggable.scss @@ -10,15 +10,15 @@ */ .ouiRangeDraggable { - height: $ouiFormControlHeight / 2; + height: calc($ouiFormControlHeight / 2); position: absolute; - top: $ouiFormControlHeight / 4; + top: calc($ouiFormControlHeight / 4); pointer-events: none; z-index: 2; &.ouiRangeDraggable--compressed { - height: $ouiFormControlCompressedHeight / 2; - top: $ouiFormControlCompressedHeight / 4; + height: calc($ouiFormControlCompressedHeight / 2); + top: calc($ouiFormControlCompressedHeight / 4); } &.ouiRangeDraggable--hasTicks { diff --git a/src/components/form/range/_range_highlight.scss b/src/components/form/range/_range_highlight.scss index a444466183..3655477b21 100644 --- a/src/components/form/range/_range_highlight.scss +++ b/src/components/form/range/_range_highlight.scss @@ -13,7 +13,7 @@ position: absolute; left: 0; width: 100%; - top: calc(50% - #{($ouiRangeHighlightHeight / 2)}); + top: calc(50% - #{calc($ouiRangeHighlightHeight / 2)}); overflow: hidden; &__progress { @@ -27,10 +27,10 @@ } &--hasTicks { - top: ($ouiFormControlHeight / 4) - ($ouiRangeHighlightHeight / 2); + top: calc($ouiFormControlHeight / 4) - calc($ouiRangeHighlightHeight / 2); } &--hasTicks.ouiRangeHighlight--compressed { - top: ($ouiFormControlCompressedHeight / 4) - ($ouiRangeHighlightHeight / 2); + top: calc($ouiFormControlCompressedHeight / 4) - calc($ouiRangeHighlightHeight / 2); } } diff --git a/src/components/form/range/_range_levels.scss b/src/components/form/range/_range_levels.scss index d88c8735d9..62b96c0131 100644 --- a/src/components/form/range/_range_levels.scss +++ b/src/components/form/range/_range_levels.scss @@ -15,17 +15,17 @@ position: absolute; left: 0; right: 0; - top: ($ouiFormControlHeight / 2) + 2px; + top: calc($ouiFormControlHeight / 2) + 2px; &--hasTicks { - top: ($ouiFormControlHeight / 4) + 2px; + top: calc($ouiFormControlHeight / 4) + 2px; } &--compressed { - top: ($ouiFormControlCompressedHeight / 2) + 2px; + top: calc($ouiFormControlCompressedHeight / 2) + 2px; &.ouiRangeLevels--hasTicks { - top: ($ouiFormControlCompressedHeight / 4) + 2px; + top: calc($ouiFormControlCompressedHeight / 4) + 2px; } } } diff --git a/src/components/form/range/_range_slider.scss b/src/components/form/range/_range_slider.scss index 35e1d2bf33..19cd379f49 100644 --- a/src/components/form/range/_range_slider.scss +++ b/src/components/form/range/_range_slider.scss @@ -102,7 +102,7 @@ // sass-lint:disable-block no-vendor-prefixes &::-webkit-slider-thumb { -webkit-appearance: none; - margin-top: ((-$ouiRangeTrackBorderWidth * 2 + $ouiRangeTrackHeight) / 2) - ($ouiRangeThumbHeight / 2); + margin-top: calc(calc($ouiRangeTrackBorderWidth * -2 + $ouiRangeTrackHeight) / 2) - calc($ouiRangeThumbHeight / 2); } &::-ms-thumb { @@ -117,20 +117,20 @@ @include ouiRangeTrackSize; background: transparent; border-color: transparent; - border-width: ($ouiRangeThumbHeight / 2) 0; + border-width: calc($ouiRangeThumbHeight / 2) 0; color: transparent; } // States &--hasTicks { - height: $ouiFormControlHeight / 2; // Adjust vertical alignment based on extras + height: calc($ouiFormControlHeight / 2); // Adjust vertical alignment based on extras } &--compressed { height: $ouiFormControlCompressedHeight; &.ouiRangeSlider--hasTicks { - height: $ouiFormControlCompressedHeight / 2; + height: calc($ouiFormControlCompressedHeight / 2); } } } diff --git a/src/components/form/range/_range_thumb.scss b/src/components/form/range/_range_thumb.scss index 391ec95ad3..3c548b5043 100644 --- a/src/components/form/range/_range_thumb.scss +++ b/src/components/form/range/_range_thumb.scss @@ -16,7 +16,7 @@ position: absolute; left: 0; top: 50%; - margin-top: -($ouiRangeThumbHeight / 2); + margin-top: calc(-1 * $ouiRangeThumbHeight / 2); pointer-events: none; z-index: 1; // higher than .ouiRangeHighlight that is 0 diff --git a/src/components/form/range/_range_ticks.scss b/src/components/form/range/_range_ticks.scss index 0085ced23d..6b307d3fda 100644 --- a/src/components/form/range/_range_ticks.scss +++ b/src/components/form/range/_range_ticks.scss @@ -26,8 +26,8 @@ display: flex; &--isCustom { - left: ($ouiRangeThumbWidth / 8); - right: ($ouiRangeThumbWidth / 8); + left: calc($ouiRangeThumbWidth / 8); + right: calc($ouiRangeThumbWidth / 8); } } @@ -42,7 +42,7 @@ &:not(.ouiRangeTick--hasTickMark)::before { @include tickStyles; content: ''; - left: calc(50% - #{($ouiSizeXS/2)}); + left: calc(50% - #{calc($ouiSizeXS/2)}); } .ouiRangeTick__pseudo { diff --git a/src/components/form/range/_range_tooltip.scss b/src/components/form/range/_range_tooltip.scss index 17ce6094de..8d49ff2329 100644 --- a/src/components/form/range/_range_tooltip.scss +++ b/src/components/form/range/_range_tooltip.scss @@ -17,7 +17,7 @@ top: 0; bottom: 0; width: calc(100% - #{$ouiRangeThumbWidth}); - margin-left: $ouiRangeThumbWidth / 2; + margin-left: calc($ouiRangeThumbWidth / 2); pointer-events: none; z-index: 2; // higher than .ouiRangeSlider that is 1 } @@ -29,7 +29,7 @@ border: 1px solid $ouiTooltipBackgroundColor; position: absolute; border-radius: $ouiBorderRadius; - padding: ($ouiSizeXS / 2) $ouiSizeS; + padding: calc($ouiSizeXS / 2) $ouiSizeS; background-color: $ouiTooltipBackgroundColor; color: $ouiColorGhost; max-width: 256px; @@ -40,13 +40,13 @@ // Custom sizing $arrowSize: $ouiSizeM; - $arrowMinusSize: (($arrowSize / 2) - 1px) * -1; + $arrowMinusSize: (calc($arrowSize / 2) - 1px) * -1; &::after, &::before { content: ''; position: absolute; - bottom: -$arrowSize / 2; + bottom: calc(-1 * $arrowSize / 2); left: 50%; transform-origin: center; background-color: $ouiTooltipBackgroundColor; @@ -99,10 +99,10 @@ } &--hasTicks { - top: ($ouiFormControlHeight / 4); + top: calc($ouiFormControlHeight / 4); .ouiRangeTooltip--compressed & { - top: ($ouiFormControlCompressedHeight / 4); + top: calc($ouiFormControlCompressedHeight / 4); } } } diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index 4ebfbe8c47..85b4b6a47b 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -71,7 +71,7 @@ &.ouiSwitch__icon--checked { right: auto; - left: -($ouiSwitchWidth - ($ouiSwitchThumbSize / 2)); + left: -($ouiSwitchWidth - calc($ouiSwitchThumbSize / 2)); } } } @@ -109,10 +109,10 @@ .ouiSwitch__icon { position: absolute; - right: -($ouiSwitchWidth - ($ouiSwitchThumbSize / 2)); - top: ($ouiSwitchHeight - $ouiSwitchIconHeight) / 2; + right: -($ouiSwitchWidth - calc($ouiSwitchThumbSize / 2)); + top: calc(($ouiSwitchHeight - $ouiSwitchIconHeight) / 2); bottom: 0; - width: $ouiSwitchWidth - ($ouiSwitchThumbSize / 2) + $ouiSizeS; + width: $ouiSwitchWidth - calc($ouiSwitchThumbSize / 2) + $ouiSizeS; height: $ouiSwitchIconHeight; transition: left $ouiAnimSpeedNormal $ouiAnimSlightBounce, right $ouiAnimSpeedNormal $ouiAnimSlightBounce; fill: $ouiTextColor; diff --git a/src/components/key_pad_menu/_key_pad_menu.scss b/src/components/key_pad_menu/_key_pad_menu.scss index efe4603f62..e8cfde3b9f 100644 --- a/src/components/key_pad_menu/_key_pad_menu.scss +++ b/src/components/key_pad_menu/_key_pad_menu.scss @@ -87,7 +87,7 @@ // sass-lint:disable-block nesting-depth .ouiKeyPadMenuItem__betaBadge:not(.ouiBetaBadge--iconOnly) { - padding: 0 ($ouiSizeM / 2); /* 2 */ + padding: 0 calc($ouiSizeM / 2); /* 2 */ overflow: hidden; /* 2 */ letter-spacing: 3rem; /* 2 */ } diff --git a/src/components/loading/_loading_chart.scss b/src/components/loading/_loading_chart.scss index 7e674656b8..65acecb8cf 100644 --- a/src/components/loading/_loading_chart.scss +++ b/src/components/loading/_loading_chart.scss @@ -25,7 +25,7 @@ width: $ouiSizeS; display: inline-block; margin-bottom: -$ouiSize; - margin-left: $ouiSizeXS / 2; + margin-left: calc($ouiSizeXS / 2); // sass-lint:disable-block mixins-before-declarations @include ouiCanAnimate { @@ -88,8 +88,8 @@ height: $ouiSize; > span { - width: $ouiSizeXS / 2; - margin-left: $ouiSizeXS / 2; + width: calc($ouiSizeXS / 2); + margin-left: calc($ouiSizeXS / 2); margin-bottom: $ouiSizeS; } } @@ -99,8 +99,8 @@ > span { width: $ouiSizeXS; - margin-left: $ouiSizeXS / 2; - margin-bottom: $ouiSizeL / 2; + margin-left: calc($ouiSizeXS / 2); + margin-bottom: calc($ouiSizeL / 2); } } @@ -110,7 +110,7 @@ > span { width: $ouiSizeS; margin-left: $ouiSizeXS; - margin-bottom: $ouiSizeXL / 2; + margin-bottom: calc($ouiSizeXL / 2); } } diff --git a/src/components/loading/_loading_spinner.scss b/src/components/loading/_loading_spinner.scss index fd705110c5..e085e7bb91 100644 --- a/src/components/loading/_loading_spinner.scss +++ b/src/components/loading/_loading_spinner.scss @@ -15,7 +15,7 @@ width: $ouiSizeXL; height: $ouiSizeXL; border-radius: 50%; - border: solid $ouiSizeXS / 2 $ouiColorLightShade; + border: solid calc($ouiSizeXS / 2) $ouiColorLightShade; border-color: ouiLoadingSpinnerBorderColors(); // sass-lint:disable-block mixins-before-declarations diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss index 2aa63c3a69..e84ef00962 100644 --- a/src/components/markdown_editor/_markdown_format.scss +++ b/src/components/markdown_editor/_markdown_format.scss @@ -26,7 +26,7 @@ $browserDefaultFontSize: 16px; // We're setting a function o transform px in em // because it's easier to think in px @function em($pixels, $context: $browserDefaultFontSize) { - @return #{$pixels/$context}em; + @return #{calc($pixels/$context)}em; } .ouiMarkdownFormat { diff --git a/src/components/markdown_editor/_variables.scss b/src/components/markdown_editor/_variables.scss index 95a6483d72..360d43bdb7 100644 --- a/src/components/markdown_editor/_variables.scss +++ b/src/components/markdown_editor/_variables.scss @@ -9,7 +9,7 @@ * GitHub history for details. */ -$ouiMarkdownEditorMinHeight: '150px'; +$ouiMarkdownEditorMinHeight: 150px; /* OUI -> EUI Aliases */ diff --git a/src/components/page/page_content/_page_content_header_section.scss b/src/components/page/page_content/_page_content_header_section.scss index c4174e397e..79ad55c6dd 100644 --- a/src/components/page/page_content/_page_content_header_section.scss +++ b/src/components/page/page_content/_page_content_header_section.scss @@ -21,7 +21,7 @@ .ouiPageContent[class*='#{$modifier}'] .ouiPageContentHeader--responsive { .ouiPageContentHeaderSection + .ouiPageContentHeaderSection { margin-left: 0; - margin-top: $amount / 2; + margin-top: calc($amount / 2); } } } diff --git a/src/components/pagination/_pagination_button.scss b/src/components/pagination/_pagination_button.scss index 5dfa7dd9b0..39927ce596 100644 --- a/src/components/pagination/_pagination_button.scss +++ b/src/components/pagination/_pagination_button.scss @@ -39,7 +39,7 @@ font-size: $ouiFontSizeS; padding: 0 $ouiSizeS; height: $ouiSizeL; - padding-top: $ouiSizeM / 2; + padding-top: calc($ouiSizeM / 2); } @include ouiBreakpoint('xs', 's') { diff --git a/src/components/progress/_progress.scss b/src/components/progress/_progress.scss index d1e7e19c7b..7681df6e2a 100644 --- a/src/components/progress/_progress.scss +++ b/src/components/progress/_progress.scss @@ -20,7 +20,7 @@ // Progress bars come in different sizes. $ouiProgressSizes: ( - xs: $ouiSizeXS / 2, + xs: calc($ouiSizeXS / 2), s: $ouiSizeXS, m: $ouiSizeS, l: $ouiSize, diff --git a/src/components/resizable_container/_resizable_button.scss b/src/components/resizable_container/_resizable_button.scss index 40ddf37f0c..4816033f82 100644 --- a/src/components/resizable_container/_resizable_button.scss +++ b/src/components/resizable_container/_resizable_button.scss @@ -35,8 +35,8 @@ &.ouiResizableButton--horizontal { cursor: col-resize; width: $ouiResizableButtonSize; - margin-left: -($ouiResizableButtonSize / 2); - margin-right: -($ouiResizableButtonSize / 2); + margin-left: calc(-1 * $ouiResizableButtonSize / 2); + margin-right: calc(-1 * $ouiResizableButtonSize / 2); &:before, &:after { @@ -56,8 +56,8 @@ &.ouiResizableButton--vertical { cursor: row-resize; height: $ouiResizableButtonSize; - margin-top: -($ouiResizableButtonSize / 2); - margin-bottom: -($ouiResizableButtonSize / 2); + margin-top: calc(-1 * $ouiResizableButtonSize / 2); + margin-bottom: calc(-1 * $ouiResizableButtonSize / 2); &:before, &:after { @@ -96,7 +96,7 @@ height $ouiResizableButtonTransitionSpeed ease, transform $ouiResizableButtonTransitionSpeed ease ); - transition-delay: $ouiResizableButtonTransitionSpeed / 2; + transition-delay: calc($ouiResizableButtonTransitionSpeed / 2); } } diff --git a/src/components/schema/_schema_item.scss b/src/components/schema/_schema_item.scss index 474458cebf..17fb07e134 100644 --- a/src/components/schema/_schema_item.scss +++ b/src/components/schema/_schema_item.scss @@ -29,12 +29,12 @@ .ouiSchemaItem__icon { align-self: flex-start; - margin: ($ouiSize / 2) 0; // To align with buttonIcon + margin: calc($ouiSize / 2) 0; // To align with buttonIcon } .ouiSchemaItem__label { flex: 1; - margin: ($ouiSize / 2) 0; // To align with buttonIcon + margin: calc($ouiSize / 2) 0; // To align with buttonIcon } .ouiSchemaItem__actions { @@ -68,12 +68,12 @@ font-size: $ouiFontSizeXS; .ouiSchemaItem__icon { - margin: ($ouiSizeM / 2) 0; + margin: calc($ouiSizeM / 2) 0; margin-left: $ouiSizeXS; } .ouiSchemaItem__label { flex: 1; - margin: ($ouiSizeM / 2) 0; + margin: calc($ouiSizeM / 2) 0; } } diff --git a/src/components/search_bar/_search_bar.scss b/src/components/search_bar/_search_bar.scss index ab68679746..f20d8d5b93 100644 --- a/src/components/search_bar/_search_bar.scss +++ b/src/components/search_bar/_search_bar.scss @@ -10,7 +10,7 @@ */ .ouiSearchBar__searchHolder { - min-width: $ouiFormMaxWidth / 2; + min-width: calc($ouiFormMaxWidth / 2); } @include ouiBreakpoint('m', 'l', 'xl') { diff --git a/src/components/side_nav/_side_nav_item.scss b/src/components/side_nav/_side_nav_item.scss index d8719ac570..f2d60cd8bb 100644 --- a/src/components/side_nav/_side_nav_item.scss +++ b/src/components/side_nav/_side_nav_item.scss @@ -22,7 +22,7 @@ text-align: left; /* 1 */ display: block; width: 100%; - padding: ($ouiSizeXS / 2) 0; + padding: calc($ouiSizeXS / 2) 0; color: inherit; /* 2 */ &.ouiSideNavItemButton--isClickable:not(:disabled) { diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss index 63502d353e..4456ac6626 100644 --- a/src/components/steps/_steps.scss +++ b/src/components/steps/_steps.scss @@ -37,10 +37,10 @@ .ouiStep__content { // Align the content's contents with the title - padding-left: ($ouiStepNumberSmallSize / 2) + $ouiStepNumberMargin; + padding-left: calc($ouiStepNumberSmallSize / 2) + $ouiStepNumberMargin; // Align content border to horizontal center of step number - margin-left: ($ouiStepNumberSmallSize / 2); + margin-left: calc($ouiStepNumberSmallSize / 2); } } } @@ -64,8 +64,8 @@ margin: $ouiSizeS 0; // Align the content's contents with the title - padding-left: ($ouiStepNumberSize / 2) + $ouiStepNumberMargin; + padding-left: calc($ouiStepNumberSize / 2) + $ouiStepNumberMargin; // Align content border to horizontal center of step number - margin-left: ($ouiStepNumberSize / 2); + margin-left: calc($ouiStepNumberSize / 2); } diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss index c5be21590f..0873d6c4d9 100644 --- a/src/components/steps/_steps_horizontal.scss +++ b/src/components/steps/_steps_horizontal.scss @@ -75,9 +75,9 @@ &::after { content: ''; position: absolute; - width: calc(50% - #{$ouiStepNumberSize / 2}); + width: calc(50% - #{calc($ouiStepNumberSize / 2)}); height: 1px; - top: $ouiSizeL + ($ouiStepNumberSize / 2); + top: $ouiSizeL + calc($ouiStepNumberSize / 2); background-color: $ouiColorLightShade; z-index: $ouiZLevel0; /* 1 */ } @@ -135,7 +135,7 @@ &::before, &::after { - top: $ouiSize + $ouiStepNumberSize / 2; + top: $ouiSize + calc($ouiStepNumberSize / 2); } } diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss index 239cd60547..2c2aa02a88 100644 --- a/src/components/table/_responsive.scss +++ b/src/components/table/_responsive.scss @@ -126,12 +126,12 @@ } &.ouiTableRow-isSelectable { - padding-left: $ouiTableCellCheckboxWidth + ($ouiTableCellContentPadding / 2); + padding-left: $ouiTableCellCheckboxWidth + calc($ouiTableCellContentPadding / 2); position: relative; .ouiTableRowCellCheckbox { position: absolute; - left: $ouiTableCellContentPadding / 2; + left: calc($ouiTableCellContentPadding / 2); top: $ouiSizeS; } } diff --git a/src/components/table/_variables.scss b/src/components/table/_variables.scss index 2d83d03a2d..7c853a9db3 100644 --- a/src/components/table/_variables.scss +++ b/src/components/table/_variables.scss @@ -22,7 +22,7 @@ $ouiTableActionsAreaWidth: $ouiSizeXXL; $ouiTableHoverColor: tintOrShade($ouiColorLightestShade, 50%, 20%); $ouiTableSelectedColor: tintOrShade($ouiFocusBackgroundColor, 30%, 0%); -$ouiTableHoverSelectedColor: tintOrShade($ouiFocusBackgroundColor, 0, 10%); +$ouiTableHoverSelectedColor: tintOrShade($ouiFocusBackgroundColor, 0%, 10%); $ouiTableActionsBorderColor: transparentize($ouiColorMediumShade, .9); $ouiTableHoverClickableColor: transparentize($ouiColorPrimary, .95); $ouiTableFocusClickableColor: transparentize($ouiColorPrimary, .9); diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index 092fcce7ae..70dd699fd3 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -126,8 +126,8 @@ } .ouiTabs--small.ouiTabs--condensed & { - padding-top: ($ouiSizeM / 2); - padding-bottom: ($ouiSizeM / 2); + padding-top: calc($ouiSizeM / 2); + padding-bottom: calc($ouiSizeM / 2); } .ouiTabs--large.ouiTabs--condensed & + .ouiTab { diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss index e258b7e5c5..0938ac8335 100644 --- a/src/components/text/_text.scss +++ b/src/components/text/_text.scss @@ -12,7 +12,7 @@ // This should only be used for .ouiText, therefore it's not included in a separate mixin file @mixin ouiScaleText($baseFontSize) { - $baseLineHeightMultiplier: $baseFontSize / 2; + $baseLineHeightMultiplier: calc($baseFontSize / 2); line-height: convertToRem($baseLineHeightMultiplier * 3); p, diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss index 59b0c23594..ccb72ebc81 100644 --- a/src/components/tool_tip/_tool_tip.scss +++ b/src/components/tool_tip/_tool_tip.scss @@ -21,8 +21,8 @@ // Custom sizing $arrowSize: $ouiSizeM; - $arrowPlusSize: (($arrowSize/2) + 1px) * -1; /* 1 */ - $arrowMinusSize: (($arrowSize/2) - 1px) * -1; /* 1 */ + $arrowPlusSize: (calc($arrowSize/2) + 1px) * -1; /* 1 */ + $arrowMinusSize: (calc($arrowSize/2) - 1px) * -1; /* 1 */ .ouiToolTip__arrow { content: ''; diff --git a/src/components/tour/_tour.scss b/src/components/tour/_tour.scss index c0cda79372..6430a8dee4 100644 --- a/src/components/tour/_tour.scss +++ b/src/components/tour/_tour.scss @@ -45,7 +45,7 @@ .ouiPopover__panelArrow.ouiPopover__panelArrow--right { .ouiTour__beacon { opacity: 1; - top: $ouiPopoverArrowSize / 2; + top: calc($ouiPopoverArrowSize / 2); left: -$ouiPopoverArrowSize * 2; } } @@ -53,7 +53,7 @@ .ouiPopover__panelArrow.ouiPopover__panelArrow--left { .ouiTour__beacon { opacity: 1; - top: $ouiPopoverArrowSize / 2; + top: calc($ouiPopoverArrowSize / 2); left: $ouiPopoverArrowSize; } } @@ -66,7 +66,7 @@ .ouiTour__beacon { opacity: 1; top: $ouiPopoverArrowSize; - left: $ouiPopoverArrowSize / 2; + left: calc($ouiPopoverArrowSize / 2); } } @@ -74,7 +74,7 @@ .ouiTour__beacon { opacity: 1; top: -$ouiPopoverArrowSize * 2; - left: $ouiPopoverArrowSize / 2; + left: calc($ouiPopoverArrowSize / 2); } } } diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss index 71ace7da98..2d505a4259 100644 --- a/src/components/tree_view/tree_view.scss +++ b/src/components/tree_view/tree_view.scss @@ -60,12 +60,12 @@ } .ouiTreeView__iconWrapper { - margin-top: -($ouiSizeXS / 2); + margin-top: calc(-1 * $ouiSizeXS / 2); margin-right: $ouiSizeS; // This helps tokens appear vertically centered .ouiToken { - margin-top: $ouiSizeXS / 2; + margin-top: calc($ouiSizeXS / 2); } } diff --git a/src/global_styling/functions/_colors.scss b/src/global_styling/functions/_colors.scss index 8cf997fb1d..57acc7f8fa 100644 --- a/src/global_styling/functions/_colors.scss +++ b/src/global_styling/functions/_colors.scss @@ -62,9 +62,9 @@ @for $i from 1 through 3 { $rgb: nth($rgba, $i); - $rgb: $rgb / 255; + $rgb: calc($rgb / 255); - $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4)); + $rgb: if($rgb < .03928, calc($rgb / 12.92), pow(calc(($rgb + .055) / 1.055), 2.4)); $rgba2: append($rgba2, $rgb); } @@ -77,7 +77,7 @@ $backgroundLum: luminance($background) + .05; $foregroundLum: luminance($foreground) + .05; - @return max($backgroundLum, $foregroundLum) / min($backgroundLum, $foregroundLum); + @return calc(max($backgroundLum, $foregroundLum) / min($backgroundLum, $foregroundLum)); } // Given $color, decide whether $lightText or $darkText should be used as the text color diff --git a/src/global_styling/functions/_math.scss b/src/global_styling/functions/_math.scss index 4d36cc020e..0079e79eb2 100644 --- a/src/global_styling/functions/_math.scss +++ b/src/global_styling/functions/_math.scss @@ -11,7 +11,7 @@ //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow @function pow($number, $power) { - @if ($power != $power or ($power != 0 and $power == $power / 2)) { + @if ($power != $power or ($power != 0 and $power == calc($power / 2))) { @return $power; } @if ($power == 1) { @@ -46,7 +46,7 @@ @if ($hasTrailingOne) { $power: $power - 1; } - $halfPower: pow($number, floor($power / 2)); + $halfPower: pow($number, floor(calc($power / 2))); $fullPower: $halfPower * $halfPower; @if ($hasTrailingOne) { $fullPower: $fullPower * $number; @@ -67,7 +67,7 @@ $x: 1; @for $i from 0 through $prec { - $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1))); + $x: calc(1 / $n) * (($n - 1) * $x + calc($num / pow($x, $n - 1))); } @return $x; diff --git a/src/global_styling/mixins/_beta_badge.scss b/src/global_styling/mixins/_beta_badge.scss index 0e534c7b9a..eb19151ee3 100644 --- a/src/global_styling/mixins/_beta_badge.scss +++ b/src/global_styling/mixins/_beta_badge.scss @@ -20,7 +20,7 @@ #{$selector}__betaBadgeWrapper { position: absolute; - top: ($ouiSizeL / -2); + top: calc($ouiSizeL / -2); left: 50%; transform: translateX(-50%); z-index: 3; // get above abs positioned image @@ -49,7 +49,7 @@ #{$selector}__betaBadgeWrapper { position: absolute; - top: ($ouiSizeL / -2); + top: calc($ouiSizeL / -2); left: 50%; transform: translateX(-50%); z-index: 3; // get above abs positioned image diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index dc4aa73095..9b6ce72d67 100644 --- a/src/global_styling/mixins/_form.scss +++ b/src/global_styling/mixins/_form.scss @@ -19,7 +19,7 @@ @mixin ouiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) { $iconSize: $ouiSize; $iconPadding: $ouiFormControlPadding; - $marginBetweenIcons: $ouiFormControlPadding / 2; + $marginBetweenIcons: calc($ouiFormControlPadding / 2); @if ($compressed) { $iconPadding: $ouiFormControlCompressedPadding; @@ -56,7 +56,7 @@ } #{$iconClass} { - @include size($clearSize / 2); + @include size(calc($clearSize / 2)); fill: $ouiColorEmptyShade; // increase thickness of icon at such a small size stroke: $ouiColorEmptyShade; @@ -327,7 +327,7 @@ @if $size { $size: $size - 2px; // subtract 2px from size to account for border size - padding: $size / 2; + padding: calc($size / 2); } border: 1px solid $ouiFormCustomControlBorderColor; diff --git a/src/global_styling/mixins/_shadow.scss b/src/global_styling/mixins/_shadow.scss index e1b9d33dae..61dbe0a78f 100644 --- a/src/global_styling/mixins/_shadow.scss +++ b/src/global_styling/mixins/_shadow.scss @@ -89,7 +89,7 @@ @mixin ouiSlightShadowHover($color: $ouiShadowColor, $opacity: .3) { box-shadow: - 0 4px 8px 0 rgba($color, $opacity/2), + 0 4px 8px 0 rgba($color, calc($opacity / 2)), 0 2px 2px -1px rgba($color, $opacity); } diff --git a/src/global_styling/variables/_borders.scss b/src/global_styling/variables/_borders.scss index 4bed6701b9..240de21514 100644 --- a/src/global_styling/variables/_borders.scss +++ b/src/global_styling/variables/_borders.scss @@ -16,7 +16,7 @@ $ouiBorderWidthThick: 2px !default; $ouiBorderColor: $ouiColorLightShade !default; $ouiBorderRadius: 4px !default; -$ouiBorderRadiusSmall: $ouiBorderRadius / 2 !default; +$ouiBorderRadiusSmall: calc($ouiBorderRadius / 2) !default; $ouiBorderThick: $ouiBorderWidthThick solid $ouiBorderColor !default; $ouiBorderThin: $ouiBorderWidthThin solid $ouiBorderColor !default; $ouiBorderEditable: $ouiBorderWidthThick dotted $ouiBorderColor !default; diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss index cec0dec337..0c7c15b9ed 100644 --- a/src/global_styling/variables/_form.scss +++ b/src/global_styling/variables/_form.scss @@ -55,7 +55,7 @@ $ouiSwitchOffColor: lightOrDarkTheme(transparentize($ouiColorMediumShade, .8), t // Control Layout $ouiFormControlLayoutGroupInputHeight: $ouiFormControlHeight - 2px !default; $ouiFormControlLayoutGroupInputCompressedHeight: $ouiFormControlCompressedHeight - 2px !default; -$ouiFormControlLayoutGroupInputCompressedBorderRadius: $ouiFormControlCompressedBorderRadius / 2 !default; +$ouiFormControlLayoutGroupInputCompressedBorderRadius: calc($ouiFormControlCompressedBorderRadius / 2) !default; // Range $ouiRangeTrackColor: $ouiColorDarkShade !default; @@ -67,7 +67,7 @@ $ouiRangeThumbBorderColor: $ouiRangeTrackColor !default; $ouiRangeTrackWidth: 100% !default; $ouiRangeTrackHeight: 2px !default; -$ouiRangeTrackBorderWidth: 0 !default; +$ouiRangeTrackBorderWidth: 0px !default; $ouiRangeTrackBorderColor: $ouiRangeTrackColor !default; $ouiRangeTrackRadius: $ouiBorderRadius !default; diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss index c4d3590333..124150577b 100644 --- a/src/global_styling/variables/_typography.scss +++ b/src/global_styling/variables/_typography.scss @@ -16,7 +16,7 @@ // Typography mixins @function convertToRem($size) { - @return #{$size / $ouiFontSize}rem; + @return #{calc($size / $ouiFontSize)}rem; } // Spit out rem and px @@ -30,7 +30,7 @@ // If our base font size (ouiFontSize) 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. @function lineHeightFromBaseline($multiplier: 3) { - @return convertToRem(($ouiFontSize/2)*$multiplier); + @return convertToRem(calc($ouiFontSize/2)*$multiplier); } @mixin lineHeightFromBaseline($multiplier: 3) { line-height: lineHeightFromBaseline($multiplier); diff --git a/src/themes/charts/theme.scss b/src/themes/charts/theme.scss index 63dd379f50..106202755c 100644 --- a/src/themes/charts/theme.scss +++ b/src/themes/charts/theme.scss @@ -9,8 +9,471 @@ * GitHub history for details. */ -// There should be a good default in EC too +/*! + * 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. + */ + +/* This is the content of @elastic/charts@30.2.0/dist/theme.scss, modified to compile + * with dart sass. + */ + +// sass-lint:disable no-important, leading-zero, border-zero + +.echChartStatus { + visibility: hidden; + pointer-events: none; + z-index: -100000; + width: 0; + height: 0; + position: absolute; +} + +.echChartBackground { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.echChart { + position: relative; + display: flex; + height: 100%; + + &--column { + flex-direction: column; + } +} + +.echContainer { + flex: 1; + position: relative; +} + +.echChartPointerContainer { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + box-sizing: border-box; + user-select: none; +} + +.echChartResizer { + z-index: -10000000; + position: absolute; + bottom: 0; + top: 0; + left: 0; + right: 0; + box-sizing: border-box; +} + +.echBrushTool { + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + box-sizing: border-box; + overflow: hidden; + pointer-events: none; +} + + +.echTooltip { + @include euiToolTipStyle; + @include euiFontSizeXS; + padding: 0; + transition: opacity $ouiAnimSpeedNormal; + pointer-events: none; + user-select: none; + max-width: 256px; + + &__list { + padding: $ouiSizeXS; + } + + &__header { + @include euiToolTipTitle; + margin-bottom: 0; + padding: $ouiSizeXS ($ouiSizeXS * 2); + } + + &__item { + display: flex; + min-width: 1px; + + &--container { + display: flex; + flex: 1 1 auto; + padding: 3px; + padding-left: 0; + min-width: 1px; + } + + &--backgroundColor { + position: relative; + width: $ouiSizeXS; + margin-right: 3px; + flex-shrink: 0; + } + + &--color { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + } + + &__label { + overflow-wrap: break-word; + word-wrap: break-word; + min-width: 1px; + flex: 1 1 auto; + } + + &__value { + font-weight: $ouiFontWeightBold; + text-align: right; + font-feature-settings: 'tnum'; + margin-left: $ouiSizeS; + } + + &__rowHighlighted { + background-color: transparentize($ouiColorGhost, 0.9); + } + + &--hidden { + opacity: 0; + } +} + + +[id^='echTooltipPortal'] { + pointer-events: none; +} + +[id^='echAnchor'] { + position: absolute; + pointer-events: none; +} + +.echTooltipPortal__invisible { + position: fixed; + visibility: hidden; + width: 0; + height: 0; +} + + +.echIcon { + flex-shrink: 0; // Ensures it never scales down below it's intended size + display: inline-block; + vertical-align: middle; + fill: currentColor; + + svg { + transform: translate(0, 0); // Hack to fix Firefox "softness" + } + + &:focus { + opacity: 1; // We often hide icons on hover. Make sure they appear on focus. + background: $ouiFocusBackgroundColor; + } +} + +$echLegendMaxWidth: 200px; +$echLegendRowGap: 8px; +$echLegendColumnGap: 24px; + +.echLegend { + .echLegendList { + display: grid; + grid-template-columns: minmax(0, 1fr); + } + + &--horizontal { + .echLegendList { + grid-column-gap: $echLegendColumnGap; + grid-row-gap: $echLegendRowGap; + margin-top: $echLegendRowGap; + margin-bottom: $echLegendRowGap; + } + } + + &--top, + &--left { + order: 0; + } + + &--bottom, + &--right { + order: 1; + } + + &--debug { + // sass-lint:disable-block no-color-literals + background: rgba(238, 130, 238, 0.2); + position: relative; + } + + .echLegendListContainer { + @include euiYScrollWithShadows; + width: 100%; + overflow-y: auto; + overflow-x: hidden; + + :focus { + @include euiFocusRing; + background-color: $ouiFocusBackgroundColor; + border-radius: calc($ouiBorderRadius / 2); + } + } +} + +$legendItemVerticalPadding: calc($echLegendRowGap / 2); +$legendItemHeight: #{$ouiFontSizeXS * $ouiLineHeight}; + +.echLegendItem { + color: $ouiTextColor; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + position: relative; + + > *:not(.background) { + // euiPopover adds a div with height of 19px otherwise + height: $legendItemHeight; // prevents color dot from shifting + margin-left: $ouiSizeXS; + + &:last-child:not(.echLegendItem__extra) { + margin-right: $ouiSizeXS; + } + } + + &:not(&--hidden) { + .echLegendItem__color--changable { + cursor: pointer; + } + } + + &:hover .background { + background-color: $ouiColorLightestShade; + } + + .background { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + } + + &__action { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + max-width: calc(#{$legendItemHeight} + #{$ouiSizeXS * 2}); + + .euiPopover, + .euiPopover__anchor, + .euiPopover__anchor > *:first-child { + // makes custom buttons in eui popover take full action size + height: 100%; + width: 100%; + } + } + + &__color { + display: flex; + line-height: 1.5; + align-items: center; + } + + &__label { + @include euiFontSizeXS; + @include euiTextTruncate; + flex: 1 1 auto; + text-align: left; + vertical-align: baseline; + letter-spacing: unset; + align-items: center; + + &--clickable { + &:hover { + cursor: pointer; + text-decoration: underline; + } + } + } + + &__extra { + @include euiFontSizeXS; + text-align: right; + flex: 0 0 auto; + margin-left: $ouiSizeXS; + font-feature-settings: 'tnum'; + letter-spacing: unset; + } + + &--vertical { + padding-top: calc($legendItemVerticalPadding / 2); + padding-bottom: calc($legendItemVerticalPadding / 2); + + &:first-of-type { + margin-top: calc($legendItemVerticalPadding / 2); + } + + .background { + margin-top: calc($legendItemVerticalPadding / 2); + margin-bottom: calc($legendItemVerticalPadding / 2); + } + } + + &--hidden { + color: $ouiColorDarkShade; + } +} + +.echReactiveChart_noResults { + // sass-lint:disable-block mixins-before-declarations + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + @include euiFontSizeXS; + color: $ouiColorDarkShade; +} + +.echHighlighter { + position: absolute; + pointer-events: none; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; +} + +.echHighlighterOverlay__fill { + fill: transparentize($ouiColorGhost, 0.8); +} + +.echHighlighterOverlay__stroke { + stroke: transparentize($ouiColorGhost, 0.8); +} + +.echHighlighter__mask { + fill: transparentize($ouiColorEmptyShade, 0.5); +} + +.echCrosshair, +.echCrosshair__cursor, +.echCrosshair__crossLine { + position: absolute; + top: 0; + left: 0; + pointer-events: none; +} + +.echScreenReaderOnly { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} + +.echScreenReaderOnlyDebug { + // sass-lint:disable-block no-color-literals, no-color-keywords + left: 0 !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + width: 100% !important; + height: 100% !important; + overflow: auto !important; + background: rgba(255, 255, 255, 0.8); + + table, + td, + th { + border: 1px solid black; + font-size: 12px; + } +} + +.echScreenReaderTable { + overflow-x: auto; + text-align: left; +} + .echAnnotation { + position: absolute; + user-select: none; font-size: $ouiFontSizeXS; font-weight: $ouiFontWeightBold; + + &__tooltip { + @include euiToolTipStyle; + @include euiFontSizeXS; + padding: 0; + transition: opacity $ouiAnimSpeedNormal; + pointer-events: none; + user-select: none; + max-width: 256px; + } + + &__header { + @include euiToolTipTitle; + padding: $ouiSizeXS ($ouiSizeXS * 2); + } + + &__details { + padding: $ouiSizeXS ($ouiSizeXS * 2); + } + + &__icon { + position: relative; + } + + &__body { + white-space: nowrap; + } +} + +.echCanvasRenderer { + position: absolute; + top: 0; + left: 0; + padding: 0; + margin: 0; + border: 0; + background: transparent; } diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index 850d27069a..afdf8cf73a 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -38,13 +38,51 @@ import { import { RecursivePartial } from '../../components/common'; -// @ts-ignore typescript doesn't understand the webpack loader -import lightColors from '!!sass-vars-to-js-loader!../../global_styling/variables/_colors.scss'; -// @ts-ignore typescript doesn't understand the webpack loader -import darkColors from '!!sass-vars-to-js-loader!../../themes/oui/oui_colors_dark.scss'; +// @ts-ignore typescript doesn't understand the babel preprocessor +import { + ouiColorChartBand as ouiV7ColorChartBand, + ouiColorChartLines as ouiV7ColorChartLines, + ouiColorDarkShade as ouiV7ColorDarkShade, + ouiColorDarkestShade as ouiV7ColorDarkestShade, + ouiColorEmptyShade as ouiV7ColorEmptyShade, + // @ts-ignore typescript doesn't understand the babel preprocessor +} from '!!variables-from-scss!!../../global_styling/variables/_colors.scss'; + +// @ts-ignore typescript doesn't understand the babel preprocessor +import { + ouiColorChartBand as ouiV7ColorChartBandDark, + ouiColorChartLines as ouiV7ColorChartLinesDark, + ouiColorDarkShade as ouiV7ColorDarkShadeDark, + ouiColorDarkestShade as ouiV7ColorDarkestShadeDark, + ouiColorEmptyShade as ouiV7ColorEmptyShadeDark, + // @ts-ignore typescript doesn't understand the babel preprocessor +} from '!!variables-from-scss!!../../themes/oui/oui_colors_dark.scss'; + +const ouiV7FontFamily = + "'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"; + +// @ts-ignore typescript doesn't understand the babel preprocessor +import { + ouiColorChartBand as ouiNextColorChartBand, + ouiColorChartLines as ouiNextColorChartLines, + ouiColorDarkShade as ouiNextColorDarkShade, + ouiColorDarkestShade as ouiNextColorDarkestShade, + ouiColorEmptyShade as ouiNextColorEmptyShade, + // @ts-ignore typescript doesn't understand the babel preprocessor +} from '!!variables-from-scss!!../oui-next/global_styling/variables/_colors.scss'; + +// @ts-ignore typescript doesn't understand the babel preprocessor +import { + ouiColorChartBand as ouiNextColorChartBandDark, + ouiColorChartLines as ouiNextColorChartLinesDark, + ouiColorDarkShade as ouiNextColorDarkShadeDark, + ouiColorDarkestShade as ouiNextColorDarkestShadeDark, + ouiColorEmptyShade as ouiNextColorEmptyShadeDark, + // @ts-ignore typescript doesn't understand the babel preprocessor +} from '!!variables-from-scss!!../oui-next/oui_next_colors_dark.scss'; -const fontFamily = `'Inter UI', -apple-system, BlinkMacSystemFont, - 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`; +const ouiNextFontFamily = + "'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"; export interface OuiChartThemeType { lineAnnotation: LineAnnotationStyle; @@ -52,23 +90,23 @@ export interface OuiChartThemeType { partition: RecursivePartial; } -function createTheme(colors: any): OuiChartThemeType { +function createTheme(theme: any): OuiChartThemeType { return { lineAnnotation: { line: { strokeWidth: 1, - stroke: colors.ouiColorDarkShade.rgba, + stroke: theme.ouiColorDarkShade, opacity: 1, }, details: { fontSize: 10, - fontFamily: fontFamily, - fill: colors.ouiColorDarkShade.rgba, + fontFamily: theme.fontFamily, + fill: theme.ouiColorDarkShade, padding: 0, }, }, partition: { - fontFamily: fontFamily, + fontFamily: theme.fontFamily, minFontSize: 8, maxFontSize: 16, fillLabel: { @@ -80,16 +118,16 @@ function createTheme(colors: any): OuiChartThemeType { linkLabel: { maxCount: 5, fontSize: 11, - textColor: colors.ouiColorDarkestShade.rgba, + textColor: theme.ouiColorDarkestShade, }, outerSizeRatio: 1, circlePadding: 4, - sectorLineStroke: colors.ouiColorEmptyShade.rgba, + sectorLineStroke: theme.ouiColorEmptyShade, sectorLineWidth: 1.5, }, theme: { background: { - color: colors.ouiColorEmptyShade.rgba, + color: theme.ouiColorEmptyShade, }, chartMargins: { left: 0, @@ -102,7 +140,7 @@ function createTheme(colors: any): OuiChartThemeType { strokeWidth: 2, }, point: { - fill: colors.ouiColorEmptyShade.rgba, + fill: theme.ouiColorEmptyShade, strokeWidth: 2, radius: 3, }, @@ -116,7 +154,7 @@ function createTheme(colors: any): OuiChartThemeType { }, point: { visible: false, - fill: colors.ouiColorEmptyShade.rgba, + fill: theme.ouiColorEmptyShade, strokeWidth: 2, radius: 3, }, @@ -124,8 +162,8 @@ function createTheme(colors: any): OuiChartThemeType { barSeriesStyle: { displayValue: { fontSize: 8, - fontFamily: fontFamily, - fill: colors.ouiColorDarkShade.rgba, + fontFamily: theme.fontFamily, + fill: theme.ouiColorDarkShade, }, }, scales: { @@ -135,20 +173,20 @@ function createTheme(colors: any): OuiChartThemeType { axes: { axisTitle: { fontSize: 12, - fontFamily: fontFamily, - fill: colors.ouiColorDarkestShade.rgba, + fontFamily: theme.fontFamily, + fill: theme.ouiColorDarkestShade, padding: { inner: 10, outer: 0, }, }, axisLine: { - stroke: colors.ouiColorChartLines.rgba, + stroke: theme.ouiColorChartLines, }, tickLabel: { fontSize: 10, - fontFamily: fontFamily, - fill: colors.ouiColorDarkShade.rgba, + fontFamily: theme.fontFamily, + fill: theme.ouiColorDarkShade, padding: { outer: 8, inner: 10, @@ -156,20 +194,20 @@ function createTheme(colors: any): OuiChartThemeType { }, tickLine: { visible: false, - stroke: colors.ouiColorChartLines.rgba, + stroke: theme.ouiColorChartLines, strokeWidth: 1, }, gridLine: { horizontal: { visible: true, - stroke: colors.ouiColorChartLines.rgba, + stroke: theme.ouiColorChartLines, strokeWidth: 1, opacity: 1, dash: [0, 0], }, vertical: { visible: true, - stroke: colors.ouiColorChartLines.rgba, + stroke: theme.ouiColorChartLines, strokeWidth: 1, opacity: 1, dash: [4, 4], @@ -182,15 +220,15 @@ function createTheme(colors: any): OuiChartThemeType { }, crosshair: { band: { - fill: colors.ouiColorChartBand.rgba, + fill: theme.ouiColorChartBand, }, line: { - stroke: colors.ouiColorDarkShade.rgba, + stroke: theme.ouiColorDarkShade, strokeWidth: 1, dash: [4, 4], }, crossLine: { - stroke: colors.ouiColorDarkShade.rgba, + stroke: theme.ouiColorDarkShade, strokeWidth: 1, dash: [4, 4], }, @@ -199,10 +237,38 @@ function createTheme(colors: any): OuiChartThemeType { }; } -export const OUI_CHARTS_THEME_LIGHT: OuiChartThemeType = createTheme( - lightColors -); -export const OUI_CHARTS_THEME_DARK: OuiChartThemeType = createTheme(darkColors); +export const OUI_CHARTS_THEME_LIGHT: OuiChartThemeType = createTheme({ + ouiColorChartBand: ouiV7ColorChartBand, + ouiColorChartLines: ouiV7ColorChartLines, + ouiColorDarkShade: ouiV7ColorDarkShade, + ouiColorDarkestShade: ouiV7ColorDarkestShade, + ouiColorEmptyShade: ouiV7ColorEmptyShade, + ouiFontFamily: ouiV7FontFamily, +}); +export const OUI_CHARTS_THEME_DARK: OuiChartThemeType = createTheme({ + ouiColorChartBand: ouiV7ColorChartBandDark, + ouiColorChartLines: ouiV7ColorChartLinesDark, + ouiColorDarkShade: ouiV7ColorDarkShadeDark, + ouiColorDarkestShade: ouiV7ColorDarkestShadeDark, + ouiColorEmptyShade: ouiV7ColorEmptyShadeDark, + ouiFontFamily: ouiV7FontFamily, +}); +export const OUI_CHARTS_NEXT_THEME_LIGHT: OuiChartThemeType = createTheme({ + ouiColorChartBand: ouiNextColorChartBand, + ouiColorChartLines: ouiNextColorChartLines, + ouiColorDarkShade: ouiNextColorDarkShade, + ouiColorDarkestShade: ouiNextColorDarkestShade, + ouiColorEmptyShade: ouiNextColorEmptyShade, + ouiFontFamily: ouiNextFontFamily, +}); +export const OUI_CHARTS_NEXT_THEME_DARK: OuiChartThemeType = createTheme({ + ouiColorChartBand: ouiNextColorChartBandDark, + ouiColorChartLines: ouiNextColorChartLinesDark, + ouiColorDarkShade: ouiNextColorDarkShadeDark, + ouiColorDarkestShade: ouiNextColorDarkestShadeDark, + ouiColorEmptyShade: ouiNextColorEmptyShadeDark, + ouiFontFamily: ouiNextFontFamily, +}); export const OUI_SPARKLINE_THEME_PARTIAL: PartialTheme = { lineSeriesStyle: { @@ -225,5 +291,7 @@ export const OUI_SPARKLINE_THEME_PARTIAL: PartialTheme = { export interface EuiChartThemeType extends OuiChartThemeType {} export const EUI_CHARTS_THEME_LIGHT = OUI_CHARTS_THEME_LIGHT; export const EUI_CHARTS_THEME_DARK = OUI_CHARTS_THEME_DARK; +export const EUI_CHARTS_NEXT_THEME_LIGHT = OUI_CHARTS_NEXT_THEME_LIGHT; +export const EUI_CHARTS_NEXT_THEME_DARK = OUI_CHARTS_NEXT_THEME_DARK; export const EUI_SPARKLINE_THEME_PARTIAL = OUI_SPARKLINE_THEME_PARTIAL; /* End of Aliases */ diff --git a/src/themes/oui-next/global_styling/functions/_colors.scss b/src/themes/oui-next/global_styling/functions/_colors.scss index 8cf997fb1d..57acc7f8fa 100644 --- a/src/themes/oui-next/global_styling/functions/_colors.scss +++ b/src/themes/oui-next/global_styling/functions/_colors.scss @@ -62,9 +62,9 @@ @for $i from 1 through 3 { $rgb: nth($rgba, $i); - $rgb: $rgb / 255; + $rgb: calc($rgb / 255); - $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4)); + $rgb: if($rgb < .03928, calc($rgb / 12.92), pow(calc(($rgb + .055) / 1.055), 2.4)); $rgba2: append($rgba2, $rgb); } @@ -77,7 +77,7 @@ $backgroundLum: luminance($background) + .05; $foregroundLum: luminance($foreground) + .05; - @return max($backgroundLum, $foregroundLum) / min($backgroundLum, $foregroundLum); + @return calc(max($backgroundLum, $foregroundLum) / min($backgroundLum, $foregroundLum)); } // Given $color, decide whether $lightText or $darkText should be used as the text color diff --git a/src/themes/oui-next/global_styling/functions/_math.scss b/src/themes/oui-next/global_styling/functions/_math.scss index 4d36cc020e..0079e79eb2 100644 --- a/src/themes/oui-next/global_styling/functions/_math.scss +++ b/src/themes/oui-next/global_styling/functions/_math.scss @@ -11,7 +11,7 @@ //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow @function pow($number, $power) { - @if ($power != $power or ($power != 0 and $power == $power / 2)) { + @if ($power != $power or ($power != 0 and $power == calc($power / 2))) { @return $power; } @if ($power == 1) { @@ -46,7 +46,7 @@ @if ($hasTrailingOne) { $power: $power - 1; } - $halfPower: pow($number, floor($power / 2)); + $halfPower: pow($number, floor(calc($power / 2))); $fullPower: $halfPower * $halfPower; @if ($hasTrailingOne) { $fullPower: $fullPower * $number; @@ -67,7 +67,7 @@ $x: 1; @for $i from 0 through $prec { - $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1))); + $x: calc(1 / $n) * (($n - 1) * $x + calc($num / pow($x, $n - 1))); } @return $x; diff --git a/src/themes/oui-next/global_styling/mixins/_beta_badge.scss b/src/themes/oui-next/global_styling/mixins/_beta_badge.scss index 0e534c7b9a..eb19151ee3 100644 --- a/src/themes/oui-next/global_styling/mixins/_beta_badge.scss +++ b/src/themes/oui-next/global_styling/mixins/_beta_badge.scss @@ -20,7 +20,7 @@ #{$selector}__betaBadgeWrapper { position: absolute; - top: ($ouiSizeL / -2); + top: calc($ouiSizeL / -2); left: 50%; transform: translateX(-50%); z-index: 3; // get above abs positioned image @@ -49,7 +49,7 @@ #{$selector}__betaBadgeWrapper { position: absolute; - top: ($ouiSizeL / -2); + top: calc($ouiSizeL / -2); left: 50%; transform: translateX(-50%); z-index: 3; // get above abs positioned image diff --git a/src/themes/oui-next/global_styling/mixins/_form.scss b/src/themes/oui-next/global_styling/mixins/_form.scss index d5eabf33df..d50f33e222 100644 --- a/src/themes/oui-next/global_styling/mixins/_form.scss +++ b/src/themes/oui-next/global_styling/mixins/_form.scss @@ -19,7 +19,7 @@ @mixin ouiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) { $iconSize: $ouiSize; $iconPadding: $ouiFormControlPadding; - $marginBetweenIcons: $ouiFormControlPadding / 2; + $marginBetweenIcons: calc($ouiFormControlPadding / 2); @if ($compressed) { $iconPadding: $ouiFormControlCompressedPadding; } @@ -55,7 +55,7 @@ } #{$iconClass} { - @include size($clearSize / 2); + @include size(calc($clearSize / 2)); fill: $ouiColorEmptyShade; // increase thickness of icon at such a small size stroke: $ouiColorEmptyShade; @@ -326,7 +326,7 @@ @if $size { $size: $size - 2px; // subtract 2px from size to account for border size - padding: $size / 2; + padding: calc($size / 2); } border: 1px solid $ouiFormCustomControlBorderColor; diff --git a/src/themes/oui-next/global_styling/mixins/_shadow.scss b/src/themes/oui-next/global_styling/mixins/_shadow.scss index e1b9d33dae..b977b893e7 100644 --- a/src/themes/oui-next/global_styling/mixins/_shadow.scss +++ b/src/themes/oui-next/global_styling/mixins/_shadow.scss @@ -89,7 +89,7 @@ @mixin ouiSlightShadowHover($color: $ouiShadowColor, $opacity: .3) { box-shadow: - 0 4px 8px 0 rgba($color, $opacity/2), + 0 4px 8px 0 rgba($color, calc($opacity/2)), 0 2px 2px -1px rgba($color, $opacity); } diff --git a/src/themes/oui-next/global_styling/variables/_borders.scss b/src/themes/oui-next/global_styling/variables/_borders.scss index 4bed6701b9..240de21514 100644 --- a/src/themes/oui-next/global_styling/variables/_borders.scss +++ b/src/themes/oui-next/global_styling/variables/_borders.scss @@ -16,7 +16,7 @@ $ouiBorderWidthThick: 2px !default; $ouiBorderColor: $ouiColorLightShade !default; $ouiBorderRadius: 4px !default; -$ouiBorderRadiusSmall: $ouiBorderRadius / 2 !default; +$ouiBorderRadiusSmall: calc($ouiBorderRadius / 2) !default; $ouiBorderThick: $ouiBorderWidthThick solid $ouiBorderColor !default; $ouiBorderThin: $ouiBorderWidthThin solid $ouiBorderColor !default; $ouiBorderEditable: $ouiBorderWidthThick dotted $ouiBorderColor !default; diff --git a/src/themes/oui-next/global_styling/variables/_form.scss b/src/themes/oui-next/global_styling/variables/_form.scss index 65c1159f0d..38bb18ddb7 100644 --- a/src/themes/oui-next/global_styling/variables/_form.scss +++ b/src/themes/oui-next/global_styling/variables/_form.scss @@ -56,7 +56,7 @@ $ouiSwitchOffColor: lightOrDarkTheme(transparentize($ouiColorMediumShade, .8), t // Control Layout $ouiFormControlLayoutGroupInputHeight: $ouiFormControlHeight - 2px !default; $ouiFormControlLayoutGroupInputCompressedHeight: $ouiFormControlCompressedHeight - 2px !default; -$ouiFormControlLayoutGroupInputCompressedBorderRadius: $ouiFormControlCompressedBorderRadius / 2 !default; +$ouiFormControlLayoutGroupInputCompressedBorderRadius: calc($ouiFormControlCompressedBorderRadius / 2) !default; // Range $ouiRangeTrackColor: $ouiColorDarkShade !default; @@ -68,7 +68,7 @@ $ouiRangeThumbBorderColor: $ouiRangeTrackColor !default; $ouiRangeTrackWidth: 100% !default; $ouiRangeTrackHeight: 2px !default; -$ouiRangeTrackBorderWidth: 0 !default; +$ouiRangeTrackBorderWidth: 0px !default; $ouiRangeTrackBorderColor: $ouiRangeTrackColor !default; $ouiRangeTrackRadius: $ouiBorderRadius !default; diff --git a/src/themes/oui-next/global_styling/variables/_typography.scss b/src/themes/oui-next/global_styling/variables/_typography.scss index f2a1b81be5..3ef2b70d70 100644 --- a/src/themes/oui-next/global_styling/variables/_typography.scss +++ b/src/themes/oui-next/global_styling/variables/_typography.scss @@ -16,7 +16,7 @@ // Typography mixins @function convertToRem($size) { - @return #{$size / $ouiFontSize}rem; + @return #{calc($size / $ouiFontSize)}rem; } // Spit out rem and px @@ -30,7 +30,7 @@ // If our base font size (ouiFontSize) 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. @function lineHeightFromBaseline($multiplier: 3) { - @return convertToRem(($ouiFontSize/2)*$multiplier); + @return convertToRem(calc($ouiFontSize/2)*$multiplier); } @mixin lineHeightFromBaseline($multiplier: 3) { line-height: lineHeightFromBaseline($multiplier); diff --git a/yarn.lock b/yarn.lock index b0f98c1308..bda2393a75 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1270,6 +1270,11 @@ "@babel/helper-validator-identifier" "^7.19.1" to-fast-properties "^2.0.0" +"@bufbuild/protobuf@^1.0.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@bufbuild/protobuf/-/protobuf-1.3.0.tgz#69f675c76e6c1ab0b5bde141fa2df8b00927216a" + integrity sha512-G372ods0pLt46yxVRsnP/e2btVPuuzArcMPFpIDeIwiGPuuglEs9y75iG0HMvZgncsj5TvbYRWqbVyOe3PLCWQ== + "@cnakazawa/watch@^1.0.3": version "1.0.4" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a" @@ -3473,17 +3478,12 @@ async-each@^1.0.1: resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf" integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ== -async-foreach@^0.1.3: - version "0.1.3" - resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542" - integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI= - async-limiter@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8" integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg== -async@^2.6.1, async@^2.6.2: +async@^2.6.2: version "2.6.4" resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221" integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA== @@ -3861,7 +3861,7 @@ bl@^4.1.0: inherits "^2.0.4" readable-stream "^3.4.0" -bluebird@3.7.2, bluebird@^3.4.7, bluebird@^3.5.5: +bluebird@3.7.2, bluebird@^3.5.5: version "3.7.2" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== @@ -4088,6 +4088,11 @@ bser@^2.0.0: dependencies: node-int64 "^0.4.0" +buffer-builder@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/buffer-builder/-/buffer-builder-0.2.0.tgz#3322cd307d8296dab1f604618593b261a3fade8f" + integrity sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg== + buffer-crc32@~0.2.3: version "0.2.13" resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242" @@ -4728,15 +4733,6 @@ cliui@^6.0.0: strip-ansi "^6.0.0" wrap-ansi "^6.2.0" -cliui@^7.0.2: - version "7.0.4" - resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f" - integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ== - dependencies: - string-width "^4.2.0" - strip-ansi "^6.0.0" - wrap-ansi "^7.0.0" - cliui@^8.0.1: version "8.0.1" resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa" @@ -4891,11 +4887,6 @@ color-convert@^2.0.1: dependencies: color-name "~1.1.4" -color-convert@~0.5.0: - version "0.5.3" - resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd" - integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0= - color-name@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689" @@ -7705,15 +7696,6 @@ fs-extra@^3.0.1: jsonfile "^3.0.0" universalify "^0.1.0" -fs-extra@^7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9" - integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw== - dependencies: - graceful-fs "^4.1.2" - jsonfile "^4.0.0" - universalify "^0.1.0" - fs-extra@^9.0.0: version "9.0.1" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc" @@ -7865,13 +7847,6 @@ gauge@~1.2.5: lodash.padend "^4.1.0" lodash.padstart "^4.1.0" -gaze@^1.0.0: - version "1.1.2" - resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105" - integrity sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU= - dependencies: - globule "^1.0.0" - gensync@^1.0.0-beta.1: version "1.0.0-beta.1" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269" @@ -8276,13 +8251,6 @@ gonzales-pe-sl@^4.2.3, "gonzales-pe-sl@github:srowhani/gonzales-pe#dev": dependencies: minimist "1.1.x" -gonzales-pe@^4.2.2: - version "4.3.0" - resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-4.3.0.tgz#fe9dec5f3c557eead09ff868c65826be54d067b3" - integrity sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ== - dependencies: - minimist "^1.2.5" - gopd@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c" @@ -8969,6 +8937,11 @@ image-size@0.8.3: dependencies: queue "6.0.1" +immutable@^4.0.0: + version "4.3.3" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.3.tgz#8934ff6826d996a7642c8dc4b46e694dd19561e3" + integrity sha512-808ZFYMsIRAjLAu5xkKo0TsbY9LBy9H5MazTKIEHerNkg0ymgilGfBPMR/3G7d/ihGmuK2Hw8S1izY2d3kd3wA== + import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" @@ -9191,14 +9164,7 @@ interpret@^1.0.0, interpret@^1.2.0, interpret@^1.4.0: resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e" integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA== -invariant@2.2.2: - version "2.2.2" - resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" - integrity sha1-nh9WrArNtr8wMwbzOL47IErmA2A= - dependencies: - loose-envify "^1.0.0" - -invariant@2.2.4, invariant@^2.2.2, invariant@^2.2.4: +invariant@^2.2.2, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== @@ -10277,11 +10243,6 @@ joi@^17.7.0: "@sideway/formula" "^3.0.1" "@sideway/pinpoint" "^2.0.0" -js-base64@^2.4.9: - version "2.6.4" - resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4" - integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ== - "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -10425,13 +10386,6 @@ jsonfile@^3.0.0: optionalDependencies: graceful-fs "^4.1.6" -jsonfile@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" - integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss= - optionalDependencies: - graceful-fs "^4.1.6" - jsonfile@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.0.1.tgz#98966cba214378c8c84b82e085907b40bf614179" @@ -10714,11 +10668,6 @@ locutus@^2.0.11: resolved "https://registry.yarnpkg.com/locutus/-/locutus-2.0.16.tgz#1da15532f1d735712a27e35a1caf0ccb7041f6b3" integrity sha512-pGfl6Hb/1mXLzrX5kl5lH7gz25ey0vwQssZp8Qo2CEF59di6KrAgdFm+0pW8ghLnvNzzJGj5tlWhhv2QbK3jeQ== -lodash.camelcase@^4.3.0: - version "4.3.0" - resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" - integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY= - lodash.capitalize@^4.1.0: version "4.2.1" resolved "https://registry.yarnpkg.com/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz#f826c9b4e2a8511d84e3aca29db05e1a4f3b72a9" @@ -10734,26 +10683,11 @@ lodash.flattendeep@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2" integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI= -lodash.foreach@^4.5.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53" - integrity sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM= - -lodash.frompairs@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz#bc4e5207fa2757c136e573614e9664506b2b1bd2" - integrity sha1-vE5SB/onV8E25XNhTpZkUGsrG9I= - lodash.get@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk= -lodash.isarray@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-4.0.0.tgz#2aca496b28c4ca6d726715313590c02e6ea34403" - integrity sha1-KspJayjEym1yZxUxNZDALm6jRAM= - lodash.isequal@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" @@ -10769,11 +10703,6 @@ lodash.kebabcase@^4.0.0: resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36" integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY= -lodash.mapkeys@^4.6.0: - version "4.6.0" - resolved "https://registry.yarnpkg.com/lodash.mapkeys/-/lodash.mapkeys-4.6.0.tgz#df2cfa231d7c57c7a8ad003abdad5d73d3ea5195" - integrity sha1-3yz6Ix18V8eorQA6va1dc9PqUZU= - lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -10934,7 +10863,7 @@ make-dir@^3.0.0, make-dir@^3.0.2: dependencies: semver "^6.0.0" -make-fetch-happen@^10.0.1, make-fetch-happen@^10.0.4: +make-fetch-happen@^10.0.1: version "10.2.1" resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-10.2.1.tgz#f5e3835c5e9817b617f2770870d9492d28678164" integrity sha512-NgOPbRiaQM10DYXvN3/hhGVI2M5MtITFryzBGxHM5p4wnFxsVCbxkrBrDsk+EZ5OB4jEOT7AjDxtdF+KVEFT7w== @@ -11633,11 +11562,6 @@ nan@^2.12.1: resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01" integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw== -nan@^2.17.0: - version "2.17.0" - resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb" - integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ== - nanoid@^2.1.0: version "2.1.11" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280" @@ -11738,7 +11662,7 @@ node-forge@^1: resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3" integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA== -node-gyp@^8.2.0, node-gyp@^8.4.1: +node-gyp@^8.2.0: version "8.4.1" resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-8.4.1.tgz#3d49308fc31f768180957d6b5746845fbd429937" integrity sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w== @@ -11810,26 +11734,6 @@ node-releases@^2.0.8: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f" integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w== -"node-sass@npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5": - version "9.0.0-libsass-3.6.5" - resolved "https://registry.yarnpkg.com/@amoo-miki/node-sass/-/node-sass-9.0.0-libsass-3.6.5.tgz#0536f4890b2a7a9143ce536f0fecde0a02ee389b" - integrity sha512-KalEkSO9qBbenHS1fXwz6UAf3x2oUKguJ6DRbTyDn8lYiZqNrEcbaD3hE8eZiLOrH662n8MF7fVzLp+oMQNiEA== - dependencies: - async-foreach "^0.1.3" - chalk "^4.1.2" - cross-spawn "^7.0.3" - gaze "^1.0.0" - get-stdin "^4.0.1" - glob "^7.0.3" - lodash "^4.17.15" - make-fetch-happen "^10.0.4" - meow "^9.0.0" - nan "^2.17.0" - node-gyp "^8.4.1" - sass-graph "^4.0.1" - stdout-stream "^1.4.0" - "true-case-path" "^2.2.1" - nopt@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88" @@ -12591,13 +12495,6 @@ parse-asn1@^5.0.0: evp_bytestokey "^1.0.0" pbkdf2 "^3.0.3" -parse-color@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/parse-color/-/parse-color-1.0.0.tgz#7b748b95a83f03f16a94f535e52d7f3d94658619" - integrity sha1-e3SLlag/A/FqlPU15S1/PZRlhhk= - dependencies: - color-convert "~0.5.0" - parse-conflict-json@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/parse-conflict-json/-/parse-conflict-json-2.0.2.tgz#3d05bc8ffe07d39600dc6436c6aefe382033d323" @@ -13628,14 +13525,6 @@ qs@~6.5.2: resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad" integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA== -query-ast@^1.0.1, query-ast@^1.0.2: - version "1.0.3" - resolved "https://registry.yarnpkg.com/query-ast/-/query-ast-1.0.3.tgz#4a18374950fa80cbf9b03d7b945bbac8bb4250bf" - integrity sha512-k7z4jilpZCujhiJ+QeKSwYXHc9HxqiVKlVE7/em0zBfPpcqnXKUP8F7ld7XaAkO6oXeAD7yonqcNJWqOF2pSGA== - dependencies: - invariant "2.2.2" - lodash "^4.17.15" - querystring-es3@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -14753,6 +14642,13 @@ rxjs@^6.4.0: dependencies: tslib "^1.9.0" +rxjs@^7.4.0: + version "7.8.1" + resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543" + integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg== + dependencies: + tslib "^2.1.0" + rxjs@^7.5.5: version "7.5.6" resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.6.tgz#0446577557862afd6903517ce7cae79ecb9662bc" @@ -14813,25 +14709,66 @@ sane@^4.0.3: minimist "^1.1.1" walker "~1.0.5" -sass-extract@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/sass-extract/-/sass-extract-2.1.0.tgz#c65e6ca3103cbcf2fca0dcd81b07e4e49a6cc583" - integrity sha1-xl5soxA8vPL8oNzYGwfk5JpsxYM= - dependencies: - bluebird "^3.4.7" - gonzales-pe "^4.2.2" - parse-color "^1.0.0" - query-ast "^1.0.1" - -sass-graph@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-4.0.1.tgz#2ff8ca477224d694055bf4093f414cf6cfad1d2e" - integrity sha512-5YCfmGBmxoIRYHnKK2AKzrAkCoQ8ozO+iumT8K4tXJXRVCPf+7s1/9KxTSW3Rbvf+7Y7b4FR3mWyLnQr3PHocA== - dependencies: - glob "^7.0.0" - lodash "^4.17.11" - scss-tokenizer "^0.4.3" - yargs "^17.2.1" +sass-embedded-darwin-arm64@1.66.1: + version "1.66.1" + resolved "https://registry.yarnpkg.com/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.66.1.tgz#7f7490965d3687795d30a91fe373e9840894eb10" + integrity sha512-XdvA4KThDRLvUweMGWEsEd3swOSeiGuLelNUKbvB4H3Peh+O0m9XfKwWxh1FJZP0gVK3moMXPyVflYrUWVHGCA== + +sass-embedded-darwin-x64@1.66.1: + version "1.66.1" + resolved "https://registry.yarnpkg.com/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.66.1.tgz#c08527ba7ac9875d66c89750e8024cc66e69c93a" + integrity sha512-y3kLVhFPFUvN+uZwNhl0wZ4V7ghPzXxOwoTC1n6LHUe/xRcDP5Nl+7zBHpwhW94lLgjDhEd1+mnpz8HGVHdIAw== + +sass-embedded-linux-arm64@1.66.1: + version "1.66.1" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.66.1.tgz#d67429cb3648dd3cf7511a8350184b50c693753b" + integrity sha512-HPy8ScfUMSdG5TjRSsr6rnGQjG/PzyslwVGL0UB+8LTkj2PyDEu35jmHBgWggSCmIqvu7phw4OgiWEUuaxwXgg== + +sass-embedded-linux-arm@1.66.1: + version "1.66.1" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.66.1.tgz#475730804f53fb352ec590a7aa3ce195d95f522a" + integrity sha512-lPkMTR0Wwc9NTuvWsKo4a+/slHFcEypPpjfL+HFKaoq4NqMkX/DBewD5wl9rA45KCfJ47wf47H4aJ0Qcd82Iyg== + +sass-embedded-linux-ia32@1.66.1: + version "1.66.1" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.66.1.tgz#66b35d1bd0f94ea811c28d65d96860a65b5a77ec" + integrity sha512-DhxaQpWNpPrvSCFqgWUWv0dlnB6PzLBeMaA87pILCgJGnJs2vaPYr5JgVBK+nFQYaKVZ3PC5K0OfcY8ruQVdPw== + +sass-embedded-linux-x64@1.66.1: + version "1.66.1" + resolved "https://registry.yarnpkg.com/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.66.1.tgz#832c41c123621ee5a96f3915ff83f70a2588b4a1" + integrity sha512-tIRa/fn34x4NrbSEmfekAcQSHPKheNJ+/uqCGmxeBSr7Yw7S4CoP1/yvtY/geKmx4uSmgSJhdEYB9X1f+MoSQw== + +sass-embedded-win32-ia32@1.66.1: + version "1.66.1" + resolved "https://registry.yarnpkg.com/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.66.1.tgz#292dfd3fc79bb38dd4d90bf3b360b868fbba2b35" + integrity sha512-h9uNhQbJN6rP5+MXZZj4vL9phTsjLj/8PH/fyhKdUvJP7+5+k6qmCttkJX8Xvws2veFhgRW+mt/erdGGkc4nFA== + +sass-embedded-win32-x64@1.66.1: + version "1.66.1" + resolved "https://registry.yarnpkg.com/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.66.1.tgz#f5b8bdcf96fd4924d1e4f267a8436a9c7692a3fc" + integrity sha512-TdZilrwiDBMYUjFSnaoQdRtm5QYV+73bsMKN+JYd1KFI56KM8XHcCeMTUH37+uKw2O8pR17O/JRFSNWBJTl5kw== + +sass-embedded@^1.66.1: + version "1.66.1" + resolved "https://registry.yarnpkg.com/sass-embedded/-/sass-embedded-1.66.1.tgz#76fcdbf217e33a1875a940d3d84a03cc74156388" + integrity sha512-bHTFMSpcIJxrCav9ac69dMMYoiWIhiw/88eApojX7j1gsCAAx3nQMkTKr7FKIVVofWla8sE1KM9qtFya2k8svw== + dependencies: + "@bufbuild/protobuf" "^1.0.0" + buffer-builder "^0.2.0" + immutable "^4.0.0" + rxjs "^7.4.0" + supports-color "^8.1.1" + varint "^6.0.0" + optionalDependencies: + sass-embedded-darwin-arm64 "1.66.1" + sass-embedded-darwin-x64 "1.66.1" + sass-embedded-linux-arm "1.66.1" + sass-embedded-linux-arm64 "1.66.1" + sass-embedded-linux-ia32 "1.66.1" + sass-embedded-linux-x64 "1.66.1" + sass-embedded-win32-ia32 "1.66.1" + sass-embedded-win32-x64 "1.66.1" sass-lint-auto-fix@^0.21.2: version "0.21.2" @@ -14867,10 +14804,10 @@ sass-lint@^1.13.1: path-is-absolute "^1.0.0" util "^0.10.3" -"sass-loader@npm:@bsfishy/sass-loader@node-sass-9": - version "10.4.1-node-sass-9.1" - resolved "https://registry.yarnpkg.com/@bsfishy/sass-loader/-/sass-loader-10.4.1-node-sass-9.1.tgz#08b1a2106ebee373a3ce87933c010542c84a8f2e" - integrity sha512-AnVEci9dZCxCmPTg+bB0gUhp6FO6v+KmWH4wRbLMztfK5JxS8o+0s/bKCZwK7EY0TpxcjRTj34oW48OQHm0Hjg== +"sass-loader@npm:@bsfishy/sass-loader@10.4.1-support-sass-embedded.3": + version "10.4.1-support-sass-embedded.3" + resolved "https://registry.yarnpkg.com/@bsfishy/sass-loader/-/sass-loader-10.4.1-support-sass-embedded.3.tgz#5be3f0a6bc1eb20e081a336fb1d3474b5c8d7259" + integrity sha512-IcMG8iVIzAjLI9t3S4ucZAwDo6uAiQ+F+1G+TxSv5dt3isHYvDM3T7RgagILdP8i8JcJicfX3GiG8N8/2B/xVQ== dependencies: klona "^2.0.4" loader-utils "^2.0.0" @@ -14878,23 +14815,6 @@ sass-lint@^1.13.1: schema-utils "^3.0.0" semver "^7.3.2" -sass-vars-to-js-loader@^2.1.1: - version "2.1.1" - resolved "https://registry.yarnpkg.com/sass-vars-to-js-loader/-/sass-vars-to-js-loader-2.1.1.tgz#8dfc26e967420e49ce4d3729eb76389007523007" - integrity sha512-IJgrYn9ZceM+aQKH5LCNXdh0OJaTYxhCeyhJoTXmD5OWHNpetrYa0F/qDsmjesurAcA1ogf9QsrUbCcUaTNVZg== - dependencies: - async "^2.6.1" - fs-extra "^7.0.1" - loader-utils "^1.2.3" - lodash "^4.17.11" - lodash.camelcase "^4.3.0" - lodash.foreach "^4.5.0" - lodash.frompairs "^4.0.1" - lodash.isarray "^4.0.0" - lodash.mapkeys "^4.6.0" - query-ast "^1.0.2" - scss-parser "^1.0.3" - sax@^1.2.4, sax@~1.2.1, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -14957,22 +14877,6 @@ scoped-regex@^2.0.0: resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-2.1.0.tgz#7b9be845d81fd9d21d1ec97c61a0b7cf86d2015f" integrity sha512-g3WxHrqSWCZHGHlSrF51VXFdjImhwvH8ZO/pryFH56Qi0cDsZfylQa/t0jCzVQFNbNvM00HfHjkDPEuarKDSWQ== -scss-parser@^1.0.3: - version "1.0.4" - resolved "https://registry.yarnpkg.com/scss-parser/-/scss-parser-1.0.4.tgz#61cdeb28701ffcb497954b9b05729c6d38eb8b9f" - integrity sha512-oDZwDfY2JhnDrHNZPcdcPNVTpAXsJBY2/uhFfN0IzMy1xExAfJDcI1Yl/VXhfRsdQL3wLeg6/Oxt3cafBOuMzQ== - dependencies: - invariant "2.2.4" - lodash "^4.17.4" - -scss-tokenizer@^0.4.3: - version "0.4.3" - resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.4.3.tgz#1058400ee7d814d71049c29923d2b25e61dc026c" - integrity sha512-raKLgf1LI5QMQnG+RxHz6oK0sL3x3I4FN2UDLqgLOGO8hodECNnNh5BXn7fAyBxrA8zVzdQizQ6XjNJQ+uBwMw== - dependencies: - js-base64 "^2.4.9" - source-map "^0.7.3" - select-hose@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" @@ -15547,13 +15451,6 @@ statuses@2.0.1: resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow= -stdout-stream@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.0.tgz#a2c7c8587e54d9427ea9edb3ac3f2cd522df378b" - integrity sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s= - dependencies: - readable-stream "^2.0.1" - stealthy-require@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b" @@ -15952,6 +15849,13 @@ supports-color@^7.0.0, supports-color@^7.1.0: dependencies: has-flag "^4.0.0" +supports-color@^8.1.1: + version "8.1.1" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c" + integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q== + dependencies: + has-flag "^4.0.0" + supports-preserve-symlinks-flag@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" @@ -16354,11 +16258,6 @@ trough@^1.0.0: resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406" integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA== -"true-case-path@^2.2.1": - version "2.2.1" - resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-2.2.1.tgz#c5bf04a5bbec3fd118be4084461b3a27c4d796bf" - integrity sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q== - ts-debounce@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/ts-debounce/-/ts-debounce-1.0.0.tgz#e433301744ba75fe25466f7f23e1382c646aae6a" @@ -17018,6 +16917,11 @@ value-equal@^1.0.1: resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== +varint@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/varint/-/varint-6.0.0.tgz#9881eb0ce8feaea6512439d19ddf84bf551661d0" + integrity sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg== + vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" @@ -17681,11 +17585,6 @@ yargs-parser@^20.2.3: resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee" integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w== -yargs-parser@^21.0.0: - version "21.1.0" - resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.0.tgz#a11d06a3bf57f064e951aa3ef55fcf3a5705f876" - integrity sha512-xzm2t63xTV/f7+bGMSRzLhUNk1ajv/tDoaD5OeGyC3cFo2fl7My9Z4hS3q2VdQ7JaLvTxErO8Jp5pRIFGMD/zg== - yargs-parser@^21.1.1: version "21.1.1" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35" @@ -17737,19 +17636,6 @@ yargs@^15.0.2: y18n "^4.0.0" yargs-parser "^18.1.2" -yargs@^17.2.1: - version "17.5.1" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.5.1.tgz#e109900cab6fcb7fd44b1d8249166feb0b36e58e" - integrity sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA== - dependencies: - cliui "^7.0.2" - escalade "^3.1.1" - get-caller-file "^2.0.5" - require-directory "^2.1.1" - string-width "^4.2.3" - y18n "^5.0.5" - yargs-parser "^21.0.0" - yauzl@^2.10.0: version "2.10.0" resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9" From d07d1377cf83258f9e0fab065e1895b00fe9ccf2 Mon Sep 17 00:00:00 2001 From: Danila Gulderov Date: Thu, 28 Sep 2023 07:36:38 +0300 Subject: [PATCH 03/15] Bump typescript to 4.6.4 (#879) * typescript bump: 4.1.6 Signed-off-by: Danila Gulderov * typescript bump: 4.2.4 Signed-off-by: Danila Gulderov * typescript bump: 4.3.5 Signed-off-by: Danila Gulderov * typescript bump: 4.4.4 Signed-off-by: Danila Gulderov * typescript bump: 4.5.5 Signed-off-by: Danila Gulderov * typescript bump: 4.6.4 Signed-off-by: Danila Gulderov * CHANGELOG.md updated Signed-off-by: Danila Gulderov * bump typescript-eslint/eslint-plugin: 5.62.0 bump typescript-eslint/parser: 5.62.0 node 16 is required for typescript-eslint: 6.0.0 Signed-off-by: Danila Gulderov * CHANGELOG.md update Signed-off-by: Danila Gulderov * move typescript update to regular section Signed-off-by: Danila Gulderov * changelog message improvement Signed-off-by: Danila Gulderov * fix typings Signed-off-by: Danila Gulderov * cleanup useUnknownInCatchVariables Signed-off-by: Danila Gulderov * logical or => nullish coalescing Signed-off-by: Danila Gulderov * wrap with String Signed-off-by: Danila Gulderov * Update CHANGELOG.md Move CHANGELOG entry to the unreleased section Signed-off-by: Miki * Add back `onPinClick` check in `OuiPinnableListGroup` Update pinnable_list_group.tsx Signed-off-by: Miki * Enhance error message extraction in `validateFieldValue` Update default_syntax.ts Signed-off-by: Miki * Remove e.code from default_syntax.ts Update default_syntax.ts Signed-off-by: Miki * Lint default_syntax.ts Signed-off-by: Miki --------- Signed-off-by: Danila Gulderov Signed-off-by: Matt Provost Signed-off-by: Miki Co-authored-by: Matt Provost Co-authored-by: Josh Romero Co-authored-by: Miki Signed-off-by: ShatilKhan --- CHANGELOG.md | 1 + i18ntokens.json | 28 +-- package.json | 6 +- .../guide_section/guide_section.tsx | 2 +- .../datagrid/data_grid_inmemory_renderer.tsx | 6 +- .../header/header_links/header_links.tsx | 7 +- src/components/icon/icon.test.tsx | 2 +- .../pinnable_list_group.tsx | 6 +- .../markdown_editor/markdown_editor.tsx | 2 +- .../search_bar/query/default_syntax.ts | 10 +- src/components/search_bar/search_bar.tsx | 6 +- .../selectable_template_sitewide.tsx | 2 +- src/components/suggest/suggest_item.tsx | 10 +- yarn.lock | 209 ++++++++++-------- 14 files changed, 164 insertions(+), 133 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7914aa84e7..a9ac2f5e8f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,7 @@ ### 🛠 Maintenance - Update caniuse database ([#1046](https://github.com/opensearch-project/oui/pull/1046)) +- Bump TypeScript to v4.6.4 ([#879](https://github.com/opensearch-project/oui/pull/879)) ### 🪛 Refactoring diff --git a/i18ntokens.json b/i18ntokens.json index 96c4356734..51d5c7ed53 100644 --- a/i18ntokens.json +++ b/i18ntokens.json @@ -2543,14 +2543,14 @@ "highlighting": "string", "loc": { "start": { - "line": 125, + "line": 124, "column": 4, - "index": 3690 + "index": 3665 }, "end": { - "line": 125, + "line": 124, "column": 75, - "index": 3761 + "index": 3736 } }, "filepath": "src/components/header/header_links/header_links.tsx" @@ -2561,14 +2561,14 @@ "highlighting": "string", "loc": { "start": { - "line": 138, + "line": 137, "column": 4, - "index": 4083 + "index": 4058 }, "end": { - "line": 138, + "line": 137, "column": 69, - "index": 4148 + "index": 4123 } }, "filepath": "src/components/header/header_links/header_links.tsx" @@ -2653,12 +2653,12 @@ "start": { "line": 143, "column": 4, - "index": 4714 + "index": 4700 }, "end": { "line": 148, "column": 44, - "index": 4899 + "index": 4885 } }, "filepath": "src/components/list_group/pinnable_list_group/pinnable_list_group.tsx" @@ -2671,12 +2671,12 @@ "start": { "line": 143, "column": 4, - "index": 4714 + "index": 4700 }, "end": { "line": 148, "column": 44, - "index": 4899 + "index": 4885 } }, "filepath": "src/components/list_group/pinnable_list_group/pinnable_list_group.tsx" @@ -3535,12 +3535,12 @@ "start": { "line": 267, "column": 12, - "index": 7947 + "index": 7990 }, "end": { "line": 270, "column": 14, - "index": 8069 + "index": 8112 } }, "filepath": "src/components/selectable/selectable_templates/selectable_template_sitewide.tsx" diff --git a/package.json b/package.json index a8d6d0efcf..bc41bf1e22 100644 --- a/package.json +++ b/package.json @@ -160,8 +160,8 @@ "@types/react-router-dom": "^5.3.3", "@types/url-parse": "^1.4.8", "@types/uuid": "^9.0.1", - "@typescript-eslint/eslint-plugin": "^4.8.1", - "@typescript-eslint/parser": "^4.8.1", + "@typescript-eslint/eslint-plugin": "^5.62.0", + "@typescript-eslint/parser": "^5.62.0", "autoprefixer": "^9.8.6", "babel-core": "7.0.0-bridge.0", "babel-eslint": "^10.1.0", @@ -242,7 +242,7 @@ "start-server-and-test": "^2.0.0", "style-loader": "^1.2.1", "terser-webpack-plugin": "^4.1.0", - "typescript": "4.0.5", + "typescript": "4.6.4", "url-loader": "^4.1.0", "webpack": "npm:@amoo-miki/webpack@4.46.0-rc.2", "webpack-cli": "^3.3.12", diff --git a/src-docs/src/components/guide_section/guide_section.tsx b/src-docs/src/components/guide_section/guide_section.tsx index 40dcb70055..04c685258f 100644 --- a/src-docs/src/components/guide_section/guide_section.tsx +++ b/src-docs/src/components/guide_section/guide_section.tsx @@ -135,7 +135,7 @@ export const GuideSection: FunctionComponent = ({ const isPlaygroundUnsupported = typeof window !== 'undefined' && typeof document !== 'undefined' && - !!window.MSInputMethodContext && + !!(window as any).MSInputMethodContext && // @ts-ignore doesn't exist? !!document.documentMode; diff --git a/src/components/datagrid/data_grid_inmemory_renderer.tsx b/src/components/datagrid/data_grid_inmemory_renderer.tsx index 92bedab0ed..5fb464db1a 100644 --- a/src/components/datagrid/data_grid_inmemory_renderer.tsx +++ b/src/components/datagrid/data_grid_inmemory_renderer.tsx @@ -56,11 +56,7 @@ export interface OuiDataGridInMemoryRendererProps { function noop() {} function getElementText(element: HTMLElement) { - return 'innerText' in element - ? element.innerText - : // (this line left here to satisfy Prettier since a ts-ignore is used on the next line) - // @ts-ignore TypeScript thinks element.innerText always exists, however it doesn't in jest/jsdom environment - element.textContent || undefined; + return 'innerText' in element ? element.innerText : element.textContent || ''; } export const OuiDataGridInMemoryRenderer: FunctionComponent = ({ diff --git a/src/components/header/header_links/header_links.tsx b/src/components/header/header_links/header_links.tsx index caf2de45e0..643951a540 100644 --- a/src/components/header/header_links/header_links.tsx +++ b/src/components/header/header_links/header_links.tsx @@ -95,16 +95,15 @@ export const OuiHeaderLinks: FunctionComponent = ({ popoverProps, ...rest }) => { - const { onClick: _onClick, iconType = 'apps', ...popoverButtonRest } = { - ...popoverButtonProps, - }; + const { onClick, iconType = 'apps', ...popoverButtonRest } = + popoverButtonProps ?? {}; const [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false); const onMenuButtonClick: MouseEventHandler< HTMLButtonElement & HTMLAnchorElement > = (e) => { - _onClick && _onClick(e); + onClick?.(e); setMobileMenuIsOpen(!mobileMenuIsOpen); }; diff --git a/src/components/icon/icon.test.tsx b/src/components/icon/icon.test.tsx index 43e706cfff..03faf02305 100644 --- a/src/components/icon/icon.test.tsx +++ b/src/components/icon/icon.test.tsx @@ -56,7 +56,7 @@ const prettyHtml = cheerio.load(''); function testIcon(props: PropsOf) { return () => { expect.assertions(1); - return new Promise((resolve) => { + return new Promise((resolve) => { const onIconLoad = () => { component.update(); expect(prettyHtml(component.html())).toMatchSnapshot(); diff --git a/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx b/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx index d08a1fa1a5..8dfcd677c4 100644 --- a/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx +++ b/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx @@ -115,7 +115,7 @@ export const OuiPinnableListGroup: FunctionComponent ); // Add the pinning action unless the item has it's own extra action - if (onPinClick && !itemProps.extraAction && pinnable) { + if (pinnable && !itemProps.extraAction) { // Different displays for pinned vs unpinned if (pinned) { itemProps.extraAction = { @@ -132,8 +132,8 @@ export const OuiPinnableListGroup: FunctionComponent 'aria-label': pinTitle ? pinTitle(item) : pinExtraActionLabel, }; } - // Return the item on click - itemProps.extraAction.onClick = () => onPinClick(item); + // On click, return the item + if (onPinClick) itemProps.extraAction.onClick = () => onPinClick(item); } return itemProps; diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx index 3b83e14228..ebec30f822 100644 --- a/src/components/markdown_editor/markdown_editor.tsx +++ b/src/components/markdown_editor/markdown_editor.tsx @@ -260,7 +260,7 @@ export const OuiMarkdownEditor = forwardRef< const parsed = parser.processSync(value); return [parsed, null]; } catch (e) { - return [null, e]; + return [null, e as OuiMarkdownParseError]; } }, [parser, value]); diff --git a/src/components/search_bar/query/default_syntax.ts b/src/components/search_bar/query/default_syntax.ts index 354855d244..6f8ed3d727 100644 --- a/src/components/search_bar/query/default_syntax.ts +++ b/src/components/search_bar/query/default_syntax.ts @@ -353,8 +353,16 @@ const validateFieldValue = ( try { schemaField.validate(value); } catch (e) { + // While e.message is the normal convention, it is optional. e.name is used for completeness + const message = (e instanceof Error + ? e.message || e.name + : String(e) + )?.trim(); + error( - `Invalid value \`${expression}\` set for field \`${field}\` - ${e.message}`, + `Invalid value \`${expression}\` set for field \`${field}\`${ + message ? ` - ${message}` : '' + }`, location ); } diff --git a/src/components/search_bar/search_bar.tsx b/src/components/search_bar/search_bar.tsx index 57cacc6056..f18d91ebd2 100644 --- a/src/components/search_bar/search_bar.tsx +++ b/src/components/search_bar/search_bar.tsx @@ -189,7 +189,11 @@ export class OuiSearchBar extends Component { this.notifyControllingParent({ query, queryText, error: null }); this.setState({ query, queryText, error: null }); } catch (e) { - const error: Error = { name: e.name, message: e.message }; + const error: Error = + e instanceof Error + ? { name: e.name, message: e.message } + : { name: 'Unexpected error', message: String(e) }; + this.notifyControllingParent({ query: null, queryText, error }); this.setState({ queryText, error }); } diff --git a/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx b/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx index 258bac6ffc..a70540e78e 100644 --- a/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx +++ b/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx @@ -252,7 +252,7 @@ export const OuiSelectableTemplateSitewide: FunctionComponent), onFocus: searchOnFocus, onBlur: searchOnBlur, onInput: onSearchInput, diff --git a/src/components/suggest/suggest_item.tsx b/src/components/suggest/suggest_item.tsx index f8c1ffbfe8..bfe07c7d9d 100644 --- a/src/components/suggest/suggest_item.tsx +++ b/src/components/suggest/suggest_item.tsx @@ -32,7 +32,6 @@ import React, { FunctionComponent, HTMLAttributes, ButtonHTMLAttributes, - MouseEventHandler, } from 'react'; import { CommonProps, ExclusiveUnion, keysOf } from '../common'; import classNames from 'classnames'; @@ -77,12 +76,7 @@ interface OuiSuggestItemPropsBase { } type PropsForDiv = Omit, 'onClick'>; -type PropsForButton = Omit< - ButtonHTMLAttributes, - 'onClick' | 'type' -> & { - onClick: MouseEventHandler | undefined; -}; +type PropsForButton = Omit, 'type'>; export type OuiSuggestItemProps = CommonProps & OuiSuggestItemPropsBase & @@ -193,8 +187,8 @@ export const OuiSuggestItem: FunctionComponent = ({ if (onClick) { return ( diff --git a/yarn.lock b/yarn.lock index bda2393a75..e2f2143afb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1314,6 +1314,18 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-config-kibana/-/eslint-config-kibana-0.15.0.tgz#a552793497cdfc1829c2f9b7cd7018eb008f1606" integrity sha1-pVJ5NJfN/Bgpwvm3zXAY6wCPFgY= +"@eslint-community/eslint-utils@^4.2.0": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59" + integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA== + dependencies: + eslint-visitor-keys "^3.3.0" + +"@eslint-community/regexpp@^4.4.0": + version "4.5.1" + resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.5.1.tgz#cdd35dce4fa1a89a4fd42b1599eb35b3af408884" + integrity sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ== + "@eslint/eslintrc@^0.1.3": version "0.1.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.1.3.tgz#7d1a2b2358552cc04834c0979bd4275362e37085" @@ -2401,7 +2413,7 @@ dependencies: jest-diff "^24.3.0" -"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5": +"@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5": version "7.0.6" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0" integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw== @@ -2411,6 +2423,11 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== +"@types/json-schema@^7.0.9": + version "7.0.12" + resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb" + integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA== + "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" @@ -2586,6 +2603,11 @@ dependencies: "@types/node" "*" +"@types/semver@^7.3.12": + version "7.5.0" + resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a" + integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw== + "@types/source-list-map@*": version "0.1.2" resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9" @@ -2681,30 +2703,21 @@ dependencies: "@types/node" "*" -"@typescript-eslint/eslint-plugin@^4.8.1": - version "4.8.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.8.1.tgz#b362abe0ee478a6c6d06c14552a6497f0b480769" - integrity sha512-d7LeQ7dbUrIv5YVFNzGgaW3IQKMmnmKFneRWagRlGYOSfLJVaRbj/FrBNOBC1a3tVO+TgNq1GbHvRtg1kwL0FQ== - dependencies: - "@typescript-eslint/experimental-utils" "4.8.1" - "@typescript-eslint/scope-manager" "4.8.1" - debug "^4.1.1" - functional-red-black-tree "^1.0.1" - regexpp "^3.0.0" - semver "^7.3.2" - tsutils "^3.17.1" - -"@typescript-eslint/experimental-utils@4.8.1": - version "4.8.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.8.1.tgz#27275c20fa4336df99ebcf6195f7d7aa7aa9f22d" - integrity sha512-WigyLn144R3+lGATXW4nNcDJ9JlTkG8YdBWHkDlN0lC3gUGtDi7Pe3h5GPvFKMcRz8KbZpm9FJV9NTW8CpRHpg== - dependencies: - "@types/json-schema" "^7.0.3" - "@typescript-eslint/scope-manager" "4.8.1" - "@typescript-eslint/types" "4.8.1" - "@typescript-eslint/typescript-estree" "4.8.1" - eslint-scope "^5.0.0" - eslint-utils "^2.0.0" +"@typescript-eslint/eslint-plugin@^5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db" + integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag== + dependencies: + "@eslint-community/regexpp" "^4.4.0" + "@typescript-eslint/scope-manager" "5.62.0" + "@typescript-eslint/type-utils" "5.62.0" + "@typescript-eslint/utils" "5.62.0" + debug "^4.3.4" + graphemer "^1.4.0" + ignore "^5.2.0" + natural-compare-lite "^1.4.0" + semver "^7.3.7" + tsutils "^3.21.0" "@typescript-eslint/experimental-utils@^4.0.1": version "4.33.0" @@ -2718,15 +2731,15 @@ eslint-scope "^5.1.1" eslint-utils "^3.0.0" -"@typescript-eslint/parser@^4.8.1": - version "4.8.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.8.1.tgz#4fe2fbdbb67485bafc4320b3ae91e34efe1219d1" - integrity sha512-QND8XSVetATHK9y2Ltc/XBl5Ro7Y62YuZKnPEwnNPB8E379fDsvzJ1dMJ46fg/VOmk0hXhatc+GXs5MaXuL5Uw== +"@typescript-eslint/parser@^5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7" + integrity sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA== dependencies: - "@typescript-eslint/scope-manager" "4.8.1" - "@typescript-eslint/types" "4.8.1" - "@typescript-eslint/typescript-estree" "4.8.1" - debug "^4.1.1" + "@typescript-eslint/scope-manager" "5.62.0" + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/typescript-estree" "5.62.0" + debug "^4.3.4" "@typescript-eslint/scope-manager@4.33.0": version "4.33.0" @@ -2736,23 +2749,33 @@ "@typescript-eslint/types" "4.33.0" "@typescript-eslint/visitor-keys" "4.33.0" -"@typescript-eslint/scope-manager@4.8.1": - version "4.8.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.8.1.tgz#e343c475f8f1d15801b546cb17d7f309b768fdce" - integrity sha512-r0iUOc41KFFbZdPAdCS4K1mXivnSZqXS5D9oW+iykQsRlTbQRfuFRSW20xKDdYiaCoH+SkSLeIF484g3kWzwOQ== +"@typescript-eslint/scope-manager@5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c" + integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w== + dependencies: + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/visitor-keys" "5.62.0" + +"@typescript-eslint/type-utils@5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a" + integrity sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew== dependencies: - "@typescript-eslint/types" "4.8.1" - "@typescript-eslint/visitor-keys" "4.8.1" + "@typescript-eslint/typescript-estree" "5.62.0" + "@typescript-eslint/utils" "5.62.0" + debug "^4.3.4" + tsutils "^3.21.0" "@typescript-eslint/types@4.33.0": version "4.33.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72" integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ== -"@typescript-eslint/types@4.8.1": - version "4.8.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.8.1.tgz#23829c73c5fc6f4fcd5346a7780b274f72fee222" - integrity sha512-ave2a18x2Y25q5K05K/U3JQIe2Av4+TNi/2YuzyaXLAsDx6UZkz1boZ7nR/N6Wwae2PpudTZmHFXqu7faXfHmA== +"@typescript-eslint/types@5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f" + integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ== "@typescript-eslint/typescript-estree@1.11.0": version "1.11.0" @@ -2775,19 +2798,32 @@ semver "^7.3.5" tsutils "^3.21.0" -"@typescript-eslint/typescript-estree@4.8.1": - version "4.8.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.8.1.tgz#7307e3f2c9e95df7daa8dc0a34b8c43b7ec0dd32" - integrity sha512-bJ6Fn/6tW2g7WIkCWh3QRlaSU7CdUUK52shx36/J7T5oTQzANvi6raoTsbwGM11+7eBbeem8hCCKbyvAc0X3sQ== +"@typescript-eslint/typescript-estree@5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b" + integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA== dependencies: - "@typescript-eslint/types" "4.8.1" - "@typescript-eslint/visitor-keys" "4.8.1" - debug "^4.1.1" - globby "^11.0.1" - is-glob "^4.0.1" - lodash "^4.17.15" - semver "^7.3.2" - tsutils "^3.17.1" + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/visitor-keys" "5.62.0" + debug "^4.3.4" + globby "^11.1.0" + is-glob "^4.0.3" + semver "^7.3.7" + tsutils "^3.21.0" + +"@typescript-eslint/utils@5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86" + integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ== + dependencies: + "@eslint-community/eslint-utils" "^4.2.0" + "@types/json-schema" "^7.0.9" + "@types/semver" "^7.3.12" + "@typescript-eslint/scope-manager" "5.62.0" + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/typescript-estree" "5.62.0" + eslint-scope "^5.1.1" + semver "^7.3.7" "@typescript-eslint/visitor-keys@4.33.0": version "4.33.0" @@ -2797,13 +2833,13 @@ "@typescript-eslint/types" "4.33.0" eslint-visitor-keys "^2.0.0" -"@typescript-eslint/visitor-keys@4.8.1": - version "4.8.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.8.1.tgz#794f68ee292d1b2e3aa9690ebedfcb3a8c90e3c3" - integrity sha512-3nrwXFdEYALQh/zW8rFwP4QltqsanCDz4CwWMPiIZmwlk9GlvBeueEIbq05SEq4ganqM0g9nh02xXgv5XI3PeQ== +"@typescript-eslint/visitor-keys@5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e" + integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw== dependencies: - "@typescript-eslint/types" "4.8.1" - eslint-visitor-keys "^2.0.0" + "@typescript-eslint/types" "5.62.0" + eslint-visitor-keys "^3.3.0" "@webassemblyjs/ast@1.9.0": version "1.9.0" @@ -5730,7 +5766,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9: dependencies: ms "2.0.0" -debug@4, debug@4.3.4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3: +debug@4, debug@4.3.4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4: version "4.3.4" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== @@ -6813,14 +6849,6 @@ eslint-scope@^4.0.3: esrecurse "^4.1.0" estraverse "^4.1.1" -eslint-scope@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.0.0.tgz#e87c8887c73e8d1ec84f1ca591645c358bfc8fb9" - integrity sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw== - dependencies: - esrecurse "^4.1.0" - estraverse "^4.1.1" - eslint-scope@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" @@ -6829,13 +6857,6 @@ eslint-scope@^5.1.1: esrecurse "^4.3.0" estraverse "^4.1.1" -eslint-utils@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.0.0.tgz#7be1cc70f27a72a76cd14aa698bcabed6890e1cd" - integrity sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA== - dependencies: - eslint-visitor-keys "^1.1.0" - eslint-utils@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27" @@ -6865,6 +6886,11 @@ eslint-visitor-keys@^2.0.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8" integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ== +eslint-visitor-keys@^3.3.0: + version "3.4.1" + resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz#c22c48f48942d08ca824cc526211ae400478a994" + integrity sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA== + eslint@^2.7.0, eslint@^7.10.0: version "7.10.0" resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.10.0.tgz#494edb3e4750fb791133ca379e786a8f648c72b9" @@ -8285,6 +8311,11 @@ graceful-fs@^4.1.5, graceful-fs@^4.2.6: resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c" integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA== +graphemer@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6" + integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag== + grouped-queue@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/grouped-queue/-/grouped-queue-2.0.0.tgz#a2c6713f2171e45db2c300a3a9d7c119d694dac8" @@ -11584,6 +11615,11 @@ nanomatch@^1.2.9: snapdragon "^0.8.1" to-regex "^3.0.1" +natural-compare-lite@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4" + integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g== + natural-compare@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" @@ -14168,7 +14204,7 @@ regexp.prototype.flags@^1.4.3: define-properties "^1.1.3" functions-have-names "^1.2.2" -regexpp@^3.0.0, regexpp@^3.1.0: +regexpp@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2" integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q== @@ -14920,7 +14956,7 @@ semver-truncate@^1.1.2: dependencies: semver "^5.3.0" -"semver@2 || 3 || 4 || 5", semver@5.4.1, semver@5.5.0, semver@7.0.0, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1, semver@^6.0.0, semver@^6.2.0, semver@^6.3.0, semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.5.3: +"semver@2 || 3 || 4 || 5", semver@5.4.1, semver@5.5.0, semver@7.0.0, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1, semver@^6.0.0, semver@^6.2.0, semver@^6.3.0, semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3: version "7.5.3" resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e" integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ== @@ -16293,13 +16329,6 @@ tslib@^2.4.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf" integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== -tsutils@^3.17.1: - version "3.17.1" - resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759" - integrity sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g== - dependencies: - tslib "^1.8.1" - tsutils@^3.21.0: version "3.21.0" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623" @@ -16417,10 +16446,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@4.0.5: - version "4.0.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389" - integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ== +typescript@4.6.4: + version "4.6.4" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9" + integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg== unbox-primitive@^1.0.2: version "1.0.2" From 2059084c89a1b088727541241f93865b31287f6d Mon Sep 17 00:00:00 2001 From: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Date: Thu, 16 Nov 2023 17:55:39 +0600 Subject: [PATCH 04/15] Update _card.scss Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Signed-off-by: ShatilKhan --- src/components/card/_card.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index f0406de54e..e3f1615a6f 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -133,7 +133,7 @@ .ouiCard__top { .ouiCard__image { - width: calc(100% + (#{$paddingAmount} * 2)); + width: calc(100% + #{$paddingAmount * 2}); left: $paddingAmount * -1; top: $paddingAmount * -1; margin-bottom: $paddingAmount * -1; // ensure the parent is only as tall as the image @@ -141,7 +141,7 @@ // IF both exist, position the icon centered on top of image + .ouiCard__icon { transform: translate(-50%, -75%); // Fallback for IE as it doesn't accept calcs in translates - transform: translate(-50%, calc(-50% + #{$paddingAmount * -1})); // sass-lint:disable-line no-duplicate-properties + transform: translate(-50%, calc(-50% - #{$paddingAmount})); // sass-lint:disable-line no-duplicate-properties } } } From 24b3d376de2e23c9ed22e72f60865a54f6897942 Mon Sep 17 00:00:00 2001 From: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Date: Thu, 16 Nov 2023 17:59:58 +0600 Subject: [PATCH 05/15] Update _combo_box.scss Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Signed-off-by: ShatilKhan --- src/components/combo_box/_combo_box.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index d73cd47471..5c48890a32 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/src/components/combo_box/_combo_box.scss @@ -41,7 +41,7 @@ // Ensure the input doesn't drop to the next line when the OuiBadge has a very long text // Overrides the default OuiBadge max-width that is 100% - max-width: calc(100% - #{$ouiSizeXS * .5} - #{$inputMinWidth}); + max-width: calc(100% - #{$ouiSizeXS * 0.5} - #{$inputMinWidth}); } .ouiComboBoxIcon { From 35d11f2b251f32ace17707223fcf2be7f0d81b72 Mon Sep 17 00:00:00 2001 From: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Date: Thu, 16 Nov 2023 18:04:47 +0600 Subject: [PATCH 06/15] Update _control_bar.scss Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Signed-off-by: ShatilKhan --- src/components/control_bar/_control_bar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/control_bar/_control_bar.scss b/src/components/control_bar/_control_bar.scss index 94035dd89f..30064c5aad 100644 --- a/src/components/control_bar/_control_bar.scss +++ b/src/components/control_bar/_control_bar.scss @@ -206,7 +206,7 @@ @keyframes ouiControlBarOpenPanelLarge { 0% { // Accounts for the initial height offset from the top - transform: translateY(calc((#{$ouiControlBarInitialHeight} * 3) * -1)); + transform: translateY(calc(#{$ouiControlBarInitialHeight} * -3)); } 100% { From 3b0ef5d49309257b82b2cd8d2c4c7a6e5e08e14d Mon Sep 17 00:00:00 2001 From: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Date: Thu, 16 Nov 2023 18:14:58 +0600 Subject: [PATCH 07/15] Update _flex_grid.scss On line 88, in order to optimize We perform the subtraction within the map-get function directly. This simplifies the calculation by removing the unnecessary parentheses around map-get($map, 'percentage'). Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Signed-off-by: ShatilKhan --- src/components/flex/_flex_grid.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/flex/_flex_grid.scss b/src/components/flex/_flex_grid.scss index 1aabd01d88..b17ce6e0ff 100644 --- a/src/components/flex/_flex_grid.scss +++ b/src/components/flex/_flex_grid.scss @@ -85,7 +85,7 @@ $fractions: ( @each $fraction, $map in $fractions { .ouiFlexGrid--#{$gutterName}.ouiFlexGrid--#{$fraction} { > .ouiFlexItem { - flex-basis: calc(#{map-get($map, 'percentage')} - #{$gutterSize}); + flex-basis: calc(map-get($map, 'percentage') - #{$gutterSize}); } &.ouiFlexGrid--directionColumn { /* 1 */ From c744b565c6466758a16de349560b5b49ea460e24 Mon Sep 17 00:00:00 2001 From: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Date: Thu, 16 Nov 2023 19:44:53 +0600 Subject: [PATCH 08/15] Update _tool_tip.scss Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Signed-off-by: ShatilKhan --- src/components/tool_tip/_tool_tip.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss index ccb72ebc81..8a72a3b01f 100644 --- a/src/components/tool_tip/_tool_tip.scss +++ b/src/components/tool_tip/_tool_tip.scss @@ -21,8 +21,8 @@ // Custom sizing $arrowSize: $ouiSizeM; - $arrowPlusSize: (calc($arrowSize/2) + 1px) * -1; /* 1 */ - $arrowMinusSize: (calc($arrowSize/2) - 1px) * -1; /* 1 */ + $arrowPlusSize: calc(-($arrowSize/2 + 1px)); /* 1 */ + $arrowMinusSize: calc(-($arrowSize/2 - 1px)); /* 1 */ .ouiToolTip__arrow { content: ''; From b9d2042deddc0d3c060ab435044da96a4874dbec Mon Sep 17 00:00:00 2001 From: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Date: Thu, 16 Nov 2023 19:46:50 +0600 Subject: [PATCH 09/15] Update _range_thumb.scss Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Signed-off-by: ShatilKhan --- src/components/form/range/_range_thumb.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/range/_range_thumb.scss b/src/components/form/range/_range_thumb.scss index 3c548b5043..3ff176a54b 100644 --- a/src/components/form/range/_range_thumb.scss +++ b/src/components/form/range/_range_thumb.scss @@ -16,7 +16,7 @@ position: absolute; left: 0; top: 50%; - margin-top: calc(-1 * $ouiRangeThumbHeight / 2); + margin-top: calc(-$ouiRangeThumbHeight / 2); pointer-events: none; z-index: 1; // higher than .ouiRangeHighlight that is 0 From 2a236898ccf3393a69847405dee2ba7c652c4276 Mon Sep 17 00:00:00 2001 From: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Date: Thu, 16 Nov 2023 19:49:12 +0600 Subject: [PATCH 10/15] Update tree_view.scss Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Signed-off-by: ShatilKhan --- src/components/tree_view/tree_view.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss index 2d505a4259..09f431a883 100644 --- a/src/components/tree_view/tree_view.scss +++ b/src/components/tree_view/tree_view.scss @@ -60,7 +60,7 @@ } .ouiTreeView__iconWrapper { - margin-top: calc(-1 * $ouiSizeXS / 2); + margin-top: calc($ouiSizeXS / -2); margin-right: $ouiSizeS; // This helps tokens appear vertically centered From 7d3c3f5655680055d69b32c6870a17bd453d26dc Mon Sep 17 00:00:00 2001 From: ShatilKhan Date: Thu, 16 Nov 2023 19:52:31 +0600 Subject: [PATCH 11/15] Update range_thumb.scss Signed-off-by: ShatilKhan --- src/components/form/range/_range_thumb.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/range/_range_thumb.scss b/src/components/form/range/_range_thumb.scss index 3ff176a54b..75ee999b57 100644 --- a/src/components/form/range/_range_thumb.scss +++ b/src/components/form/range/_range_thumb.scss @@ -16,7 +16,7 @@ position: absolute; left: 0; top: 50%; - margin-top: calc(-$ouiRangeThumbHeight / 2); + margin-top: calc($ouiRangeThumbHeight / -2); pointer-events: none; z-index: 1; // higher than .ouiRangeHighlight that is 0 From 981444944a6769c84eae41033c8218c7fd21d93e Mon Sep 17 00:00:00 2001 From: ShatilKhan Date: Thu, 16 Nov 2023 21:06:52 +0600 Subject: [PATCH 12/15] Update Changelog Signed-off-by: ShatilKhan --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a9ac2f5e8f..9804329aae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ - Update ouiTextSubduedColor in `next` dark theme ([#973](https://github.com/opensearch-project/oui/pull/973)) - Add `crossInCircleEmpty` and `power` icons ([#1044](https://github.com/opensearch-project/oui/pull/1044)) +- Optimize `calc()` usage in scss files ([#1002](https://github.com/opensearch-project/oui/issues/1002)) ### 🐛 Bug Fixes From 2aee71849a5d128ddda31ea89e72c6fc535e0fe6 Mon Sep 17 00:00:00 2001 From: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Date: Thu, 16 Nov 2023 20:54:34 +0600 Subject: [PATCH 13/15] Update _range_slider.scss Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Signed-off-by: ShatilKhan --- src/components/form/range/_range_slider.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/range/_range_slider.scss b/src/components/form/range/_range_slider.scss index 19cd379f49..56ceaab83f 100644 --- a/src/components/form/range/_range_slider.scss +++ b/src/components/form/range/_range_slider.scss @@ -102,7 +102,7 @@ // sass-lint:disable-block no-vendor-prefixes &::-webkit-slider-thumb { -webkit-appearance: none; - margin-top: calc(calc($ouiRangeTrackBorderWidth * -2 + $ouiRangeTrackHeight) / 2) - calc($ouiRangeThumbHeight / 2); + margin-top: calc(($ouiRangeTrackBorderWidth * -2 + $ouiRangeTrackHeight - $ouiRangeThumbHeight) / 2); } &::-ms-thumb { From c38787680c454dcbf9875d3f922223d5e22ba378 Mon Sep 17 00:00:00 2001 From: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Date: Thu, 16 Nov 2023 20:57:31 +0600 Subject: [PATCH 14/15] Update _resizable_button.scss Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Signed-off-by: ShatilKhan --- src/components/resizable_container/_resizable_button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/resizable_container/_resizable_button.scss b/src/components/resizable_container/_resizable_button.scss index 4816033f82..b908c4574c 100644 --- a/src/components/resizable_container/_resizable_button.scss +++ b/src/components/resizable_container/_resizable_button.scss @@ -35,8 +35,8 @@ &.ouiResizableButton--horizontal { cursor: col-resize; width: $ouiResizableButtonSize; - margin-left: calc(-1 * $ouiResizableButtonSize / 2); - margin-right: calc(-1 * $ouiResizableButtonSize / 2); + margin-left: calc( $ouiResizableButtonSize / -2); + margin-right: calc( $ouiResizableButtonSize / -2); &:before, &:after { From c69648e9c41222d12496c94cc2f2510311449f75 Mon Sep 17 00:00:00 2001 From: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> Date: Sat, 6 Jan 2024 00:20:00 +0600 Subject: [PATCH 15/15] Update index.js Signed-off-by: Shahriar Shatil <52494840+ShatilKhan@users.noreply.github.com> --- scripts/babel/variables-from-scss/index.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/scripts/babel/variables-from-scss/index.js b/scripts/babel/variables-from-scss/index.js index f7f3b0aa30..b04b7aae35 100644 --- a/scripts/babel/variables-from-scss/index.js +++ b/scripts/babel/variables-from-scss/index.js @@ -1,4 +1,3 @@ - /* * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 @@ -9,17 +8,14 @@ const { compileWithVariablesSync, } = require('../../lib/compile-scss-with-variables'); - const idKey = '!!variables-from-scss!!'; const keyLength = idKey.length; - const forbiddenKeyNames = [ ...Object.getOwnPropertyNames(Object.prototype), 'prototype', ]; - module.exports = (babel) => ({ visitor: { ImportDeclaration(path, state) {