Breaking: Remove var(--off-white) from :root and cleanup in tailwind …

…config
lookback · Mar 1, 2023 · 0119040 · 0119040
1 parent ff64e27
commit 0119040
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 21 deletions.
diff --git a/lib/plugins/tailwind-variables.js b/lib/plugins/tailwind-variables.js
@@ -1,9 +1,6 @@
 const SHORTHAND_HEX_REGEX = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
 const HEX_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
 
-const onlyWhitelist = (colorName) =>
-  !['white', 'transparent', 'defaultBoxShadow'].includes(colorName);
-
 const isHex = (colorName) => /^#[a-f\d]/i.test(colorName);
 
 const hexToRgb = (hex) => {
@@ -61,17 +58,15 @@ const toProfile = (colorProfileName, color) => {
  * Defaults to `false`
  */
 module.exports = function variables({ element = ':root', useP3 = false } = {}) {
-  return function({ addBase, theme }) {
+  return function ({ addBase, theme }) {
     const colors = theme('colors');
 
     const styles = {
       [element]: Object.assign(
         {},
-        ...Object.keys(colors)
-          .filter(onlyWhitelist)
-          .map((color) => ({
-            [`--${color}`]: colors[color],
-          }))
+        ...Object.keys(colors).map((color) => ({
+          [`--${color}`]: colors[color],
+        }))
       ),
     };
 

diff --git a/src/variables.css b/src/variables.css
@@ -38,7 +38,7 @@
   --form-input-color: rgba(theme('colors.blue-80'), 0.9);
   --form-input-color-active: var(--text-color);
   --form-placeholder-color: var(--grey-90);
-  --form-background-color: var(--off-white);
+  --form-background-color: #fefefe;
   --form-background-color-active: #fff;
   --form-border-color: var(--default-border-color);
   --form-focus-shadow: rgba(theme('colors.blue-80'), 0.1) 0 0 0 2px;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,3 @@
-const pick = require('./lib/pick');
 const styleColors = require('./colors.json');
 
 /** Root font size without unit. */
@@ -69,11 +68,16 @@ The first version of the marketing pages
 */
 
 // Only provide "real" colours here, no aliases.
+// These are exposed as CSS variables on :root. See tailwind-variables.js.
 const colors = {
   ...styleColors,
-  'off-white': '#fefefe',
+};
+
+// These are made to utils, such as .text-{color}, .bg-{color}, .fill-{color}.
+const colorAliases = {
+  ...styleColors,
+  current: 'currentColor',
   white: '#fff',
-  transparent: 'transparent',
 };
 
 module.exports = {
@@ -98,11 +102,7 @@ module.exports = {
         | .error { color: theme('colors.red') }
         |
     */
-    // Here you can provide aliases
-    colors: {
-      ...colors,
-      current: 'currentColor',
-    },
+    colors,
 
     /*
         |-----------------------------------------------------------------------------
@@ -349,8 +349,8 @@ module.exports = {
     */
 
     textColor: {
+      ...colorAliases,
       body: colors['blue-80'], // Body
-      ...colors,
       muted: colors['grey-90'],
       error: colors['red-70'],
       warning: colors['orange-70'],
@@ -371,8 +371,8 @@ module.exports = {
     */
 
     backgroundColor: {
+      ...colorAliases,
       body: colors['grey-20'],
-      ...colors,
     },
 
     /*
@@ -693,7 +693,7 @@ module.exports = {
         |
     */
 
-    fill: (theme) => theme('colors'),
+    fill: colorAliases,
 
     /*
         |-----------------------------------------------------------------------------