@bitrise/bitkit 9.6.1 → 9.7.0-alpha-chakra.1

package/src/{Modal → Old/Modal}/ModalHeader.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
+import { Link, Icon } from '@bitrise/bitkit';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import { Link, Icon } from '..';
 import { ModalContext } from './ModalContext';
 
 const { useContext } = React;

package/src/{Sidebar → Old/Sidebar}/SidebarMenuItem.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import { TypeIconName } from '../Icon/tsx';
-import dataAtIds from '../dataAtIds.json';
 import Base, { Props as BaseProps } from '../Base/Base';
 import Flex from '../Flex/Flex';
 import Icon from '../Icon/Icon';
@@ -37,7 +36,6 @@ const SidebarMenuItem: React.FunctionComponent<Props> = (props: Props) => {
         {...rest}
         alignChildrenVertical="middle"
         className="Sidebar__menu-item-link"
-        data-bitkit-at-id={dataAtIds.SidebarMenuLink}
         direction="horizontal"
         enabled={!active}
         gap="x4"

package/src/{Table → Old/Table}/Table.css

@@ -7,7 +7,7 @@
 }
 
 .Table__header-cell {
-  font-weight: var(--font-weight--bold);
+  font-weight: var(--fontWeights-bold);
   vertical-align: bottom;
 }
 

package/src/{Table → Old/Table}/TableHeaderCell.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import classnames from 'classnames';
-import Flex from '../Flex/Flex';
 import Icon from '../Icon/Icon';
 import Text, { Props as TextProps } from '../Text/Text';
 import Visibility from '../Visibility/Visibility';
 import VisibilityContainer from '../Visibility/VisibilityContainer';
+import Flex from '../Flex/Flex';
 
 export type TypeTableSort = 'asc' | 'desc';
 

package/src/{Text → Old/Text}/Text.css

@@ -12,7 +12,7 @@
 .Text--letter-spacing-x4 { letter-spacing: var(--letter-spacing--x4); }
 .Text--letter-spacing-x5 { letter-spacing: var(--letter-spacing--x5); }
 
-.Text--weight-bold { font-weight: var(--font-weight--bold); }
+.Text--weight-bold { font-weight: var(--fontWeights-bold); }
 
 .Text--ellipsis {
   max-width: 100%;

package/src/Old/Text/TextSizes.css

@@ -0,0 +1,39 @@
+.Text--size-1 {
+  font-size: var(--fontSizes-1);
+  line-height: var(--lineHeights-1);
+}
+
+.Text--size-2 {
+  font-size: var(--fontSizes-2);
+  line-height: var(--lineHeights-2);
+}
+
+.Text--size-3 {
+  font-size: var(--fontSizes-3);
+  line-height: var(--lineHeights-3);
+}
+
+.Text--size-4 {
+  font-size: var(--fontSizes-4);
+  line-height: var(--lineHeights-4);
+}
+
+.Text--size-5 {
+  font-size: var(--fontSizes-5);
+  line-height: var(--lineHeights-5);
+}
+
+.Text--size-6 {
+  font-size: var(--fontSizes-6);
+  line-height: var(--lineHeights-6);
+}
+
+.Text--size-7 {
+  font-size: var(--fontSizes-7);
+  line-height: var(--lineHeights-7);
+}
+
+.Text--size-8 {
+  font-size: var(--fontSizes-8);
+  line-height: var(--lineHeights-8);
+}

package/src/{variables.css → Old/variables.css}

@@ -10,74 +10,6 @@
   --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;
-
   --rgb-white: 255, 255, 255;
   --rgb-black: 34, 34, 34;
 
@@ -148,38 +80,38 @@
 
   --color-overlay--black: rgba(34, 34, 34, 0.8);
   --color-overlay--grape: rgba(53, 29, 72, 0.8);
-/*
-  --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-white: var(--colors-neutral-100, #fff);
+  --color-black: var(--colors-neutral-10, #201b22);
+
+  --color-gray--1: var(--colors-neutral-95, #f6f4f6);
+  --color-gray--2: var(--colors-neutral-93, #efebef);
+  --color-gray--3: var(--colors-neutral-90, #dfdae1);
+  --color-gray--4: var(--colors-neutral-80, #c9c1cd);
+  --color-gray--5: var(--colors-neutral-70, #afa4b4);
+  --color-gray--6: var(--colors-neutral-50, #7d7184);
+  --color-gray--7: var(--colors-neutral-40, #6b6071);
+  --color-gray--8: var(--colors-neutral-30, #49404f);
+
+  --color-aqua--1: var(--colors-turquoise-95, #e9fbf9);
+  --color-aqua--2: var(--colors-turquoise-80, #8ae0d7);
+  --color-aqua--3: var(--colors-turquoise-70, #55cec3);
+  --color-aqua--4: var(--colors-turquoise-60, #11bba9);
+  --color-aqua--5: var(--colors-turquoise-50, #009e8e);
+
+  --color-grape--1: var(--colors-purple-95, #f9f2fd);
+  --color-grape--2: var(--colors-purple-70, #c289e6);
+  --color-grape--3: var(--colors-purple-50, #9247c2);
+  --color-grape--4: var(--colors-purple-30, #5c2a7e);
+  --color-grape--5: var(--colors-purple-10, #2b0e3f);
+
+  --color-eggplant: var(--colors-purple-40, #7b3ba5);
+
+  --color-red--1: var(--colors-red-93, #ffe5eb);
+  --color-red--2: var(--colors-red-70, #ff8091);
+  --color-red--3: var(--colors-red-50, #d72d40);
+  --color-red--4: var(--colors-red-40, #a91e2e);
+  --color-red--5: var(--colors-red-30, #78111c);
 
   --color-orange--1: #FFECE5;
   --color-orange--2: #FFA17F;
@@ -187,35 +119,35 @@
   --color-orange--4: #E73E00;
   --color-orange--5: #D33D07;
 
-  --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);
+  --color-yellow--1: var(--colors-yellow-95, #fff6d1);
+  --color-yellow--2: var(--colors-yellow-90, #fbe074);
+  --color-yellow--3: var(--colors-yellow-80, #f9cc15);
+  --color-yellow--4: var(--colors-yellow-70, #ebba00);
+  --color-yellow--5: var(--colors-yellow-40, #875b00);
+
+  --color-green--1: var(--colors-green-95, #eef9f1);
+  --color-green--2: var(--colors-green-80, #a1deb2);
+  --color-green--3: var(--colors-green-60, #4eb76c);
+  --color-green--4: var(--colors-green-50, #2a9d4c);
+  --color-green--5: var(--colors-green-40, #167231);
+
+  --color-blue--1: var(--colors-blue-93, #def2fc);
+  --color-blue--2: var(--colors-blue-70, #71b8ef);
+  --color-blue--3: var(--colors-blue-50, #2582d0);
+  --color-blue--4: var(--colors-blue-40, #1066ac);
+  --color-blue--5: var(--colors-blue-30, #044781);
+
+  --color-darkblue--1: var(--colors-blue-93, #def2fc);
+  --color-darkblue--2: var(--colors-blue-60, #4f9bde);
+  --color-darkblue--3: var(--colors-blue-30, #044781);
+  --color-darkblue--4: var(--colors-blue-20, #00315c);
+  --color-darkblue--5: var(--colors-blue-10, #002442);
+
+  --color-violet--1: var(--colors-purple-95, #f9f2fd);
+  --color-violet--2: var(--colors-purple-70, #c289e6);
+  --color-violet--3: var(--colors-purple-40, #7b3ba5);
+  --color-violet--4: var(--colors-purple-30, #5c2a7e);
+  --color-violet--5: var(--colors-purple-20, #421560);
 
   --rgb-white: 255, 255, 255;
 
@@ -230,7 +162,6 @@
   --rgb-blue--2: 134, 193, 230;
   
   --color-overlay--black: rgba(34, 34, 34, 0.8);
-  */
 
   --font-family: 'TT Norms Pro', sans-serif;
   --font-family-monospace: 'Source Code Pro', monospace;