feat!(rebrand): mercury-rising rebrand effort

BREAKING CHANGE: This is a breaking change due to the rebranding effort ci: update rebrand mercury workflow for deployments revert(font-weight): combine font-weights back to *00 based fix: DSS-752 style(letter-spacing): updates to letter spacing for medium and smaller (#1922) fix: DSS-747 Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com> style: update body-xs to 12px (#1926) refactor: removes page scope empty state and updates styles style: adds styles for Icon Card for default and compact variants style: adds gradient to icon card and empty state docs: removes unneeded examples and adds new props refactor: removes gradient refactor: renames scope prop to size chore: fixes Story name refactor: adds background color to icon docs: updates Empty States docs pages for Rails and React docs: updates React component description with better clarity chore: fixes linting issues chore: removes unneeded gradient references style(alert): adjust small variant icon alignment (#1930) style(checkbox): adjust checkbox margin for alignment (#1931) style(dropdown): add display flex to dropdown trigger (#1934) * style(dropdown): add display flex to dropdown trigger * style(dropdown): reorder css property style(badge): correct interactive icon size (#1935) style(line-height): update line-height to have rem units (#1933) fix(p): remove adjacent p tag spacing (#1936) fix: add white background color to box-like elements * fix(box-shadow): update box shadow token value * fix(box like components): add white background and md box shadow * fix(container): remove color and shadow from container * fix(css): updated order * fix(frame): update to fix background color with nested frames * fix(frame): add white background to bordered variant chore: adds scope prop to address spec failures chore: fixes syntax error fix: add panel box-shadow (#1944) * fix: add box-shadow to panel * fix: remove box-shadow from inner card and panels fix: updates placeholder assets & styles (#1947) * fix: add new image assets * style: adjust page heading image bg color * fix: add new image assets for storybook * fix: convert unsplash images to placeholders * fix: convert unsplash images to small placeholder * fix: hello linter my old friend * fix: update image in empty state fix: update line-height tokens (#1951) fix: update box shadows (#1952) * fix: update box shadows * fix: add space after comma ci: revert rebrand-mercury-rising back to original workflow this is done since release-deploy has been fixed. We hopes this solves this branch from not deploying properly in staging style(pagination): remove background color (#1956) style(choice): correct icon alignment (#1957) * style(choice): remove incorrect margin styles * docs(choice): add additional example without subtext fix(sortable): update template columns (#1960) fix(frame): add box shadow to bordered frame (#1958) style(tab): adjust tab underline variable value (#1959) chore: update pine-ds/icons to latets version fix: updates conditionals to make image optional (#1965) 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 style: change the active tab color to mercury 50 (#1969) Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com> style: focus state updates (#1970) * style: update sage-focus-ring mixin * style: update focus-outline colors * fix: removes duplicate focus ring * style: update focus colors and sizing * style: adjust tab focus * fix: replace named color for linter style(alert): add borders (#1972) style(progress): update the default fill color to mercury-50 (#1971) Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com> style(button): change border radius to 9999px (#1973) Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com> style: update spacer to use logical properties (#1968) style(button): change the colors for the accent variant to be purple (#1974) Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com> feature(loader): change loader to new behavior and colors (#1975) * feat(loader-rails): change the loader animation and fill color * feat(loader-react): change the loader animation and fill color * style(loader): change timing to 1.5s per convo with design team --------- Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com> style: updates button font family style: add Faire Spring font family (#1980) Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com> style(button): change button font-weight to med (500) (#1984) Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com> fix(button): loading button wasn't animating, updated svg in button-spinner.js (#1987) Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com> feat: v1.1 rebrand style: update size of font in table (#1986) style: convert focus to focus-within (#1985) 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 <dev+github-bot@kajabi.com> style: update hover color (#1991) style: adjust box shadow (#1992) style: update hint font-size (#1994) fix: adjust token color (#1995) fix: adjust token color (#1997) docs: fix foundations color page fix: correct progress color tokens (#1998) * fix: correct color tokens * docs: update value in react story fix: update token value (#1999)
Kajabi · Oct 14, 2024 · 5048471 · 5048471
1 parent d88aeb7
commit 5048471
Show file tree

Hide file tree

Showing 172 changed files with 4,755 additions and 1,560 deletions.
diff --git a/.github/workflows/rebrand-mercury-rising.yml b/.github/workflows/rebrand-mercury-rising.yml
@@ -52,6 +52,9 @@ jobs:
       - name: Yarn Install
         run: yarn install --frozen-lockfile
 
+      - name: Build
+        run: NODE_OPTIONS=--openssl-legacy-provider yarn build
+
       - name: Lerna Boostrap
         run: yarn lerna bootstrap --ci
 

diff --git a/docs/app/assets/images/card-placeholder-lg.png b/docs/app/assets/images/card-placeholder-lg.png
diff --git a/docs/app/assets/images/card-placeholder-sm.png b/docs/app/assets/images/card-placeholder-sm.png
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/choice/_preview.html.erb b/docs/app/views/examples/components/choice/_preview.html.erb
@@ -45,6 +45,15 @@ long_description = "Description with longer text to cause wrapping and make the
 
 <h3 class="t-sage-heading-6">Icon Variation</h3>
 <p>Select any icon to appear to the left of the text.</p>
+<%= sage_component SageChoice, {
+    target: "example",
+    text: "Option 1",
+    type: "icon",
+    icon: "video-on",
+  }
+%>
+
+<p>With additional subtext.</p>
 <%= sage_component SageChoice, {
     target: "example",
     text: "Option 1",

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/empty_state/_preview.html.erb b/docs/app/views/examples/components/empty_state/_preview.html.erb
@@ -8,79 +8,21 @@
 <% end %>
 
 <h3>With Icon and Compact</h3>
-<p> Compact variants, with less top and bottom padding, are useful for smaller contexts.</p>
+<p> Compact variants, with a smaller icon, are useful for smaller contexts.</p>
 <%= sage_component SageEmptyState, {
   icon: "bold",
   title: "Title for state, compact variety",
   text: "Text to appear below. Lorem ipsum dolor sit amet consectituor.",
-  scope: "compact",
+  size: "compact",
 } do %>
   <p>Other stuff such as buttons...</p>
 <% end %>
 
 <h3>With Graphic</h3>
 <%= sage_component SageEmptyState, {
-  graphic: image_tag("empty-state-sm.svg", alt: ""),
+  graphic: image_tag("card-placeholder-lg.png", alt: ""),
   title: "Title for state, with graphic instead of icon",
   text: "Text to appear below. Lorem ipsum dolor sit amet consectituor.",
 } do %>
   <p>Other stuff such as buttons...</p>
 <% end %>
-
-<h3>Page Scope and Graphic</h3>
-<%= sage_component SageEmptyState, {
-  title: "Create your first Email Campaign",
-  graphic: image_tag("empty-state-lg.svg", alt: ""),
-  scope: "page",
-} do %>
-  <% content_for :sage_empty_state_text do %>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Elit arcu volutpat cursus ultricies ac, ultricies.
-      Platea sed nibh molestie ut.
-    </p>
-  <% end %>
-  <% content_for :sage_empty_state_actions do %>
-    <%= sage_component SageButtonGroup, { gap: :sm } do %>
-      <%= sage_component SageButton, {
-        attributes: { href: "#" },
-        style: "primary",
-        value: "Create Email Campaigns",
-      } %>
-      <%= sage_component SageButton, {
-        attributes: { href: "#" },
-        style: "secondary",
-        subtle: true,
-        value: "Learn More",
-      } %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<h3>Page Scope and Graphic with Video</h3>
-<%= sage_component SageEmptyState, {
-  title: "Create your first Email Campaign",
-  graphic: image_tag("empty-state-lg.svg", alt: ""),
-  scope: "page",
-} do %>
-  <% content_for :sage_empty_state_text do %>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Elit arcu volutpat cursus ultricies ac, ultricies.
-      Platea sed nibh molestie ut.
-    </p>
-  <% end %>
-  <% content_for :sage_empty_state_actions do %>
-    <%= sage_component SageButton, {
-      attributes: { href: "#" },
-      style: "primary",
-      value: "Create Email Campaigns",
-    } %>
-    <%= sage_component SageButton, {
-      attributes: { href: "#" },
-      style: "secondary",
-      subtle: true,
-      value: "Learn More",
-    } %>
-  <% end %>
-<% end %>
diff --git a/docs/app/views/examples/components/empty_state/_props.html.erb b/docs/app/views/examples/components/empty_state/_props.html.erb
@@ -1,6 +1,6 @@
 <tr>
   <td><%= md('`center_vertical`') %></td>
-  <td><%= md('If true, the empty state will be adjust to be visually centered inside the entire page context. Meant to be used in pairing with `scope: "page"`.') %></td>
+  <td><%= md('If true, the empty state will be visually centered inside the entire page context.') %></td>
   <td><%= md('Boolean') %></td>
   <td><%= md('`false`') %></td>
 </tr>
@@ -17,14 +17,13 @@
   <td><%= md('`nil`') %></td>
 </tr>
 <tr>
-  <td><%= md('`scope`') %></td>
-  <td><%= md('The layout of the component adjusts depending on this context setting:
-  
-- `nil` (default) sets up a "feature"-level layout for use within panels or cards for showing empty state for particular features.
+  <td><%= md('`size`') %></td>
+  <td><%= md('The size of the icon adjusts depending on this context setting:
+
+- `nil` (default) sets up a "feature"-level layout for use on whole page empty states and is intended to fill the stage.
 - `"compact"` similar to the default above, this compacts the spacing a little more for smaller contexts.
-- `"page"` is for use on whole page empty states and is intended to fill the stage.
 ') %></td>
-  <td><%= md('`nil` | `"compact"` | `"page"`') %></td>
+  <td><%= md('`nil` | `"compact"`') %></td>
   <td><%= md('`nil`') %></td>
 </tr>
 <tr>
@@ -48,11 +47,28 @@
 <tr>
   <td colspan="4"><strong>Content Slots</strong></td>
 </tr>
+<tr>
+  <td><%= md('`:sage_empty_state_actions`') %></td>
+  <td><%= md('
+    Slot into which buttons or other actions can be placed.
+  ') %></td>
+  <td></td>
+  <td></td>
+</tr>
+<tr>
+  <td><%= md('`:sage_empty_state_text`') %></td>
+  <td><%= md('
+    Slot into which text can be placed.
+  ') %></td>
+  <td></td>
+  <td></td>
+</tr>
 <tr>
   <td><%= md('`:sage_empty_state_video`') %></td>
   <td><%= md('
-  Slot into which video cards or other media can be placed.
+    Slot into which video cards or other media can be placed.
   ') %></td>
   <td></td>
   <td></td>
 </tr>
+
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/list/_preview.html.erb b/docs/app/views/examples/components/list/_preview.html.erb
@@ -124,7 +124,7 @@ Note that this example also implements the [Reveal utility class](#{pages_helper
       css_classes: SageClassnames::REVEAL_CONTAINER,
     } do %>
       <%= sage_component SageCardRow, { grid_template: "ete" } do %>
-        <img src="https://source.unsplash.com/random/240x160?v=<%= item[:id] %>" width="64" alt="" />
+        <img src="/assets/card-placeholder-lg.png" width="64" alt="" />
         <%= sage_component SageCardBlock, {} do %>
           <h4><%= item[:name] %></h4>
           <p>Item <%= item[:id] %> specs</p>
@@ -161,7 +161,7 @@ Note that this example also implements the [Reveal utility class](#{pages_helper
       more_actions: { items: dropdown_items(item[:id]) },
     } do %>
       <%= sage_component SageCardRow, { grid_template: "ete" } do %>
-        <img src="https://source.unsplash.com/random/240x160?v=<%= item[:id] %>" width="120" height="64" alt=""  />
+        <img src="/assets/card-placeholder-lg.png" width="120" height="64" alt=""  />
         <%= sage_component SageCardBlock, {} do %>
           <%= sage_component SageLink, {
             spacer: { bottom: "2xs" },

diff --git a/docs/app/views/examples/components/media_tile/_preview.html.erb b/docs/app/views/examples/components/media_tile/_preview.html.erb
@@ -32,7 +32,7 @@ panels = [
     caption: %(
       <p>Vivamus dictum rutrum dui, nec placerat ante</p>
     ),
-    media: %(<img src="//source.unsplash.com/Ssj4uWXcvS4/600x400?1" alt="Image of Product Abra" />),
+    media: %(<img src="/assets/card-placeholder-lg.png" alt="Image of Product Abra" />),
     title: "Product Abra",
   },
   {
@@ -44,7 +44,7 @@ panels = [
     caption: %(
       <p>Suspendisse eu tellus quis arcu sagittis semper</p>
     ),
-    media: %(<img src="//source.unsplash.com/gkJCCn1hZDk/600x400?2" alt="Image of Product Cadabra" />),
+    media: %(<img src="/assets/card-placeholder-lg.png" alt="Image of Product Cadabra" />),
     title: "Product Cadabra",
   },
   {
@@ -56,7 +56,7 @@ panels = [
     caption: %(
       <p>Maecenas vitae leo eu tellus efficitur viverra sit amet ut tortor vestibulum</p>
     ),
-    media: %(<img src="//source.unsplash.com/3lqEqS1s7mw/600x400?3" alt="Image of Product Jimminycricket" />),
+    media: %(<img src="/assets/card-placeholder-lg.png" alt="Image of Product Jimminycricket" />),
     title: "Product Jimminycricket",
   },
 ]
@@ -155,7 +155,7 @@ NOTE: the examples below omit `media` but this can safely be used as well with t
   title_tag: "h2",
 } do %>
   <%= content_for :sage_media_tile_media do %>
-    <img src="//source.unsplash.com/Ssj4uWXcvS4/600x400?1" alt="MEDIA Image of Product Abra" />
+    <img src="/assets/card-placeholder-lg.png" alt="MEDIA Image of Product Abra" />
   <% end %>
   <%= content_for :sage_media_tile_actions_custom do %>
     <%= sage_component SageBadge, { value: "CUSTOM Draft", color: "draft" } %>

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/components/progress_bar/_preview.html.erb b/docs/app/views/examples/components/progress_bar/_preview.html.erb
@@ -1,13 +1,11 @@
 <h2 class="t-sage-heading-6">Default</h2>
 <%= sage_component SageProgressBar, {
-  color: SageTokens::COLOR_PALETTE[:PRIMARY_300],
   percent: 70,
   label: "Cloning product"
 } %>
 
 <h2 class="t-sage-heading-6">Default with Percentage</h2>
 <%= sage_component SageProgressBar, {
-  color: SageTokens::COLOR_PALETTE[:SAGE_300],
   display_percent: true,
   percent: 70,
   label: "Cloning product"

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 %>