Skip to content

Commit

Permalink
fix: update existing core color tokens (#1905)
Browse files Browse the repository at this point in the history 
* fix: update existing core color tokens

* fix: update existing core color tokens

* fix: updates to color function

* docs: implemented branding color changes

* style: implemented branding color changes

* style: refactored nesting to appease stylelint

* docs: created partial for colors to reduce code
  • Loading branch information
@pixelflips
pixelflips authored Jul 11, 2024
1 parent c279013 commit 10e7300
Show file tree
Hide file tree
Showing 13 changed files with 3,842 additions and 648 deletions.
199 changes: 9 additions & 190 deletions docs/app/views/pages/_color_values.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,192 +1,11 @@
<div class="colors">
<div class="colors__block color-<%= color %>-100">
<div class="colors__tokens">
<div class="colors__classname-token <%= "#{SageClassnames::SPACERS::SM_BOTTOM}" %>">
<h3 class="colors__tokens-heading">Classname Token</h3>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageClassnames::TYPE_COLORS::#{color.upcase}_100"
} %>
</div>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageClassnames.TYPE_COLORS.#{color.upcase}_100"
} %>
</div>
</div>
<div class="colors__hex-token">
<h3 class="colors__tokens-heading">Hex Token</h3>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_100]"
} %>
</div>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageTokens.COLOR_PALETTE.#{color.upcase}_100"
} %>
</div>
</div>
</div>
</div>
<div class="colors__block color-<%= color %>-200">
<div class="colors__tokens">
<div class="colors__classname-token <%= "#{SageClassnames::SPACERS::SM_BOTTOM}" %>">
<h3 class="colors__tokens-heading">Classname Token</h3>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageClassnames::TYPE_COLORS::#{color.upcase}_200"
} %>
</div>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageClassnames.TYPE_COLORS.#{color.upcase}_200"
} %>
</div>
</div>
<div class="colors__hex-token">
<h3 class="colors__tokens-heading">Hex Token</h3>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_200]"
} %>
</div>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageTokens.COLOR_PALETTE.#{color.upcase}_200"
} %>
</div>
</div>
</div>
</div>
<div class="colors__block color-<%= color %>-300">
<div class="colors__tokens">
<div class="colors__classname-token <%= "#{SageClassnames::SPACERS::SM_BOTTOM}" %>">
<h3 class="colors__tokens-heading">Classname Token</h3>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageClassnames::TYPE_COLORS::#{color.upcase}_300"
} %>
</div>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageClassnames.TYPE_COLORS.#{color.upcase}_300"
} %>
</div>
</div>
<div class="colors__hex-token">
<h3 class="colors__tokens-heading">Hex Token</h3>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_300]"
} %>
</div>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageTokens.COLOR_PALETTE.#{color.upcase}_300"
} %>
</div>
</div>
</div>
</div>
<div class="colors__block color-<%= color %>-400">
<div class="colors__tokens">
<div class="colors__classname-token <%= "#{SageClassnames::SPACERS::SM_BOTTOM}" %>">
<h3 class="colors__tokens-heading">Classname Token</h3>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageClassnames::TYPE_COLORS::#{color.upcase}_400"
} %>
</div>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageClassnames.TYPE_COLORS.#{color.upcase}_400"
} %>
</div>
</div>
<div class="colors__hex-token">
<h3 class="colors__tokens-heading">Hex Token</h3>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_400]"
} %>
</div>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageTokens.COLOR_PALETTE.#{color.upcase}_400"
} %>
</div>
</div>
</div>
</div>
<div class="colors__block color-<%= color %>-500">
<div class="colors__tokens">
<div class="colors__classname-token <%= "#{SageClassnames::SPACERS::SM_BOTTOM}" %>">
<h3 class="colors__tokens-heading">Classname Token</h3>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageClassnames::TYPE_COLORS::#{color.upcase}_500"
} %>
</div>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageClassnames.TYPE_COLORS.#{color.upcase}_500"
} %>
</div>
</div>
<div class="colors__hex-token">
<h3 class="colors__tokens-heading">Hex Token</h3>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_500]"
} %>
</div>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageTokens.COLOR_PALETTE.#{color.upcase}_500"
} %>
</div>
</div>
</div>
</div>
<% if color == "primary" || color == "sage" || color == "orange" %>
<% [100, 200, 300, 400, 500].each do |value| %>
<%= render "color_values_body", color: color, value: value %>
<% end %>
<% else %>
<% [5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 95].each do |value| %>
<%= render "color_values_body", color: color, value: value %>
<% end %>
<% end %>
</div>
38 changes: 38 additions & 0 deletions docs/app/views/pages/_color_values_body.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<div class="colors__block color-<%= color %>-<%= value %>">
<div class="colors__tokens">
<div class="colors__classname-token <%= "#{SageClassnames::SPACERS::SM_BOTTOM}" %>">
<h3 class="colors__tokens-heading">Classname Token</h3>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageClassnames::TYPE_COLORS::#{color.upcase}_#{value}"
} %>
</div>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageClassnames.TYPE_COLORS.#{color.upcase}_#{value}"
} %>
</div>
</div>
<div class="colors__hex-token">
<h3 class="colors__tokens-heading">Hex Token</h3>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_#{value}]"
} %>
</div>
<div>
<%= sage_component SageCopyButton, {
borderless: true,
css_classes: "colors__copy-btn",
value: "SageTokens.COLOR_PALETTE.#{color.upcase}_#{value}"
} %>
</div>
</div>
</div>
</div>
29 changes: 24 additions & 5 deletions docs/app/views/pages/color.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,17 @@ General background and text colors.
Text and border colors, drop-shadows, and other interface components.
", use_sage_type: true) %>
<%= render "color_values_neutral", color: "grey"%>
<%= render "color_values_neutral", color: "charcoal"%>
<%= render "color_values", color: "grey"%>
</div>

<div id="primary">
<%= md("
## Primary palette
Kajabi blue is the primary color used to signify that an element is clickable or has a selected state.
To signify that an element is clickable or has a selected state.
", use_sage_type: true) %>
<%= render "color_values", color: "primary"%>
<%= render "color_values", color: "blue"%>
<%= render "color_values", color: "mercury"%>
</div>

<div id="success">
Expand All @@ -45,7 +45,7 @@ Kajabi blue is the primary color used to signify that an element is clickable or
To communicate success and positive states.
", use_sage_type: true) %>
<%= render "color_values", color: "sage"%>
<%= render "color_values", color: "green"%>
</div>

<div id="warning">
Expand Down Expand Up @@ -73,5 +73,24 @@ Reserved for times when something important is missing or for irreversible or de
Used only when no other color option is available.
", use_sage_type: true) %>
<%= render "color_values", color: "purple"%>
</div>

<div id="deprecated">
<%= md("
## Deprecated colors
It is no longer recommended to use these colors.
", use_sage_type: true) %>
<h3 class="sage-spacer-top">Primary</h3>
<p>Blue should be used instead of primary.</p>
<%= render "color_values", color: "primary"%>
<h3>Sage</h3>
<p>Green should be used instead of sage.</p>
<%= render "color_values", color: "sage"%>
<h3>Orange</h3>
<p>Mercury should be used instead of orange.</p>
<%= render "color_values", color: "orange"%>
<h3>Charcoal</h3>
<p>Grey should be used instead of charcoal.</p>
<%= render "color_values_neutral", color: "charcoal"%>
</div>
31 changes: 26 additions & 5 deletions docs/lib/sage-frontend/stylesheets/docs/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,18 +52,39 @@
font-size: sage-font-size(body);
background: $hex;

@if (($name == white) or ($name == grey)) {
@if ($name == grey and $value > 40) {
color: sage-color(white);
}
@else if ($name == white or $name == grey) {
color: sage-color(charcoal, 500);
}

@else if (($name == black) or ($name == charcoal)) {
@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) {
color: sage-color(blue, 95);
}
@else if ($name == mercury and $value > 20) {
color: sage-color(white);
}
@else if ($name == mercury) {
color: sage-color(mercury, 50);
}
@else if ($name == green and $value > 20) {
color: sage-color(white);
}
@else if ($name == green) {
color: sage-color(green, 60);
}
@else if ($name == yellow and $value > 30) {
color: sage-color(white);
}

@else if (lightness($hex) < 65) {
color: sage-color($name, 100);
}

@else {
color: sage-color($name, 400);
}
Expand Down
Loading

0 comments on commit 10e7300

Please sign in to comment.