Skip to content

Commit

Permalink
chore(colors): remove v1 color output and references (#1664)
Browse files Browse the repository at this point in the history 
* chore(colors): remove v1 color output and references

* Remove reference to v1 less function

* Replace all references to s-btn__primary

* Remove .color-swatch from docs, fix "layers" section

See https://stackexchange.slack.com/archives/C27RWNQN9/p1709590462244279

* Remove dupe "current-color" nav item

* Use color-swatch partial for color roles
  • Loading branch information
@dancormier
dancormier authored Apr 15, 2024
1 parent c3f385a commit e7e8280
Show file tree
Hide file tree
Showing 45 changed files with 68 additions and 10,943 deletions.
11 changes: 0 additions & 11 deletions docs/_data/buttons.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,6 @@
]
}
],
"primary": [
{
"title": "Primary",
"classes": [
{
"title": "Primary",
"class": "s-btn__primary"
}
]
}
],
"danger": [
{
"title": "Danger",
Expand Down
118 changes: 0 additions & 118 deletions docs/_data/colors.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,123 +301,5 @@
]
}
]
},
{
"name": "v1",
"status": "deprecated",
"sets": [
{
"name": "red",
"bg": 500,
"stops": ["025", "050", 100, 200, 300, 400, 500, 600, 700, 800, 900],
"invert": [400, 500, 600, 700, 800, 900],
"include": true
},
{
"name": "orange",
"bg": 600,
"stops": ["050", 100, 200, 300, 400, 500, 600, 700, 800, 900],
"invert": [400, 500, 600, 700, 800, 900],
"include": true
},
{
"name": "yellow",
"bg": 600,
"stops": ["050", 100, 200, 300, 400, 500, 600, 700, 800, 900],
"invert": [400, 500, 600, 700, 800, 900],
"include": true
},
{
"name": "green",
"bg": 600,
"stops": ["025", "050", 100, 200, 300, 400, 500, 600, 700, 800, 900],
"invert": [400, 500, 600, 700, 800, 900],
"include": true
},
{
"name": "blue",
"bg": 600,
"stops": ["050", 100, 200, 300, 400, 500, 600, 700, 800, 900],
"invert": [400, 500, 600, 700, 800, 900],
"include": true
},
{
"name": "powder",
"bg": 600,
"stops": ["050", 100, 200, 300, 400, 500, 600, 700, 800, 900],
"invert": [400, 500, 600, 700, 800, 900],
"include": true
},
{
"name": "black",
"bg": 900,
"stops": ["025", "050", "075", 100, 150, 200, 300, 350, 400, 500, 600, 700, 750, 800, 900, ""],
"invert": [300, 350, 400, 500, 600, 700, 750, 800, 900, ""],
"include": true
},
{
"name": "theme-primary",
"bg": 500,
"stops": ["025", "050", "075", 100, 150, 200, 300, 350, 400, 500, 600, 700, 800, 900],
"invert": [400, 500, 600, 700, 750, 800, 900]
},
{
"name": "theme-secondary",
"bg": 400,
"stops": ["025", "050", "075", 100, 150, 200, 300, 350, 400, 500, 600, 700, 800, 900],
"invert": [400, 500, 600, 700, 750, 800, 900]
},
{
"name": "gold",
"bg": "darker",
"fc": "black",
"stops": ["lighter", "", "darker"],
"exclude": {
"hover": ["lighter", "", "darker"],
"focus": ["lighter", "", "darker"],
"dark": ["lighter", "", "darker"],
"class": {
"bc": ["lighter", "", "darker"]
}
},
"invert": ["darker"]
},
{
"name": "silver",
"bg": "darker",
"fc": "black",
"stops": ["lighter", "", "darker"],
"exclude": {
"hover": ["lighter", "", "darker"],
"focus": ["lighter", "", "darker"],
"dark": ["lighter", "", "darker"],
"class": {
"bc": ["lighter", "", "darker"]
}
},
"invert": ["darker"]
},
{
"name": "bronze",
"bg": "darker",
"fc": "black",
"stops": ["lighter", "", "darker"],
"exclude": {
"hover": ["lighter", "", "darker"],
"focus": ["lighter", "", "darker"],
"dark": ["lighter", "", "darker"],
"class": {
"bc": ["lighter", "", "darker"]
}
},
"invert": ["darker"]
},
{
"name": "white",
"bg": "",
"fc": "black",
"stops": [""]
}
]
}
]
8 changes: 0 additions & 8 deletions docs/_data/site-navigation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,10 @@
"title": "Color palette",
"url": "/product/foundation/colors/"
},
{
"title": "Color palette (legacy)",
"url": "/product/v1/base/colors/"
},
{
"title": "Theming",
"url": "/product/foundation/theming/"
},
{
"title": "Theming (legacy)",
"url": "/product/v1/guidelines/theming/"
},
{
"title": "Icons",
"url": "/product/foundation/icons/"
Expand Down
2 changes: 1 addition & 1 deletion docs/_includes/topbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@
<a href="#" class="s-topbar--item s-topbar--item__unset s-btn s-btn__filled ws-nowrap">Log in</a>
</li>
<li>
<a href="#" class="s-topbar--item s-topbar--item__unset ml4 s-btn s-btn__primary ws-nowrap">Sign up</a>
<a href="#" class="s-topbar--item s-topbar--item__unset ml4 s-btn s-btn__filled ws-nowrap">Sign up</a>
</li>
{% endunless %}
</ol>
Expand Down
8 changes: 0 additions & 8 deletions docs/assets/less/stacks-documentation.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,14 +328,6 @@
}
}

// ============================================================================
// $ COLORS
// ----------------------------------------------------------------------------
.stacks-swatch {
width: var(--su-static32);
height: var(--su-static32);
}

// ============================================================================
// $ Search Customization
// ----------------------------------------------------------------------------
Expand Down
4 changes: 2 additions & 2 deletions docs/content/examples/error-messages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,15 +176,15 @@
<h2 class="fs-subheading lh-sm fc-dark mb6">Can’t display metrics</h2>
<p class="fs-body1 fc-medium mb16">You need to restart your data sync.</p>
<div class="d-flex gx8 ai-center">
<button class="flex--item s-btn s-btn__primary js-modal-primary-btn" type="button">OK</button>
<button class="flex--item s-btn s-btn__filled js-modal-primary-btn" type="button">OK</button>
<button class="flex--item s-btn js-modal-cancel-btn" type="button">Cancel</button>
</div>
</td>
<td>
<h2 class="fs-subheading lh-sm fc-dark mb6">Can’t display metrics</h2>
<p class="fs-body1 fc-medium mb16">You need to restart your data sync.</p>
<div class="d-flex gx8 ai-center">
<button class="flex--item s-btn s-btn__primary js-modal-primary-btn" type="button">OK, restart sync</button>
<button class="flex--item s-btn s-btn__filled js-modal-primary-btn" type="button">OK, restart sync</button>
<button class="flex--item s-btn js-modal-cancel-btn" type="button">Cancel</button>
</div>
</td>
Expand Down
8 changes: 4 additions & 4 deletions docs/content/examples/success-messages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,21 +72,21 @@
<tr>
<td>
<p>“We’ve saved your profile changes.”</p>
<button class="s-btn s-btn__primary" type="button">OK</button>
<button class="s-btn s-btn__filled" type="button">OK</button>
</td>
<td>
<p>“We’ve saved your profile changes.”</p>
<button class="s-btn s-btn__primary" type="button">View profile</button>
<button class="s-btn s-btn__filled" type="button">View profile</button>
</td>
</tr>
<tr>
<td>
<p>“Your payment is complete.”</p>
<button class="s-btn s-btn__primary" type="button">OK</button>
<button class="s-btn s-btn__filled" type="button">OK</button>
</td>
<td>
<p>“Your payment is complete.”</p>
<button class="s-btn s-btn__primary" type="button">View receipt</button>
<button class="s-btn s-btn__filled" type="button">View receipt</button>
</td>
</tr>
</tbody>
Expand Down
26 changes: 13 additions & 13 deletions docs/email/components/buttons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
description: Buttons are the primary way for users to take action from an email. Buttons should have ample click / tap space and describe their actions. Creating a button that displays consistently across email clients requires multiple HTML tags.
---
<style>
.s-btn__primary:hover {
.s-btn__filled:hover {
background: #0077CC !important;
border-color: #0077CC !important;
}
Expand All @@ -24,20 +24,20 @@
<p class="stacks-copy">
A button’s visual weight should correspond to the importance of the button’s action. The more important the action, the heavier the button’s visual weight.
</p>
{% header "h3", "Primary" %}
{% header "h3", "Filled" %}
<p class="stacks-copy">
A visual style used to highlight the most important actions. To avoid confusing users, don’t use more than one primary button within an email section.
A visual style used to highlight the most important actions. To avoid confusing users, don’t use more than one filled button within an email section.
</p>
<div class="stacks-preview mb24">
{% highlight html %}
<td class="s-btn s-btn__primary" style="border-radius: 4px; background: #0095ff; text-align: center;">
<a class="s-btn s-btn__primary" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">
<td class="s-btn s-btn__filled" style="border-radius: 4px; background: #0095ff; text-align: center;">
<a class="s-btn s-btn__filled" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">
…
</a>
</td>
{% endhighlight %}
<div class="stacks-preview--example">
<a class="s-btn s-btn__primary" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: inline-block; border-radius: 4px;">Ask question</a>
<a class="s-btn s-btn__filled" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: inline-block; border-radius: 4px;">Ask question</a>
</div>
</div>
{% header "h3", "White" %}
Expand Down Expand Up @@ -77,7 +77,7 @@
</div>
</div>
{% tip %}
<strong>Note:</strong> Using the <code class="stacks-code">s-btn</code> class with <code class="stacks-code">s-btn__primary</code>, <code class="stacks-code">s-btn__white</code> or <code class="stacks-code">s-btn__outlined</code> applies <code class="stacks-code">:hover</code> progressive enhancements defined in the <code class="stacks-code">&lt;style&gt;</code> tag. Only <a href="https://www.campaignmonitor.com/css/style-element/style-in-head/">email clients that support</a> <code class="stacks-code">&lt;style&gt;</code> in <code class="stacks-code">&lt;head&gt;</code> will render the <code class="stacks-code">:hover</code>.
<strong>Note:</strong> Using the <code class="stacks-code">s-btn</code> class with <code class="stacks-code">s-btn__filled</code>, <code class="stacks-code">s-btn__white</code> or <code class="stacks-code">s-btn__outlined</code> applies <code class="stacks-code">:hover</code> progressive enhancements defined in the <code class="stacks-code">&lt;style&gt;</code> tag. Only <a href="https://www.campaignmonitor.com/css/style-element/style-in-head/">email clients that support</a> <code class="stacks-code">&lt;style&gt;</code> in <code class="stacks-code">&lt;head&gt;</code> will render the <code class="stacks-code">:hover</code>.
{% endtip %}
</section>
<section class="stacks-section">
Expand All @@ -88,8 +88,8 @@
</p>
<div class="stacks-preview mb24">
{% highlight html %}
<td class="s-btn s-btn__primary" style="border-radius: 4px; background: #0095ff; text-align: center;">
<a class="s-btn s-btn__primary" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">
<td class="s-btn s-btn__filled" style="border-radius: 4px; background: #0095ff; text-align: center;">
<a class="s-btn s-btn__filled" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">
…
</a>
</td>
Expand All @@ -109,7 +109,7 @@
<div class="stacks-preview--example">
<div class="d-flex ai-center gx12">
<div class="flex--item">
<a class="s-btn s-btn__primary" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: inline-block; border-radius: 4px;">Ask question</a>
<a class="s-btn s-btn__filled" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: inline-block; border-radius: 4px;">Ask question</a>
</div>
<div class="flex--item p12 bg-black-600">
<a class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; color: #0077cc; font-size: 17px; line-height: 17px; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">Ask question</a>
Expand All @@ -127,8 +127,8 @@
</p>
<div class="stacks-preview mb24">
{% highlight html %}
<td class="s-btn s-btn__primary" style="border-radius: 3px; background: #0095ff; text-align: center;">
<a class="s-btn s-btn__primary" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 13px; line-height: 13px; color: #ffffff; text-align: center; text-decoration: none; padding: 10px; display: block; border-radius: 3px;">
<td class="s-btn s-btn__filled" style="border-radius: 3px; background: #0095ff; text-align: center;">
<a class="s-btn s-btn__filled" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 13px; line-height: 13px; color: #ffffff; text-align: center; text-decoration: none; padding: 10px; display: block; border-radius: 3px;">
…
</a>
</td>
Expand All @@ -148,7 +148,7 @@
<div class="stacks-preview--example">
<div class="d-flex ai-center gx12">
<div class="flex--item">
<a class="s-btn s-btn__primary" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 13px; line-height: 13px; color: #ffffff; text-align: center; text-decoration: none; padding: 10px; display: inline-block; border-radius: 3px;">Ask question</a>
<a class="s-btn s-btn__filled" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 13px; line-height: 13px; color: #ffffff; text-align: center; text-decoration: none; padding: 10px; display: inline-block; border-radius: 3px;">Ask question</a>
</div>
<div class="flex--item p12 bg-black-600">
<a class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; color: #0077cc; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; padding: 10px; display: block; border-radius: 3px;">Ask question</a>
Expand Down
2 changes: 1 addition & 1 deletion docs/email/templates/code/promotional.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@
<!-- Progressive Enhancements : BEGIN -->
<style>
/* What it does: Hover styles for buttons and tags */
.s-btn__primary:hover {
.s-btn__filled:hover {
background: #0077CC !important;
border-color: #0077CC !important;
}
Expand Down
6 changes: 3 additions & 3 deletions docs/email/templates/code/transactional-long.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@
<!-- Progressive Enhancements : BEGIN -->
<style>
/* What it does: Hover styles for buttons and tags */
.s-btn__primary:hover {
.s-btn__filled:hover {
background: #0077CC !important;
border-color: #0077CC !important;
}
Expand Down Expand Up @@ -394,8 +394,8 @@ <h1 style="font-weight: bold; font-size: 27px; line-height: 27px; color: #0C0D0E
<!-- Button : BEGIN -->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="s-btn s-btn__primary" style="border-radius: 4px; background: #0095ff;">
<a class="s-btn s-btn__primary" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">Medium primary button</a>
<td class="s-btn s-btn__filled" style="border-radius: 4px; background: #0095ff;">
<a class="s-btn s-btn__filled" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">Medium filled button</a>
</td>
</tr>
</table>
Expand Down
Loading

0 comments on commit e7e8280

Please sign in to comment.