@bitrise/bitkit 9.4.3 → 9.4.4-alpha-chakra.3

package/src/Foundations/Radii/Radii.stories.mdx

@@ -1,8 +1,8 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { Radii } from './Radii.examples';
 
 <Meta title="Foundations/Radii (round corners)" />
 
 # Radii (round corners)
 
-<Canvas><Radii /></Canvas>
+<Radii />

package/src/Foundations/Radii/Radii.theme.ts

@@ -1,9 +1,10 @@
 const radii = {
-  4: '4px',
-  8: '8px',
-  12: '12px',
-  16: '16px',
-  24: '24px',
+  '4': '4px',
+  '8': '8px',
+  '12': '12px',
+  '16': '16px',
+  '24': '24px',
 };
 
+export type Radii = typeof radii;
 export default radii;

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

@@ -1,14 +1,21 @@
 import { Box, HStack, VStack } from '@chakra-ui/react';
+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 = () => (
   <Provider>
-    <HStack alignItems="flex-end" spacing="32">
+    <HStack
+      as={Card}
+      spacing="32"
+      sx={{
+        marginTop: '24',
+      }}
+    >
       {Object.keys(shadows).map((key) => (
         <VStack key={key}>
-          <Box width="32" height="32" background="purple.80" boxShadow={key} />
+          <Box width="32" height="32" boxShadow={key} />
           <Text>{key}</Text>
         </VStack>
       ))}

package/src/Foundations/Shadows/Shadows.stories.mdx

@@ -1,8 +1,8 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { Shadows } from './Shadows.examples';
 
 <Meta title="Foundations/Shadows" />
 
 # Shadows
 
-<Canvas><Shadows /></Canvas>
+<Shadows />

package/src/Foundations/Shadows/Shadows.ts

@@ -6,4 +6,5 @@ const shadows = {
   none: 'none',
 };
 
+export type Shadows = typeof shadows;
 export default shadows;

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

@@ -1,11 +1,19 @@
 import { Box, HStack, VStack } from '@chakra-ui/react';
+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 = () => (
   <Provider>
-    <HStack alignItems="flex-end" spacing="24">
+    <HStack
+      as={Card}
+      spacing="24"
+      sx={{
+        alignItems: 'flex-end',
+        marginTop: '24',
+      }}
+    >
       {Object.keys(sizes).map((size) => (
         <VStack key={size}>
           <Box width={size} height={size} background="brand.primary" />

package/src/Foundations/Sizes/Sizes.stories.mdx

@@ -1,8 +1,8 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { Sizes } from './Sizes.examples';
 
 <Meta title="Foundations/Sizes" />
 
 # Sizes
 
-<Canvas><Sizes /></Canvas>
+<Sizes />

package/src/Foundations/Sizes/Sizes.ts

@@ -1,14 +1,15 @@
 const sizes = {
-  4: '4px',
-  8: '8px',
-  12: '12px',
-  16: '16px',
-  24: '24px',
-  32: '32px',
-  48: '48px',
-  64: '64px',
-  96: '96px',
-  128: '128px',
+  '4': '4px',
+  '8': '8px',
+  '12': '12px',
+  '16': '16px',
+  '24': '24px',
+  '32': '32px',
+  '48': '48px',
+  '64': '64px',
+  '96': '96px',
+  '128': '128px',
 };
 
+export type Sizes = typeof sizes;
 export default sizes;

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

@@ -1,9 +1,11 @@
 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 typography from './Typography';
 
 const style = {
+  alignItems: 'flex-start',
   counterReset: 'sizes',
   listStyle: 'none',
   li: {
@@ -20,31 +22,33 @@ const style = {
 
 export const FontSizes = () => (
   <Provider>
-    <VStack as="ol" alignItems="flex-start" spacing={24} sx={style}>
-      <Text as="li" size="1">
-        {typography.fontSizes[1]} / {typography.lineHeights[1]} / Normal / Uppercase
-      </Text>
-      <Text as="li" size="2">
-        {typography.fontSizes[2]} / {typography.lineHeights[2]} / Normal
-      </Text>
-      <Text as="li" size="3">
-        {typography.fontSizes[3]} / {typography.lineHeights[3]} / Normal
-      </Text>
-      <Text as="li" size="4">
-        {typography.fontSizes[4]} / {typography.lineHeights[4]} / Normal
-      </Text>
-      <Text as="li" size="5">
-        {typography.fontSizes[5]} / {typography.lineHeights[5]} / Bold
-      </Text>
-      <Text as="li" size="6">
-        {typography.fontSizes[6]} / {typography.lineHeights[6]} / Bold
-      </Text>
-      <Text as="li" size="7">
-        {typography.fontSizes[7]} / {typography.lineHeights[7]} / Bold
-      </Text>
-      <Text as="li" size="8">
-        {typography.fontSizes[8]} / {typography.lineHeights[8]} / Bold
-      </Text>
-    </VStack>
+    <Card sx={{ marginTop: '24' }}>
+      <VStack as="ol" spacing={24} sx={style}>
+        <Text as="li" size="1">
+          {typography.fontSizes[1]} / {typography.lineHeights[1]} / Normal / Uppercase
+        </Text>
+        <Text as="li" size="2">
+          {typography.fontSizes[2]} / {typography.lineHeights[2]} / Normal
+        </Text>
+        <Text as="li" size="3">
+          {typography.fontSizes[3]} / {typography.lineHeights[3]} / Normal
+        </Text>
+        <Text as="li" size="4">
+          {typography.fontSizes[4]} / {typography.lineHeights[4]} / Normal
+        </Text>
+        <Text as="li" size="5">
+          {typography.fontSizes[5]} / {typography.lineHeights[5]} / Bold
+        </Text>
+        <Text as="li" size="6">
+          {typography.fontSizes[6]} / {typography.lineHeights[6]} / Bold
+        </Text>
+        <Text as="li" size="7">
+          {typography.fontSizes[7]} / {typography.lineHeights[7]} / Bold
+        </Text>
+        <Text as="li" size="8">
+          {typography.fontSizes[8]} / {typography.lineHeights[8]} / Bold
+        </Text>
+      </VStack>
+    </Card>
   </Provider>
 );

package/src/Foundations/Typography/Typography.stories.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { FontSizes } from './Typography.examples';
 
 <Meta title="Foundations/Typography" />
@@ -9,6 +9,6 @@ import { FontSizes } from './Typography.examples';
 
 **Weights:** 400(regular), **700(bold)**
 
-<Canvas><FontSizes /></Canvas>
+<FontSizes />
 
-[Go to `Text` component](?path=/story/components-text--with-props)
+[Go to `Text` component](?path=/story/components-text--with-props)

package/src/Sidebar/Sidebar.css

@@ -91,20 +91,9 @@
     border-top-color: var(--color-grape--4);
   }
 
-  & .Sidebar__sub-menu-item,
-  & .Sidebar__menu-item--active .Sidebar__menu-item-link::before,
-  & .Sidebar__menu-item:hover .Sidebar__menu-item-link::before {
-    background-color: rgba(var(--rgb-white), 0.1);
-  }
-
   & .Sidebar__sub-menu-item {
     border-top-color: var(--color-grape--5);
   }
-
-  & .Sidebar__sub-menu-item--active,
-  & .Sidebar__sub-menu-item:hover {
-    background-color: rgba(var(--rgb-white), 0.2);
-  }
 }
 
 .Sidebar--theme-light {

package/src/index.ts

@@ -102,3 +102,4 @@ export { default as Visibility, Props as VisibilityProps } from './Visibility/Vi
 export { default as VisibilityContainer, Props as VisibilityContainerProps } from './Visibility/VisibilityContainer';
 
 export { default as Provider } from './Components/Provider/Provider';
+export { default as theme } from './theme';

package/src/theme.ts

@@ -17,7 +17,7 @@ const theme = {
   radii,
   shadows,
   sizes,
-  spacing: sizes,
+  space: sizes,
   styles: {
     global: {
       body: {
@@ -34,6 +34,6 @@ const theme = {
   components: {
     Text,
   },
-} as SystemStyleObject;
+};
 
 export default theme;

package/src/variables.css

@@ -10,37 +10,37 @@
   --size--x12: 3rem;
   --size--x16: 4rem;
 
-  --color-white: #FFFFFF;
-  --color-black: #222222;
-
-  --color-gray--1: #F8F8F8;
-  --color-gray--2: #ECECEC;
-  --color-gray--3: #DDDDDD;
-  --color-gray--4: #CCCCCC;
-  --color-gray--5: #ACACAC;
-  --color-gray--6: #777777;
-  --color-gray--7: #616161;
-  --color-gray--8: #444444;
-
-  --color-aqua--1: #E6FAF9;
-  --color-aqua--2: #86E9E2;
-  --color-aqua--3: #0DD3C5;
-  --color-aqua--4: #0EC7BA;
-  --color-aqua--5: #00968C;
-
-  --color-grape--1: #F8F0FF;
-  --color-grape--2: #B88ADB;
-  --color-grape--3: #760FC3;
-  --color-grape--4: #492F5C;
-  --color-grape--5: #351D48;
-
-  --color-eggplant: #683D87;
-
-  --color-red--1: #FFE8EE;
-  --color-red--2: #FF8FAB;
-  --color-red--3: #FF2158;
-  --color-red--4: #EE003B;
-  --color-red--5: #C02048;
+  --color-white: var(--colors-neutral-100);
+  --color-black: var(--colors-neutral-10);
+
+  --color-gray--1: var(--colors-neutral-95);
+  --color-gray--2: var(--colors-neutral-93);
+  --color-gray--3: var(--colors-neutral-90);
+  --color-gray--4: var(--colors-neutral-80);
+  --color-gray--5: var(--colors-neutral-70);
+  --color-gray--6: var(--colors-neutral-50);
+  --color-gray--7: var(--colors-neutral-40);
+  --color-gray--8: var(--colors-neutral-30);
+
+  --color-aqua--1: var(--colors-turquoise-95);
+  --color-aqua--2: var(--colors-turquoise-80);
+  --color-aqua--3: var(--colors-turquoise-70);
+  --color-aqua--4: var(--colors-turquoise-60);
+  --color-aqua--5: var(--colors-turquoise-50);
+
+  --color-grape--1: var(--colors-purple-95);
+  --color-grape--2: var(--colors-purple-70);
+  --color-grape--3: var(--colors-purple-50);
+  --color-grape--4: var(--colors-purple-30);
+  --color-grape--5: var(--colors-purple-10);
+
+  --color-eggplant: var(--colors-purple-40);
+
+  --color-red--1: var(--colors-red-93);
+  --color-red--2: var(--colors-red-70);
+  --color-red--3: var(--colors-red-50);
+  --color-red--4: var(--colors-red-40);
+  --color-red--5: var(--colors-red-30);
 
   --color-orange--1: #FFECE5;
   --color-orange--2: #FFA17F;
@@ -48,107 +48,50 @@
   --color-orange--4: #E73E00;
   --color-orange--5: #D33D07;
 
-  --color-yellow--1: #FFF9E5;
-  --color-yellow--2: #FFE27F;
-  --color-yellow--3: #FFC500;
-  --color-yellow--4: #ECB600;
-  --color-yellow--5: #795E00;
-
-  --color-green--1: #E7F9F3;
-  --color-green--2: #87E1C3;
-  --color-green--3: #0FC389;
-  --color-green--4: #0FB37D;
-  --color-green--5: #117D59;
-
-  --color-blue--1: #E6F2FA;
-  --color-blue--2: #86C1E6;
-  --color-blue--3: #0D83CD;
-  --color-blue--4: #0C70AE;
-  --color-blue--5: #095C90;
-
-  --color-darkblue--1: #E6ECF7;
-  --color-darkblue--2: #82A4D7;
-  --color-darkblue--3: #054AB0;
-  --color-darkblue--4: #043E94;
-  --color-darkblue--5: #033175;
-
-  --color-violet--1: #F4E7F9;
-  --color-violet--2: #CB8ADF;
-  --color-violet--3: #990FC3;
-  --color-violet--4: #8512A8;
-  --color-violet--5: #741492;
+  --color-yellow--1: var(--colors-yellow-95);
+  --color-yellow--2: var(--colors-yellow-90);
+  --color-yellow--3: var(--colors-yellow-80);
+  --color-yellow--4: var(--colors-yellow-70);
+  --color-yellow--5: var(--colors-yellow-40);
+
+  --color-green--1: var(--colors-green-95);
+  --color-green--2: var(--colors-green-80);
+  --color-green--3: var(--colors-green-60);
+  --color-green--4: var(--colors-green-50);
+  --color-green--5: var(--colors-green-40);
+
+  --color-blue--1: var(--colors-blue-93);
+  --color-blue--2: var(--colors-blue-70);
+  --color-blue--3: var(--colors-blue-50);
+  --color-blue--4: var(--colors-blue-40);
+  --color-blue--5: var(--colors-blue-30);
+
+  --color-darkblue--1: var(--colors-blue-93);
+  --color-darkblue--2: var(--colors-blue-60);
+  --color-darkblue--3: var(--colors-blue-30);
+  --color-darkblue--4: var(--colors-blue-20);
+  --color-darkblue--5: var(--colors-blue-10);
+
+  --color-violet--1: var(--colors-purple-95);
+  --color-violet--2: var(--colors-purple-70);
+  --color-violet--3: var(--colors-purple-40);
+  --color-violet--4: var(--colors-purple-30);
+  --color-violet--5: var(--colors-purple-20);
 
   --rgb-white: 255, 255, 255;
-  --rgb-black: 34, 34, 34;
-
-  --rgb-gray--1: 248, 248, 248;
-  --rgb-gray--2: 236, 236, 236;
-  --rgb-gray--3: 221, 221, 221;
-  --rgb-gray--4: 204, 204, 204;
-  --rgb-gray--5: 172, 172, 172;
-  --rgb-gray--6: 119, 119, 119;
-  --rgb-gray--7: 97, 97, 97;
-  --rgb-gray--8: 68, 68, 68;
-
-  --rgb-aqua--1: 230, 250, 249;
-  --rgb-aqua--2: 134, 233, 226;
-  --rgb-aqua--3: 13, 211, 197;
-  --rgb-aqua--4: 14, 199, 186;
-  --rgb-aqua--5: 0, 150, 140;
-
-  --rgb-grape--1: 248, 240, 255;
-  --rgb-grape--2: 184, 138, 219;
-  --rgb-grape--3: 118, 15, 195;
-  --rgb-grape--4: 73, 47, 92;
-  --rgb-grape--5: 53, 29, 72;
-
-  --rgb-eggplant: 104, 61, 135;
 
-  --rgb-red--1: 255, 232, 238;
+  --rgb-grape--2: 184, 138, 219;
+  
   --rgb-red--2: 255, 143, 171;
-  --rgb-red--3: 255, 33, 88;
-  --rgb-red--4: 238, 0, 59;
-  --rgb-red--5: 192, 32, 72;
-
-  --rgb-orange--1: 255, 236, 229;
-  --rgb-orange--2: 255, 161, 127;
-  --rgb-orange--3: 255, 68, 0;
-  --rgb-orange--4: 231, 62, 0;
-  --rgb-orange--5: 211, 61, 7;
 
-  --rgb-yellow--1: 255, 249, 229;
   --rgb-yellow--2: 255, 226, 127;
-  --rgb-yellow--3: 255, 197, 0;
-  --rgb-yellow--4: 236, 182, 0;
-  --rgb-yellow--5: 121, 94, 0;
-
-  --rgb-green--1: 231, 249, 243;
+  
   --rgb-green--2: 135, 225, 195;
-  --rgb-green--3: 15, 195, 137;
-  --rgb-green--4: 15, 179, 125;
-  --rgb-green--5: 17, 125, 89;
-
-  --rgb-blue--1: 230, 242, 250;
+  
   --rgb-blue--2: 134, 193, 230;
-  --rgb-blue--3: 13, 131, 205;
-  --rgb-blue--4: 12, 112, 174;
-  --rgb-blue--5: 9, 92, 144;
-
-  --rgb-darkblue--1: 230, 236, 247;
-  --rgb-darkblue--2: 130, 164, 215;
-  --rgb-darkblue--3: 5, 74, 176;
-  --rgb-darkblue--4: 4, 62, 148;
-  --rgb-darkblue--5: 3, 49, 117;
-
-  --rgb-violet--1: 244, 231, 249;
-  --rgb-violet--2: 203, 138, 223;
-  --rgb-violet--3: 153, 15, 195;
-  --rgb-violet--4: 133, 18, 168;
-  --rgb-violet--5: 116, 20, 146;
-
+  
   --color-overlay--black: rgba(34, 34, 34, 0.8);
-  --color-overlay--grape: rgba(53, 29, 72, 0.8);
-
+  
   --font-family: 'TT Norms Pro', sans-serif;
   --font-family-monospace: 'Source Code Pro', monospace;
 

package/src/variables.ts

@@ -137,8 +137,8 @@ export const rgbViolet4 = [133, 18, 168];
 export const rgbViolet5 = [116, 20, 146];
 
 export const colorMap = {
-  'white': colorWhite,
-  'black': colorBlack,
+  white: colorWhite,
+  black: colorBlack,
 
   'gray-1': colorGray1,
   'gray-2': colorGray2,
@@ -161,7 +161,7 @@ export const colorMap = {
   'grape-4': colorGrape4,
   'grape-5': colorGrape5,
 
-  'eggplant': colorEggplant,
+  eggplant: colorEggplant,
 
   'red-1': colorRed1,
   'red-2': colorRed2,
@@ -207,8 +207,8 @@ export const colorMap = {
 };
 
 export const rgbMap = {
-  'white': rgbWhite,
-  'black': rgbBlack,
+  white: rgbWhite,
+  black: rgbBlack,
 
   'gray-1': rgbGray1,
   'gray-2': rgbGray2,
@@ -231,7 +231,7 @@ export const rgbMap = {
   'grape-4': rgbGrape4,
   'grape-5': rgbGrape5,
 
-  'eggplant': rgbEggplant,
+  eggplant: rgbEggplant,
 
   'red-1': rgbRed1,
   'red-2': rgbRed2,