Merge pull request #3671 from relative-ci/improve-ui

enhance(ui): Improve grayscale contrast
relative-ci · Aug 6, 2023 · 6dcc662 · 6dcc662
2 parents dfe7cd7 + c77a345
commit 6dcc662
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 28 deletions.
diff --git a/packages/ui/src/components/run-info/run-info.module.css b/packages/ui/src/components/run-info/run-info.module.css
@@ -3,7 +3,14 @@
   font-weight: bold;
   font-size: var(--size-xsmall);
   text-transform: uppercase;
+}
+
+.titleText {
+  max-width: 100%;
+  flex: 1 1 auto;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .titleIcon {

diff --git a/packages/ui/src/components/run-info/run-info.tsx b/packages/ui/src/components/run-info/run-info.tsx
@@ -59,7 +59,12 @@ export const RunInfo = ({
   enhance = false,
   ...restProps
 }: RunInfoProps & React.ComponentProps<'div'>) => {
-  const rootClassName = cx(css.root, className, css[size], (delta || deltaPercentage) && css.showDelta);
+  const rootClassName = cx(
+    css.root,
+    className,
+    css[size],
+    (delta || deltaPercentage) && css.showDelta,
+  );
 
   const currentValueParams: [React.ReactNode, string?] = useMemo(() => {
     if (!enhance || typeof current !== 'string') {
@@ -73,7 +78,7 @@ export const RunInfo = ({
     <Component className={rootClassName} {...restProps}>
       {title && (
         <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
-          <span>{title}</span>
+          <span className={css.titleText}>{title}</span>
           {titleHoverCard && (
             <HoverCard
               label={<Icon glyph={Icon.ICONS.HELP} />}
@@ -102,11 +107,17 @@ export const RunInfo = ({
               <FlexStack space="xxxsmall" alignItems="center">
                 {deltaPercentage && (
                   <FlexStack space="xxxsmall" alignItems="center">
-                    <Delta className={css.delta} displayValue={deltaPercentage} deltaType={deltaType} />
+                    <Delta
+                      className={css.delta}
+                      displayValue={deltaPercentage}
+                      deltaType={deltaType}
+                    />
                     {' / '}
                   </FlexStack>
                 )}
-                {delta && <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />}
+                {delta && (
+                  <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />
+                )}
               </FlexStack>
             )}
           </Metric>

diff --git a/packages/ui/src/css/variables.css b/packages/ui/src/css/variables.css
@@ -29,20 +29,19 @@
   /*
    * Color scheme:
    * https://coolors.co/287acc-da444e-55b950-f6e179-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f3d966&mcgpalette3=%23353138&mcgpalette4=%23287acc&themename=mcgtheme
+   * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
    */
-  --color-gray-25: #f7f7f9;
-  --color-gray-50: #ececee;
-  --color-gray-100: #ced0d4;
-  --color-gray-200: #aeb1b7;
-  --color-gray-300: #8e929a;
-  --color-gray-400: #757a85;
-  --color-gray-500: #5d636f;
-  --color-gray-600: #555b67;
-  --color-gray-700: #4b515c;
-  --color-gray-800: #414752;
-  --color-gray-900: #303540;
-
+  --color-gray-25: #f9f9fa;
+  --color-gray-50: #e8e8e9;
+  --color-gray-200: #a2a0a4;
+  --color-gray-300: #7e7b80;
+  --color-gray-400: #59565c;
+  --color-gray-500: #353138;
+  --color-gray-600: #302b31;
+  --color-gray-700: #2a252a;
+  --color-gray-800: #231e22;
+  --color-gray-900: #1c181b;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -103,17 +102,17 @@
   --color-green-dark: var(--color-green-700);
   --color-green-ultra-dark: var(--color-green-900);
 
-  --color-yellow-25: #FFFDF2;
-  --color-yellow-50: #fefbef;
-  --color-yellow-100: #fcf6d7;
-  --color-yellow-200: #fbf0bc;
-  --color-yellow-300: #f9eaa1;
-  --color-yellow-400: #f7e68d;
-  --color-yellow-500: #f6e179;
-  --color-yellow-600: #f5dd71;
-  --color-yellow-700: #f3d966;
-  --color-yellow-800: #f2d55c;
-  --color-yellow-900: #efcd49;
+  --color-yellow-25: #fffdf2;
+  --color-yellow-50: #fefaed;
+  --color-yellow-100: #fbf4d1;
+  --color-yellow-200: #f9ecb3;
+  --color-yellow-300: #f7e494;
+  --color-yellow-400: #f5df7d;
+  --color-yellow-500: #f3d966;
+  --color-yellow-600: #f1d55e;
+  --color-yellow-700: #efcf53;
+  --color-yellow-800: #edca49;
+  --color-yellow-900: #eac038;
 
   --color-yellow-light-background: var(--color-yellow-25);
   --color-yellow-ultra-light: var(--color-yellow-100);