@bitrise/bitkit 12.72.13-0 → 12.73.1

package/src/Foundations/docComponents/TokenTable.tsx

@@ -0,0 +1,64 @@
+import { useToken } from '@chakra-ui/react';
+import CodeSnippet from '../../Components/CodeSnippet/CodeSnippet';
+import Dot from '../../Components/Dot/Dot';
+import Table from '../../Components/Table/Table';
+import TableCaption from '../../Components/Table/TableCaption';
+import TableContainer, { TableContainerProps } from '../../Components/Table/TableContainer';
+import Tbody from '../../Components/Table/Tbody';
+import Td from '../../Components/Table/Td';
+import Text from '../../Components/Text/Text';
+import Th from '../../Components/Table/Th';
+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);
+  return (
+    <Tr role="group">
+      <Td>
+        <CodeSnippet _groupHover={{ backgroundColor: 'neutral.93' }}>{token}</CodeSnippet>
+      </Td>
+      <Td>
+        <>
+          <Text marginBottom="8" size="2">
+            {finalValue}
+          </Text>
+          <Text size="2">({value})</Text>
+        </>
+      </Td>
+      <Td>
+        <Dot backgroundColor={token.replace('colors.', '')} size="48" />
+      </Td>
+    </Tr>
+  );
+};
+
+export interface TokenTableProps extends TableContainerProps {
+  data: Record<string, string>;
+  groupName: string;
+}
+
+const TokenTable = (props: TokenTableProps) => {
+  const { data, groupName, ...rest } = props;
+  return (
+    <TableContainer {...rest}>
+      <Table>
+        <TableCaption>{groupName}</TableCaption>
+        <Thead>
+          <Tr>
+            <Th>Token</Th>
+            <Th>Value</Th>
+            <Th>Example</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {Object.entries(data).map(([token, value]) => (
+            <Row key={token} token={`colors.sys.${groupName}.${token}`} value={`colors.pal.${value}`} />
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default TokenTable;

package/src/index.ts

@@ -3,7 +3,7 @@ export * from './utils/chakra';
 export * from './hooks';
 
 export { default as theme } from './theme';
-export type { TypeColors } from './Foundations/Colors/Colors';
+export type { TypeColors } from './tokens/tokens';
 export type { TypeSizes } from './Foundations/Sizes/Sizes';
 
 export type { LinkProps } from './Components/Link/Link';

package/src/theme.ts

@@ -46,7 +46,6 @@ import FileInput from './Components/Form/FileInput/FileInput.theme';
 import Filter from './Components/Filter/Filter.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
-import colors from './Foundations/Colors/Colors';
 import radii from './Foundations/Radii/Radii';
 import shadows from './Foundations/Shadows/Shadows';
 import sizes from './Foundations/Sizes/Sizes';
@@ -54,6 +53,7 @@ import typography from './Foundations/Typography/Typography';
 import zIndices from './Foundations/Zindex/Zindex';
 import Toggletip from './Components/Toggletip/Toggletip.theme';
 import FilterSwitch from './Components/Filter/FilterSwitch/FilterSwitch.theme';
+import { colors, semanticTokens } from './tokens/tokens';
 
 const theme = {
   config: {
@@ -67,6 +67,7 @@ const theme = {
   sizes,
   space: sizes,
   zIndices,
+  semanticTokens,
   styles: {
     global: {
       body: {