useSpacing.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import useVars from './useVars.js'
  2. import { getClasses } from '../utils/classes.js'
  3. function useHook() { // useTypography
  4. const { pxs, percents } = useVars()
  5. const Padding = {
  6. title: 'Padding',
  7. classes: getClasses(pxs, {
  8. // name: ['p-', 'px-', 'py-', 'ps-', 'pe-', 'pt-', 'pr-', 'pb-', 'pl-'],
  9. // value: ['padding', 'padding-left, padding-right', 'padding-top, padding-bottom', 'padding-inline-start', 'padding-inline-end', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
  10. name: ['p-', 'px-', 'py-', 'pt-', 'pr-', 'pb-', 'pl-'],
  11. value: ['padding', 'padding-left, padding-right', 'padding-top, padding-bottom', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
  12. })
  13. }
  14. const Margin = {
  15. title: 'Margin',
  16. classes: [
  17. ...getClasses(pxs, {
  18. // name: ['m-', 'mx-', 'my-', 'ms-', 'me-', 'mt-', 'mr-', 'mb-', 'ml-'],
  19. // value: ['margin', 'margin-left, margin-right', 'margin-top, margin-bottom', 'margin-inline-start', 'margin-inline-end', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
  20. name: ['m-', 'mx-', 'my-', 'mt-', 'mr-', 'mb-', 'ml-'],
  21. value: ['margin', 'margin-left, margin-right', 'margin-top, margin-bottom', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
  22. }),
  23. ...getClasses([{name: 'auto', value: 'auto'}], {
  24. name: ['m-', 'mx-', 'my-', 'mt-', 'mr-', 'mb-', 'ml-'],
  25. value: ['margin', 'margin-left, margin-right', 'margin-top, margin-bottom', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
  26. })
  27. ]
  28. }
  29. const SpaceBetween = {
  30. title: 'Space Between',
  31. classes: [
  32. ...getClasses(pxs, {
  33. name: ['space-x-', 'space-y-'],
  34. value: ['margin-left', 'margin-top'],
  35. }),
  36. {name: 'space-x-reverse', value: ['--space-x-reverse: 1']},
  37. {name: 'space-y-reverse', value: ['--space-y-reverse: 1']},
  38. ]
  39. }
  40. return {
  41. Padding,
  42. Margin,
  43. SpaceBetween
  44. }
  45. }
  46. export default useHook