@bitrise/bitkit 12.78.0 → 12.79.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.78.0",
+  "version": "12.79.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Foundations/Colors/Colors.tsx

@@ -2,16 +2,19 @@
 import { Unstyled } from '@storybook/blocks';
 import Provider from '../../Components/Provider/Provider';
 import Divider from '../../Components/Divider/Divider';
-import Palette from './Palette';
+import CommonTokens from './CommonTokens';
 import SystemTokens from './SystemTokens';
+import Palette from './Palette';
 
 const Colors = () => {
   return (
     <Unstyled>
       <Provider>
-        <Palette />
+        <CommonTokens />
         <Divider marginTop="48" marginBottom="32" size="1" />
         <SystemTokens />
+        <Divider marginTop="48" marginBottom="32" size="1" />
+        <Palette />
       </Provider>
     </Unstyled>
   );

package/src/Foundations/Colors/CommonTokens.tsx

@@ -0,0 +1,21 @@
+import { semanticTokens } from '../../tokens/tokens';
+import Card from '../../Components/Card/Card';
+import Text from '../../Components/Text/Text';
+import TokenTable from '../docComponents/TokenTable';
+
+const commonColorKeys = ['background', 'border', 'icon', 'text'];
+
+const CommonTokens = () => (
+  <>
+    <Text as="h2" size="8" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8">
+      Common Tokens
+    </Text>
+    <Card boxShadow="medium" padding="24">
+      {commonColorKeys.map((groupName) => (
+        <TokenTable data={semanticTokens.colors[groupName]} groupName={groupName} key={groupName} marginBottom="24" />
+      ))}
+    </Card>
+  </>
+);
+
+export default CommonTokens;

package/src/Foundations/Colors/SystemTokens.tsx

@@ -3,7 +3,7 @@ import Card from '../../Components/Card/Card';
 import Text from '../../Components/Text/Text';
 import TokenTable from '../docComponents/TokenTable';
 
-const SystemColorKeys = Object.keys(semanticTokens.colors.sys);
+const systemColorKeys = Object.keys(semanticTokens.colors.sys);
 
 const SystemTokens = () => (
   <>
@@ -11,12 +11,13 @@ const SystemTokens = () => (
       System Tokens
     </Text>
     <Card boxShadow="medium" padding="24">
-      {SystemColorKeys.map((groupName) => (
+      {systemColorKeys.map((groupName) => (
         <TokenTable
           data={semanticTokens.colors.sys[groupName]}
           groupName={groupName}
           key={groupName}
           marginBottom="24"
+          tokenPrefix="sys."
         />
       ))}
     </Card>

package/src/Foundations/docComponents/TokenTable.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useEffect, useRef, useState } from 'react';
 import { useToken } from '@chakra-ui/react';
 import CodeSnippet from '../../Components/CodeSnippet/CodeSnippet';
 import Dot from '../../Components/Dot/Dot';
@@ -12,7 +14,17 @@ import Thead from '../../Components/Table/Thead';
 import Tr from '../../Components/Table/Tr';
 
 const Row = ({ token, value }: { token: string; value: string }) => {
-  const finalValue = useToken('colors', value);
+  const themeValue = useToken('colors', value);
+  const [hexa, setHexa] = useState(themeValue);
+
+  const dotRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (dotRef.current && hexa.includes('var(')) {
+      setHexa(getComputedStyle(dotRef.current).getPropertyValue(hexa.replace('var(', '').replace(')', '')));
+    }
+  }, []);
+
   return (
     <Tr role="group">
       <Td>
@@ -21,13 +33,13 @@ const Row = ({ token, value }: { token: string; value: string }) => {
       <Td>
         <>
           <Text marginBottom="8" size="2">
-            {finalValue}
+            {hexa}
           </Text>
           <Text size="2">({value})</Text>
         </>
       </Td>
       <Td>
-        <Dot backgroundColor={token.replace('colors.', '')} size="48" />
+        <Dot backgroundColor={value} border="1px solid" ref={dotRef} size="48" />
       </Td>
     </Tr>
   );
@@ -36,10 +48,11 @@ const Row = ({ token, value }: { token: string; value: string }) => {
 export interface TokenTableProps extends TableContainerProps {
   data: Record<string, string>;
   groupName: string;
+  tokenPrefix?: string;
 }
 
 const TokenTable = (props: TokenTableProps) => {
-  const { data, groupName, ...rest } = props;
+  const { data, groupName, tokenPrefix = '', ...rest } = props;
   return (
     <TableContainer {...rest}>
       <Table>
@@ -53,7 +66,7 @@ const TokenTable = (props: TokenTableProps) => {
         </Thead>
         <Tbody>
           {Object.entries(data).map(([token, value]) => (
-            <Row key={token} token={`colors.sys.${groupName}.${token}`} value={`colors.pal.${value}`} />
+            <Row key={token} token={`${tokenPrefix}${groupName}.${token}`} value={`${value}`} />
           ))}
         </Tbody>
       </Table>

package/src/tokens/tokens.json

@@ -2038,7 +2038,7 @@
             "type": "color"
           },
           "border": {
-            "value": "{color.border.strong}",
+            "value": "{color.sys.border.strong}",
             "type": "color"
           },
           "border-hover": {
@@ -2543,14 +2543,6 @@
             "value": "{typography.font.sans.size-2.semibold}",
             "type": "typography"
           },
-          "placeholder": {
-            "value": "{typography.font.sans.size-3.normal}",
-            "type": "typography"
-          },
-          "inputText": {
-            "value": "{typography.font.sans.size-3.normal}",
-            "type": "typography"
-          },
           "helperText": {
             "value": "{typography.font.sans.size-1.normal}",
             "type": "typography"
@@ -3255,7 +3247,6 @@
         "typography.body.lg.regular": "S:761ca424abf734733758e62320deb038f5e88885,",
         "color.border.regular": "S:b1ef812dec0b5b963251cc48508c80b3e97b245b,",
         "typography.comp.input.label": "S:87701688b92f359799411878297f10d6c1da47c3,",
-        "typography.comp.input.placeholder": "S:437580d08e3247d2c795945eed9d21f63887d3aa,",
         "typography.comp.link.md": "S:327fca25b0d32f4948307ab84bc2db8ded39c0cb,",
         "typography.comp.link.md-hover": "S:3b782ebd3d90936152fec66173dbe656fb4a4918,",
         "typography.comp.link.lg": "S:38f56a952cdae2cb4bd7957979665b9c7597b351,",
@@ -3271,7 +3262,6 @@
         "typography.comp.badge.sm": "S:3f60adbdc0ff523f2a6c1188ff302ff5850161ae,",
         "typography.comp.dialog.title": "S:8e6cc40095c9c98726e0c6c155293cd43576af80,",
         "typography.comp.dialog.label": "S:230bbdcc7e7ea1b7dfc0809e0c83ee0a198eb7f9,",
-        "typography.comp.input.inputText": "S:b425a2b3d5a6886083fec7efc720d17d2e6c8c4a,",
         "typography.comp.input.helperText": "S:d9657de25ff4b6edc66af3a13a0c8294b1f6a2f2,"
       },
       "$figmaCollectionId": "VariableCollectionId:996:4339",

package/src/tokens/tokens.ts

@@ -1,29 +1,37 @@
 import tokensJson from './tokens.json';
+import { looper } from './tokensUtils';
 
-const paletteColors: any = {
-  ...tokensJson.core.color.pal,
-};
-
-Object.keys(paletteColors).forEach((color) => {
-  Object.entries(paletteColors[color]).forEach(([shade, { value }]: any) => {
-    paletteColors[color][shade] = value;
-  });
-});
-
-export const colors = {
-  ...paletteColors,
-  pal: paletteColors,
+const legacyTokens = {
   brand: {
-    primary: '#5C2A7E', // purple.30
+    primary: 'pal.purple.30',
   },
   text: {
-    body: '#201B22', // neutral.10
-    secondary: '#6B6071', // neutral.40
-    link: '#9247C2', // purple.50
-    linkHover: '#5C2A7E', // purple.30
+    body: 'pal.neutral.10',
+    secondary: 'pal.neutral.40',
+    link: 'pal.purple.50',
+    linkHover: 'pal.purple.30',
   },
   separator: {
-    primary: '#DFDAE1', // neutral.90,
+    primary: 'pal.neutral.90',
+  },
+};
+
+const commonColors = (({ background, border, icon, text }) => ({ background, border, icon, text }))(
+  tokensJson.comp.color,
+);
+
+const paletteColors = looper(tokensJson.core.color.pal);
+
+export const colors = {
+  pal: paletteColors,
+  ...paletteColors,
+};
+
+export const semanticTokens = {
+  colors: {
+    ...looper(commonColors),
+    ...legacyTokens,
+    sys: looper(tokensJson.system.color.sys),
   },
 };
 
@@ -39,19 +47,3 @@ export type TypeColors = `${
   | 'blue'}.${'10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '93' | '95' | '100'}`;
 
 export type ColorScheme = 'blue' | 'red' | 'orange' | 'yellow' | 'green' | 'purple' | 'neutral';
-
-const sysColors: any = {
-  ...tokensJson.system.color.sys,
-};
-
-Object.keys(sysColors).forEach((color) => {
-  Object.entries(sysColors[color]).forEach(([shade, { value }]: any) => {
-    sysColors[color][shade] = value.replace(/\{color\.pal\.(.*)\}/, '$1');
-  });
-});
-
-export const semanticTokens = {
-  colors: {
-    sys: sysColors,
-  },
-};

package/src/tokens/tokensUtils.ts

@@ -0,0 +1,20 @@
+type JsonValue = {
+  type: string;
+  value: string;
+};
+
+const valueFormatter = (obj: JsonValue) => {
+  return obj.value.replace(/\{color\.(.*)\}/, '$1');
+};
+
+export const looper = (obj: any) => {
+  const returnObject: any = {};
+  Object.keys(obj).forEach((color) => {
+    returnObject[color] = {};
+    Object.keys(obj[color]).forEach((key: string) => {
+      const valueObj: JsonValue = obj[color][key];
+      returnObject[color][key] = valueFormatter(valueObj);
+    });
+  });
+  return returnObject;
+};