@carbon/themes 11.10.0 → 11.11.0

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

@@ -0,0 +1,260 @@
+import {
+  red20,
+  red70,
+  red80,
+  red30,
+  red70Hover,
+  magenta20,
+  magenta70,
+  magenta80,
+  magenta30,
+  magenta70Hover,
+  purple20,
+  purple70,
+  purple80,
+  purple30,
+  purple70Hover,
+  blue20,
+  blue70,
+  blue80,
+  blue30,
+  blue70Hover,
+  cyan20,
+  cyan70,
+  cyan80,
+  cyan30,
+  cyan70Hover,
+  teal20,
+  teal70,
+  teal80,
+  teal30,
+  teal70Hover,
+  green20,
+  green70,
+  green80,
+  green30,
+  green70Hover,
+  gray20,
+  gray70,
+  gray80,
+  gray30,
+  gray70Hover,
+  warmGray20,
+  warmGray70,
+  warmGray80,
+  warmGray30,
+  warmGray70Hover,
+  coolGray20,
+  coolGray70,
+  coolGray80,
+  coolGray30,
+  coolGray70Hover,
+} from '@carbon/colors';
+
+export const tagBackgroundRed = {
+  whiteTheme: red20,
+  g10: red20,
+  g90: red70,
+  g100: red70,
+};
+
+export const tagColorRed = {
+  whiteTheme: red80,
+  g10: red80,
+  g90: red20,
+  g100: red20,
+};
+
+export const tagHoverRed = {
+  whiteTheme: red30,
+  g10: red30,
+  g90: red70Hover,
+  g100: red70Hover,
+};
+
+export const tagBackgroundMagenta = {
+  whiteTheme: magenta20,
+  g10: magenta20,
+  g90: magenta70,
+  g100: magenta70,
+};
+
+export const tagColorMagenta = {
+  whiteTheme: magenta80,
+  g10: magenta80,
+  g90: magenta20,
+  g100: magenta20,
+};
+
+export const tagHoverMagenta = {
+  whiteTheme: magenta30,
+  g10: magenta30,
+  g90: magenta70Hover,
+  g100: magenta70Hover,
+};
+
+export const tagBackgroundPurple = {
+  whiteTheme: purple20,
+  g10: purple20,
+  g90: purple70,
+  g100: purple70,
+};
+
+export const tagColorPurple = {
+  whiteTheme: purple80,
+  g10: purple80,
+  g90: purple20,
+  g100: purple20,
+};
+
+export const tagHoverPurple = {
+  whiteTheme: purple30,
+  g10: purple30,
+  g90: purple70Hover,
+  g100: purple70Hover,
+};
+
+export const tagBackgroundBlue = {
+  whiteTheme: blue20,
+  g10: blue20,
+  g90: blue70,
+  g100: blue70,
+};
+
+export const tagColorBlue = {
+  whiteTheme: blue80,
+  g10: blue80,
+  g90: blue20,
+  g100: blue20,
+};
+
+export const tagHoverBlue = {
+  whiteTheme: blue30,
+  g10: blue30,
+  g90: blue70Hover,
+  g100: blue70Hover,
+};
+
+export const tagBackgroundCyan = {
+  whiteTheme: cyan20,
+  g10: cyan20,
+  g90: cyan70,
+  g100: cyan70,
+};
+
+export const tagColorCyan = {
+  whiteTheme: cyan80,
+  g10: cyan80,
+  g90: cyan20,
+  g100: cyan20,
+};
+
+export const tagHoverCyan = {
+  whiteTheme: cyan30,
+  g10: cyan30,
+  g90: cyan70Hover,
+  g100: cyan70Hover,
+};
+export const tagBackgroundTeal = {
+  whiteTheme: teal20,
+  g10: teal20,
+  g90: teal70,
+  g100: teal70,
+};
+export const tagColorTeal = {
+  whiteTheme: teal80,
+  g10: teal80,
+  g90: teal20,
+  g100: teal20,
+};
+
+export const tagHoverTeal = {
+  whiteTheme: teal30,
+  g10: teal30,
+  g90: teal70Hover,
+  g100: teal70Hover,
+};
+
+export const tagBackgroundGreen = {
+  whiteTheme: green20,
+  g10: green20,
+  g90: green70,
+  g100: green70,
+};
+
+export const tagColorGreen = {
+  whiteTheme: green80,
+  g10: green80,
+  g90: green20,
+  g100: green20,
+};
+
+export const tagHoverGreen = {
+  whiteTheme: green30,
+  g10: green30,
+  g90: green70Hover,
+  g100: green70Hover,
+};
+
+export const tagBackgroundGray = {
+  whiteTheme: gray20,
+  g10: gray20,
+  g90: gray70,
+  g100: gray70,
+};
+
+export const tagColorGray = {
+  whiteTheme: gray80,
+  g10: gray80,
+  g90: gray20,
+  g100: gray20,
+};
+
+export const tagHoverGray = {
+  whiteTheme: gray30,
+  g10: gray30,
+  g90: gray70Hover,
+  g100: gray70Hover,
+};
+
+export const tagBackgroundCoolGray = {
+  whiteTheme: coolGray20,
+  g10: coolGray20,
+  g90: coolGray70,
+  g100: coolGray70,
+};
+
+export const tagColorCoolGray = {
+  whiteTheme: coolGray80,
+  g10: coolGray80,
+  g90: coolGray20,
+  g100: coolGray20,
+};
+
+export const tagHoverCoolGray = {
+  whiteTheme: coolGray30,
+  g10: coolGray30,
+  g90: coolGray70Hover,
+  g100: coolGray70Hover,
+};
+
+export const tagBackgroundWarmGray = {
+  whiteTheme: warmGray20,
+  g10: warmGray20,
+  g90: warmGray70,
+  g100: warmGray70,
+};
+
+export const tagColorWarmGray = {
+  whiteTheme: warmGray80,
+  g10: warmGray80,
+  g90: warmGray20,
+  g100: warmGray20,
+};
+
+export const tagHoverWarmGray = {
+  whiteTheme: warmGray30,
+  g10: warmGray30,
+  g90: warmGray70Hover,
+  g100: warmGray70Hover,
+};

package/src/index.js

@@ -10,6 +10,10 @@ import * as g10 from './g10';
 import * as g90 from './g90';
 import * as g100 from './g100';
 import * as v10 from './v10';
+import * as buttonTokens from './component-tokens/button';
+import * as tagTokens from './component-tokens/tag';
+import * as notificationTokens from './component-tokens/notification';
+import { formatTokenName } from './tools';
 import { unstable_metadata } from './tokens';
 
 const themes = {
@@ -20,4 +24,16 @@ const themes = {
 };
 
 export * from './white';
-export { white, g10, g90, g100, themes, v10, unstable_metadata };
+export {
+  white,
+  g10,
+  g90,
+  g100,
+  themes,
+  v10,
+  buttonTokens,
+  tagTokens,
+  notificationTokens,
+  unstable_metadata,
+  formatTokenName,
+};

package/src/tools.js

@@ -35,3 +35,43 @@ export function adjustLightness(token, shift) {
 export function adjustAlpha(token, alpha) {
   return Color(token).rgb().alpha(alpha).string();
 }
+
+const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
+/**
+ * Format a given token into the format expected in CSS/SCSS-based projects.
+ * @param {string} token
+ * @returns {string}
+ */
+export function formatTokenName(token) {
+  let string = '';
+
+  for (let i = 0; i < token.length; i++) {
+    // If we run into a number, we hit the scale step at the end of a token name
+    // and can safely truncate the rest of the token
+    if (numbers.indexOf(token[i]) !== -1) {
+      string += '-' + token.slice(i);
+      break;
+    }
+
+    // When encountering an uppercase name, we will want to start adding `-`
+    // between words
+    if (token[i] === token[i].toUpperCase()) {
+      // Check backwards to see if previous letter was also capitalized, if so
+      // we are in a special case like UI where each piece should be connected
+      if (token[i - 1] && token[i - 1] === token[i - 1].toUpperCase()) {
+        string += token[i].toLowerCase();
+        continue;
+      }
+
+      // Otherwise, just concatenate this new part on to the existing string
+      string += '-' + token[i].toLowerCase();
+      continue;
+    }
+
+    // By default, we add the current character to the output string
+    string += token[i];
+  }
+
+  return string;
+}

package/src/v10/tokens.js

@@ -208,46 +208,6 @@ const colors = [
   'danger',
 ];
 
-const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-
-/**
- * Format a given token into the format expected in CSS/SCSS-based projects.
- * @param {string} token
- * @returns {string}
- */
-export function formatTokenName(token) {
-  let string = '';
-
-  for (let i = 0; i < token.length; i++) {
-    // If we run into a number, we hit the scale step at the end of a token name
-    // and can safely truncate the rest of the token
-    if (numbers.indexOf(token[i]) !== -1) {
-      string += '-' + token.slice(i);
-      break;
-    }
-
-    // When encountering an uppercase name, we will want to start adding `-`
-    // between words
-    if (token[i] === token[i].toUpperCase()) {
-      // Check backwards to see if previous letter was also capitalized, if so
-      // we are in a special case like UI where each piece should be connected
-      if (token[i - 1] && token[i - 1] === token[i - 1].toUpperCase()) {
-        string += token[i].toLowerCase();
-        continue;
-      }
-
-      // Otherwise, just concatenate this new part on to the existing string
-      string += '-' + token[i].toLowerCase();
-      continue;
-    }
-
-    // By default, we add the current character to the output string
-    string += token[i];
-  }
-
-  return string;
-}
-
 export const tokens = {
   colors,
   type,