@bitrise/bitkit 12.73.0 → 12.73.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.73.0",
+  "version": "12.73.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -12,7 +12,9 @@
     "start": "yarn storybook",
     "test": "jest",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "theme": "chakra-cli tokens ./src/theme.ts",
+    "theme:watch": "chakra-cli tokens ./src/theme.ts --watch"
   },
   "alias": {
     "@bitrise/bitkit": "./src",
@@ -45,6 +47,7 @@
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@bitrise/eslint-plugin": "^2.3.3",
+    "@chakra-ui/cli": "^2.4.1",
     "@commitlint/cli": "^17.8.0",
     "@commitlint/config-conventional": "^17.8.0",
     "@google-cloud/storage": "^7.7.0",

package/src/Components/ColorButton/ColorButton.theme.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../../Foundations/Colors/Colors';
+import { ColorScheme } from '../../tokens/tokens';
 
 const schemeColors: Record<ColorScheme, any> = {
   blue: {

package/src/Components/ColorButton/ColorButton.tsx

@@ -1,5 +1,5 @@
 import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react';
-import { ColorScheme } from '../../Foundations/Colors/Colors';
+import { ColorScheme } from '../../tokens/tokens';
 
 export interface ColorButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';

package/src/Components/Form/Input/Input.tsx

@@ -14,7 +14,7 @@ import {
   InputRightElement,
   SystemStyleObject,
 } from '@chakra-ui/react';
-import { TypeColors } from '../../../Foundations/Colors/Colors';
+import { TypeColors } from '../../../tokens/tokens';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import Text from '../../Text/Text';
 import Box from '../../Box/Box';

package/src/Components/Menu/MenuItem.tsx

@@ -1,5 +1,5 @@
 import { MenuItem as ChakraMenuItem, MenuItemProps as ChakraMenuItemProps, forwardRef } from '@chakra-ui/react';
-import { TypeColors } from '../../Foundations/Colors/Colors';
+import { TypeColors } from '../../tokens/tokens';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 

package/src/Components/Notification/Notification.tsx

@@ -1,7 +1,7 @@
 import { cloneElement, createContext, ReactElement, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
-import { ColorScheme } from '../../Foundations/Colors/Colors';
+import { ColorScheme } from '../../tokens/tokens';
 import Box from '../Box/Box';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';

package/src/Components/Ribbon/Ribbon.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
-import { ColorScheme } from '../../Foundations/Colors/Colors';
+import { ColorScheme } from '../../tokens/tokens';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Box from '../Box/Box';

package/src/Components/Table/Table.theme.ts

@@ -6,7 +6,7 @@ const Tabletheme = {
     return {
       caption: {
         textAlign: 'left',
-        marginBottom: '24',
+        marginBottom: '12',
       },
       captionTitle: {
         fontSize: '4',

package/src/Components/Tabs/ContainedTab.tsx

@@ -1,5 +1,5 @@
 import { Button, TabProps as ChakraTabProps, forwardRef, useTab, useTabsStyles } from '@chakra-ui/react';
-import { TypeColors } from '../../Foundations/Colors/Colors';
+import { TypeColors } from '../../tokens/tokens';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 import Text from '../Text/Text';

package/src/Components/Tag/Tag.tsx

@@ -4,7 +4,7 @@ import Skeleton from '../Skeleton/Skeleton';
 import SkeletonBox from '../Skeleton/SkeletonBox';
 import Text from '../Text/Text';
 import Tooltip from '../Tooltip/Tooltip';
-import { TypeColors } from '../../Foundations/Colors/Colors';
+import { TypeColors } from '../../tokens/tokens';
 
 export interface TagProps extends Omit<ChakraTagProps, 'colorScheme' | 'size' | 'variant'> {
   closeButtonTooltip?: string;

package/src/Foundations/Colors/Colors.tsx

@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Unstyled } from '@storybook/blocks';
+import Provider from '../../Components/Provider/Provider';
+import Divider from '../../Components/Divider/Divider';
+import Palette from './Palette';
+import SystemTokens from './SystemTokens';
+
+const Colors = () => {
+  return (
+    <Unstyled>
+      <Provider>
+        <Palette />
+        <Divider marginTop="48" marginBottom="32" size="1" />
+        <SystemTokens />
+      </Provider>
+    </Unstyled>
+  );
+};
+
+export default Colors;

package/src/Foundations/Colors/SystemTokens.tsx

@@ -0,0 +1,26 @@
+import { semanticTokens } from '../../tokens/tokens';
+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 SystemTokens = () => (
+  <>
+    <Text as="h2" size="8" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8">
+      System Tokens
+    </Text>
+    <Card boxShadow="medium" padding="24">
+      {SystemColorKeys.map((groupName) => (
+        <TokenTable
+          data={semanticTokens.colors.sys[groupName]}
+          groupName={groupName}
+          key={groupName}
+          marginBottom="24"
+        />
+      ))}
+    </Card>
+  </>
+);
+
+export default SystemTokens;

package/src/Foundations/Themes/Alert.theme.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../Colors/Colors';
+import { ColorScheme } from '../../tokens/tokens';
 
 const AlertTheme = {
   parts: ['container', 'title', 'icon', 'body'],

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: {