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.
 
 
 

158 lines
4.3 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. const {
  27. tailwind
  28. } = require('@tesseract-design/viewfinder-base');
  29. const plugin = require('tailwindcss/plugin')
  30. const tesseractPlugin = plugin(
  31. ({ addUtilities }) => {
  32. addUtilities({
  33. '.font-condensed': {
  34. 'font-stretch': 'condensed',
  35. },
  36. '.font-semi-condensed': {
  37. 'font-stretch': 'semi-condensed',
  38. },
  39. '.font-expanded': {
  40. 'font-stretch': 'expanded',
  41. },
  42. '.font-semi-expanded': {
  43. 'font-stretch': 'semi-expanded',
  44. },
  45. '.font-inherit': {
  46. 'font-stretch': 'inherit',
  47. },
  48. '.linejoin-round': {
  49. 'stroke-linejoin': 'round',
  50. },
  51. '.linecap-round': {
  52. 'stroke-linecap': 'round',
  53. },
  54. });
  55. },
  56. {
  57. theme: {
  58. fontFamily: {
  59. sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
  60. headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
  61. mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
  62. inherit: ['inherit'],
  63. },
  64. colors: {
  65. 'sidebar': 'rgb(var(--color-sidebar)',
  66. 'topbar': 'rgb(var(--color-topbar)',
  67. 'shade': 'rgb(var(--color-shade))',
  68. 'negative': 'rgb(var(--color-negative))',
  69. 'positive': 'rgb(var(--color-positive))',
  70. 'primary': 'rgb(var(--color-primary))',
  71. 'secondary': 'rgb(var(--color-secondary))',
  72. 'tertiary': 'rgb(var(--color-tertiary))',
  73. 'code-number': 'rgb(var(--color-code-number))',
  74. 'code-keyword': 'rgb(var(--color-code-keyword))',
  75. 'code-type': 'rgb(var(--color-code-type))',
  76. 'code-instance-attribute': 'rgb(var(--color-code-instance-attribute))',
  77. 'code-function': 'rgb(var(--color-code-function))',
  78. 'code-parameter': 'rgb(var(--color-code-parameter))',
  79. 'code-property': 'rgb(var(--color-code-property))',
  80. 'code-string': 'rgb(var(--color-code-string))',
  81. 'code-variable': 'rgb(var(--color-code-variable))',
  82. 'code-regexp': 'rgb(var(--color-code-regexp))',
  83. 'code-url': 'rgb(var(--color-code-url))',
  84. 'code-global': 'rgb(var(--color-code-global))',
  85. 'current': 'currentcolor',
  86. 'inherit': 'inherit',
  87. 'transparent': 'transparent',
  88. },
  89. extend: {
  90. fontSize: {
  91. 'lg': '1.125em',
  92. 'xl': '1.25em',
  93. '2xl': '1.5em',
  94. '3xl': '1.75em',
  95. '4xl': '2em',
  96. '5xl': '3em',
  97. '6xl': '4em',
  98. 'xxs': '0.625rem',
  99. },
  100. borderRadius: {
  101. inherit: 'inherit',
  102. },
  103. minWidth: {
  104. 6: '1.5rem',
  105. 10: '2.5rem',
  106. 12: '3rem',
  107. 16: '4rem',
  108. 48: '12rem',
  109. 64: '16rem',
  110. },
  111. minHeight: {
  112. 6: '1.5rem',
  113. 10: '2.5rem',
  114. 12: '3rem',
  115. 16: '4rem',
  116. 64: '16rem',
  117. },
  118. strokeWidth: {
  119. 3: '3',
  120. },
  121. },
  122. },
  123. },
  124. );
  125. /** @type {import('tailwindcss').Config} */
  126. module.exports = {
  127. content: [
  128. './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
  129. './src/components/**/*.{js,ts,jsx,tsx,mdx}',
  130. './src/content/**/*.{js,ts,jsx,tsx,mdx}',
  131. './node_modules/@tesseract-design/viewfinder-react/dist/**/*.js',
  132. './node_modules/@tesseract-design/web-*-react/dist/**/*.js', // catch-all, can use individual packages
  133. ],
  134. plugins: [
  135. tailwind.plugin(),
  136. tesseractPlugin,
  137. colorPickerPlugin,
  138. dateDropdownPlugin,
  139. dropdownSelectPlugin,
  140. menuMultiSelectPlugin,
  141. menuSelectPlugin,
  142. numberSpinnerPlugin,
  143. radioButtonPlugin,
  144. radioTickBoxPlugin,
  145. sliderPlugin,
  146. tagInputPlugin,
  147. timeSpinnerPlugin,
  148. toggleButtonPlugin,
  149. toggleSwitchPlugin,
  150. toggleTickBoxPlugin,
  151. ],
  152. }