[Theme tokens] Recessed/subdued surfaces + control/panel/frame radii

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

@@ -0,0 +1,4 @@
+- Added `colors.backgroundBaseRecessed` as an intermediate, seldom-used layer (e.g. dashboard / Workflows wrappers; light `#F6F9FC` via `shade10`, dark `#07101F` via `plainDark`)
+- Updated light app chrome (`colors.body` / `$euiPageBackgroundColor`) to `#ECF1F9` (`shade15`)
+- Updated dark `colors.backgroundBaseSubdued` to `#0B1628` (`shade145`) and dark `backgroundBasePlain` to `#111C2C` (`shade140`); light subdued stays `#F6F9FC` (`shade10`)
+- Added `border.radius.inline` (4px), `border.radius.control` (8px), `border.radius.panel` (12px), and `border.radius.frame` (16px); legacy `small`/`medium` remain 4px

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

@@ -26,6 +26,10 @@
   "euiBorderColor": "#2B394F",
   "euiBorderRadius": "4px",
   "euiBorderRadiusSmall": "4px",
+  "euiBorderRadiusInline": "4px",
+  "euiBorderRadiusControl": "8px",
+  "euiBorderRadiusPanel": "12px",
+  "euiBorderRadiusFrame": "16px",
   "euiBorderThick": "2px solid #2B394F",
   "euiBorderThin": "1px solid #2B394F",
   "euiBorderEditable": "2px dotted #2B394F",
@@ -59,8 +63,8 @@
   "euiFormControlCompressedHeight": "32px",
   "euiFormControlPadding": "12px",
   "euiFormControlCompressedPadding": "8px",
-  "euiFormControlBorderRadius": "4px",
-  "euiFormControlCompressedBorderRadius": "4px",
+  "euiFormControlBorderRadius": "8px",
+  "euiFormControlCompressedBorderRadius": "8px",
   "euiRadioSize": "16px",
   "euiCheckBoxSize": "16px",
   "euiCheckboxBorderRadius": "4px",
@@ -97,7 +101,7 @@
   },
   "euiFormControlLayoutGroupInputHeight": "38px",
   "euiFormControlLayoutGroupInputCompressedHeight": "30px",
-  "euiFormControlLayoutGroupInputCompressedBorderRadius": "2px",
+  "euiFormControlLayoutGroupInputCompressedBorderRadius": "8px",
   "euiHeaderBackgroundColor": "#0B1628",
   "euiHeaderDarkBackgroundColor": "#0B1628",
   "euiHeaderBorderColor": "#2B394F",
@@ -114,12 +118,12 @@
   },
   "euiPanelBorderRadiusModifiers": {
     "borderRadiusNone": 0,
-    "borderRadiusMedium": "4px"
+    "borderRadiusMedium": "12px"
   },
   "euiPanelBackgroundColorModifiers": {
     "transparent": "rgba(0, 0, 0, 0)",
-    "plain": "#0B1628",
-    "subdued": "#07101F",
+    "plain": "#111C2C",
+    "subdued": "#0B1628",
     "accent": "#351725",
     "accentSecondary": "#03282B",
     "primary": "#0A2342",
@@ -391,7 +395,7 @@
   "euiColorTextRisk": "#FF995E",
   "euiColorTextDanger": "#F6726A",
   "euiColorTextAssistance": "#C5A5FA",
-  "euiColorTextParagraph": "#CAD3E2",
+  "euiColorTextParagraph": "#B4C1D5",
   "euiColorTextHeading": "#E3E8F2",
   "euiColorTextSubdued": "#98A8C3",
   "euiColorTextDisabled": "#6A7FA0",
@@ -407,8 +411,9 @@
   "euiColorBackgroundBaseRisk": "#361D18",
   "euiColorBackgroundBaseDanger": "#351721",
   "euiColorBackgroundBaseAssistance": "#2A1E3E",
-  "euiColorBackgroundBaseSubdued": "#07101F",
-  "euiColorBackgroundBasePlain": "#0B1628",
+  "euiColorBackgroundBaseRecessed": "#07101F",
+  "euiColorBackgroundBaseSubdued": "#0B1628",
+  "euiColorBackgroundBasePlain": "#111C2C",
   "euiColorBackgroundBaseDisabled": "#1D2A3E",
   "euiColorBackgroundBaseHighlighted": "#172336",
   "euiColorBackgroundBaseFormsPrepend": "#243147",

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

@@ -27,6 +27,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
     euiBorderColor: string;
     euiBorderRadius: string;
     euiBorderRadiusSmall: string;
+    euiBorderRadiusInline: string;
+    euiBorderRadiusControl: string;
+    euiBorderRadiusPanel: string;
+    euiBorderRadiusFrame: string;
     euiBorderThick: string;
     euiBorderThin: string;
     euiBorderEditable: string;
@@ -408,6 +412,7 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
     euiColorBackgroundBaseRisk: string;
     euiColorBackgroundBaseDanger: string;
     euiColorBackgroundBaseAssistance: string;
+    euiColorBackgroundBaseRecessed: string;
     euiColorBackgroundBaseSubdued: string;
     euiColorBackgroundBasePlain: string;
     euiColorBackgroundBaseDisabled: string;

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

@@ -26,6 +26,10 @@
   "euiBorderColor": "#E3E8F2",
   "euiBorderRadius": "4px",
   "euiBorderRadiusSmall": "4px",
+  "euiBorderRadiusInline": "4px",
+  "euiBorderRadiusControl": "8px",
+  "euiBorderRadiusPanel": "12px",
+  "euiBorderRadiusFrame": "16px",
   "euiBorderThick": "2px solid #E3E8F2",
   "euiBorderThin": "1px solid #E3E8F2",
   "euiBorderEditable": "2px dotted #E3E8F2",
@@ -59,8 +63,8 @@
   "euiFormControlCompressedHeight": "32px",
   "euiFormControlPadding": "12px",
   "euiFormControlCompressedPadding": "8px",
-  "euiFormControlBorderRadius": "4px",
-  "euiFormControlCompressedBorderRadius": "4px",
+  "euiFormControlBorderRadius": "8px",
+  "euiFormControlCompressedBorderRadius": "8px",
   "euiRadioSize": "16px",
   "euiCheckBoxSize": "16px",
   "euiCheckboxBorderRadius": "4px",
@@ -97,7 +101,7 @@
   },
   "euiFormControlLayoutGroupInputHeight": "38px",
   "euiFormControlLayoutGroupInputCompressedHeight": "30px",
-  "euiFormControlLayoutGroupInputCompressedBorderRadius": "2px",
+  "euiFormControlLayoutGroupInputCompressedBorderRadius": "8px",
   "euiHeaderBackgroundColor": "#FFFFFF",
   "euiHeaderDarkBackgroundColor": "#0B1628",
   "euiHeaderBorderColor": "#E3E8F2",
@@ -114,7 +118,7 @@
   },
   "euiPanelBorderRadiusModifiers": {
     "borderRadiusNone": 0,
-    "borderRadiusMedium": "4px"
+    "borderRadiusMedium": "12px"
   },
   "euiPanelBackgroundColorModifiers": {
     "transparent": "rgba(0, 0, 0, 0)",
@@ -367,7 +371,7 @@
   "euiColorDarkShade": "#5A6D8C",
   "euiColorDarkestShade": "#2B394F",
   "euiColorFullShade": "#07101F",
-  "euiPageBackgroundColor": "#F6F9FC",
+  "euiPageBackgroundColor": "#ECF1F9",
   "euiColorHighlight": "#F1F6FF",
   "euiTextColor": "#1D2A3E",
   "euiTitleColor": "#111C2C",
@@ -391,7 +395,7 @@
   "euiColorTextRisk": "#9E3A16",
   "euiColorTextDanger": "#A71627",
   "euiColorTextAssistance": "#6B3C9F",
-  "euiColorTextParagraph": "#1D2A3E",
+  "euiColorTextParagraph": "#384861",
   "euiColorTextHeading": "#111C2C",
   "euiColorTextSubdued": "#516381",
   "euiColorTextDisabled": "#798EAF",
@@ -407,6 +411,7 @@
   "euiColorBackgroundBaseRisk": "#FFF3E3",
   "euiColorBackgroundBaseDanger": "#FFF3F1",
   "euiColorBackgroundBaseAssistance": "#F7F2FF",
+  "euiColorBackgroundBaseRecessed": "#F6F9FC",
   "euiColorBackgroundBaseSubdued": "#F6F9FC",
   "euiColorBackgroundBasePlain": "#FFFFFF",
   "euiColorBackgroundBaseDisabled": "#ECF1F9",

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

@@ -27,6 +27,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiBorderColor: string;
     euiBorderRadius: string;
     euiBorderRadiusSmall: string;
+    euiBorderRadiusInline: string;
+    euiBorderRadiusControl: string;
+    euiBorderRadiusPanel: string;
+    euiBorderRadiusFrame: string;
     euiBorderThick: string;
     euiBorderThin: string;
     euiBorderEditable: string;
@@ -408,6 +412,7 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorBackgroundBaseRisk: string;
     euiColorBackgroundBaseDanger: string;
     euiColorBackgroundBaseAssistance: string;
+    euiColorBackgroundBaseRecessed: string;
     euiColorBackgroundBaseSubdued: string;
     euiColorBackgroundBasePlain: string;
     euiColorBackgroundBaseDisabled: string;

packages/eui-theme-borealis/src/variables/_borders.scss

@@ -6,6 +6,10 @@ $euiBorderWidthThick: 2px !default;
 $euiBorderColor: $euiColorBorderBaseSubdued !default;
 $euiBorderRadius: $euiSizeS * .5 !default;
 $euiBorderRadiusSmall: $euiSizeS * .5 !default;
+$euiBorderRadiusInline: $euiSizeS * .5 !default;
+$euiBorderRadiusControl: $euiSizeS !default;
+$euiBorderRadiusPanel: $euiSizeS * 1.5 !default;
+$euiBorderRadiusFrame: $euiSize !default;
 $euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default;
 $euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default;
 $euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default;

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

@@ -24,6 +24,10 @@ export const border: _EuiThemeBorder = {
   radius: {
     medium: computed(sizeToPixel(0.25)),
     small: computed(sizeToPixel(0.25)),
+    inline: computed(sizeToPixel(0.25)),
+    control: computed(sizeToPixel(0.5)),
+    panel: computed(sizeToPixel(0.75)),
+    frame: computed(sizeToPixel(1)),
   },
   thin: computed(
     ([width, color]) => `${width.thin} solid ${color}`,

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

@@ -23,7 +23,7 @@ $euiColorDarkestShade: $euiColorShade30 !default;
 $euiColorFullShade: $euiColorPlainLight !default;
 
 // Backgrounds
-$euiPageBackgroundColor: $euiColorBlueBlack !default;  // deprecated
+$euiPageBackgroundColor: $euiColorPlainDark !default;  // deprecated
 $euiColorHighlight: $euiColorPrimary100 !default;
 
 $euiColorBackgroundBasePrimary: $euiColorPrimary140 !default;
@@ -35,8 +35,9 @@ $euiColorBackgroundBaseWarning: $euiColorWarning140 !default;
 $euiColorBackgroundBaseRisk: $euiColorRisk140 !default;
 $euiColorBackgroundBaseDanger: $euiColorDanger140 !default;
 $euiColorBackgroundBaseAssistance: $euiColorAssistance140 !default;
-$euiColorBackgroundBaseSubdued: $euiColorPlainDark !default;
-$euiColorBackgroundBasePlain: $euiColorShade145 !default;
+$euiColorBackgroundBaseRecessed: $euiColorPlainDark !default;
+$euiColorBackgroundBaseSubdued: $euiColorShade145 !default;
+$euiColorBackgroundBasePlain: $euiColorShade140 !default;
 $euiColorBackgroundBaseDisabled: $euiColorShade130 !default;
 $euiColorBackgroundBaseHighlighted: $euiColorShade135 !default;
 $euiColorBackgroundBaseFormsPrepend: $euiColorShade125 !default;

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

@@ -91,8 +91,9 @@ export const dark_background_colors: _EuiThemeBackgroundColors = {
   backgroundBaseRisk: SEMANTIC_COLORS.risk140,
   backgroundBaseDanger: SEMANTIC_COLORS.danger140,
   backgroundBaseAssistance: SEMANTIC_COLORS.assistance140,
-  backgroundBaseSubdued: SEMANTIC_COLORS.plainDark,
-  backgroundBasePlain: SEMANTIC_COLORS.shade145,
+  backgroundBaseRecessed: SEMANTIC_COLORS.plainDark,
+  backgroundBaseSubdued: SEMANTIC_COLORS.shade145,
+  backgroundBasePlain: SEMANTIC_COLORS.shade140,
   backgroundBaseDisabled: SEMANTIC_COLORS.shade130,
   backgroundBaseHighlighted: SEMANTIC_COLORS.shade135,
 

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

@@ -23,7 +23,7 @@ $euiColorDarkestShade: $euiColorShade120 !default;
 $euiColorFullShade: $euiColorPlainDark !default;
 
 // Backgrounds
-$euiPageBackgroundColor: $euiColorShade10 !default; // deprecated
+$euiPageBackgroundColor: $euiColorShade15 !default; // deprecated
 $euiColorHighlight: $euiColorPrimary10 !default;
 
 $euiColorBackgroundBasePrimary: $euiColorPrimary10 !default;
@@ -35,6 +35,7 @@ $euiColorBackgroundBaseWarning: $euiColorWarning10 !default;
 $euiColorBackgroundBaseRisk: $euiColorRisk10 !default;
 $euiColorBackgroundBaseDanger: $euiColorDanger10 !default;
 $euiColorBackgroundBaseAssistance: $euiColorAssistance10 !default;
+$euiColorBackgroundBaseRecessed: $euiColorShade10 !default;
 $euiColorBackgroundBaseSubdued: $euiColorShade10 !default;
 $euiColorBackgroundBasePlain: $euiColorPlainLight !default;
 $euiColorBackgroundBaseDisabled: $euiColorShade15 !default;

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

@@ -91,6 +91,7 @@ export const background_colors: _EuiThemeBackgroundColors = {
   backgroundBaseRisk: SEMANTIC_COLORS.risk10,
   backgroundBaseDanger: SEMANTIC_COLORS.danger10,
   backgroundBaseAssistance: SEMANTIC_COLORS.assistance10,
+  backgroundBaseRecessed: SEMANTIC_COLORS.shade10,
   backgroundBaseSubdued: SEMANTIC_COLORS.shade10,
   backgroundBasePlain: SEMANTIC_COLORS.plainLight,
   backgroundBaseDisabled: SEMANTIC_COLORS.shade15,
@@ -189,7 +190,7 @@ export const border_colors: _EuiThemeBorderColors = {
 };
 
 export const special_colors: _EuiThemeSpecialColors = {
-  body: SEMANTIC_COLORS.shade10,
+  body: SEMANTIC_COLORS.shade15,
   highlight: SEMANTIC_COLORS.primary10,
   disabled: SEMANTIC_COLORS.shade20,
   disabledText: SEMANTIC_COLORS.shade80,

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

@@ -0,0 +1,2 @@
+- Added `colors.backgroundBaseRecessed` type (intermediate, seldom-used layer; e.g. dashboard / Workflows wrappers)
+- Added `border.radius.inline`, `border.radius.control`, `border.radius.panel`, and `border.radius.frame` types

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

@@ -33,6 +33,26 @@ export interface _EuiThemeBorderRadiusValues {
    * - Default value: 4px
    */
   small: CSSProperties['borderRadius'];
+  /**
+   * Inline / text-adjacent marks (skeleton bars, swatches, inline code)
+   * - Default value: 4px
+   */
+  inline: CSSProperties['borderRadius'];
+  /**
+   * Controls and form elements (buttons, inputs)
+   * - Default value: 8px
+   */
+  control: CSSProperties['borderRadius'];
+  /**
+   * Panels, cards, and popovers
+   * - Default value: 12px
+   */
+  panel: CSSProperties['borderRadius'];
+  /**
+   * App / layout chrome (e.g. framed shell, side nav)
+   * - Default value: 16px
+   */
+  frame: CSSProperties['borderRadius'];
 }
 
 export interface _EuiThemeBorderColorValues {

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

@@ -188,6 +188,15 @@ export type _EuiThemeBackgroundColors = {
   backgroundBaseRisk: ColorModeSwitch;
   backgroundBaseDanger: ColorModeSwitch;
   backgroundBaseAssistance: ColorModeSwitch;
+  /**
+   * Intermediate layer between page chrome and raised surfaces.
+   * Seldom used — e.g. dashboard or Workflows wrappers. Prefer
+   * `backgroundBasePlain` / `backgroundBaseSubdued` for general UI.
+   */
+  backgroundBaseRecessed: ColorModeSwitch;
+  /**
+   * Secondary / inner surface (e.g. nested steps, secondary nav)
+   */
   backgroundBaseSubdued: ColorModeSwitch;
   backgroundBasePlain: ColorModeSwitch;
   backgroundBaseDisabled: ColorModeSwitch;

packages/eui/changelogs/upcoming/9903.md

@@ -0,0 +1,5 @@
+- Added `colors.backgroundBaseRecessed` as an intermediate, seldom-used layer (e.g. dashboard / Workflows wrappers; light `#F6F9FC` via `shade10`, dark `#07101F` via `plainDark`)
+- Updated light app chrome (`colors.body` / `$euiPageBackgroundColor`) to `#ECF1F9` (`shade15`)
+- Updated dark `colors.backgroundBaseSubdued` to `#0B1628` (`shade145`) and dark `backgroundBasePlain` to `#111C2C` (`shade140`); light subdued stays `#F6F9FC` (`shade10`)
+- Added `border.radius.inline` (4px), `border.radius.control` (8px), `border.radius.panel` (12px), and `border.radius.frame` (16px); legacy `small`/`medium` remain 4px
+- Updated `EuiSkeleton*`, `EuiColorPickerSwatch`, and `EuiCode` to use `border.radius.inline`

packages/eui/src/components/code/code.styles.ts

@@ -32,7 +32,7 @@ export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => {
           border: ${euiTheme.border.thin};
         `,
       })}
-      border-radius: ${euiTheme.border.radius.small};
+      border-radius: ${euiTheme.border.radius.inline};
       font-weight: ${euiTheme.font.weight.bold};
       color: ${codeSyntaxVariables.inlineCodeColor};
 

packages/eui/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`EuiCollapsibleNavGroup is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props background dark is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup css-vz0z-euiCollapsibleNavGroup-notCollapsible-dark-euiColorMode-dark"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-dark-euiColorMode-dark"
   id="id"
 />
 `;

packages/eui/src/components/color_picker/color_picker_swatch.styles.ts

@@ -9,11 +9,7 @@
 import { css } from '@emotion/react';
 
 import { UseEuiTheme, transparentize } from '../../services';
-import {
-  logicalSizeCSS,
-  mathWithUnits,
-  euiOutline,
-} from '../../global_styling';
+import { logicalSizeCSS, euiOutline } from '../../global_styling';
 import {
   highContrastModeStyles,
   preventForcedColors,
@@ -27,10 +23,7 @@ export const euiColorPickerSwatchStyles = (euiThemeContext: UseEuiTheme) => {
       display: inline-block;
       ${logicalSizeCSS(euiTheme.size.l)}
 
-      border-radius: ${mathWithUnits(
-        euiTheme.border.radius.medium,
-        (x) => x / 2
-      )};
+      border-radius: ${euiTheme.border.radius.inline};
       ${highContrastModeStyles(euiThemeContext, {
         none: `
           border: ${euiTheme.border.width.thin} solid

packages/eui/src/components/form/form.styles.test.tsx

@@ -76,7 +76,7 @@ describe('euiFormVariables', () => {
       wrapper: darkModeWrapper,
     });
     // Check custom dark-mode logic
-    expect(result.current.backgroundColor).toEqual('#0B1628');
+    expect(result.current.backgroundColor).toEqual('#111C2C');
     expect(result.current.controlPlaceholderText).toEqual('#6A7FA0');
   });
 });

packages/eui/src/components/skeleton/skeleton_rectangle.styles.ts

@@ -26,10 +26,10 @@ export const euiSkeletonRectangleStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     // Border radius
     s: css`
-      border-radius: ${euiTheme.border.radius.small};
+      border-radius: ${euiTheme.border.radius.inline};
     `,
     m: css`
-      border-radius: ${euiTheme.border.radius.medium};
+      border-radius: ${euiTheme.border.radius.inline};
     `,
     none: css`
       border-radius: 0;

packages/eui/src/components/skeleton/skeleton_text.styles.ts

@@ -38,7 +38,7 @@ export const euiSkeletonTextStyles = (euiThemeContext: UseEuiTheme) => {
     euiSkeletonText: css`
       display: block;
       ${logicalCSS('width', '100%')}
-      border-radius: ${euiTheme.border.radius.small};
+      border-radius: ${euiTheme.border.radius.inline};
       ${euiSkeletonGradientAnimation(euiThemeContext)}
       ${preventForcedColors(euiThemeContext)}