@carbon/themes 11.10.0 → 11.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "11.10.0",
+  "version": "11.11.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,9 +29,9 @@
     "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && babel-node --presets '@babel/preset-env' tasks/build.js && carbon-cli check \"scss/*.scss\""
   },
   "dependencies": {
-    "@carbon/colors": "^11.6.0",
+    "@carbon/colors": "^11.7.0",
     "@carbon/layout": "^11.7.0",
-    "@carbon/type": "^11.10.0",
+    "@carbon/type": "^11.11.0",
     "color": "^4.0.0"
   },
   "devDependencies": {
@@ -48,5 +48,5 @@
     "rimraf": "^3.0.0"
   },
   "sideEffects": false,
-  "gitHead": "dcf802a75caf0201ac831826f611d24dbe508859"
+  "gitHead": "c77cccfd9ee14e87f60daefbc518d63204606e2b"
 }

package/scss/_component-tokens.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'generated/button-tokens';
+@forward 'generated/tag-tokens';
+@forward 'generated/notification-tokens';

package/scss/generated/_button-tokens.scss

@@ -0,0 +1,115 @@
+// Code generated by @carbon/themes. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+
+$button-danger-active: (
+  white-theme: #750e13,
+  g-10: #750e13,
+  g-90: #750e13,
+  g-100: #750e13,
+) !default;
+
+$button-danger-hover: (
+  white-theme: #b81921,
+  g-10: #b81921,
+  g-90: #b81921,
+  g-100: #b81921,
+) !default;
+
+$button-danger-primary: (
+  white-theme: #da1e28,
+  g-10: #da1e28,
+  g-90: #da1e28,
+  g-100: #da1e28,
+) !default;
+
+$button-danger-secondary: (
+  white-theme: #da1e28,
+  g-10: #da1e28,
+  g-90: #ff8389,
+  g-100: #fa4d56,
+) !default;
+
+$button-disabled: (
+  white-theme: #c6c6c6,
+  g-10: #c6c6c6,
+  g-90: rgb(141 141 141 / 30%),
+  g-100: rgb(141 141 141 / 30%),
+) !default;
+
+$button-primary: (
+  white-theme: #0f62fe,
+  g-10: #0f62fe,
+  g-90: #0f62fe,
+  g-100: #0f62fe,
+) !default;
+
+$button-primary-active: (
+  white-theme: #002d9c,
+  g-10: #002d9c,
+  g-90: #002d9c,
+  g-100: #002d9c,
+) !default;
+
+$button-primary-hover: (
+  white-theme: #0050e6,
+  g-10: #0050e6,
+  g-90: #0050e6,
+  g-100: #0050e6,
+) !default;
+
+$button-secondary: (
+  white-theme: #393939,
+  g-10: #393939,
+  g-90: #6f6f6f,
+  g-100: #6f6f6f,
+) !default;
+
+$button-secondary-active: (
+  white-theme: #6f6f6f,
+  g-10: #6f6f6f,
+  g-90: #393939,
+  g-100: #393939,
+) !default;
+
+$button-secondary-hover: (
+  white-theme: #474747,
+  g-10: #474747,
+  g-90: #5e5e5e,
+  g-100: #5e5e5e,
+) !default;
+
+$button-separator: (
+  fallback: #e0e0e0,
+  white-theme: #e0e0e0,
+  g-10: #e0e0e0,
+  g-90: #161616,
+  g-100: #161616,
+) !default;
+
+$button-tertiary: (
+  white-theme: #0f62fe,
+  g-10: #0f62fe,
+  g-90: #ffffff,
+  g-100: #ffffff,
+) !default;
+
+$button-tertiary-active: (
+  white-theme: #002d9c,
+  g-10: #002d9c,
+  g-90: #c6c6c6,
+  g-100: #c6c6c6,
+) !default;
+
+$button-tertiary-hover: (
+  white-theme: #0050e6,
+  g-10: #0050e6,
+  g-90: #f4f4f4,
+  g-100: #f4f4f4,
+) !default;

package/scss/generated/_notification-tokens.scss

@@ -0,0 +1,88 @@
+// Code generated by @carbon/themes. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+
+$color-map: (
+  yellow-30: #f1c21b,
+  white-0: #ffffff,
+) !default;
+
+$notification-action-hover: (
+  white-theme: #ffffff,
+  g-10: #ffffff,
+) !default;
+
+$notification-action-tertiary-inverse: (
+  white-theme: #ffffff,
+  g-10: #ffffff,
+  g-90: #0f62fe,
+  g-100: #0f62fe,
+) !default;
+
+$notification-action-tertiary-inverse-active: (
+  white-theme: #c6c6c6,
+  g-10: #c6c6c6,
+  g-90: #002d9c,
+  g-100: #002d9c,
+) !default;
+
+$notification-action-tertiary-inverse-hover: (
+  white-theme: #f4f4f4,
+  g-10: #f4f4f4,
+  g-90: #0050e6,
+  g-100: #0050e6,
+) !default;
+
+$notification-action-tertiary-inverse-text: (
+  white-theme: #161616,
+  g-10: #161616,
+  g-90: #ffffff,
+  g-100: #ffffff,
+) !default;
+
+$notification-action-tertiary-inverse-text-on-color-disabled: (
+  white-theme: rgba(255, 255, 255, 0.25),
+  g-10: rgba(255, 255, 255, 0.25),
+  g-90: #8d8d8d,
+  g-100: #8d8d8d,
+) !default;
+
+$notification-background-error: (
+  white-theme: #fff1f1,
+  g-10: #fff1f1,
+  g-90: #393939,
+  g-100: #262626,
+) !default;
+
+$notification-background-info: (
+  white-theme: #edf5ff,
+  g-10: #edf5ff,
+  g-90: #393939,
+  g-100: #262626,
+) !default;
+
+$notification-background-success: (
+  white-theme: #defbe6,
+  g-10: #defbe6,
+  g-90: #393939,
+  g-100: #262626,
+) !default;
+
+$notification-background-warning: (
+  white-theme: (
+    yellow-30: #f1c21b,
+    white-0: #ffffff,
+  ),
+  g-10: (
+    yellow-30: #f1c21b,
+    white-0: #ffffff,
+  ),
+  g-90: #393939,
+  g-100: #262626,
+) !default;

package/scss/generated/_tag-tokens.scss

@@ -0,0 +1,219 @@
+// Code generated by @carbon/themes. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+
+$tag-background-blue: (
+  white-theme: #d0e2ff,
+  g-10: #d0e2ff,
+  g-90: #0043ce,
+  g-100: #0043ce,
+) !default;
+
+$tag-background-cool-gray: (
+  white-theme: #dde1e6,
+  g-10: #dde1e6,
+  g-90: #4d5358,
+  g-100: #4d5358,
+) !default;
+
+$tag-background-cyan: (
+  white-theme: #bae6ff,
+  g-10: #bae6ff,
+  g-90: #00539a,
+  g-100: #00539a,
+) !default;
+
+$tag-background-gray: (
+  white-theme: #e0e0e0,
+  g-10: #e0e0e0,
+  g-90: #525252,
+  g-100: #525252,
+) !default;
+
+$tag-background-green: (
+  white-theme: #a7f0ba,
+  g-10: #a7f0ba,
+  g-90: #0e6027,
+  g-100: #0e6027,
+) !default;
+
+$tag-background-magenta: (
+  white-theme: #ffd6e8,
+  g-10: #ffd6e8,
+  g-90: #9f1853,
+  g-100: #9f1853,
+) !default;
+
+$tag-background-purple: (
+  white-theme: #e8daff,
+  g-10: #e8daff,
+  g-90: #6929c4,
+  g-100: #6929c4,
+) !default;
+
+$tag-background-red: (
+  white-theme: #ffd7d9,
+  g-10: #ffd7d9,
+  g-90: #a2191f,
+  g-100: #a2191f,
+) !default;
+
+$tag-background-teal: (
+  white-theme: #9ef0f0,
+  g-10: #9ef0f0,
+  g-90: #005d5d,
+  g-100: #005d5d,
+) !default;
+
+$tag-background-warm-gray: (
+  white-theme: #e5e0df,
+  g-10: #e5e0df,
+  g-90: #565151,
+  g-100: #565151,
+) !default;
+
+$tag-color-blue: (
+  white-theme: #002d9c,
+  g-10: #002d9c,
+  g-90: #d0e2ff,
+  g-100: #d0e2ff,
+) !default;
+
+$tag-color-cool-gray: (
+  white-theme: #343a3f,
+  g-10: #343a3f,
+  g-90: #dde1e6,
+  g-100: #dde1e6,
+) !default;
+
+$tag-color-cyan: (
+  white-theme: #003a6d,
+  g-10: #003a6d,
+  g-90: #bae6ff,
+  g-100: #bae6ff,
+) !default;
+
+$tag-color-gray: (
+  white-theme: #393939,
+  g-10: #393939,
+  g-90: #e0e0e0,
+  g-100: #e0e0e0,
+) !default;
+
+$tag-color-green: (
+  white-theme: #044317,
+  g-10: #044317,
+  g-90: #a7f0ba,
+  g-100: #a7f0ba,
+) !default;
+
+$tag-color-magenta: (
+  white-theme: #740937,
+  g-10: #740937,
+  g-90: #ffd6e8,
+  g-100: #ffd6e8,
+) !default;
+
+$tag-color-purple: (
+  white-theme: #491d8b,
+  g-10: #491d8b,
+  g-90: #e8daff,
+  g-100: #e8daff,
+) !default;
+
+$tag-color-red: (
+  white-theme: #750e13,
+  g-10: #750e13,
+  g-90: #ffd7d9,
+  g-100: #ffd7d9,
+) !default;
+
+$tag-color-teal: (
+  white-theme: #004144,
+  g-10: #004144,
+  g-90: #9ef0f0,
+  g-100: #9ef0f0,
+) !default;
+
+$tag-color-warm-gray: (
+  white-theme: #3c3838,
+  g-10: #3c3838,
+  g-90: #e5e0df,
+  g-100: #e5e0df,
+) !default;
+
+$tag-hover-blue: (
+  white-theme: #a6c8ff,
+  g-10: #a6c8ff,
+  g-90: #0053ff,
+  g-100: #0053ff,
+) !default;
+
+$tag-hover-cool-gray: (
+  white-theme: #c1c7cd,
+  g-10: #c1c7cd,
+  g-90: #5d646a,
+  g-100: #5d646a,
+) !default;
+
+$tag-hover-cyan: (
+  white-theme: #82cfff,
+  g-10: #82cfff,
+  g-90: #0066bd,
+  g-100: #0066bd,
+) !default;
+
+$tag-hover-gray: (
+  white-theme: #c6c6c6,
+  g-10: #c6c6c6,
+  g-90: #636363,
+  g-100: #636363,
+) !default;
+
+$tag-hover-green: (
+  white-theme: #6fdc8c,
+  g-10: #6fdc8c,
+  g-90: #11742f,
+  g-100: #11742f,
+) !default;
+
+$tag-hover-magenta: (
+  white-theme: #ffafd2,
+  g-10: #ffafd2,
+  g-90: #bf1d63,
+  g-100: #bf1d63,
+) !default;
+
+$tag-hover-purple: (
+  white-theme: #d4bbff,
+  g-10: #d4bbff,
+  g-90: #7c3dd6,
+  g-100: #7c3dd6,
+) !default;
+
+$tag-hover-red: (
+  white-theme: #ffb3b8,
+  g-10: #ffb3b8,
+  g-90: #c21e25,
+  g-100: #c21e25,
+) !default;
+
+$tag-hover-teal: (
+  white-theme: #3ddbd9,
+  g-10: #3ddbd9,
+  g-90: #007070,
+  g-100: #007070,
+) !default;
+
+$tag-hover-warm-gray: (
+  white-theme: #cac5c4,
+  g-10: #cac5c4,
+  g-90: #696363,
+  g-100: #696363,
+) !default;

package/src/component-tokens/button/index.js

@@ -0,0 +1 @@
+export * as buttonTokens from './tokens';

package/src/component-tokens/button/tokens.js

@@ -0,0 +1,123 @@
+const buttonSeparator = {
+  fallback: '#e0e0e0',
+  whiteTheme: '#e0e0e0',
+  g10: '#e0e0e0',
+  g90: '#161616',
+  g100: '#161616',
+};
+
+const buttonPrimary = {
+  whiteTheme: '#0f62fe',
+  g10: '#0f62fe',
+  g90: '#0f62fe',
+  g100: '#0f62fe',
+};
+
+const buttonSecondary = {
+  whiteTheme: '#393939',
+  g10: '#393939',
+  g90: '#6f6f6f',
+  g100: '#6f6f6f',
+};
+
+const buttonTertiary = {
+  whiteTheme: '#0f62fe',
+  g10: '#0f62fe',
+  g90: '#ffffff',
+  g100: '#ffffff',
+};
+
+const buttonDangerPrimary = {
+  whiteTheme: '#da1e28',
+  g10: '#da1e28',
+  g90: '#da1e28',
+  g100: '#da1e28',
+};
+
+const buttonDangerSecondary = {
+  whiteTheme: '#da1e28',
+  g10: '#da1e28',
+  g90: '#ff8389',
+  g100: '#fa4d56',
+};
+
+const buttonDangerActive = {
+  whiteTheme: '#750e13',
+  g10: '#750e13',
+  g90: '#750e13',
+  g100: '#750e13',
+};
+
+const buttonPrimaryActive = {
+  whiteTheme: '#002d9c',
+  g10: '#002d9c',
+  g90: '#002d9c',
+  g100: '#002d9c',
+};
+
+const buttonSecondaryActive = {
+  whiteTheme: '#6f6f6f',
+  g10: '#6f6f6f',
+  g90: '#393939',
+  g100: '#393939',
+};
+
+const buttonTertiaryActive = {
+  whiteTheme: '#002d9c',
+  g10: '#002d9c',
+  g90: '#c6c6c6',
+  g100: '#c6c6c6',
+};
+
+const buttonDangerHover = {
+  whiteTheme: '#b81921',
+  g10: '#b81921',
+  g90: '#b81921',
+  g100: '#b81921',
+};
+
+const buttonPrimaryHover = {
+  whiteTheme: '#0050e6',
+  g10: '#0050e6',
+  g90: '#0050e6',
+  g100: '#0050e6',
+};
+
+const buttonSecondaryHover = {
+  whiteTheme: '#474747',
+  g10: '#474747',
+  g90: '#5e5e5e',
+  g100: '#5e5e5e',
+};
+
+const buttonTertiaryHover = {
+  whiteTheme: '#0050e6',
+  g10: '#0050e6',
+  g90: '#f4f4f4',
+  g100: '#f4f4f4',
+};
+
+const buttonDisabled = {
+  whiteTheme: '#c6c6c6',
+  g10: '#c6c6c6',
+  g90: 'rgb(141 141 141 / 30%)',
+  g100: 'rgb(141 141 141 / 30%)',
+};
+
+export {
+  buttonSeparator,
+  buttonPrimary,
+  buttonSecondary,
+  buttonTertiary,
+  buttonDangerPrimary,
+  buttonDangerSecondary,
+  buttonDangerActive,
+  buttonPrimaryActive,
+  buttonSecondaryActive,
+  buttonTertiaryActive,
+  buttonDangerHover,
+  buttonPrimaryHover,
+  buttonSecondaryHover,
+  buttonTertiaryHover,
+  buttonDisabled,
+};

package/src/component-tokens/notification/index.js

@@ -0,0 +1 @@
+export * as notificationTokens from './tokens';

package/src/component-tokens/notification/tokens.js

@@ -0,0 +1,103 @@
+import {
+  red10,
+  gray80,
+  gray90,
+  green10,
+  blue10,
+  yellow30,
+  white0,
+} from '@carbon/colors';
+import {
+  textInverse as textInverseWhite,
+  textOnColorDisabled as textOnColorDisabledWhite,
+} from '../../white';
+import {
+  textInverse as textInverseG10,
+  textOnColorDisabled as textOnColorDisabledG10,
+} from '../../g10';
+import {
+  textInverse as textInverseG90,
+  textOnColorDisabled as textOnColorDisabledG90,
+} from '../../g90';
+import {
+  textInverse as textInverseG100,
+  textOnColorDisabled as textOnColorDisabledG100,
+} from '../../g100';
+import {
+  buttonTertiaryActive,
+  buttonTertiaryHover,
+  buttonTertiary,
+} from '../button/tokens';
+
+export const notificationBackgroundError = {
+  whiteTheme: red10,
+  g10: red10,
+  g90: gray80,
+  g100: gray90,
+};
+
+export const notificationBackgroundSuccess = {
+  whiteTheme: green10,
+  g10: green10,
+  g90: gray80,
+  g100: gray90,
+};
+
+export const notificationBackgroundInfo = {
+  whiteTheme: blue10,
+  g10: blue10,
+  g90: gray80,
+  g100: gray90,
+};
+
+export const colorMap = {
+  yellow30,
+  white0,
+};
+
+export const notificationBackgroundWarning = {
+  whiteTheme: colorMap,
+  g10: colorMap,
+  g90: gray80,
+  g100: gray90,
+};
+
+export const notificationActionHover = {
+  whiteTheme: white0,
+  g10: white0,
+};
+
+export const notificationActionTertiaryInverse = {
+  whiteTheme: buttonTertiary.g100,
+  g10: buttonTertiary.g90,
+  g90: buttonTertiary.g10,
+  g100: buttonTertiary.whiteTheme,
+};
+
+export const notificationActionTertiaryInverseActive = {
+  whiteTheme: buttonTertiaryActive.g100,
+  g10: buttonTertiaryActive.g90,
+  g90: buttonTertiaryActive.g10,
+  g100: buttonTertiaryActive.whiteTheme,
+};
+
+export const notificationActionTertiaryInverseHover = {
+  whiteTheme: buttonTertiaryHover.g100,
+  g10: buttonTertiaryHover.g90,
+  g90: buttonTertiaryHover.g10,
+  g100: buttonTertiaryHover.whiteTheme,
+};
+
+export const notificationActionTertiaryInverseText = {
+  whiteTheme: textInverseG100,
+  g10: textInverseG90,
+  g90: textInverseG10,
+  g100: textInverseWhite,
+};
+
+export const notificationActionTertiaryInverseTextOnColorDisabled = {
+  whiteTheme: textOnColorDisabledG100,
+  g10: textOnColorDisabledG90,
+  g90: textOnColorDisabledG10,
+  g100: textOnColorDisabledWhite,
+};

package/src/component-tokens/tag/index.js

@@ -0,0 +1 @@
+export * as tagTokens from './tokens';