[Visual Refresh] Implement input design changes

packages/eui-theme-borealis/changelogs/upcoming/8767.md

@@ -0,0 +1,23 @@
+- Added semantic tokens: 
+  - `colors.borderInteractiveFormsHoverPlain`
+  - `colors.borderInteractiveFormsHoverDanger`
+- Added component tokens:
+  - `components.forms.backgroundDropping`
+  - `components.forms.borderFocused`
+  - `components.forms.borderInvalid`
+  - `components.forms.borderHovered`
+  - `components.forms.borderInvalidHovered`
+  - `components.forms.borderAutofilledHovered`
+  - `components.forms.clearButtonBackground`
+- Updated values for tokens:
+  - `colors.textWarning`
+  - `colors.borderStrongPrimary`
+  - `colors.borderStrongAccent`
+  - `colors.borderStrongAccentSecondary`
+  - `colors.borderStrongNeutral`
+  - `colors.borderStrongSuccess`
+  - `colors.borderStrongWarning`
+  - `colors.borderStrongRisk`
+  - `colors.borderStrongDanger`
+  - `components.forms.backgroundReadOnly`
+

packages/eui-theme-borealis/src/eui_theme_borealis_dark.json

@@ -413,6 +413,8 @@
   "euiColorBorderBaseFloating": "#2B394F",
   "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255, 0.32)",
   "euiColorBorderBaseFormsControl": "#6A7FA0",
+  "euiColorBorderInteractiveFormsHoverPlain": "#5A6D8C",
+  "euiColorBorderInteractiveFormsHoverDanger": "#EE4C48",
   "euiColorBorderStrongPrimary": "#61A2FF",
   "euiColorBorderStrongAccent": "#EE72A6",
   "euiColorBorderStrongAccentSecondary": "#16C5C0",

packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts

@@ -414,6 +414,8 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
     euiColorBorderBaseFloating: string;
     euiColorBorderBaseFormsColorSwatch: string;
     euiColorBorderBaseFormsControl: string;
+    euiColorBorderInteractiveFormsHoverPlain: string;
+    euiColorBorderInteractiveFormsHoverDanger: string;
     euiColorBorderStrongPrimary: string;
     euiColorBorderStrongAccent: string;
     euiColorBorderStrongAccentSecondary: string;

packages/eui-theme-borealis/src/eui_theme_borealis_light.json

@@ -413,13 +413,15 @@
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(72,89,117, 0.24)",
   "euiColorBorderBaseFormsControl": "#8E9FBC",
-  "euiColorBorderStrongPrimary": "#1750BA",
-  "euiColorBorderStrongAccent": "#A11262",
-  "euiColorBorderStrongAccentSecondary": "#047471",
-  "euiColorBorderStrongNeutral": "#0F658A",
-  "euiColorBorderStrongSuccess": "#09724D",
-  "euiColorBorderStrongWarning": "#825803",
-  "euiColorBorderStrongRisk": "#9E3A16",
-  "euiColorBorderStrongDanger": "#A71627",
+  "euiColorBorderInteractiveFormsHoverPlain": "#B4C1D5",
+  "euiColorBorderInteractiveFormsHoverDanger": "#DA3737",
+  "euiColorBorderStrongPrimary": "#0B64DD",
+  "euiColorBorderStrongAccent": "#BC1E70",
+  "euiColorBorderStrongAccentSecondary": "#008B87",
+  "euiColorBorderStrongNeutral": "#19799F",
+  "euiColorBorderStrongSuccess": "#008A5E",
+  "euiColorBorderStrongWarning": "#966B03",
+  "euiColorBorderStrongRisk": "#C24411",
+  "euiColorBorderStrongDanger": "#C61E25",
   "euiColorBorderStrongText": "#5A6D8C"
 }

packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts

@@ -414,6 +414,8 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorBorderBaseFloating: string;
     euiColorBorderBaseFormsColorSwatch: string;
     euiColorBorderBaseFormsControl: string;
+    euiColorBorderInteractiveFormsHoverPlain: string;
+    euiColorBorderInteractiveFormsHoverDanger: string;
     euiColorBorderStrongPrimary: string;
     euiColorBorderStrongAccent: string;
     euiColorBorderStrongAccentSecondary: string;

packages/eui-theme-borealis/src/index.ts

@@ -41,6 +41,7 @@ export const euiThemeBorealis: EuiThemeShape = {
     hasGlobalFocusColor: true,
     hasVisColorAdjustment: false,
     buttonVariant: 'refresh',
+    formVariant: 'refresh',
   },
   overrides,
 };

packages/eui-theme-borealis/src/variables/_forms.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 import { computed, mathWithUnits } from '@elastic/eui-theme-common';
+import { SEMANTIC_COLORS } from './colors/_semantic_colors';
 
 const _forms = {
   background: computed(
@@ -17,8 +18,8 @@ const _forms = {
     ['colors.backgroundBaseDisabled']
   ),
   backgroundReadOnly: computed(
-    ([backgroundBasePlain]) => backgroundBasePlain,
-    ['colors.backgroundBasePlain']
+    ([backgroundBaseDisabled]) => backgroundBaseDisabled,
+    ['colors.backgroundBaseDisabled']
   ),
   backgroundFocused: computed(
     ([backgroundBasePlain]) => backgroundBasePlain,
@@ -28,6 +29,7 @@ const _forms = {
     ([backgroundBasePrimary]) => backgroundBasePrimary,
     ['colors.backgroundBasePrimary']
   ),
+  backgroundDropping: SEMANTIC_COLORS.success70Alpha16,
   prependBackground: computed(
     ([backgroundBaseFormsPrepend]) => backgroundBaseFormsPrepend,
     ['colors.backgroundBaseFormsPrepend']
@@ -40,10 +42,31 @@ const _forms = {
     ([borderBaseDisabled]) => borderBaseDisabled,
     ['colors.borderBaseDisabled']
   ),
+  borderFocused: computed(
+    ([borderStrongPrimary]) => borderStrongPrimary,
+    ['colors.borderStrongPrimary']
+  ),
+  borderInvalid: computed(
+    ([borderStrongDanger]) => borderStrongDanger,
+    ['colors.borderStrongDanger']
+  ),
+  borderHovered: computed(
+    ([borderInteractiveFormsHoverPlain]) => borderInteractiveFormsHoverPlain,
+    ['colors.borderInteractiveFormsHoverPlain']
+  ),
+  borderInvalidHovered: computed(
+    ([borderInteractiveFormsHoverDanger]) => borderInteractiveFormsHoverDanger,
+    ['colors.borderInteractiveFormsHoverDanger']
+  ),
   borderAutofilled: computed(
     ([borderBasePrimary]) => borderBasePrimary,
     ['colors.borderBasePrimary']
   ),
+  borderAutofilledHovered: computed(
+    ([borderStrongPrimary]) => borderStrongPrimary,
+    ['colors.borderStrongPrimary']
+  ),
+  clearButtonBackground: SEMANTIC_COLORS.shade60,
   controlBorder: computed(
     ([borderBaseFormsControl]) => borderBaseFormsControl,
     ['colors.borderBaseFormsControl']
@@ -78,6 +101,7 @@ const _forms = {
 
 const _dark_forms = {
   ..._forms,
+  clearButtonBackground: SEMANTIC_COLORS.shade90,
 };
 
 export const forms = {

packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss

@@ -121,6 +121,9 @@ $euiColorBorderBaseFloating: $euiColorShade120 !default;
 $euiColorBorderBaseFormsColorSwatch: $euiColorPlainLightAlpha32 !default;
 $euiColorBorderBaseFormsControl: $euiColorShade80 !default;
 
+$euiColorBorderInteractiveFormsHoverPlain: $euiColorShade90 !default;
+$euiColorBorderInteractiveFormsHoverDanger: $euiColorDanger70 !default;
+
 $euiColorBorderStrongPrimary: $euiColorPrimary60 !default;
 $euiColorBorderStrongAccent: $euiColorAccent60 !default;
 $euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary60 !default;

packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts

@@ -165,6 +165,9 @@ export const dark_border_colors: _EuiThemeBorderColors = {
   borderBaseFormsColorSwatch: SEMANTIC_COLORS.plainLightAlpha32,
   borderBaseFormsControl: SEMANTIC_COLORS.shade80,
 
+  borderInteractiveFormsHoverPlain: SEMANTIC_COLORS.shade90,
+  borderInteractiveFormsHoverDanger: SEMANTIC_COLORS.danger70,
+
   borderStrongPrimary: SEMANTIC_COLORS.primary60,
   borderStrongAccent: SEMANTIC_COLORS.accent60,
   borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary60,

packages/eui-theme-borealis/src/variables/colors/_colors_light.scss

@@ -92,7 +92,7 @@ $euiColorTextInverse: $euiColorPlainLight !default;
 $euiColorPrimaryText: $euiColorPrimary100 !default;
 $euiColorAccentText: $euiColorAccent100 !default;
 $euiColorSuccessText: $euiColorSuccess100 !default;
-$euiColorWarningText: $euiColorWarning110 !default;
+$euiColorWarningText: $euiColorWarning100 !default;
 $euiColorDangerText: $euiColorDanger100 !default;
 
 // Brand texts
@@ -101,7 +101,7 @@ $euiColorTextAccent: $euiColorAccent100 !default;
 $euiColorTextAccentSecondary: $euiColorAccentSecondary100 !default;
 $euiColorTextNeutral: $euiColorNeutral100 !default;
 $euiColorTextSuccess: $euiColorSuccess100 !default;
-$euiColorTextWarning: $euiColorWarning110 !default;
+$euiColorTextWarning: $euiColorWarning100 !default;
 $euiColorTextRisk: $euiColorRisk100 !default;
 $euiColorTextDanger: $euiColorDanger100 !default;
 
@@ -123,16 +123,20 @@ $euiColorBorderBaseFloating: $euiColorTransparent !default;
 $euiColorBorderBaseFormsColorSwatch: $euiColorShade100Alpha24 !default;
 $euiColorBorderBaseFormsControl: $euiColorShade60 !default;
 
-$euiColorBorderStrongPrimary: $euiColorPrimary100 !default;
-$euiColorBorderStrongAccent: $euiColorAccent100 !default;
-$euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary100 !default;
-$euiColorBorderStrongNeutral: $euiColorNeutral100 !default;
-$euiColorBorderStrongSuccess: $euiColorSuccess100 !default;
-$euiColorBorderStrongWarning: $euiColorWarning100 !default;
-$euiColorBorderStrongRisk: $euiColorRisk100 !default;
-$euiColorBorderStrongDanger: $euiColorDanger100 !default;
+$euiColorBorderInteractiveFormsHoverPlain: $euiColorShade40 !default;
+$euiColorBorderInteractiveFormsHoverDanger: $euiColorDanger80 !default;
+
+$euiColorBorderStrongPrimary: $euiColorPrimary90 !default;
+$euiColorBorderStrongAccent: $euiColorAccent90 !default;
+$euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary90 !default;
+$euiColorBorderStrongNeutral: $euiColorNeutral90 !default;
+$euiColorBorderStrongSuccess: $euiColorSuccess90 !default;
+$euiColorBorderStrongWarning: $euiColorWarning90 !default;
+$euiColorBorderStrongRisk: $euiColorRisk90 !default;
+$euiColorBorderStrongDanger: $euiColorDanger90 !default;
 $euiColorBorderStrongText: $euiColorShade90 !default;
 
+
 // Charts
 $euiColorChartLines: $euiColorShade30 !default;
 $euiColorChartBand: $euiColorShade10 !default;

packages/eui-theme-borealis/src/variables/colors/_colors_light.ts

@@ -39,7 +39,7 @@ export const brand_text_colors: _EuiThemeBrandTextColors = {
   primaryText: SEMANTIC_COLORS.primary100,
   accentText: SEMANTIC_COLORS.accent100,
   successText: SEMANTIC_COLORS.success100,
-  warningText: SEMANTIC_COLORS.warning110,
+  warningText: SEMANTIC_COLORS.warning100,
   dangerText: SEMANTIC_COLORS.danger100,
 
   /* New colors */
@@ -48,7 +48,7 @@ export const brand_text_colors: _EuiThemeBrandTextColors = {
   textAccentSecondary: SEMANTIC_COLORS.accentSecondary100,
   textNeutral: SEMANTIC_COLORS.neutral100,
   textSuccess: SEMANTIC_COLORS.success100,
-  textWarning: SEMANTIC_COLORS.warning110,
+  textWarning: SEMANTIC_COLORS.warning100,
   textRisk: SEMANTIC_COLORS.risk100,
   textDanger: SEMANTIC_COLORS.danger100,
 };
@@ -164,14 +164,17 @@ export const border_colors: _EuiThemeBorderColors = {
   borderBaseFormsColorSwatch: SEMANTIC_COLORS.shade100Alpha24,
   borderBaseFormsControl: SEMANTIC_COLORS.shade60,
 
-  borderStrongPrimary: SEMANTIC_COLORS.primary100,
-  borderStrongAccent: SEMANTIC_COLORS.accent100,
-  borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary100,
-  borderStrongNeutral: SEMANTIC_COLORS.neutral100,
-  borderStrongSuccess: SEMANTIC_COLORS.success100,
-  borderStrongWarning: SEMANTIC_COLORS.warning100,
-  borderStrongRisk: SEMANTIC_COLORS.risk100,
-  borderStrongDanger: SEMANTIC_COLORS.danger100,
+  borderInteractiveFormsHoverPlain: SEMANTIC_COLORS.shade40,
+  borderInteractiveFormsHoverDanger: SEMANTIC_COLORS.danger80,
+
+  borderStrongPrimary: SEMANTIC_COLORS.primary90,
+  borderStrongAccent: SEMANTIC_COLORS.accent90,
+  borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary90,
+  borderStrongNeutral: SEMANTIC_COLORS.neutral90,
+  borderStrongSuccess: SEMANTIC_COLORS.success90,
+  borderStrongWarning: SEMANTIC_COLORS.warning90,
+  borderStrongRisk: SEMANTIC_COLORS.risk90,
+  borderStrongDanger: SEMANTIC_COLORS.danger90,
   borderStrongText: SEMANTIC_COLORS.shade90,
 };
 

packages/eui-theme-common/changelogs/upcoming/8767.md

@@ -0,0 +1,12 @@
+- Added semantic tokens: 
+  - `colors.borderInteractiveFormsHoverPlain`
+  - `colors.borderInteractiveFormsHoverDanger`
+- Added component tokens:
+  - `components.forms.backgroundDropping`
+  - `components.forms.borderFocused`
+  - `components.forms.borderInvalid`
+  - `components.forms.borderHovered`
+  - `components.forms.borderInvalidHovered`
+  - `components.forms.borderAutofilledHovered`
+  - `components.forms.clearButtonBackground`
+

packages/eui-theme-common/src/global_styling/variables/colors.ts

@@ -268,6 +268,9 @@ export type _EuiThemeBorderColors = {
   borderBaseFormsColorSwatch: ColorModeSwitch;
   borderBaseFormsControl: ColorModeSwitch;
 
+  borderInteractiveFormsHoverPlain: ColorModeSwitch;
+  borderInteractiveFormsHoverDanger: ColorModeSwitch;
+
   borderStrongPrimary: ColorModeSwitch;
   borderStrongAccent: ColorModeSwitch;
   borderStrongAccentSecondary: ColorModeSwitch;

packages/eui-theme-common/src/global_styling/variables/flags.ts

@@ -8,6 +8,7 @@
 
 export type EuiThemeVariantFlags = {
   buttonVariant: 'classic' | 'refresh';
+  formVariant: 'classic' | 'refresh';
 };
 
 /**

packages/eui-theme-common/src/global_styling/variables/forms.ts

@@ -18,9 +18,17 @@ export type _EuiThemeFormColors = {
   backgroundReadOnly: ColorModeSwitch;
   backgroundFocused: ColorModeSwitch;
   backgroundAutofilled: ColorModeSwitch;
+  backgroundDropping: ColorModeSwitch;
   prependBackground: ColorModeSwitch;
   border: ColorModeSwitch;
+  borderDisabled: ColorModeSwitch;
+  borderFocused: ColorModeSwitch;
+  borderInvalid: ColorModeSwitch;
+  borderHovered: ColorModeSwitch;
+  borderInvalidHovered: ColorModeSwitch;
   borderAutofilled: ColorModeSwitch;
+  borderAutofilledHovered: ColorModeSwitch;
+  clearButtonBackground: ColorModeSwitch;
   controlBorder: ColorModeSwitch;
   controlBorderSelected: ColorModeSwitch;
   controlBorderDisabled: ColorModeSwitch;

packages/eui/changelogs/upcoming/8767.md

@@ -0,0 +1,36 @@
+- Added new `refresh` design for input styles and form layout components:
+  - `EuiFieldText`
+  - `EuiFieldNumber`
+  - `EuiFieldPassword`
+  - `EuiFieldSearch`
+  - `EuiTextarea`
+  - `EuiSelect`
+  - `EuiSuperSelect`
+  - `EuiFormControlLayout`
+  - `EuiFormControlLayoutDelimited`
+  - `EuiFormControlLayoutIcons`
+  - `EuiFormLabel`
+  - `EuiFormErrorText`
+- Added semantic tokens: 
+  - `colors.borderInteractiveFormsHoverPlain`
+  - `colors.borderInteractiveFormsHoverDanger`
+- Added component tokens:
+  - `components.forms.backgroundDropping`
+  - `components.forms.borderFocused`
+  - `components.forms.borderInvalid`
+  - `components.forms.borderHovered`
+  - `components.forms.borderInvalidHovered`
+  - `components.forms.borderAutofilledHovered`
+  - `components.forms.clearButtonBackground`
+- Updated values for tokens:
+  - `colors.textWarning`
+  - `colors.borderStrongPrimary`
+  - `colors.borderStrongAccent`
+  - `colors.borderStrongAccentSecondary`
+  - `colors.borderStrongNeutral`
+  - `colors.borderStrongSuccess`
+  - `colors.borderStrongWarning`
+  - `colors.borderStrongRisk`
+  - `colors.borderStrongDanger`
+  - `components.forms.backgroundReadOnly`
+

packages/eui/changelogs/upcoming/8778.md

@@ -0,0 +1,7 @@
+- Added new `refresh` design for input styles on form picker components:
+  - `EuiComboBox`
+  - `EuiFilePicker`
+  - `EuiDatePicker`
+  - `EuiSuperDatePicker`
+- Updated the font size of `xs` size `EuiButtonEmpty` to `14px`
+

packages/eui/changelogs/upcoming/8806.md

@@ -0,0 +1,6 @@
+- Added `theme` prop to `EuiSelectableTemplateSitewide` to support granular control over the applied `colorMode` for the search and popover components
+
+**Breaking changes**
+
+- Removed custom style overrides for `EuiSelectableTemplateSitewide` search inside `EuiHeader` - Use the `colorModes` prop on `EuiSelectableTemplateSitewide` instead to control the color mode output.
+

packages/eui/src/components/button/__snapshots__/button.test.tsx.snap

@@ -299,7 +299,7 @@ exports[`EuiButton props isLoading is rendered 1`] = `
       aria-label="Loading"
       class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
       role="progressbar"
-      style="border-color: #1750ba currentcolor currentcolor currentcolor;"
+      style="border-color: #0b64dd currentcolor currentcolor currentcolor;"
     />
   </span>
 </button>

packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`EuiButtonDisplayContent button icon loading icon renders disabled & loa
     aria-label="Loading"
     class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
     role="progressbar"
-    style="border-color: #1750ba currentcolor currentcolor currentcolor;"
+    style="border-color: #0b64dd currentcolor currentcolor currentcolor;"
   />
   <span
     class="eui-textTruncate"

packages/eui/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap

@@ -327,7 +327,7 @@ exports[`EuiButtonEmpty props isLoading is rendered 1`] = `
       aria-label="Loading"
       class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
       role="progressbar"
-      style="border-color: #1750ba currentcolor currentcolor currentcolor;"
+      style="border-color: #0b64dd currentcolor currentcolor currentcolor;"
     />
     <span
       class="eui-textTruncate euiButtonEmpty__text"

packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap

@@ -257,7 +257,7 @@ exports[`EuiButtonIcon props isLoading is rendered 1`] = `
     aria-label="Loading"
     class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
     role="progressbar"
-    style="border-color: #1750ba currentcolor currentcolor currentcolor;"
+    style="border-color: #0b64dd currentcolor currentcolor currentcolor;"
   />
 </button>
 `;