[Visual Refresh] Update docs to reflect new tokens #8306

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

mgadewoll merged 8 commits into elastic:eui-theme/borealis from mgadewoll:eui-theme/174-update-docs

Feb 6, 2025

packages/docusaurus-theme/src/components/call_out/index.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -8,31 +8,31 @@ import {
  
    import { FunctionComponent, PropsWithChildren } from 'react';

    type VARIANTS = 'info' | 'tip' | 'note' | 'danger' | 'warning';

    type TEXT_COLORS = 'primaryText' | 'successText' | 'dangerText' | 'warningText';

    type TEXT_COLORS = 'textPrimary' | 'textSuccess' | 'textDanger' | 'textWarning';

    const VARIANT_TO_COLOR_MAP: Record<

      VARIANTS,

      { backgroundVariable: string; colorKey: TEXT_COLORS }

    > = {

      info: {

        backgroundVariable: 'var(--eui-background-color-primary)',

        colorKey: 'primaryText',

        colorKey: 'textPrimary',

      },

      note: {

        backgroundVariable: 'var(--eui-background-color-primary)',

        colorKey: 'primaryText',

        colorKey: 'textPrimary',

      },

      tip: {

        backgroundVariable: 'var(--eui-background-color-success)',

        colorKey: 'successText',

        colorKey: 'textSuccess',

      },

      danger: {

        backgroundVariable: 'var(--eui-background-color-danger)',

        colorKey: 'dangerText',

        colorKey: 'textDanger',

      },

      warning: {

        backgroundVariable: 'var(--eui-background-color-warning)',

        colorKey: 'warningText',

        colorKey: 'textWarning',

      },

    };

    @@ -52,7 +52,7 @@ const getStyles = (theme: UseEuiTheme, variant: VARIANTS) => {
  
          .alert {

            --ifm-alert-background-color: ${VARIANT_TO_COLOR_MAP[variant]

              .backgroundVariable};

            --ifm-alert-foreground-color: ${euiTheme.colors.text};

            --ifm-alert-foreground-color: ${euiTheme.colors.textParagraph};

            --ifm-alert-padding-horizontal: ${euiTheme.size.base};

            --ifm-alert-padding-vertical: ${euiTheme.size.base};

            --ifm-alert-border-width: ${euiTheme.border.width.thin};

packages/docusaurus-theme/src/components/prop_table/prop_table.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -7,9 +7,13 @@ import {
  
      EuiCode,

      UseEuiTheme,

      EuiTitle,

      useEuiMemoizedStyles, EuiLink,

      useEuiMemoizedStyles,

      EuiLink,

    } from '@elastic/eui';

    import { ProcessedComponent, ProcessedComponentProp } from '@elastic/eui-docgen';

    import {

      ProcessedComponent,

      ProcessedComponentProp,

    } from '@elastic/eui-docgen';

    import { useCallback, useMemo } from 'react';

    import { css } from '@emotion/react';

    import { PropTableExtendedTypes } from './extended_types';

    @@ -19,9 +23,8 @@ export interface PropTableProps {
  
      headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

    }

    const getPropId = (prop: ProcessedComponentProp, componentName: string) => (

      `${encodeURIComponent(componentName)}-prop-${prop.name}`

    );

    const getPropId = (prop: ProcessedComponentProp, componentName: string) =>

      `${encodeURIComponent(componentName)}-prop-${prop.name}`;

    const getPropTableStyles = ({ euiTheme }: UseEuiTheme) => ({

      propTable: css`

    @@ -53,7 +56,7 @@ const getPropTableStyles = ({ euiTheme }: UseEuiTheme) => ({
  
      `,

      required: css`

        font-family: ${euiTheme.font.familyCode};

        color: ${euiTheme.colors.dangerText};

        color: ${euiTheme.colors.textDanger};

      `,

      type: css`

        font-weight: ${euiTheme.font.weight.semiBold};

    @@ -78,19 +81,23 @@ export const PropTable = ({
  
      const styles = useEuiMemoizedStyles(getPropTableStyles);

      const tableItems = useMemo<Array<ProcessedComponentProp>>(

        () => Object.values(definition.props).sort(

          (a, b) => +b.isRequired - +a.isRequired

        ),

        [definition.props],

        () =>

          Object.values(definition.props).sort(

            (a, b) => +b.isRequired - +a.isRequired

          ),

        [definition.props]

      );

      const columns = useMemo<Array<EuiBasicTableColumn<ProcessedComponentProp>>>(

        () => ([

        () => [

          {

            field: 'name',

            name: 'Prop',

            width: "150",

            render(value: ProcessedComponentProp['name'], prop: ProcessedComponentProp) {

            width: '150',

            render(

              value: ProcessedComponentProp['name'],

              prop: ProcessedComponentProp

            ) {

              return (

                <span css={styles.propName}>

                  {value}

    @@ -110,44 +117,59 @@ export const PropTable = ({
  
          {

            field: 'description',

            name: 'Description and type',

            render(value: ProcessedComponentProp['description'], prop: ProcessedComponentProp) {

            render(

              value: ProcessedComponentProp['description'],

              prop: ProcessedComponentProp

            ) {

              return (

                <EuiFlexGroup direction="column" alignItems="flexStart" gutterSize="s">

                <EuiFlexGroup

                  direction="column"

                  alignItems="flexStart"

                  gutterSize="s"

                >

                  {value?.trim() && (

                    <EuiMarkdownFormat css={styles.description}>{value}</EuiMarkdownFormat>

                    <EuiMarkdownFormat css={styles.description}>

                      {value}

                    </EuiMarkdownFormat>

                  )}

                  {prop.type && (

                    <span css={styles.type}>

                      Type: {' '}

                      Type:{' '}

                      <EuiCode language="ts">

                        {prop.type.raw || prop.type.name}

                      </EuiCode>

                    </span>

                  )}

                </EuiFlexGroup>

              );

            }

            },

          },

          {

            field: 'defaultValue',

            name: 'Default value',

            width: "120",

            render(value: ProcessedComponentProp['defaultValue'], prop: ProcessedComponentProp) {

            width: '120',

            render(

              value: ProcessedComponentProp['defaultValue'],

              prop: ProcessedComponentProp

            ) {

              if (prop.isRequired && !value?.trim().length) {

                return <EuiTextColor css={styles.required}>Required</EuiTextColor>

                return <EuiTextColor css={styles.required}>Required</EuiTextColor>;

              }

              return value && <EuiCode>{value}</EuiCode>;

            },

          }

        ]),

        [],

          },

        ],

        []

      );

      const rowProps = useCallback((item: ProcessedComponentProp) => ({

        id: getPropId(item, definition.displayName),

        css: styles.tableRow,

      }), [definition.displayName]);

      const rowProps = useCallback(

        (item: ProcessedComponentProp) => ({

          id: getPropId(item, definition.displayName),

          css: styles.tableRow,

        }),

        [definition.displayName]

      );

      return (

        <EuiFlexGroup

packages/docusaurus-theme/src/theme/Footer/index.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,8 @@ const SSPL_LICENSE_URL = @@
     const getFooterStyles = ({ euiTheme }: UseEuiTheme) => {
       return {
         root: css`
-          background: #1c1e23; // Color not available in EUI
+          background: ${euiTheme.colors
+            .backgroundBaseSubdued}; // Color not available in EUI
           padding: ${euiTheme.size.l};
           text-align: center;
         `,
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ -1,5 +1,5 @@
     // Color when not using currentColor
-    $euiFocusRingColor: $euiColorPrimaryText;
+    $euiFocusRingColor: $euiColorTextPrimary;
     // Sizing
     $euiFocusRingAnimStartSize: 2px;
@@ Expand Down @@

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -10,12 +10,12 @@ $euiColorGhost: $euiColorWhite !default;
  
    $euiColorInk: $euiColorBlack !default;

    // Brand

    $euiColorPrimary: $euiColorPrimary70 !default;

    $euiColorAccent: $euiColorAccent70 !default;

    $euiColorAccentSecondary: $euiColorAccentSecondary70 !default;

    $euiColorPrimary: $euiColorPrimary60 !default;

    $euiColorAccent: $euiColorAccent60 !default;

    $euiColorAccentSecondary: $euiColorAccentSecondary60 !default;

    $euiColorSuccess: $euiColorSuccess60 !default;

    $euiColorWarning: $euiColorWarning40 !default;

    $euiColorDanger: $euiColorDanger70 !default;

    $euiColorDanger: $euiColorDanger60 !default;

    // Shades

    $euiColorEmptyShade: $euiColorPlainDark !default;

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -26,12 +26,12 @@ import { SEMANTIC_COLORS } from './_semantic_colors';
  
     */

    export const dark_brand_colors: _EuiThemeBrandColors = {

      primary: SEMANTIC_COLORS.primary70,

      accent: SEMANTIC_COLORS.accent70,

      accentSecondary: SEMANTIC_COLORS.accentSecondary70,

      primary: SEMANTIC_COLORS.primary60,

      accent: SEMANTIC_COLORS.accent60,

      accentSecondary: SEMANTIC_COLORS.accentSecondary60,

      success: SEMANTIC_COLORS.success60,

      warning: SEMANTIC_COLORS.warning40,

      danger: SEMANTIC_COLORS.danger70,

      danger: SEMANTIC_COLORS.danger60,

    };

    export const dark_brand_text_colors: _EuiThemeBrandTextColors = {

packages/eui-theme-common/src/global_styling/functions/_colors.scss

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -16,7 +16,7 @@
  
    // For theming. Checks the text color and tells us whether it's light or dark.

    // Based on that we either tint (add white) or shade (add black).

    @function tintOrShade($color, $tint, $shade) {

      @if (lightness($euiTextColor) > 50) {

      @if (lightness($euiColorTextParagraph) > 50) {

        @return shade($color, $shade);

      } @else {

        @return tint($color, $tint);

    @@ -25,7 +25,7 @@
  
    // The reverse of the above

    @function shadeOrTint($color, $shade, $tint) {

      @if (lightness($euiTextColor) < 50) {

      @if (lightness($euiColorTextParagraph) < 50) {

        @return shade($color, $shade);

      } @else {

        @return tint($color, $tint);

    @@ -35,7 +35,7 @@
  
    // Similar to above, but uses the light or dark color based

    // on whether it's the light or dark theme

    @function lightOrDarkTheme($lightColor, $darkColor) {

      @if (lightness($euiTextColor) < 50) {

      @if (lightness($euiColorTextParagraph) < 50) {

        @return $lightColor;

      } @else {

        @return $darkColor;

packages/eui-theme-common/src/global_styling/mixins/_form.scss

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -40,7 +40,7 @@
  
    @mixin euiFormControlText {

      @include euiFont;

      font-size: $euiFontSizeS;

      color: $euiTextColor;

      color: $euiColorTextParagraph;

      @include euiPlaceholderPerBrowser {

        color: $euiFormControlPlaceholderText;

    @@ -168,8 +168,8 @@
  
    @mixin euiFormControlReadOnlyStyle {

      cursor: default;

      color: $euiTextColor;

      -webkit-text-fill-color: $euiTextColor; // Required for Safari

      color: $euiColorTextParagraph;

      -webkit-text-fill-color: $euiColorTextParagraph; // Required for Safari

      // Use transparency since there is no border and in case form is on a non-white background

      background: $euiFormBackgroundReadOnlyColor;

      border-color: transparent;

packages/eui-theme-common/src/global_styling/mixins/_shadow.scss

-Original file line number
+Diff line change
@@ -1,5 +1,5 @@
     @function shadowOpacity($opacity) {
-      @if (lightness($euiTextColor) < 50) {
+      @if (lightness($euiColorTextParagraph) < 50) {
         @return $opacity * 1;
       } @else {
         @return $opacity * 2.5;
@@ Expand Down @@

packages/eui-theme-common/src/global_styling/mixins/_typography.scss

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -53,13 +53,13 @@
  
    }

    @mixin euiText {

      color: $euiTextColor;

      color: $euiColorTextParagraph;

      font-weight: $euiFontWeightRegular;

    }

    @mixin euiTitle($size: 'm') {

      @include euiTextBreakWord;

      color: $euiTitleColor;

      color: $euiColorTextHeading;

      @if (map-has-key($euiTitles, $size)) {

        @each $property, $value in map-get($euiTitles, $size) {

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -241,6 +241,10 @@ export type _EuiThemeBorderColors = { @@
       borderBasePlain: ColorModeSwitch;
       borderBaseSubdued: ColorModeSwitch;
       borderBaseDisabled: ColorModeSwitch;
+      /**
+       * Border used for floating elements on dark mode (e.g. popovers or tooltips)
+       * to increase the contrast with the background.
+       */
       borderBaseFloating: ColorModeSwitch;
       borderBaseFormsColorSwatch: ColorModeSwitch;
@@ Expand Down @@

packages/eui/generator-eui/component/templates/component.styles.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,7 @@ import { UseEuiTheme } from '../../services'; @@
     export const <%= cssClassName %>Styles = ({ euiTheme }: UseEuiTheme) => {
       return {
         <%= cssClassName %>: css` // Always start the object with the first key being the name of the component
-          color: ${euiTheme.colors.primaryText};
+          color: ${euiTheme.colors.textPrimary};
         `,
       };
     };

packages/eui/src-docs/src/components/guide_page/_guide_page.scss

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -28,11 +28,11 @@
  
    }

    .euiSideNavItem--trunk > .euiSideNavItemButton .guideSideNav__item--inSearch .euiMark {

      color: $euiColorPrimaryText;

      color: $euiColorTextPrimary;

    }

    .guideSideNav__item--openSubTitle {

      color: $euiTitleColor;

      color: $euiColorTextHeading;

    }

    @include euiBreakpoint('xs', 's') {

packages/eui/src-docs/src/components/guide_section/_guide_section.scss

-Original file line number
+Diff line change
@@ Expand Up / @@ -26,7 +26,7 @@ @@
     }
     .guideDemo__ghostBackground {
-      @if (lightness($euiTextColor) < 50) {
+      @if (lightness($euiColorTextParagraph) < 50) {
         color: $euiColorGhost;
         // Override EuiPanel specificity
         background: $euiColorDarkestShade !important; // stylelint-disable-line declaration-no-important
@@ Expand Down @@

packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -96,7 +96,10 @@ export const GuideThemeSelector: React.FunctionComponent< @@
           <EuiHorizontalRule margin="none" />
           {toggles.map((item) =>
             item ? (
-              <div css={({ euiTheme }) => ({ padding: euiTheme.size.s })}>
+              <div
+                key={item.label}
+                css={({ euiTheme }) => ({ padding: euiTheme.size.s })}
+              >
                 <EuiSwitch
                   compressed
                   label={item.label}
@@ Expand Down @@

packages/eui/src-docs/src/views/comment/comment_props.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -93,7 +93,7 @@ export default ({ snippet }: { snippet: ReactNode }) => { @@
                       <EuiAvatar
                         name="event icon"
                         size="s"
-                        color={euiTheme.colors.primaryText}
+                        color={euiTheme.colors.textPrimary}
                         initials="B"
                       />
                     </span>
@@ Expand Down @@

packages/eui/src-docs/src/views/guidelines/_index.scss

-Original file line number
+Diff line change
@@ Expand Up / @@ -227,7 +227,18 @@ @@
     }
     .guideSass__euiColorWarningText {
-      color: $euiColorWarningText;
+      color: $euiColorTextWarning;
+    }
+    .guideSass__euiColorBackgroundFilledWarning {
+      padding: $euiSizeS;
+      color: $euiColorInk;
+      background: $euiColorBackgroundFilledWarning;
+    }
+    .guideSass__euiColorBorderBaseWarning {
+      padding: $euiSizeS;
+      border: $euiBorderWidthThin solid $euiColorBorderBaseWarning;
     }
     .guideSass__tintMediumShade {
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Visual Refresh] Update docs to reflect new tokens #8306

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!