diff --git a/packages/eui/src/themes/amsterdam/_colors_dark.scss b/packages/eui/src/themes/amsterdam/_colors_dark.scss index d8f20e0f6bc..521a77b7f59 100644 --- a/packages/eui/src/themes/amsterdam/_colors_dark.scss +++ b/packages/eui/src/themes/amsterdam/_colors_dark.scss @@ -120,14 +120,14 @@ $euiColorBorderBaseFloating: $euiColorLightShade !default; $euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1) !default; $euiColorBorderBaseFormsControl: tint($euiColorLightestShade, 0.31) !default; -$euiColorBorderStrongPrimary: $euiColorBorderBasePrimary !default; -$euiColorBorderStrongAccent: $euiColorBorderBaseAccent !default; -$euiColorBorderStrongAccentSecondary: $euiColorBorderBaseAccentSecondary !default; -$euiColorBorderStrongNeutral: $euiColorBorderBasePrimary !default; -$euiColorBorderStrongSuccess: $euiColorBorderBaseSuccess !default; -$euiColorBorderStrongWarning: $euiColorBorderBaseWarning !default; -$euiColorBorderStrongRisk: $euiColorBorderBaseWarning !default; -$euiColorBorderStrongDanger: $euiColorBorderBaseDanger !default; +$euiColorBorderStrongPrimary: $euiColorPrimary !default; +$euiColorBorderStrongAccent: $euiColorAccent !default; +$euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary !default; +$euiColorBorderStrongNeutral: $euiColorSeverityNeutral !default; +$euiColorBorderStrongSuccess: $euiColorSuccess !default; +$euiColorBorderStrongWarning: $euiColorWarning !default; +$euiColorBorderStrongRisk: tint($euiColorSeverityRisk, 0.2) !default; +$euiColorBorderStrongDanger: $euiColorDanger !default; // Charts $euiColorChartLines: $euiColorLightShade !default; diff --git a/packages/eui/src/themes/amsterdam/_colors_light.scss b/packages/eui/src/themes/amsterdam/_colors_light.scss index 0699673e07f..df2ea79c3c7 100644 --- a/packages/eui/src/themes/amsterdam/_colors_light.scss +++ b/packages/eui/src/themes/amsterdam/_colors_light.scss @@ -120,14 +120,14 @@ $euiColorBorderBaseFloating: 'transparent' !default; $euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1) !default; $euiColorBorderBaseFormsControl: shade($euiColorLightestShade, 0.4) !default; -$euiColorBorderStrongPrimary: $euiColorBorderBasePrimary !default; -$euiColorBorderStrongAccent: $euiColorBorderBaseAccent !default; -$euiColorBorderStrongAccentSecondary: $euiColorBorderBaseAccentSecondary !default; -$euiColorBorderStrongNeutral: $euiColorBorderBasePrimary !default; -$euiColorBorderStrongSuccess: $euiColorBorderBaseSuccess !default; -$euiColorBorderStrongWarning: $euiColorBorderBaseWarning !default; -$euiColorBorderStrongRisk: $euiColorBorderBaseWarning !default; -$euiColorBorderStrongDanger: $euiColorBorderBaseDanger !default; +$euiColorBorderStrongPrimary: $euiColorPrimary !default; +$euiColorBorderStrongAccent: $euiColorAccent !default; +$euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary !default; +$euiColorBorderStrongNeutral: shade($euiColorSeverityNeutral, 0.2) !default; +$euiColorBorderStrongSuccess: $euiColorSuccess !default; +$euiColorBorderStrongWarning: $euiColorWarning !default; +$euiColorBorderStrongRisk: $euiColorSeverityRisk !default; +$euiColorBorderStrongDanger: $euiColorDanger !default; // Charts $euiColorChartLines: shade($euiColorLightestShade, 3%) !default; diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts index 21777215c58..e3a3867be70 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts @@ -320,38 +320,17 @@ export const border_colors: _EuiThemeBorderColors = { ['colors.lightestShade'] ), - borderStrongPrimary: computed( - ([borderBasePrimary]) => borderBasePrimary, - ['colors.borderBasePrimary'] - ), - borderStrongAccent: computed( - ([borderBaseAccent]) => borderBaseAccent, - ['colors.borderBaseAccent'] - ), + borderStrongPrimary: computed(([primary]) => primary, ['colors.primary']), + borderStrongAccent: computed(([accent]) => accent, ['colors.accent']), borderStrongAccentSecondary: computed( - ([borderBaseAccentSecondary]) => borderBaseAccentSecondary, - ['colors.borderBaseAccentSecondary'] - ), - borderStrongNeutral: computed( - ([borderBaseNeutral]) => borderBaseNeutral, - ['colors.borderBaseNeutral'] - ), - borderStrongSuccess: computed( - ([borderBaseSuccess]) => borderBaseSuccess, - ['colors.borderBaseSuccess'] - ), - borderStrongWarning: computed( - ([borderBaseWarning]) => borderBaseWarning, - ['colors.borderBaseWarning'] - ), - borderStrongRisk: computed( - ([borderBaseRisk]) => borderBaseRisk, - ['colors.borderBaseRisk'] - ), - borderStrongDanger: computed( - ([borderBaseDanger]) => borderBaseDanger, - ['colors.borderBaseDanger'] - ), + ([accentSecondary]) => accentSecondary, + ['colors.accentSecondary'] + ), + borderStrongNeutral: shade(severityColors.neutral, 0.2).toUpperCase(), + borderStrongSuccess: computed(([success]) => success, ['colors.success']), + borderStrongWarning: computed(([warning]) => warning, ['colors.warning']), + borderStrongRisk: severityColors.risk, + borderStrongDanger: computed(([danger]) => danger, ['colors.danger']), }; export const light_colors: _EuiThemeColorsMode = { @@ -560,38 +539,17 @@ export const dark_border_colors: _EuiThemeBorderColors = { ['colors.lightestShade'] ), - borderStrongPrimary: computed( - ([borderBasePrimary]) => borderBasePrimary, - ['colors.borderBasePrimary'] - ), - borderStrongAccent: computed( - ([borderBaseAccent]) => borderBaseAccent, - ['colors.borderBaseAccent'] - ), + borderStrongPrimary: computed(([primary]) => primary, ['colors.primary']), + borderStrongAccent: computed(([accent]) => accent, ['colors.accent']), borderStrongAccentSecondary: computed( - ([borderBaseAccentSecondary]) => borderBaseAccentSecondary, - ['colors.borderBaseAccentSecondary'] - ), - borderStrongNeutral: computed( - ([borderBaseNeutral]) => borderBaseNeutral, - ['colors.borderBaseNeutral'] - ), - borderStrongSuccess: computed( - ([borderBaseSuccess]) => borderBaseSuccess, - ['colors.borderBaseSuccess'] - ), - borderStrongWarning: computed( - ([borderBaseWarning]) => borderBaseWarning, - ['colors.borderBaseWarning'] - ), - borderStrongRisk: computed( - ([borderBaseRisk]) => borderBaseRisk, - ['colors.borderBaseRisk'] - ), - borderStrongDanger: computed( - ([borderBaseDanger]) => borderBaseDanger, - ['colors.borderBaseDanger'] - ), + ([accentSecondary]) => accentSecondary, + ['colors.accentSecondary'] + ), + borderStrongNeutral: severityColors.neutral, + borderStrongSuccess: computed(([success]) => success, ['colors.success']), + borderStrongWarning: computed(([warning]) => warning, ['colors.warning']), + borderStrongRisk: tint(severityColors.risk, 0.2).toUpperCase(), + borderStrongDanger: computed(([danger]) => danger, ['colors.danger']), }; export const dark_colors_ams: _EuiThemeColorsMode = { diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json index d81a4f03771..591a2d94c2c 100644 --- a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json +++ b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json @@ -416,12 +416,12 @@ "euiColorBorderBaseFloating": "transparent", "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255,0.1)", "euiColorBorderBaseFormsControl": "#69696f", - "euiColorBorderStrongPrimary": "#164160", - "euiColorBorderStrongAccent": "#62394c", - "euiColorBorderStrongAccentSecondary": "#325956", - "euiColorBorderStrongNeutral": "#4c535b", - "euiColorBorderStrongSuccess": "#325956", - "euiColorBorderStrongWarning": "#927f44", - "euiColorBorderStrongRisk": "#835329", - "euiColorBorderStrongDanger": "#632b28" + "euiColorBorderStrongPrimary": "#36A2EF", + "euiColorBorderStrongAccent": "#F68FBE", + "euiColorBorderStrongAccentSecondary": "#7DDED8", + "euiColorBorderStrongNeutral": "#B9CFE3", + "euiColorBorderStrongSuccess": "#7DDED8", + "euiColorBorderStrongWarning": "#F3D371", + "euiColorBorderStrongRisk": "#E1A26A", + "euiColorBorderStrongDanger": "#F86B63" } diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json index d838c4d5790..30c2caf063b 100644 --- a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json +++ b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json @@ -416,12 +416,12 @@ "euiColorBorderBaseFloating": "transparent", "euiColorBorderBaseFormsColorSwatch": "rgba(0,0,0,0.1)", "euiColorBorderBaseFormsControl": "#919296", - "euiColorBorderStrongPrimary": "#99c9eb", - "euiColorBorderStrongAccent": "#f9b8d6", - "euiColorBorderStrongAccentSecondary": "#99e5e1", - "euiColorBorderStrongNeutral": "#e5ecf4", - "euiColorBorderStrongSuccess": "#99e5e1", - "euiColorBorderStrongWarning": "#fedc72", - "euiColorBorderStrongRisk": "#e9b98f", - "euiColorBorderStrongDanger": "#e5a9a5" + "euiColorBorderStrongPrimary": "#0077CC", + "euiColorBorderStrongAccent": "#F04E98", + "euiColorBorderStrongAccentSecondary": "#00BFB3", + "euiColorBorderStrongNeutral": "#94A6B6", + "euiColorBorderStrongSuccess": "#00BFB3", + "euiColorBorderStrongWarning": "#FEC514", + "euiColorBorderStrongRisk": "#DA8B45", + "euiColorBorderStrongDanger": "#BD271E" } diff --git a/packages/website/docs/getting-started/theming/tokens/colors/border_colors_table.tsx b/packages/website/docs/getting-started/theming/tokens/colors/border_colors_table.tsx index d22882b49a3..20b660b99bc 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/border_colors_table.tsx +++ b/packages/website/docs/getting-started/theming/tokens/colors/border_colors_table.tsx @@ -8,10 +8,6 @@ export const BorderColorsTable = () => {