feat(Tailwind): add brand colors to tailwind

bin/build_tokens.js

@@ -158,6 +158,14 @@ StyleDictionary.registerFormat({
     const alphaDarkColors = getScalesAndCSSCustomProperties(COMPILED_TOKENS.color.alpha.dark);
     const alphaLightColors = getScalesAndCSSCustomProperties(COMPILED_TOKENS.color.alpha.light);
     const borderColors = getScalesAndCSSCustomProperties(COMPILED_TOKENS.border.color);
+    const brandColors = {
+      'brand-white': f.cssCustomPropertyWithValue(COMPILED_TOKENS.color['brand-white']),
+      'brand-charcoal': f.cssCustomPropertyWithValue(COMPILED_TOKENS.color['brand-charcoal']),
+      'brand-orange': getScalesAndCSSCustomProperties(COMPILED_TOKENS.color['brand-orange']),
+      'brand-purple': getScalesAndCSSCustomProperties(COMPILED_TOKENS.color['brand-purple']),
+      'brand-gray': getScalesAndCSSCustomProperties(COMPILED_TOKENS.color['brand-gray']),
+      'brand-pink': getScalesAndCSSCustomProperties(COMPILED_TOKENS.color['brand-pink']),
+    };
 
     return `${fileHeader({ file })}
     const baseColors = ${JSON.stringify(baseColors)};
@@ -169,6 +177,7 @@ StyleDictionary.registerFormat({
     const iconColors = ${JSON.stringify(iconColors)};
     const alphaDarkColors = ${JSON.stringify(alphaDarkColors)};
     const alphaLightColors = ${JSON.stringify(alphaLightColors)};
+    const brandColors = ${JSON.stringify(brandColors)};
 
     const colors = {
       inherit: 'inherit',
@@ -183,7 +192,8 @@ StyleDictionary.registerFormat({
       ...baseColors,
       ...themeColors,
       ...dataVizColors,
-      };
+      ...brandColors,
+    };
 
     const backgroundColor = {
       ...colors,

src/tokens/build/tailwind/tokens.cjs

@@ -263,6 +263,29 @@ const alphaLightColors = {
   24: 'var(--gl-color-alpha-light-24, rgba(255, 255, 255, 0.24))',
   36: 'var(--gl-color-alpha-light-36, rgba(255, 255, 255, 0.36))',
 };
+const brandColors = {
+  'brand-white': 'var(--gl-color-brand-white, #fff)',
+  'brand-charcoal': 'var(--gl-color-brand-charcoal, #171321)',
+  'brand-orange': {
+    '01g': 'var(--gl-color-brand-orange-01g, #ffd1bf)',
+    '01p': 'var(--gl-color-brand-orange-01p, #fca326)',
+    '02p': 'var(--gl-color-brand-orange-02p, #fc6d26)',
+    '03p': 'var(--gl-color-brand-orange-03p, #e24329)',
+  },
+  'brand-purple': {
+    '01g': 'var(--gl-color-brand-purple-01g, #ceb3ef)',
+    '01p': 'var(--gl-color-brand-purple-01p, #a989f5)',
+    '02p': 'var(--gl-color-brand-purple-02p, #7759c2)',
+  },
+  'brand-gray': {
+    '01': 'var(--gl-color-brand-gray-01, #d1d0d3)',
+    '02': 'var(--gl-color-brand-gray-02, #a2a1a6)',
+    '03': 'var(--gl-color-brand-gray-03, #74717a)',
+    '04': 'var(--gl-color-brand-gray-04, #45424d)',
+    '05': 'var(--gl-color-brand-gray-05, #2b2838)',
+  },
+  'brand-pink': { '01g': 'var(--gl-color-brand-pink-01g, #ffb9c9)' },
+};
 
 const colors = {
   inherit: 'inherit',
@@ -277,6 +300,7 @@ const colors = {
   ...baseColors,
   ...themeColors,
   ...dataVizColors,
+  ...brandColors,
 };
 
 const backgroundColor = {