Csghub replace color design token (#702)

* add color extent to tailwind config, and replace gray/brancd/error color with design tokens * update success & error & warning color * replace rest color into color tokens * remove empty line
OpenCSGs · Oct 9, 2024 · e5529cd · e5529cd
1 parent 3543dbc
commit e5529cd
Show file tree

Hide file tree

Showing 104 changed files with 744 additions and 667 deletions.
diff --git a/frontend/src/assets/stylesheets/element-plus/_variables.css b/frontend/src/assets/stylesheets/element-plus/_variables.css
@@ -1,5 +1,5 @@
 :root {
-  --Base-White: #FFF;
+  --Base-White: #FFFFFF;
 
   --Gray-25: #FCFCFD;
   --Gray-50: #F9FAFB;

diff --git a/frontend/src/components/OnPremiseFooter.vue b/frontend/src/components/OnPremiseFooter.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="border-t border-[#DCDFE6]">
+  <div class="border-t border-gray-200">
     <div class="max-w-[1280px] m-auto py-4 mb-4 flex justify-between items-center w-full xl:px-5 sm:justify-center sm:gap-4 sm:text-[10px] sm:flex-col">
-      <p class="text-[#667085] text-base font-light">© 2024 OpenCSG. All rights reserved.</p>
+      <p class="text-gray-700 text-base font-light">© 2024 OpenCSG. All rights reserved.</p>
       <div class="flex items-center gap-6">
         <a href="https://twitter.com/OpenCsg" target="_blank">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">

diff --git a/frontend/src/components/application_spaces/AppPayMode.vue b/frontend/src/components/application_spaces/AppPayMode.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="px-[8px] py-[2px] flex items-center justify-center border rounded-md text-[#344054] text-[12px] leading-[18px]"
+    class="px-[8px] py-[2px] flex items-center justify-center border rounded-md text-gray-700 text-[12px] leading-[18px]"
     >{{ thePayMode }}
   </span>
 </template>

diff --git a/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue b/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-[#FCFCFD] pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto max-w-[1280px]">
       <repo-header
         :private="applicationSpace.private"
@@ -59,12 +59,12 @@
             <p class="font-[600] text-[16px] text-black">{{ $t('application_spaces.errorPage.log') }}</p>
           </div>
           <div class="flex gap-4 items-center">
-            <span class="text-[14px] text-[#667085] cursor-pointer"
+            <span class="text-[14px] text-gray-500 cursor-pointer"
                   data-value="build"
                   @click="toggleActiveTab"
                   :class="isBuildLogTab ? 'active-tab' : ''"
             >{{ $t('application_spaces.errorPage.build') }}</span>
-            <span class="text-[14px] text-[#667085] cursor-pointer"
+            <span class="text-[14px] text-gray-500 cursor-pointer"
                   data-value="container"
                   @click="toggleActiveTab"
                   :class="isBuildLogTab ? '' : 'active-tab'"

diff --git a/frontend/src/components/application_spaces/ApplicationSpaceItem.vue b/frontend/src/components/application_spaces/ApplicationSpaceItem.vue
@@ -1,18 +1,18 @@
 <template>
   <a
     :href="`/spaces/${repo.path}`"
-    class="xl:w-full focus:outline focus:outline-4 focus:outline-[#EAECF0] hover:shadow-md border border-gray-200 rounded-lg p-4 mlg:!w-full"
+    class="xl:w-full focus:outline focus:outline-4 focus:outline-gray-200 hover:shadow-md border border-gray-200 rounded-lg p-4 mlg:!w-full"
     :style="`width: ${itemWidth};`"
   >
     <div class="flex justify-between items-center mb-1">
       <div class="w-full flex items-center justify-between">
-        <h3 class="flex-1 text-[#344054] text-md font-normal leading-6 truncate mr-[8px]">
+        <h3 class="flex-1 text-gray-700 text-md font-normal leading-6 truncate mr-[8px]">
           {{ getComputed.path }}
         </h3>
         <div class="flex gap-2">
           <span
             v-if="getComputed.visibility"
-            class="px-[8px] py-[3px] flex items-center justify-center border rounded-md text-[#344054] text-[12px]"
+            class="px-[8px] py-[3px] flex items-center justify-center border rounded-md text-gray-700 text-[12px]"
             >{{ getComputed.visibility }}</span
           >
           <AppStatus
@@ -23,7 +23,7 @@
         </div>
       </div>
     </div>
-    <div class="text-sm leading-snug text-[#667085] flex justify-between">
+    <div class="text-sm leading-snug text-gray-500 flex justify-between">
       <p>
         <span class="mr-2">{{ repo.path.split('/')[0] }}</span>
         <span class="mr-2">·</span>
@@ -54,7 +54,7 @@
       >
         <template #reference>
           <p
-            class="max-w-full h-[36px] text-[#606266] text-sm overflow-hidden text-ellipsis line-clamp-2"
+            class="max-w-full h-[36px] text-gray-500 text-sm overflow-hidden text-ellipsis line-clamp-2"
           >
             {{ repo.description }}
           </p>

diff --git a/frontend/src/components/application_spaces/ApplicationSpaceSettings.vue b/frontend/src/components/application_spaces/ApplicationSpaceSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="deployFailed"
-    class="flex gap-[8px] mt-[32px] mb-[24px] p-[16px] border border-[#D0D5DD] rounded-[12px] shadow-xs">
+    class="flex gap-[8px] mt-[32px] mb-[24px] p-[16px] border border-gray-300 rounded-[12px] shadow-xs">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="20"
@@ -26,34 +26,34 @@
       </defs>
     </svg>
     <div>
-      <h3 class="text-[#475467] text-[14px] font-[500]">
+      <h3 class="text-gray-600 text-[14px] font-[500]">
         {{ $t('application_spaces.errorPage.errorAlert') }}
       </h3>
-      <p class="text-[#475467] text-[14px]">
+      <p class="text-gray-600 text-[14px]">
         {{ $t('application_spaces.errorPage.errorAlertDesc') }}
       </p>
       <p
-        class="text-[#223B99] font-[400] text-[12px] mt-[12px] cursor-pointer"
+        class="text-brand-700 font-[400] text-[12px] mt-[12px] cursor-pointer"
         @click="showErrorLogs">
         {{ $t('application_spaces.errorPage.showErrorLogs') }}
       </p>
     </div>
   </div>
 
   <div
-    class="border border-[#DCDFE6] rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
+    class="border border-gray-200 rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
     <!-- cloud resource -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.edit.cloudResource') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.edit.cloudResourceDesc') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('application_spaces.edit.currentCloudResource') }}
         </p>
         <el-select
@@ -78,7 +78,7 @@
     <!-- 暂停 Space -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.stopSpace') }}
         </div>
       </div>
@@ -106,7 +106,7 @@
     <!-- 重启 Space -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.restartSpace') }}
         </div>
       </div>
@@ -125,19 +125,19 @@
     <!-- 展示英文名 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.name') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.nameTips') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('application_spaces.namespaceName') }}
         </p>
         <div
-          class="w-[512px] sm:w-full rounded-[8px] bg-[#F9FAFB] px-[14px] py-[10px] border">
+          class="w-[512px] sm:w-full rounded-[8px] bg-gray-50 px-[14px] py-[10px] border">
           {{ applicationSpacePath }}
         </div>
       </div>
@@ -148,10 +148,10 @@
     <!-- 更新应用空间别名 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.nickname') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.edit.tips') }}
         </div>
       </div>
@@ -174,10 +174,10 @@
     <!-- 更新应用空间简介 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.desc') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.edit.tips2') }}
         </div>
       </div>
@@ -201,10 +201,10 @@
     <!-- 修改可见性 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#0a0d12] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.edit.changeVisibility') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.edit.statusText') }}
           <span class="text-black font-semibold"
             >[{{
@@ -219,7 +219,7 @@
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('application_spaces.edit.visibility') }}
         </p>
         <el-select
@@ -242,7 +242,7 @@
     <!-- cover image -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.edit.replaceCoverImage') }}
         </div>
       </div>
@@ -286,24 +286,24 @@
     <!-- 删除应用空间 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col gap-[6px]">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.edit.del') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.edit.delTips') }}
           <span class="text-black font-medium">{{ $t('application_spaces.edit.canNot') }}</span>
           {{ $t('application_spaces.edit.delTips2') }}
           <span class="text-black font-medium break-words">{{ path }}</span>
           {{ $t('application_spaces.edit.delTips3') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.edit.enterPls') }}
           <span class="text-black font-medium break-words">{{ path }}</span>
           {{ $t('application_spaces.edit.sureDel') }}
         </div>
       </div>
       <div class="flex flex-col gap-[8px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('application_spaces.namespaceName') }}
         </p>
         <el-input
@@ -315,11 +315,11 @@
           <div
             id="confirmDelete"
             @click="clickDelete"
-            class="text-[#98A2B3] py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
+            class="text-gray-400 py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
             :class="
               delDesc === applicationSpacePath
-                ? 'bg-[#D92D20] text-[#FFFFFF] cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-[#D92D20] hover:text-white'
-                : 'bg-[#F2F4F7]'
+                ? 'bg-error-600 text-white cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-error-600 hover:text-white'
+                : 'bg-gray-100'
             "
             @mouseover="handleMouseOver"
             @mouseleave="handleMouseLeave">
@@ -676,14 +676,14 @@
         if (this.delDesc !== '') {
           document
             .getElementById('confirmDelete')
-            .classList.replace('bg-[#D92D20]', 'bg-[#B42318]')
+            .classList.replace('bg-error-600', 'bg-error-700')
         }
       },
 
       handleMouseLeave() {
         document
           .getElementById('confirmDelete')
-          .classList.replace('bg-[#B42318]', 'bg-[#D92D20]')
+          .classList.replace('bg-error-700', 'bg-error-600')
       },
 
       showErrorLogs() {

diff --git a/frontend/src/components/application_spaces/BuildAndErrorPage.vue b/frontend/src/components/application_spaces/BuildAndErrorPage.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="h-[50vh] py-[32px] flex flex-col items-center justify-center sm:px-[20px]">
     <p v-if="['Building','Deploying','Startup'].includes(appStatus)"
-       class="text-[#6B7280] text-[16px]"
+       class="text-gray-700 text-[16px]"
     >
        {{ $t('application_spaces.buildDesc') }}
     </p>
 
     <p v-if="['DeployFailed','BuildingFailed','RuntimeError'].includes(appStatus)"
-       class="text-[#6B7280] text-[16px]"
+       class="text-gray-700 text-[16px]"
     >
        {{ $t('application_spaces.errorDesc') }}
        <p v-if="canWrite"
-          class="text-[#223B99] font-[400] text-[12px] mt-[12px] cursor-pointer"
+          class="text-brand-700 font-[400] text-[12px] mt-[12px] cursor-pointer"
           @click="showLogs"
        >
          {{ $t('application_spaces.errorPage.showErrorLogs') }}

diff --git a/frontend/src/components/application_spaces/BuildStatus.vue b/frontend/src/components/application_spaces/BuildStatus.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex items-center gap-[6px] border border-[#99AFFF] bg-[#CED8FF] rounded-[6px] py-[2px] px-[8px]">
+  <div class="flex items-center gap-[6px] border border-brand-200 bg-brand-50 rounded-[6px] py-[2px] px-[8px]">
     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
       <circle cx="4" cy="4" r="3" fill="#4D6AD6"/>
     </svg>
-    <p class="text-[12px] text-[#223B99] font-[400] leading-[18px]"> {{ statusName }} </p>
+    <p class="text-[12px] text-brand-700 font-[400] leading-[18px]"> {{ statusName }} </p>
   </div>
 </template>
 

diff --git a/frontend/src/components/application_spaces/ErrorStatus.vue b/frontend/src/components/application_spaces/ErrorStatus.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex items-center gap-[6px] border border-[#FECDCA] bg-[#FEF3F2] rounded-[6px] py-[2px] px-[8px]">
+  <div class="flex items-center gap-[6px] border border-error-200 bg-error-50] rounded-[6px] py-[2px] px-[8px]">
     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
       <circle cx="4" cy="4" r="3" fill="#F04438"/>
     </svg>
-    <p class="text-[12px] text-[#B42318] font-[400] leading-[18px]"> {{ statusName }} </p>
+    <p class="text-[12px] text-error-700 font-[400] leading-[18px]"> {{ statusName }} </p>
   </div>
 </template>
 

diff --git a/frontend/src/components/application_spaces/GradioInitializeGuide.vue b/frontend/src/components/application_spaces/GradioInitializeGuide.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="sm:px-[20px]">
-    <div class="flex gap-[8px] mt-[32px] p-[16px] border border-[#D0D5DD] rounded-[12px] shadow-xs">
+    <div class="flex gap-[8px] mt-[32px] p-[16px] border border-gray-300 rounded-[12px] shadow-xs">
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
         <g clip-path="url(#clip0_8790_36855)">
           <path d="M6.24984 9.99984L8.74984 12.4998L13.7498 7.49984M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z" stroke="#079455" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
@@ -12,11 +12,11 @@
         </defs>
       </svg>
       <div>
-        <h3 class="text-[#475467] text-[14px] font-[500]">{{ $t('application_spaces.gradioGuide.notice') }}</h3>
-        <p class="text-[#A07731] text-[14px]">{{ $t('application_spaces.gradioGuide.noticeDesc') }}</p>
+        <h3 class="text-gray-600 text-[14px] font-[500]">{{ $t('application_spaces.gradioGuide.notice') }}</h3>
+        <p class="text-gray-600 text-[14px]">{{ $t('application_spaces.gradioGuide.noticeDesc') }}</p>
       </div>
     </div>
-    <h3 class="my-[24px] text-[#475467] font-[500]">1. {{ $t('application_spaces.gradioGuide.cloneTitle') }}</h3>
+    <h3 class="my-[24px] text-gray-600 font-[500]">1. {{ $t('application_spaces.gradioGuide.cloneTitle') }}</h3>
     <div>
       <p class="">
         <span class="px-[12px] py-[8px] cursor-pointer"
@@ -46,21 +46,21 @@
         <markdown-viewer :content="sshCloneCodeMarkdown"></markdown-viewer>
       </div>
     </div>
-    <h3 class="my-[24px] text-[#475467] font-[500]">2. {{ $t('application_spaces.gradioGuide.createTitle') }}</h3>
+    <h3 class="my-[24px] text-gray-600 font-[500]">2. {{ $t('application_spaces.gradioGuide.createTitle') }}</h3>
     <markdown-viewer :content="appPyCodeMarkdown"></markdown-viewer>
-    <h3 class="my-[24px] text-[#475467] font-[500]">3. {{ $t('application_spaces.gradioGuide.submitTitle') }}</h3>
+    <h3 class="my-[24px] text-gray-600 font-[500]">3. {{ $t('application_spaces.gradioGuide.submitTitle') }}</h3>
     <markdown-viewer :content="pushCodeMarkdown"></markdown-viewer>
-    <p class="text-[#667085] text-[16px] font-[400] my-[24px]">{{ $t('application_spaces.gradioGuide.successNotes') }}</p>
-    <div class="text-[16px] text-[#667085] border border-[#D0D5DD] rounded-[8px] shadow-xs py-[12px] px-[14px] mb-[32px]">
+    <p class="text-gray-500 text-[16px] font-[400] my-[24px]">{{ $t('application_spaces.gradioGuide.successNotes') }}</p>
+    <div class="text-[16px] text-gray-500 border border-gray-300 rounded-[8px] shadow-xs py-[12px] px-[14px] mb-[32px]">
       <div>
-        <h3 class="text-[#101828]"> {{ $t('application_spaces.gradioGuide.dependencyNotesTitle') }} </h3>
+        <h3 class="text-gray-900"> {{ $t('application_spaces.gradioGuide.dependencyNotesTitle') }} </h3>
         <p>{{ $t('application_spaces.gradioGuide.dependencyNotes1') }}</p>
         <p>{{ $t('application_spaces.gradioGuide.dependencyNotes2') }}</p>
         <p>{{ $t('application_spaces.gradioGuide.dependencyNotes3') }}</p>
       </div>
       <br />
       <div>
-        <h3 class="text-[#101828]"> {{ $t('application_spaces.gradioGuide.docNotesTitle') }} </h3>
+        <h3 class="text-gray-900"> {{ $t('application_spaces.gradioGuide.docNotesTitle') }} </h3>
         <a href="https://opencsg.com/docs/Space/space_intro" target="_blank">{{ $t('application_spaces.gradioGuide.docNotes1') }}</a>
       </div>
     </div>