Use CSS Custom Property for brand color

Author: samselikoff

addon/components/docs-header/link/template.hbs

@@ -28,9 +28,14 @@
   {{#link-to route
     class=(concat
       'docs-px-4 docs-py-5 docs-transition docs-uppercase docs-text-xxs
-      docs-font-bold docs-no-underline docs-text-grey-darkest '
-      (if (and (not isActive) (not (eq route 'index'))) 'hover:docs-text-brand')
-      (if (and isActive (not (eq route 'index'))) 'docs-text-brand')
+      docs-font-bold docs-no-underline '
+      (if (not (eq route 'index'))
+        (if isActive
+          'docs-text-brand'
+          'docs-text-grey-darkest hover:docs-text-brand'
+        )
+        'docs-text-grey-darkest'
+      )
     )
     data-test-id=data-test-id
   }}

addon/tailwind/components/docs-brand-colors.css

@@ -0,0 +1,43 @@
+/*
+  We use CSS Custom Properties so addons can customize their brand theme, but we need to provide a fallback for browsers that don't support them yet (IE). This is the way we do it.
+
+  If we get access to the PostCSS pipeline in the future we could use a plugin like this: https://github.com/postcss/postcss-custom-properties
+*/
+.docs-bg-brand {
+  background-color: #E04E39 !important;
+  @apply docs-bg-brand-var !important;
+}
+.hover\:docs-bg-brand:hover {
+  background-color: #E04E39 !important;
+  @apply docs-bg-brand-var !important;
+}
+.focus\:docs-bg-brand:focus {
+  background-color: #E04E39 !important;
+  @apply docs-bg-brand-var !important;
+}
+
+.docs-text-brand {
+  color: #E04E39 !important;
+  @apply docs-text-brand-var !important;
+}
+.hover\:docs-text-brand:hover {
+  color: #E04E39 !important;
+  @apply docs-text-brand-var !important;
+}
+.focus\:docs-text-brand:focus {
+  color: #E04E39 !important;
+  @apply docs-text-brand-var !important;
+}
+
+.docs-border-brand {
+  border-color: #E04E39 !important;
+  @apply docs-border-brand-var !important;
+}
+.hover\:docs-border-brand:hover {
+  border-color: #E04E39 !important;
+  @apply docs-border-brand-var !important;
+}
+.focus\:docs-border-brand:focus {
+  border-color: #E04E39 !important;
+  @apply docs-border-brand-var !important;
+}

addon/tailwind/config/colors.js

@@ -35,6 +35,7 @@ export default {
 
   'yellow': '#ffed4a',
 
-  'brand': '#E04E39'
+  // See the ntoe in tailwind/compnents/docs-brand-colors.css
+  'brand-var': 'var(--brand-primary, #E04E39)'
 
 };

test-apps/new-addon/tests/acceptance/smoke-test-test.js

@@ -11,12 +11,12 @@ module('Acceptance | boot test', function(hooks) {
     assert.equal(currentURL(), '/');
   });
 
-  test('styles are properly loaded', async function(assert) {
+  test('the --brand-primary css variable works', async function(assert) {
     await visit('/');
 
     let hero = find('.docs-bg-brand');
     let fontSize = window.getComputedStyle(hero).getPropertyValue("background-color");
 
-    assert.equal(fontSize, 'rgb(224, 78, 57)');
+    assert.equal(fontSize, 'rgb(0, 128, 0)');
   });
 });

test-apps/new-addon/tests/dummy/app/styles/app.css

@@ -0,0 +1,3 @@
+:root {
+  --brand-primary: green;
+}

test-apps/new-addon/tests/dummy/app/templates/application.hbs

@@ -1,7 +1,3 @@
-{{docs-hero
-  logo='ember'
-  slimHeading='New'
-  strongHeading='Addon'
-  byline='A simple addon.'}}
+{{docs-header}}
 
 {{outlet}}

test-apps/new-addon/tests/dummy/app/templates/index.md

@@ -0,0 +1,9 @@
+{{docs-hero
+  logo='ember'
+  slimHeading='New'
+  strongHeading='Addon'
+  byline='A simple addon.'}}
+
+# Home
+
+Testing a {{docs-link 'link' 'index'}}.

yarn.lock

@@ -10815,21 +10815,14 @@ topo@2.x.x:
   dependencies:
     hoek "4.x.x"
 
-tough-cookie@>=0.12.0, tough-cookie@>=2.3.3, tough-cookie@^2.2.0, tough-cookie@^2.3.4, tough-cookie@~2.4.3:
+tough-cookie@>=0.12.0, tough-cookie@>=2.3.3, tough-cookie@^2.2.0, tough-cookie@^2.3.4, tough-cookie@~2.3.3, tough-cookie@~2.4.0, tough-cookie@~2.4.3:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
   integrity sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==
   dependencies:
     psl "^1.1.24"
     punycode "^1.4.1"
 
-tough-cookie@~2.3.3:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
-  integrity sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==
-  dependencies:
-    punycode "^1.4.1"
-
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"