chore: adjust input style (#9217)

packages/frontend/component/src/ui/input/style.css.ts

@@ -8,7 +8,7 @@ export const inputWrapper = style({
   gap: '10px',
   color: cssVarV2('text/primary'),
   border: '1px solid',
-  backgroundColor: cssVarV2('layer/background/primary'),
+  backgroundColor: cssVarV2('input/background'),
   borderRadius: 8,
   display: 'flex',
   justifyContent: 'center',
@@ -30,16 +30,16 @@ export const inputWrapper = style({
     },
     // color
     '&.disabled': {
-      background: cssVar('hoverColor'),
+      background: cssVarV2('layer/background/hoverOverlay'),
     },
     '&.error': {
-      borderColor: cssVar('errorColor'),
+      borderColor: cssVarV2('input/border/error'),
     },
     '&.success': {
-      borderColor: cssVar('successColor'),
+      borderColor: cssVarV2('input/border/active'),
     },
     '&.warning': {
-      borderColor: cssVar('warningColor'),
+      borderColor: cssVarV2('input/border/error'),
     },
     '&.default': {
       borderColor: cssVarV2.layer.insideBorder.blackBorder,
@@ -74,13 +74,13 @@ export const input = style({
   background: 'transparent',
   selectors: {
     '&::placeholder': {
-      color: cssVar('placeholderColor'),
+      color: cssVarV2('text/placeholder'),
     },
     '&:disabled': {
-      color: cssVar('textDisableColor'),
+      color: cssVarV2('text/disable'),
     },
     '&:-webkit-autofill': {
-      WebkitBoxShadow: `0 0 0 1000px ${cssVar('white')} inset`,
+      WebkitBoxShadow: `0 0 0 1000px ${cssVarV2('layer/white')} inset`,
     },
   },
 });

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -87,6 +87,11 @@ export const ConfirmModal = ({
             onClick={onCancel}
             data-testid="confirm-modal-cancel"
             {...cancelButtonOptions}
+            variant={
+              cancelButtonOptions?.variant
+                ? cancelButtonOptions.variant
+                : 'secondary'
+            }
           >
             {cancelText}
           </Button>

packages/frontend/core/src/components/tags/styles.css.ts

@@ -45,7 +45,7 @@ export const tagsEditorSelectedTags = style({
   gap: '4px',
   flexWrap: 'wrap',
   padding: '10px 12px',
-  backgroundColor: cssVar('hoverColor'),
+  backgroundColor: cssVarV2('input/background'),
   minHeight: 42,
   selectors: {
     [`${tagsEditorRootMobile} &`]: {
@@ -66,7 +66,7 @@ export const searchInput = style({
   color: 'inherit',
   backgroundColor: 'transparent',
   '::placeholder': {
-    color: cssVar('placeholderColor'),
+    color: cssVarV2('text/placeholder'),
   },
 });
 

packages/frontend/core/src/desktop/pages/upgrade-to-team/styles.css.ts

@@ -73,7 +73,6 @@ export const itemContent = style({
   fontSize: cssVar('fontSm'),
   fontWeight: 500,
   lineHeight: '22px',
-  color: cssVarV2('text/emphasis'),
 });
 
 export const itemIcon = style({