@carbon/themes 10.48.0-rc.0 → 10.48.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.48.0-rc.0",
+  "version": "10.48.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@carbon/colors": "^10.34.0",
     "@carbon/layout": "^10.34.0",
-    "@carbon/type": "^10.39.0-rc.0",
+    "@carbon/type": "^10.39.0",
     "color": "^3.1.2"
   },
   "devDependencies": {
@@ -49,5 +49,5 @@
     "rimraf": "^3.0.0"
   },
   "sideEffects": false,
-  "gitHead": "f6e5dd2362aa2970add45c7fb7fc32841c252671"
+  "gitHead": "3e014d3be20089ade76dddea87c94ab2171e6fd7"
 }

package/scss/modules/generated/_themes.scss

@@ -66,16 +66,16 @@ $white: (
   border-strong-03: #8d8d8d,
   border-inverse: #161616,
   border-interactive: #0f62fe,
-  border-disabled: #f4f4f4,
+  border-disabled: #c6c6c6,
   text-primary: #161616,
   text-secondary: #525252,
-  text-placeholder: #a8a8a8,
+  text-placeholder: rgba(22, 22, 22, 0.4),
   text-helper: #6f6f6f,
   text-error: #da1e28,
   text-inverse: #ffffff,
   text-on-color: #ffffff,
   text-on-color-disabled: #8d8d8d,
-  text-disabled: #c6c6c6,
+  text-disabled: rgba(22, 22, 22, 0.25),
   link-primary: #0f62fe,
   link-primary-hover: #0043ce,
   link-secondary: #0043ce,
@@ -171,16 +171,16 @@ $g10: (
   border-strong-03: #8d8d8d,
   border-inverse: #161616,
   border-interactive: #0f62fe,
-  border-disabled: #ffffff,
+  border-disabled: #c6c6c6,
   text-primary: #161616,
   text-secondary: #525252,
-  text-placeholder: #a8a8a8,
+  text-placeholder: rgba(22, 22, 22, 0.4),
   text-helper: #6f6f6f,
   text-error: #da1e28,
   text-inverse: #ffffff,
   text-on-color: #ffffff,
   text-on-color-disabled: #8d8d8d,
-  text-disabled: #c6c6c6,
+  text-disabled: rgba(22, 22, 22, 0.25),
   link-primary: #0f62fe,
   link-primary-hover: #0043ce,
   link-secondary: #0043ce,
@@ -276,16 +276,16 @@ $g90: (
   border-strong-03: #c6c6c6,
   border-inverse: #f4f4f4,
   border-interactive: #4589ff,
-  border-disabled: #393939,
+  border-disabled: rgba(141, 141, 141, 0.5),
   text-primary: #f4f4f4,
   text-secondary: #c6c6c6,
-  text-placeholder: #8d8d8d,
+  text-placeholder: rgba(244, 244, 244, 0.4),
   text-helper: #c6c6c6,
   text-error: #ffb3b8,
   text-inverse: #161616,
   text-on-color: #ffffff,
-  text-on-color-disabled: #a8a8a8,
-  text-disabled: #6f6f6f,
+  text-on-color-disabled: rgba(255, 255, 255, 0.25),
+  text-disabled: rgba(244, 244, 244, 0.25),
   link-primary: #78a9ff,
   link-primary-hover: #a6c8ff,
   link-secondary: #a6c8ff,
@@ -295,7 +295,7 @@ $g90: (
   icon-secondary: #c6c6c6,
   icon-inverse: #161616,
   icon-on-color: #ffffff,
-  icon-on-color-disabled: #a8a8a8,
+  icon-on-color-disabled: rgba(255, 255, 255, 0.25),
   icon-disabled: #6f6f6f,
   support-error: #ff8389,
   support-success: #42be65,
@@ -381,16 +381,16 @@ $g100: (
   border-strong-03: #a8a8a8,
   border-inverse: #f4f4f4,
   border-interactive: #4589ff,
-  border-disabled: #262626,
+  border-disabled: rgba(141, 141, 141, 0.5),
   text-primary: #f4f4f4,
   text-secondary: #c6c6c6,
-  text-placeholder: #6f6f6f,
+  text-placeholder: rgba(244, 244, 244, 0.4),
   text-helper: #a8a8a8,
   text-error: #ffb3b8,
   text-inverse: #161616,
   text-on-color: #ffffff,
-  text-on-color-disabled: #a8a8a8,
-  text-disabled: #525252,
+  text-on-color-disabled: rgba(255, 255, 255, 0.25),
+  text-disabled: rgba(244, 244, 244, 0.25),
   link-primary: #78a9ff,
   link-primary-hover: #a6c8ff,
   link-secondary: #a6c8ff,
@@ -400,7 +400,7 @@ $g100: (
   icon-secondary: #c6c6c6,
   icon-inverse: #161616,
   icon-on-color: #ffffff,
-  icon-on-color-disabled: #a8a8a8,
+  icon-on-color-disabled: rgba(255, 255, 255, 0.25),
   icon-disabled: #525252,
   support-error: #fa4d56,
   support-success: #42be65,

package/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;

package/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

package/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

package/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;

package/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();
+}