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

style: update color token name 3 digits #1955

Merged
merged 31 commits into from
Oct 2, 2024
Merged

style: update color token name 3 digits #1955

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
2e12557
fix(frame): add box shadow to bordered frame (#1958)
QuintonJason Aug 23, 2024
49951e2
style: remove border from box like elements with box shadows (#1967)
QuintonJason Sep 4, 2024
60e8be0
fix: change legacy colors to mapped values ie red 500 to red 95
QuintonJason Aug 20, 2024
db39059
fix: remove old 100 tokens
QuintonJason Aug 20, 2024
9ca76b3
fix: add 0 to make token 3 digits
QuintonJason Aug 20, 2024
23ac201
fix: add red color classes
QuintonJason Aug 20, 2024
96dbb7b
fix: add 0 to green color token names
QuintonJason Aug 20, 2024
89cd25d
fix: add 0 to blue color token names
QuintonJason Aug 20, 2024
2b03d37
fix: add 0 to mercury color token names
QuintonJason Aug 20, 2024
898a1d0
fix: add 0 to yellow color token names
QuintonJason Aug 20, 2024
c521526
fix: add 0 to purple color token names
QuintonJason Aug 20, 2024
d10e776
fix: update grey color token names to 3 digits
QuintonJason Aug 20, 2024
7dcc2c7
fix: update react green colors
QuintonJason Aug 21, 2024
c527b1e
fix: update react purple colors
QuintonJason Aug 21, 2024
8af1541
fix: update red in jsx and erb
QuintonJason Aug 21, 2024
3476ad3
fix: update orange color token to mercury
QuintonJason Aug 21, 2024
c9ce881
fix: update charcoal color token to upper greys
QuintonJason Aug 22, 2024
8e3ad3f
fix: update grey color token to lower greys
QuintonJason Aug 22, 2024
a695b95
fix: add options for default color values
QuintonJason Aug 23, 2024
c2fcfe3
chore: remove whitespace
QuintonJason Aug 23, 2024
020550c
fix: self review fix grey 300 and grey 400 in css
QuintonJason Aug 23, 2024
4c1b3d0
Revert "fix: self review fix grey 300 and grey 400 in css"
QuintonJason Aug 26, 2024
fbef081
Revert "fix: update grey color token to lower greys"
QuintonJason Aug 26, 2024
33c2f43
fix: update grey color token to lower greys
QuintonJason Aug 27, 2024
f297884
Revert "fix: update grey color token to lower greys"
QuintonJason Aug 28, 2024
4999217
style: update purple color token to use three digits
kajabi-bot Sep 5, 2024
a72be75
style: update additional 2 digit token value to 3 digit token values
kajabi-bot Sep 5, 2024
6e6323e
style: added zero to mercury 30
QuintonJason Sep 5, 2024
cc38799
style: update templating to wrap 050 values in single-quotes
kajabi-bot Sep 6, 2024
554fa7b
style(breadcrumbs): change charcoal 400 to grey 900
kajabi-bot Oct 1, 2024
0fd7903
fix: update gray to grey instances
QuintonJason Oct 1, 2024
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
48 changes: 24 additions & 24 deletions docs/app/helpers/type_specs_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,51 +126,51 @@ def sage_type_specs_color_classes
)),
},
{
color: %(<span class="t-sage-body-semi t-sage--color-charcoal-100">Grey</span>),
type_class: md("`t-sage--color-charcoal-100`"),
color: %(<span class="t-sage-body-semi t-sage--color-grey-600">Grey</span>),
type_class: md("`t-sage--color-grey-600`"),
constants: md(%(
Rails: `SageClassnames::TYPE_COLORS::CHARCOAL_100`<br/>
React: `SageClassnames.TYPE_COLORS.CHARCOAL_100`
Rails: `SageClassnames::TYPE_COLORS::GREY_600`<br/>
React: `SageClassnames.TYPE_COLORS.GREY_600`
)),
},
{
color: %(<span class="t-sage-body-semi t-sage--color-red-300">Red</span>),
type_class: md("`t-sage--color-red-300`"),
color: %(<span class="t-sage-body-semi t-sage--color-red-600">Red</span>),
type_class: md("`t-sage--color-red-600`"),
constants: md(%(
Rails: `SageClassnames::TYPE_COLORS::RED_300`<br/>
React: `SageClassnames.TYPE_COLORS.RED_300`
Rails: `SageClassnames::TYPE_COLORS::RED_600`<br/>
React: `SageClassnames.TYPE_COLORS.RED_600`
)),
},
{
color: %(<span class="t-sage-body-semi t-sage--color-orange-300">Orange</span>),
type_class: md("`t-sage--color-orange-300`"),
color: %(<span class="t-sage-body-semi t-sage--color-mercury-500">Orange</span>),
type_class: md("`t-sage--color-mercury-500`"),
constants: md(%(
Rails: `SageClassnames::TYPE_COLORS::ORANGE_300`<br/>
React: `SageClassnames.TYPE_COLORS.ORANGE_300`
Rails: `SageClassnames::TYPE_COLORS::MERCURY_500`<br/>
React: `SageClassnames.TYPE_COLORS.MERCURY_500`
)),
},
{
color: %(<span class="t-sage-body-semi t-sage--color-yellow-300">Yellow</span>),
type_class: md("`t-sage--color-yellow-300`"),
color: %(<span class="t-sage-body-semi t-sage--color-yellow-400">Yellow</span>),
type_class: md("`t-sage--color-yellow-400`"),
constants: md(%(
Rails: `SageClassnames::TYPE_COLORS::YELLOW_300`<br/>
React: `SageClassnames.TYPE_COLORS.YELLOW_300`
Rails: `SageClassnames::TYPE_COLORS::YELLOW_400`<br/>
React: `SageClassnames.TYPE_COLORS.YELLOW_400`
)),
},
{
color: %(<span class="t-sage-body-semi t-sage--color-sage-300">Sage</span>),
type_class: md("`t-sage--color-sage-300`"),
color: %(<span class="t-sage-body-semi t-sage--color-green-600">Sage</span>),
type_class: md("`t-sage--color-green-600`"),
constants: md(%(
Rails: `SageClassnames::TYPE_COLORS::SAGE_300`<br/>
React: `SageClassnames.TYPE_COLORS.SAGE_300`
Rails: `SageClassnames::TYPE_COLORS::GREEN_600`<br/>
React: `SageClassnames.TYPE_COLORS.GREEN_600`
)),
},
{
color: %(<span class="t-sage-body-semi t-sage--color-purple-300">Purple</span>),
type_class: md("`t-sage--color-purple-300`"),
color: %(<span class="t-sage-body-semi t-sage--color-purple-600">Purple</span>),
type_class: md("`t-sage--color-purple-600`"),
constants: md(%(
Rails: `SageClassnames::TYPE_COLORS::PURPLE_300`<br/>
React: `SageClassnames.TYPE_COLORS.PURPLE_300`
Rails: `SageClassnames::TYPE_COLORS::PURPLE_600`<br/>
React: `SageClassnames.TYPE_COLORS.PURPLE_600`
)),
}
]
Expand Down
1 change: 0 additions & 1 deletion docs/app/views/examples/components/dot/_preview.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<%= sage_component SageDot, { color: "red" } %>
<%= sage_component SageDot, { color: "yellow" } %>
<%= sage_component SageDot, { color: "purple" } %>
<%= sage_component SageDot, { color: "charcoal" } %>
<%= sage_component SageDot, { color: "grey" } %>

<h3>Custom color</h3>
Expand Down
2 changes: 1 addition & 1 deletion docs/app/views/examples/components/drawer/_preview.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<%
heading_specs = "#{SageClassnames::TYPE::HEADING_4} #{SageClassnames::TYPE_COLORS::CHARCOAL_500}"
heading_specs = "#{SageClassnames::TYPE::HEADING_4} #{SageClassnames::TYPE_COLORS::GREY_950}"
modal_primary_content = %(
<h3 class="#{heading_specs}">
Drawer
Expand Down
6 changes: 3 additions & 3 deletions docs/app/views/examples/components/icon_list/_preview.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
items: [
{
bullet: %(
<pds-icon name="circle-1" class="t-sage--color-charcoal-300""></pds-icon>
<pds-icon name="circle-1" class="t-sage--color-grey-800""></pds-icon>
),
body: %(
<h4 class="sage-icon-list-item__title">Lorem ipsum dolor sit amet</h4>
Expand All @@ -12,7 +12,7 @@
},
{
bullet: %(
<pds-icon name="circle-2" class="t-sage--color-charcoal-300""></pds-icon>
<pds-icon name="circle-2" class="t-sage--color-grey-800""></pds-icon>
),
body: %(
<h4 class="sage-icon-list-item__title">Lorem ipsum dolor sit amet</h4>
Expand All @@ -21,7 +21,7 @@
},
{
bullet: %(
<pds-icon name="circle-3" class="t-sage--color-charcoal-300""></pds-icon>
<pds-icon name="circle-3" class="t-sage--color-grey-800""></pds-icon>
),
body: %(
<h4 class="sage-icon-list-item__title">Lorem ipsum dolor sit amet</h4>
Expand Down
2 changes: 1 addition & 1 deletion docs/app/views/examples/components/panel_figure/_preview.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ but note that Wistia objects need a little additional styling that can be enable
<%= sage_component SagePanelFigure, {
bleed: "top",
padded: true,
background_color: SageTokens::COLOR_PALETTE[:CHARCOAL_100],
background_color: SageTokens::COLOR_PALETTE[:GREY_600],
} do %>
<%= image_tag("card-placeholder-lg.png", alt: "") %>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion docs/app/views/examples/layouts/frame/examples/_nesting.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<h4 class="<%= SageClassnames::TYPE::HEADING_3 %>">
Lorem ipsum dolor sit
</h4>
<p class="<%= "#{SageClassnames::TYPE::BODY_SMALL} #{SageClassnames::TYPE_COLORS::CHARCOAL_200}" %>">
<p class="<%= "#{SageClassnames::TYPE::BODY_SMALL} #{SageClassnames::TYPE_COLORS::GREY_700}" %>">
Consectetur adipiscing elit
</p>
<% end %>
Expand Down
4 changes: 2 additions & 2 deletions docs/app/views/examples/layouts/frame/examples/_stat_box.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
} do %>
<%= sage_layout SageFrame, { gap: "xs" } do %>
<%= sage_layout SageFrame, { gap: "none" } do %>
<h3 class="<%= "#{SageClassnames::TYPE::BODY_SMALL} #{SageClassnames::TYPE_COLORS::CHARCOAL_200}" %>">
<h3 class="<%= "#{SageClassnames::TYPE::BODY_SMALL} #{SageClassnames::TYPE_COLORS::GREY_700}" %>">
All payments
</h3>
<%= sage_layout SageFrame, {
Expand All @@ -20,7 +20,7 @@
<b class="<%= "#{SageClassnames::TYPE::HEADING_5}" %>">
40
</b>
<span class="<%= "#{SageClassnames::TYPE::BODY_XSMALL} #{SageClassnames::TYPE_COLORS::CHARCOAL_100}" %>">
<span class="<%= "#{SageClassnames::TYPE::BODY_XSMALL} #{SageClassnames::TYPE_COLORS::GREY_600}" %>">
successful payments
</span>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion docs/app/views/pages/_color_values.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<%= render "color_values_body", color: color, value: value %>
<% end %>
<% else %>
<% [5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 95].each do |value| %>
<% ["050", 100, 200, 300, 400, 500, 600, 700, 800, 950].each do |value| %>
<%= render "color_values_body", color: color, value: value %>
<% end %>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion docs/app/views/pages/grid_templates.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ dots = [
%(<pds-icon name="star" class="sage-icon-star t-sage--color-orange"></pds-icon>).html_safe,
sage_component(SageBadge, { value: "Verified", color: "published" }).html_safe,
%(<span class="t-sage-body-small-semi">$5.99</span>).html_safe,
%(<pds-icon name="dot-menu-horizontal" class="sage-icon-dot-menu-horizontal t-sage--color-charcoal"></pds-icon>).html_safe
%(<pds-icon name="dot-menu-horizontal" class="sage-icon-dot-menu-horizontal t-sage--color-grey-800"></pds-icon>).html_safe
]
%>

Expand Down
6 changes: 3 additions & 3 deletions docs/lib/sage-frontend/stylesheets/docs/_code.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
}
}
pre .nocode {
color: sage-color(charcoal, 500);
color: sage-color(grey, 950);
background-color: none;
}
pre .str { /* string */
Expand All @@ -49,13 +49,13 @@ pre .lit { /* literal */
color: sage-color(sage, 100);
}
pre .pun { /* punctuation */
color: sage-color(purple, 100);
color: sage-color(purple, 150);
}
pre .pln { /* plaintext */
color: sage-color(primary, 100);
}
pre .tag { /* html/xml tag */
color: sage-color(purple, 100);
color: sage-color(purple, 150);
font-weight: bold;
}
pre .atn { /* attribute name */
Expand Down
32 changes: 19 additions & 13 deletions docs/lib/sage-frontend/stylesheets/docs/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,39 +47,45 @@
@each $value, $map in $color {
$hex: sage-color($name, $value);

.color-#{"" + $name}-#{$value} {
// Determine class name for $value == 50
$classname: ".color-#{"" + $name}-#{$value}";
@if ($value == 50) {
$classname: ".color-#{"" + $name}-0#{$value}";
}

#{$classname} {
Comment on lines +50 to +56
Copy link
Collaborator

Choose a reason for hiding this comment

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

I had to add this because of how 050 was being treated. This will generate the class name .color-blue-050 instead of .color-blue-50, which is incorrect.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Nice catch

padding: sage-spacing(sm) sage-spacing();
font-size: sage-font-size(body);
background: $hex;

@if ($name == grey and $value > 40) {
@if ($name == grey and $value > 400) {
color: sage-color(white);
}
@else if ($name == white or $name == grey) {
color: sage-color(charcoal, 500);
color: sage-color(grey, 950);
}
@else if ($name == black or $name == charcoal) {
color: sage-color(white);
}
@else if ($name == blue and $value > 40) {
color: sage-color(blue, 20);
@else if ($name == blue and $value > 400) {
color: sage-color(blue, 200);
}
@else if ($name == blue) {
color: sage-color(blue, 95);
color: sage-color(blue, 950);
}
@else if ($name == mercury and $value > 20) {
@else if ($name == mercury and $value > 200) {
color: sage-color(white);
}
@else if ($name == mercury) {
color: sage-color(mercury, 50);
color: sage-color(mercury, 500);
}
@else if ($name == green and $value > 20) {
@else if ($name == green and $value > 200) {
color: sage-color(white);
}
@else if ($name == green) {
color: sage-color(green, 60);
color: sage-color(green, 600);
}
@else if ($name == yellow and $value > 30) {
@else if ($name == yellow and $value > 300) {
color: sage-color(white);
}
@else if (lightness($hex) < 65) {
Expand All @@ -105,8 +111,8 @@

.color-white-100 {
border-radius: sage-border(radius);
border: 1px solid sage-color(charcoal, 300);
box-shadow: inset 0 0 0.0625rem sage-color(charcoal, 300);
border: 1px solid sage-color(grey, 800);
box-shadow: inset 0 0 0.0625rem sage-color(grey, 800);
}

.color-black-100 {
Expand Down
16 changes: 8 additions & 8 deletions docs/lib/sage-frontend/stylesheets/docs/_example.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
================================================== */

$-example-link-color: inherit;
$-example-link-color-hover: sage-color(charcoal, 100);
$-example-link-color-hover: sage-color(grey, 600);

$-example-code-preview-height: 13rem;
$-example-code-preview-button-color: sage-color(white);
Expand All @@ -14,7 +14,7 @@ $-example-code-preview-button-blur: blur(2px);
$-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);

.example__title {
color: sage-color(charcoal, 500);
color: sage-color(grey, 950);
text-transform: capitalize;
}

Expand All @@ -40,7 +40,7 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
&:hover,
&:focus,
&:active {
color: sage-color(charcoal, 500);
color: sage-color(grey, 950);
text-decoration: none;
}
}
Expand All @@ -50,7 +50,7 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
min-width: rem(100px);
margin: sage-spacing() 0;
padding: sage-spacing(xs) sage-spacing();
color: sage-color(charcoal, 500);
color: sage-color(grey, 950);
text-align: center;
background: sage-color(white);
box-shadow: sage-shadow();
Expand Down Expand Up @@ -164,13 +164,13 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
overflow: hidden;
padding: 0;
border: 0;
background: sage-color(gray, 100);
background: sage-color(grey, 100);
}
.sage-card__header {
padding: sage-spacing();
padding-bottom: sage-spacing(xs);
code {
background: sage-color(gray, 300);
background: sage-color(grey, 300);
}
}
}
Expand All @@ -197,11 +197,11 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
@media (max-width: map-get($-media-tile-breakpoints, 1-col-max)) {
grid-template-columns: repeat(1, 1fr);
}

@media (min-width: map-get($-media-tile-breakpoints, 2-col-min)) and (max-width: map-get($-media-tile-breakpoints, 2-col-max)) {
grid-template-columns: repeat(2, 1fr);
}

@media (min-width: map-get($-media-tile-breakpoints, 3-col-min)) {
grid-template-columns: repeat(3, 1fr);
}
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/sage-frontend/stylesheets/docs/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

.docs-footer {
padding: sage-spacing(2xl) sage-spacing();
background: sage-color(gray, 200);
background: sage-color(grey, 200);

.sage-stage & {
padding: sage-spacing(2xl) 0;
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/sage-frontend/stylesheets/docs/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
margin-bottom: sage-spacing(md);
padding: sage-spacing(xs) sage-spacing(md);
text-align: center;
background: sage-color(grey, 300);
background: sage-color(grey, 200);
border-radius: sage-border(radius);

[class*="sage-col--align-"] & {
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/sage-frontend/stylesheets/docs/_home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
For Sage documentation use
================================================== */
.docs-home {
background: sage-color(gray, 200);
background: sage-color(grey, 200);
}

.docs-hero {
Expand Down
4 changes: 2 additions & 2 deletions docs/lib/sage-frontend/stylesheets/docs/_icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
margin-bottom: sage-spacing();
padding: sage-spacing(lg) sage-spacing(sm);
text-align: center;
background: sage-color(grey, 200);
background: sage-color(grey, 150);
border-radius: sage-border(radius);
cursor: pointer;
}
Expand All @@ -29,7 +29,7 @@
margin-bottom: sage-spacing(sm);
padding: sage-spacing(sm);
text-align: right;
background: sage-color(grey, 200);
background: sage-color(grey, 150);
border-radius: sage-border(radius);
i {
line-height: 1;
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
For Sage documentation use
================================================== */

$-quick-links-color-text: sage-color(charcoal, 400);
$-quick-links-color-text: sage-color(grey, 900);
$-quick-links-color-focus: sage-color(primary, 300);
$-quick-links-color-background: sage-color(primary, 200);

Expand Down
Loading
Loading