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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.7.0-alpha-chakra.1",
+  "version": "9.7.0-alpha-chakra.4",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/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/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/Old/Input/Input.css

@@ -57,7 +57,7 @@
 .Input__container--disabled,
 .Input__container--readonly {
   box-shadow: none;
-  background-color: var(--color-gray--2);
+  background-color: var(--color-gray--1);
 }
 
 .Input__container--invalid,

package/src/Old/Input/InputLabel.tsx

@@ -8,7 +8,7 @@ export type Props = TextProps;
  * input.
  */
 const InputLabel: React.FunctionComponent<Props> = (props: Props) => {
-  return <Text {...props} Component="label" margin="x1" size="3" textColor="grape-4" weight="bold" />;
+  return <Text {...props} Component="label" margin="x1" size="3" textColor="grape-5" weight="bold" />;
 };
 
 export default InputLabel;

package/src/Old/Modal/Modal.tsx

@@ -111,7 +111,7 @@ const Modal: React.FunctionComponent<Props> = (props: Props) => {
 };
 
 Modal.defaultProps = {
-  backgroundColor: 'gray-1',
+  backgroundColor: 'white',
 };
 
 export default Modal;

package/src/Old/Progress/ProgressBar.tsx

@@ -37,6 +37,8 @@ const ProgressBar: React.FunctionComponent<Props> = (props: Props) => {
       height={height}
       style={{
         '--ProgressBar--height': height,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        /* @ts-ignore */
         '--ProgressBar--stripe-color': stripeColor ? colorMap[stripeColor] : '',
       }}
     >

package/src/Old/Skeleton/Skeleton.tsx

@@ -18,6 +18,8 @@ export interface Props extends BaseProps {
  */
 const Skeleton: React.FunctionComponent<Props> = (props: Props) => {
   const { active, color = 'white', ...rest } = props;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  /* @ts-ignore */
   const rgb = rgbMap[color];
   const classes = classnames('Skeleton', {
     'Skeleton--active': active,

package/src/index.ts

@@ -6,8 +6,11 @@ import * as hooks from './Old/hooks';
 export { variables };
 export { hooks };
 export { default as Provider } from './Components/Provider/Provider';
+
 export { default as theme } from './theme';
 
+export type { TypeBorderRadius } from './Old/Base/Base';
+
 export { default as AddonBeam, Props as AddonBeamProps } from './Old/AddonBeam/AddonBeam';
 export { default as AddonBeamLink, Props as AddonBeamLinkProps } from './Old/AddonBeam/AddonBeamLink';
 export { default as AddonFooter, Props as AddonFooterProps } from './Old/AddonFooter/AddonFooter';