@elastic/eui 97.1.0 → 97.3.0-borealis.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "97.1.0",
+  "version": "97.3.0-borealis.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -16,8 +16,9 @@
   ],
   "scripts": {
     "start": "cross-env BABEL_MODULES=false webpack serve --config=src-docs/webpack.config.js",
+    "build:workspaces": "yarn workspaces foreach -Rti --from @elastic/eui-theme-common run build && yarn workspaces foreach -Rti --from @elastic/eui --exclude @elastic/eui --exclude @elastic/eui-theme-common run build",
     "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-eui.js && yarn compile-scss",
+    "build": "node ./scripts/compile-i18n-strings.js && 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",
@@ -30,7 +31,7 @@
     "test": "yarn lint && yarn test-unit",
     "test-ci": "yarn test && yarn test-cypress",
     "test-unit": "node ./scripts/test-unit",
-    "test-staged": "yarn lint && node scripts/test-staged.js",
+    "test-staged": "yarn build:workspaces && yarn lint && node scripts/test-staged.js",
     "test-cypress": "node ./scripts/test-cypress",
     "test-cypress-dev": "yarn test-cypress --dev",
     "test-cypress-a11y": "yarn test-cypress --a11y",
@@ -103,6 +104,8 @@
     "@cypress/webpack-dev-server": "^1.7.0",
     "@elastic/charts": "^64.1.0",
     "@elastic/datemath": "^5.0.3",
+    "@elastic/eui-theme-borealis": "0.0.1",
+    "@elastic/eui-theme-common": "0.0.1",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.0",
@@ -253,6 +256,8 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
+    "@elastic/eui-theme-borealis": "0.0.1",
+    "@elastic/eui-theme-common": "0.0.1",
     "@emotion/css": "11.x",
     "@emotion/react": "11.x",
     "@types/react": "^16.9 || ^17.0 || ^18.0",

package/src/global_styling/functions/_index.scss

@@ -1,5 +1 @@
-// Math needs to be first in the load order
-@import 'math';
-
-// Using math, we have functions to manipulate contrast / luminosity for accessibility
-@import 'colors';
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index';

package/src/global_styling/index.scss

@@ -1,18 +1,3 @@
 // Core
 
-// Functions need to be first, since we use them in our variables and mixin definitions
-@import 'functions/index';
-
-// Variables come next, and are used in some mixins
-@import 'variables/index';
-
-// Mixins provide generic code expansion through helpers
-@import 'mixins/index';
-
-// Utility classes provide one-off selectors for common css problems
-@import 'utility/index';
-
-// The reset file has moved to global_styles.tsx
-
-// Customization of the React Date Picker
-@import 'react_date_picker/index';
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';

package/src/global_styling/variables/_animations.scss

@@ -1,13 +1,6 @@
 // Animations
 
-$euiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default;
-$euiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default;
-
-$euiAnimSpeedExtraFast: 90ms !default;
-$euiAnimSpeedFast: 150ms !default;
-$euiAnimSpeedNormal: 250ms !default;
-$euiAnimSpeedSlow: 350ms !default;
-$euiAnimSpeedExtraSlow: 500ms !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/animations'
 
 // Keyframe animation declarations can be found in
 // utility/animations.scss

package/src/global_styling/variables/_borders.scss

@@ -1,11 +1,3 @@
 // Borders
 
-$euiBorderWidthThin: 1px !default;
-$euiBorderWidthThick: 2px !default;
-
-$euiBorderColor: $euiColorLightShade !default;
-$euiBorderRadius: $euiSizeS * .75 !default;
-$euiBorderRadiusSmall: $euiSizeS * .5 !default;
-$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default;
-$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default;
-$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/borders'

package/src/global_styling/variables/_buttons.scss

@@ -1,18 +1 @@
-$euiButtonHeight: $euiSizeXXL !default;
-$euiButtonHeightSmall: $euiSizeXL !default;
-$euiButtonHeightXSmall: $euiSizeL !default;
-
-// Modifier naming and colors.
-$euiButtonTypes: (
-  primary: $euiColorPrimary,
-  accent: $euiColorAccent,
-  success: $euiColorSuccess,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
-  text: $euiColorDarkShade, // Reserved for special use cases
-) !default;
-
-// TODO: Remove this once elastic-charts no longer uses this variable
-// @see https://github.com/elastic/elastic-charts/pull/2528
-$euiButtonColorDisabledText: $euiColorDisabledText;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/buttons'

package/src/global_styling/variables/_colors_vis.scss

@@ -1,72 +1,3 @@
 // Visualization colors
-// stylelint-disable color-no-hex
 
-// Maps allow for easier JSON usage
-// Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file
-// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function
-$euiPaletteColorBlind: (
-  euiColorVis0: (
-    graphic: #54B399,
-    behindText: #6DCCB1,
-  ),
-  euiColorVis1: (
-    graphic: #6092C0,
-    behindText: #79AAD9,
-  ),
-  euiColorVis2: (
-    graphic: #D36086,
-    behindText: #EE789D,
-  ),
-  euiColorVis3: (
-    graphic: #9170B8,
-    behindText: #A987D1,
-  ),
-  euiColorVis4: (
-    graphic: #CA8EAE,
-    behindText: #E4A6C7,
-  ),
-  euiColorVis5: (
-    graphic: #D6BF57,
-    behindText: #F1D86F,
-  ),
-  euiColorVis6: (
-    graphic: #B9A888,
-    behindText: #D2C0A0,
-  ),
-  euiColorVis7: (
-    graphic: #DA8B45,
-    behindText: #F5A35C,
-  ),
-  euiColorVis8: (
-    graphic: #AA6556,
-    behindText: #C47C6C,
-  ),
-  euiColorVis9: (
-    graphic: #E7664C,
-    behindText: #FF7E62,
-  )
-) !default;
-
-$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind);
-
-$euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default;
-$euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default;
-$euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default;
-$euiColorVis3: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'graphic') !default;
-$euiColorVis4: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'graphic') !default;
-$euiColorVis5: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'graphic') !default;
-$euiColorVis6: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'graphic') !default;
-$euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic') !default;
-$euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default;
-$euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default;
-
-$euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default;
-$euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default;
-$euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default;
-$euiColorVis3_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'behindText') !default;
-$euiColorVis4_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'behindText') !default;
-$euiColorVis5_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'behindText') !default;
-$euiColorVis6_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'behindText') !default;
-$euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'behindText') !default;
-$euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default;
-$euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/colors_vis'

package/src/global_styling/variables/_font_weight.scss

@@ -1,10 +1,4 @@
 // Separated out to its own file for easy import into docs
 
 // Font weights
-$euiFontWeightLight:        300 !default;
-$euiFontWeightRegular:      400 !default;
-$euiFontWeightMedium:       500 !default;
-$euiFontWeightSemiBold:     600 !default;
-$euiFontWeightBold:         700 !default;
-$euiCodeFontWeightRegular:  400 !default;
-$euiCodeFontWeightBold:     700 !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/font_weight'

package/src/global_styling/variables/_form.scss

@@ -1,21 +1,2 @@
-// Sizing
-$euiFormMaxWidth: $euiSizeXXL * 10 !default;
-$euiFormControlHeight: $euiSizeXXL !default;
-$euiFormControlCompressedHeight: $euiSizeXL !default;
-$euiFormControlPadding: $euiSizeM !default;
-$euiFormControlCompressedPadding: $euiSizeS !default;
-$euiFormControlBorderRadius: $euiBorderRadius !default;
-$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall !default;
-
-// Coloring
-$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default;
-$euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
-$euiFormBackgroundReadOnlyColor: $euiColorEmptyShade !default;
-$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default;
-$euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
-$euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
-$euiFormControlDisabledColor: $euiColorMediumShade !default;
-$euiFormControlBoxShadow: 0 0 transparent !default;
-$euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default;
-$euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default;
-$euiFormInputGroupBorder: none !default;
+// Form
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/form'

package/src/global_styling/variables/_responsive.scss

@@ -1,9 +1 @@
-$euiBreakpoints: (
-  'xs': 0,
-  's':  575px,
-  'm':  768px,
-  'l':  992px,
-  'xl': 1200px
-) !default;
-
-$euiBreakpointKeys: map-keys($euiBreakpoints);
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/responsive'

package/src/global_styling/variables/_shadows.scss

@@ -1,2 +1,2 @@
 // Shadows
-$euiShadowColor: $euiColorInk !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/shadows'

package/src/global_styling/variables/_size.scss

@@ -1,15 +1 @@
-$euiSize:     16px !default;
-
-$euiSizeXS:   $euiSize * .25 !default;
-$euiSizeS:    $euiSize * .5 !default;
-$euiSizeM:    $euiSize * .75 !default;
-$euiSizeL:    $euiSize * 1.5 !default;
-$euiSizeXL:   $euiSize * 2 !default;
-$euiSizeXXL:  $euiSize * 2.5 !default;
-
-$euiButtonMinWidth: $euiSize * 7 !default;
-
-$euiScrollBar: $euiSize !default;
-// Corner sizes are used as an inset border and therefore a smaller corner size means a larger thumb
-$euiScrollBarCorner: $euiSizeXS !default;
-$euiScrollBarCornerThin: $euiSizeS * .75 !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/size'

package/src/global_styling/variables/_states.scss

@@ -1,14 +1 @@
-// Colors
-$euiFocusRingColor: rgba($euiColorPrimary, .3) !default;
-$euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0) !default;
-$euiFocusRingAnimStartSize: 6px !default;
-$euiFocusRingAnimStartSizeLarge: 10px !default;
-
-// Sizing
-$euiFocusRingSizeLarge: $euiSizeXS !default;
-$euiFocusRingSize: $euiFocusRingSizeLarge * .75 !default;
-
-// Transparency
-$euiFocusTransparency: lightOrDarkTheme(.1, .2) !default;
-$euiFocusTransparencyPercent: lightOrDarkTheme(90%, 80%) !default;
-$euiFocusBackgroundColor: tintOrShade($euiColorPrimary, $euiFocusTransparencyPercent, $euiFocusTransparencyPercent) !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/states'

package/src/global_styling/variables/_typography.scss

@@ -1,75 +1 @@
-// Families
-$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default;
-$euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default;
-
-// Careful using ligatures. Code editors like ACE will often error because of width calculations
-$euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;
-
-// Font sizes -- scale is loosely based on Major Third (1.250)
-$euiTextScale:      2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default;
-
-$euiFontSize:       $euiSize !default; // 5th position in scale
-$euiFontSizeXS:     $euiFontSize * nth($euiTextScale, 7) !default; // 12px
-$euiFontSizeS:      $euiFontSize * nth($euiTextScale, 6) !default; // 14px
-$euiFontSizeM:      $euiFontSize * nth($euiTextScale, 4) !default; // 18px
-$euiFontSizeL:      $euiFontSize * nth($euiTextScale, 3) !default; // 20px
-$euiFontSizeXL:     $euiFontSize * nth($euiTextScale, 2) !default; // 28px
-$euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1) !default; // 36px
-
-// Line height
-$euiLineHeight:     1.5 !default;
-$euiBodyLineHeight: 1 !default;
-
-// Normally functions are imported before variables in `_index.scss` files
-// But because they need to consume some typography variables they need to live here
-@function convertToRem($size) {
-  @return #{$size / $euiFontSize}rem;
-}
-
-// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
-// EX: A proper line-height for text is 1.5 times the font-size.
-//     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
-//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
-@function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($euiFontSize / 2) * $multiplier);
-}
-
-// Titles map
-// Lists all the properties per EuiTitle size that then gets looped through to create the selectors.
-// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves
-$euiTitles: (
-  'xxxs': (
-    'font-size': $euiFontSizeXS,
-    'line-height': lineHeightFromBaseline(3),
-    'font-weight': $euiFontWeightBold,
-  ),
-  'xxs': (
-    'font-size': $euiFontSizeS,
-    'line-height': lineHeightFromBaseline(3),
-    'font-weight': $euiFontWeightBold,
-  ),
-  'xs': (
-    'font-size': $euiFontSize,
-    'line-height': lineHeightFromBaseline(3),
-    'font-weight': $euiFontWeightSemiBold,
-    'letter-spacing': -.02em,
-  ),
-  's': (
-    'font-size': $euiFontSizeL,
-    'line-height': lineHeightFromBaseline(4),
-    'font-weight': $euiFontWeightMedium,
-    'letter-spacing': -.025em,
-  ),
-  'm': (
-    'font-size': $euiFontSizeXL,
-    'line-height': lineHeightFromBaseline(5),
-    'font-weight': $euiFontWeightLight,
-    'letter-spacing': -.04em,
-  ),
-  'l': (
-    'font-size': $euiFontSizeXXL,
-    'line-height': lineHeightFromBaseline(6),
-    'font-weight': $euiFontWeightLight,
-    'letter-spacing': -.03em,
-  ),
-) !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/typography'

package/src/global_styling/variables/_z_index.scss

@@ -1,34 +1,2 @@
 // Z-Index
-
-// Remember that z-index is relative to parent and based on the stacking context.
-// z-indexes only compete against other z-indexes when they exist as children of
-// that shared parent.
-
-// That means a popover with a settings of 2, will still show above a modal
-// with a setting of 100, if it is within that modal and not besides it.
-
-// Generally that means it's a good idea to consider things added to this file
-// as competitive only as siblings.
-
-// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-
-$euiZLevel0: 0;
-$euiZLevel1: 1000;
-$euiZLevel2: 2000;
-$euiZLevel3: 3000;
-$euiZLevel4: 4000;
-$euiZLevel5: 5000;
-$euiZLevel6: 6000;
-$euiZLevel7: 7000;
-$euiZLevel8: 8000;
-$euiZLevel9: 9000;
-
-$euiZToastList: $euiZLevel9;
-$euiZModal: $euiZLevel8;
-$euiZMask: $euiZLevel6;
-$euiZNavigation: $euiZLevel6;
-$euiZContentMenu: $euiZLevel2;
-$euiZHeader: $euiZLevel1;
-$euiZFlyout: $euiZHeader;
-$euiZMaskBelowHeader: $euiZHeader;
-$euiZContent: $euiZLevel0;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/z_index'

package/src/themes/amsterdam/_colors_dark.scss

@@ -1,22 +1,24 @@
 // stylelint-disable color-no-hex
 
 // This extra import allows any variables that are created via functions to work when loaded into JS
-@import '../../global_styling/functions/index';
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index';
 
-// These colors stay the same no matter the theme
+// Constants
 $euiColorGhost: #FFF !default;
 $euiColorInk: #000 !default;
 
-// Core
+$euiColorPlainLight: $euiColorGhost;
+$euiColorPlainDark: $euiColorInk;
+
+// Brand
 $euiColorPrimary: #36A2EF !default;
 $euiColorAccent: #F68FBE !default;
-
-// Status
+$euiColorAccentSecondary: #7DDED8 !default;
 $euiColorSuccess: #7DDED8 !default;
 $euiColorWarning: #F3D371 !default;
 $euiColorDanger: #F86B63 !default;
 
-// Grays
+// Shades
 $euiColorEmptyShade: #1D1E24 !default;
 $euiColorLightestShade: #25262E !default;
 $euiColorLightShade: #343741 !default;
@@ -29,21 +31,91 @@ $euiColorFullShade: #FFF !default;
 $euiPageBackgroundColor: shade($euiColorLightestShade, 45%) !default;
 $euiColorHighlight: #2E2D25 !default;
 
-// Variations from core
+$euiColorBackgroundBasePrimary: shade($euiColorPrimary, 80%) !default;
+$euiColorBackgroundBaseAccent: shade($euiColorAccent, 80%) !default;
+$euiColorBackgroundBaseAccentSecondary: shade($euiColorAccentSecondary, 80%) !default;
+$euiColorBackgroundBaseSuccess: shade($euiColorSuccess, 80%) !default;
+$euiColorBackgroundBaseWarning: shade($euiColorWarning, 80%) !default;
+$euiColorBackgroundBaseDanger: shade($euiColorDanger, 80%) !default;
+$euiColorBackgroundBaseSubdued: shade($euiPageBackgroundColor, 80%) !default;
+$euiColorBackgroundBaseDisabled: transparentize($euiColorLightShade, 0.15)!default;
+$euiColorBackgroundBasePlain: $euiColorEmptyShade !default;
+$euiColorBackgroundBaseFormsPrepend: shade($euiColorLightShade, 0.15) !default;
+$euiColorBackgroundBaseFormsControlDisabled: $euiColorLightShade !default;
+
+$euiColorBackgroundBaseInteractiveHover: transparentize($euiColorLightShade, 0.2) !default;
+$euiColorBackgroundBaseInteractiveSelect: shade($euiColorPrimary, 0.7) !default;
+$euiColorBackgroundBaseInteractiveOverlay: transparentize($euiColorInk, 0.5) !default;
+$euiColorBackgroundBaseSkeletonEdge: shade($euiColorLightShade, 0.12) !default;
+$euiColorBackgroundBaseSkeletonMiddle: shade($euiColorLightShade, 0.24) !default;
+
+$euiColorBackgroundLightPrimary: shade($euiColorPrimary, 0.7) !default;
+$euiColorBackgroundLightAccent: shade($euiColorAccent, 0.7) !default;
+$euiColorBackgroundLightAccentSecondary: shade($euiColorAccentSecondary, 0.7)  !default;
+$euiColorBackgroundLightSuccess: shade($euiColorSuccess, 0.7)  !default;
+$euiColorBackgroundLightWarning: shade($euiColorWarning, 0.7)  !default;
+$euiColorBackgroundLightDanger: shade($euiColorDanger, 0.7)  !default;
+$euiColorBackgroundLightText: shade($euiColorLightShade, 0.2) !default;
+
+$euiColorBackgroundFilledPrimary: $euiColorPrimary !default;
+$euiColorBackgroundFilledAccent: $euiColorAccent !default;
+$euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary !default;
+$euiColorBackgroundFilledSuccess: $euiColorSuccess !default;
+$euiColorBackgroundFilledWarning: $euiColorWarning !default;
+$euiColorBackgroundFilledDanger: $euiColorDanger !default;
+$euiColorBackgroundFilledText:  #DFE5EF !default;
+
+// Texts
 $euiTextColor: #DFE5EF !default;
 $euiTitleColor: $euiTextColor !default;
 $euiTextSubduedColor: makeHighContrastColor($euiColorMediumShade) !default;
 $euiColorDisabled: #515761 !default;
 
-// Contrasty text variants
+$euiColorTextParagraph: $euiTextColor !default;
+$euiColorTextHeading: $euiTitleColor !default;
+$euiColorTextSubdued: $euiTextSubduedColor !default;
+$euiColorTextDisabled: #515761 !default;
+$euiColorTextInverse: $euiColorGhost !default;
+
+// Brand texts
 $euiColorPrimaryText: makeHighContrastColor($euiColorPrimary) !default;
 $euiColorSuccessText: makeHighContrastColor($euiColorSuccess) !default;
 $euiColorAccentText: makeHighContrastColor($euiColorAccent) !default;
 $euiColorWarningText: makeHighContrastColor($euiColorWarning) !default;
 $euiColorDangerText: makeHighContrastColor($euiColorDanger) !default;
 $euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled) !default;
+
+$euiColorTextPrimary: $euiColorPrimaryText !default;
+$euiColorTextAccent: $euiColorAccentText !default;
+$euiColorTextAccentSecondary: $euiColorSuccessText !default;
+$euiColorTextSuccess: $euiColorSuccessText !default;
+$euiColorTextWarning: $euiColorWarningText !default;
+$euiColorTextDanger: $euiColorDangerText !default;
+
 $euiLinkColor: $euiColorPrimaryText !default;
 
+// Borders
+$euiColorBorderBasePrimary: shade($euiColorPrimary, 0.6);
+$euiColorBorderBaseAccent: shade($euiColorAccent, 0.6);
+$euiColorBorderBaseAccentSecondary: shade($euiColorAccentSecondary, 0.6);
+$euiColorBorderBaseSuccess: shade($euiColorSuccess, 0.6);
+$euiColorBorderBaseWarning: shade($euiColorWarning, 0.6);
+$euiColorBorderBaseDanger: shade($euiColorDanger, 0.6);
+
+$euiColorBorderBasePlain: $euiColorLightShade;
+$euiColorBorderBaseSubdued: $euiColorLightShade;
+$euiColorBorderBaseDisabled: transparentize($euiColorGhost, 0.1);
+$euiColorBorderBaseFloating: $euiColorLightShade;
+$euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1);
+$euiColorBorderBaseFormsControl: tint($euiColorLightestShade, 0.31);
+
+$euiColorBorderStrongPrimary: $euiColorBorderBasePrimary;
+$euiColorBorderStrongAccent: $euiColorBorderBaseAccent;
+$euiColorBorderStrongAccentSecondary: $euiColorBorderBaseAccentSecondary;
+$euiColorBorderStrongSuccess: $euiColorBorderBaseSuccess;
+$euiColorBorderStrongWarning: $euiColorBorderBaseWarning;
+$euiColorBorderStrongDanger: $euiColorBorderBaseDanger;
+
 // Charts
 $euiColorChartLines: $euiColorLightShade !default;
 $euiColorChartBand: tint($euiColorLightestShade, 2.5%) !default;

package/src/themes/amsterdam/_colors_light.scss

@@ -1,22 +1,24 @@
 // stylelint-disable color-no-hex
 
 // This extra import allows any variables that are created via functions to work when loaded into JS
-@import '../../global_styling/functions/index';
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index';
 
-// These colors stay the same no matter the theme
+// Constants
 $euiColorGhost: #FFF !default;
 $euiColorInk: #000 !default;
 
-// Core
+$euiColorPlainLight: $euiColorGhost;
+$euiColorPlainDark: $euiColorInk;
+
+// Brand
 $euiColorPrimary: #07C !default;
 $euiColorAccent: #F04E98 !default;
-
-// Status
+$euiColorAccentSecondary: #00BFB3 !default;
 $euiColorSuccess: #00BFB3 !default;
 $euiColorWarning: #FEC514 !default;
 $euiColorDanger: #BD271E !default;
 
-// Grays
+// Shades
 $euiColorEmptyShade: #FFF !default;
 $euiColorLightestShade: #F5F7FA !default;
 $euiColorLightShade: #D3DAE6 !default;
@@ -29,21 +31,91 @@ $euiColorFullShade: #000 !default;
 $euiPageBackgroundColor: tint($euiColorLightestShade, 50%) !default;
 $euiColorHighlight: tint($euiColorWarning, 90%) !default;
 
-// Every color below must be based mathematically on the set above and in a particular order.
+$euiColorBackgroundBasePrimary: tint($euiColorPrimary, 90%) !default;
+$euiColorBackgroundBaseAccent: tint($euiColorAccent, 90%) !default;
+$euiColorBackgroundBaseAccentSecondary: tint($euiColorAccentSecondary, 90%) !default;
+$euiColorBackgroundBaseSuccess: tint($euiColorSuccess, 90%) !default;
+$euiColorBackgroundBaseWarning: tint($euiColorWarning, 90%) !default;
+$euiColorBackgroundBaseDanger: tint($euiColorDanger, 90%) !default;
+$euiColorBackgroundBaseSubdued: $euiPageBackgroundColor !default;
+$euiColorBackgroundBaseDisabled: transparentize($euiColorLightShade, 0.15) !default;
+$euiColorBackgroundBasePlain: $euiColorEmptyShade !default;
+$euiColorBackgroundBaseFormsPrepend: tint($euiColorLightShade, 0.5) !default;
+$euiColorBackgroundBaseFormsControlDisabled: $euiColorLightShade !default;
+
+$euiColorBackgroundBaseInteractiveHover: transparentize($euiColorLightShade, 0.2) !default;
+$euiColorBackgroundBaseInteractiveSelect: tint($euiColorPrimary, 0.96) !default;
+$euiColorBackgroundBaseInteractiveOverlay: transparentize($euiColorInk, 0.5) !default;
+$euiColorBackgroundBaseSkeletonEdge: tint($euiColorLightShade, 0.65) !default;
+$euiColorBackgroundBaseSkeletonMiddle: tint($euiColorLightShade, 0.8) !default;
+
+$euiColorBackgroundLightPrimary: tint($euiColorPrimary, 0.8) !default;
+$euiColorBackgroundLightAccent: tint($euiColorAccent, 0.8) !default;
+$euiColorBackgroundLightAccentSecondary: tint($euiColorAccentSecondary, 0.8)  !default;
+$euiColorBackgroundLightSuccess: tint($euiColorSuccess, 0.8)  !default;
+$euiColorBackgroundLightWarning: tint($euiColorWarning, 0.8)  !default;
+$euiColorBackgroundLightDanger: tint($euiColorDanger, 0.8)  !default;
+$euiColorBackgroundLightText: tint($euiColorLightShade, 0.5) !default;
+
+$euiColorBackgroundFilledPrimary: $euiColorPrimary !default;
+$euiColorBackgroundFilledAccent: tint($euiColorAccent, 0.3) !default;
+$euiColorBackgroundFilledAccentSecondary: tint($euiColorAccentSecondary, 0.3) !default;
+$euiColorBackgroundFilledSuccess: tint($euiColorSuccess, 0.3) !default;
+$euiColorBackgroundFilledWarning: $euiColorWarning !default;
+$euiColorBackgroundFilledDanger: $euiColorDanger !default;
+$euiColorBackgroundFilledText: $euiColorDarkShade !default;
+
+// Texts
 $euiTextColor: $euiColorDarkestShade !default;
 $euiTitleColor: shade($euiTextColor, 50%) !default;
 $euiTextSubduedColor: $euiColorDarkShade !default;
 $euiColorDisabled: #ABB4C4 !default;
 
-// Contrasty text variants
+$euiColorTextParagraph: $euiTextColor !default;
+$euiColorTextHeading: $euiTitleColor !default;
+$euiColorTextSubdued: $euiTextSubduedColor !default;
+$euiColorTextDisabled: #A2ABBA !default;
+$euiColorTextInverse: $euiColorGhost !default;
+
+// Brand texts
 $euiColorPrimaryText: makeHighContrastColor($euiColorPrimary) !default;
 $euiColorSuccessText: makeHighContrastColor($euiColorSuccess) !default;
 $euiColorAccentText: makeHighContrastColor($euiColorAccent) !default;
 $euiColorWarningText: makeHighContrastColor($euiColorWarning) !default;
 $euiColorDangerText: makeHighContrastColor($euiColorDanger) !default;
 $euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled) !default;
+
+$euiColorTextPrimary: $euiColorPrimaryText !default;
+$euiColorTextAccent: $euiColorAccentText !default;
+$euiColorTextAccentSecondary: $euiColorSuccessText !default;
+$euiColorTextSuccess: $euiColorSuccessText !default;
+$euiColorTextWarning: $euiColorWarningText !default;
+$euiColorTextDanger: $euiColorDangerText !default;
+
 $euiLinkColor: $euiColorPrimaryText !default;
 
+// Borders
+$euiColorBorderBasePrimary: tint($euiColorPrimary, 0.6);
+$euiColorBorderBaseAccent: tint($euiColorAccent, 0.6);
+$euiColorBorderBaseAccentSecondary: tint($euiColorAccentSecondary, 0.6);
+$euiColorBorderBaseSuccess: tint($euiColorSuccess, 0.6);
+$euiColorBorderBaseWarning: tint($euiColorWarning, 0.6);
+$euiColorBorderBaseDanger: tint($euiColorDanger, 0.6);
+
+$euiColorBorderBasePlain: $euiColorLightShade;
+$euiColorBorderBaseSubdued: $euiColorLightShade;
+$euiColorBorderBaseDisabled: transparentize(darken($euiColorLightShade, 40%), 0.1);
+$euiColorBorderBaseFloating: 'transparent';
+$euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1);
+$euiColorBorderBaseFormsControl: shade($euiColorLightestShade, 0.4);
+
+$euiColorBorderStrongPrimary: $euiColorBorderBasePrimary;
+$euiColorBorderStrongAccent: $euiColorBorderBaseAccent;
+$euiColorBorderStrongAccentSecondary: $euiColorBorderBaseAccentSecondary;
+$euiColorBorderStrongSuccess: $euiColorBorderBaseSuccess;
+$euiColorBorderStrongWarning: $euiColorBorderBaseWarning;
+$euiColorBorderStrongDanger: $euiColorBorderBaseDanger;
+
 // Charts
 $euiColorChartLines: shade($euiColorLightestShade, 3%) !default;
 $euiColorChartBand: $euiColorLightestShade !default;