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.

806 lines
19 KiB

7 months ago
  1. // Utilities
  2. $utilities: () !default;
  3. // stylelint-disable-next-line scss/dollar-variable-default
  4. $utilities: map-merge(
  5. (
  6. // scss-docs-start utils-vertical-align
  7. "align": (
  8. property: vertical-align,
  9. class: align,
  10. values: baseline top middle bottom text-bottom text-top
  11. ),
  12. // scss-docs-end utils-vertical-align
  13. // scss-docs-start utils-float
  14. "float": (
  15. responsive: true,
  16. property: float,
  17. values: (
  18. start: left,
  19. end: right,
  20. none: none,
  21. )
  22. ),
  23. // scss-docs-end utils-float
  24. // Object Fit utilities
  25. // scss-docs-start utils-object-fit
  26. "object-fit": (
  27. responsive: true,
  28. property: object-fit,
  29. values: (
  30. contain: contain,
  31. cover: cover,
  32. fill: fill,
  33. scale: scale-down,
  34. none: none,
  35. )
  36. ),
  37. // scss-docs-end utils-object-fit
  38. // Opacity utilities
  39. // scss-docs-start utils-opacity
  40. "opacity": (
  41. property: opacity,
  42. values: (
  43. 0: 0,
  44. 25: .25,
  45. 50: .5,
  46. 75: .75,
  47. 100: 1,
  48. )
  49. ),
  50. // scss-docs-end utils-opacity
  51. // scss-docs-start utils-overflow
  52. "overflow": (
  53. property: overflow,
  54. values: auto hidden visible scroll,
  55. ),
  56. "overflow-x": (
  57. property: overflow-x,
  58. values: auto hidden visible scroll,
  59. ),
  60. "overflow-y": (
  61. property: overflow-y,
  62. values: auto hidden visible scroll,
  63. ),
  64. // scss-docs-end utils-overflow
  65. // scss-docs-start utils-display
  66. "display": (
  67. responsive: true,
  68. print: true,
  69. property: display,
  70. class: d,
  71. values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
  72. ),
  73. // scss-docs-end utils-display
  74. // scss-docs-start utils-shadow
  75. "shadow": (
  76. property: box-shadow,
  77. class: shadow,
  78. values: (
  79. null: var(--#{$prefix}box-shadow),
  80. sm: var(--#{$prefix}box-shadow-sm),
  81. lg: var(--#{$prefix}box-shadow-lg),
  82. none: none,
  83. )
  84. ),
  85. // scss-docs-end utils-shadow
  86. // scss-docs-start utils-focus-ring
  87. "focus-ring": (
  88. css-var: true,
  89. css-variable-name: focus-ring-color,
  90. class: focus-ring,
  91. values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
  92. ),
  93. // scss-docs-end utils-focus-ring
  94. // scss-docs-start utils-position
  95. "position": (
  96. property: position,
  97. values: static relative absolute fixed sticky
  98. ),
  99. "top": (
  100. property: top,
  101. values: $position-values
  102. ),
  103. "bottom": (
  104. property: bottom,
  105. values: $position-values
  106. ),
  107. "start": (
  108. property: left,
  109. class: start,
  110. values: $position-values
  111. ),
  112. "end": (
  113. property: right,
  114. class: end,
  115. values: $position-values
  116. ),
  117. "translate-middle": (
  118. property: transform,
  119. class: translate-middle,
  120. values: (
  121. null: translate(-50%, -50%),
  122. x: translateX(-50%),
  123. y: translateY(-50%),
  124. )
  125. ),
  126. // scss-docs-end utils-position
  127. // scss-docs-start utils-borders
  128. "border": (
  129. property: border,
  130. values: (
  131. null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
  132. 0: 0,
  133. )
  134. ),
  135. "border-top": (
  136. property: border-top,
  137. values: (
  138. null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
  139. 0: 0,
  140. )
  141. ),
  142. "border-end": (
  143. property: border-right,
  144. class: border-end,
  145. values: (
  146. null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
  147. 0: 0,
  148. )
  149. ),
  150. "border-bottom": (
  151. property: border-bottom,
  152. values: (
  153. null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
  154. 0: 0,
  155. )
  156. ),
  157. "border-start": (
  158. property: border-left,
  159. class: border-start,
  160. values: (
  161. null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
  162. 0: 0,
  163. )
  164. ),
  165. "border-color": (
  166. property: border-color,
  167. class: border,
  168. local-vars: (
  169. "border-opacity": 1
  170. ),
  171. values: $utilities-border-colors
  172. ),
  173. "subtle-border-color": (
  174. property: border-color,
  175. class: border,
  176. values: $utilities-border-subtle
  177. ),
  178. "border-width": (
  179. property: border-width,
  180. class: border,
  181. values: $border-widths
  182. ),
  183. "border-opacity": (
  184. css-var: true,
  185. class: border-opacity,
  186. values: (
  187. 10: .1,
  188. 25: .25,
  189. 50: .5,
  190. 75: .75,
  191. 100: 1
  192. )
  193. ),
  194. // scss-docs-end utils-borders
  195. // Sizing utilities
  196. // scss-docs-start utils-sizing
  197. "width": (
  198. property: width,
  199. class: w,
  200. values: (
  201. 25: 25%,
  202. 50: 50%,
  203. 75: 75%,
  204. 100: 100%,
  205. auto: auto
  206. )
  207. ),
  208. "max-width": (
  209. property: max-width,
  210. class: mw,
  211. values: (100: 100%)
  212. ),
  213. "viewport-width": (
  214. property: width,
  215. class: vw,
  216. values: (100: 100vw)
  217. ),
  218. "min-viewport-width": (
  219. property: min-width,
  220. class: min-vw,
  221. values: (100: 100vw)
  222. ),
  223. "height": (
  224. property: height,
  225. class: h,
  226. values: (
  227. 25: 25%,
  228. 50: 50%,
  229. 75: 75%,
  230. 100: 100%,
  231. auto: auto
  232. )
  233. ),
  234. "max-height": (
  235. property: max-height,
  236. class: mh,
  237. values: (100: 100%)
  238. ),
  239. "viewport-height": (
  240. property: height,
  241. class: vh,
  242. values: (100: 100vh)
  243. ),
  244. "min-viewport-height": (
  245. property: min-height,
  246. class: min-vh,
  247. values: (100: 100vh)
  248. ),
  249. // scss-docs-end utils-sizing
  250. // Flex utilities
  251. // scss-docs-start utils-flex
  252. "flex": (
  253. responsive: true,
  254. property: flex,
  255. values: (fill: 1 1 auto)
  256. ),
  257. "flex-direction": (
  258. responsive: true,
  259. property: flex-direction,
  260. class: flex,
  261. values: row column row-reverse column-reverse
  262. ),
  263. "flex-grow": (
  264. responsive: true,
  265. property: flex-grow,
  266. class: flex,
  267. values: (
  268. grow-0: 0,
  269. grow-1: 1,
  270. )
  271. ),
  272. "flex-shrink": (
  273. responsive: true,
  274. property: flex-shrink,
  275. class: flex,
  276. values: (
  277. shrink-0: 0,
  278. shrink-1: 1,
  279. )
  280. ),
  281. "flex-wrap": (
  282. responsive: true,
  283. property: flex-wrap,
  284. class: flex,
  285. values: wrap nowrap wrap-reverse
  286. ),
  287. "justify-content": (
  288. responsive: true,
  289. property: justify-content,
  290. values: (
  291. start: flex-start,
  292. end: flex-end,
  293. center: center,
  294. between: space-between,
  295. around: space-around,
  296. evenly: space-evenly,
  297. )
  298. ),
  299. "align-items": (
  300. responsive: true,
  301. property: align-items,
  302. values: (
  303. start: flex-start,
  304. end: flex-end,
  305. center: center,
  306. baseline: baseline,
  307. stretch: stretch,
  308. )
  309. ),
  310. "align-content": (
  311. responsive: true,
  312. property: align-content,
  313. values: (
  314. start: flex-start,
  315. end: flex-end,
  316. center: center,
  317. between: space-between,
  318. around: space-around,
  319. stretch: stretch,
  320. )
  321. ),
  322. "align-self": (
  323. responsive: true,
  324. property: align-self,
  325. values: (
  326. auto: auto,
  327. start: flex-start,
  328. end: flex-end,
  329. center: center,
  330. baseline: baseline,
  331. stretch: stretch,
  332. )
  333. ),
  334. "order": (
  335. responsive: true,
  336. property: order,
  337. values: (
  338. first: -1,
  339. 0: 0,
  340. 1: 1,
  341. 2: 2,
  342. 3: 3,
  343. 4: 4,
  344. 5: 5,
  345. last: 6,
  346. ),
  347. ),
  348. // scss-docs-end utils-flex
  349. // Margin utilities
  350. // scss-docs-start utils-spacing
  351. "margin": (
  352. responsive: true,
  353. property: margin,
  354. class: m,
  355. values: map-merge($spacers, (auto: auto))
  356. ),
  357. "margin-x": (
  358. responsive: true,
  359. property: margin-right margin-left,
  360. class: mx,
  361. values: map-merge($spacers, (auto: auto))
  362. ),
  363. "margin-y": (
  364. responsive: true,
  365. property: margin-top margin-bottom,
  366. class: my,
  367. values: map-merge($spacers, (auto: auto))
  368. ),
  369. "margin-top": (
  370. responsive: true,
  371. property: margin-top,
  372. class: mt,
  373. values: map-merge($spacers, (auto: auto))
  374. ),
  375. "margin-end": (
  376. responsive: true,
  377. property: margin-right,
  378. class: me,
  379. values: map-merge($spacers, (auto: auto))
  380. ),
  381. "margin-bottom": (
  382. responsive: true,
  383. property: margin-bottom,
  384. class: mb,
  385. values: map-merge($spacers, (auto: auto))
  386. ),
  387. "margin-start": (
  388. responsive: true,
  389. property: margin-left,
  390. class: ms,
  391. values: map-merge($spacers, (auto: auto))
  392. ),
  393. // Negative margin utilities
  394. "negative-margin": (
  395. responsive: true,
  396. property: margin,
  397. class: m,
  398. values: $negative-spacers
  399. ),
  400. "negative-margin-x": (
  401. responsive: true,
  402. property: margin-right margin-left,
  403. class: mx,
  404. values: $negative-spacers
  405. ),
  406. "negative-margin-y": (
  407. responsive: true,
  408. property: margin-top margin-bottom,
  409. class: my,
  410. values: $negative-spacers
  411. ),
  412. "negative-margin-top": (
  413. responsive: true,
  414. property: margin-top,
  415. class: mt,
  416. values: $negative-spacers
  417. ),
  418. "negative-margin-end": (
  419. responsive: true,
  420. property: margin-right,
  421. class: me,
  422. values: $negative-spacers
  423. ),
  424. "negative-margin-bottom": (
  425. responsive: true,
  426. property: margin-bottom,
  427. class: mb,
  428. values: $negative-spacers
  429. ),
  430. "negative-margin-start": (
  431. responsive: true,
  432. property: margin-left,
  433. class: ms,
  434. values: $negative-spacers
  435. ),
  436. // Padding utilities
  437. "padding": (
  438. responsive: true,
  439. property: padding,
  440. class: p,
  441. values: $spacers
  442. ),
  443. "padding-x": (
  444. responsive: true,
  445. property: padding-right padding-left,
  446. class: px,
  447. values: $spacers
  448. ),
  449. "padding-y": (
  450. responsive: true,
  451. property: padding-top padding-bottom,
  452. class: py,
  453. values: $spacers
  454. ),
  455. "padding-top": (
  456. responsive: true,
  457. property: padding-top,
  458. class: pt,
  459. values: $spacers
  460. ),
  461. "padding-end": (
  462. responsive: true,
  463. property: padding-right,
  464. class: pe,
  465. values: $spacers
  466. ),
  467. "padding-bottom": (
  468. responsive: true,
  469. property: padding-bottom,
  470. class: pb,
  471. values: $spacers
  472. ),
  473. "padding-start": (
  474. responsive: true,
  475. property: padding-left,
  476. class: ps,
  477. values: $spacers
  478. ),
  479. // Gap utility
  480. "gap": (
  481. responsive: true,
  482. property: gap,
  483. class: gap,
  484. values: $spacers
  485. ),
  486. "row-gap": (
  487. responsive: true,
  488. property: row-gap,
  489. class: row-gap,
  490. values: $spacers
  491. ),
  492. "column-gap": (
  493. responsive: true,
  494. property: column-gap,
  495. class: column-gap,
  496. values: $spacers
  497. ),
  498. // scss-docs-end utils-spacing
  499. // Text
  500. // scss-docs-start utils-text
  501. "font-family": (
  502. property: font-family,
  503. class: font,
  504. values: (monospace: var(--#{$prefix}font-monospace))
  505. ),
  506. "font-size": (
  507. rfs: true,
  508. property: font-size,
  509. class: fs,
  510. values: $font-sizes
  511. ),
  512. "font-style": (
  513. property: font-style,
  514. class: fst,
  515. values: italic normal
  516. ),
  517. "font-weight": (
  518. property: font-weight,
  519. class: fw,
  520. values: (
  521. lighter: $font-weight-lighter,
  522. light: $font-weight-light,
  523. normal: $font-weight-normal,
  524. medium: $font-weight-medium,
  525. semibold: $font-weight-semibold,
  526. bold: $font-weight-bold,
  527. bolder: $font-weight-bolder
  528. )
  529. ),
  530. "line-height": (
  531. property: line-height,
  532. class: lh,
  533. values: (
  534. 1: 1,
  535. sm: $line-height-sm,
  536. base: $line-height-base,
  537. lg: $line-height-lg,
  538. )
  539. ),
  540. "text-align": (
  541. responsive: true,
  542. property: text-align,
  543. class: text,
  544. values: (
  545. start: left,
  546. end: right,
  547. center: center,
  548. )
  549. ),
  550. "text-decoration": (
  551. property: text-decoration,
  552. values: none underline line-through
  553. ),
  554. "text-transform": (
  555. property: text-transform,
  556. class: text,
  557. values: lowercase uppercase capitalize
  558. ),
  559. "white-space": (
  560. property: white-space,
  561. class: text,
  562. values: (
  563. wrap: normal,
  564. nowrap: nowrap,
  565. )
  566. ),
  567. "word-wrap": (
  568. property: word-wrap word-break,
  569. class: text,
  570. values: (break: break-word),
  571. rtl: false
  572. ),
  573. // scss-docs-end utils-text
  574. // scss-docs-start utils-color
  575. "color": (
  576. property: color,
  577. class: text,
  578. local-vars: (
  579. "text-opacity": 1
  580. ),
  581. values: map-merge(
  582. $utilities-text-colors,
  583. (
  584. "muted": var(--#{$prefix}secondary-color), // deprecated
  585. "black-50": rgba($black, .5), // deprecated
  586. "white-50": rgba($white, .5), // deprecated
  587. "body-secondary": var(--#{$prefix}secondary-color),
  588. "body-tertiary": var(--#{$prefix}tertiary-color),
  589. "body-emphasis": var(--#{$prefix}emphasis-color),
  590. "reset": inherit,
  591. )
  592. )
  593. ),
  594. "text-opacity": (
  595. css-var: true,
  596. class: text-opacity,
  597. values: (
  598. 25: .25,
  599. 50: .5,
  600. 75: .75,
  601. 100: 1
  602. )
  603. ),
  604. "text-color": (
  605. property: color,
  606. class: text,
  607. values: $utilities-text-emphasis-colors
  608. ),
  609. // scss-docs-end utils-color
  610. // scss-docs-start utils-links
  611. "link-opacity": (
  612. css-var: true,
  613. class: link-opacity,
  614. state: hover,
  615. values: (
  616. 10: .1,
  617. 25: .25,
  618. 50: .5,
  619. 75: .75,
  620. 100: 1
  621. )
  622. ),
  623. "link-offset": (
  624. property: text-underline-offset,
  625. class: link-offset,
  626. state: hover,
  627. values: (
  628. 1: .125em,
  629. 2: .25em,
  630. 3: .375em,
  631. )
  632. ),
  633. "link-underline": (
  634. property: text-decoration-color,
  635. class: link-underline,
  636. local-vars: (
  637. "link-underline-opacity": 1
  638. ),
  639. values: map-merge(
  640. $utilities-links-underline,
  641. (
  642. null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
  643. )
  644. )
  645. ),
  646. "link-underline-opacity": (
  647. css-var: true,
  648. class: link-underline-opacity,
  649. state: hover,
  650. values: (
  651. 0: 0,
  652. 10: .1,
  653. 25: .25,
  654. 50: .5,
  655. 75: .75,
  656. 100: 1
  657. ),
  658. ),
  659. // scss-docs-end utils-links
  660. // scss-docs-start utils-bg-color
  661. "background-color": (
  662. property: background-color,
  663. class: bg,
  664. local-vars: (
  665. "bg-opacity": 1
  666. ),
  667. values: map-merge(
  668. $utilities-bg-colors,
  669. (
  670. "transparent": transparent,
  671. "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
  672. "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
  673. )
  674. )
  675. ),
  676. "bg-opacity": (
  677. css-var: true,
  678. class: bg-opacity,
  679. values: (
  680. 10: .1,
  681. 25: .25,
  682. 50: .5,
  683. 75: .75,
  684. 100: 1
  685. )
  686. ),
  687. "subtle-background-color": (
  688. property: background-color,
  689. class: bg,
  690. values: $utilities-bg-subtle
  691. ),
  692. // scss-docs-end utils-bg-color
  693. "gradient": (
  694. property: background-image,
  695. class: bg,
  696. values: (gradient: var(--#{$prefix}gradient))
  697. ),
  698. // scss-docs-start utils-interaction
  699. "user-select": (
  700. property: user-select,
  701. values: all auto none
  702. ),
  703. "pointer-events": (
  704. property: pointer-events,
  705. class: pe,
  706. values: none auto,
  707. ),
  708. // scss-docs-end utils-interaction
  709. // scss-docs-start utils-border-radius
  710. "rounded": (
  711. property: border-radius,
  712. class: rounded,
  713. values: (
  714. null: var(--#{$prefix}border-radius),
  715. 0: 0,
  716. 1: var(--#{$prefix}border-radius-sm),
  717. 2: var(--#{$prefix}border-radius),
  718. 3: var(--#{$prefix}border-radius-lg),
  719. 4: var(--#{$prefix}border-radius-xl),
  720. 5: var(--#{$prefix}border-radius-xxl),
  721. circle: 50%,
  722. pill: var(--#{$prefix}border-radius-pill)
  723. )
  724. ),
  725. "rounded-top": (
  726. property: border-top-left-radius border-top-right-radius,
  727. class: rounded-top,
  728. values: (
  729. null: var(--#{$prefix}border-radius),
  730. 0: 0,
  731. 1: var(--#{$prefix}border-radius-sm),
  732. 2: var(--#{$prefix}border-radius),
  733. 3: var(--#{$prefix}border-radius-lg),
  734. 4: var(--#{$prefix}border-radius-xl),
  735. 5: var(--#{$prefix}border-radius-xxl),
  736. circle: 50%,
  737. pill: var(--#{$prefix}border-radius-pill)
  738. )
  739. ),
  740. "rounded-end": (
  741. property: border-top-right-radius border-bottom-right-radius,
  742. class: rounded-end,
  743. values: (
  744. null: var(--#{$prefix}border-radius),
  745. 0: 0,
  746. 1: var(--#{$prefix}border-radius-sm),
  747. 2: var(--#{$prefix}border-radius),
  748. 3: var(--#{$prefix}border-radius-lg),
  749. 4: var(--#{$prefix}border-radius-xl),
  750. 5: var(--#{$prefix}border-radius-xxl),
  751. circle: 50%,
  752. pill: var(--#{$prefix}border-radius-pill)
  753. )
  754. ),
  755. "rounded-bottom": (
  756. property: border-bottom-right-radius border-bottom-left-radius,
  757. class: rounded-bottom,
  758. values: (
  759. null: var(--#{$prefix}border-radius),
  760. 0: 0,
  761. 1: var(--#{$prefix}border-radius-sm),
  762. 2: var(--#{$prefix}border-radius),
  763. 3: var(--#{$prefix}border-radius-lg),
  764. 4: var(--#{$prefix}border-radius-xl),
  765. 5: var(--#{$prefix}border-radius-xxl),
  766. circle: 50%,
  767. pill: var(--#{$prefix}border-radius-pill)
  768. )
  769. ),
  770. "rounded-start": (
  771. property: border-bottom-left-radius border-top-left-radius,
  772. class: rounded-start,
  773. values: (
  774. null: var(--#{$prefix}border-radius),
  775. 0: 0,
  776. 1: var(--#{$prefix}border-radius-sm),
  777. 2: var(--#{$prefix}border-radius),
  778. 3: var(--#{$prefix}border-radius-lg),
  779. 4: var(--#{$prefix}border-radius-xl),
  780. 5: var(--#{$prefix}border-radius-xxl),
  781. circle: 50%,
  782. pill: var(--#{$prefix}border-radius-pill)
  783. )
  784. ),
  785. // scss-docs-end utils-border-radius
  786. // scss-docs-start utils-visibility
  787. "visibility": (
  788. property: visibility,
  789. class: null,
  790. values: (
  791. visible: visible,
  792. invisible: hidden,
  793. )
  794. ),
  795. // scss-docs-end utils-visibility
  796. // scss-docs-start utils-zindex
  797. "z-index": (
  798. property: z-index,
  799. class: z,
  800. values: $zindex-levels,
  801. )
  802. // scss-docs-end utils-zindex
  803. ),
  804. $utilities
  805. );