feature: mercury rising rebranding

.github/workflows/publish.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-      # - develop - Uncomment this line to enable publishing from the develop branch. On hold until Mercury-Rising is complete.
+      - develop
 
 jobs:
   lint-test-build:

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`
         )),
       }
     ]

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

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

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