ocean theme

components/settings/DisplaySettings.tsx

@@ -48,6 +48,7 @@ const DisplaySettings = () => {
       t('settings:dark'),
       'Jungle',
       t('settings:mango'),
+      'Ocean',
       // 'Smoothy',
     ]
   }, [t])

styles/colors.ts

@@ -6,6 +6,7 @@ export const COLORS: any = {
     // Smoothy: 'hsl(45, 100%, 96%)',
     Jungle: 'hsl(120, 18%, 12%)',
     Medium: 'hsl(240, 6%, 12%)',
+    Ocean: 'hsl(222, 74%, 21%)',
   },
   BKG2: {
     Mango: 'hsl(256, 18%, 17%)',
@@ -14,6 +15,7 @@ export const COLORS: any = {
     // Smoothy: 'hsl(45, 100%, 91%)',
     Jungle: 'hsl(120, 18%, 17%)',
     Medium: 'hsl(240, 6%, 17%)',
+    Ocean: 'hsl(222, 74%, 26%)',
   },
   BKG3: {
     Mango: 'hsl(256, 18%, 22%)',
@@ -22,6 +24,7 @@ export const COLORS: any = {
     // Smoothy: 'hsl(45, 100%, 86%)',
     Jungle: 'hsl(120, 18%, 22%)',
     Medium: 'hsl(240, 6%, 22%)',
+    Ocean: 'hsl(222, 74%, 31%)',
   },
   BKG4: {
     Mango: 'hsl(256, 18%, 27%)',
@@ -30,6 +33,7 @@ export const COLORS: any = {
     // Smoothy: 'hsl(45, 100%, 81%)',
     Jungle: 'hsl(120, 18%, 27%)',
     Medium: 'hsl(240, 6%, 27%)',
+    Ocean: 'hsl(222, 74%, 36%)',
   },
   FGD4: {
     Mango: 'hsl(253, 19%, 61%)',
@@ -38,6 +42,7 @@ export const COLORS: any = {
     // Smoothy: 'hsl(45, 100%, 34%)',
     Jungle: 'hsl(120, 20%, 63%)',
     Medium: 'hsl(0, 0%, 50%)',
+    Ocean: 'hsl(220, 71%, 66%)',
   },
   UP: {
     Mango: 'hsl(72, 97%, 41%)',
@@ -46,6 +51,7 @@ export const COLORS: any = {
     // Smoothy: 'hsl(110, 73%, 40%)',
     Jungle: 'hsl(120, 50%, 53%)',
     Medium: 'hsl(111, 47%, 53%)',
+    Ocean: 'hsl(165, 82%, 45%)',
   },
   ACTIVE: {
     Mango: 'hsl(45, 86%, 62%)',
@@ -54,6 +60,7 @@ export const COLORS: any = {
     // Smoothy: 'hsl(321, 100%, 48%)',
     Jungle: 'hsl(120, 100%, 73%)',
     Medium: 'hsl(45, 86%, 62%)',
+    Ocean: 'hsl(45, 86%, 62%)',
   },
   DOWN: {
     Mango: 'hsl(4, 93%, 60%)',
@@ -62,5 +69,6 @@ export const COLORS: any = {
     // Smoothy: 'hsl(0, 100%, 56%)',
     Jungle: 'hsl(0, 100%, 73%)',
     Medium: 'hsl(0, 67%, 48%)',
+    Ocean: 'hsl(3, 59%, 56%)',
   },
 }

styles/globals.css

@@ -183,6 +183,32 @@ th {
   --warning: theme('colors.medium-theme.warning');
 }
 
+[data-theme='Ocean'] {
+  --active: theme('colors.ocean-theme.active.DEFAULT');
+  --active-dark: theme('colors.ocean-theme.active.dark');
+  --down: theme('colors.ocean-theme.down.DEFAULT');
+  --down-dark: theme('colors.ocean-theme.down.dark');
+  --down-muted: theme('colors.ocean-theme.down.muted');
+  --up: theme('colors.ocean-theme.up.DEFAULT');
+  --up-dark: theme('colors.ocean-theme.up.dark');
+  --up-muted: theme('colors.ocean-theme.up.muted');
+  --link: theme('colors.ocean-theme.link.DEFAULT');
+  --link-hover: theme('colors.ocean-theme.link.hover');
+  --bkg-1: theme('colors.ocean-theme.bkg-1');
+  --bkg-2: theme('colors.ocean-theme.bkg-2');
+  --bkg-3: theme('colors.ocean-theme.bkg-3');
+  --bkg-4: theme('colors.ocean-theme.bkg-4');
+  --fgd-1: theme('colors.ocean-theme.fgd-1');
+  --fgd-2: theme('colors.ocean-theme.fgd-2');
+  --fgd-3: theme('colors.ocean-theme.fgd-3');
+  --fgd-4: theme('colors.ocean-theme.fgd-4');
+  --button: theme('colors.ocean-theme.button.DEFAULT');
+  --button-hover: theme('colors.ocean-theme.button.hover');
+  --error: theme('colors.ocean-theme.error');
+  --success: theme('colors.ocean-theme.success');
+  --warning: theme('colors.ocean-theme.warning');
+}
+
 /* [data-theme='Smoothy'] {
   --active: theme('colors.smoothy-theme.active.DEFAULT');
   --active-dark: theme('colors.smoothy-theme.active.dark');

tailwind.config.js

@@ -150,6 +150,38 @@ module.exports = {
           'fgd-3': 'hsl(0, 0%, 60%)',
           'fgd-4': 'hsl(0, 0%, 50%)',
         },
+        'ocean-theme': {
+          active: {
+            DEFAULT: 'hsl(45, 86%, 62%)',
+            dark: 'hsl(45, 86%, 52%)',
+          },
+          button: {
+            DEFAULT: 'hsl(222, 74%, 36%)',
+            hover: 'hsl(222, 74%, 26%)',
+          },
+          link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 52%)' },
+          down: {
+            DEFAULT: 'hsl(3, 59%, 56%)',
+            dark: 'hsl(3, 59%, 46%)',
+            muted: 'hsl(3, 19%, 46%)',
+          },
+          up: {
+            DEFAULT: 'hsl(165, 82%, 45%)',
+            dark: 'hsl(165, 82%, 35%)',
+            muted: 'hsl(165, 42%, 35%)',
+          },
+          error: 'hsl(3, 59%, 56%)',
+          success: 'hsl(165, 82%, 45%)',
+          warning: 'hsl(45, 86%, 62%)',
+          'bkg-1': 'hsl(222, 74%, 21%)',
+          'bkg-2': 'hsl(222, 74%, 26%)',
+          'bkg-3': 'hsl(222, 74%, 31%)',
+          'bkg-4': 'hsl(222, 74%, 36%)',
+          'fgd-1': 'hsl(220, 71%, 96%)',
+          'fgd-2': 'hsl(220, 71%, 86%)',
+          'fgd-3': 'hsl(220, 71%, 76%)',
+          'fgd-4': 'hsl(220, 71%, 66%)',
+        },
         'smoothy-theme': {
           active: {
             DEFAULT: 'hsl(321, 100%, 48%)',