From b5144216970463ae202b058082eeebae35911762 Mon Sep 17 00:00:00 2001
From: Sam <51686767+samuveth@users.noreply.github.com>
Date: Tue, 6 Feb 2024 18:21:35 +0700
Subject: [PATCH] chore: Add color variables from Figma and refactor
 (https://github.com/snapshot-labs/sx-ui/pull/865)

* ref: Add color variables from figma and refactor

* Fix

* Fix

* ref: Change name to success
---
 .../components/Block/CreationConfirmation.vue |   4 +-
 .../components/Block/ExecutionEditable.vue    |   4 +-
 apps/ui/src/components/ExecutionButton.vue    |   2 +-
 apps/ui/src/components/Markdown.vue           |  12 +-
 apps/ui/src/components/Modal/Account.vue      |   4 +-
 apps/ui/src/components/Proposal.vue           |   4 +-
 apps/ui/src/components/ProposalStatus.vue     |   4 +-
 apps/ui/src/components/ProposalStatusIcon.vue |   4 +-
 apps/ui/src/components/S/IDuration.vue        |   2 +-
 apps/ui/src/components/Ui/Button.vue          |   2 +-
 apps/ui/src/components/Ui/Loading.vue         |   4 +-
 apps/ui/src/components/Ui/Modal.vue           |   4 +-
 apps/ui/src/style.scss                        | 104 ++++++++++++------
 apps/ui/src/views/Create.vue                  |   4 +-
 apps/ui/src/views/Proposal.vue                |   4 +-
 apps/ui/src/views/Proposal/Votes.vue          |  10 +-
 apps/ui/src/views/Space/Treasury.vue          |   6 +-
 apps/ui/tailwind.config.js                    |  62 ++++++-----
 18 files changed, 143 insertions(+), 97 deletions(-)

diff --git a/apps/ui/src/components/Block/CreationConfirmation.vue b/apps/ui/src/components/Block/CreationConfirmation.vue
index c632fa153..4edd65061 100644
--- 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
index 898184e37..a16c1935e 100644
--- 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
index 88a747d3d..e4a065eb1 100644
--- 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
index 5de35e1b3..15f60be8f 100644
--- 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
index 5bc3ffbc2..d83f4e7bc 100644
--- 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
index d19baf795..9b7799d21 100644
--- 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
index 6344a4cd2..2c920df9f 100644
--- 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
index 275cca2c9..10d5130ae 100644
--- 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
index 6677ad128..b8ba134f0 100644
--- 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
index 7bb8a6c0b..d4e9f4b80 100644
--- 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
index 6606d8272..c3ef116b7 100644
--- 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
index 84fc04ead..30ba11143 100644
--- 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
index 12cc6ddb8..7e65e2361 100644
--- 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
index 90ec9dda2..c86042606 100644
--- 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
index f29035d97..7863877ba 100644
--- 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')"
                 >
diff --git a/apps/ui/src/views/Proposal/Votes.vue b/apps/ui/src/views/Proposal/Votes.vue
index e8b0ad46c..1131ef00d 100644
--- a/apps/ui/src/views/Proposal/Votes.vue
+++ b/apps/ui/src/views/Proposal/Votes.vue
@@ -126,9 +126,9 @@ watch([sortBy, choiceFilter], () => {
             placement="left"
             :items="[
               { key: 'any', label: 'Any' },
-              { key: 'for', label: 'For', indicator: 'bg-choice-for' },
-              { key: 'against', label: 'Against', indicator: 'bg-choice-against' },
-              { key: 'abstain', label: 'Abstain', indicator: 'bg-choice-abstain' }
+              { key: 'for', label: 'For', indicator: 'bg-skin-success' },
+              { key: 'against', label: 'Against', indicator: 'bg-skin-danger' },
+              { key: 'abstain', label: 'Abstain', indicator: 'bg-skin-text' }
             ]"
           >
             <template #button>
@@ -217,8 +217,8 @@ watch([sortBy, choiceFilter], () => {
                 v-else
                 class="!w-[40px] !h-[40px] !px-0 cursor-default bg-transparent"
                 :class="{
-                  '!text-green !border-green': vote.choice === 1,
-                  '!text-red !border-red': vote.choice === 2,
+                  '!text-skin-success !border-skin-success': vote.choice === 1,
+                  '!text-skin-danger !border-skin-danger': vote.choice === 2,
                   '!text-gray-500 !border-gray-500': vote.choice === 3
                 }"
               >
diff --git a/apps/ui/src/views/Space/Treasury.vue b/apps/ui/src/views/Space/Treasury.vue
index 729a8e8c1..ca305f688 100644
--- a/apps/ui/src/views/Space/Treasury.vue
+++ b/apps/ui/src/views/Space/Treasury.vue
@@ -123,7 +123,7 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
             class="inline-block w-[26px] h-[26px]"
           >
             <path
-              fill="var(--link-color)"
+              fill="rgba(var(--link))"
               d="m126.613 93.9842c62.622-61.3123 164.152-61.3123 226.775 0l7.536 7.3788c3.131 3.066 3.131 8.036 0 11.102l-25.781 25.242c-1.566 1.533-4.104 1.533-5.67 0l-10.371-10.154c-43.687-42.7734-114.517-42.7734-158.204 0l-11.107 10.874c-1.565 1.533-4.103 1.533-5.669 0l-25.781-25.242c-3.132-3.066-3.132-8.036 0-11.102zm280.093 52.2038 22.946 22.465c3.131 3.066 3.131 8.036 0 11.102l-103.463 101.301c-3.131 3.065-8.208 3.065-11.339 0l-73.432-71.896c-.783-.767-2.052-.767-2.835 0l-73.43 71.896c-3.131 3.065-8.208 3.065-11.339 0l-103.4657-101.302c-3.1311-3.066-3.1311-8.036 0-11.102l22.9456-22.466c3.1311-3.065 8.2077-3.065 11.3388 0l73.4333 71.897c.782.767 2.051.767 2.834 0l73.429-71.897c3.131-3.065 8.208-3.065 11.339 0l73.433 71.897c.783.767 2.052.767 2.835 0l73.431-71.895c3.132-3.066 8.208-3.066 11.339 0z"
             />
           </svg>
@@ -214,12 +214,12 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
               <div v-if="asset.change" class="text-sm">
                 <div
                   v-if="asset.change > 0"
-                  class="text-green"
+                  class="text-skin-success"
                   v-text="`+${_n(asset.change, 'standard', { maximumFractionDigits: 2 })}%`"
                 />
                 <div
                   v-if="asset.change < 0"
-                  class="text-red"
+                  class="text-skin-danger"
                   v-text="`${_n(asset.change, 'standard', { maximumFractionDigits: 2 })}%`"
                 />
               </div>
diff --git a/apps/ui/tailwind.config.js b/apps/ui/tailwind.config.js
index 334df9bbb..3ca2a548a 100644
--- a/apps/ui/tailwind.config.js
+++ b/apps/ui/tailwind.config.js
@@ -1,15 +1,4 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const colors = require('tailwindcss/colors');
-
-const withOpacity = variableName => {
-  return ({ opacityValue }) => {
-    if (opacityValue !== undefined) {
-      return `rgba(var(${variableName}), ${opacityValue})`;
-    }
-
-    return `rgb(var(${variableName}))`;
-  };
-};
 
 module.exports = {
   future: {
@@ -20,25 +9,42 @@ module.exports = {
   theme: {
     extend: {
       borderColor: {
-        DEFAULT: 'rgb(var(--border-color))',
-        red: '#ff3856'
+        DEFAULT: 'rgba(var(--border), <alpha-value>)'
       },
       colors: {
-        primary: 'var(--primary-color)',
-        'skin-border': withOpacity('--border-color'),
-        'skin-text': 'var(--text-color)',
-        'skin-link': 'var(--link-color)',
-        'skin-bg': 'var(--bg-color)',
-        'skin-block-bg': 'var(--block-bg)',
-        'skin-active': 'var(--active-bg)',
-        'skin-hover': 'var(--hover-bg)',
-        'skin-heading': 'var(--heading-color)',
-        blue: '#384aff',
-        green: '#21b66f',
-        red: '#ff3856',
-        'choice-for': '#21b66f',
-        'choice-against': '#ff3856',
-        'choice-abstain': colors.gray['500']
+        // IMPORTANT: Color variables that require opacity modifiers must be defined
+        // without space function and opacity value. They can be recognized by the
+        // <alpha-value> placeholder. See: https://tailwindcss.com/docs/customizing-colors#using-css-variables
+        transparent: 'transparent',
+
+        // backgrounds
+        'skin-bg': 'rgba(var(--bg), <alpha-value>)',
+        'skin-block-bg': 'rgba(var(--block-bg), <alpha-value>)',
+        'skin-input-bg': 'rgba(var(--input-bg), <alpha-value>)',
+        'skin-hover-bg': 'rgba(var(--hover-bg), <alpha-value>)',
+        'skin-active-bg': 'rgba(var(--active-bg), <alpha-value>)',
+        'skin-border': 'rgba(var(--border), <alpha-value>)',
+
+        // text
+        'skin-heading': 'rgba(var(--heading), <alpha-value>)',
+        'skin-link': 'rgba(var(--link), <alpha-value>)',
+        'skin-text': 'rgba(var(--text), <alpha-value>)',
+        'skin-content': 'var(--content)',
+
+        // accents
+        'skin-primary': 'rgba(var(--primary), <alpha-value>)',
+        'skin-accent-foreground': 'rgba(var(--accent-foreground), <alpha-value>)',
+        'skin-danger': 'rgba(var(--danger), <alpha-value>)',
+        'skin-success': 'rgba(var(--success), <alpha-value>)',
+
+        'skin-accent-hover': 'var(--accent-hover)',
+        'skin-accent-active': 'var(--accent-active)',
+        'skin-danger-border': 'var(--danger-border)',
+        'skin-danger-hover': 'var(--danger-hover)',
+        'skin-danger-active': 'var(--danger-active)',
+        'skin-success-border': 'var(--success-border)',
+        'skin-success-hover': 'var(--success-hover)',
+        'skin-success-active': 'var(--success-active)'
       },
       animation: {
         'pulse-fast': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite'