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

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

@@ -225,6 +225,27 @@
 .Base--background-color-violet-4 { background-color: var(--color-violet--4); }
 .Base--background-color-violet-5 { background-color: var(--color-violet--5); }
 
+.Base--background-color-neutral-95 { background-color: var(--colors-neutral-95, #f6f4f6); }
+.Base--background-color-neutral-40 { background-color: var(--colors-neutral-40, #6b6071); }
+
+.Base--background-color-purple-95 { background-color: var(--colors-purple-95, #f9f2fd); }
+.Base--background-color-purple-40 { background-color: var(--colors-purple-40, #7b3ba5); }
+
+.Base--background-color-red-95 { background-color: var(--colors-red-95, #fff0f3); }
+.Base--background-color-red-40 { background-color: var(--colors-red-40, #a91e2e); }
+
+.Base--background-color-yellow-95 { background-color: var(--colors-yellow-95, #fff6d1); }
+.Base--background-color-yellow-40 { background-color: var(--colors-yellow-40, #875b00); }
+
+.Base--background-color-green-95 { background-color: var(--colors-green-95, #eef9f1); }
+.Base--background-color-green-40 { background-color: var(--colors-green-40, #167231); }
+
+.Base--background-color-turquoise-95 { background-color: var(--colors-turquoise-95, #e9fbf9); }
+.Base--background-color-turquoise-40 { background-color: var(--colors-turquoise-40, #007366); }
+
+.Base--background-color-blue-95 { background-color: var(--colors-blue-95, #ecf8fd); }
+.Base--background-color-blue-40 { background-color: var(--colors-blue-40, #1066ac); }
+
 .Base--text-color-white { color: var(--color-white); }
 .Base--text-color-black { color: var(--color-black); }
 
@@ -292,3 +313,25 @@
 .Base--text-color-violet-3 { color: var(--color-violet--3); }
 .Base--text-color-violet-4 { color: var(--color-violet--4); }
 .Base--text-color-violet-5 { color: var(--color-violet--5); }
+
+.Base--text-color-neutral-95 { color: var(--colors-neutral-95, #f6f4f6); }
+.Base--text-color-neutral-40 { color: var(--colors-neutral-40, #6b6071); }
+
+.Base--text-color-purple-95 { color: var(--colors-purple-95, #f9f2fd); }
+.Base--text-color-purple-40 { color: var(--colors-purple-40, #7b3ba5); }
+
+.Base--text-color-red-95 { color: var(--colors-red-95, #fff0f3); }
+.Base--text-color-red-40 { color: var(--colors-red-40, #a91e2e); }
+
+.Base--text-color-yellow-95 { color: var(--colors-yellow-95, #fff6d1); }
+.Base--text-color-yellow-40 { color: var(--colors-yellow-40, #875b00); }
+
+.Base--text-color-green-95 { color: var(--colors-green-95, #eef9f1); }
+.Base--text-color-green-40 { color: var(--colors-green-40, #167231); }
+
+.Base--text-color-turquoise-95 { color: var(--colors-turquoise-95, #e9fbf9); }
+.Base--text-color-turquoise-40 { color: var(--colors-turquoise-40, #007366); }
+
+.Base--text-color-blue-95 { color: var(--colors-blue-95, #ecf8fd); }
+.Base--text-color-blue-40 { color: var(--colors-blue-40, #1066ac); }
+

package/src/{Base → Old/Base}/Base.tsx

@@ -60,7 +60,21 @@ export type TypeColors =
   | 'violet-2'
   | 'violet-3'
   | 'violet-4'
-  | 'violet-5';
+  | 'violet-5'
+  | 'neutral-40'
+  | 'neutral-95'
+  | 'purple-40'
+  | 'purple-95'
+  | 'red-40'
+  | 'red-95'
+  | 'yellow-40'
+  | 'yellow-95'
+  | 'green-40'
+  | 'green-95'
+  | 'turquoise-40'
+  | 'turquoise-95'
+  | 'blue-40'
+  | 'blue-95';
 
 export type TypeSizes = 'x0' | 'x1' | 'x2' | 'x3' | 'x4' | 'x5' | 'x6' | 'x8' | 'x10' | 'x12' | 'x16';
 

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

@@ -37,21 +37,21 @@
   padding: var(--Button--padding-small-vertical) var(--Button--padding-small-horizontal);
   border-width: var(--Button--border-small);
   border-radius: var(--size--x1);
-  font-size: var(--font-size--2);
+  font-size: var(--fontSizes-2);
 }
 
 .Button--size-medium {
   padding: var(--Button--padding-medium-vertical) var(--Button--padding-medium-horizontal);
   border-width: var(--Button--border-medium);
   border-radius: var(--size--x1);
-  font-size: var(--font-size--3);
+  font-size: var(--fontSizes-3);
 }
 
 .Button--size-large {
   padding: var(--Button--padding-large-vertical) var(--Button--padding-large-horizontal);
   border-width: var(--Button--border-large);
   border-radius: 0.375rem;
-  font-size: var(--font-size--4);
+  font-size: var(--fontSizes-4);
 }
 
 .Button--borderless {

package/src/{Button → Old/Button}/ColorButton.css

@@ -21,21 +21,21 @@
   padding: var(--Button--padding-small-vertical) var(--Button--padding-small-horizontal);
   border-width: var(--Button--border-small);
   border-radius: var(--size--x1);
-  font-size: var(--font-size--2);
+  font-size: var(--fontSizes-2);
 }
 
 .ColorButton--size-medium {
   padding: var(--Button--padding-medium-vertical) var(--Button--padding-medium-horizontal);
   border-width: var(--Button--border-medium);
   border-radius: var(--size--x1);
-  font-size: var(--font-size--3);
+  font-size: var(--fontSizes-3);
 }
 
 .ColorButton--size-large {
   padding: var(--Button--padding-large-vertical) var(--Button--padding-large-horizontal);
   border-width: var(--Button--border-large);
   border-radius: 0.375rem;
-  font-size: var(--font-size--4);
+  font-size: var(--fontSizes-4);
 }
 
 .ColorButton--color-blue {

package/src/{DatePicker → Old/DatePicker}/DatePicker.tsx

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { DateTime } from 'luxon';
 import { ReferenceChildrenProps } from 'react-popper';
-import dataAtIds from '../dataAtIds.json';
 import { useMediaQuery, useSyncedStateAndProps } from '../hooks';
 import Button from '../Button/Button';
 import Buttons from '../Button/Buttons';
@@ -149,7 +148,6 @@ const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
             <PlacementArea direction="horizontal">
               <PlacementArea paddingHorizontal="x8">
                 <DatePickerMonth
-                  data-bitkit-at-id={dataAtIds.DatePickerMonthLeft}
                   dateSelectableFrom={dateSelectableFrom}
                   dateSelectableTo={dateSelectableTo}
                   dateSelectedFrom={dateSelectedFrom}
@@ -164,7 +162,6 @@ const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
               {match('56rem') && (
                 <PlacementArea paddingHorizontal="x8">
                   <DatePickerMonth
-                    data-bitkit-at-id={dataAtIds.DatePickerMonthRight}
                     dateSelectableFrom={dateSelectableFrom}
                     dateSelectableTo={dateSelectableTo}
                     dateSelectedFrom={dateSelectedFrom}
@@ -183,7 +180,7 @@ const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
                 Cancel
               </Button>
 
-              <Button data-bitkit-at-id={dataAtIds.DatePickerApply} level="primary" onClick={handleApply} size="small">
+              <Button level="primary" onClick={handleApply} size="small">
                 Apply
               </Button>
             </Buttons>

package/src/{DatePicker → Old/DatePicker}/DatePickerDay.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import { DateTime } from 'luxon';
-import dataAtIds from '../dataAtIds.json';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
 interface Props extends FlexProps {
@@ -58,7 +57,6 @@ const DatePickerDay: React.FunctionComponent<Props> = (props: Props) => {
       {...rest}
       alignChildren="middle"
       className={classes}
-      data-bitkit-at-id={isSelectable ? dataAtIds.DatePickerDay : undefined}
       direction="horizontal"
       onClick={isSelectable ? () => onSelect(date) : undefined}
     >