[Feature Request]: Transition duration design tokens

[bdfranck]

Is your feature request related to a problem? Please describe

Upon reviewing our component CSS, I noticed that we have transition duration values in eight components:

Component	Property	Duration	Timing function
Button	transform	0.1s	ease-in-out
Button	background-color	0.2s	ease-in-out
Button	border-color	0.2s	ease-in-out
Dropdown	box-shadow	0.1s	ease-in
Dropdown	box-shadow	0.1s	ease-in
Icon Button	background-color	100ms	ease-in
Icon Button	transform	100ms	ease-in
Input	box-shadow	0.1s	ease-in
Radio Item	box-shadow	100ms	ease-in-out
Tooltip	opacity	0.3s	-
Three Column Layout	transform	200ms	ease-in-out
Two Column Layout	transform	200ms	ease-in-out

The duration feels like a great candidate for a set of design tokens. We could standardize them into three values:

Name	Value
Short	100ms
Medium	200ms
Long	300ms

Describe the solution you'd like

Let's add three new design tokens:

• --goa-transition-duration-s: 100ms;
• --goa-transition-duration-m: 200ms;
• --goa-transition-duration-l: 300ms;

Provide evidence this is a needed component

This change would reduce redundant CSS values for eight of our components. We could implement it right away without any changes to existing animation behaviour.

It also gives the opportunity to add additional durations and other transition values in the future.

There are other design systems that also use tokens for transition duration:

• Material Design System
• Lightning design system
• Jobber Atlantis Design System

Describe alternatives you've considered

Naming is difficult. 🤪 Here are some alternatives that I considered:

• Use animation instead of transition: --goa-animation-duration-m
• Use timing instead of duration: --goa-transition-timing-m
• Use numbers to describe lengths: --goa-transition-duration-100

Do you have anything already created for this that we can use?

yes

Are you currently using this proposal inside your own service

no

Are you able to assist to bring the feature to reality?

yes

Additional context

I've created a draft PR, https://github.com/GovAlta/design-tokens/pull/46, for this change.

[ArakTaiRoth]

@Spark450 Investigate if we want to do this