@bitrise/bitkit 9.7.1 → 9.7.4

package/src/Components/Menu/Menu.theme.ts

@@ -9,7 +9,8 @@ const MenuTheme: SystemStyleObject = {
       paddingY: '16',
     },
     item: {
-      padding: '12 32',
+      paddingY: '12',
+      paddingX: '16',
       _focus: {
         backgroundColor: 'neutral.95',
       },

package/src/Components/Menu/Menu.tsx

@@ -1,7 +1,7 @@
-import { Menu as ChakraMenu, MenuProps } from '@chakra-ui/react';
+import { Menu as ChakraMenu, MenuProps as ChakraMenuProps } from '@chakra-ui/react';
 
-export type Props = MenuProps;
+export type MenuProps = ChakraMenuProps;
 
-const Menu = (props: Props) => <ChakraMenu {...props} />;
+const Menu = (props: MenuProps) => <ChakraMenu {...props} />;
 
 export default Menu;

package/src/Components/Text/Text.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '@/utils/storyUtils';
+import { sortObjectByKey } from '../../utils/storyUtils';
 import Text from './Text';
 
 export default {

package/src/Components/Text/Text.theme.ts

@@ -1,4 +1,4 @@
-import { textSizes } from '@/Foundations/Typography/Typography';
+import { textSizes } from '../../Foundations/Typography/Typography';
 
 const TextTheme = textSizes;
 

package/src/Components/Text/Text.tsx

@@ -1,4 +1,5 @@
-import { Text as ChakraText, TextProps } from '@chakra-ui/react';
+import { Text as ChakraText, TextProps as ChakraTextProps } from '@chakra-ui/react';
+import { TextSizes } from '../../Foundations/Typography/Typography';
 
 type TextTags =
   | 'a'
@@ -34,36 +35,31 @@ type TextTags =
   | 'time'
   | 'var';
 
-export type TextSizes = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
-
-export interface Props {
+export interface TextProps extends ChakraTextProps {
   align?: 'center' | 'justify' | 'left' | 'right';
   /**
    * Any valid HTML text tag
    */
   as?: TextTags;
-  children?: TextProps['children'];
   className?: string;
-  color?: 'body' | 'secondary';
+  color?: 'body' | 'secondary' | string;
   /**
    * Font weight
    */
   fontWeight?: 'bold' | 'normal';
-  letterSpacing?: TextProps['letterSpacing'];
   /**
    * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
    */
   size?: TextSizes;
-  sx?: TextProps['sx'];
   textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase';
 }
 
 /**
  * `Text` component is the used to render text and paragraphs within an interface. It renders a `<p>` tag by default.
  */
-const Text = (props: Props) => {
+const Text = (props: TextProps) => {
   const { color, fontWeight, size, textTransform } = props;
-  const properties: TextProps = { ...props };
+  const properties: ChakraTextProps = { ...props };
   if (size === '1' && (!textTransform || textTransform === 'none')) {
     properties.textTransform = 'uppercase';
   }
@@ -79,6 +75,6 @@ const Text = (props: Props) => {
 Text.defaultProps = {
   as: 'p',
   size: '3',
-} as Props;
+} as TextProps;
 
 export default Text;

package/src/Foundations/Colors/Colors.ts

@@ -1,115 +1,115 @@
 const colors = {
   neutral: {
-    10: '#201B22',
-    20: '#362D39',
-    30: '#49404F',
-    40: '#6B6071',
-    50: '#7D7184',
-    60: '#94879B',
-    70: '#AFA4B4',
-    80: '#C9C1CD',
-    90: '#DFDAE1',
-    93: '#EFEBEF',
-    95: '#F6F4F6',
     100: '#FFFFFF',
+    95: '#F6F4F6',
+    93: '#EFEBEF',
+    90: '#DFDAE1',
+    80: '#C9C1CD',
+    70: '#AFA4B4',
+    60: '#94879B',
+    50: '#7D7184',
+    40: '#6B6071',
+    30: '#49404F',
+    20: '#362D39',
+    10: '#201B22',
   },
   purple: {
-    10: '#2B0E3F',
-    20: '#421560',
-    30: '#5C2A7E',
-    40: '#7B3BA5',
-    50: '#9247C2',
-    60: '#AE63DE',
-    70: '#C289E6',
-    80: '#D5ADEB',
-    90: '#EAD4F2',
-    93: '#F3E7F9',
-    95: '#F9F2FD',
     100: '#FFFFFF',
+    95: '#F9F2FD',
+    93: '#F3E7F9',
+    90: '#EAD4F2',
+    80: '#D5ADEB',
+    70: '#C289E6',
+    60: '#AE63DE',
+    50: '#9247C2',
+    40: '#7B3BA5',
+    30: '#5C2A7E',
+    20: '#421560',
+    10: '#2B0E3F',
   },
   red: {
-    10: '#47060C',
-    20: '#630811',
-    30: '#78111C',
-    40: '#A91E2E',
-    50: '#D72D40',
-    60: '#F7596C',
-    70: '#FF8091',
-    80: '#FFA8B5',
-    90: '#FFCCD5',
-    93: '#FFE5EB',
-    95: '#FFF0F3',
     100: '#FFFFFF',
+    95: '#FFF0F3',
+    93: '#FFE5EB',
+    90: '#FFCCD5',
+    80: '#FFA8B5',
+    70: '#FF8091',
+    60: '#F7596C',
+    50: '#D72D40',
+    40: '#A91E2E',
+    30: '#78111C',
+    20: '#630811',
+    10: '#47060C',
   },
   orange: {
-    10: '#421000',
-    20: '#661900',
-    30: '#7A2200',
-    40: '#A33500',
-    50: '#D45202',
-    60: '#ED720C',
-    70: '#FD9730',
-    80: '#FFB766',
-    90: '#FFD5A3',
-    93: '#FFE9CF',
-    95: '#FFF4E5',
     100: '#FFFFFF',
+    95: '#FFF4E5',
+    93: '#FFE9CF',
+    90: '#FFD5A3',
+    80: '#FFB766',
+    70: '#FD9730',
+    60: '#ED720C',
+    50: '#D45202',
+    40: '#A33500',
+    30: '#7A2200',
+    20: '#661900',
+    10: '#421000',
   },
   yellow: {
-    10: '#2E1C00',
-    20: '#4D2F00',
-    30: '#613E00',
-    40: '#875B00',
-    50: '#B27E00',
-    60: '#D6A200',
-    70: '#EBBA00',
-    80: '#F9CC15',
-    90: '#FBE074',
-    93: '#FFEFAD',
-    95: '#FFF6D1',
     100: '#FFFFFF',
+    95: '#FFF6D1',
+    93: '#FFEFAD',
+    90: '#FBE074',
+    80: '#F9CC15',
+    70: '#EBBA00',
+    60: '#D6A200',
+    50: '#B27E00',
+    40: '#875B00',
+    30: '#613E00',
+    20: '#4D2F00',
+    10: '#2E1C00',
   },
   green: {
-    10: '#042A0F',
-    20: '#064217',
-    30: '#0B5620',
-    40: '#167231',
-    50: '#2A9D4C',
-    60: '#4EB76C',
-    70: '#77CF8F',
-    80: '#A1DEB2',
-    90: '#C3EACE',
-    93: '#E1F4E7',
-    95: '#EEF9F1',
     100: '#FFFFFF',
+    95: '#EEF9F1',
+    93: '#E1F4E7',
+    90: '#C3EACE',
+    80: '#A1DEB2',
+    70: '#77CF8F',
+    60: '#4EB76C',
+    50: '#2A9D4C',
+    40: '#167231',
+    30: '#0B5620',
+    20: '#064217',
+    10: '#042A0F',
   },
   turquoise: {
-    10: '#002924',
-    20: '#003D36',
-    30: '#005248',
-    40: '#007366',
-    50: '#009E8E',
-    60: '#11BBA9',
-    70: '#55CEC3',
-    80: '#8AE0D7',
-    90: '#AEEFE8',
-    93: '#D8F8F4',
-    95: '#E9FBF9',
     100: '#FFFFFF',
+    95: '#E9FBF9',
+    93: '#D8F8F4',
+    90: '#AEEFE8',
+    80: '#8AE0D7',
+    70: '#55CEC3',
+    60: '#11BBA9',
+    50: '#009E8E',
+    40: '#007366',
+    30: '#005248',
+    20: '#003D36',
+    10: '#002924',
   },
   blue: {
-    10: '#002442',
-    20: '#00315C',
-    30: '#044781',
-    40: '#1066AC',
-    50: '#2582D0',
-    60: '#4F9BDE',
-    70: '#71B8EF',
-    80: '#99D1F5',
-    90: '#C2E7FA',
-    93: '#DEF2FC',
-    95: '#ECF8FD',
     100: '#FFFFFF',
+    95: '#ECF8FD',
+    93: '#DEF2FC',
+    90: '#C2E7FA',
+    80: '#99D1F5',
+    70: '#71B8EF',
+    60: '#4F9BDE',
+    50: '#2582D0',
+    40: '#1066AC',
+    30: '#044781',
+    20: '#00315C',
+    10: '#002442',
   },
   brand: {
     primary: '#5C2A7E', // purple.30

package/src/Foundations/Colors/DesignTokens.tsx

@@ -1,9 +1,9 @@
 // import { ReactNode } from 'react';
 import { HStack, VStack } from '@chakra-ui/react';
-import Box from '@/Components/Box/Box';
-import Card from '@/Components/Card/Card';
-import Provider from '@/Components/Provider/Provider';
-import Text from '@/Components/Text/Text';
+import Box from '../../Components/Box/Box';
+import Card from '../../Components/Card/Card';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
 
 const TOKENS = {
   'brand.primary': 'Primary brand color',
@@ -37,7 +37,7 @@ const DesignTokens = () => {
       <Card sx={{ marginBottom: '96' }}>
         <VStack align="flex-start" as="ul" spacing="32">
           {Object.keys(TOKENS).map((token: string) => (
-            <HStack as="li" spacing="32">
+            <HStack as="li" key={token} spacing="32">
               <Box
                 sx={{
                   backgroundColor: token,

package/src/Foundations/Colors/Palette.tsx

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 import { HStack, SystemStyleObject, VStack } from '@chakra-ui/react';
-import Box from '@/Components/Box/Box';
-import Card from '@/Components/Card/Card';
-import Divider from '@/Components/Divider/Divider';
-import Provider from '@/Components/Provider/Provider';
-import Text from '@/Components/Text/Text';
+import Box from '../../Components/Box/Box';
+import Card from '../../Components/Card/Card';
+import Divider from '../../Components/Divider/Divider';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
 import colors, { Colors } from './Colors';
 
 const paletteKeys = ['neutral', 'purple', 'red', 'orange', 'yellow', 'green', 'turquoise', 'blue'] as Array<

package/src/Foundations/Radii/Radii.examples.tsx

@@ -1,8 +1,8 @@
 import { HStack, VStack } from '@chakra-ui/react';
-import Box from '@/Components/Box/Box';
-import Card from '@/Components/Card/Card';
-import Provider from '@/Components/Provider/Provider';
-import Text from '@/Components/Text/Text';
+import Box from '../../Components/Box/Box';
+import Card from '../../Components/Card/Card';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
 import radii from './Radii';
 
 export const Radii = () => (

package/src/Foundations/Shadows/Shadows.examples.tsx

@@ -1,8 +1,8 @@
 import { HStack, VStack } from '@chakra-ui/react';
-import Box from '@/Components/Box/Box';
-import Card from '@/Components/Card/Card';
-import Provider from '@/Components/Provider/Provider';
-import Text from '@/Components/Text/Text';
+import Box from '../../Components/Box/Box';
+import Card from '../../Components/Card/Card';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
 import shadows from './Shadows';
 
 export const Shadows = () => (

package/src/Foundations/Sizes/Sizes.examples.tsx

@@ -1,8 +1,8 @@
 import { HStack, VStack } from '@chakra-ui/react';
-import Box from '@/Components/Box/Box';
-import Card from '@/Components/Card/Card';
-import Provider from '@/Components/Provider/Provider';
-import Text from '@/Components/Text/Text';
+import Box from '../../Components/Box/Box';
+import Card from '../../Components/Card/Card';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
 import sizes from './Sizes';
 
 export const Sizes = () => (

package/src/Foundations/Typography/Typography.examples.tsx

@@ -1,7 +1,7 @@
 import { VStack } from '@chakra-ui/react';
-import Card from '@/Components/Card/Card';
-import Provider from '@/Components/Provider/Provider';
-import Text from '@/Components/Text/Text';
+import Card from '../../Components/Card/Card';
+import Provider from '../../Components/Provider/Provider';
+import Text from '../../Components/Text/Text';
 import typography from './Typography';
 
 const style = {

package/src/Foundations/Typography/Typography.ts

@@ -4,66 +4,68 @@ const typography = {
     mono: `"Source Code Pro Bitrise", monospace`,
   },
   fontSizes: {
-    1: '0.6875rem',
-    2: '0.875rem',
-    3: '1rem',
-    4: '1.1875rem',
-    5: '1.5rem',
-    6: '1.875rem',
-    7: '2.25rem',
-    8: '3rem',
+    '1': '0.6875rem',
+    '2': '0.875rem',
+    '3': '1rem',
+    '4': '1.1875rem',
+    '5': '1.5rem',
+    '6': '1.875rem',
+    '7': '2.25rem',
+    '8': '3rem',
   },
   fontWeights: {
     normal: 400,
     bold: 700,
   },
   lineHeights: {
-    1: '1rem',
-    2: '1.25rem',
-    3: '1.5rem',
-    4: '1.75rem',
-    5: '2.25rem',
-    6: '2.5rem',
-    7: '3rem',
-    8: '3.75rem',
+    '1': '1rem',
+    '2': '1.25rem',
+    '3': '1.5rem',
+    '4': '1.75rem',
+    '5': '2.25rem',
+    '6': '2.5rem',
+    '7': '3rem',
+    '8': '3.75rem',
   },
 };
 
 export const textSizes = {
   sizes: {
-    1: {
+    '1': {
       fontSize: '1',
       lineHeight: '1',
     },
-    2: {
+    '2': {
       fontSize: '2',
       lineHeight: '2',
     },
-    3: {
+    '3': {
       fontSize: '3',
       lineHeight: '3',
     },
-    4: {
+    '4': {
       fontSize: '4',
       lineHeight: '4',
     },
-    5: {
+    '5': {
       fontSize: '5',
       lineHeight: '5',
     },
-    6: {
+    '6': {
       fontSize: '6',
       lineHeight: '6',
     },
-    7: {
+    '7': {
       fontSize: '7',
       lineHeight: '7',
     },
-    8: {
+    '8': {
       fontSize: '8',
       lineHeight: '8',
     },
   },
 };
 
+export type TextSizes = keyof typeof textSizes.sizes;
+
 export default typography;