fix(theme): update tokens with opacity/alpha for improved visibility (#10256)

* fix(theme): update tokens with opacity/alpha for improved visibility

* fix(theme): correct adjustAlpha syntax error

* docs(search): add disabled story

* docs(theme): adjustAlpha comment improvements

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: tay1orjones

packages/react/src/components/Search/next/Search.stories.js

@@ -23,6 +23,19 @@ export const Default = () => (
   />
 );
 
+export const Disabled = () => (
+  <Search
+    disabled
+    size="lg"
+    defaultValue="A default value"
+    labelText="Search"
+    closeButtonLabelText="Clear search input"
+    id="search-1"
+    onChange={() => {}}
+    onKeyDown={() => {}}
+  />
+);
+
 export const Expandable = () => (
   <ExpandableSearch
     size="lg"

packages/styles/scss/components/button/_tokens.scss

@@ -330,11 +330,11 @@ $button-disabled: (
     ),
     (
       theme: themes.$g90,
-      value: #6f6f6f,
+      value: rgba(141, 141, 141, 0.3),
     ),
     (
       theme: themes.$g100,
-      value: #525252,
+      value: rgba(141, 141, 141, 0.3),
     ),
   ),
 ) !default;

packages/themes/src/next/g10.js

@@ -39,7 +39,7 @@ import {
   white,
   whiteHover,
 } from '@carbon/colors';
-import { adjustLightness } from '../tools';
+import { adjustLightness, adjustAlpha } from '../tools';
 
 // Background
 export const background = gray10;
@@ -137,18 +137,18 @@ export const borderInverse = gray100;
 export const borderInteractive = blue60;
 
 // border
-export const borderDisabled = white;
+export const borderDisabled = gray30;
 
 // Text
 export const textPrimary = gray100;
 export const textSecondary = gray70;
-export const textPlaceholder = gray40;
+export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
 export const textHelper = gray60;
 export const textError = red60;
 export const textInverse = white;
 export const textOnColor = white;
 export const textOnColorDisabled = gray50;
-export const textDisabled = gray30;
+export const textDisabled = adjustAlpha(textPrimary, 0.25);
 
 // Link
 export const linkPrimary = blue60;

packages/themes/src/next/g100.js

@@ -46,7 +46,7 @@ import {
   // Tools
   rgba,
 } from '@carbon/colors';
-import { adjustLightness } from '../tools';
+import { adjustLightness, adjustAlpha } from '../tools';
 
 // Background
 export const background = gray100;
@@ -144,18 +144,18 @@ export const borderInverse = gray10;
 export const borderInteractive = blue50;
 
 // border
-export const borderDisabled = gray90;
+export const borderDisabled = adjustAlpha(gray50, 0.5);
 
 // Text
 export const textPrimary = gray10;
 export const textSecondary = gray30;
-export const textPlaceholder = gray60;
+export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
 export const textHelper = gray40;
 export const textError = red30;
 export const textInverse = gray100;
 export const textOnColor = white;
-export const textOnColorDisabled = gray40;
-export const textDisabled = gray70;
+export const textOnColorDisabled = adjustAlpha(textOnColor, 0.25);
+export const textDisabled = adjustAlpha(textPrimary, 0.25);
 
 // Link
 export const linkPrimary = blue40;
@@ -169,7 +169,7 @@ export const iconPrimary = gray10;
 export const iconSecondary = gray30;
 export const iconInverse = gray100;
 export const iconOnColor = white;
-export const iconOnColorDisabled = gray40;
+export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
 export const iconDisabled = gray70;
 
 // Support

packages/themes/src/next/g90.js

@@ -45,7 +45,7 @@ import {
   // Tools
   rgba,
 } from '@carbon/colors';
-import { adjustLightness } from '../tools';
+import { adjustLightness, adjustAlpha } from '../tools';
 
 // Background
 export const background = gray90;
@@ -143,18 +143,18 @@ export const borderInverse = gray10;
 export const borderInteractive = blue50;
 
 // border
-export const borderDisabled = gray80;
+export const borderDisabled = adjustAlpha(gray50, 0.5);
 
 // Text
 export const textPrimary = gray10;
 export const textSecondary = gray30;
-export const textPlaceholder = gray50;
+export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
 export const textHelper = gray30;
 export const textError = red30;
 export const textInverse = gray100;
 export const textOnColor = white;
-export const textOnColorDisabled = gray40;
-export const textDisabled = gray60;
+export const textOnColorDisabled = adjustAlpha(textOnColor, 0.25);
+export const textDisabled = adjustAlpha(textPrimary, 0.25);
 
 // Link
 export const linkPrimary = blue40;
@@ -168,7 +168,7 @@ export const iconPrimary = gray10;
 export const iconSecondary = gray30;
 export const iconInverse = gray100;
 export const iconOnColor = white;
-export const iconOnColorDisabled = gray40;
+export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
 export const iconDisabled = gray60;
 
 // Support

packages/themes/src/next/white.js

@@ -38,7 +38,7 @@ import {
   white,
   whiteHover,
 } from '@carbon/colors';
-import { adjustLightness } from '../tools';
+import { adjustLightness, adjustAlpha } from '../tools';
 
 // Background
 export const background = white;
@@ -136,18 +136,18 @@ export const borderInverse = gray100;
 export const borderInteractive = blue60;
 
 // border
-export const borderDisabled = gray10;
+export const borderDisabled = gray30;
 
 // Text
 export const textPrimary = gray100;
 export const textSecondary = gray70;
-export const textPlaceholder = gray40;
+export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
 export const textHelper = gray60;
 export const textError = red60;
 export const textInverse = white;
 export const textOnColor = white;
 export const textOnColorDisabled = gray50;
-export const textDisabled = gray30;
+export const textDisabled = adjustAlpha(textPrimary, 0.25);
 
 // Link
 export const linkPrimary = blue60;

packages/themes/src/tools.js

@@ -23,3 +23,15 @@ export function adjustLightness(token, shift) {
     .hex()
     .toLowerCase();
 }
+
+/**
+ * Adjust a given token's alpha by a specified amount
+ * Example: token = rgba(10, 10, 10, 1.0);
+ * adjustAlpha(token, 0.3) === rgba(10, 10, 10, 0.3);
+ * @param {string} token
+ * @param {float} alpha
+ * @returns {string}
+ */
+export function adjustAlpha(token, alpha) {
+  return Color(token).rgb().alpha(alpha).string();
+}