zammadTailwindPlugin.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
  2. const plugin = require('tailwindcss/plugin')
  3. module.exports = plugin(
  4. ({ addVariant, matchUtilities, theme }) => {
  5. matchUtilities(
  6. {
  7. 'pb-safe': (value) => ({
  8. paddingBottom: `calc(var(--safe-bottom, 0) + ${value})`,
  9. }),
  10. 'mb-safe': (value) => ({
  11. marginBottom: `calc(var(--safe-bottom, 0) + ${value})`,
  12. }),
  13. },
  14. { values: theme('padding') },
  15. )
  16. addVariant('formkit-populated', [
  17. '&[data-populated]',
  18. '[data-populated] &',
  19. '[data-populated]&',
  20. ])
  21. addVariant('formkit-required', [
  22. '&[data-required]',
  23. '[data-required] &',
  24. '[data-required]&',
  25. ])
  26. addVariant('formkit-dirty', [
  27. '&[data-dirty]',
  28. '[data-dirty] &',
  29. '[data-dirty]&',
  30. ])
  31. addVariant('formkit-is-checked', [
  32. '&[data-is-checked]',
  33. '[data-is-checked] &',
  34. '[data-is-checked]&',
  35. ])
  36. addVariant('formkit-label-hidden', [
  37. '&[data-label-hidden]',
  38. '[data-label-hidden] &',
  39. '[data-label-hidden]&',
  40. ])
  41. addVariant('formkit-variant-primary', [
  42. '[data-variant="primary"] &',
  43. '[data-variant="primary"]&',
  44. ])
  45. addVariant('formkit-variant-secondary', [
  46. '[data-variant="secondary"] &',
  47. '[data-variant="secondary"]&',
  48. ])
  49. addVariant('formkit-variant-submit', [
  50. '[data-variant="submit"] &',
  51. '[data-variant="submit"]&',
  52. ])
  53. addVariant('formkit-variant-danger', [
  54. '[data-variant="danger"] &',
  55. '[data-variant="danger"]&',
  56. ])
  57. },
  58. {
  59. theme: {
  60. extend: {
  61. fontFamily: {
  62. sans: [
  63. '"Fira Sans"',
  64. '"Helvetica Neue"',
  65. 'Helvetica',
  66. 'Arial',
  67. 'sans-serif',
  68. ],
  69. },
  70. colors: {
  71. transparent: 'transparent',
  72. current: 'currentColor',
  73. },
  74. minWidth: {
  75. '1/2': '50%',
  76. },
  77. },
  78. },
  79. },
  80. )