@bitrise/bitkit 12.123.0 → 12.124.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.123.0",
+  "version": "12.124.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Tag/Tag.theme.ts

@@ -50,21 +50,29 @@ const sizes = {
 };
 
 type TagColors = NonNullable<TagProps['colorScheme']>;
-const schemeMap: Record<TagColors, 'interactive' | 'warning' | 'critical' | 'success' | 'info' | 'neutral'> = {
-  blue: 'info',
-  green: 'success',
-  neutral: 'neutral',
-  purple: 'interactive',
-  red: 'critical',
-  yellow: 'warning',
+type MappedColor = {
+  color: 'interactive' | 'warning' | 'critical' | 'success' | 'info' | 'neutral';
+  isFilled: boolean;
+};
+
+const schemeMap: Record<TagColors, MappedColor> = {
+  blue: { color: 'info', isFilled: false },
+  green: { color: 'success', isFilled: false },
+  neutral: { color: 'neutral', isFilled: false },
+  purple: { color: 'interactive', isFilled: false },
+  purpleFilled: { color: 'interactive', isFilled: true },
+  red: { color: 'critical', isFilled: false },
+  yellow: { color: 'warning', isFilled: false },
 };
 
 const baseStyle = definePartsStyle(({ colorScheme }) => {
-  const color = schemeMap[colorScheme as TagColors];
+  const { color, isFilled } = schemeMap[colorScheme as TagColors];
+  const normalTextColor = color === 'neutral' ? 'text.primary' : `sys.${color}.strong`;
   const scheme = {
-    backgroundColor: `sys.${color}.subtle`,
-    borderColor: `sys.${color}.muted`,
-    color: color === 'neutral' ? 'text.primary' : `sys.${color}.strong`,
+    backgroundColor: `sys.${color}.${isFilled ? 'bold' : 'subtle'}`,
+    borderColor: `sys.${color}.${isFilled ? 'bold' : 'muted'}`,
+    color: isFilled ? 'text.on-color' : normalTextColor,
+    fontWeight: isFilled ? 'semibold' : 'normal',
   };
 
   return {
@@ -76,7 +84,7 @@ const baseStyle = definePartsStyle(({ colorScheme }) => {
         boxShadow: '0 0 0 1px var(--colors-purple-70) inset',
       },
       _hover: {
-        backgroundColor: `sys.${color}.moderate`,
+        backgroundColor: `sys.${color}.${isFilled ? 'highlight' : 'moderate'}`,
       },
       borderRadius: rem(2),
       marginInlineStart: '4',
@@ -86,15 +94,15 @@ const baseStyle = definePartsStyle(({ colorScheme }) => {
       borderRadius: '4',
       ...scheme,
       _disabled: {
-        backgroundColor: 'neutral.95',
-        borderColor: 'neutral.90',
-        color: 'neutral.80',
+        backgroundColor: `sys.neutral.${isFilled ? 'muted' : 'minimal'}`,
+        borderColor: `sys.neutral.${isFilled ? 'muted' : 'moderate'}`,
+        color: isFilled ? 'text.on-color' : 'text.disabled',
         cursor: 'not-allowed',
       },
       _loading: {
-        backgroundColor: 'neutral.93',
-        borderColor: 'neutral.93',
-        color: 'neutral.60',
+        backgroundColor: `sys.neutral.${isFilled ? 'muted' : 'subtle'}`,
+        borderColor: `sys.neutral.${isFilled ? 'muted' : 'subtle'}`,
+        color: isFilled ? 'text.on-color' : 'text.disabled',
         cursor: 'wait',
       },
     },
@@ -105,7 +113,7 @@ const baseStyle = definePartsStyle(({ colorScheme }) => {
       display: 'inline',
     },
     skeleton: {
-      backgroundColor: 'neutral.80',
+      backgroundColor: 'sys.neutral.muted',
       height: '8',
       minWidth: '32',
     },

package/src/Components/Tag/Tag.tsx

@@ -8,7 +8,7 @@ import { TypeColors } from '../../types/bitkit';
 
 export interface TagProps extends Omit<ChakraTagProps, 'colorScheme' | 'size' | 'variant'> {
   closeButtonTooltip?: string;
-  colorScheme?: 'neutral' | 'blue' | 'green' | 'red' | 'yellow' | 'purple';
+  colorScheme?: 'neutral' | 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'purpleFilled';
   iconColor?: TypeColors;
   iconName?: TypeIconName;
   isDisabled?: boolean;