Update Bricks and colors

package.json

@@ -49,8 +49,8 @@
     "@sentry/nextjs": "7.99.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.6",
-    "@taskany/bricks": "5.52.0",
-    "@taskany/colors": "1.13.0",
+    "@taskany/bricks": "5.52.2",
+    "@taskany/colors": "1.13.1",
     "@taskany/icons": "2.0.7",
     "@tippyjs/react": "4.2.6",
     "@trpc/client": "10.35.0",

src/components/CommentCreateForm/CommentCreateForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import { State as StateDataType } from '@prisma/client';
 import { nullable, useLatest } from '@taskany/bricks';
 import { IconDownSmallSolid, IconUpSmallSolid } from '@taskany/icons';
 import { Avatar, Button } from '@taskany/bricks/harmony';
@@ -90,12 +90,15 @@
 
     const onCancelCreate = useCallback(() => {
         setBusy(false);
-        setFocused(false);
         setPushState(stateId ? statesMap[stateId] : undefined);
         setDescription('');
         onCancel?.();
     }, [onCancel, stateId, statesMap]);
 
+    const onBlur = useCallback(() => {
+        setFocused(false);
+    }, []);
+
     const onStateSelect = useCallback(
         (state: StateDataType) => {
             setPushState((prev) => {
@@ -138,6 +141,7 @@
                 onChange={onCommentChange}
                 onSubmit={onCommentFormSubmit('pushState')}
                 onCancel={onCancelCreate}
+                onBlur={onBlur}
                 onFocus={onCommentFocus}
                 passedError={error}
                 actionButton={

src/components/CommentForm/CommentForm.module.css

@@ -6,8 +6,7 @@
 
 .CommentFormWrapper {
     position: relative;
-    transition: 200ms ease-in;
-    transition-property: background-color;
+    background-color: var(--input-fill);
 }
 
 .CommentFormWrapper::before {
@@ -19,7 +18,7 @@
     width: 14px;
     height: 14px;
 
-    background-color: var(--background);
+    background-color: var(--input-fill);
 
     border-left: 1px solid var(--input-border);
     border-top: 1px solid var(--input-border);
@@ -34,5 +33,6 @@
 }
 
 .CommentFormWrapper_focused::before {
-    background-color: var(--input-fill-focused-borderless);
+    background-color: var(--input-fill-focused);
+    border-color: var(--input-border-focused);
 }

src/components/CommentForm/CommentForm.tsx

@@ -23,6 +23,7 @@ interface CommentFormProps {
     onSubmit: (form: CommentSchema) => void | Promise<void>;
     onChange?: (form: CommentSchema) => void;
     onFocus?: () => void;
+    onBlur?: () => void;
     onCancel?: () => void;
 }
 
@@ -35,6 +36,7 @@ export const CommentForm: React.FC<CommentFormProps> = ({
     onChange,
     onSubmit,
     onFocus,
+    onBlur,
     onCancel,
     passedError,
 }) => {
@@ -80,6 +82,7 @@ export const CommentForm: React.FC<CommentFormProps> = ({
                         placeholder={tr('Leave a comment')}
                         height={focused ? 120 : 80}
                         onCancel={onCommentCancel}
+                        onBlur={onBlur}
                         onFocus={onFocus}
                         onUploadFail={onUploadFail}
                         autoFocus={autoFocus}

src/components/CommentViewHeader/CommentViewHeader.tsx

@@ -16,7 +16,7 @@ interface CommentViewHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 export const CommentViewHeader: React.FC<CommentViewHeaderProps> = ({ name, timeAgo, href, state, ...attrs }) => {
     return (
         <div className={s.CommentViewHeader} {...attrs}>
-            <Text size="s" weight="bold">
+            <Text size="s" weight="semiBold">
                 {name}
             </Text>
             <span>—</span>

src/components/CriteriaForm/CriteriaForm.tsx

@@ -192,9 +192,7 @@ const CriteriaWeightField = forwardRef<HTMLInputElement, WeightFieldProps>(
     ({ error, maxValue, value, onChange, name }, ref) => {
         return (
             <FormControl className={s.FormControl}>
-                <FormControlLabel size="s" className={s.FormControlLabel}>
-                    {tr('Weight')}
-                </FormControlLabel>
+                <FormControlLabel className={s.FormControlLabel}>{tr('Weight')}</FormControlLabel>
                 <FormControlInput
                     className={s.FormControlWeigthInput}
                     outline

src/components/FiltersBar/FiltersBar.tsx

@@ -88,7 +88,7 @@ export const AddFilterDropdown = <T extends { id: string; title: string }>({
 
 export const FiltersBarDropdownTitle: FC<ComponentProps<typeof Text>> = ({ children }) => {
     return (
-        <Text className={s.FiltersBarDropdownTitle} weight="bold">
+        <Text className={s.FiltersBarDropdownTitle} weight="semiBold">
             {children}
         </Text>
     );

src/components/GoalParentDropdown/GoalParentDropdown.tsx

@@ -132,7 +132,7 @@ export const GoalParentDropdown = ({
                 onChange={onChange}
                 renderItem={(props) => (
                     <div className={s.DropdownPanelItem}>
-                        <Text size="s" weight="bold" as="span" ellipsis>
+                        <Text size="s" weight="semiBold" as="span" ellipsis>
                             {props.item.title}
                         </Text>
                         <Text size="s" as="span" className={s.DropdownPanelItem_id}>

src/components/HistoryRecord/HistoryRecord.tsx

@@ -274,7 +274,7 @@ const HistoryRecordEstimate: React.FC<HistoryChangeProps<string>> = ({ from, to
                 </HistoryRecordText>
             ))}
             to={nullable(to ? decodeHistoryEstimate(to) : null, (te) => (
-                <HistoryRecordText className={s.HistoryRecordTextPrimary} weight="bold" size="s">
+                <HistoryRecordText className={s.HistoryRecordTextPrimary} weight="semiBold" size="s">
                     {formateEstimate(te.date, { locale, type: te.type })}
                 </HistoryRecordText>
             ))}
@@ -359,12 +359,12 @@ const HistoryRecordTextChange: React.FC<HistoryChangeProps<string>> = ({ from, t
 const HistoryRecordPriority: React.FC<HistoryChangeProps<Priority>> = ({ from, to }) => (
     <HistorySimplifyRecord
         from={nullable(from, (f) => (
-            <HistoryRecordText weight="bold" strike size="s" className={s.HistoryRecordTextPrimary}>
+            <HistoryRecordText weight="semiBold" strike size="s" className={s.HistoryRecordTextPrimary}>
                 {getPriorityText(f.title)}
             </HistoryRecordText>
         ))}
         to={nullable(to, (t) => (
-            <HistoryRecordText weight="bold" size="s" className={s.HistoryRecordTextPrimary}>
+            <HistoryRecordText weight="semiBold" size="s" className={s.HistoryRecordTextPrimary}>
                 {getPriorityText(t.title)}
             </HistoryRecordText>
         ))}
@@ -443,7 +443,7 @@ const HistoryRecordCriteriaItem: React.FC<CriteriaItem> = ({ criteriaGoal, exter
     }
 
     return (
-        <HistoryRecordText weight="bold" size="s" strike={strike} className={s.HistoryRecordTextPrimary}>
+        <HistoryRecordText weight="semiBold" size="s" strike={strike} className={s.HistoryRecordTextPrimary}>
             {title}
         </HistoryRecordText>
     );

src/components/IssueKey/IssueKey.tsx

@@ -10,7 +10,7 @@ interface IssueKeyProps {
 
 export const IssueKey: React.FC<IssueKeyProps> = ({ id, size = 'm', children }) => {
     return (
-        <Text size={size} weight="bold" className={s.IssuesKey}>
+        <Text size={size} weight="semiBold" className={s.IssuesKey}>
             #{id} {children}
         </Text>
     );

src/components/IssueMeta/IssueMeta.tsx

@@ -15,7 +15,7 @@ export const IssueMeta: React.FC<IssueMetaProps> = ({ title, children, className
     return (
         <div className={cn(s.IssueMeta, className)} {...rest}>
             {nullable(title, (t) => (
-                <Text size="m" weight="bold" className={s.IssueMetaTitle}>
+                <Text size="m" weight="semiBold" className={s.IssueMetaTitle}>
                     {t}
                 </Text>
             ))}

src/components/IssueParent/IssueParent.tsx

@@ -22,7 +22,7 @@ export const IssueParent = ({ parent, size = 'l', ...props }: IssueParentProps)
     const normalizedParent = ([] as Array<Parent | undefined>).concat(parent).filter(Boolean) as Array<Parent>;
 
     return (
-        <Text className={s.IssueParentTitle} size={size} weight="bold" as="span" {...props}>
+        <Text className={s.IssueParentTitle} size={size} weight="semiBold" as="span" {...props}>
             {normalizedParent.map((p, i) =>
                 nullable(p.id, (id) => (
                     <span key={id} {...goalPageHeaderParent.attr}>