@elastic/eui 70.4.0 → 71.1.0

package/optimize/lib/global_styling/functions/logical_shorthands.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.logicalShorthandCSS = exports.logicalBorderRadiusCSS = exports.LOGICAL_SHORTHANDS = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _logicals = _interopRequireDefault(require("./logicals.json"));
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var LOGICAL_SHORTHANDS = _logicals.default._shorthands;
+exports.LOGICAL_SHORTHANDS = LOGICAL_SHORTHANDS;
+
+/**
+ * Unfortunately, shorthand properties that describe boxes
+ * (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box)
+ * do not currently automatically respond to logical changes in display direction
+ * (@see https://github.com/w3c/csswg-drafts/issues/1282)
+ *
+ * This utility is essentially a stop-gap for those shorthand properties,
+ * converting them to corresponding longer logical `-inline` and `-block` properties
+ *
+ * 🗑 NOTE: This file is in a separate util file from logicals.ts due to its relatively
+ * convoluted logic, & to make deleting it easier when an official CSS spec is implemented.
+ */
+var logicalShorthandCSS = function logicalShorthandCSS(property, value) {
+  if (!LOGICAL_SHORTHANDS.includes(property)) {
+    throw new Error("".concat(property, " is not a shorthand property that needs logical CSS"));
+  }
+
+  if (property === 'border-radius') {
+    return logicalBorderRadiusCSS(String(value));
+  } // Split all potential values by spaces
+
+
+  var values = String(value).split(/\s+/);
+  var verticalBlockValue;
+  var horizontalInlineValue;
+
+  switch (values.length) {
+    case 1:
+      // If it's the same value all around, no need to use logical properties
+      return "".concat(property, ": ").concat(value, ";");
+
+    case 2:
+      verticalBlockValue = values[0];
+      horizontalInlineValue = values[1];
+      break;
+
+    case 3:
+      verticalBlockValue = "".concat(values[0], " ").concat(values[2]);
+      horizontalInlineValue = values[1];
+      break;
+
+    case 4:
+    default:
+      verticalBlockValue = "".concat(values[0], " ").concat(values[2]);
+      horizontalInlineValue = "".concat(values[3], " ").concat(values[1]); // Note: left (4th value) comes before right (2nd value)
+
+      break;
+  }
+
+  if (property.includes('border-')) {
+    // Border properties have a different naming syntax than margin/padding/etc
+    var borderProperty = property.split('-')[1];
+    return "\n    border-block-".concat(borderProperty, ": ").concat(verticalBlockValue, ";\n    border-inline-").concat(borderProperty, ": ").concat(horizontalInlineValue, ";\n    ");
+  } else {
+    return "\n    ".concat(property, "-block: ").concat(verticalBlockValue, ";\n    ").concat(property, "-inline: ").concat(horizontalInlineValue, ";\n    ");
+  }
+};
+/**
+ * Logical border radius is unfortunately a very special case as it handles corners
+ * and not sides (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#corners_of_a_box)
+ * and does not have `-inline` or `-block` shorthands.
+ *
+ * It also needs to account for `/` syntax (horizontal vs vertical radii)
+ * @see https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/
+ */
+
+
+exports.logicalShorthandCSS = logicalShorthandCSS;
+
+var logicalBorderRadiusCSS = function logicalBorderRadiusCSS(value) {
+  var ignoreZeroes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var borderRadiusMap = {
+    'border-start-start-radius': '',
+    'border-start-end-radius': '',
+    'border-end-end-radius': '',
+    'border-end-start-radius': ''
+  };
+  var values = [];
+
+  if (value.includes('/')) {
+    values = ['', '', '', '']; // Split into horizontal & vertical radii strings
+
+    value.split('/').forEach(function (radiiAxes) {
+      var radii = radiiAxes.trim().split(/\s+/);
+      values.forEach(function (_, i) {
+        // Add a space between the horizontal and vertical radius
+        var combinedValue = values[i] ? "".concat(values[i], " ") : values[i];
+
+        switch (radii.length) {
+          case 1:
+            // Every value is repeated
+            combinedValue += radii[0];
+            break;
+
+          case 2:
+            // If the corner is an even index, give it the first value, if odd, second value
+            combinedValue += i % 2 ? radii[1] : radii[0];
+            break;
+
+          case 3:
+            // The last corner should repeat the second value
+            combinedValue += i === 3 ? radii[1] : radii[i];
+            break;
+
+          case 4:
+          default:
+            // Every value is specified
+            combinedValue += radii[i];
+        }
+
+        values[i] = combinedValue;
+      });
+    });
+  } else {
+    values = value.split(/\s+/);
+  }
+
+  switch (values.length) {
+    case 1:
+      // If it's the same value all around, no need to use logical properties
+      return "border-radius: ".concat(value, ";");
+
+    case 2:
+      borderRadiusMap['border-start-start-radius'] = values[0];
+      borderRadiusMap['border-start-end-radius'] = values[1];
+      borderRadiusMap['border-end-end-radius'] = values[0];
+      borderRadiusMap['border-end-start-radius'] = values[1];
+      break;
+
+    case 3:
+      borderRadiusMap['border-start-start-radius'] = values[0];
+      borderRadiusMap['border-start-end-radius'] = values[1];
+      borderRadiusMap['border-end-end-radius'] = values[2];
+      borderRadiusMap['border-end-start-radius'] = values[1];
+      break;
+
+    case 4:
+    default:
+      borderRadiusMap['border-start-start-radius'] = values[0];
+      borderRadiusMap['border-start-end-radius'] = values[1];
+      borderRadiusMap['border-end-end-radius'] = values[2];
+      borderRadiusMap['border-end-start-radius'] = values[3];
+      break;
+  }
+
+  var borderRadiusCSS = [];
+  Object.entries(borderRadiusMap).forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        property = _ref2[0],
+        value = _ref2[1];
+
+    if (value) {
+      if (ignoreZeroes && value !== '0' && value !== '0px' || !ignoreZeroes) {
+        borderRadiusCSS.push("".concat(property, ": ").concat(value, ";"));
+      }
+    }
+  });
+  return borderRadiusCSS.join('\n');
+};
+
+exports.logicalBorderRadiusCSS = logicalBorderRadiusCSS;

package/optimize/lib/global_styling/functions/logicals.js

@@ -5,13 +5,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyle = exports.logicalSizeStyle = exports.logicalSizeCSS = exports.logicalSide = exports.logicalCSSWithFallback = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
+exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyles = exports.logicalStyle = exports.logicalSizeStyle = exports.logicalSizeCSS = exports.logicalSide = exports.logicalCSSWithFallback = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _common = require("../../components/common");
 
-var _logicals = _interopRequireDefault(require("./logicals.json"));
+var _logicals2 = _interopRequireDefault(require("./logicals.json"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -34,9 +38,13 @@ var logicalSide = {
 exports.logicalSide = logicalSide;
 var LOGICAL_SIDES = (0, _common.keysOf)(logicalSide);
 exports.LOGICAL_SIDES = LOGICAL_SIDES;
-var logicals = _logicals.default;
+var logicals = _logicals2.default;
 exports.logicals = logicals;
-var LOGICAL_PROPERTIES = (0, _common.keysOf)(logicals);
+
+var _shorthands = _logicals2.default._shorthands,
+    _logicals = (0, _objectWithoutProperties2.default)(_logicals2.default, ["_shorthands"]);
+
+var LOGICAL_PROPERTIES = (0, _common.keysOf)(_logicals);
 exports.LOGICAL_PROPERTIES = LOGICAL_PROPERTIES;
 
 /**
@@ -65,6 +73,22 @@ exports.logicalCSS = logicalCSS;
 var logicalCSSWithFallback = function logicalCSSWithFallback(property, value) {
   return "\n  ".concat(property, ": ").concat(value, ";\n  ").concat(logicalCSS(property, value), "\n");
 };
+/**
+ * Casing utils for swapping between camel case (style objs) and kebab case (CSS)
+ */
+
+
+exports.logicalCSSWithFallback = logicalCSSWithFallback;
+
+var camelCase = function camelCase(kebabCasedString) {
+  return kebabCasedString.replace(/-\w/g, function (str) {
+    return str.charAt(1).toUpperCase();
+  });
+};
+
+var kebabCase = function kebabCase(camelCasedString) {
+  return camelCasedString.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+};
 /**
  *
  * @param property A string that is a valid CSS logical property
@@ -73,14 +97,37 @@ var logicalCSSWithFallback = function logicalCSSWithFallback(property, value) {
  */
 
 
-exports.logicalCSSWithFallback = logicalCSSWithFallback;
-
 var logicalStyle = function logicalStyle(property, value) {
-  // Strip hyphens and camelCase the CSS logical property so React doesn't throw errors
-  var camelCasedProperty = logicals[property].replace(/-\w/g, function (str) {
-    return str.charAt(1).toUpperCase();
+  return (0, _defineProperty2.default)({}, camelCase(logicals[property]), value);
+};
+/**
+ * Given a style object with any amount of unknown CSS properties,
+ * find ones that can be converted to logical properties and convert them
+ *
+ * @param styleObject - A React object of camelCased styles
+ * @returns `object`
+ */
+
+
+exports.logicalStyle = logicalStyle;
+
+var logicalStyles = function logicalStyles(styleObject) {
+  var logicalStyleObject = {};
+  Object.entries(styleObject).forEach(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+
+    var cssProperty = kebabCase(key);
+
+    if (logicals.hasOwnProperty(cssProperty)) {
+      var logicalKey = camelCase(logicals[cssProperty]);
+      logicalStyleObject[logicalKey] = value;
+    } else {
+      logicalStyleObject[key] = value;
+    }
   });
-  return (0, _defineProperty2.default)({}, camelCasedProperty, value);
+  return logicalStyleObject;
 };
 /**
  *
@@ -90,7 +137,7 @@ var logicalStyle = function logicalStyle(property, value) {
  */
 
 
-exports.logicalStyle = logicalStyle;
+exports.logicalStyles = logicalStyles;
 
 var logicalSizeCSS = function logicalSizeCSS(width, height) {
   return "\n    ".concat(logicals.width, ": ").concat(width, ";\n    ").concat(logicals.height, ": ").concat(height, ";\n  ");

package/optimize/lib/global_styling/functions/logicals.json

@@ -52,5 +52,16 @@
   "border-top-left-radius": "border-start-start-radius",
   "border-top-right-radius": "border-start-end-radius",
   "border-bottom-left-radius": "border-end-start-radius",
-  "border-bottom-right-radius": "border-end-end-radius"
+  "border-bottom-right-radius": "border-end-end-radius",
+  "_shorthands": [
+    "margin",
+    "scroll-margin",
+    "padding",
+    "scroll-padding",
+    "inset",
+    "border-color",
+    "border-width",
+    "border-style",
+    "border-radius"
+  ]
 }

package/optimize/lib/services/theme/hooks.js

@@ -36,27 +36,24 @@ var useEuiTheme = function useEuiTheme() {
   var theme = (0, _react.useContext)(_context.EuiThemeContext);
   var colorMode = (0, _react.useContext)(_context.EuiColorModeContext);
   var modifications = (0, _react.useContext)(_context.EuiModificationsContext);
+  var isFallback = theme === _context.defaultComputedTheme;
+  var warningLevel = (0, _provider.getEuiDevProviderWarning)();
 
-  if (process.env.NODE_ENV !== 'production') {
-    var isFallback = theme === _context.defaultComputedTheme;
-    var warningLevel = (0, _provider.getEuiDevProviderWarning)();
+  if (isFallback && typeof warningLevel !== 'undefined') {
+    switch (warningLevel) {
+      case 'log':
+        console.log(providerMessage);
+        break;
 
-    if (isFallback && typeof warningLevel !== 'undefined') {
-      switch (warningLevel) {
-        case 'log':
-          console.log(providerMessage);
-          break;
+      case 'warn':
+        console.warn(providerMessage);
+        break;
 
-        case 'warn':
-          console.warn(providerMessage);
-          break;
+      case 'error':
+        throw new Error(providerMessage);
 
-        case 'error':
-          throw new Error(providerMessage);
-
-        default:
-          break;
-      }
+      default:
+        break;
     }
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "70.4.0",
+  "version": "71.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -20,14 +20,14 @@
     "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss",
     "build-pack": "yarn build && npm pack",
     "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"",
-    "compile-scss": "node ./scripts/compile-scss.js $npm_package_name",
+    "compile-scss": "node ./scripts/compile-scss.js",
     "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
     "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass",
     "lint-fix": "yarn lint-es-fix",
     "lint-es": "eslint --cache \"{src,src-docs}/**/*.{ts,tsx,js}\" --max-warnings 0",
     "lint-es-fix": "yarn lint-es --fix",
-    "lint-sass": "sass-lint -v --max-warnings 0",
-    "lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
+    "lint-sass": "yarn stylelint \"**/*.scss\"",
+    "lint-sass-fix": "yarn stylelint \"**/*.scss\" --fix",
     "test": "yarn lint && yarn test-unit",
     "test-ci": "yarn test && yarn test-cypress",
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
@@ -44,8 +44,7 @@
     "start-test-server-and-a11y-test": "cross-env WAIT_ON_TIMEOUT=600000 start-server-and-test start-test-server http-get://localhost:9999 test-a11y",
     "yo-doc": "yo ./generator-eui/app/documentation.js",
     "yo-changelog": "yo ./generator-eui/changelog/index.js",
-    "release": "node ./scripts/release.js",
-    "postinstall": "node ./scripts/postinstall.js"
+    "release": "node ./scripts/release.js"
   },
   "repository": {
     "type": "git",
@@ -54,7 +53,6 @@
   "resolutions": {
     "**/prismjs": "1.27.0",
     "**/trim": "0.0.3",
-    "**/node-sass": "^6.0.1",
     "**/react": "^17.0.0",
     "**/known-css-properties": "0.24.0"
   },
@@ -117,7 +115,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^50.1.0",
+    "@elastic/charts": "^51.1.1",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.10.0",
@@ -202,22 +200,20 @@
     "glob": "^7.1.6",
     "html-format": "^1.0.1",
     "html-webpack-plugin": "^5.5.0",
+    "inquirer": "^9.1.4",
     "jest": "^24.1.0",
     "jest-cli": "^24.1.0",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
-    "node-sass": "^6.0.1",
-    "nodegit": "^0.28.0-alpha.10",
     "path": "^0.12.7",
     "pegjs": "^0.10.0",
+    "postcss": "^8.4.19",
     "postcss-cli": "^7.1.2",
     "postcss-inline-svg": "^4.1.0",
     "postcss-loader": "^7.0.1",
     "pre-commit": "^1.2.2",
     "prettier": "^2.1.2",
-    "prettier-stylelint": "^0.4.2",
     "process": "^0.11.10",
-    "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
     "puppeteer": "^5.5.0",
     "raw-loader": "^4.0.1",
@@ -235,14 +231,14 @@
     "redux-thunk": "^2.3.0",
     "resolve": "^1.17.0",
     "rimraf": "^3.0.2",
-    "sass-extract": "^2.1.0",
-    "sass-lint": "^1.13.1",
-    "sass-lint-auto-fix": "^0.21.2",
-    "sass-loader": "^13.0.2",
-    "sass-vars-to-js-loader": "^2.1.1",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
     "style-loader": "^3.3.1",
+    "stylelint": "^14.15.0",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-standard-scss": "^6.1.0",
     "terser-webpack-plugin": "^5.3.5",
     "typescript": "4.5.3",
     "uglifyjs-webpack-plugin": "^2.2.0",
@@ -272,7 +268,6 @@
     "lib",
     "licenses",
     "optimize",
-    "scripts/postinstall.js",
     "src/**/*.scss",
     "test-env",
     "eui.d.ts",

package/src/components/basic_table/_basic_table.scss

@@ -1,5 +1,4 @@
 .euiBasicTable {
-
   &-loading {
     position: relative;
 
@@ -7,7 +6,7 @@
       overflow: hidden;
     }
 
-    tbody:before {
+    tbody::before {
       position: absolute;
       content: '';
       width: 100%;
@@ -16,11 +15,9 @@
       animation: euiBasicTableLoading 1000ms linear;
       animation-iteration-count: infinite;
     }
-
   }
 }
 
-
 @keyframes euiBasicTableLoading {
   from {
     left: 0;

package/src/components/button/button_empty/_button_empty.scss

@@ -7,9 +7,8 @@
   @include euiButton;
   border-radius: $euiBorderRadius;
 
-  // sass-lint:disable-block no-important
-  transform: none !important; /* 1 */
-  animation: none !important; /* 1 */
+  transform: none !important; /* 1 */ // stylelint-disable-line declaration-no-important
+  animation: none !important; /* 1 */ // stylelint-disable-line declaration-no-important
   transition-timing-function: ease-in; /* 2 */
   transition-duration: $euiAnimSpeedFast; /* 2 */
 
@@ -43,7 +42,6 @@
   }
 }
 
-
 .euiButtonEmpty--flushLeft,
 .euiButtonEmpty--flushRight,
 .euiButtonEmpty--flushBoth {

package/src/components/button/button_group/_button_group.scss

@@ -29,7 +29,7 @@
 
 .euiButtonGroup--compressed {
   .euiButtonGroup__buttons {
-    box-shadow: none !important; // sass-lint:disable-line no-important
+    box-shadow: none !important; // stylelint-disable-line declaration-no-important
     border-radius: $euiFormControlCompressedBorderRadius;
     background-color: $euiFormBackgroundColor;
     height: $euiFormControlCompressedHeight;

package/src/components/button/button_group/_button_group_button.scss

@@ -1,14 +1,13 @@
 // This file has lots of modifiers and is somewhat nesty by nature
-// sass-lint:disable nesting-depth
+// stylelint-disable max-nesting-depth
 
 .euiButtonGroupButton {
   @include euiButtonBase;
   @include euiFont;
   @include euiFontSize;
 
-  // sass-lint:disable-block indentation
   transition: background-color $euiAnimSpeedNormal ease-in-out,
-              color $euiAnimSpeedNormal ease-in-out;
+              color $euiAnimSpeedNormal ease-in-out; // stylelint-disable-line indentation
 
   // Allow button to shrink and truncate
   min-width: 0;
@@ -58,7 +57,7 @@
 .euiButtonGroup--medium,
 .euiButtonGroup--small {
   .euiButtonGroupButton {
-    border-radius: 0 !important; // sass-lint:disable-line no-important
+    border-radius: 0 !important; // stylelint-disable-line declaration-no-important
     font-weight: $euiButtonFontWeight;
 
     &:focus,

package/src/components/button/button_icon/_button_icon.scss

@@ -1,6 +1,3 @@
-// This file has lots of modifiers and is somewhat nesty by nature
-// sass-lint:disable nesting-depth
-
 .euiButtonIcon {
   @include euiButton;
 

package/src/components/collapsible_nav/_collapsible_nav.scss

@@ -1,5 +1,5 @@
 // Extends <EuiFlyout>
 
 .euiCollapsibleNav:not([class*='push']) {
-  z-index: $euiZNavigation !important; // sass-lint:disable-line no-important
+  z-index: $euiZNavigation !important; // stylelint-disable-line declaration-no-important
 }

package/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss

@@ -22,7 +22,7 @@
   // Forcing better contrast of focus state on EuiAccordion toggle icon
   .euiCollapsibleNavGroup__heading:focus .euiAccordion__iconWrapper {
     color: $euiCollapsibleNavGroupDarkHighContrastColor;
-    animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; // sass-lint:disable-line no-important
+    animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; // stylelint-disable-line declaration-no-important
   }
 
   .euiCollapsibleNavGroup__title {

package/src/components/color_picker/_color_picker.scss

@@ -37,11 +37,11 @@
 
 .euiColorPicker__popoverPanel--pickerOnly {
   // Override of EuiPanel padding
-  // sass-lint:disable no-important
+  // stylelint-disable-next-line declaration-no-important
   padding-bottom: 0 !important;
 }
 
-// sass-lint:disable no-important
+// stylelint-disable declaration-no-important
 .euiColorPicker__input--inGroup {
   height: $euiFormControlLayoutGroupInputHeight !important;
   box-shadow: none !important;
@@ -52,6 +52,7 @@
     border-radius: 0;
   }
 }
+// stylelint-enable declaration-no-important
 
 .euiColorPicker__alphaRange {
   .euiRangeInput {

package/src/components/color_picker/_hue.scss

@@ -1,6 +1,6 @@
 // This wraps the range. It is needed because there is no way to do a linear gradient in ie11 for the track
 .euiHue {
-  // sass-lint:disable-block no-color-literals
+  // stylelint-disable color-no-hex
   background: linear-gradient(to right,
     #FF3232 0%,
     #FFF130 20%,
@@ -9,14 +9,15 @@
     #282CFF 71%,
     #FF28FB 88%,
     #FF0094 100%
-   );
+  );
+  // stylelint-enable color-no-hex
   height: $euiSizeL;
   margin: $euiSizeXS 0;
   position: relative;
 
   // To make our fake range skinny, we add some pseudo borders to fake the height of the gradient
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: '';
     left: 0;
     position: absolute;
@@ -25,7 +26,7 @@
     width: 100%;
   }
 
-  &:after {
+  &::after {
     bottom: 0;
   }
 }
@@ -45,11 +46,10 @@
   background: transparent;
   z-index: 2; // Needed to place the thumb above the :after pseudo border from .euiRange
 
-
   // Resets for the range
 
   // Disable linter for these very unique vendor controls
-  // sass-lint:disable-block no-vendor-prefixes
+  // stylelint-disable property-no-vendor-prefix, selector-no-vendor-prefix
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
     margin-top: 0;

package/src/components/color_picker/_saturation.scss

@@ -34,7 +34,7 @@
     margin-left: $euiColorPickerIndicatorSize * -.5;
     border: 1px solid $euiColorDarkestShade;
 
-    &:before {
+    &::before {
       content: '';
       position: absolute;
       top: 0;

package/src/components/color_picker/color_palette_display/_mixins.scss

@@ -8,7 +8,7 @@
 
   position: relative;
 
-  &:after {
+  &::after {
     position: absolute;
     top: 0;
     left: 0;