useVars.js 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import useSizes from './useSizes.js'
  2. function useHook() { //
  3. const { Pxs, Pcts, Xls } = useSizes()
  4. const pxs = Pxs.map(p => {
  5. return {
  6. name: p.name,
  7. value: `var(--rpx-${p.name})`,
  8. px: p.px,
  9. rpx: p.px == 1 ? 1 : p.px * 2
  10. }
  11. })
  12. const percents = Pcts.map(p => {
  13. return {
  14. name: p.name,
  15. value: `var(--percent-${p.name})`,
  16. percent: typeof p.val == 'string' ? p.val : `${p.val % 1 == 0 ? p.val : p.val.toFixed(6)}%`
  17. }
  18. })
  19. const _borderRadius = 'none: 0, sm: 2, : 4, md: 6, lg: 8, xl: 12, 2xl: 16, 3xl: 24, full: 9999'
  20. const borderRadius = _borderRadius.split(',').map(d => {
  21. let [name, value] = d.split(':').map(d => d.trim())
  22. return {name, value: name ? `var(--rounded-${name})` : `var(--rounded)`, rpx: value * 2}
  23. })
  24. const xls = Xls.map((d) => {
  25. return {
  26. ...d,
  27. value: `var(--text-${d.name})`,
  28. lineHeightValue: `var(--text-${d.name}-lineHeight)`,
  29. rpx: `${d.fontSize * 2}rpx`,
  30. }
  31. })
  32. // 5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95
  33. let opacitys = []
  34. for(let i = 1; i < 20; i ++) {
  35. const _o = i * 5
  36. opacitys.push({
  37. value: `var(--opacity-${_o})`,
  38. calc: `calc(${_o} / 100)`,
  39. opacity: _o / 100,
  40. })
  41. }
  42. // const opacitys = [
  43. // {
  44. // value: 'var(--opacity-50)',
  45. // calc: 'calc(50 / 100)',
  46. // opacity: 50 / 100,
  47. // }
  48. // ]
  49. return {
  50. pxs, percents, border_radius: borderRadius, xls, opacitys
  51. }
  52. }
  53. export default useHook