@aivenio/aquarium 0.0.1

package/dist/tailwind.config.js

@@ -0,0 +1,150 @@
+/* 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');
+
+/*
+ * 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',
+});
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  important: true,
+  theme: {
+    extend: {
+      colors: {
+        'navyBlue-100': '#30375E',
+      },
+      zIndex: {
+        modal: '100',
+      },
+    },
+    borderRadius: {
+      ...defaultTheme.borderRadius,
+      DEFAULT: '4px',
+    },
+    colors: { ...theme.colors, transparent: 'transparent', white: 'white', current: 'currentColor' },
+    spacing,
+    margin: {
+      ...spacing,
+      auto: 'auto',
+      ..._.reduce(spacing, (acc, value, key) => ({ ...acc, [`-${key}`]: `-${value}` })),
+    },
+    boxShadow: theme.elevations,
+    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' },
+      },
+    },
+  },
+  // https://tailwindcss.com/docs/configuring-variants#ordering-variants
+  variants: {
+    backgroundColor: ['odd', 'even', 'hover', 'group-hover', 'active', 'disabled', 'focus'],
+    textColor: ['hover', 'hover-save', 'active', 'disabled'],
+    cursor: ['disabled'],
+    borderColor: ['children', 'focus', 'hover', 'hover-save', 'active', 'disabled'],
+    borderWidth: ['focus', 'hover', 'hover-save', 'active', 'disabled'],
+    boxShadow: ['focus', 'hover', 'hover-save'],
+    transitionProperty: ['hover', 'focus'],
+    aivenTypographyComponent: ['focus'],
+    display: ['children'],
+    opacity: ['sibling-input-focus', 'focus'],
+  },
+  extend: {
+    ringWidth: {
+      DEFAULT: '2px',
+      1: '1px',
+      2: '2px',
+    },
+  },
+  content: ['./src/**/*.tsx', './src/**/*.ts'],
+  safelist: [...theme.typography.sizes.map((s) => s.className), ...Object.keys(theme.colors).map((s) => `text-${s}`)],
+  plugins: [
+    require('tailwindcss-children'),
+
+    plugin(({ addVariant, e }) => {
+      addVariant('hover-save', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`hover-save${separator}${className}`)}:hover:not(:disabled)`;
+        });
+      });
+    }),
+
+    plugin(({ addComponents, variants }) => {
+      const typography = theme.typography.sizes.reduce(
+        (acc, { className, style }) => ({
+          ...acc,
+          [`.${className}`]: style,
+        }),
+        {},
+      );
+      return addComponents(typography, variants('aivenTypographyComponent'));
+    }),
+
+    plugin(({ addVariant, e }) => {
+      addVariant('sibling-input-focus', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          const eClassName = e(`sibling-input-focus${separator}${className}`);
+          return `input:focus ~ * .${eClassName}`;
+        });
+      });
+    }),
+
+    plugin(({ addUtilities }) => {
+      addUtilities(
+        {
+          '.scrollbar-hide': {
+            /* IE and Edge */
+            '-ms-overflow-style': 'none',
+
+            /* Firefox */
+            'scrollbar-width': 'none',
+
+            /* Safari and Chrome */
+            '&::-webkit-scrollbar': {
+              display: 'none',
+            },
+          },
+
+          '.scrollbar-default': {
+            /* IE and Edge */
+            '-ms-overflow-style': 'auto',
+
+            /* Firefox */
+            'scrollbar-width': 'auto',
+
+            /* Safari and Chrome */
+            '&::-webkit-scrollbar': {
+              display: 'block',
+            },
+          },
+        },
+        ['responsive'],
+      );
+    }),
+  ],
+};

package/dist/tailwind.theme.json

@@ -0,0 +1,520 @@
+{
+  "screens": {
+    "default": "0px",
+    "xs": "320px",
+    "sm": "672px",
+    "md": "1056px",
+    "lg": "1312px",
+    "xl": "1536px"
+  },
+  "order": {
+    "1": "1",
+    "2": "2",
+    "3": "3",
+    "4": "4",
+    "5": "5",
+    "6": "6",
+    "7": "7",
+    "8": "8",
+    "9": "9",
+    "10": "10",
+    "11": "11",
+    "12": "12",
+    "first": "-9999",
+    "last": "9999",
+    "none": "0"
+  },
+  "spacing": {
+    "0": "0",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    "l1": "16px",
+    "l2": "24px",
+    "l3": "32px",
+    "l4": "48px",
+    "l5": "64px",
+    "l6": "96px",
+    "l7": "160px"
+  },
+  "margin": {
+    "0": "0",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    "l1": "16px",
+    "l2": "24px",
+    "l3": "32px",
+    "l4": "48px",
+    "l5": "64px",
+    "l6": "96px",
+    "l7": "160px",
+    "auto": "auto",
+    "-1": "-2px",
+    "-2": "-4px",
+    "-3": "-8px",
+    "-4": "-12px",
+    "-5": "-16px",
+    "-6": "-24px",
+    "-7": "-32px",
+    "-8": "-40px",
+    "-9": "-48px",
+    "-1px": "-1px",
+    "-l1": "-16px",
+    "-l2": "-24px",
+    "-l3": "-32px",
+    "-l4": "-48px",
+    "-l5": "-64px",
+    "-l6": "-96px",
+    "-l7": "-160px"
+  },
+  "padding": {
+    "0": "0",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    "l1": "16px",
+    "l2": "24px",
+    "l3": "32px",
+    "l4": "48px",
+    "l5": "64px",
+    "l6": "96px",
+    "l7": "160px"
+  },
+  "width": {
+    "0": "0",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "auto": "auto",
+    "1px": "1px",
+    "l1": "16px",
+    "l2": "24px",
+    "l3": "32px",
+    "l4": "48px",
+    "l5": "64px",
+    "l6": "96px",
+    "l7": "160px",
+    "1/2": "50%",
+    "1/3": "33.333333%",
+    "2/3": "66.666667%",
+    "1/4": "25%",
+    "2/4": "50%",
+    "3/4": "75%",
+    "1/5": "20%",
+    "2/5": "40%",
+    "3/5": "60%",
+    "4/5": "80%",
+    "1/6": "16.666667%",
+    "2/6": "33.333333%",
+    "3/6": "50%",
+    "4/6": "66.666667%",
+    "5/6": "83.333333%",
+    "1/12": "8.333333%",
+    "2/12": "16.666667%",
+    "3/12": "25%",
+    "4/12": "33.333333%",
+    "5/12": "41.666667%",
+    "6/12": "50%",
+    "7/12": "58.333333%",
+    "8/12": "66.666667%",
+    "9/12": "75%",
+    "10/12": "83.333333%",
+    "11/12": "91.666667%",
+    "full": "100%",
+    "screen": "100vw",
+    "min": "min-content",
+    "max": "max-content",
+    "fit": "fit-content"
+  },
+  "height": {
+    "0": "0",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "auto": "auto",
+    "1px": "1px",
+    "l1": "16px",
+    "l2": "24px",
+    "l3": "32px",
+    "l4": "48px",
+    "l5": "64px",
+    "l6": "96px",
+    "l7": "160px",
+    "1/2": "50%",
+    "1/3": "33.333333%",
+    "2/3": "66.666667%",
+    "1/4": "25%",
+    "2/4": "50%",
+    "3/4": "75%",
+    "1/5": "20%",
+    "2/5": "40%",
+    "3/5": "60%",
+    "4/5": "80%",
+    "1/6": "16.666667%",
+    "2/6": "33.333333%",
+    "3/6": "50%",
+    "4/6": "66.666667%",
+    "5/6": "83.333333%",
+    "full": "100%",
+    "screen": "100vh",
+    "min": "min-content",
+    "max": "max-content",
+    "fit": "fit-content"
+  },
+  "maxWidth": {
+    "0": "0rem",
+    "none": "none",
+    "xs": "20rem",
+    "sm": "24rem",
+    "md": "28rem",
+    "lg": "32rem",
+    "xl": "36rem",
+    "2xl": "42rem",
+    "3xl": "48rem",
+    "4xl": "56rem",
+    "5xl": "64rem",
+    "6xl": "72rem",
+    "7xl": "80rem",
+    "full": "100%",
+    "min": "min-content",
+    "max": "max-content",
+    "fit": "fit-content",
+    "prose": "65ch",
+    "screen-default": "0px",
+    "screen-xs": "320px",
+    "screen-sm": "672px",
+    "screen-md": "1056px",
+    "screen-lg": "1312px",
+    "screen-xl": "1536px"
+  },
+  "maxHeight": {
+    "0": "0",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    "l1": "16px",
+    "l2": "24px",
+    "l3": "32px",
+    "l4": "48px",
+    "l5": "64px",
+    "l6": "96px",
+    "l7": "160px",
+    "full": "100%",
+    "screen": "100vh",
+    "min": "min-content",
+    "max": "max-content",
+    "fit": "fit-content"
+  },
+  "minWidth": {
+    "0": "0px",
+    "full": "100%",
+    "min": "min-content",
+    "max": "max-content",
+    "fit": "fit-content"
+  },
+  "minHeight": {
+    "0": "0px",
+    "full": "100%",
+    "screen": "100vh",
+    "min": "min-content",
+    "max": "max-content",
+    "fit": "fit-content"
+  },
+  "flex": {
+    "1": "1 1 0%",
+    "auto": "1 1 auto",
+    "initial": "0 1 auto",
+    "none": "none"
+  },
+  "flexGrow": {"0": "0", "DEFAULT": "1"},
+  "flexShrink": {"0": "0", "DEFAULT": "1"},
+  "backgroundColor": {
+    "error-100": "#aa0000",
+    "error-90": "#b90000",
+    "error-80": "#c50001",
+    "error-70": "#d80005",
+    "error-60": "#e70000",
+    "error-50": "#e62728",
+    "error-40": "#e0504f",
+    "error-30": "#ed7975",
+    "error-20": "#ffadb3",
+    "error-10": "#ffcbd2",
+    "error-5": "#fee8e7",
+    "error-0": "#fef2f1",
+    "warning-100": "#fe6d00",
+    "warning-90": "#ff9003",
+    "warning-80": "#fd9f00",
+    "warning-70": "#ffb300",
+    "warning-60": "#ffc107",
+    "warning-50": "#fdc926",
+    "warning-40": "#fdd44d",
+    "warning-30": "#fddf81",
+    "warning-20": "#feebb2",
+    "warning-10": "#fff2cd",
+    "warning-5": "#fff8ea",
+    "warning-0": "#fffdf9",
+    "success-100": "#006f00",
+    "success-90": "#008e00",
+    "success-80": "#009f00",
+    "success-70": "#00b300",
+    "success-60": "#00c300",
+    "success-50": "#40ce37",
+    "success-40": "#60db57",
+    "success-30": "#89eb80",
+    "success-20": "#afffa7",
+    "success-10": "#cbffc9",
+    "success-5": "#ecf7ed",
+    "success-0": "#f5faf5",
+    "info-100": "#02569a",
+    "info-90": "#0174ba",
+    "info-80": "#0788d1",
+    "info-70": "#0399e3",
+    "info-60": "#02a8f3",
+    "info-50": "#28b4f4",
+    "info-40": "#4cc2f7",
+    "info-30": "#7fd1f7",
+    "info-20": "#b4e5fb",
+    "info-10": "#e0f5fe",
+    "info-5": "#effaff",
+    "info-0": "#f9fdff",
+    "grey-100": "#19191d",
+    "grey-90": "#292a31",
+    "grey-80": "#3a3a44",
+    "grey-70": "#4a4b57",
+    "grey-60": "#5a5b6a",
+    "grey-50": "#787885",
+    "grey-40": "#9696a0",
+    "grey-30": "#b4b4bb",
+    "grey-10": "#e1e1e3",
+    "grey-5": "#ededf0",
+    "grey-0": "#f7f7fa",
+    "secondary-100": "#e11d16",
+    "secondary-90": "#eb4610",
+    "secondary-80": "#f3580d",
+    "secondary-70": "#f96a02",
+    "secondary-60": "#ff7700",
+    "secondary-50": "#fc871a",
+    "secondary-40": "#fb9a3e",
+    "secondary-30": "#fab26e",
+    "secondary-20": "#f8c99c",
+    "secondary-10": "#fee8d0",
+    "secondary-5": "#fff3e8",
+    "secondary-0": "#fffbf8",
+    "primary-100": "#a70045",
+    "primary-90": "#c60443",
+    "primary-80": "#e41a4a",
+    "primary-70": "#ff3554",
+    "primary-60": "#ff5275",
+    "primary-50": "#ff6f94",
+    "primary-40": "#ff8db0",
+    "primary-30": "#ffa9c9",
+    "primary-20": "#ffc4de",
+    "primary-10": "#ffdeef",
+    "primary-5": "#ffe8f4",
+    "primary-0": "#fff9fc",
+    "grey-20": "#d2d2d6",
+    "transparent": "transparent",
+    "white": "white",
+    "current": "currentColor",
+    "navyBlue-100": "#30375E"
+  },
+  "gap": {
+    "0": "0",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    "l1": "16px",
+    "l2": "24px",
+    "l3": "32px",
+    "l4": "48px",
+    "l5": "64px",
+    "l6": "96px",
+    "l7": "160px"
+  },
+  "gridAutoColumns": {
+    "auto": "auto",
+    "min": "min-content",
+    "max": "max-content",
+    "fr": "minmax(0, 1fr)"
+  },
+  "gridAutoRows": {
+    "auto": "auto",
+    "min": "min-content",
+    "max": "max-content",
+    "fr": "minmax(0, 1fr)"
+  },
+  "gridColumn": {
+    "auto": "auto",
+    "span-1": "span 1 / span 1",
+    "span-2": "span 2 / span 2",
+    "span-3": "span 3 / span 3",
+    "span-4": "span 4 / span 4",
+    "span-5": "span 5 / span 5",
+    "span-6": "span 6 / span 6",
+    "span-7": "span 7 / span 7",
+    "span-8": "span 8 / span 8",
+    "span-9": "span 9 / span 9",
+    "span-10": "span 10 / span 10",
+    "span-11": "span 11 / span 11",
+    "span-12": "span 12 / span 12",
+    "span-full": "1 / -1"
+  },
+  "gridColumnEnd": {
+    "1": "1",
+    "2": "2",
+    "3": "3",
+    "4": "4",
+    "5": "5",
+    "6": "6",
+    "7": "7",
+    "8": "8",
+    "9": "9",
+    "10": "10",
+    "11": "11",
+    "12": "12",
+    "13": "13",
+    "auto": "auto"
+  },
+  "gridColumnStart": {
+    "1": "1",
+    "2": "2",
+    "3": "3",
+    "4": "4",
+    "5": "5",
+    "6": "6",
+    "7": "7",
+    "8": "8",
+    "9": "9",
+    "10": "10",
+    "11": "11",
+    "12": "12",
+    "13": "13",
+    "auto": "auto"
+  },
+  "gridRow": {
+    "auto": "auto",
+    "span-1": "span 1 / span 1",
+    "span-2": "span 2 / span 2",
+    "span-3": "span 3 / span 3",
+    "span-4": "span 4 / span 4",
+    "span-5": "span 5 / span 5",
+    "span-6": "span 6 / span 6",
+    "span-full": "1 / -1"
+  },
+  "gridRowStart": {
+    "1": "1",
+    "2": "2",
+    "3": "3",
+    "4": "4",
+    "5": "5",
+    "6": "6",
+    "7": "7",
+    "auto": "auto"
+  },
+  "gridRowEnd": {
+    "1": "1",
+    "2": "2",
+    "3": "3",
+    "4": "4",
+    "5": "5",
+    "6": "6",
+    "7": "7",
+    "auto": "auto"
+  },
+  "gridTemplateColumns": {
+    "1": "repeat(1, minmax(0, 1fr))",
+    "2": "repeat(2, minmax(0, 1fr))",
+    "3": "repeat(3, minmax(0, 1fr))",
+    "4": "repeat(4, minmax(0, 1fr))",
+    "5": "repeat(5, minmax(0, 1fr))",
+    "6": "repeat(6, minmax(0, 1fr))",
+    "7": "repeat(7, minmax(0, 1fr))",
+    "8": "repeat(8, minmax(0, 1fr))",
+    "9": "repeat(9, minmax(0, 1fr))",
+    "10": "repeat(10, minmax(0, 1fr))",
+    "11": "repeat(11, minmax(0, 1fr))",
+    "12": "repeat(12, minmax(0, 1fr))",
+    "none": "none"
+  },
+  "gridTemplateRows": {
+    "1": "repeat(1, minmax(0, 1fr))",
+    "2": "repeat(2, minmax(0, 1fr))",
+    "3": "repeat(3, minmax(0, 1fr))",
+    "4": "repeat(4, minmax(0, 1fr))",
+    "5": "repeat(5, minmax(0, 1fr))",
+    "6": "repeat(6, minmax(0, 1fr))",
+    "none": "none"
+  },
+  "keyframes": {
+    "spin": {"to": {"transform": "rotate(360deg)"}},
+    "ping": {"75%, 100%": {"transform": "scale(2)", "opacity": "0"}},
+    "pulse": {"50%": {"opacity": ".5"}},
+    "bounce": {
+      "0%, 100%": {
+        "transform": "translateY(-25%)",
+        "animationTimingFunction": "cubic-bezier(0.8,0,1,1)"
+      },
+      "50%": {
+        "transform": "none",
+        "animationTimingFunction": "cubic-bezier(0,0,0.2,1)"
+      }
+    },
+    "positioner-fade-in": {"from": {"opacity": "0"}, "to": {"opacity": "1"}}
+  },
+  "animation": {
+    "none": "none",
+    "spin": "spin 1s linear infinite",
+    "ping": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
+    "pulse": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+    "bounce": "bounce 1s infinite",
+    "positioner-fade-in": "positioner-fade-in 300ms ease-in-out"
+  }
+}