@glance-networks/agent-plugin/@glance-design/tailwind-config/dist/tailwind.config.js

Glance Networks Agent Plugin

import resolveConfig from 'tailwindcss/resolveConfig';
import plugin from 'tailwindcss/plugin';
import { typography } from "./tokens/typography.js";
import { InterFontFamily, FiraCodeFontFamily } from "./tailwindUtils/font.js";
import { spacing } from "./tailwindUtils/spacing.js";
import { colorTokens } from "./tailwindUtils/colors.js";
import { shadows } from "./tokens/shadowTokens.js";
import { default as flattenColorPalette } from 'tailwindcss/lib/util/flattenColorPalette';

const tailwindConfig = {
  content: [
    '../../node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}',
    './node_modules/@glance-design/**/**/*.{js,svelte,ts}',
  ],
  theme: {
    extend: {
      colors: colorTokens,
      spacing,
      outlineWidth: {
        3: '3px',
      },
      outlineOffset: {
        3: '3px',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif', 'system-ui', 'ui-sans-serif'],
      },
      maxWidth: {
        'sm': '26rem', // 416px
        'md': '40rem', // 640px
        'lg': '54rem', // 864px
        'xl': '78rem', // 1248px
      },
      lineHeight: {
        '4.5': '1.125rem', // 18px
        '5.5': '1.375rem', // 22px
      },
      boxShadow: shadows,
    },
  },
  plugins: [
    plugin(function ({ addBase }) {
      InterFontFamily.forEach((fontProperties) => {
        addBase(fontProperties);
      });

      FiraCodeFontFamily.forEach((fontProperties) => {
        addBase(fontProperties);
      });
    }),
    plugin(function ({ addUtilities, theme }) {
      /* @ts-expect-error theme */
      addUtilities(typography);

      addUtilities({
        '.scrollbar-thin': {
          'scrollbar-color': '#C1C1C1 transparent',
          'scrollbar-width': 'thin',
        },
        '.fixed-header-row': {
          'position': 'sticky',
          'top': '0',
        },
        '.fixed-first-column': {
          'position': 'sticky',
          'left': '0',
        },
        '.fixed-last-column': {
          'position': 'sticky',
          'right': '0',
        },
        '.first-cell-shadow': {
          'box-shadow': 'inset 10px 0 8px -8px rgba(0, 0, 0, 0.1)',
          'position': 'absolute',
          'content': '""',
          'top': '0',
          'right': '-2.5rem',
          'width': '2.5rem',
          'bottom': '0',
        },
        '.last-cell-shadow': {
          'box-shadow': 'inset -10px 0 8px -8px rgba(0, 0, 0, 0.1)',
          'position': 'absolute',
          'content': '""',
          'top': '0',
          'left': '-2.5rem',
          'width': '2.5rem',
          'bottom': '0',
        },
        '.header-row-shadow': {
          'box-shadow': `inset 0 -0.7px 0px 0 ${theme('colors.neutral-border.bright')}`,
        }
      });
    }),
    plugin(function ({ addUtilities, theme }) {
      const colors = flattenColorPalette(theme('colors'));

      addUtilities({
        ':root':  Object.entries(colors).reduce((acc, [color, value]) => {
          return {
            ...acc,
            [`--gds-color-${color}`]: value,
          };
        }, {}),
      });
    }),
  ],
};

export const { theme } = resolveConfig(tailwindConfig);

export default {
  darkMode: 'selector',
  ...tailwindConfig
};