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.
 
 
 

116 line
3.2 KiB

  1. const defaultTheme = require('tailwindcss/defaultTheme')
  2. const {
  3. dropdownSelectPlugin,
  4. menuSelectPlugin,
  5. radioButtonPlugin,
  6. radioTickBoxPlugin,
  7. } = require('@tesseract-design/web-choice-react');
  8. const {
  9. colorPickerPlugin,
  10. } = require('@tesseract-design/web-color-react');
  11. const {
  12. menuMultiSelectPlugin,
  13. tagInputPlugin,
  14. toggleButtonPlugin,
  15. toggleSwitchPlugin,
  16. toggleTickBoxPlugin,
  17. } = require('@tesseract-design/web-multichoice-react');
  18. const {
  19. numberSpinnerPlugin,
  20. sliderPlugin,
  21. } = require('@tesseract-design/web-number-react');
  22. const {
  23. dateDropdownPlugin,
  24. timeSpinnerPlugin,
  25. } = require('@tesseract-design/web-temporal-react');
  26. /** @type {import('tailwindcss').Config} */
  27. module.exports = {
  28. content: [
  29. './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
  30. './src/components/**/*.{js,ts,jsx,tsx,mdx}',
  31. './src/categories/**/*.{js,ts,jsx,tsx,mdx}',
  32. './node_modules/@tesseract-design/web-*-react/dist/**/*.js', // catch-all, can use individual packages
  33. ],
  34. theme: {
  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. 'shade': 'rgb(var(--color-shade))',
  43. 'negative': 'rgb(var(--color-negative))',
  44. 'positive': 'rgb(var(--color-positive))',
  45. 'primary': 'rgb(var(--color-primary))',
  46. 'secondary': 'rgb(var(--color-secondary))',
  47. 'tertiary': 'rgb(var(--color-tertiary))',
  48. 'code-number': 'rgb(var(--color-code-number))',
  49. 'code-keyword': 'rgb(var(--color-code-keyword))',
  50. 'code-type': 'rgb(var(--color-code-type))',
  51. 'code-instance-attribute': 'rgb(var(--color-code-instance-attribute))',
  52. 'code-function': 'rgb(var(--color-code-function))',
  53. 'code-parameter': 'rgb(var(--color-code-parameter))',
  54. 'code-property': 'rgb(var(--color-code-property))',
  55. 'code-string': 'rgb(var(--color-code-string))',
  56. 'code-variable': 'rgb(var(--color-code-variable))',
  57. 'code-regexp': 'rgb(var(--color-code-regexp))',
  58. 'code-url': 'rgb(var(--color-code-url))',
  59. 'code-global': 'rgb(var(--color-code-global))',
  60. 'current': 'currentcolor',
  61. 'inherit': 'inherit',
  62. 'transparent': 'transparent',
  63. },
  64. extend: {
  65. fontSize: {
  66. 'lg': '1.125em',
  67. 'xl': '1.25em',
  68. '2xl': '1.5em',
  69. '3xl': '1.75em',
  70. '4xl': '2em',
  71. '5xl': '3em',
  72. '6xl': '4em',
  73. 'xxs': '0.625rem',
  74. },
  75. borderRadius: {
  76. inherit: 'inherit',
  77. },
  78. minWidth: {
  79. 6: '1.5rem',
  80. 10: '2.5rem',
  81. 12: '3rem',
  82. 16: '4rem',
  83. 48: '12rem',
  84. 64: '16rem',
  85. },
  86. minHeight: {
  87. 6: '1.5rem',
  88. 10: '2.5rem',
  89. 12: '3rem',
  90. 16: '4rem',
  91. 64: '16rem',
  92. },
  93. strokeWidth: {
  94. 3: '3',
  95. },
  96. },
  97. },
  98. plugins: [
  99. colorPickerPlugin,
  100. dateDropdownPlugin,
  101. dropdownSelectPlugin,
  102. menuMultiSelectPlugin,
  103. menuSelectPlugin,
  104. numberSpinnerPlugin,
  105. radioButtonPlugin,
  106. radioTickBoxPlugin,
  107. sliderPlugin,
  108. tagInputPlugin,
  109. timeSpinnerPlugin,
  110. toggleButtonPlugin,
  111. toggleSwitchPlugin,
  112. toggleTickBoxPlugin,
  113. ],
  114. }