feat(gradient): linear gradient mixin #15081

tw15egan · 2023-11-01T16:49:02Z

Adds in an ai-gradient mixin (what should we call this?) that can be used to add in the AI aura linear-gradient to components. This takes in a direction and a width, with defaults of right and 50%.

To Do:

Get proper color tokens for gradient tokens (currently using the rgba value found in Figma kit. Do these map to existing colors?

Changelog

New

Demo story under unstable__LinearGradient
ai-gradient mixin that takes in a direction and a width
3 tokens, which we can rename + add to if needed
- ai-gradient-start-01
- ai-gradient-start-02
- ai-gradient-end

Testing / Reviewing

Go to unstable__linearGradient and check out the values.

netlify · 2023-11-01T16:53:48Z

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	`751385e`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/654a495846cdea000875821f
😎 Deploy Preview	https://deploy-preview-15081--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2023-11-01T16:55:56Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`751385e`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/654a495846cdea000875821d
😎 Deploy Preview	https://deploy-preview-15081--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

aagonzales · 2023-11-03T18:37:57Z

Get proper color tokens for gradient tokens (currently using the rgba value found in Figma kit. Do these map to existing colors?

@tw15egan Yes, they do. Its coolGray-10, blue-10 and blue-20

aagonzales · 2023-11-03T18:39:50Z

I also think the word layer in the token name is confusing with our actually layer tokens so can we just call those tokens:

aiGradientStart01
aiGradientStart02

tw15egan · 2023-11-06T14:41:43Z

@aagonzales I've updated the token names and now using the color tokens directly 👍

aagonzales

Cool! I think this is good for now then. Refined designs of the gradient will come later.

tay1orjones

Looks solid to me. I agree the ai-gradient naming seems a bit off but I'm not sure what I'd prefer more. This is experimental so it's fine for now I think.

I definitely prefer having it specific like this for now instead of just calling it gradient. We can make future name changes more specific (or less specific) whereas if we named it gradient we'd be much more locked in.

tay1orjones · 2023-11-06T20:04:00Z

packages/react/src/components/LinearGradient/LinearGradient.stories.js

+import './linear-gradient-story.scss';
+
+export default {
+  title: 'Experimental/unstable__LinearGradient',


I'm not sure about having this in the storybook long term. Feels more like something we should find a way to document in the Themes elements example. Not a blocker for this PR, but something to consider for the future.

Yeah I can remove this before we merge 👍🏻

aagonzales · 2023-11-06T21:35:52Z

Yeah I'm struggling to think of a good name for the tokens. "aura" is another option, except that's also what the dynamic, animated element will be called to. Maybe we can call them "ai-aura-dynamic" and "ai-aura-static"?

mattrosno

@tw15egan @aagonzales @tay1orjones I understand this has been approved and merged, but here's my 2-cents on naming convention and why it could be beneficial to not use "AI" in any of our token / mixin / component naming.

mattrosno · 2023-11-08T16:17:57Z

packages/styles/scss/utilities/_ai-gradient.scss

+
+/// Experimental - name and structure subject to change. Use at your own risk!
+/// Adds AI gradient styles to a component
+/// @access public


Should @access private be used for experimental? If it's public, then it's part of our public API as supported.

http://sassdoc.com/annotations/#access

mattrosno · 2023-11-08T16:24:46Z

packages/styles/scss/utilities/_ai-gradient.scss

+/// @example @include focus-outline('outline');
+/// @group utilities
+
+@mixin ai-gradient($direction: 'right', $width: 50%) {


I'm also questioning our use of ai- in token and mixin naming. Following the token naming convention shown here, would we want to go with gradient-01?

This could be more future proof. What happens when everything is "AI". We don't want our code base littered with ai prefixes/namespaces. A few years from now, that will seem silly.

Yeah @tay1orjones has mentioned the same thing about the "ai" term. We haven't finalized the token name yet just launching something so TJ isn't blocked for the next implementation steps. I think we were going to try and avoid "gradient" as well since that's not scalable (could evolve to something other than a linear gradient). I was thinking it could just be a flavor of "aura" (like aura-static) or whatever we end up calling that in the AI world.

* feat(gradient): add linear gradient mixin * feat(gradient): add gradient tokens, update demo story * fix(gradient): change default direction * chore(snapshot): update snapshots * refactor(Gradient): use color tokens, update token names * test(snapshot): update snapshots * docs(ai-gradient): mark mixin experimental, update year * chore(storybook): remove test story

tw15egan added 3 commits October 31, 2023 14:33

feat(gradient): add linear gradient mixin

1067339

feat(gradient): add gradient tokens, update demo story

722e5ff

fix(gradient): change default direction

ac665a9

chore(snapshot): update snapshots

9440082

tw15egan marked this pull request as ready for review November 3, 2023 13:05

tw15egan requested review from a team as code owners November 3, 2023 13:05

tw15egan requested review from tay1orjones and andreancardona November 3, 2023 13:05

tw15egan changed the title ~~feat(gradient): Linear gradient mixin~~ feat(gradient): linear gradient mixin Nov 3, 2023

tw15egan requested a review from aagonzales November 3, 2023 13:05

tw15egan added the status: visual review 🔍 label Nov 3, 2023

tw15egan added 2 commits November 6, 2023 08:55

refactor(Gradient): use color tokens, update token names

5609163

test(snapshot): update snapshots

b23518a

aagonzales approved these changes Nov 6, 2023

View reviewed changes

tw15egan added status: ready for review 👀 and removed status: visual review 🔍 labels Nov 6, 2023

tay1orjones approved these changes Nov 6, 2023

View reviewed changes

tay1orjones added the status: one more review 👀 label Nov 6, 2023

tw15egan added 2 commits November 7, 2023 08:48

Merge branch 'main' into linear-gradient-mixin

482bb7d

docs(ai-gradient): mark mixin experimental, update year

16714df

tw15egan force-pushed the linear-gradient-mixin branch from 6df2660 to 16714df Compare November 7, 2023 13:57

alisonjoseph approved these changes Nov 7, 2023

View reviewed changes

chore(storybook): remove test story

751385e

tw15egan enabled auto-merge November 7, 2023 14:27

tw15egan added this pull request to the merge queue Nov 7, 2023

Merged via the queue into carbon-design-system:main with commit 5b6ba55 Nov 7, 2023
14 checks passed

tw15egan deleted the linear-gradient-mixin branch November 7, 2023 15:28

mattrosno reviewed Nov 8, 2023

View reviewed changes

mattrosno mentioned this pull request Nov 14, 2023

C4AI Gradient: Work with dev to determine how we can tokenize the AI gradient requirements #15073

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(gradient): linear gradient mixin #15081

feat(gradient): linear gradient mixin #15081

tw15egan commented Nov 1, 2023 •

edited

Loading

netlify bot commented Nov 1, 2023 •

edited

Loading

netlify bot commented Nov 1, 2023 •

edited

Loading

aagonzales commented Nov 3, 2023 •

edited

Loading

aagonzales commented Nov 3, 2023

tw15egan commented Nov 6, 2023

aagonzales left a comment

tay1orjones left a comment

tay1orjones Nov 6, 2023

tw15egan Nov 6, 2023

aagonzales commented Nov 6, 2023

mattrosno left a comment

mattrosno Nov 8, 2023

mattrosno Nov 8, 2023

aagonzales Nov 8, 2023

feat(gradient): linear gradient mixin #15081

feat(gradient): linear gradient mixin #15081

Conversation

tw15egan commented Nov 1, 2023 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Nov 1, 2023 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

netlify bot commented Nov 1, 2023 • edited Loading

✅ Deploy Preview for carbon-elements ready!

aagonzales commented Nov 3, 2023 • edited Loading

aagonzales commented Nov 3, 2023

tw15egan commented Nov 6, 2023

aagonzales left a comment

Choose a reason for hiding this comment

tay1orjones left a comment

Choose a reason for hiding this comment

tay1orjones Nov 6, 2023

Choose a reason for hiding this comment

tw15egan Nov 6, 2023

Choose a reason for hiding this comment

aagonzales commented Nov 6, 2023

mattrosno left a comment

Choose a reason for hiding this comment

mattrosno Nov 8, 2023

Choose a reason for hiding this comment

mattrosno Nov 8, 2023

Choose a reason for hiding this comment

aagonzales Nov 8, 2023

Choose a reason for hiding this comment

tw15egan commented Nov 1, 2023 •

edited

Loading

netlify bot commented Nov 1, 2023 •

edited

Loading

netlify bot commented Nov 1, 2023 •

edited

Loading

aagonzales commented Nov 3, 2023 •

edited

Loading