Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(front) : add utilities for text color shades #3203

Open
wants to merge 1 commit into
base: rc
Choose a base branch
from
Open

feat(front) : add utilities for text color shades #3203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions packages/scss/src/commons/core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,19 @@ $overflow: 'hidden', 'auto', 'visible', 'scroll';
color: var(--palettes-#{$palette}-700) #{$suffix};
}
}

@each $palette in list.join(list.join(config.$palettesStates, config.$palettesDefault), config.$palettesProduct) {
$paletteExists: map.get(config.$palettesInterpolation, $palette);
@if $paletteExists {
@each $shade in config.$palettesShades {
@if map.get($paletteExists, $shade) {
.u-text#{transform.capitalize($palette)}#{$shade} {
color: var(--palettes-#{$palette}-#{$shade}) #{$suffix};
}
}
}
}
}
}

@mixin borderRadius($suffix: '!important') {
Expand Down
64 changes: 64 additions & 0 deletions stories/documentation/integration/utilities/text-color.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,70 @@ function getTemplate(args: TextColorStory): string {
<div class="demo-utilityWrapper">
<div class="u-textLight demo-utility"><code class="code">u-textLight</code> Lorem ipsum</div>
<div class="u-textPlaceholder demo-utility"><code class="code">u-textPlaceholder</code> Lorem ipsum</div>
</div>
<div class="demo-utilityWrapper">
<div class="u-textNeutral0 demo-utility"><code class="code">u-textNeutral0</code> Lorem ipsum</div>
<div class="u-textNeutral25 demo-utility"><code class="code">u-textNeutral25</code> Lorem ipsum</div>
<div class="u-textNeutral50 demo-utility"><code class="code">u-textNeutral50</code> Lorem ipsum</div>
<div class="u-textNeutral100 demo-utility"><code class="code">u-textNeutral100</code> Lorem ipsum</div>
<div class="u-textNeutral200 demo-utility"><code class="code">u-textNeutral200</code> Lorem ipsum</div>
<div class="u-textNeutral300 demo-utility"><code class="code">u-textNeutral300</code> Lorem ipsum</div>
<div class="u-textNeutral400 demo-utility"><code class="code">u-textNeutral400</code> Lorem ipsum</div>
<div class="u-textNeutral500 demo-utility"><code class="code">u-textNeutral500</code> Lorem ipsum</div>
<div class="u-textNeutral600 demo-utility"><code class="code">u-textNeutral600</code> Lorem ipsum</div>
<div class="u-textNeutral700 demo-utility"><code class="code">u-textNeutral700</code> Lorem ipsum</div>
<div class="u-textNeutral800 demo-utility"><code class="code">u-textNeutral800</code> Lorem ipsum</div>
<div class="u-textNeutral900 demo-utility"><code class="code">u-textNeutral900</code> Lorem ipsum</div>
</div>
<div class="demo-utilityWrapper">
<div class="u-textProduct0 demo-utility"><code class="code">u-textProduct0</code> Lorem ipsum</div>
<div class="u-textProduct25 demo-utility"><code class="code">u-textProduct25</code> Lorem ipsum</div>
<div class="u-textProduct50 demo-utility"><code class="code">u-textProduct50</code> Lorem ipsum</div>
<div class="u-textProduct100 demo-utility"><code class="code">u-textProduct100</code> Lorem ipsum</div>
<div class="u-textProduct200 demo-utility"><code class="code">u-textProduct200</code> Lorem ipsum</div>
<div class="u-textProduct300 demo-utility"><code class="code">u-textProduct300</code> Lorem ipsum</div>
<div class="u-textProduct400 demo-utility"><code class="code">u-textProduct400</code> Lorem ipsum</div>
<div class="u-textProduct500 demo-utility"><code class="code">u-textProduct500</code> Lorem ipsum</div>
<div class="u-textProduct600 demo-utility"><code class="code">u-textProduct600</code> Lorem ipsum</div>
<div class="u-textProduct700 demo-utility"><code class="code">u-textProduct700</code> Lorem ipsum</div>
<div class="u-textProduct800 demo-utility"><code class="code">u-textProduct800</code> Lorem ipsum</div>
<div class="u-textProduct900 demo-utility"><code class="code">u-textProduct900</code> Lorem ipsum</div>
</div>
<div class="demo-utilityWrapper">
<div class="u-textSuccess50 demo-utility"><code class="code">u-textSuccess50</code> Lorem ipsum</div>
<div class="u-textSuccess100 demo-utility"><code class="code">u-textSuccess100</code> Lorem ipsum</div>
<div class="u-textSuccess200 demo-utility"><code class="code">u-textSuccess200</code> Lorem ipsum</div>
<div class="u-textSuccess300 demo-utility"><code class="code">u-textSuccess300</code> Lorem ipsum</div>
<div class="u-textSuccess400 demo-utility"><code class="code">u-textSuccess400</code> Lorem ipsum</div>
<div class="u-textSuccess500 demo-utility"><code class="code">u-textSuccess500</code> Lorem ipsum</div>
<div class="u-textSuccess600 demo-utility"><code class="code">u-textSuccess600</code> Lorem ipsum</div>
<div class="u-textSuccess700 demo-utility"><code class="code">u-textSuccess700</code> Lorem ipsum</div>
<div class="u-textSuccess800 demo-utility"><code class="code">u-textSuccess800</code> Lorem ipsum</div>
<div class="u-textSuccess900 demo-utility"><code class="code">u-textSuccess900</code> Lorem ipsum</div>
</div>
<div class="demo-utilityWrapper">
<div class="u-textWarning50 demo-utility"><code class="code">u-textWarning50</code> Lorem ipsum</div>
<div class="u-textWarning100 demo-utility"><code class="code">u-textWarning100</code> Lorem ipsum</div>
<div class="u-textWarning200 demo-utility"><code class="code">u-textWarning200</code> Lorem ipsum</div>
<div class="u-textWarning300 demo-utility"><code class="code">u-textWarning300</code> Lorem ipsum</div>
<div class="u-textWarning400 demo-utility"><code class="code">u-textWarning400</code> Lorem ipsum</div>
<div class="u-textWarning500 demo-utility"><code class="code">u-textWarning500</code> Lorem ipsum</div>
<div class="u-textWarning600 demo-utility"><code class="code">u-textWarning600</code> Lorem ipsum</div>
<div class="u-textWarning700 demo-utility"><code class="code">u-textWarning700</code> Lorem ipsum</div>
<div class="u-textWarning800 demo-utility"><code class="code">u-textWarning800</code> Lorem ipsum</div>
<div class="u-textWarning900 demo-utility"><code class="code">u-textWarning900</code> Lorem ipsum</div>
</div>
<div class="demo-utilityWrapper">
<div class="u-textCritical50 demo-utility"><code class="code">u-textCritical50</code> Lorem ipsum</div>
<div class="u-textCritical100 demo-utility"><code class="code">u-textCritical100</code> Lorem ipsum</div>
<div class="u-textCritical200 demo-utility"><code class="code">u-textCritical200</code> Lorem ipsum</div>
<div class="u-textCritical300 demo-utility"><code class="code">u-textCritical300</code> Lorem ipsum</div>
<div class="u-textCritical400 demo-utility"><code class="code">u-textCritical400</code> Lorem ipsum</div>
<div class="u-textCritical500 demo-utility"><code class="code">u-textCritical500</code> Lorem ipsum</div>
<div class="u-textCritical600 demo-utility"><code class="code">u-textCritical600</code> Lorem ipsum</div>
<div class="u-textCritical700 demo-utility"><code class="code">u-textCritical700</code> Lorem ipsum</div>
<div class="u-textCritical800 demo-utility"><code class="code">u-textCritical800</code> Lorem ipsum</div>
<div class="u-textCritical900 demo-utility"><code class="code">u-textCritical900</code> Lorem ipsum</div>
</div>`;
}

Expand Down