chore(colors): add initial brand color set

packages/stacks-classic/lib/exports/color-sets.less

@@ -590,6 +590,28 @@
     default: var(--black);
 }
 
+// brand colors
+.set-brand() {
+    default: #FF5E00; // renamed from Stack Orange. Can this be `--brand`?
+    black: #201C1D; // Do we need this extra value? It's almost exactly `--black-600`
+    white: #FFFFFF; // Do we need this extra value? It's exactly `--white`
+    off-white: #F0EFEE;
+    blue-light: #C6D1E1;
+    blue: #5074EF; // Do we need this extra value? It's close to `--blue-500`
+    blue-dark: #00165E;
+    brown-light: #998B7A;
+    green: #86AF25;
+    green-dark: #263603;
+    orange-medium: #6E1527; // Should this be `red`?
+    orange-dark: #31070F; // Should this be `red-dark`?
+    pink: #F39FFF; // Should this be `pink-light`?
+    pink-dark: #4D1955;
+    purple: #9D9CFF; // Should this be purple-light?
+    purple-dark: #390A91; // Should this be purple?
+    yellow: #FFCC00;
+    yellow-dark: #423101;
+}
+
 // Color sets
 .sets-mode() {
     light: .sets-light();
@@ -681,6 +703,7 @@
     focus-ring: .set-focus-ring();
     highlight: .set-highlight();
     scrollbar: .set-scrollbar();
+    brand: .set-brand();
 }
 
 .sets-utility-dark() {
@@ -691,6 +714,7 @@
     focus-ring: .set-focus-ring-dark();
     highlight: .set-highlight-dark();
     scrollbar: .set-scrollbar-dark();
+    brand: .set-brand();
 }
 
 .sets-utility-hc() {
@@ -701,6 +725,7 @@
     focus-ring: .set-focus-ring-hc();
     highlight: .set-highlight-hc();
     scrollbar: .set-scrollbar-hc();
+    brand: .set-brand();
 }
 
 .sets-utility-dark-hc() {
@@ -711,6 +736,7 @@
     focus-ring: .set-focus-ring-hc();
     highlight: .set-highlight-hc-dark();
     scrollbar: .set-scrollbar-hc-dark();
+    brand: .set-brand();
 }
 
 // Theme values

packages/stacks-docs/_data/colors.json

@@ -73,6 +73,44 @@
         "type": "monochrome"
       }
     ],
+    "brand": [
+      {
+        "name": "brand",
+        "stops": [
+          "",
+          "black",
+          "white",
+          "off-white",
+          "blue-light",
+          "blue",
+          "blue-dark",
+          "brown-light",
+          "green",
+          "green-dark",
+          "orange-medium",
+          "orange-dark",
+          "pink",
+          "pink-dark",
+          "purple",
+          "purple-dark",
+          "yellow",
+          "yellow-dark"
+        ],
+        "invert": [
+          "black",
+          "blue",
+          "blue-dark",
+          "green-dark",
+          "orange-medium",
+          "orange-dark",
+          "pink-dark",
+          "purple-dark",
+          "yellow-dark"
+        ],
+        "invertAlt": "gray-600",
+        "type": "color"
+      }
+    ],
     "roles": [
       {
         "name": "neutral",

packages/stacks-docs/product/foundation/colors.html

@@ -38,6 +38,41 @@ <h3>{{ set.name | capitalize }}</h3>
     </div>
 </section>
 
+<section class="stacks-section">
+    {% header "h2", "Brand" %}
+
+    <p>TODO SHINE add guidance for brand colors.</p>
+    <div class="d-grid g24 mt16 mb32" style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));">
+        {% for set in colors[0].brand %}
+            {% assign setClasses = "" %}
+            <div>
+                <div class="bar-md overflow-hidden bs-md ba baw2 bc-white">
+                    {% for stop in set.stops %}
+                        {% assign name = set.name | replace: " ", "-" %}
+
+                        {% if stop != "" %}
+                            {% assign name = set.name | append: "-" | append: stop | replace: " ", "-" %}
+                        {% endif %}
+
+                        {% assign stopFc = "fc-black" %}
+                        {% if set.invert contains stop %}
+                            {% assign stopFc = "fc-white" %}
+                        {% endif %}
+
+                        {% assign style = "background-color: var(--brand-" | append: stop | append: ")" %}
+                        {% if stop == "" %}
+                            {% assign style = "background-color: var(--brand)" %}
+                        {% endif %}
+                        <div class="p12 {{ stopFc }}" style="{{ style }}">
+                            {{ name }}
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+</section>
+
 <section class="stacks-section">
     {% header "h2", "Classes" %}