feat: change ui theme

leancloud · Dec 22, 2023 · 66174eb · 66174eb
1 parent 261f8be
commit 66174eb
Show file tree

Hide file tree

Showing 18 changed files with 67 additions and 54 deletions.
diff --git a/in-app/v1/src/App/Home/AiClassify.tsx b/in-app/v1/src/App/Home/AiClassify.tsx
@@ -146,7 +146,7 @@ const Result = memo(({ categoryId }: { categoryId: string }) => {
     <div>
       <div className="flex flex-row items-center">
         <span className="mr-[0.375rem]">
-          {data?.status === 'success' ? <DoneIcon /> : <FailedIcon />}
+          {data?.status === 'success' ? <DoneIcon className="text-tapBlue" /> : <FailedIcon />}
         </span>
         <span className="text-[#222222]">
           {data?.status === 'success' ? (

diff --git a/in-app/v1/src/App/Tickets/New/CustomForm/CustomField/CheckboxGroup/index.tsx b/in-app/v1/src/App/Tickets/New/CustomForm/CustomField/CheckboxGroup/index.tsx
@@ -58,7 +58,7 @@ export function CheckboxGroup({ id, description, options, required }: CustomFiel
                 <div
                   className={classNames(
                     'flex w-4 h-4 rounded-full',
-                    checked ? 'bg-tapBlue' : 'border border-color-[#B9BEC1]'
+                    checked ? 'bg-tapBlue' : 'border border-[#B9BEC1]'
                   )}
                 >
                   <CheckIcon className="w-2 h-2 m-auto text-white" />

diff --git a/in-app/v1/src/App/Tickets/New/CustomForm/CustomField/index.module.css b/in-app/v1/src/App/Tickets/New/CustomForm/CustomField/index.module.css
@@ -1,7 +1,7 @@
 .required {
   &::after {
     content: '*';
-    color: #F64C4C;
+    @apply text-red;
     position: absolute;
     line-height: 18px;
     padding-left: 2px;

diff --git a/in-app/v1/src/App/Tickets/New/Form/Group/index.module.css b/in-app/v1/src/App/Tickets/New/Form/Group/index.module.css
@@ -1,7 +1,7 @@
 .required {
   &::after {
     content: '*';
-    color: #F64C4C;
+    @apply text-red;
     position: absolute;
     line-height: 18px;
     padding-left: 2px;

diff --git a/in-app/v1/src/App/Tickets/Ticket/Evaluation/index.tsx b/in-app/v1/src/App/Tickets/Ticket/Evaluation/index.tsx
@@ -87,7 +87,7 @@ export function NewEvaluation({ initData, loading, onSubmit }: NewEvaluationProp
             checked={evaluation.star === 1}
             onChange={() => setEvaluation({ ...evaluation, star: 1, selections: [] })}
           >
-            <span className="inline-flex items-center text-[#FF8156]">
+            <span className="inline-flex items-center text-amber">
               <ThumbUpIcon className="w-[14px] h-[14px] inline-block mr-1" />
               {t('evaluation.useful')}
             </span>

diff --git a/in-app/v1/src/App/Tickets/Ticket/Replies/index.tsx b/in-app/v1/src/App/Tickets/Ticket/Replies/index.tsx
@@ -48,7 +48,7 @@ function ReplyItem({ data, isLast }: ReplyItemProps) {
         </div>
         <div
           className={cx('inline-block rounded-2xl rounded-tl-none mt-2 p-1 text-sm', {
-            'bg-[#F2FDFE]': data.isCustomerService,
+            'bg-tapBlue-200': data.isCustomerService,
             'bg-[rgba(0,0,0,0.02)]': !data.isCustomerService,
           })}
         >

diff --git a/in-app/v1/src/App/Tickets/Ticket/index.module.css b/in-app/v1/src/App/Tickets/Ticket/index.module.css
@@ -1,12 +1,12 @@
 .status {
   &.new, &.waitForStaff {
-    color: #15C5CE;
+    @apply text-tapBlue;
   }
   &.waitForCustomer {
-    color: #FF8156;
+    @apply text-amber;
   }
   &.resolved {
-    color: #47b881;
+    @apply text-green;
   }
 }
 

diff --git a/in-app/v1/src/icons/Done.tsx b/in-app/v1/src/icons/Done.tsx
@@ -9,7 +9,7 @@ export const DoneIcon = (props: SVGProps<SVGSVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <circle cx="8.0001" cy="8.0001" r="6.4" fill="#15C5CE" />
+    <circle cx="8.0001" cy="8.0001" r="6.4" fill="currentColor" />
     <path
       d="M5.3335 7.66667L7.3335 9.66667L10.6668 6"
       stroke="white"

diff --git a/in-app/v1/tailwind.config.js b/in-app/v1/tailwind.config.js
@@ -4,21 +4,25 @@ module.exports = {
     extend: {
       colors: {
         tapBlue: {
-          DEFAULT: '#15C5CE',
-          50: '#CEF8FA',
-          100: '#B7F5F8',
-          200: '#89EEF3',
-          300: '#5BE7EE',
-          400: '#2CE0EA',
-          500: '#15C5CE',
-          600: '#13AFB7',
-          700: '#1099A0',
-          800: '#0E8389',
-          900: '#0C6C71',
+          DEFAULT: '#00d9c5',
+          100: '#fafefe',
+          200: '#edfcfb',
+          300: '#e6fbf9',
+          400: '#c2f6f1',
+          500: '#9cf0e8',
+          600: '#33e1d1',
+          700: '#00d9c5',
+          800: '#00bfad',
         },
         red: {
           DEFAULT: '#F64C4C',
         },
+        green: {
+          DEFAULT: '#47b881',
+        },
+        amber: {
+          DEFAULT: '#ff7f4f',
+        },
       },
       fontSize: {
         xs: ['12px', '15px'],

diff --git a/next/web/src/App/Admin/Settings/TicketFields/index.tsx b/next/web/src/App/Admin/Settings/TicketFields/index.tsx
@@ -45,7 +45,7 @@ function TicketFieldActions({ field }: TicketFieldActionsProps) {
   return (
     <button
       className={cx('text-primary', {
-        'text-[#ff4d4f]': field.active,
+        'text-danger': field.active,
         'text-gray-300': isLoading,
       })}
       disabled={isLoading}

diff --git a/next/web/src/App/Admin/Settings/TicketForms/index.tsx b/next/web/src/App/Admin/Settings/TicketForms/index.tsx
@@ -43,7 +43,7 @@ function TicketFormActions({ form }: { form: TicketFormSchema }) {
 
   return (
     <button
-      className={cx('text-[#ff4d4f]', {
+      className={cx('text-danger', {
         'text-gray-300': isLoading,
       })}
       disabled={isLoading}

diff --git a/next/web/src/App/Admin/Tickets/Ticket/TicketDetail.tsx b/next/web/src/App/Admin/Tickets/Ticket/TicketDetail.tsx
@@ -639,7 +639,7 @@ function AssigneeSection({
             <div>负责人</div>
             {assigneeIsGroupMember === false && (
               <Tooltip title="负责人不是当前客服组的成员">
-                <AiFillExclamationCircle className="ml-1 inline-block w-4 h-4 text-[#ff4d4f]" />
+                <AiFillExclamationCircle className="ml-1 inline-block w-4 h-4 text-danger" />
               </Tooltip>
             )}
           </div>

diff --git a/next/web/src/App/Admin/components/Uploader.tsx b/next/web/src/App/Admin/components/Uploader.tsx
@@ -196,7 +196,7 @@ function FileItem({ file, onRemove, disabled }: FileItemProps) {
         <Progress
           className="absolute"
           type="circle"
-          strokeColor="#15c5ce"
+          strokeColor="#00d9c5"
           showInfo={false}
           width={42}
           strokeWidth={10}

diff --git a/next/web/src/components/antd/index.less b/next/web/src/components/antd/index.less
@@ -1,4 +1,3 @@
 @import 'antd/lib/style/themes/default.less';
 @import 'antd/dist/antd.less';
-@import '@/styles/antd-override.less';
-@import '@/styles/custom-antd-override.less';
+@import '@/styles/custom-antd-override.less';
diff --git a/next/web/src/styles/antd-override.less b/next/web/src/styles/antd-override.less
@@ -1,6 +1,7 @@
 /** copy https://git.gametaptap.com/web-internal/tds-ui-kit/-/blob/master/packages/tds-ui-kit/src/style/antd-override.less **/
 
 @import './general/variable';
+
 // common
 @primary-color: @Primary6; // 全局主色
 @success-color: @Success6; // 成功色
@@ -9,7 +10,7 @@
 @error-color: @Danger6; // 错误色
 
 @text-color: @Neutral6;
-@disabled-color: @Neutral5;
+@disabled-color: @Neutral4;
 
 @font-size-base: 14px; // 主字号
 @line-height-base: 22/14; // 覆盖默认行高
@@ -99,3 +100,11 @@
 // steps
 @wait-icon-color: @Neutral4;
 @wait-title-color: @Neutral5;
+
+// collapse
+@collapse-header-bg: @BasicWhite;
+
+// breadcrumb
+@breadcrumb-font-size: 12px;
+@breadcrumb-icon-font-size: 12px;
+@breadcrumb-separator-margin: 0 4px;
diff --git a/next/web/src/styles/general/variable.less b/next/web/src/styles/general/variable.less
@@ -1,10 +1,8 @@
-// copy for ui-kit
-
 // ==================== 颜色 ====================
 
 // 颜色注意请依照 主色 黑+12，白+20, +61, +76, +90, +93, +98 规律生成
 // 品牌主色
-@Primary6: #15C5CE;
+@Primary6: #00D9C5;
 @Primary7: mix(black, @Primary6, 12);
 @Primary5: mix(white, @Primary6, 20);
 @Primary4: mix(white, @Primary6, 61);
@@ -26,7 +24,7 @@
 @TapColorList: @Tap0, @Tap1, @Tap2, @Tap3, @Tap4, @Tap5, @Tap6, @Tap7;
 
 // Amber-品牌辅色
-@Auxiliary6: #FF8156;
+@Auxiliary6: #FF5F23;
 @Auxiliary7: mix(black, @Auxiliary6, 12);
 @Auxiliary5: mix(white, @Auxiliary6, 20);
 @Auxiliary4: mix(white, @Auxiliary6, 61);

diff --git a/next/web/src/styles/tds-theme.less b/next/web/src/styles/tds-theme.less
@@ -11,7 +11,6 @@
 @tds-transfer-complex-container-space: 16px;
 @tds-transfer-complex-checkbox-space: 16px;
 
-
 @tds-transfer-complex-title-font-small: @font14;
 @tds-transfer-complex-title-padding-small: 8px 12px;
 @tds-transfer-complex-title-padding-body-small: 8px 12px;
@@ -27,9 +26,13 @@
 @tds-transfer-complex-title-padding-body-large: @tds-transfer-complex-title-padding-body-default;
 @tds-transfer-complex-title-padding-transfer-large: @tds-transfer-complex-title-padding-transfer-default;
 
-
-@tds-transfer-complex-max-background-line: linear-gradient(90deg, rgba(255, 245, 245, 0.1) 0%, rgba(255, 53, 53, 0.1) 23.25%, rgba(255, 53, 53, 0.1) 81.1%, rgba(255, 245, 245, 0) 103.81%);
-
+@tds-transfer-complex-max-background-line: linear-gradient(
+  90deg,
+  rgba(255, 245, 245, 0.1) 0%,
+  rgba(255, 53, 53, 0.1) 23.25%,
+  rgba(255, 53, 53, 0.1) 81.1%,
+  rgba(255, 245, 245, 0) 103.81%
+);
 
 @tds-transfer-complex-select-menu-width: 124px;
 @tds-transfer-complex-select-menu-padding-vertical: 11px;

diff --git a/next/web/tailwind.config.js b/next/web/tailwind.config.js
@@ -4,34 +4,34 @@ module.exports = {
     extend: {
       colors: {
         primary: {
-          DEFAULT: '#15c5ce',
+          DEFAULT: '#00d9c5',
           100: '#fafefe',
-          200: '#effbfc',
-          300: '#e8f9fa',
-          400: '#c7f1f3',
-          500: '#a4e8ec',
-          600: '#44d1d8',
-          700: '#15c5ce',
-          800: '#12adb5',
+          200: '#edfcfb',
+          300: '#e6fbf9',
+          400: '#c2f6f1',
+          500: '#9cf0e8',
+          600: '#33e1d1',
+          700: '#00d9c5',
+          800: '#00bfad',
         },
         auxiliary: {
-          DEFAULT: '#ff8156',
-          100: '#fffcfc',
-          200: '#fff6f3',
-          300: '#fff2ee',
-          400: '#ffe1d6',
-          500: '#ffcebd',
-          600: '#ff9a78',
-          700: '#ff8156',
-          800: '#e0724c',
+          DEFAULT: '#ff5f23',
+          100: '#fffcfb',
+          200: '#fff4f0',
+          300: '#ffefe9',
+          400: '#ffd9ca',
+          500: '#ffc1a9',
+          600: '#ff7f4f',
+          700: '#ff5f23',
+          800: '#e0541f',
         },
         success: {
           DEFAULT: '#47b881',
           100: '#fbfefc',
           200: '#f2faf6',
           300: '#edf8f2',
           400: '#d3eee1',
-          500: '#d3eee1',
+          500: '#b7e3ce',
           600: '#6cc69a',
           700: '#47b881',
           800: '#3ea272',