Merge branch 'main' into feat/props-ouiFlexItem

CHANGELOG.md

@@ -18,6 +18,7 @@
 
 - Add exit code to compile-scss script on failure ([#1024](https://github.com/opensearch-project/oui/pull/1024))
 - Correct file path for import of Query component ([#1069](https://github.com/opensearch-project/oui/pull/1069))
+- Fix "Guidelines" documentation links rendering blank pages ([#1111](https://github.com/opensearch-project/oui/pull/1111))
 
 ### 🚞 Infrastructure
 

src-docs/src/views/guidelines/colors/_utilities.js

@@ -11,8 +11,9 @@
 
 import React, { useContext } from 'react';
 import { ThemeContext } from '../../../components';
-import { calculateContrast, rgbToHex } from '../../../../../src/services';
+import { calculateContrast } from '../../../../../src/services';
 import { getSassVars } from '../_get_sass_vars';
+import { hexToRgb } from '../../../../../src/services/color/hex_to_rgb';
 
 import { OuiBadge, OuiCopy, OuiFlexItem } from '../../../../../src/components';
 import { OuiIcon } from '../../../../../src/components/icon';
@@ -74,8 +75,8 @@ export const ratingAll = <OuiBadge color="#eee">ALL</OuiBadge>;
 
 function getContrastRatings(background, foreground, palette) {
   const contrast = calculateContrast(
-    [palette[background].r, palette[background].g, palette[background].b],
-    [palette[foreground].r, palette[foreground].g, palette[foreground].b]
+    hexToRgb(palette[background]),
+    hexToRgb(palette[foreground])
   );
 
   let contrastRating;
@@ -151,8 +152,8 @@ color: $${foreground};`;
             onClickAriaLabel="Click to copy SASS configurations"
             disabled={!contastIsAcceptableToCopy}
             style={{
-              backgroundColor: palette[background].rgba,
-              color: palette[foreground].rgba,
+              backgroundColor: palette[background],
+              color: palette[foreground],
             }}>
             {foreground}
           </OuiBadge>
@@ -161,8 +162,3 @@ color: $${foreground};`;
     </OuiFlexItem>
   );
 };
-
-export function getHexValueFromColorName(palette, colorName, key) {
-  const hex = key ? palette[colorName][key] : palette[colorName];
-  return rgbToHex(hex.rgba).toUpperCase();
-}

src-docs/src/views/guidelines/colors/color_section.js

@@ -23,7 +23,6 @@ import {
   OuiPanel,
 } from '../../../../../src/components';
 import {
-  getHexValueFromColorName,
   ColorsContrastItem,
   allowedColors,
   textVariants,
@@ -40,7 +39,7 @@ export const ColorSection = ({
   const theme = useContext(ThemeContext).theme;
   const palette = getSassVars(theme);
   const colorsForContrast = showTextVariants ? textVariants : allowedColors;
-  const hex = getHexValueFromColorName(palette, color);
+  const hex = palette[color];
   const iconClass =
     color.includes('Lightest') ||
     color.includes('Empty') ||

src-docs/src/views/guidelines/colors/core_palette.js

@@ -20,7 +20,6 @@ import {
   OuiScreenReaderOnly,
   OuiPanel,
 } from '../../../../../src/components';
-import { rgbToHex } from '../../../../../src/services';
 
 export function scrollToSelector(selector, attempts = 5) {
   const element = document.querySelector(selector);
@@ -46,7 +45,7 @@ export const CorePalette = ({ theme, colors }) => {
       <OuiFlexItem key={index} grow={false}>
         <OuiCopy
           title={`$${color}:
-          ${rgbToHex(hex.rgba).toUpperCase()}`}
+          ${hex}`}
           beforeMessage={
             <small>
               <kbd>Click</kbd> to copy color name
@@ -66,7 +65,7 @@ export const CorePalette = ({ theme, colors }) => {
                 className={iconClass}
                 size="xxl"
                 type="stopFilled"
-                color={rgbToHex(hex.rgba)}
+                color={hex}
               />
               <OuiScreenReaderOnly>
                 <span>{color}</span>

src-docs/src/views/guidelines/colors/vis_palette.js

@@ -21,9 +21,9 @@ import {
   OuiText,
   OuiPanel,
 } from '../../../../../src/components';
-import { rgbToHex } from '../../../../../src/services';
 
 export const VisPalette = ({ variant }) => {
+  // ouiPaletteColorBlind() is currently shared across themes and dark/light modes. This will need to be  made dynamic once we have different visualization palettes as in https://github.com/opensearch-project/oui/issues/818
   const visColors = getSassVars('light').ouiPaletteColorBlind;
   const visColorKeys = Object.keys(getSassVars('light').ouiPaletteColorBlind);
 
@@ -41,7 +41,7 @@ export const VisPalette = ({ variant }) => {
                   onClick={copy}
                   size="xl"
                   type="stopFilled"
-                  color={rgbToHex(hex.rgba)}
+                  color={hex}
                 />
               )}
             </OuiCopy>
@@ -54,7 +54,7 @@ export const VisPalette = ({ variant }) => {
           <OuiFlexItem>
             <OuiText size="s" color="subdued">
               <p>
-                <code>{rgbToHex(hex.rgba).toUpperCase()}</code>
+                <code>{hex}</code>
               </p>
             </OuiText>
           </OuiFlexItem>

src-docs/src/views/guidelines/sass.js

@@ -14,7 +14,6 @@ import sizes from '!!variables-from-scss!!../../../../src/global_styling/variabl
 import zindexs from '!!variables-from-scss!!../../../../src/global_styling/variables/_z_index.scss';
 import animations from '!!variables-from-scss!!../../../../src/global_styling/variables/_animations.scss';
 import breakpoints from '!!variables-from-scss!!../../../../src/global_styling/variables/_responsive.scss';
-import { rgbToHex } from '../../../../src/services';
 
 import { Link } from 'react-router-dom';
 
@@ -113,7 +112,7 @@ function renderPaletteColor(palette, color) {
       <OuiFlexItem grow={false}>
         <div
           className="guideSass__swatch"
-          style={{ background: rgbToHex(palette[color].rgba).toUpperCase() }}
+          style={{ background: palette[color] }}
         />
       </OuiFlexItem>
       <OuiFlexItem grow={false}>

wiki/consuming.md

@@ -91,7 +91,7 @@ If you want to use the new, but in progress Next theme, you can import it simila
 
 ### Using Sass to customize OUI
 
-OUI's Sass themes are token based, which can be altered to suite your theming needs like changing the primary color. Simply declare your token overrides before importing the whole OUI theme. This will re-compile **all of the OUI components** with your colors.
+OUI's Sass themes are token based, which can be altered to suit your theming needs like changing the primary color. Simply declare your token overrides before importing the whole OUI theme. This will re-compile **all of the OUI components** with your colors.
 
 *Do not use in conjunction with the compiled CSS.*