chore: Add color variables from Figma and refactor (snapshot-labs/sx-…

…ui#865) * ref: Add color variables from figma and refactor * Fix * Fix * ref: Change name to success Signed-off-by: Wiktor Tkaczyński <wiktor.tkaczynski@gmail.com>
snapshot-labs · Feb 6, 2024 · 9e3669c · 9e3669c
1 parent 0417fac
commit 9e3669c
Show file tree

Hide file tree

Showing 18 changed files with 143 additions and 97 deletions.
diff --git a/apps/ui/src/components/Block/CreationConfirmation.vue b/apps/ui/src/components/Block/CreationConfirmation.vue
@@ -140,11 +140,11 @@ onMounted(() => deploy());
     <div class="flex flex-col mt-4">
       <div v-for="(step, i) in steps" :key="step.id" class="flex items-center gap-4 mb-3 last:mb-0">
         <div>
-          <IH-check v-if="i < currentStep" class="text-green" />
+          <IH-check v-if="i < currentStep" class="text-skin-success" />
           <IH-clock v-else-if="i > currentStep" />
           <template v-else>
             <UiLoading v-if="!failed" />
-            <IH-exclamation-circle v-else class="text-red" />
+            <IH-exclamation-circle v-else class="text-skin-danger" />
           </template>
         </div>
         <div>

diff --git a/apps/ui/src/components/Block/ExecutionEditable.vue b/apps/ui/src/components/Block/ExecutionEditable.vue
@@ -156,13 +156,13 @@ watch(model.value, () => {
           v-if="simulationState === 'SIMULATION_SUCCEDED'"
           title="Execution simulation succeeded"
         >
-          <IH-shield-check class="text-green" />
+          <IH-shield-check class="text-skin-success" />
         </UiTooltip>
         <UiTooltip
           v-if="simulationState === 'SIMULATION_FAILED'"
           title="Execution simulation failed"
         >
-          <IH-shield-check class="text-red" />
+          <IH-shield-check class="text-skin-danger" />
         </UiTooltip>
       </div>
     </div>

diff --git a/apps/ui/src/components/ExecutionButton.vue b/apps/ui/src/components/ExecutionButton.vue
@@ -27,7 +27,7 @@ const emit = defineEmits<{
 <style scoped lang="scss">
 .button {
   &:disabled {
-    color: rgb(var(--border-color)) !important;
+    color: rgba(var(--border)) !important;
     cursor: not-allowed;
   }
 }

diff --git a/apps/ui/src/components/Markdown.vue b/apps/ui/src/components/Markdown.vue
@@ -89,7 +89,7 @@ const parsed = computed(() => {
 
   p {
     font-size: 1em;
-    color: var(--content-color);
+    color: rgba(var(--content));
   }
 
   hr {
@@ -102,8 +102,8 @@ const parsed = computed(() => {
 
   blockquote {
     padding: 0 1em;
-    color: var(--text-color);
-    border-left: 0.25em solid var(--text-color);
+    color: rgba(var(--text));
+    border-left: 0.25em solid rgba(var(--text));
 
     > :last-child {
       margin-bottom: 0;
@@ -211,17 +211,17 @@ const parsed = computed(() => {
   table th,
   table td {
     padding: 6px 13px;
-    border: 1px solid rgb(var(--border-color));
+    border: 1px solid rgba(var(--border));
   }
 
   table thead tr,
   table tbody tr:nth-child(2n) {
-    background-color: var(--bg-color);
+    background-color: rgba(var(--bg));
     border-top: 1px solid #c6cbd1;
   }
 
   table tbody tr {
-    background-color: var(--bg-color);
+    background-color: rgba(var(--bg));
   }
 
   table img {

diff --git a/apps/ui/src/components/Modal/Account.vue b/apps/ui/src/components/Modal/Account.vue
@@ -79,7 +79,9 @@ watch(open, () => (step = null));
         <UiButton class="button-outline w-full" @click="step = 'connect'">
           Connect wallet
         </UiButton>
-        <UiButton class="button-outline w-full !text-red" @click="handleLogout"> Log out </UiButton>
+        <UiButton class="button-outline w-full !text-skin-danger" @click="handleLogout">
+          Log out
+        </UiButton>
       </div>
     </div>
   </UiModal>

diff --git a/apps/ui/src/components/Proposal.vue b/apps/ui/src/components/Proposal.vue
@@ -83,7 +83,7 @@ async function handleVoteClick(choice: Choice) {
           <div class="flex space-x-2 py-2">
             <UiTooltip title="For">
               <UiButton
-                class="w-[40px] !text-green !border-green !h-[40px] !px-0"
+                class="w-[40px] !text-skin-success !border-skin-success !h-[40px] !px-0"
                 :loading="sendingType === 'for'"
                 @click="handleVoteClick('for')"
               >
@@ -92,7 +92,7 @@ async function handleVoteClick(choice: Choice) {
             </UiTooltip>
             <UiTooltip title="Against">
               <UiButton
-                class="w-[40px] !text-red !border-red !h-[40px] !px-0"
+                class="w-[40px] !text-skin-danger !border-skin-danger !h-[40px] !px-0"
                 :loading="sendingType === 'against'"
                 @click="handleVoteClick('against')"
               >

diff --git a/apps/ui/src/components/ProposalStatus.vue b/apps/ui/src/components/ProposalStatus.vue
@@ -16,10 +16,10 @@ defineProps<{ state: ProposalState }>();
   <div
     :class="{
       'bg-gray-400': state === 'pending',
-      'bg-green': state === 'active',
+      'bg-skin-success': state === 'active',
       'bg-skin-link': state === 'passed',
       'bg-purple-500': state === 'executed',
-      'bg-red': state === 'rejected',
+      'bg-skin-danger': state === 'rejected',
       '!text-skin-bg': state === 'passed'
     }"
     class="inline-block rounded-full pl-2 pr-[10px] pb-[2px] text-white mb-2"

diff --git a/apps/ui/src/components/ProposalStatusIcon.vue b/apps/ui/src/components/ProposalStatusIcon.vue
@@ -30,9 +30,9 @@ const style = computed(() => ({
 <template>
   <UiTooltip :title="titles[state]">
     <IS-clock v-if="state === 'pending'" class="text-gray-400" :style="style" />
-    <IS-status-online v-else-if="state === 'active'" class="text-green" :style="style" />
+    <IS-status-online v-else-if="state === 'active'" class="text-skin-success" :style="style" />
     <IS-check-circle v-else-if="state === 'passed'" class="text-skin-link" :style="style" />
     <IS-play v-else-if="state === 'executed'" class="text-purple-500" :style="style" />
-    <IS-x-circle v-else-if="state === 'rejected'" class="text-red" :style="style" />
+    <IS-x-circle v-else-if="state === 'rejected'" class="text-skin-danger" :style="style" />
   </UiTooltip>
 </template>
diff --git a/apps/ui/src/components/S/IDuration.vue b/apps/ui/src/components/S/IDuration.vue
@@ -31,7 +31,7 @@ watch(
 
 <template>
   <div>
-    <div :class="{ 'text-red': error && dirty }" v-text="definition.title" />
+    <div :class="{ 'text-skin-danger': error && dirty }" v-text="definition.title" />
     <div class="flex !mb-0" :class="{ 's-error': error && dirty }">
       <SBase :definition="{ title: 'Days' }" class="flex-1" :error="error" :dirty="dirty">
         <input v-model="days" class="s-input !rounded-r-none" type="number" min="0" />

diff --git a/apps/ui/src/components/Ui/Button.vue b/apps/ui/src/components/Ui/Button.vue
@@ -30,7 +30,7 @@ withDefaults(
 <style scoped lang="scss">
 .button {
   &:disabled {
-    color: var(--border-color) !important;
+    color: rgba(var(--border)) !important;
     cursor: not-allowed;
   }
 

diff --git a/apps/ui/src/components/Ui/Loading.vue b/apps/ui/src/components/Ui/Loading.vue
@@ -46,9 +46,9 @@ withDefaults(
     vertical-align: middle;
 
     path {
-      fill: var(--link-color);
+      fill: rgba(var(--link));
       &.inverse {
-        fill: var(--bg-color);
+        fill: rgba(var(--bg));
       }
     }
   }

diff --git a/apps/ui/src/components/Ui/Modal.vue b/apps/ui/src/components/Ui/Modal.vue
@@ -73,8 +73,8 @@ watch(open, (val, prev) => {
   }
 
   .shell {
-    border: 1px solid rgb(var(--border-color));
-    background-color: var(--bg-color);
+    border: 1px solid rgba(var(--border));
+    background-color: rgba(var(--bg));
     padding-left: 0 !important;
     padding-right: 0 !important;
     max-width: 440px;

diff --git a/apps/ui/src/style.scss b/apps/ui/src/style.scss
@@ -3,30 +3,68 @@
 
 :root {
   color-scheme: light;
-  --primary-color: #384aff;
-  --bg-color: white;
-  --text-color: #57606a;
-  --link-color: #111111;
-  --content-color: rgba(17, 17, 17, 0.8);
-  --heading-color: #111111;
-  --border-color: 229, 229, 230;
-  --block-bg: white;
-  --active-bg: #ededed;
-  --hover-bg: #f7f7f7;
+
+  // backgrounds
+  --bg: 255, 255, 255;
+  --block-bg: 255, 255, 255;
+  --input-bg: 251, 251, 251;
+  --hover-bg: 247, 247, 247;
+  --active-bg: 237, 237, 237;
+  --border: 229, 229, 230;
+
+  // text
+  --heading: 17, 17, 17;
+  --link: 17, 17, 17;
+  --text: 87, 96, 106;
+  --content: rgba(17, 17, 17, 0.8);
+
+  // accents
+  --primary: 17, 17, 17;
+  --accent-foreground: 251, 251, 251;
+  --danger: 235, 76, 91;
+  --success: 87, 179, 117;
+
+  --accent-hover: rgba(250, 249, 252, 0.12);
+  --accent-active: rgba(250, 249, 252, 0.32);
+  --danger-border: rgba(235, 76, 91, 0.4);
+  --danger-hover: rgba(235, 76, 91, 0.04);
+  --danger-active: rgba(235, 76, 91, 0.12);
+  --success-border: rgba(87, 179, 117, 0.4);
+  --success-hover: rgba(87, 179, 117, 0.04);
+  --success-active: rgba(87, 179, 117, 0.12);
 }
 
 .dark {
   color-scheme: dark;
-  --primary-color: #384aff;
-  --bg-color: #1c1b20;
-  --text-color: #a09fa5;
-  --link-color: #faf9fc;
-  --content-color: rgba(250, 249, 252, 0.8);
-  --heading-color: #faf9fc;
-  --border-color: 51, 50, 55;
-  --block-bg: #1c1b20;
-  --active-bg: #29282e;
-  --hover-bg: #232227;
+
+  // backgrounds
+  --bg: 28, 27, 32;
+  --block-bg: 28, 27, 32;
+  --input-bg: 35, 34, 39;
+  --hover-bg: 37, 36, 41;
+  --active-bg: 41, 40, 46;
+  --border: 51, 50, 55;
+
+  // text
+  --heading: 251, 251, 251;
+  --link: 251, 251, 251;
+  --text: 160, 159, 164;
+  --content: rgba(250, 249, 252, 0.8);
+
+  // accents
+  --primary: 251, 251, 251;
+  --accent-foreground: 17, 17, 17;
+  --danger: 235, 76, 91;
+  --success: 87, 179, 117;
+
+  --accent-hover: rgba(28, 27, 32, 0.12);
+  --accent-active: rgba(28, 27, 32, 0.32);
+  --danger-border: rgba(235, 76, 91, 0.4);
+  --danger-hover: rgba(235, 76, 91, 0.04);
+  --danger-active: rgba(235, 76, 91, 0.12);
+  --success-border: rgba(87, 179, 117, 0.4);
+  --success-hover: rgba(87, 179, 117, 0.04);
+  --success-active: rgba(87, 179, 117, 0.12);
 }
 
 @font-face {
@@ -58,7 +96,7 @@
 }
 
 body {
-  background-color: var(--bg-color);
+  background-color: rgba(var(--bg));
 }
 
 .mono {
@@ -99,13 +137,13 @@ h1,
 h2,
 h3,
 h4 {
-  color: var(--heading-color);
+  color: rgba(var(--heading));
   font-weight: 600;
 }
 
 a,
 .a {
-  color: var(--link-color);
+  color: rgba(var(--link));
 
   &:hover {
     cursor: pointer;
@@ -118,13 +156,13 @@ input {
 
 .choice-bg {
   &._1 {
-    @apply bg-choice-for;
+    @apply bg-skin-success;
   }
   &._2 {
-    @apply bg-choice-against;
+    @apply bg-skin-danger;
   }
   &._3 {
-    @apply bg-choice-abstain;
+    @apply bg-skin-text;
   }
   &._quorum {
     @apply bg-skin-border;
@@ -133,13 +171,13 @@ input {
 
 .choice-text {
   &._1 {
-    @apply text-green;
+    @apply text-skin-success;
   }
   &._2 {
-    @apply text-red;
+    @apply text-skin-danger;
   }
   &._3 {
-    @apply text-gray-500;
+    @apply text-skin-text;
   }
   &._quorum {
     @apply text-skin-border;
@@ -151,7 +189,7 @@ input {
 }
 
 ::placeholder {
-  color: var(--text-color) !important;
+  color: rgba(var(--text)) !important;
   opacity: 0.6 !important;
 }
 
@@ -206,16 +244,16 @@ input {
   @apply mb-2;
 
   .s-input {
-    @apply border border-red;
+    @apply border border-skin-danger;
     @apply mb-1 #{!important};
   }
 
   .s-label {
-    @apply text-red;
+    @apply text-skin-danger;
   }
 
   .s-input-error-message {
-    @apply text-red;
+    @apply text-skin-danger;
   }
 }
 

diff --git a/apps/ui/src/views/Create.vue b/apps/ui/src/views/Create.vue
@@ -189,8 +189,8 @@ watchEffect(() => setTitle('Create space'));
           :disabled="!accessiblePages[page.id]"
           class="px-3 py-1 block lg:w-full rounded text-left scroll-mr-3 first:ml-auto last:mr-auto whitespace-nowrap"
           :class="{
-            'bg-skin-active': page.id === currentPage,
-            'hover:bg-skin-hover': page.id !== currentPage,
+            'bg-skin-active-bg': page.id === currentPage,
+            'hover:bg-skin-hover-bg': page.id !== currentPage,
             'text-skin-link': accessiblePages[page.id]
           }"
           @click="currentPage = page.id"

diff --git a/apps/ui/src/views/Proposal.vue b/apps/ui/src/views/Proposal.vue
@@ -170,7 +170,7 @@ watchEffect(() => {
             <div class="flex space-x-2 py-2">
               <UiTooltip title="For">
                 <UiButton
-                  class="!text-green !border-green !w-[48px] !h-[48px] !px-0"
+                  class="!text-skin-success !border-skin-success !w-[48px] !h-[48px] !px-0"
                   :loading="sendingType === 'for'"
                   @click="handleVoteClick('for')"
                 >
@@ -179,7 +179,7 @@ watchEffect(() => {
               </UiTooltip>
               <UiTooltip title="Against">
                 <UiButton
-                  class="!text-red !border-red !w-[48px] !h-[48px] !px-0"
+                  class="!text-skin-danger !border-skin-danger !w-[48px] !h-[48px] !px-0"
                   :loading="sendingType === 'against'"
                   @click="handleVoteClick('against')"
                 >