DS-1156 | v8 - upgrade to TW v4 by yvonnetangsu · Pull Request #950 · SU-SWS/decanter

yvonnetangsu · 2025-09-03T01:43:33Z

READY FOR REVIEW/NOT READY

(Edit the above to reflect status)

Summary

TL;DR - what's this PR for?

Needed By (Date)

When does this need to be merged by?

Urgency

How critical is this PR?

Steps to Test

Do this
Then this
Then this

Affected Projects or Products

Does this PR impact any particular projects, products, or modules?

Associated Issues and/or People

JIRA ticket
Other PRs
Any other contextual information that might be helpful (e.g., description of a bug that this PR fixes, new functionality that it adds, etc.)
Anyone who should be notified? (@mention them here)

Any thoughts on having a core and semantic layer?

I'm thinking that Decanter core wouldn't have a semantic layer, because other than maybe --color-brand would be universal, we can't really predict what other projects will use for background or default border or subtle (can be fog-light, can be black-10 or a custom color like for homesite) 🤔 Perhaps the semantic layer will be defined in individual projects @sherakama and tagging @iamrentman

That sounds reasonable to me.

One thought as you use this and learn more, perhaps create an optional semantic layer in which other teams could opt-in to. eg:

@import "decanter"; @import "decanter/semantic-vars";

@sherakama I could for sure, perhaps UComm @iamrentman could work with us to define a set of semantic variables?

Thanks for calling this out. I was wondering the same thing as I browse this and better understand Tailwind v4. I think you're right, @yvonnetangsu – semantic layer is in the project utilizing these primitive values.

Hi @iamrentman 👋🏼 If you feel like we could add a "recommended" set of semantic variables, we can certainly add that. There is no rush, we can think about this some more - I'm also thinking about things.

sherakama · 2025-09-03T23:18:31Z

+  }
+
+  /* Responsive grid gap */
+  .grid-gap {


I could argue this is more of a utility than a component. But I won't die on that hill.

Yeah the reason I put it in component is that you can override it with the core utilities, so for example, if using grid-gap gap-y-10, the gap-y-10 will override the vertical gap in grid-gap

sherakama · 2025-09-03T23:18:47Z

+  .text-shadow {
+    text-shadow: rgba(0, 0, 0, 40%) 0 0 6px, rgba(0, 0, 0, 60%) 0 0 2px;
+  }
+
+  .text-shadow-md {
+    text-shadow: rgba(0, 0, 0, 40%) 0 0 8px, rgba(0, 0, 0, 60%) 0 0 3px;
+  }
+
+  .text-shadow-lg {
+    text-shadow: rgba(0, 0, 0, 30%) 0 0 12px;
+  }


Utilities imho.

I'm going to think about what to do with these because TW has core support for text shadows now

But yeah this one is a utility because it doesn't need to be overridden by anything else 👍🏼

sherakama · 2025-09-03T23:23:38Z

With presets gone, is it now just @import decanter in the project stylesheet?

yvonnetangsu · 2025-09-03T23:24:16Z

+/**
+  Responsive spacing - gap
+*/
+@utility rs-gap-* {
+  gap: --value(--responsive-spacing-xs-*);
+
+  @media (min-width: 768px) {
+    gap: --value(--responsive-spacing-md-*);
+  }
+
+  @media (min-width: 1500px) {
+    gap: --value(--responsive-spacing-2xl-*);
+  }
+}
+
+@utility rs-gap-x-* {
+  column-gap: --value(--responsive-spacing-xs-*);
+
+  @media (min-width: 768px) {
+    column-gap: --value(--responsive-spacing-md-*);
+  }
+
+  @media (min-width: 1500px) {
+    column-gap: --value(--responsive-spacing-2xl-*);
+  }
+}
+
+@utility rs-gap-y-* {
+  row-gap: --value(--responsive-spacing-xs-*);
+
+  @media (min-width: 768px) {
+    row-gap: --value(--responsive-spacing-md-*);
+  }
+
+  @media (min-width: 1500px) {
+    row-gap: --value(--responsive-spacing-2xl-*);
+  }
+}


Justin asked for this so adding it

Oh hey! Neat. Thank you!

yvonnetangsu · 2025-09-03T23:24:49Z

With presets gone, is it now just @import decanter in the project stylesheet?

Yup, from what I understand, it's basically just importing what you need 😬

…es; update readme

yvonnetangsu · 2025-09-04T23:11:23Z

+@utility text-* {
+  font-size: calc(--value(integer) * var(--font-size));
+}


Font size utility - it supports any integer values, so text-100 would be font-size: 10rem. It's an extension so all our custom font size classes, eg, text-1em, still works.

sherakama · 2025-09-05T16:46:21Z

My $0.02, kill this file.

Allow someone to easily import everything or individual items. If forms is an issue, perhaps look at breaking it up and into individual components too.

Sure I'll kill it 🔪

sherakama · 2025-09-05T16:48:02Z

+*/
+
+@layer components {
+  .types


Suggested change

.types

.types,

Oh wait, this is a descendant selector. Why do we need .types .splash-text and .splash-text?

Oh I haven't cleaned up a lot of the stuff - some of it I had AI move things around 😂 I'll go back and see if I can rewrite the modular type stuff in a cleaner way too.
What are you doing here by the way @sherakama ? 👀

I want to rethink some of this typography styles btw

yvonnetangsu · 2025-09-08T18:28:06Z

+  --responsive-spacing-xs-neg2: 0.8rem;
+  --responsive-spacing-md-neg2: 0.9rem;
+  --responsive-spacing-2xl-neg2: 1rem;
+  --responsive-spacing-xs-neg1: 1.1rem;
+  --responsive-spacing-md-neg1: 1.2rem;
+  --responsive-spacing-2xl-neg1: 1.3rem;


I'm thinking about deprecating these negative values. I'll add doc in the upgrade.md, e.g.,
rs-p-neg1 => p-11 md:p-12 2xl:p-13
What do you think? @iamrentman @sherakama

Yeah, I am find with that as I feel they break convention.

Deprecate them in V7, and remove in V8.

Sounds good @sherakama - I'll start a list of things to be deprecated in decanter v7

…ect ratio plugin from dev.css; clean up WIP; remove backface-hidden utility because it's in TW v4 core now

yvonnetangsu · 2025-10-02T16:59:18Z

+@utility fluid-type-0 {
+  font-size: clamp(1.8rem, 0.44vw + 1.64rem, 2.3rem);
+}
+
+@utility fluid-type-1 {
+  font-size: clamp(2.1rem, 0.7vw + 1.85rem, 2.9rem);
+}


Add fluid type as utilities instead of components. Apparently in TW v4, things like lg:fluid-type-4 (when you use a modifier) stops working if fluid-type is a component.

…lass for the 16x9 container

yvonnetangsu added 9 commits February 4, 2025 17:22

WIP upgrade to TW v4

7097299

Start rewriting js config file as CSS theme, utility or base layer

ad41c33

Merge branch 'main' into v8

248b27e

* main: 7.4.0 ES/Common exports and documentation. (#949) 7.3.2 Remove print from screens because print is now built in; add larger breakpoints; update global footer to cardinal red (#948) # Conflicts: # package-lock.json # package.json # static/index.html

Split index into different files; add more theme and utilities

924a80a

add ai generated component code

462b836

Add custom variants

3ef60b0

Custom variants clean up

908b1cc

Rewrite responsive spacing in utilities

b69fe17

Add more css variables and clean up components

6aed49e

yvonnetangsu added the alpha Releases an alpha tag label Sep 3, 2025

yvonnetangsu added 6 commits September 3, 2025 01:20

remove packages; ignore doc directory for test page css generation; k…

e4ce950

…eep adding css

prepare upgrade.md; rename doc screens to breakpoints

f5a2719

move dev css file

e852cbd

Fix npm scripts and ignore docs folder for content watch

a3664f5

Add plugins; remove packages we don't need; package.json clean up

ac714e8

Remove eslint; remove break-words as it's deprecated css; remove post…

a4efee0

…css.config.js

sherakama reviewed Sep 3, 2025

View reviewed changes

Comment thread src/css/utilities.css

sherakama reviewed Sep 3, 2025

View reviewed changes

Comment thread src/css/custom-variants.css

@@ -0,0 +1,27 @@

/**

Custom variants

sherakama Sep 3, 2025

Copy link
Copy Markdown

Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Neat.

sherakama reviewed Sep 3, 2025

View reviewed changes

Comment thread src/css/dev.css Outdated

sherakama reviewed Sep 3, 2025

View reviewed changes

yvonnetangsu commented Sep 3, 2025

View reviewed changes

yvonnetangsu added 3 commits September 3, 2025 16:30

Remove things

59f2407

Remove lint from workflow

0cbcb48

Add font size custom utility

d7a2a0b

yvonnetangsu added 2 commits September 4, 2025 13:34

update package.json for better use as npm package ; remove eslint fil…

69040a8

…es; update readme

Update exports in package.json

8c19546

yvonnetangsu commented Sep 4, 2025

View reviewed changes

Splitting theme and component into individual files

a13cf06

sherakama reviewed Sep 5, 2025

View reviewed changes

yvonnetangsu commented Sep 8, 2025

View reviewed changes

yvonnetangsu added 6 commits September 8, 2025 11:33

Separating utilities; remove plugin from index.css; remove legacy asp…

f99a588

…ect ratio plugin from dev.css; clean up WIP; remove backface-hidden utility because it's in TW v4 core now

Update path of base.css in index.css

8ca3533

fonts and entry points stuff

85b29a5

Fix up paths and update test page

3d264dd

Remove css from base.css that TW preflight already has

23653b5

Move fluid type to utility

6bc93a8

yvonnetangsu commented Oct 2, 2025

View reviewed changes

yvonnetangsu added 5 commits October 9, 2025 00:33

Move modular type to utilities

1125ec4

Remove embed-container class since we can use the core aspect ratio c…

6d4bd88

…lass for the 16x9 container

Move grid-gap, and decanter typography styles to utility

9e9e519

Update packages

7dd5e34

Update upgrade doc about removal of negative responsive spacing

30fc206

+                .wysiwyg {
+                  > *:first-child {
+                    margin-top: -0.25em;
+                  }

		@@ -0,0 +1,226 @@
		@theme {

Uh oh!

Conversation

yvonnetangsu commented Sep 3, 2025

READY FOR REVIEW/NOT READY

Summary

Needed By (Date)

Urgency

Steps to Test

Affected Projects or Products

Associated Issues and/or People

See Also

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yvonnetangsu Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sherakama commented Sep 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yvonnetangsu commented Sep 3, 2025

Uh oh!

yvonnetangsu Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yvonnetangsu Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yvonnetangsu Sep 3, 2025 •

edited

Loading

yvonnetangsu Sep 4, 2025 •

edited

Loading

yvonnetangsu Sep 5, 2025 •

edited

Loading

yvonnetangsu Oct 2, 2025 •

edited

Loading