- Breadcrumbs icon and weight changes

- Button min-width added
- checkbox and radio icon color changes

Author: shreeyash07

packages/ui/src/components/Breadcrumbs/index.tsx

@@ -1,5 +1,5 @@
 import { Children } from 'react';
-import { ChevronRightLineIcon } from '@ifrc-go/icons';
+import { ArrowDropRightLineIcon } from '@ifrc-go/icons';
 import { _cs } from '@togglecorp/fujs';
 
 import styles from './styles.module.css';
@@ -15,7 +15,7 @@ function Breadcrumbs(props: BreadcrumbsProps) {
     const {
         className,
         children,
-        separator = <ChevronRightLineIcon />,
+        separator = <ArrowDropRightLineIcon />,
         itemClassName,
     } = props;
 

packages/ui/src/components/Breadcrumbs/styles.module.css

@@ -8,6 +8,7 @@
 
         &:not(:last-child) {
             color: var(--go-ui-color-gray-70);
+            font-weight: var(--go-ui-font-weight-light);
         }
 
         &:last-child {
@@ -18,7 +19,8 @@
     .separator {
         display: flex;
         justify-content: center;
-        color: var(--go-ui-color-gray-70);
-        font-size: var(--go-ui-font-size-xl);
+        color: var(--go-ui-color-gray-90);
+        font-size: var(--go-ui-font-size-3xl);
+        font-weight: var(--go-ui-font-weight-medium);
     }
 }

packages/ui/src/components/Button/styles.module.css

@@ -17,6 +17,7 @@
     cursor: var(--cursor);
     padding: var(--padding);
     width: fit-content;
+    min-width: calc(var(--base-spacing) * 6.5);
     max-width: 100%;
     overflow: hidden;
     text-transform: var(--text-transform);

packages/ui/src/components/Checkbox/styles.module.css

@@ -22,6 +22,10 @@
                 outline: var(--go-ui-width-separator-thin) dashed var(--go-ui-color-gray-40);
             }
         }
+
+        .checkmark {
+            color: var(--go-ui-color-gray-40);
+        }
     }
 
     .content {

packages/ui/src/components/RadioInput/Radio/styles.module.css

@@ -4,13 +4,15 @@
 
     .icon {
         transition: var(--go-ui-duration-transition-medium) color ease-in-out;
+        color: var(--go-ui-color-gray-40);
         font-size: var(--go-ui-height-icon-multiplier);
     }
 
     .content {
         flex-direction: column;
         gap: 0;
         line-height: var(--go-ui-line-height-sm);
+        color: var(--go-ui-color-black);
     }
 
     .description {