@chrome-consulting/krit-ui 0.0.49

package/tailwind.config.cjs

@@ -0,0 +1,273 @@
+/* eslint-env node */
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['selector'], // https://ui.shadcn.com/docs/dark-mode/vite
+  safelist: ['dark'], // https://github.com/shadcn-ui/ui/issues/313#issuecomment-1929054475
+  content: ['./lib/**/*.{ts,tsx}'],
+  theme: {
+    fontFamily: {
+      sans: ['Roboto', 'ui-sans-serif', 'system-ui'],
+      display: ['Roboto'],
+      body: ['Roboto'],
+    },
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    colors: {
+      background: {
+        DEFAULT: 'hsl(var(--krit-background-primary))',
+        primary: 'hsl(var(--krit-background-primary))',
+        'primary-hover': 'hsl(var(--krit-background-states-primary-hover))',
+        'primary-selected': 'hsl(var(--krit-background-states-primary-selected))',
+        secondary: 'hsl(var(--krit-background-secondary))',
+        'secondary-hover': 'hsl(var(--krit-background-states-secondary-hover))',
+        tertiary: 'hsl(var(--krit-background-tertiary))',
+        quaternary: 'hsl(var(--krit-background-quaternary))',
+        theme: 'hsl(var(--krit-background-theme))',
+        'theme-hover': 'hsl(var(--krit-background-states-theme-hover))',
+        'theme-selected': 'hsl(var(--krit-background-states-theme-selected))',
+        'theme-disabled': 'hsl(var(--krit-background-states-theme-disabled))',
+        'theme-fade': 'hsl(var(--krit-background-theme-fade))',
+        /** Background states / Theme-fade / disabled (fallback на contrast-fade-disabled, если токен не задан в теме). */
+        'theme-fade-disabled':
+          'hsl(var(--krit-background-states-theme-fade-disabled, var(--krit-background-states-contrast-fade-disabled)))',
+        contrast: 'hsl(var(--krit-background-contrast))',
+        'contrast-hover': 'hsl(var(--krit-background-states-contrast-hover))',
+        'contrast-disabled': 'hsl(var(--krit-background-states-contrast-disabled))',
+        'contrast-selected': 'hsl(var(--krit-background-states-contrast-selected))',
+        'contrast-fade': 'hsl(var(--krit-background-contrast-fade))',
+        'contrast-fade-hover': 'hsl(var(--krit-background-states-contrast-fade-hover))',
+        'contrast-fade-selected': 'hsl(var(--krit-background-states-contrast-fade-selected))',
+        'contrast-fade-disabled': 'hsl(var(--krit-background-states-contrast-fade-disabled))',
+        error: 'hsl(var(--krit-background-error))',
+        'error-hover': 'hsl(var(--krit-background-states-error-hover))',
+        'error-fade': 'hsl(var(--krit-background-error-fade))',
+        'error-fade-hover': 'hsl(var(--krit-background-states-error-fade-hover))',
+        'error-tertiary': 'hsl(var(--krit-background-error-tertiary))',
+        warning: 'hsl(var(--krit-background-warning))',
+        'warning-hover': 'hsl(var(--krit-background-states-warning-hover))',
+        'warning-fade': 'hsl(var(--krit-background-warning-fade))',
+        'warning-fade-hover': 'hsl(var(--krit-background-states-warning-fade-hover))',
+        success: 'hsl(var(--krit-background-success))',
+        'success-hover': 'hsl(var(--krit-background-states-success-hover))',
+        'success-tertiary': 'hsl(var(--krit-background-success-tertiary))',
+        'success-fade': 'hsl(var(--krit-background-success-fade))',
+        'success-fade-hover': 'hsl(var(--krit-background-states-success-fade-hover))',
+        overlay: 'hsl(var(--krit-background-overlay))', // TODO: Add 0.6 opacity
+        sidebar: 'hsl(var(--krit-background-sidebar))',
+      },
+      foreground: {
+        DEFAULT: 'hsl(var(--krit-foreground-primary))',
+        primary: 'hsl(var(--krit-foreground-primary))',
+        'primary-disabled': 'hsl(var(--krit-foreground-states-primary-disabled))',
+        secondary: 'hsl(var(--krit-foreground-secondary))',
+        tertiary: 'hsl(var(--krit-foreground-tertiary))',
+        quaternary: 'hsl(var(--krit-foreground-quaternary))',
+        theme: 'hsl(var(--krit-foreground-theme))',
+        'on-contrast': 'hsl(var(--krit-foreground-on-contrast))',
+        'on-contrast-disabled': 'hsl(var(--krit-foreground-states-on-contrast-disabled))',
+        error: 'hsl(var(--krit-foreground-error))',
+        link: 'hsl(var(--krit-foreground-link))',
+        warning: 'hsl(var(--krit-foreground-warning))',
+        success: 'hsl(var(--krit-foreground-success))',
+        white: 'hsl(var(--krit-foreground-white))',
+        'sidebar-active': 'hsl(var(--krit-foreground-states-sidebar-active))',
+      },
+      line: {
+        DEFAULT: 'hsl(var(--krit-line-primary))',
+        primary: 'hsl(var(--krit-line-primary))',
+        'primary-hover': 'hsl(var(--krit-line-states-primary-hover))',
+        'primary-disabled': 'hsl(var(--krit-line-states-primary-disabled))',
+        secondary: 'hsl(var(--krit-line-secondary))',
+        error: 'hsl(var(--krit-line-error))',
+        warning: 'hsl(var(--krit-line-warning))',
+        success: 'hsl(var(--krit-line-success))',
+        theme: 'hsl(var(--krit-line-theme))',
+        contrast: 'hsl(var(--krit-line-contrast))',
+        focused: 'hsl(var(--krit-line-states-primary-focused))',
+        sidebar: 'hsl(var(--krit-line-sidebar))',
+      },
+      icon: {
+        contrast: 'hsl(var(--krit-icon-contrast))',
+        'contrast-disabled': 'hsl(var(--krit-icon-states-contrast-disabled))',
+        'fade-contrast': 'hsl(var(--krit-icon-fade-contrast))',
+        'on-contrast': 'hsl(var(--krit-icon-on-contrast))',
+        'on-contrast-selected': 'hsl(var(--krit-icon-states-on-contrast-selected))',
+        'on-contrast-disabled': 'hsl(var(--krit-icon-states-on-contrast-disabled))',
+        sidebar: 'hsl(var(--krit-icon-sidebar))',
+        'sidebar-active': 'hsl(var(--krit-icon-states-sidebar-active))',
+        'sidebar-hover': 'hsl(var(--krit-icon-states-sidebar-hover))',
+        theme: 'hsl(var(--krit-icon-theme))',
+        error: 'hsl(var(--krit-icon-error))',
+        warning: 'hsl(var(--krit-icon-warning))',
+        success: 'hsl(var(--krit-icon-success))',
+      },
+      badge: {
+        background: {
+          assigned: 'hsl(var(--krit-badge-background-assigned))',
+          created: 'hsl(var(--krit-badge-background-created))',
+          done: 'hsl(var(--krit-badge-background-done))',
+          draft: 'hsl(var(--krit-badge-background-draft))',
+          'in-progress': 'hsl(var(--krit-badge-background-in-progress))',
+          'not-started': 'hsl(var(--krit-badge-background-not-started))',
+          partially: 'hsl(var(--krit-badge-background-partially))',
+          paused: 'hsl(var(--krit-badge-background-paused))',
+          rejected: 'hsl(var(--krit-badge-background-rejected))',
+        },
+        foreground: {
+          assigned: 'hsl(var(--krit-badge-foreground-assigned))',
+          created: 'hsl(var(--krit-badge-foreground-created))',
+          done: 'hsl(var(--krit-badge-foreground-done))',
+          draft: 'hsl(var(--krit-badge-foreground-draft))',
+          'in-progress': 'hsl(var(--krit-badge-foreground-in-progress))',
+          'not-started': 'hsl(var(--krit-badge-foreground-not-started))',
+          partially: 'hsl(var(--krit-badge-foreground-partially))',
+          paused: 'hsl(var(--krit-badge-foreground-paused))',
+          rejected: 'hsl(var(--krit-badge-foreground-rejected))',
+        },
+        icon: {
+          assigned: 'hsl(var(--krit-badge-icon-assigned))',
+          created: 'hsl(var(--krit-badge-icon-created))',
+          done: 'hsl(var(--krit-badge-icon-done))',
+          draft: 'hsl(var(--krit-badge-icon-draft))',
+          'in-progress': 'hsl(var(--krit-badge-icon-in-progress))',
+          'not-started': 'hsl(var(--krit-badge-icon-not-started))',
+          partially: 'hsl(var(--krit-badge-icon-partially))',
+          paused: 'hsl(var(--krit-badge-icon-paused))',
+          rejected: 'hsl(var(--krit-badge-icon-rejected))',
+        },
+        line: {
+          assigned: 'hsl(var(--krit-badge-line-assigned))',
+          created: 'hsl(var(--krit-badge-line-created))',
+          done: 'hsl(var(--krit-badge-line-done))',
+          draft: 'hsl(var(--krit-badge-line-draft))',
+          'in-progress': 'hsl(var(--krit-badge-line-in-progress))',
+          'not-started': 'hsl(var(--krit-badge-line-not-started))',
+          partially: 'hsl(var(--krit-badge-line-partially))',
+          paused: 'hsl(var(--krit-badge-line-paused))',
+          rejected: 'hsl(var(--krit-badge-line-rejected))',
+        },
+        priority: {
+          another: 'hsl(var(--krit-badge-priority-another))',
+          high: 'hsl(var(--krit-badge-priority-high))',
+          low: 'hsl(var(--krit-badge-priority-low))',
+          middle: 'hsl(var(--krit-badge-priority-middle))',
+          'no-priority': 'hsl(var(--krit-badge-priority-no-priority))',
+        },
+      },
+      purple: 'hsl(var(--krit-purple))',
+    },
+    extend: {
+      boxShadow: {
+        base: '0px 0px 1px 0px rgba(0, 0, 0, 0.04), 0px 0px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.04)',
+        float: '0px 2px 24px 0px rgba(0, 0, 0, 0.08), 0px 0px 2px 0px rgba(0, 0, 0, 0.08)',
+        tooltip: '0px 4px 32px 0px rgba(0, 0, 0, 0.16), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)',
+        'bottom-menu': '0px -4px 10px 0px rgba(0, 0, 0, 0.05)',
+        switch: '0 1px 10px 0 rgba(0, 0, 0, 0.20)',
+      },
+      colors: {
+        border: 'hsl(var(--krit-border))',
+        icon: {
+          DEFAULT: 'hsl(var(--krit-icon))',
+          secondary: 'hsl(var(--krit-icon-secondary))',
+          tertiary: 'hsl(var(--krit-icon-tertiary))',
+        },
+        input: 'hsl(var(--krit-input))',
+        ring: 'hsl(var(--krit-ring))',
+        primary: {
+          DEFAULT: 'hsl(var(--krit-primary))',
+          foreground: 'hsl(var(--krit-primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--krit-secondary))',
+          foreground: 'hsl(var(--krit-secondary-foreground) / 0.5)',
+        },
+        contrast: 'hsl(var(--krit-contrast))',
+        'contrast-fade': 'hsl(var(--krit-contrast-fade))',
+        'contrast-fade-selected': 'hsl(var(--krit-contrast-fade-selected))',
+        'on-contrast': 'hsl(var(--krit-on-contrast))',
+
+        destructive: {
+          DEFAULT: 'hsl(var(--krit-destructive))',
+          foreground: 'hsl(var(--krit-destructive-foreground))',
+        },
+        success: {
+          DEFAULT: 'hsl(var(--krit-success))',
+          foreground: 'hsl(var(--krit-success-foreground))',
+          tertiary: 'hsl(var(--krit-success-tertiary))',
+        },
+        pale: {
+          DEFAULT: 'hsl(var(--krit-pale))',
+          foreground: 'hsl(var(--krit-pale-foreground))',
+        },
+        grey: {
+          DEFAULT: 'hsl(var(--krit-grey))',
+          foreground: 'hsl(var(--krit-grey-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--krit-muted))',
+          foreground: 'hsl(var(--krit-muted-foreground))',
+        },
+        'tertiary-foreground': 'hsl(var(--krit-tertiary-foreground))',
+        accent: {
+          DEFAULT: 'hsl(var(--krit-accent))',
+          foreground: 'hsl(var(--krit-accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--krit-popover))',
+          foreground: 'hsl(var(--krit-popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--krit-card))',
+          foreground: 'hsl(var(--krit-card-foreground))',
+          border: 'hsl(var(--krit-card-border))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--krit-radius)',
+        md: 'calc(var(--krit-radius) - 2px)',
+        sm: 'calc(var(--krit-radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: 0 },
+          to: { height: 'var(--krit-radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--krit-radix-accordion-content-height)' },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+      backgroundImage: {
+        'background-error-gradient': 'var(--krit-background-error-gradient)',
+        'background-success-gradient': 'var(--krit-background-success-gradient)',
+        'background-progress-gradient': 'var(--krit-background-progress-gradient)',
+        'background-transparent-gradient': 'var(--krit-background-transparent-gradient)',
+        'gradient-primary': 'linear-gradient(100deg, #56CCF2 0.13%, #2F80ED 124.93%)',
+        'gradient-base': 'var(--krit-gradient-base)',
+        'gradient-fade-to-bottom': 'var(--krit-gradient-fade-to-bottom)',
+        'gradient-fade-to-top': 'var(--krit-gradient-fade-to-top)',
+        'fade-to-right':
+          'linear-gradient(90deg, hsl(var(--krit-background-primary) / 0) 0%, hsl(var(--krit-background-primary)) 100%)',
+        'fade-to-left':
+          'linear-gradient(90deg, hsl(var(--krit-background-primary)) 0%, hsl(var(--krit-background-primary) / 0) 100%)',
+      },
+      transitionProperty: {
+        height: 'height',
+      },
+      gridTemplateColumns: {
+        user: '1fr 5fr 2fr 3fr 2fr 4fr',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};