feat: a11y colors (#629)

Author: JacobBlomgren

src/styles/color.js

@@ -1,4 +1,4 @@
-export default {
+export default ({ a11yColors = false }) => ({
   // BRAND
   brandBlue: '#00C8F5',
   brandGreen: '#D2F500',
@@ -30,8 +30,8 @@ export default {
 
   // FUNCTIONAL COLOURS FOR PRODUCT DEVELOPMENT
 
-  cta: '#0046FF',
-  positive: '#00D200',
-  negative: '#FF1900',
-  index: '#FFCF00',
-};
+  cta: a11yColors ? '#2D67FF' : '#0046FF',
+  positive: a11yColors ? '#008A00' : '#00D200',
+  negative: a11yColors ? '#E81700' : '#FF1900',
+  index: a11yColors ? '#FFCF00' : '#C15700',
+});

src/styles/palette.js

@@ -1,11 +1,10 @@
-import color from './color';
-
-export default function createPalette({ type = 'light' }) {
-  const palette = { ...color };
+import createColor from './color';
 
+export default function createPalette({ type = 'light', a11yColors = false }) {
   const proxyIsAvailable = typeof window !== 'undefined' ? 'Proxy' in window : true;
 
   if (!proxyIsAvailable) {
+    const palette = { ...createColor({ a11yColors }) };
     return palette;
   }
 
@@ -26,7 +25,7 @@ export default function createPalette({ type = 'light' }) {
   return {
     name: 'nordnet',
     type,
-    ...color,
+    ...createColor({ a11yColors }),
     color: pinkProxieFactory('.color'),
     variant: pinkProxieFactory('.variant'),
     // text: pinkProxieFactory('').text,

src/styles/theme.js

@@ -9,7 +9,7 @@ import createMixins from './mixins';
 
 export function createTheme(config = {}) {
   const {
-    palette = createPalette({ type: 'dark' }),
+    palette = createPalette({ type: 'dark', a11yColors: config.a11yColors }),
     breakpoints = createBreakpoints(),
     mixins = createMixins(breakpoints),
     typography = createTypography(),