style: update color token name 3 digits (#1955)

* fix(frame): add box shadow to bordered frame (#1958) * style: remove border from box like elements with box shadows (#1967) * style: add shadow to frame * style: remove border from box-like elements * chore: remove white space for linter * fix: change legacy colors to mapped values ie red 500 to red 95 * fix: remove old 100 tokens * fix: add 0 to make token 3 digits * fix: add red color classes * fix: add 0 to green color token names * fix: add 0 to blue color token names * fix: add 0 to mercury color token names * fix: add 0 to yellow color token names * fix: add 0 to purple color token names * fix: update grey color token names to 3 digits * fix: update react green colors * fix: update react purple colors * fix: update red in jsx and erb * fix: update orange color token to mercury * fix: update charcoal color token to upper greys * fix: update grey color token to lower greys * fix: add options for default color values * chore: remove whitespace * fix: self review fix grey 300 and grey 400 in css * Revert "fix: self review fix grey 300 and grey 400 in css" This reverts commit 2ae5967. * Revert "fix: update grey color token to lower greys" This reverts commit 69f8706. * fix: update grey color token to lower greys * Revert "fix: update grey color token to lower greys" This reverts commit 2f43f1d. * style: update purple color token to use three digits * style: update additional 2 digit token value to 3 digit token values * style: added zero to mercury 30 * style: update templating to wrap 050 values in single-quotes * style(breadcrumbs): change charcoal 400 to grey 900 * fix: update gray to grey instances --------- Co-authored-by: Julian Skinner <[email protected]>
Kajabi · Oct 2, 2024 · 5e79d77 · 5e79d77
1 parent ae01d8e
commit 5e79d77
Show file tree

Hide file tree

Showing 123 changed files with 2,746 additions and 3,454 deletions.
diff --git a/docs/app/helpers/type_specs_helper.rb b/docs/app/helpers/type_specs_helper.rb
@@ -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`
         )),
       }
     ]

diff --git a/docs/app/views/examples/components/dot/_preview.html.erb b/docs/app/views/examples/components/dot/_preview.html.erb
@@ -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>

diff --git a/docs/app/views/examples/components/drawer/_preview.html.erb b/docs/app/views/examples/components/drawer/_preview.html.erb
@@ -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

diff --git a/docs/app/views/examples/components/icon_list/_preview.html.erb b/docs/app/views/examples/components/icon_list/_preview.html.erb
@@ -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>
@@ -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>
@@ -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>

diff --git a/docs/app/views/examples/components/panel_figure/_preview.html.erb b/docs/app/views/examples/components/panel_figure/_preview.html.erb
@@ -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 %>

diff --git a/docs/app/views/examples/layouts/frame/examples/_nesting.html.erb b/docs/app/views/examples/layouts/frame/examples/_nesting.html.erb
@@ -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 %>

diff --git a/docs/app/views/examples/layouts/frame/examples/_stat_box.html.erb b/docs/app/views/examples/layouts/frame/examples/_stat_box.html.erb
@@ -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, {
@@ -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 %>

diff --git a/docs/app/views/pages/_color_values.html.erb b/docs/app/views/pages/_color_values.html.erb
@@ -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 %>

diff --git a/docs/app/views/pages/grid_templates.html.erb b/docs/app/views/pages/grid_templates.html.erb
@@ -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
 ]
 %>
 

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_code.scss b/docs/lib/sage-frontend/stylesheets/docs/_code.scss
@@ -28,7 +28,7 @@
   }
 }
 pre .nocode {
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
   background-color: none;
 }
 pre .str { /* string */
@@ -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 */

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss
@@ -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} {
       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) {
@@ -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 {

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_example.scss b/docs/lib/sage-frontend/stylesheets/docs/_example.scss
@@ -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);
@@ -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;
 }
 
@@ -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;
   }
 }
@@ -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();
@@ -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);
     }
   }
 }
@@ -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);
     }

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_footer.scss b/docs/lib/sage-frontend/stylesheets/docs/_footer.scss
@@ -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;

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss
@@ -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-"] & {

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_home.scss b/docs/lib/sage-frontend/stylesheets/docs/_home.scss
@@ -4,7 +4,7 @@
   For Sage documentation use
 ================================================== */
 .docs-home {
-  background: sage-color(gray, 200);
+  background: sage-color(grey, 200);
 }
 
 .docs-hero {

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_icon.scss b/docs/lib/sage-frontend/stylesheets/docs/_icon.scss
@@ -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;
 }
@@ -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;

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss b/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss
@@ -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);