feat: new colors (#10352)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>

app/javascript/dashboard/assets/scss/_woot.scss

@@ -46,6 +46,14 @@
   @apply hidden;
 }
 
+.n-blue-border {
+  @apply border-n-blue-border;
+}
+
+.n-blue-text {
+  @apply text-n-blue-text;
+}
+
 // scss-lint:disable PropertySortOrder
 @layer base {
   /* NEXT COLORS START */
@@ -103,24 +111,26 @@
     --teal-11: 0 133 115;
     --teal-12: 13 61 56;
 
-    --background-color: 248 248 248;
+    --background-color: 253 253 253;
+    --border-blue: 39, 129, 246, 0.5;
+    --border-container: 236, 236, 236, 1;
+    --border-strong: 235 235 235;
+    --border-weak: 234 234 234;
     --solid-1: 255 255 255;
-    --solid-2: 252 252 252;
+    --solid-2: 255 255 255;
     --solid-3: 255 255 255;
-    --solid-active: 250 251 251;
+    --solid-active: 255 255 255;
     --solid-amber: 252 232 193;
     --solid-blue: 218 236 255;
-    --white-alpha: 255 255 255 0.1;
+    --text-blue: 8, 109, 224, 1;
-    --border-weak: 231 231 231;
-    --border-strong: 235 235 235;
-    --blue: 39 129 246;
 
     /* alpha is added by default */
-    --alpha-1: 36, 38, 48, 0.06;
+    --alpha-1: 67, 67, 67, 0.06;
-    --alpha-2: 130, 134, 150, 0.12;
+    --alpha-2: 201, 202, 207, 0.15;
-    --alpha-3: 255, 255, 255, 0.9;
+    --alpha-3: 255, 255, 255, 0.96;
     --black-alpha-1: 0, 0, 0, 0.12;
     --black-alpha-2: 0, 0, 0, 0.04;
+    --white-alpha: 255, 255, 255, 0.1;
   }
 
   body.dark {
@@ -178,20 +188,22 @@
     --teal-12: 173 240 221;
 
     --background-color: 18 18 19;
+    --border-blue: 39, 129, 246, 0.5;
+    --border-container: 236, 236, 236, 0;
+    --border-strong: 52 52 52;
+    --border-weak: 38 38 42;
     --solid-1: 23 23 26;
     --solid-2: 29 30 36;
-    --solid-3: 36 38 48;
+    --solid-3: 44 45 54;
+    --solid-active: 53 57 66;
     --solid-amber: 42 37 30;
     --solid-blue: 16 49 91;
-    --solid-active: 51 53 64;
+    --text-blue: 126, 182, 255, 1;
-    --border-weak: 34 34 37;
-    --border-strong: 46 47 49;
-    --blue: 126 182 255;
 
     /* alpha is added by default */
-    --alpha-1: 35, 37, 45, 0.8;
+    --alpha-1: 36, 36, 36, 0.8;
-    --alpha-2: 130, 134, 150, 0.15;
+    --alpha-2: 139, 147, 182, 0.15;
-    --alpha-3: 32, 33, 37, 0.9;
+    --alpha-3: 36, 38, 45, 0.9;
     --black-alpha-1: 0, 0, 0, 0.3;
     --black-alpha-2: 0, 0, 0, 0.2;
     --white-alpha: 255, 255, 255, 0.1;

app/javascript/dashboard/components-next/CardLayout.vue

@@ -7,7 +7,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="relative flex flex-col w-full gap-3 px-6 py-5 shadow-sm group/cardLayout rounded-2xl bg-n-solid-1"
+    class="relative flex flex-col w-full gap-3 px-6 py-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
     @click="handleClick"
   >
     <slot name="header" />

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue

@@ -137,7 +137,6 @@ const handleTabChange = value => {
 <template>
   <div class="flex flex-col items-start w-full gap-2 lg:flex-row">
     <TabBar
-      class="bg-n-solid-1"
       :tabs="tabs"
       :initial-active-tab="activeTabIndex"
       @tab-changed="handleTabChange"

app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue

@@ -83,7 +83,7 @@ const redirectToPortalHomePage = () => {
 
 <template>
   <div
-    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] z-50 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
+    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
   >
     <div
       class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"

app/javascript/dashboard/components-next/pagination/PaginationFooter.vue

@@ -56,7 +56,7 @@ const pageInfo = computed(() => {
 
 <template>
   <div
-    class="flex justify-between h-12 w-full max-w-[957px] mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center"
+    class="flex justify-between h-12 w-full max-w-[957px] outline outline-n-container outline-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center"
   >
     <div class="flex items-center gap-3">
       <span class="min-w-0 text-sm font-normal line-clamp-1 text-n-slate-11">

app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue

@@ -56,7 +56,7 @@ const reauthorizationRequired = computed(() => {
 <template>
   <span
     class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
-    :class="{ 'bg-n-blue/20': active }"
+    :class="{ 'bg-n-solid-blue': active }"
   >
     <Icon :icon="channelIcon" class="size-3" />
   </span>

app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue

@@ -22,7 +22,7 @@ const emit = defineEmits(['toggle']);
     :to="to"
     :title="label"
     :class="{
-      'text-n-blue bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
+      'n-blue-text bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
       'text-n-slate-12 font-medium': hasActiveChild,
       'text-n-slate-11 hover:bg-n-alpha-2': !isActive && !hasActiveChild,
     }"

app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue

@@ -32,7 +32,7 @@ const shouldRenderComponent = computed(() => {
       :title="label"
       class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[151px] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
       :class="{
-        'text-n-blue bg-n-alpha-2 active': active,
+        'n-blue-text bg-n-alpha-2 active': active,
       }"
     >
       <component

app/javascript/dashboard/components-next/tabbar/TabBar.vue

@@ -37,14 +37,14 @@ const showDivider = index => {
 </script>
 
 <template>
-  <div class="flex h-8 rounded-lg bg-n-solid-1 w-fit">
+  <div class="flex items-center h-8 rounded-lg bg-n-alpha-1 w-fit">
     <template v-for="(tab, index) in tabs" :key="index">
       <button
-        class="relative px-4 truncate py-1.5 text-sm border-0 rounded-lg transition-colors duration-300 ease-in-out hover:text-n-brand"
+        class="relative px-4 truncate py-1.5 text-sm border-0 outline-1 outline rounded-lg transition-colors duration-300 ease-in-out hover:text-n-brand"
         :class="[
           activeTab === index
-            ? 'text-n-brand bg-n-solid-active font-medium'
+            ? 'text-n-brand bg-n-solid-active outline-n-container dark:outline-transparent'
-            : 'text-n-slate-10',
+            : 'text-n-slate-10 outline-transparent h-8',
         ]"
         @click="selectTab(index)"
       >

theme/colors.js

@@ -347,7 +347,6 @@ export const colors = {
 
     black: '#000000',
     brand: '#2781F6',
-    blue: 'rgb(var(--blue) / <alpha-value>)',
     background: 'rgb(var(--background-color) / <alpha-value>)',
     solid: {
       1: 'rgb(var(--solid-1) / <alpha-value>)',
@@ -366,6 +365,9 @@ export const colors = {
       white: 'rgba(var(--white-alpha))',
     },
     weak: 'rgb(var(--border-weak) / <alpha-value>)',
+    container: 'rgba(var(--border-container))',
     strong: 'rgb(var(--border-strong) / <alpha-value>)',
+    'blue-border': 'rgba(var(--border-blue))',
+    'blue-text': 'rgba(var(--text-blue))',
   },
 };