[Theming] More color options and better docs (#5939)

* Slight adjustment to `lightestShade` and `body` colors
* Added `method: transparent` option to `useEuiBackgroundColor`
* Setup for base button colors
* [Colors] Using tabbed docs page and creating Functions tab
  * Moved contrast utilities section and simplified
  * Moved transparency to theme and simplified
  * Moved shade/tint functions
  * Moved isDark to theme
* Moved Sizing to a tabbed page
* Update contrast sections
* Moved text utilities to `Theming / Typography` now with tabs
* Moved `Utilities / Responsive` to `Theme / Breakpoints/ Utilities`
* Passing `euiTheme.breakpoint` to `getBreakpoint()`

Author: cchaos

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

@@ -64,7 +64,11 @@ $guideSideNavWidth: 240px;
 }
 
 .euiSideNavItem--trunk > .euiSideNavItemButton .guideSideNav__item--inSearch .euiMark {
-  color: $euiColorPrimary;
+  color: $euiColorPrimaryText;
+}
+
+.guideSideNav__item--openSubTitle {
+  color: $euiTitleColor;
 }
 
 

src-docs/src/components/guide_page/guide_page_chrome.js

@@ -101,6 +101,18 @@ export class GuidePageChrome extends Component {
     return subSectionsWithTitles.map(({ title, sections }) => {
       const id = slugify(title);
 
+      const subSectionHref = `${href}/${id}`;
+      const subSectionHashIdHref = `${href}#${id}`;
+
+      const sectionHref = sections ? subSectionHref : subSectionHashIdHref;
+      const subItems = sections
+        ? this.renderSubSections(sectionHref, sections, searchTerm)
+        : undefined;
+
+      const isCurrentlyOpenSubSection = window.location.hash.includes(
+        subSectionHref
+      );
+
       let name = title;
       if (searchTerm) {
         name = (
@@ -113,21 +125,15 @@ export class GuidePageChrome extends Component {
         );
       }
 
-      const subSectionHref = `${href}/${id}`;
-      const subSectionHashIdHref = `${href}#${id}`;
-
-      const sectionHref = sections ? subSectionHref : subSectionHashIdHref;
-      const subItems = sections
-        ? this.renderSubSections(sectionHref, sections, searchTerm)
-        : undefined;
-
       return {
         id: sectionHref,
-        name,
+        name: isCurrentlyOpenSubSection ? <strong>{name}</strong> : name,
         href: sectionHref,
+        className: isCurrentlyOpenSubSection
+          ? 'guideSideNav__item--openSubTitle'
+          : '',
         items: subItems,
-        isSelected: window.location.hash.includes(subSectionHref),
-        forceOpen: !!searchTerm,
+        forceOpen: !!searchTerm || isCurrentlyOpenSubSection,
       };
     });
   };

src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx

@@ -49,12 +49,13 @@ const GuideTabbedPageComponent: FunctionComponent<GuideTabbedPageProps> = ({
   const currentLanguage = themeContext.themeLanguage;
   const showSass = currentLanguage.includes('sass');
 
-  const betaBadge = isBeta && (
-    <EuiBetaBadge
-      label="Beta"
-      tooltipContent="This component is still under development and may contain breaking changes in the nearby future."
-    />
-  );
+  const betaBadge =
+    isBeta || (showThemeLanguageToggle && !showSass) ? (
+      <EuiBetaBadge
+        label="Beta"
+        tooltipContent="This component is still under development and may contain breaking changes in the nearby future."
+      />
+    ) : undefined;
 
   let tabs:
     | Array<{

src-docs/src/components/with_theme/language_selector.tsx

@@ -19,7 +19,7 @@ const NOTIF_STORAGE_VALUE = 'dismissed';
 
 export const LanguageSelector = ({
   onChange,
-  showTour = true,
+  showTour = false,
 }: {
   onChange?: (id: string) => void;
   showTour?: boolean;

src-docs/src/routes.js

@@ -36,8 +36,6 @@ import { SitewideSearchExample } from './views/selectable/selectable_sitewide_te
 
 import { ColorPaletteExample } from './views/color_palette/color_palette_example';
 
-import { ColorExample } from './views/color/color_example';
-
 import { PrettyDurationExample } from './views/pretty_duration/pretty_duration_example';
 
 import { UtilityClassesExample } from './views/utility_classes/utility_classes_example';
@@ -191,7 +189,6 @@ import { ResizeObserverExample } from './views/resize_observer/resize_observer_e
 
 import { ResizableContainerExample } from './views/resizable_container/resizable_container_example';
 
-import { ResponsiveExample } from './views/responsive/responsive_example';
 import { ScrollExample } from './views/scroll/scroll_example';
 
 import { SearchBarExample } from './views/search_bar/search_bar_example';
@@ -220,8 +217,6 @@ import { TextDiffExample } from './views/text_diff/text_diff_example';
 
 import { TextExample } from './views/text/text_example';
 
-import { TextUtilitiesExample } from './views/text_utilities/text_utilities_example';
-
 import { TimelineExample } from './views/timeline/timeline_example';
 
 import { TitleExample } from './views/title/title_example';
@@ -242,13 +237,27 @@ import { SuperSelectExample } from './views/super_select/super_select_example';
 
 import { ThemeExample } from './views/theme/theme_example';
 import { ColorModeExample } from './views/theme/color_mode/color_mode_example';
-import Breakpoints from './views/theme/breakpoints/breakpoints';
+import { BreakpointsExample } from './views/theme/breakpoints/breakpoints_example';
 import Borders, { bordersSections } from './views/theme/borders/borders';
-import Color, { colorsSections } from './views/theme/color/colors';
-import Sizing, { sizingSections } from './views/theme/sizing/sizing';
+import Color, { colorsInfo, colorsSections } from './views/theme/color/tokens';
+import ColorContrast, { contrastSections } from './views/theme/color/contrast';
+import ColorFunctions, {
+  colorsFunctionsSections,
+} from './views/theme/color/functions';
+import Sizing, {
+  sizingInfo,
+  sizingSections,
+} from './views/theme/sizing/tokens';
+import SizingFunctions, {
+  sizingFunctionSections,
+} from './views/theme/sizing/functions';
 import Typography, {
+  typographyInfo,
   typographySections,
-} from './views/theme/typography/typography';
+} from './views/theme/typography/values';
+import TextUtilities, {
+  textUtilitiesSections,
+} from './views/theme/typography/utilities';
 import Other, { otherSections } from './views/theme/other/other';
 import ThemeValues from './views/theme/customizing/values';
 
@@ -398,30 +407,62 @@ const navigation = [
     items: [
       createExample(ThemeExample, 'Theme provider'),
       createExample(ColorModeExample),
-      {
-        name: 'Breakpoints',
-        component: Breakpoints,
-      },
+      createTabbedPage(BreakpointsExample),
       {
         name: 'Borders',
         component: Borders,
         sections: bordersSections,
       },
-      {
-        name: 'Colors',
-        component: Color,
-        sections: colorsSections,
-      },
-      {
-        name: 'Sizing',
-        component: Sizing,
-        sections: sizingSections,
-      },
-      {
-        name: 'Typography',
-        component: Typography,
-        sections: typographySections,
-      },
+      createTabbedPage({
+        ...colorsInfo,
+        pages: [
+          {
+            title: 'Values',
+            page: Color,
+            sections: colorsSections,
+          },
+          {
+            title: 'Utilities',
+            page: ColorFunctions,
+            sections: colorsFunctionsSections,
+          },
+          {
+            title: 'Contrast',
+            page: ColorContrast,
+            sections: contrastSections,
+          },
+        ],
+      }),
+      createTabbedPage({
+        ...sizingInfo,
+        pages: [
+          {
+            title: 'Values',
+            page: Sizing,
+            sections: sizingSections,
+          },
+          {
+            title: 'Utilities',
+            page: SizingFunctions,
+            sections: sizingFunctionSections,
+          },
+        ],
+      }),
+      createTabbedPage({
+        ...typographyInfo,
+        pages: [
+          {
+            title: 'Values',
+            page: Typography,
+            sections: typographySections,
+          },
+          {
+            title: 'Utilities',
+            page: TextUtilities,
+            sections: textUtilitiesSections,
+          },
+        ],
+      }),
       {
         name: 'More tokens',
         component: Other,
@@ -564,7 +605,6 @@ const navigation = [
       AccessibilityExample,
       AutoSizerExample,
       BeaconExample,
-      ColorExample,
       ColorPaletteExample,
       CopyExample,
       UtilityClassesExample,
@@ -582,10 +622,8 @@ const navigation = [
       PrettyDurationExample,
       ProviderExample,
       ResizeObserverExample,
-      ResponsiveExample,
       ScrollExample,
       TextDiffExample,
-      TextUtilitiesExample,
       WindowEventExample,
     ].map((example) => createExample(example)),
   },