feat: more flexible color palette (#865)

nuxt-themes · Mar 27, 2023 · bea89ec · bea89ec
1 parent 6409c47
commit bea89ec
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 3 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -55,7 +55,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background: $dt('color.white');
-  color: $dt('color.gray.700');
+  color: $dt('color.gray.800');
   font-family: $dt('font.sans');
   min-width: $dt('size.xs');
 

diff --git a/tokens.config.ts b/tokens.config.ts
@@ -1,9 +1,81 @@
 import { defineTheme } from 'pinceau'
-import theme from '@nuxt-themes/tokens/config'
 
 export default defineTheme({
   color: {
-    primary: theme.color.lightblue
+    black: '#0B0A0A',
+    // Primary is modified lightblue
+    primary: {
+      50: '#F1FCFF',
+      100: '#DCF7FF',
+      200: '#C5F2FF',
+      300: '#82E3FF',
+      400: '#55E1FF',
+      500: '#1AD6FF',
+      600: '#09A0C1',
+      700: '#024757',
+      800: '#00232B',
+      900: '#001A1F'
+    },
+    gray: {
+      50: '#FBFBFB',
+      100: '#F6F5F4',
+      200: '#ECEBE8',
+      300: '#DBD9D3',
+      400: '#ADA9A4',
+      500: '#97948F',
+      600: '#67635D',
+      700: '#36332E',
+      800: '#201E1B',
+      900: '#121110'
+    },
+    red: {
+      50: '#FFF9F8',
+      100: '#FFF3F0',
+      200: '#FFDED7',
+      300: '#FFA692',
+      400: '#FF7353',
+      500: '#FF3B10',
+      600: '#BB2402',
+      700: '#701704',
+      800: '#340A01',
+      900: '#1C0301'
+    },
+    blue: {
+      50: '#F2FAFF',
+      100: '#DFF3FF',
+      200: '#C6EAFF',
+      300: '#A1DDFF',
+      400: '#64C7FF',
+      500: '#1AADFF',
+      600: '#0069A6',
+      700: '#003351',
+      800: '#002235',
+      900: '#00131D'
+    },
+    green: {
+      50: '#ECFFF7',
+      100: '#DEFFF1',
+      200: '#C3FFE6',
+      300: '#86FBCB',
+      400: '#3CEEA5',
+      500: '#0DD885',
+      600: '#00B467',
+      700: '#006037',
+      800: '#002817',
+      900: '#00190F'
+    },
+    yellow: {
+      50: '#FFFDEA',
+      100: '#FFF8CC',
+      200: '#FEF5A4',
+      300: '#FFEF8A',
+      400: '#FFE53C',
+      500: '#EECF00',
+      600: '#C2A905',
+      700: '#6B5D02',
+      800: '#282300',
+      900: '#1A1700'
+    }
   },
   docus: {
     $schema: {