@bitrise/bitkit 11.4.0 → 11.4.2

package/package.json

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

package/src/Components/AccordionLegacy/Accordion.theme.ts

@@ -128,10 +128,7 @@ const LegacyBaseStyle: ({ colorScheme, variant }: Pick<StyleFunctionProps, 'colo
 
 const BaseStyle: () => CSSObject = () => ({
   item: {
-    borderRadius: 0,
-    boxShadow: 'none',
-    borderTopStyle: 'solid',
-    borderTopWidth: '1px',
+    borderTop: '1px solid',
     borderTopColor: 'neutral.90',
   },
   button: {
@@ -145,9 +142,7 @@ const BaseStyle: () => CSSObject = () => ({
     _hover: {
       background: 'neutral.93',
     },
-    _expanded: {
-      borderBottomLeftRadius: '0',
-      borderBottomRightRadius: '0',
+    _active: {
       background: 'neutral.90',
     },
   },
@@ -157,7 +152,12 @@ const BaseStyle: () => CSSObject = () => ({
     marginLeft: '16',
   },
   panel: {
-    padding: '16',
+    paddingBlockEnd: '16',
+    paddingInline: '16',
+  },
+  root: {
+    borderBottom: '1px solid',
+    borderBottomColor: 'neutral.90',
   },
 });
 

package/src/Components/Form/Form.theme.ts

@@ -5,7 +5,7 @@ const FormTheme = {
     baseStyle: {
       helperText: {
         fontSize: '2',
-        lineHeight: '2',
+        lineHeight: '1.25rem',
         marginTop: '4',
         color: 'neutral.40',
       },
@@ -15,7 +15,7 @@ const FormTheme = {
     baseStyle: {
       text: {
         fontSize: '2',
-        lineHeight: '2',
+        lineHeight: '1.25rem',
         marginTop: '4',
         color: 'red.50',
       },

package/src/Components/Table/Table.theme.ts

@@ -5,7 +5,7 @@ export const separatorStyle: SystemStyleObject = {
   color: 'neutral.50',
   fontSize: '1',
   fontWeight: 'bold',
-  lineHeight: '1',
+  lineHeight: '1rem',
   textTransform: 'uppercase',
 };
 
@@ -17,7 +17,7 @@ const Tabletheme: SystemStyleObject = {
     },
     captionTitle: {
       fontSize: '4',
-      lineHeight: '4',
+      lineHeight: '1.75rem',
       fontWeight: 'bold',
       color: 'purple.10',
     },

package/src/Components/Tabs/Tabs.theme.ts

@@ -6,7 +6,7 @@ const TextTheme = {
       justifyContent: 'flex-start',
       fontSize: '3',
       gap: '8',
-      lineHeight: '3',
+      lineHeight: '1.5rem',
       paddingX: '16',
       paddingTop: '12',
       paddingBottom: '10px',

package/src/Components/Text/Text.tsx

@@ -37,7 +37,6 @@ type TextTags =
   | 'var';
 
 export interface TextProps extends ChakraTextProps {
-  align?: ResponsiveValue<'center' | 'justify' | 'left' | 'right'>;
   /**
    * Any valid HTML text tag
    */
@@ -45,13 +44,12 @@ export interface TextProps extends ChakraTextProps {
   /**
    * Font weight
    */
-  fontWeight?: ResponsiveValue<'bold' | 'normal'>;
+  fontWeight?: ResponsiveValue<'bold' | 'demiBold' | 'normal'>;
+  hasEllipsis?: boolean;
   /**
    * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
    */
   size?: ResponsiveValue<TextSizes>;
-  textTransform?: ResponsiveValue<'capitalize' | 'lowercase' | 'none' | 'uppercase'>;
-  hasEllipsis?: boolean;
 }
 
 /**

package/src/Components/Toggle/Toggle.theme.ts

@@ -64,7 +64,7 @@ const ToggleTheme: ComponentStyleConfig = {
     label: {
       fontSize: '3',
       fontWeight: 'normal',
-      lineHeight: '3',
+      lineHeight: '1.5rem',
       marginBottom: 0,
     },
     spinner: {

package/src/Components/Tooltip/Tooltip.theme.ts

@@ -5,7 +5,7 @@ const TooltipTheme: SystemStyleObject = {
     bg: 'neutral.10',
     color: 'neutral.95',
     fontSize: '2',
-    lineHeight: '2',
+    lineHeight: '1.25rem',
     paddingX: '12',
     paddingY: '8',
     borderRadius: '8',

package/src/Foundations/Themes/Alert.theme.ts

@@ -12,7 +12,7 @@ const AlertTheme = {
         borderWidth: '1px',
         padding: '12',
         fontSize: '3',
-        lineHeight: '3',
+        lineHeight: '1.5rem',
         bg: `${colorScheme}.95`,
         color: `${colorScheme}.40`,
         borderColor: `${colorScheme}.80`,

package/src/Foundations/Typography/Typography.ts

@@ -15,6 +15,7 @@ const typography = {
   },
   fontWeights: {
     normal: 400,
+    demiBold: 600,
     bold: 700,
   },
   letterSpacings: {
@@ -24,51 +25,41 @@ const typography = {
     '4': '0.0375rem',
     '5': '0.05rem',
   },
-  lineHeights: {
-    '1': '1rem',
-    '2': '1.25rem',
-    '3': '1.5rem',
-    '4': '1.75rem',
-    '5': '2.25rem',
-    '6': '2.5rem',
-    '7': '3rem',
-    '8': '3.75rem',
-  },
 };
 
 export const textSizes = {
   sizes: {
     '1': {
       fontSize: '1',
-      lineHeight: '1',
+      lineHeight: '1rem',
     },
     '2': {
       fontSize: '2',
-      lineHeight: '2',
+      lineHeight: '1.25rem',
     },
     '3': {
       fontSize: '3',
-      lineHeight: '3',
+      lineHeight: '1.5rem',
     },
     '4': {
       fontSize: '4',
-      lineHeight: '4',
+      lineHeight: '1.75rem',
     },
     '5': {
       fontSize: '5',
-      lineHeight: '5',
+      lineHeight: '2.25rem',
     },
     '6': {
       fontSize: '6',
-      lineHeight: '6',
+      lineHeight: '2.5rem',
     },
     '7': {
       fontSize: '7',
-      lineHeight: '7',
+      lineHeight: '3rem',
     },
     '8': {
       fontSize: '8',
-      lineHeight: '8',
+      lineHeight: '3.75rem',
     },
   },
 };

package/src/theme.ts

@@ -57,7 +57,7 @@ const theme = {
         color: 'text.body',
         fontFamily: 'body',
         fontSize: '3',
-        lineHeight: '3',
+        lineHeight: '1.5rem',
       },
       'pre, code, kbd, samp': {
         fontFamily: 'mono',