feat: refactor buttons and links using custom properties (#229)

- Resolves #188.
- Resolves #189.
- Resolves #201.
- Resolves #202.
- Resolves #204.
- Resolves #208.
- Resolves #219.
- Resolves #221.
- Resolves #222.
- Resolves #223.
- Resolves #231.

Co-authored-by: jhung <[email protected]>

src/assets/scripts/Pinecone/Accordion/index.js

@@ -56,6 +56,7 @@ class Accordion {
 		const expanded = 'true' === ctrl.getAttribute( 'aria-expanded' ) || false;
 		Array.prototype.forEach.call( this.container.querySelectorAll( '.accordion__control' ), el => {
 			el.setAttribute( 'aria-expanded', false );
+			el.parentNode.classList.remove( 'accordion__pane--expanded' );
 		} );
 		ctrl.setAttribute( 'aria-expanded', !expanded );
 		if ( expanded ) {

src/assets/scripts/Pinecone/DisclosureButton/index.js

@@ -14,7 +14,7 @@ class DisclosureButton {
 		this.config = {
 			...{
 				controlSelector: '.disclosure-button',
-				buttonVariant: false,
+				buttonVariant: 'button--borderless',
 				visuallyHiddenLabel: false,
 			},
 			...options
@@ -39,8 +39,7 @@ class DisclosureButton {
 		ctrl.setAttribute( 'aria-expanded', 'false' );
 		ctrl.setAttribute( 'type', 'button' );
 		ctrl.innerHTML = `
-			${label}
-			<svg class="icon icon--chevron-down" viewBox="0 0 20 20" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><path id="chevron-down" d="m10 15a1 1 0 0 1 -.71-.29l-5-5a1 1 0 0 1 1.42-1.42l4.29 4.3 4.29-4.3a1 1 0 0 1 1.42 1.42l-5 5a1 1 0 0 1 -.71.29z" fill="currentColor"/></svg>
+			${label}<svg class="icon icon--chevron-down" viewBox="0 0 20 20" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><path id="chevron-down" d="m10 15a1 1 0 0 1 -.71-.29l-5-5a1 1 0 0 1 1.42-1.42l4.29 4.3 4.29-4.3a1 1 0 0 1 1.42 1.42l-5 5a1 1 0 0 1 -.71.29z" fill="currentColor"/></svg>
 		`;
 		this.container.insertBefore( ctrl, this.label.nextElementSibling );
 		this.container.removeChild( this.label );

src/assets/scripts/Pinecone/MenuButton/index.js

@@ -39,7 +39,7 @@ class MenuButton {
 		// Create button
 		const btn = document.createElement( 'button' );
 		btn.setAttribute( 'aria-expanded', 'false' );
-		btn.classList.add( 'button' );
+		btn.setAttribute( 'class', 'button button--borderless' );
 		btn.innerHTML = this.label.innerHTML;
 		this.container.insertBefore( btn, this.label );
 		this.container.removeChild( this.label );

src/assets/styles/_variables.scss

@@ -28,8 +28,7 @@ $grey-300: #d5d5cf;
 $grey-200: #f0efef;
 $off-white: #f9f9f7;
 $white: #fff;
-$black: $dark-mint-500;
-$true-black: #000;
+$black: #000;
 
 $colors-light: (
 	"blue-300": $blue-300,
@@ -48,7 +47,8 @@ $colors-light: (
 	"grey-400": $grey-400,
 	"grey-300": $grey-300,
 	"grey-200": $grey-200,
-	"off-white": $off-white
+	"off-white": $off-white,
+	"white": $white,
 );
 
 $colors-dark: (
@@ -63,7 +63,7 @@ $colors-dark: (
 	"dark-mint-400": $dark-mint-400,
 	"grey-500": $grey-500,
 	"grey-600": $grey-600,
-	"true-black": $true-black
+	"black": $black
 );
 
 /* Typography */

src/assets/styles/common/_colors.scss

@@ -1,25 +1,35 @@
-@each $name, $color in $colors-light {
-	.has-#{$name}-background-color {
-		background: $color;
-		color: $black;
+:root {
+	@each $name, $color in $colors-light {
+		--#{$name}: #{$color};
 	}
-}
 
-@each $name, $color in $colors-dark {
-	.has-#{$name}-background-color {
-		background: $color;
-		color: $white;
+	@each $name, $color in $colors-dark {
+		--#{$name}: #{$color};
 	}
+
+	--parent-background-color: var(--white);
 }
 
 @each $name, $color in $colors-light {
 	.has-#{$name}-color {
-		color: $color;
+		color: var(--#{$name});
+	}
+
+	.has-#{$name}-background-color {
+		--parent-background-color: var(--#{$name});
+		background: var(--#{$name});
+		color: var(--dark-mint-500);
 	}
 }
 
 @each $name, $color in $colors-dark {
 	.has-#{$name}-color {
-		color: $color;
+		color: var(--#{$name});
+	}
+
+	.has-#{$name}-background-color {
+		--parent-background-color: var(--#{$name});
+		background: var(--#{$name});
+		color: var(--white);
 	}
 }

src/assets/styles/common/_global.scss

@@ -4,7 +4,7 @@
 
 body {
 	align-items: center;
-	color: $black;
+	color: var(--dark-mint-500);
 	display: flex;
 	flex-direction: column;
 	font-family: $font-family-serif;

src/assets/styles/common/_grid.scss

@@ -2,11 +2,11 @@
 	--offset: #{rem(30)};
 	--columns: 4;
 	--gutter: #{rem(30)};
-	--color: #{transparentize($blue-300, 0.8)};
+	--grid-color: #{transparentize($blue-300, 0.8)};
 	--repeating-width: calc(100% / var(--columns));
 	--column-width: calc((100% / var(--columns)) - var(--gutter));
 	--background-width: calc(100% + var(--gutter));
-	--background-columns: repeating-linear-gradient(to right, var(--color), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width));
+	--background-columns: repeating-linear-gradient(to right, var(--grid-color), var(--grid-color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width));
 }
 
 @include breakpoint-up(sm) {

src/assets/styles/common/typography/_blockquotes.scss

@@ -4,7 +4,7 @@ blockquote {
 }
 
 blockquote::before {
-	color: $blue-400;
+	color: var(--blue-400);
 	content: "“";
 	font-family: $font-family-serif;
 	font-size: rem(64);

src/assets/styles/common/typography/_lists.scss

@@ -10,7 +10,7 @@ li {
 }
 
 li::marker {
-	color: $grey-600;
+	color: var(--grey-600);
 }
 
 li + li {

src/assets/styles/common/typography/_utils.scss

@@ -22,6 +22,6 @@
 	font-weight: $font-weight-bold;
 }
 
-.pc-fw--black {
+.pc-fw--dark-mint-500 {
 	font-weight: $font-weight-black;
 }