feat: new colors (#10352)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: iamsivin <iamsivin@gmail.com>
2025-10-29 18:22:53 +00:00 · 2024-10-28 14:27:08 +05:30
parent 80c9434069
commit 6df2d76c1e
10 changed files with 43 additions and 30 deletions
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/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;
-    --border-weak: 231 231 231;
-    --border-strong: 235 235 235;
-    --blue: 39 129 246;
+    --text-blue: 8, 109, 224, 1;

    /* alpha is added by default */
-    --alpha-1: 36, 38, 48, 0.06;
-    --alpha-2: 130, 134, 150, 0.12;
-    --alpha-3: 255, 255, 255, 0.9;
+    --alpha-1: 67, 67, 67, 0.06;
+    --alpha-2: 201, 202, 207, 0.15;
+    --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;
-    --border-weak: 34 34 37;
-    --border-strong: 46 47 49;
-    --blue: 126 182 255;
+    --text-blue: 126, 182, 255, 1;

    /* alpha is added by default */
-    --alpha-1: 35, 37, 45, 0.8;
-    --alpha-2: 130, 134, 150, 0.15;
-    --alpha-3: 32, 33, 37, 0.9;
+    --alpha-1: 36, 36, 36, 0.8;
+    --alpha-2: 139, 147, 182, 0.15;
+    --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;
--- a/app/javascript/dashboard/components-next/CardLayout.vue
+++ b/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" />
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
+++ b/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"
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/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"
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/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">
--- a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
+++ b/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>
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
+++ b/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,
    }"
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
+++ b/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
--- a/app/javascript/dashboard/components-next/tabbar/TabBar.vue
+++ b/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-slate-10',
+            ? 'text-n-brand bg-n-solid-active outline-n-container dark:outline-transparent'
+            : 'text-n-slate-10 outline-transparent h-8',
        ]"
        @click="selectTab(index)"
      >
--- a/theme/colors.js
+++ b/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))',
  },
 };