@aivenio/aquarium 1.72.0 → 1.73.0-rc1

package/dist/tailwind.config.js

@@ -1,159 +1,74 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const plugin = require('tailwindcss/plugin');
-const defaultTheme = require('tailwindcss/defaultTheme');
-const _ = require('lodash');
-const { theme } = require('./src/js/resolveTheme');
-const { themeTransformer } = require('./themeTransformer');
-/*
- * Shortens a given spacing key to a minimal differentiable string
- * example for resulting classnames with/without the shortening:
- * h-l1 / h-layout01; m-1 / m-spacing01
- */
-const shortenSpacingKey = (key) => key.replace('ayout0', '').replace('spacing0', '');
-
-const spacing = _.reduce(theme.spacing, (acc, { px }, key) => ({ ...acc, [shortenSpacingKey(key)]: `${px}px` }), {
-  '0': '0',
-  '1px': '1px',
-});
-
-const originalTheme = {
-  extend: {
-    zIndex: {
-      modal: '100',
-    },
-    borderColor: {
-      'muted': 'var(--aquarium-colors-grey-5)',
-      'default': 'var(--aquarium-colors-grey-20)',
-      'intense': 'var(--aquarium-colors-grey-50)',
-      'primary-muted': 'var(--aquarium-colors-primary-60)',
-      'primary-default': 'var(--aquarium-colors-primary-80)',
-      'primary-intense': 'var(--aquarium-colors-primary-100)',
-      'info-muted': 'var(--aquarium-colors-info-50)',
-      'info-default': 'var(--aquarium-colors-info-70)',
-      'info-intense': 'var(--aquarium-colors-info-90)',
-      'success-muted': 'var(--aquarium-colors-success-10)',
-      'success-default': 'var(--aquarium-colors-success-40)',
-      'success-intense': 'var(--aquarium-colors-success-70)',
-      'warning-muted': 'var(--aquarium-colors-warning-20)',
-      'warning-default': 'var(--aquarium-colors-warning-70)',
-      'warning-intense': 'var(--aquarium-colors-warning-90)',
-      'danger-muted': 'var(--aquarium-colors-error-10)',
-      'danger-default': 'var(--aquarium-colors-error-50)',
-      'danger-intense': 'var(--aquarium-colors-error-80)',
-    },
-    backgroundColor: {
-      'body': 'var(--aquarium-colors-white)',
-      'body-intense': 'var(--aquarium-colors-grey-80)',
-      'popover-content': 'var(--aquarium-colors-white)',
-      'muted': 'var(--aquarium-colors-grey-0)',
-      'default': 'var(--aquarium-colors-grey-5)',
-      'intense': 'var(--aquarium-colors-grey-20)',
-      'primary-muted': 'var(--aquarium-colors-primary-40)',
-      'primary-default': 'var(--aquarium-colors-primary-80)',
-      'primary-intense': 'var(--aquarium-colors-primary-90)',
-      'primary-active': 'var(--aquarium-colors-primary-5)',
-      'primary-hover': 'var(--aquarium-colors-primary-5)',
-      'info-muted': 'var(--aquarium-colors-info-10)',
-      'info-default': 'var(--aquarium-colors-info-70)',
-      'info-intense': 'var(--aquarium-colors-info-90)',
-      'success-muted': 'var(--aquarium-colors-success-5)',
-      'success-default': 'var(--aquarium-colors-success-70)',
-      'success-intense': 'var(--aquarium-colors-success-90)',
-      'warning-muted': 'var(--aquarium-colors-warning-5)',
-      'warning-default': 'var(--aquarium-colors-warning-70)',
-      'warning-intense': 'var(--aquarium-colors-warning-90)',
-      'danger-muted': 'var(--aquarium-colors-error-10)',
-      'danger-default': 'var(--aquarium-colors-error-20)',
-      'danger-intense': 'var(--aquarium-colors-error-50)',
-      'status-announcement': 'var(--aquarium-colors-primary-5)',
-      'status-info': 'var(--aquarium-colors-info-10)',
-      'status-warning': 'var(--aquarium-colors-warning-5)',
-      'status-danger': 'var(--aquarium-colors-error-5)',
-      'status-success': 'var(--aquarium-colors-success-5)',
-      'icon-button-hover': 'rgba(25,25,29,.05)', // rgb value is from grey-100
-    },
-    textColor: {
-      'inactive': 'var(--aquarium-colors-grey-40)',
-      'muted': 'var(--aquarium-colors-grey-50)',
-      'default': 'var(--aquarium-colors-grey-70)',
-      'intense': 'var(--aquarium-colors-grey-90)',
-      'primary-inactive': 'var(--aquarium-colors-primary-40)',
-      'primary-active': 'var(--aquarium-colors-primary-90)',
-      'primary-muted': 'var(--aquarium-colors-primary-60)',
-      'primary-default': 'var(--aquarium-colors-primary-70)',
-      'primary-intense': 'var(--aquarium-colors-primary-80)',
-      'info-inactive': 'var(--aquarium-colors-info-20)',
-      'info-muted': 'var(--aquarium-colors-info-40)',
-      'info-default': 'var(--aquarium-colors-info-70)',
-      'info-intense': 'var(--aquarium-colors-info-90)',
-      'success-inactive': 'var(--aquarium-colors-success-10)',
-      'success-muted': 'var(--aquarium-colors-success-30)',
-      'success-default': 'var(--aquarium-colors-success-70)',
-      'success-intense': 'var(--aquarium-colors-success-90)',
-      'warning-inactive': 'var(--aquarium-colors-warning-20)',
-      'warning-muted': 'var(--aquarium-colors-warning-40)',
-      'warning-default': 'var(--aquarium-colors-warning-80)',
-      'warning-intense': 'var(--aquarium-colors-warning-100)',
-      'danger-inactive': 'var(--aquarium-colors-error-10)',
-      'danger-muted': 'var(--aquarium-colors-error-20)',
-      'danger-default': 'var(--aquarium-colors-error-50)',
-      'danger-intense': 'var(--aquarium-colors-error-80)',
-    },
-    ringWidth: {
-      DEFAULT: '2px',
-      1: '1px',
-      2: '2px',
-    },
-  },
-  borderRadius: {
-    ...defaultTheme.borderRadius,
-    DEFAULT: '4px',
-  },
-  colors: {
-    ...theme.colors,
-    transparent: 'transparent',
-    current: 'currentColor',
-    white: 'white',
-    black: 'black',
-  },
-  spacing,
-  margin: {
-    ...spacing,
-    auto: 'auto',
-    ..._.reduce(spacing, (acc, value, key) => ({ ...acc, [`-${key}`]: `-${value}` })),
-  },
-  boxShadow: {
-    ...theme.elevations,
-    whiteInset: 'inset 0 0 0 3px rgba(255,255,255,1)',
-  },
-  screens: {
-    // "default" here means the width from 0px to "xs"
-    default: '0px',
-    xs: '320px',
-    sm: '672px',
-    md: '1056px',
-    lg: '1312px',
-    xl: '1536px',
-  },
-  animation: {
-    ...defaultTheme.animation,
-    'positioner-fade-in': 'positioner-fade-in 300ms ease-in-out',
-  },
-  keyframes: {
-    ...defaultTheme.keyframes,
-    'positioner-fade-in': {
-      from: { opacity: '0' },
-      to: { opacity: '1' },
-    },
-  },
-};
 
-const transformedTheme = themeTransformer(originalTheme);
+const backgroundColor = require('./tailwind/tailwind.backgroundColor');
+const borderColor = require('./tailwind/tailwind.borderColor');
+const borderRadius = require('./tailwind/tailwind.borderRadius');
+const borderWidth = require('./tailwind/tailwind.borderWidth');
+const boxShadow = require('./tailwind/tailwind.boxShadow');
+const colors = require('./tailwind/tailwind.colors');
+const elevations = require('./tailwind/tailwind.elevations');
+const margin = require('./tailwind/tailwind.margin');
+const screens = require('./tailwind/tailwind.screens');
+const spacing = require('./tailwind/tailwind.spacing');
+const textColor = require('./tailwind/tailwind.textColor');
+const typography = require('./tailwind/tailwind.typography');
+
+// Convert the typography object into a format that tailwind can understand
+const typographyComponents = Object.fromEntries(Object.entries(typography).map(([key, font]) => [`.${key}`, { font }]));
+
+// Utility function used to collect all the keys from an object that can be used in the safelist.
+const collectKeys = (obj, prefix = '') =>
+  Object.entries(obj).reduce((acc, [key, value]) => {
+    if (typeof value === 'object') {
+      return acc.concat(collectKeys(value, `${prefix}${key}-`));
+    }
+
+    return acc.concat(`${prefix}${key}`);
+  }, []);
+
+// Generate negative margin values
+const negativeMargin = Object.entries(margin).reduce((acc, [key, value]) => {
+  if (!['auto', '0'].includes(key)) {
+    acc[`-${key}`] = `-${value}`;
+  }
+
+  return acc;
+}, {});
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  originalTheme,
-  theme: transformedTheme,
+  theme: {
+    boxShadow,
+    colors,
+    elevations,
+    margin: {
+      auto: 'auto',
+      ...margin,
+      ...negativeMargin,
+    },
+    screens,
+    spacing,
+    borderWidth,
+    extend: {
+      backgroundColor,
+      borderColor,
+      borderRadius,
+      textColor,
+      zIndex: {
+        modal: '100',
+      },
+      animation: {
+        'positioner-fade-in': 'positioner-fade-in 300ms ease-in-out',
+      },
+      keyframes: {
+        'positioner-fade-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+      },
+    },
+  },
   // https://tailwindcss.com/docs/configuring-variants#ordering-variants
   variants: {
     backgroundColor: ['odd', 'even', 'hover', 'group-hover', 'active', 'disabled', 'focus'],
@@ -169,9 +84,13 @@ module.exports = {
   },
   content: ['./src/**/*.tsx', './src/**/*.ts'],
   safelist: [
-    ...theme.typography.sizes.map((s) => s.className),
-    ...Object.keys(theme.colors).map((s) => `text-${s}`),
-    ...Object.keys(transformedTheme.extend.textColor).map((s) => `text-${s}`),
+    ...Object.keys(typographyComponents),
+    ...collectKeys(colors, 'text-'),
+    ...collectKeys(colors, 'bg-'),
+    ...collectKeys(colors, 'border-'),
+    ...collectKeys(textColor, 'text-'),
+    ...collectKeys(backgroundColor, 'bg-'),
+    ...collectKeys(borderColor, 'border-'),
     'line-clamp-1',
     'line-clamp-2',
     'line-clamp-3',
@@ -192,14 +111,7 @@ module.exports = {
     }),
 
     plugin(({ addComponents, variants }) => {
-      const typography = theme.typography.sizes.reduce(
-        (acc, { className, style }) => ({
-          ...acc,
-          [`.${className}`]: style,
-        }),
-        {},
-      );
-      return addComponents(typography, variants('aivenTypographyComponent'));
+      return addComponents(typographyComponents, variants('aivenTypographyComponent'));
     }),
 
     plugin(({ addVariant, e }) => {