Design system.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

tailwind.config.ts 3.1 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. import {Config} from 'tailwindcss';
  2. import defaultTheme from 'tailwindcss/defaultTheme';
  3. import plugin from 'tailwindcss/plugin';
  4. import {
  5. radioButtonPlugin,
  6. menuSelectPlugin,
  7. radioTickBoxPlugin,
  8. dropdownSelectPlugin,
  9. } from '../../categories/web/choice/react/src';
  10. import {
  11. colorPickerPlugin,
  12. } from '../../categories/web/color/react/src';
  13. import {
  14. menuMultiSelectPlugin,
  15. tagInputPlugin,
  16. toggleButtonPlugin,
  17. toggleSwitchPlugin,
  18. toggleTickBoxPlugin,
  19. } from '../../categories/web/multichoice/react/src';
  20. import {
  21. numberSpinnerPlugin,
  22. sliderPlugin,
  23. } from '../../categories/web/number/react/src';
  24. import {
  25. dateDropdownPlugin,
  26. timeSpinnerPlugin,
  27. } from '../../categories/web/temporal/react/src';
  28. const config: Config = {
  29. content: [
  30. '../../categories/web/*/react/src/**/*.(ts|tsx)',
  31. './.storybook/**/*.html',
  32. ],
  33. theme: {
  34. // TODO put into a tesseract plugin
  35. fontFamily: {
  36. sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
  37. headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
  38. mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
  39. inherit: ['inherit'],
  40. },
  41. colors: {
  42. 'sidebar': 'rgb(var(--color-sidebar)',
  43. 'topbar': 'rgb(var(--color-topbar)',
  44. 'shade': 'rgb(var(--color-shade))',
  45. 'negative': 'rgb(var(--color-negative))',
  46. 'positive': 'rgb(var(--color-positive))',
  47. 'primary': 'rgb(var(--color-primary))',
  48. 'secondary': 'rgb(var(--color-secondary))',
  49. 'tertiary': 'rgb(var(--color-tertiary))',
  50. 'code-number': 'rgb(var(--color-code-number))',
  51. 'code-keyword': 'rgb(var(--color-code-keyword))',
  52. 'code-type': 'rgb(var(--color-code-type))',
  53. 'code-instance-attribute': 'rgb(var(--color-code-instance-attribute))',
  54. 'code-function': 'rgb(var(--color-code-function))',
  55. 'code-parameter': 'rgb(var(--color-code-parameter))',
  56. 'code-property': 'rgb(var(--color-code-property))',
  57. 'code-string': 'rgb(var(--color-code-string))',
  58. 'code-variable': 'rgb(var(--color-code-variable))',
  59. 'code-regexp': 'rgb(var(--color-code-regexp))',
  60. 'code-url': 'rgb(var(--color-code-url))',
  61. 'code-global': 'rgb(var(--color-code-global))',
  62. 'current': 'currentcolor',
  63. 'inherit': 'inherit',
  64. 'transparent': 'transparent',
  65. },
  66. extend: {
  67. fontSize: {
  68. 'lg': '1.125em',
  69. 'xl': '1.25em',
  70. '2xl': '1.5em',
  71. '3xl': '1.75em',
  72. '4xl': '2em',
  73. '5xl': '3em',
  74. '6xl': '4em',
  75. 'xxs': '0.625rem',
  76. },
  77. borderRadius: {
  78. inherit: 'inherit',
  79. },
  80. minWidth: {
  81. 6: '1.5rem',
  82. 10: '2.5rem',
  83. 12: '3rem',
  84. 16: '4rem',
  85. 48: '12rem',
  86. 64: '16rem',
  87. },
  88. minHeight: {
  89. 6: '1.5rem',
  90. 10: '2.5rem',
  91. 12: '3rem',
  92. 16: '4rem',
  93. 64: '16rem',
  94. },
  95. strokeWidth: {
  96. 3: '3',
  97. },
  98. },
  99. },
  100. plugins: [
  101. plugin(radioButtonPlugin),
  102. plugin(menuSelectPlugin),
  103. plugin(radioTickBoxPlugin),
  104. plugin(dropdownSelectPlugin),
  105. plugin(colorPickerPlugin),
  106. plugin(menuMultiSelectPlugin),
  107. plugin(tagInputPlugin),
  108. plugin(toggleButtonPlugin),
  109. plugin(toggleSwitchPlugin),
  110. plugin(toggleTickBoxPlugin),
  111. plugin(numberSpinnerPlugin),
  112. plugin(sliderPlugin),
  113. plugin(dateDropdownPlugin),
  114. plugin(timeSpinnerPlugin),
  115. ],
  116. };
  117. export default config;