@bitrise/bitkit 9.2.0 → 9.3.0-alpha.2

package/src/Table/Table.css

@@ -12,16 +12,16 @@
 }
 
 .Table__header-cell--sortable:hover {
-  color: var(--color-grape--3);
+  color: var(--bitkit-colors-grape-3);
   cursor: pointer;
 }
 
 .Table__row:not(:last-child) .Table__cell {
-  border-bottom: 0.0625rem solid var(--color-gray--2);
+  border-bottom: 0.0625rem solid var(--bitkit-colors-gray-2);
 }
 
 .Table__cell {
-  background-color: var(--color-white);
+  background-color: var(--bitkit-colors-white);
   transition-property: background-color, color;
   transition-duration: var(--transition-duration--fast);
   transition-timing-function: var(--transition-timing-function);
@@ -33,7 +33,7 @@
 }
 
 .Table__row--clickable:hover .Table__cell {
-  color: var(--color-grape--3);
+  color: var(--bitkit-colors-grape-3);
   cursor: pointer;
 }
 
@@ -63,7 +63,7 @@
 }
 
 .Table--type-flat .Table__header-row .Table__header-cell {
-  border-bottom: 0.0625rem solid var(--color-gray--2);
+  border-bottom: 0.0625rem solid var(--bitkit-colors-gray-2);
 }
 
 .Table--type-flat .Table__header-row:last-child .Table__header-cell {

package/src/Tabs/Tabs.css

@@ -2,7 +2,7 @@
   position: relative;
   padding-top: var(--size--x3);
   padding-bottom: var(--size--x3);
-  color: var(--color-eggplant);
+  color: var(--bitkit-colors-eggplant);
   cursor: pointer;
 }
 
@@ -22,9 +22,9 @@
 }
 
 .Tabs__tab--active {
-  color: var(--color-grape--5);
+  color: var(--bitkit-colors-grape-5);
 
   &::before {
-    background-color: var(--color-aqua--3);
+    background-color: var(--bitkit-colors-aqua-3);
   }
 }

package/src/Textarea/Textarea.css

@@ -2,11 +2,11 @@
   display: block;
   width: 100%;
   min-width: 0;
-  border: 0.0625rem solid var(--color-gray--3);
+  border: 0.0625rem solid var(--bitkit-colors-gray-3);
   border-radius: var(--size--x1);
   box-shadow: inset 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
-  background-color: var(--color-white);
-  color: var(--color-grape--5);
+  background-color: var(--bitkit-colors-white);
+  color: var(--bitkit-colors-grape-5);
   line-height: inherit;
   resize: none;
   transition-property: background-color, border-color, box-shadow;
@@ -14,23 +14,23 @@
   transition-timing-function: var(--transition-timing-function);
   appearance: none;
 
-  &::placeholder { color: var(--color-gray--7); }
-  &:disabled { background-color: var(--color-gray--2); }
+  &::placeholder { color: var(--bitkit-colors-gray-7); }
+  &:disabled { background-color: var(--bitkit-colors-gray-2); }
 }
 
 .TextArea--invalid {
-  border-color: var(--color-red--3);
-  color: var(--color-red--3);
+  border-color: var(--bitkit-colors-red-3);
+  color: var(--bitkit-colors-red-3);
 
-  &::placeholder { color: var(--color-red--3); }
+  &::placeholder { color: var(--bitkit-colors-red-3); }
 }
 
 .TextArea:focus,
 .TextArea--invalid:focus {
   outline: none;
-  border-color: var(--color-grape--3);
+  border-color: var(--bitkit-colors-grape-3);
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
-  color: var(--color-grape--5);
+  color: var(--bitkit-colors-grape-5);
 
   &::placeholder {
     color: transparent;

package/src/Toggle/Toggle.css

@@ -25,8 +25,8 @@
   left: 0;
   padding: 0 var(--Toggle--border);
   border-radius: var(--Toggle--size);
-  background-color: var(--color-gray--6);
-  color: var(--color-white);
+  background-color: var(--bitkit-colors-gray-6);
+  color: var(--bitkit-colors-white);
   transition-property: background-color;
   transition-duration: var(--transition-duration--fast);
   transition-timing-function: var(--transition-timing-function);
@@ -40,7 +40,7 @@
   height: calc(var(--Toggle--size) - (var(--Toggle--border) * 2));
   transform: translate(0, -50%);
   border-radius: 50%;
-  background-image: linear-gradient(to top, var(--color-white), var(--color-gray--2));
+  background-image: linear-gradient(to top, var(--bitkit-colors-white), var(--bitkit-colors-gray-2));
   transition-property: transform, border-color, box-shadow;
   transition-duration: var(--transition-duration--fast);
   transition-timing-function: var(--transition-timing-function);
@@ -57,7 +57,7 @@
 .Toggle__icon-right { right: var(--Toggle--border); }
 
 .Toggle__input:checked + .Toggle__control {
-  background-color: var(--color-aqua--3);
+  background-color: var(--bitkit-colors-aqua-3);
 
   & .Toggle__knob {
     transform: translate(calc(100% + (var(--Toggle--border) * 2)), -50%);

package/src/chakra/provider.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
+import theme from './theme';
+
+const BitchakraProvider = ({ children }: ChakraProviderProps) => {
+  return <ChakraProvider theme={ theme }>{ children }</ChakraProvider>;
+};
+
+export default BitchakraProvider;

package/src/chakra/theme.tsx

@@ -0,0 +1,159 @@
+import { extendTheme } from '@chakra-ui/react';
+import { variables } from '@bitrise/bitkit';
+
+const theme = extendTheme({
+  config: {
+    cssVarPrefix: 'bitkit',
+  },
+  colors: variables.colorMap,
+  fonts: {
+    body: '"TT Norms Pro", sans-serif',
+    heading: '"TT Norms Pro", sans-serif',
+  },
+  fontSizes: {
+    1: '11px',
+    2: '14px',
+    3: '16px',
+    4: '19px',
+    5: '24px',
+    6: '30px',
+    7: '36px',
+    8: '48px',
+  },
+  lineHeights: {
+    1: '16px',
+    2: '20px',
+    3: '24px',
+    4: '28px',
+    5: '36px',
+    6: '40px',
+    7: '48px',
+    8: '60px',
+  },
+  styles: {
+    global: {
+      body: {
+        color: 'grape-5',
+      },
+    },
+  },
+  components: {
+    Button: {
+      baseStyle: {
+        border: '1px solid',
+        borderRadius: 'base',
+        fontWeight: 'normal',
+        lineHeight: 3,
+      },
+      variants: {
+        primary: {
+          bgGradient: 'linear(to-b, #6C0EB2, #450674)',
+          borderColor: '#683D87',
+          color: '#F8F8F8',
+          fontWeight: 'bold',
+          _hover: {
+            bgGradient: 'linear(to-b, #50167B, #3D125D)',
+            _disabled: {
+              bgGradient: 'linear(to-b, #ccc, #ACACAC)',
+              borderColor: '#ACACAC',
+            },
+          },
+          _active: {
+            bgGradient: 'linear(to-b, #351D48, #351D48)',
+          },
+          _disabled: {
+            bgGradient: 'linear(to-b, #ccc, #ACACAC)',
+            borderColor: '#ACACAC',
+          },
+        },
+        secondary: {
+          bgGradient: 'linear(to-b, #f8f8f8, #fff)',
+          borderColor: '#ddd',
+          color: '#351D48',
+          _hover: {
+            bgGradient: 'linear(to-b, #ECECEC, #ECECEC)',
+          },
+          _active: {
+            bgGradient: 'linear(to-b, #351D48, #351D48)',
+            color: '#F8F8F8',
+          },
+          _disabled: {
+            color: '#ACACAC',
+          },
+        },
+        tertiary: {
+          background: 'transparent',
+          borderColor: 'transparent',
+          color: '#760FC3',
+          _hover: {
+            background: '#F8F0FF',
+          },
+          _active: {
+            background: '#351D48',
+            color: '#F8F8F8',
+          },
+          _disabled: {
+            color: '#ACACAC',
+          },
+        },
+        dangerPrimary: {
+          bgGradient: 'linear(to-b, #E41447, #FF2158)',
+          borderColor: '#D4093C',
+          color: '#fff',
+          fontWeight: 'bold',
+          _hover: {
+            bgGradient: 'linear(to-b, #C90032, #C90032)',
+            _disabled: {
+              bgGradient: 'linear(to-b, #ccc, #acacac)',
+              borderColor: '#ACACAC',
+            },
+          },
+          _active: {
+            bgGradient: 'linear(to-b, #C02048, #C02048)',
+          },
+          _disabled: {
+            bgGradient: 'linear(to-b, #ccc, #acacac)',
+            borderColor: '#ACACAC',
+          },
+        },
+        dangerSecondary: {
+          bgGradient: 'linear(to-b, #f8f8f8, #fff)',
+          borderColor: '#ddd',
+          color: '#FF2158',
+          _hover: {
+            bgGradient: 'linear(to-b, #FFE8EE, #FFE8EE)',
+            borderColor: '#FF8FAB',
+            _disabled: {
+              bgGradient: 'linear(to-b, #f8f8f8, #fff)',
+              borderColor: '#ddd',
+              color: '#ACACAC',
+            },
+          },
+          _active: {
+            bgGradient: 'linear(to-b, #C02048, #C02048)',
+            color: '#fff',
+          },
+          _disabled: {
+            color: '#ACACAC',
+          },
+        },
+      },
+      sizes: {
+        small: {
+          h: '32px',
+          fontSize: 2,
+          px: '12px',
+          py: '3px',
+        },
+        medium: {
+          h: '48px',
+          fontSize: 3,
+          px: '16px',
+          py: '11px',
+        },
+      },
+    },
+  },
+});
+
+export default theme;

package/src/hooks/useResizeObserver.ts

@@ -1,5 +1,4 @@
 import { useLayoutEffect, useState } from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
 
 export interface DOMRectReadOnlyWithoutToJSON extends Omit<DOMRectReadOnly, 'toJSON'> {}
 
@@ -20,7 +19,7 @@ export default (): [
   });
 
   useLayoutEffect(() => {
-    const observer = new ResizeObserver(([entry]) => {
+    const observer: ResizeObserver = new ResizeObserver(([entry]) => {
       if (entry) {
         setSize(entry.contentRect);
       }

package/src/index.ts

@@ -1,6 +1,4 @@
-import 'normalize.css/normalize.css';
 import './variables.css';
-import './root.css';
 
 import * as variables from './variables';
 import * as hooks from './hooks';
@@ -22,6 +20,7 @@ export { default as Badge, Props as BadgeProps } from './Badge/Badge';
 export { default as Base, Props as BaseProps, TypeColors, TypeSizes } from './Base/Base';
 export { default as Bounds, Props as BoundsProps } from './Bounds/Bounds';
 export { default as Button, Props as ButtonProps } from './Button/Button';
+export { default as Button2 } from './Button2/Button2';
 export { default as Buttons, Props as ButtonsProps } from './Button/Buttons';
 export { default as ButtonWithDropdown, Props as ButtonWithDropdownProps } from './ButtonWithDropdown/ButtonWithDropdown';
 export { default as Card, Props as CardProps } from './Card/Card';
@@ -99,3 +98,5 @@ export { default as Toggle, Props as ToggleProps } from './Toggle/Toggle';
 export { default as Tooltip, Props as TooltipProps } from './Tooltip/Tooltip';
 export { default as Visibility, Props as VisibilityProps } from './Visibility/Visibility';
 export { default as VisibilityContainer, Props as VisibilityContainerProps } from './Visibility/VisibilityContainer';
+export { default as provider } from './chakra/provider';
+export { default as theme } from './chakra/theme';

package/src/variables.css

@@ -9,146 +9,146 @@
   --size--x10: 2.5rem;
   --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-orange--1: #FFECE5;
-  --color-orange--2: #FFA17F;
-  --color-orange--3: #FF4400;
-  --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;
+/*
+  --bitkit-colors-white: #FFFFFF;
+  --bitkit-colors-black: #222222;
+
+  --bitkit-colors-gray-1: #F8F8F8;
+  --bitkit-colors-gray-2: #ECECEC;
+  --bitkit-colors-gray-3: #DDDDDD;
+  --bitkit-colors-gray-4: #CCCCCC;
+  --bitkit-colors-gray-5: #ACACAC;
+  --bitkit-colors-gray-6: #777777;
+  --bitkit-colors-gray-7: #616161;
+  --bitkit-colors-gray-8: #444444;
+
+  --bitkit-colors-aqua-1: #E6FAF9;
+  --bitkit-colors-aqua-2: #86E9E2;
+  --bitkit-colors-aqua-3: #0DD3C5;
+  --bitkit-colors-aqua-4: #0EC7BA;
+  --bitkit-colors-aqua-5: #00968C;
+
+  --bitkit-colors-grape-1: #F8F0FF;
+  --bitkit-colors-grape-2: #B88ADB;
+  --bitkit-colors-grape-3: #760FC3;
+  --bitkit-colors-grape-4: #492F5C;
+  --bitkit-colors-grape-5: #351D48;
+
+  --bitkit-colors-eggplant: #683D87;
+
+  --bitkit-colors-red-1: #FFE8EE;
+  --bitkit-colors-red-2: #FF8FAB;
+  --bitkit-colors-red-3: #FF2158;
+  --bitkit-colors-red-4: #EE003B;
+  --bitkit-colors-red-5: #C02048;
+
+  --bitkit-colors-orange-1: #FFECE5;
+  --bitkit-colors-orange-2: #FFA17F;
+  --bitkit-colors-orange-3: #FF4400;
+  --bitkit-colors-orange-4: #E73E00;
+  --bitkit-colors-orange-5: #D33D07;
+
+  --bitkit-colors-yellow-1: #FFF9E5;
+  --bitkit-colors-yellow-2: #FFE27F;
+  --bitkit-colors-yellow-3: #FFC500;
+  --bitkit-colors-yellow-4: #ECB600;
+  --bitkit-colors-yellow-5: #795E00;
+
+  --bitkit-colors-green-1: #E7F9F3;
+  --bitkit-colors-green-2: #87E1C3;
+  --bitkit-colors-green-3: #0FC389;
+  --bitkit-colors-green-4: #0FB37D;
+  --bitkit-colors-green-5: #117D59;
+
+  --bitkit-colors-blue-1: #E6F2FA;
+  --bitkit-colors-blue-2: #86C1E6;
+  --bitkit-colors-blue-3: #0D83CD;
+  --bitkit-colors-blue-4: #0C70AE;
+  --bitkit-colors-blue-5: #095C90;
+
+  --bitkit-colors-darkblue-1: #E6ECF7;
+  --bitkit-colors-darkblue-2: #82A4D7;
+  --bitkit-colors-darkblue-3: #054AB0;
+  --bitkit-colors-darkblue-4: #043E94;
+  --bitkit-colors-darkblue-5: #033175;
+
+  --bitkit-colors-violet-1: #F4E7F9;
+  --bitkit-colors-violet-2: #CB8ADF;
+  --bitkit-colors-violet-3: #990FC3;
+  --bitkit-colors-violet-4: #8512A8;
+  --bitkit-colors-violet-5: #741492;
 
   --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-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-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);
-
+  --rgb-red-1: 255, 232, 238;
+  --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;
+
+  --bitkit-colors-overlay--black: rgba(34, 34, 34, 0.8);
+  --bitkit-colors-overlay--grape: rgba(53, 29, 72, 0.8);
+*/
   --font-family: 'TT Norms Pro', sans-serif;
   --font-family-monospace: 'Source Code Pro', monospace;