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

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.2",
   "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/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,