5 Commits

Author SHA1 Message Date
Kris Braun
dadb096da2
3D transform utilities (#13248)
* 3D rotation utilities

* Validate rotate values

* Replace forEach with for loop

* transform-style, transform-box, and backface-visibility utilities

* Tests for transform utilities

* 'perspective' utility

* Fix tests

* Remove unnecessary suggestion; move function comments

* scale-z

* Fix Intellisense test

* perspective-origin

* scale-3d

* Only include the z component of scale if it's defined

We want to avoid triggerring unnecessary 3D transformations.

* Comment the reason for setting --tw-rotate

* Test full bare rotate

* Fix merge

* Comment on rotate arbitrary value

* perspective bare values

Support `perspective-123` (but not `perspective-potato`)

* scale-3d as a static modifier to scale

Instead of scale-3d taking a separate scale, it modifies scale to apply in three dimensions.

* Test that scale-x overrides scale

* scale arbitrary values

Support arbitrary value for scale (e.g. `scale-[1_2_3.5]`).

* Specify rotation axis using a modifier

Support single rotation angles in line with the [CSS `rotate` property](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate). Using modifiers (e.g. `rotate-45/x`) makes it clearer that the axis of rotation is modified. Thanks @adamwathan for this suggestion.

Composing angles is only supported in CSS via a pipeline of `transform` functions. I'll add arbitrary value support to `transform` next as an escape hatch for those cases that need more complex transformations.

* Use property defaults for scale-3d

* `transform` arbitrary values

Support arbitrary values for `transform`. The `skew-x` and `skew-y` transforms are applied before any arbitrary transformations.

* Add translate-z and translate-3d

Both work the same way as scale-z and scale-3d.

* Add translate-[xyz]-px

* Comment on how skewX and skewY are applied

* Remove unnecessary suggest

* Simplify translate

* Fix up comment on rotate syntax

* Back to rotate-x and rotate-y rather than rotate modifiers

* 3D transform test fixes
2024-03-19 17:52:32 +01:00
Adam Wathan
91fca13981
Don't rely on existence of --default-transition-* variables in transition utilities (#13219)
* Don't rely on existence of --default-transition-* variables in transition utilities

* Update changelog

* Add test with no default transition values defined

* Inline value for --default-transition-timing-function

This is more consistent with how things worked in v3 and ensures things will still work if the user suppresses the output of all CSS variables.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2024-03-13 12:14:05 -04:00
Adam Wathan
78d1c50f1c
Reset borders, padding, and margin universally (#13189)
* Reset borders, padding, and margin universally

Noticed iframes have a default border we weren't resetting, feels safest to just remove borders across the board and reintroduce them for form controls.

We were also resetting padding on an element by element basis but I can't think of any elements we are actually trying to avoid resetting padding on, so just reset it everywhere.

This also removes the left margin on file buttons that separates the button from the meta data about the currently selected file but I think this is fine, let the user decide how much space to put there intentionally like we do with other things.

* Include ::first-letter

Supports margin/padding/border (but not box-sizing) so should be in reset list.

* Update changelog

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2024-03-11 14:17:19 -04:00
Adam Wathan
8309b47266
Remove static radius values from theme (#13186)
* Remove static radius values from theme

* Update snapshots

* Update changelog

* Use static utilities + a big loop

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2024-03-11 14:02:18 -04:00
Robin Malfait
a68de1df27
introduce v4 codebase 2024-03-05 14:29:15 +01:00