feat!(rebrand): mercury-rising rebrand 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>

.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
 

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",

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

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

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" },

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

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"