fix: update charcoal color token to upper greys

Kajabi · Aug 22, 2024 · c5c3b8d · c5c3b8d
1 parent 1d3335d
commit c5c3b8d
Show file tree

Hide file tree

Showing 86 changed files with 233 additions and 234 deletions.
diff --git a/docs/app/helpers/type_specs_helper.rb b/docs/app/helpers/type_specs_helper.rb
@@ -126,11 +126,11 @@ 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`
         )),
       },
       {

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/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 */

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss
@@ -56,7 +56,7 @@
         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);
@@ -105,8 +105,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();
@@ -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/_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);
 

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss
@@ -1,15 +1,15 @@
 // background
 $-color-1: sage-color(grey, 200);
 // Whitespace
-$-color-24: sage-color(charcoal, 200);
+$-color-24: sage-color(grey, 700);
 // Name entity
-$-color-20: sage-color(charcoal, 400);
+$-color-20: sage-color(grey, 900);
 // Operators, numbers
-$-color-6: sage-color(charcoal, 300);
+$-color-6: sage-color(grey, 800);
 // Heading and prompt
-$-color-9: sage-color(charcoal, 400);
+$-color-9: sage-color(grey, 900);
 // Comments of various sorts
-$-color-3: sage-color(charcoal, 300);
+$-color-3: sage-color(grey, 800);
 // Subheading
 $-color-12: sage-color(red, 500);
 // Constant
@@ -29,7 +29,7 @@ $-color-25: sage-color(orange, 200);
 // Regex/interpolation
 $-color-26: sage-color(orange, 200);
 // Preproc comment
-$-color-7: sage-color(charcoal, 300);
+$-color-7: sage-color(grey, 800);
 // Highlight?
 $-color-2: sage-color(yellow, 150);
 // Name label

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss
@@ -7,7 +7,7 @@
 .sage-specs {
   th {
     padding: 4px;
-    color: sage-color(charcoal, 200);
+    color: sage-color(grey, 700);
     border-bottom: 1px solid sage-color(grey, 300);
   }
 

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss b/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss
@@ -52,7 +52,7 @@
     margin-left: sage-spacing(xs);
     font-size: sage-font-size(body-sm);
     font-weight: sage-font-weight(semibold);
-    color: sage-color(charcoal, 200);
+    color: sage-color(grey, 700);
   }
 
   @media screen and (min-width: sage-breakpoint(lg-min)) {

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss b/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss
@@ -6,7 +6,7 @@
 
 $-status-table-border: rem(2px) solid sage-color(grey);
 $-status-table-cell-padding: sage-spacing(xs) sage-spacing(sm);
-$-status-table-heading-color: sage-color(charcoal, 100);
+$-status-table-heading-color: sage-color(grey, 600);
 $-status-table-heading-font-size: sage-font-size(body-sm);
 $-status-table-heading-padding: sage-spacing(xs) sage-spacing(sm);
 

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_breadcrumbs.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_breadcrumbs.html.erb
@@ -32,7 +32,7 @@ is_progressbar = component.is_progressbar.present? && component.is_progressbar
           <% if is_progressbar %>
             <pds-icon
               class="sage-breadcrumbs__icon <%= SageClassnames::SPACERS::XS_LEFT %> <%= SageClassnames::SPACERS::XS_RIGHT %>"
-              color="<%= SageTokens::COLOR_PALETTE[:CHARCOAL_200] %>"
+              color="<%= SageTokens::COLOR_PALETTE[:GREY_700] %>"
               name="right-small"
               size="24px"
             ></pds-icon>

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb
@@ -51,7 +51,7 @@
   <pds-icon
     aria-hidden="true"
     class="sage-select__arrow"
-    color="<%= SageTokens::COLOR_PALETTE[:CHARCOAL_100] %>"
+    color="<%= SageTokens::COLOR_PALETTE[:GREY_600] %>"
     name="caret-down"
   ></pds-icon>
   <% if component.message.present? %>

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_modal_content.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_modal_content.html.erb
@@ -37,7 +37,7 @@
 
       <% if component.subheader %>
         <%= sage_component SageCardRow, { grid_template: "te" } do %>
-          <h2 class="<%= "#{SageClassnames::TYPE::BODY} #{SageClassnames::TYPE_COLORS::CHARCOAL_300}" %>">
+          <h2 class="<%= "#{SageClassnames::TYPE::BODY} #{SageClassnames::TYPE_COLORS::GREY_800}" %>">
             <%= component.subheader %>
           </h2>
 

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_search.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_search.html.erb
@@ -13,7 +13,7 @@
     <%= component.label_text %>
   </label>
   <div class="sage-search__field-wrapper">
-    <pds-icon name="search-small" class="<%= SageClassnames::SPACERS::SM_LEFT %>" color="<%= SageTokens::COLOR_PALETTE[:CHARCOAL_200] %>" style="z-index:2"></pds-icon>
+    <pds-icon name="search-small" class="<%= SageClassnames::SPACERS::SM_LEFT %>" color="<%= SageTokens::COLOR_PALETTE[:GREY_700] %>" style="z-index:2"></pds-icon>
     <input
       id="<%= component.id %>"
       class="sage-search__input"

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_sortable_item.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_sortable_item.html.erb
@@ -8,7 +8,7 @@
   <%= "id=#{component.id}" if component.id %>
   <%= component.generated_html_attributes.html_safe %>
 >
-  <pds-icon name="handle-2-vertical" color="<%= SageTokens::COLOR_PALETTE[:CHARCOAL_200] %>"></pds-icon>
+  <pds-icon name="handle-2-vertical" color="<%= SageTokens::COLOR_PALETTE[:GREY_700] %>"></pds-icon>
   <% if component.image.present? %>
     <div class="sage-sortable__item-image">
       <%= image_tag component.image, alt: "Cover for #{component.title}" %>

diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss
@@ -22,8 +22,8 @@ $-alert-background-colors: (
 );
 
 $-alert-icon-colors: (
-  default: sage-color(charcoal, 200),
-  draft: sage-color(charcoal, 200),
+  default: sage-color(grey, 700),
+  draft: sage-color(grey, 700),
   info: sage-color(primary, 300),
   published: sage-color(sage, 300),
   success: sage-color(sage, 300),
@@ -99,7 +99,7 @@ $-alert-icon-colors: (
 
 .sage-alert__title {
   @extend %t-sage-heading-5;
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
 }
 
 .sage-alert__title--add-on {
@@ -144,11 +144,11 @@ $-alert-icon-colors: (
     @extend %t-sage-body-med;
     @include sage-focus-outline($outline-offset-inline: 4px);
 
-    color: sage-color(charcoal, 400);
+    color: sage-color(grey, 900);
     text-decoration: none;
 
     &:hover {
-      color: sage-color(charcoal, 500);
+      color: sage-color(grey, 950);
       text-decoration: underline;
     }
 
@@ -171,11 +171,11 @@ $-alert-icon-colors: (
   a:not([class*="sage-"]) {
     @include sage-focus-outline($outline-offset-inline: 4px);
 
-    color: sage-color(charcoal, 400);
+    color: sage-color(grey, 900);
     text-decoration: underline;
 
     &:hover {
-      color: sage-color(charcoal, 500);
+      color: sage-color(grey, 950);
       text-decoration: none;
     }
 

diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
@@ -9,11 +9,11 @@ $-avatar-min-size: rem(32px);
 $-avatar-max-size: rem(128px);
 $-avatar-ring-colors: (
   charcoal: (
-    main: sage-color(charcoal, 500),
+    main: sage-color(grey, 950),
     bg: sage-color(grey, 200)
   ),
   grey: (
-    main: sage-color(charcoal, 500),
+    main: sage-color(grey, 950),
     bg: sage-color(grey, 200)
   ),
   purple: (

diff --git a/packages/sage-assets/lib/stylesheets/components/_badge.scss b/packages/sage-assets/lib/stylesheets/components/_badge.scss
@@ -41,7 +41,7 @@ $-badge-statuses: (
   max-width: 100%;
   min-height: $-badge-min-height;
   padding: $-badge-padding;
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 950);
   white-space: nowrap;
   background-color: transparent;
   border-radius: $-badge-border-radius;

diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss
@@ -15,14 +15,14 @@ $-banner-colors: (
   ),
   secondary: (
     background: sage-color(grey, 200),
-    text: sage-color(charcoal, 500),
-    text-hover: sage-color(charcoal, 300),
+    text: sage-color(grey, 950),
+    text-hover: sage-color(grey, 800),
     icon: "info-circle",
   ),
   warning: (
     background: sage-color(yellow, 300),
-    text: sage-color(charcoal, 500),
-    text-hover: sage-color(charcoal, 300),
+    text: sage-color(grey, 950),
+    text-hover: sage-color(grey, 800),
     icon: "warning",
   ),
   danger: (