Add colors

package-lock.json

@@ -1446,6 +1446,11 @@
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz",
       "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og=="
     },
+    "date-fns": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.27.0.tgz",
+      "integrity": "sha512-sj+J0Mo2p2X1e306MHq282WS4/A8Pz/95GIFcsPNMPMZVI3EUrAdSv90al1k+p74WGLCruMXk23bfEDZa71X9Q=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -3123,6 +3128,11 @@
         "wrappy": "1"
       }
     },
+    "open-color": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/open-color/-/open-color-1.9.1.tgz",
+      "integrity": "sha512-vCseG/EQ6/RcvxhUcGJiHViOgrtz4x0XbZepXvKik66TMGkvbmjeJrKFyBEx6daG5rNyyd14zYXhz0hZVwQFOw=="
+    },
     "optionator": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",

package.json

@@ -6,7 +6,9 @@
   "dependencies": {
     "@mdi/js": "^6.5.95",
     "@mdi/react": "^1.5.0",
+    "date-fns": "^2.27.0",
     "next": "^12.0.7",
+    "open-color": "^1.9.1",
     "ramda": "^0.27.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/lib/colors.ts

@@ -0,0 +1,13 @@
+import openColors from 'open-color'
+
+export const colors = Object.entries(openColors)
+  .map(([colorName, colorObjectMap]) => {
+    return [colorName, Object.values(colorObjectMap) as string[]] as [
+      string,
+      string[]
+    ]
+  })
+  .reduce<{ [key: string]: string[] }>((map, [colorName, colorArray]) => {
+    map[colorName] = colorArray
+    return map
+  }, {})

src/pages/_app.tsx

@@ -1,34 +1,13 @@
 import type { AppProps } from 'next/app'
 import { Theme, ThemeProvider } from 'theme-ui'
+import { colors } from '../lib/colors'
 
 export const theme: Theme = {
   breakpoints: ['576px', '768px', '992px', '1200px'],
   colors: {
+    ...colors,
     white: '#fff',
     black: '#000',
-    gray: [
-      '#fff',
-      '#f8f9fa',
-      '#e9ecef',
-      '#dee2e6',
-      '#ced4da',
-      '#adb5bd',
-      '#6c757d',
-      '#495057',
-      '#343a40',
-      '#212529',
-    ],
-    blue: '#007bff',
-    indigo: '#6610f2',
-    purple: '#6f42c1',
-    pink: '#e83e8c',
-    red: '#dc3545',
-    orange: '#fd7e14',
-    yellow: '#ffc107',
-    green: '#28a745',
-    teal: '#20c997',
-    cyan: '#17a2b8',
-    grayDark: '#343a40',
     text: '#212529',
     background: '#fff',
     primary: '#007bff',