chore: Sync colors from dashboard to tailwind config (#5656)

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -321,7 +321,7 @@ export default {
 .beta {
   padding-right: var(--space-smaller) !important;
   padding-left: var(--space-smaller) !important;
-  margin-left: var(--space-half) !important;
+  margin-left: var(--space-smaller) !important;
   display: inline-block;
   font-size: var(--font-size-micro);
   font-weight: var(--font-weight-medium);

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -434,7 +434,7 @@ export default {
 
       &::before {
         transform: rotate(0deg);
-        left: var(--space-half);
+        left: var(--space-smaller);
         bottom: var(--space-minus-slab);
       }
     }

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -970,7 +970,7 @@ export default {
 
   &::before {
     transform: rotate(0deg);
-    left: var(--space-half);
+    left: var(--space-smaller);
     bottom: var(--space-minus-slab);
   }
 }

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -181,7 +181,7 @@ export default {
   color: var(--y-700);
   font-size: var(--font-size-mini);
   margin-top: var(--space-small);
-  padding: var(--space-half) var(--space-one);
+  padding: var(--space-smaller) var(--space-small);
 }
 
 .popover-animation-enter-active,

app/javascript/dashboard/modules/widget-preview/components/Widget.vue

@@ -249,8 +249,8 @@ export default {
     display: flex;
     align-items: center;
     border-radius: calc(var(--border-radius-small) * 10);
-    height: calc(var(--space-three) * 2);
+    height: calc(var(--space-large) * 2);
-    width: calc(var(--space-three) * 2);
+    width: calc(var(--space-large) * 2);
     position: relative;
     overflow-wrap: anywhere;
     cursor: pointer;
@@ -274,7 +274,7 @@ export default {
     display: inline;
     height: var(--space-medium);
     width: var(--space-micro);
-    left: var(--space-three);
+    left: var(--space-large);
     position: absolute;
   }
 

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue

@@ -104,7 +104,7 @@ export default {
       .new-popover-link {
         display: flex;
         align-items: center;
-        padding: var(--space-half) var(--space-one);
+        padding: var(--space-smaller) var(--space-small);
         background-color: var(--s-25);
         font-size: var(--font-size-mini);
         color: var(--s-500);

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue

@@ -118,6 +118,6 @@ table {
   justify-content: center;
   color: var(--s-500);
   font-size: var(--font-size-default);
-  margin-top: var(--space-three);
+  margin-top: var(--space-large);
 }
 </style>

app/javascript/shared/assets/stylesheets/colors.scss

@@ -26,16 +26,16 @@
   --g-800: #009000;
   --g-900: #007000;
 
-  --y-50: #fefde8;
+  --y-50: #FEFDE8;
-  --y-100: #fdfcc4;
+  --y-100: #FDFCC4;
-  --y-200: #fcf68c;
+  --y-200: #FCF68C;
-  --y-300: #f9e736;
+  --y-300: #F9E736;
-  --y-400: #f6d819;
+  --y-400: #F6D819;
-  --y-500: #e6c00c;
+  --y-500: #E6C00C;
-  --y-600: #c69608;
+  --y-600: #C69608;
-  --y-700: #9e6b0a;
+  --y-700: #9E6b0A;
   --y-800: #835510;
-  --y-900: #6f4514;
+  --y-900: #6F4514;
 
   --s-25: #F8FAFC;
   --s-50: #F1F5F8;
@@ -50,11 +50,11 @@
   --s-800: #293F51;
   --s-900: #1B2836;
 
-  --b-50: #f7f7f7;
+  --b-50: #F7F7F7;
-  --b-100: #ececed;
+  --b-100: #ECECED;
-  --b-200: #dddde0;
+  --b-200: #DDDDE0;
-  --b-300: #c6c7ca;
+  --b-300: #C6C7CA;
-  --b-400: #abacaf;
+  --b-400: #ABACAF;
   --b-500: #96979C;
   --b-600: #6E6F73;
   --b-700: #5A5B5F;

tailwind.config.js

@@ -14,16 +14,18 @@ module.exports = {
     colors: {
       white: colors.white,
       woot: {
-        50: '#E3F2FF',
+        25: '#F5FAFF',
-        100: '#BBDDFF',
+        50: '#EBF5FF',
-        200: '#8FC9FF',
+        75: '#D6EBFF',
-        300: '#61B3FF',
+        100: '#C2E1FF',
-        400: '#3FA3FF',
+        200: '#99CEFF',
+        300: '#70BAFF',
+        400: '#47A6FF',
         500: '#1F93FF',
-        600: '#2284F0',
+        600: '#1976CC',
-        700: '#2272DC',
+        700: '#135899',
-        800: '#2161CA',
+        800: '#0C3B66',
-        900: '#1F41AB',
+        900: '#061D33',
       },
       green: {
         50: '#E6F8E6',
@@ -38,38 +40,40 @@ module.exports = {
         900: '#007000',
       },
       yellow: {
-        50: '#FFFEE8',
+        50: '#FEFDE8',
-        100: '#FFFAC5',
+        100: '#FDFCC4',
-        200: '#FFF69E',
+        200: '#FCF68C',
-        300: '#FEF176',
+        300: '#F9E736',
-        400: '#FCEC56',
+        400: '#F6D819',
-        500: '#F9E736',
+        500: '#E6C00C',
-        600: '#FFDD3A',
+        600: '#C69608',
-        700: '#FFC532',
+        700: '#9E6b0A',
-        800: '#FDAD2A',
+        800: '#835510',
-        900: '#F9841B',
+        900: '#6F4514',
       },
       slate: {
-        50: '#F4F6FB',
+        25: '#F8FAFC',
-        100: '#C8D6E6',
+        50: '#F1F5F8',
-        200: '#ABBACE',
+        75: '#EBF0F5',
-        300: '#8C9EB6',
+        100: ' #E4EBF1',
-        400: '#7489A4',
+        200: ' #C9D7E3',
-        500: '#5D7592',
+        300: ' #AEC3D5',
-        600: '#506781',
+        400: ' #93AFC8',
-        700: '#40546B',
+        500: ' #779BBB',
-        800: '#314155',
+        600: ' #446888',
-        900: '#1F2D3D',
+        700: ' #37546D',
+        800: ' #293F51',
+        900: ' #1B2836',
       },
       black: {
-        50: '#F8F9FE',
+        50: '#F7F7F7',
-        100: '#F2F3F7',
+        100: '#ECECED',
-        200: '#E9EAEF',
+        200: '#DDDDE0',
-        300: '#DADBDF',
+        300: '#C6C7CA',
-        400: '#B6B7BB',
+        400: '#ABACAF',
         500: '#96979C',
         600: '#6E6F73',
-        700: '#3C4858',
+        700: '#5A5B5F',
         800: '#3C3D40',
         900: '#1B1C1F',
       },