From a6e427115321c7f56fffb125b1709689f105b5bf Mon Sep 17 00:00:00 2001 From: Miki Date: Tue, 29 Aug 2023 12:57:32 -0700 Subject: [PATCH] Replace `node-sass` with `sass-embedded` 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 --- .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 b0e6c3b07e..9be520196b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -42,6 +42,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 a3a92f8e15..aae322c755 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 11510a7b0e..a142a0e8b9 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 = { @@ -120,15 +118,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( @@ -203,5 +193,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 8edec1c515..2b148d4143 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/oui_next_colors_light.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/oui_next_colors_light.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 cec0dec337..0c7c15b9ed 100644 --- a/src/themes/oui-next/global_styling/variables/_form.scss +++ b/src/themes/oui-next/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/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 2865c81c77..88110a487b 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" @@ -4733,15 +4738,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" @@ -4896,11 +4892,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" @@ -7710,15 +7701,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" @@ -7870,13 +7852,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" @@ -8281,13 +8256,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" @@ -8974,6 +8942,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" @@ -9196,14 +9169,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== @@ -10282,11 +10248,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" @@ -10430,13 +10391,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" @@ -10719,11 +10673,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" @@ -10739,26 +10688,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" @@ -10774,11 +10708,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" @@ -10939,7 +10868,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== @@ -11638,11 +11567,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" @@ -11743,7 +11667,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== @@ -11815,26 +11739,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" @@ -12596,13 +12500,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" @@ -13633,14 +13530,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" @@ -14758,6 +14647,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" @@ -14818,25 +14714,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" @@ -14872,10 +14809,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" @@ -14883,23 +14820,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" @@ -14962,22 +14882,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" @@ -15552,13 +15456,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" @@ -15957,6 +15854,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" @@ -16359,11 +16263,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" @@ -17023,6 +16922,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" @@ -17686,11 +17590,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" @@ -17742,19 +17641,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"