@bitrise/bitkit 12.83.0 → 12.84.0

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

@@ -1,35 +1,35 @@
 import { ColorScheme } from '../../tokens/tokens';
 
 const AlertTheme = {
-  parts: ['container', 'title', 'icon', 'body'],
   baseStyle({ colorScheme }: { colorScheme: ColorScheme }) {
     return {
+      body: { display: 'flex', flexDirection: 'column' },
       container: {
-        display: 'flex',
         alignItems: 'start',
-        gap: '8',
+        bg: `${colorScheme}.95`,
+        borderColor: `${colorScheme}.80`,
         borderRadius: '8',
         borderWidth: '1px',
-        padding: '12',
+        color: `${colorScheme}.40`,
+        display: 'flex',
         fontSize: '3',
+        gap: '8',
         lineHeight: '1.5rem',
-        bg: `${colorScheme}.95`,
-        color: `${colorScheme}.40`,
-        borderColor: `${colorScheme}.80`,
-      },
-      title: {
-        fontWeight: 'bold',
+        padding: '12',
       },
       icon: {
-        w: 24,
         h: 24,
         marginEnd: 8,
+        w: 24,
+      },
+      title: {
+        fontWeight: 'bold',
       },
-      body: { display: 'flex', flexDirection: 'column' },
     };
   },
   defaultProps: {
     colorScheme: 'blue',
   },
+  parts: ['container', 'title', 'icon', 'body'],
 };
 export default AlertTheme;

package/src/Foundations/Typography/Typography.ts

@@ -14,9 +14,9 @@ const typography = {
     '8': '3rem',
   },
   fontWeights: {
-    normal: 400,
-    demiBold: 600,
     bold: 700,
+    demiBold: 600,
+    normal: 400,
   },
   letterSpacings: {
     '1': '0.00625rem',

package/src/Foundations/Zindex/Zindex.ts

@@ -1,12 +1,12 @@
 const zIndices = {
-  hide: -1,
   auto: 'auto',
   base: 0,
-  header: 1100,
-  fullDialogOverlay: 1199,
-  fullDialog: 1200,
-  dialogOverlay: 1299,
   dialog: 1300,
+  dialogOverlay: 1299,
+  fullDialog: 1200,
+  fullDialogOverlay: 1199,
+  header: 1100,
+  hide: -1,
   popover: 1400,
   tooltip: 1500,
 };

package/src/Foundations/docComponents/TokenTable.tsx

@@ -39,7 +39,7 @@ const Row = ({ token, value }: { token: string; value: string }) => {
         </>
       </Td>
       <Td>
-        <Dot backgroundColor={value} border="1px solid" ref={dotRef} size="48" />
+        <Dot ref={dotRef} backgroundColor={value} border="1px solid" size="48" />
       </Td>
     </Tr>
   );

package/src/hooks/useResponsive.ts

@@ -17,7 +17,7 @@ const mediaQueries = [
 
 const useResponsive = () => {
   const [isMobile, isTablet, isDesktop, isWideDesktop] = useMediaQuery(mediaQueries);
-  return { isMobile, isTablet, isDesktop, isWideDesktop };
+  return { isDesktop, isMobile, isTablet, isWideDesktop };
 };
 
 export default useResponsive;

package/src/theme.ts

@@ -56,41 +56,12 @@ import FilterSwitch from './Components/Filter/FilterSwitch/FilterSwitch.theme';
 import { colors, semanticTokens } from './tokens/tokens';
 
 const theme = {
+  breakpoints,
+  colors,
   config: {
     cssVarPrefix: '',
   },
-  breakpoints,
-  colors,
   ...typography,
-  radii,
-  shadows,
-  sizes,
-  space: sizes,
-  zIndices,
-  semanticTokens,
-  styles: {
-    global: {
-      body: {
-        color: 'text.body',
-        fontFamily: 'body',
-        fontSize: '3',
-        lineHeight: '1.5rem',
-      },
-      'pre, code, kbd, samp': {
-        fontFamily: 'mono',
-      },
-      hr: {
-        borderTopWidth: 0,
-      },
-      a: {
-        textDecoration: 'none',
-      },
-      '*:focus-visible': {
-        boxShadow: 'outline',
-        outline: 'none',
-      },
-    },
-  },
   components: {
     Accordion,
     Avatar,
@@ -106,41 +77,70 @@ const theme = {
     EmptyState,
     FilterSwitch,
     ...Form,
+    Alert,
+    CloseButton,
+    CodeBlock,
+    CodeSnippet,
+    DatePickerDay,
+    DefinitionTooltip,
+    ExpandableCard,
+    FileInput,
+    Filter,
+    Input,
     Link,
     List,
     Menu,
     Modal: Dialog,
+    Note,
+    NumberInput,
+    Popover,
+    Progress: ProgressBar,
+    ProgressIndicator,
     Radio,
+    SegmentedControl,
     Select,
-    Table,
-    Tabs,
-    Text,
-    Tooltip,
-    Alert,
-    CloseButton,
-    Input,
-    Popover,
-    Switch: Toggle,
-    Textarea,
-    DatePickerDay,
-    NumberInput,
-    Skeleton,
     Sidebar,
     SidebarItem,
-    Progress: ProgressBar,
-    ProgressIndicator,
+    Skeleton,
     Slider,
-    SegmentedControl,
+    Switch: Toggle,
+    Table,
+    Tabs,
     Tag,
-    Note,
-    CodeBlock,
-    CodeSnippet,
-    DefinitionTooltip,
+    Text,
+    Textarea,
     Toggletip,
-    ExpandableCard,
-    FileInput,
-    Filter,
+    Tooltip,
+  },
+  radii,
+  semanticTokens,
+  shadows,
+  sizes,
+  space: sizes,
+  styles: {
+    global: {
+      '*:focus-visible': {
+        boxShadow: 'outline',
+        outline: 'none',
+      },
+      a: {
+        textDecoration: 'none',
+      },
+      body: {
+        color: 'text.body',
+        fontFamily: 'body',
+        fontSize: '3',
+        lineHeight: '1.5rem',
+      },
+      hr: {
+        borderTopWidth: 0,
+      },
+      'pre, code, kbd, samp': {
+        fontFamily: 'mono',
+      },
+    },
   },
+  zIndices,
 };
 
 export default theme;

package/src/tokens/tokens.ts

@@ -5,14 +5,14 @@ const legacyTokens = {
   brand: {
     primary: 'pal.purple.30',
   },
+  separator: {
+    primary: 'pal.neutral.90',
+  },
   text: {
     body: 'pal.neutral.10',
-    secondary: 'pal.neutral.40',
     link: 'pal.purple.50',
     linkHover: 'pal.purple.30',
-  },
-  separator: {
-    primary: 'pal.neutral.90',
+    secondary: 'pal.neutral.40',
   },
 };
 

package/src/utils/utils.ts

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 export const rem = (input: number | string): number | string => {
   const value = typeof input === 'string' ? parseInt(input, 10) : input;