Adjust colors

milesmcc · Dec 13, 2020 · c7f3c85 · c7f3c85
1 parent 9194407
commit c7f3c85
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 89 deletions.
diff --git a/dist/a17t.css b/dist/a17t.css
diff --git a/dist/tailwind.css b/dist/tailwind.css
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -3,7 +3,7 @@
 
 {%- include head.html -%}
 
-<body class="max-w-full overflow-x-hidden section">
+<body class="max-w-full overflow-x-hidden bg-neutral-50">
 
   <div class="max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8">
 

diff --git a/docs/assets/css/dist/a17t.css b/docs/assets/css/dist/a17t.css
diff --git a/docs/assets/css/dist/tailwind.css b/docs/assets/css/dist/tailwind.css
diff --git a/src/vars/_colors.css b/src/vars/_colors.css
@@ -1,6 +1,6 @@
 :root {
   @each $tone in neutral, positive, warning, critical, info, urge {
-    @each $val in 000, 100, 200, 300, 400, 500, 600, 700, 800, 900 {
+    @each $val in 000, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 {
       --color-$(tone)-$(val)-fallback: theme("colors.$tone.$val");
     }
   }
@@ -19,7 +19,7 @@
 
   --color-neutral-normal-content: var(--color-neutral-800-fallback);
   --color-neutral-normal-fill: var(--color-neutral-200-fallback);
-  --color-neutral-normal-background: var(--color-neutral-100-fallback);
+  --color-neutral-normal-background: var(--color-neutral-50-fallback);
   --color-neutral-normal-muted: var(--color-neutral-700-fallback);
 
   --color-neutral-high-content: var(--color-neutral-000-fallback);
@@ -38,12 +38,12 @@
 
   --color-positive-normal-content: var(--color-positive-800-fallback);
   --color-positive-normal-fill: var(--color-positive-200-fallback);
-  --color-positive-normal-background: var(--color-positive-100-fallback);
+  --color-positive-normal-background: var(--color-positive-50-fallback);
   --color-positive-normal-muted: var(--color-positive-600-fallback);
 
   --color-positive-high-content: var(--color-positive-000-fallback);
   --color-positive-high-fill: var(--color-positive-500-fallback);
-  --color-positive-high-muted: var(--color-positive-100-fallback);
+  --color-positive-high-muted: var(--color-positive-50-fallback);
 
   /* WARNING */
   --color-warning: var(--color-warning-500-fallback);
@@ -57,7 +57,7 @@
 
   --color-warning-normal-content: var(--color-warning-800-fallback);
   --color-warning-normal-fill: var(--color-warning-200-fallback);
-  --color-warning-normal-background: var(--color-warning-100-fallback);
+  --color-warning-normal-background: var(--color-warning-50-fallback);
   --color-warning-normal-muted: var(--color-warning-600-fallback);
 
   --color-warning-high-content: var(--color-warning-900-fallback);
@@ -76,12 +76,12 @@
 
   --color-critical-normal-content: var(--color-critical-800-fallback);
   --color-critical-normal-fill: var(--color-critical-200-fallback);
-  --color-critical-normal-background: var(--color-critical-100-fallback);
+  --color-critical-normal-background: var(--color-critical-50-fallback);
   --color-critical-normal-muted: var(--color-critical-600-fallback);
 
   --color-critical-high-content: var(--color-critical-000-fallback);
   --color-critical-high-fill: var(--color-critical-500-fallback);
-  --color-critical-high-muted: var(--color-critical-100-fallback);
+  --color-critical-high-muted: var(--color-critical-50-fallback);
 
   /* INFO */
   --color-info: var(--color-info-500-fallback);
@@ -95,12 +95,12 @@
 
   --color-info-normal-content: var(--color-info-800-fallback);
   --color-info-normal-fill: var(--color-info-200-fallback);
-  --color-info-normal-background: var(--color-info-100-fallback);
+  --color-info-normal-background: var(--color-info-50-fallback);
   --color-info-normal-muted: var(--color-info-600-fallback);
 
   --color-info-high-content: var(--color-info-000-fallback);
   --color-info-high-fill: var(--color-info-500-fallback);
-  --color-info-high-muted: var(--color-info-100-fallback);
+  --color-info-high-muted: var(--color-info-50-fallback);
 
   /* URGE */
   --color-urge: var(--color-urge-600-fallback);
@@ -114,16 +114,16 @@
 
   --color-urge-normal-content: var(--color-urge-800-fallback);
   --color-urge-normal-fill: var(--color-urge-200-fallback);
-  --color-urge-normal-background: var(--color-urge-100-fallback);
+  --color-urge-normal-background: var(--color-urge-50-fallback);
   --color-urge-normal-muted: var(--color-urge-600-fallback);
 
   --color-urge-high-content: var(--color-urge-000-fallback);
   --color-urge-high-fill: var(--color-urge-600-fallback);
-  --color-urge-high-muted: var(--color-urge-100-fallback);
+  --color-urge-high-muted: var(--color-urge-50-fallback);
 
   /* APPLICATIONS */
   --color-fill: theme("colors.transparent");
-  --color-background: var(--color-neutral-100-fallback);
+  --color-background: var(--color-neutral-50-fallback);
 
   /* DEFAULTS */
   --color-content: var(--color-neutral-low-content);

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,3 +1,17 @@
+const colors = require('tailwindcss/colors')
+
+function makeVariable(dict, name) {
+    Object.keys(dict).map(function(key, index) {
+        dict[key] = `var(${name(key)}, ${dict[key]})`;  
+    });
+    return dict;
+}
+
+function prepColorDict(dict) {
+    dict["000"] = "white";
+    return dict;
+}
+
 module.exports = {
     purge: [],
     prefix: '',
@@ -17,78 +31,12 @@ module.exports = {
             black: '#000',
             white: '#fff',
 
-            neutral: {
-                "000": 'var(--color-neutral-000, white)',
-                "100": 'var(--color-neutral-100, #f7fafc)',
-                "200": 'var(--color-neutral-200, #edf2f7)',
-                "300": 'var(--color-neutral-300, #e2e8f0)',
-                "400": 'var(--color-neutral-400, #cbd5e0)',
-                "500": 'var(--color-neutral-500, #a0aec0)',
-                "600": 'var(--color-neutral-600, #718096)',
-                "700": 'var(--color-neutral-700, #4a5568)',
-                "800": 'var(--color-neutral-800, #2d3748)',
-                "900": 'var(--color-neutral-900, #1a202c)',
-            },
-            critical: {
-                "000": 'var(--color-critical-000, white)',
-                "100": 'var(--color-critical-100, #fff5f5)',
-                "200": 'var(--color-critical-200, #fed7d7)',
-                "300": 'var(--color-critical-300, #feb2b2)',
-                "400": 'var(--color-critical-400, #fc8181)',
-                "500": 'var(--color-critical-500, #f56565)',
-                "600": 'var(--color-critical-600, #e53e3e)',
-                "700": 'var(--color-critical-700, #c53030)',
-                "800": 'var(--color-critical-800, #9b2c2c)',
-                "900": 'var(--color-critical-900, #742a2a)',
-            },
-            warning: {
-                "000": 'var(--color-warning-000, white)',
-                "100": 'var(--color-warning-100, #fffff0)',
-                "200": 'var(--color-warning-200, #fefcbf)',
-                "300": 'var(--color-warning-300, #faf089)',
-                "400": 'var(--color-warning-400, #f6e05e)',
-                "500": 'var(--color-warning-500, #ecc94b)',
-                "600": 'var(--color-warning-600, #d69e2e)',
-                "700": 'var(--color-warning-700, #b7791f)',
-                "800": 'var(--color-warning-800, #975a16)',
-                "900": 'var(--color-warning-900, #744210)',
-            },
-            positive: {
-                "000": 'var(--color-positive-000, white)',
-                "100": 'var(--color-positive-100, #f0fff4)',
-                "200": 'var(--color-positive-200, #c6f6d5)',
-                "300": 'var(--color-positive-300, #9ae6b4)',
-                "400": 'var(--color-positive-400, #68d391)',
-                "500": 'var(--color-positive-500, #48bb78)',
-                "600": 'var(--color-positive-600, #38a169)',
-                "700": 'var(--color-positive-700, #2f855a)',
-                "800": 'var(--color-positive-800, #276749)',
-                "900": 'var(--color-positive-900, #22543d)',
-            },
-            info: {
-                "000": 'var(--color-info-000, white)',
-                "100": 'var(--color-info-100, #ebf8ff)',
-                "200": 'var(--color-info-200, #bee3f8)',
-                "300": 'var(--color-info-300, #90cdf4)',
-                "400": 'var(--color-info-400, #63b3ed)',
-                "500": 'var(--color-info-500, #4299e1)',
-                "600": 'var(--color-info-600, #3182ce)',
-                "700": 'var(--color-info-700, #2b6cb0)',
-                "800": 'var(--color-info-800, #2c5282)',
-                "900": 'var(--color-info-900, #2a4365)',
-            },
-            urge: {
-                "000": 'var(--color-urge-000, white)',
-                "100": 'var(--color-urge-100, #faf5ff)',
-                "200": 'var(--color-urge-200, #e9d8fd)',
-                "300": 'var(--color-urge-300, #d6bcfa)',
-                "400": 'var(--color-urge-400, #b794f4)',
-                "500": 'var(--color-urge-500, #9f7aea)',
-                "600": 'var(--color-urge-600, #805ad5)',
-                "700": 'var(--color-urge-700, #6b46c1)',
-                "800": 'var(--color-urge-800, #553c9a)',
-                "900": 'var(--color-urge-900, #44337a)',
-            },
+            neutral: makeVariable(prepColorDict(colors.coolGray), name => `--color-neutral-${name}`),
+            critical: makeVariable(prepColorDict(colors.red), name => `--color-critical-${name}`),
+            warning: makeVariable(prepColorDict(colors.amber), name => `--color-warning-${name}`),
+            positive: makeVariable(prepColorDict(colors.green), name => `--color-positive-${name}`),
+            info: makeVariable(prepColorDict(colors.teal), name => `--color-info-${name}`),
+            urge: makeVariable(prepColorDict(colors.indigo), name => `--color-urge-${name}`),
         },
         spacing: {
             'px': 'var(--spacing-px, 1px)',