docs: Color the border, not the background for border-color

Bug: T257057
wmde · Jul 8, 2020 · b5609f6 · b5609f6
1 parent e5593aa
commit b5609f6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/docs/src/lib/TokenPresenter.jsx b/docs/src/lib/TokenPresenter.jsx
@@ -7,6 +7,7 @@ import FontFamily from './presenters/FontFamily';
 import Transition from './presenters/Transition';
 import Cursor from './presenters/Cursor';
 import Color from './presenters/Color';
+import BorderColor from './presenters/BorderColor';
 
 /**
  * Is a token used to denote another (CSS) property,
@@ -25,8 +26,11 @@ export function TokenPresenter( { token } ) {
 	if ( isPropertyToken( name ) ) {
 		return null;
 	}
-
-	if ( name.match(/\bcolor\b/) ) {
+
+	if ( name.match(/\bborder-color\b/) ) {
+		return <BorderColor token={ token } />;
+	}
+	else if ( name.match(/\bcolor\b/) ) {
 		return <Color token={ token } />;
 	}
 	else if ( name.match( /\bfont-family\b/ ) ) {

diff --git a/docs/src/lib/presenters/BorderColor.jsx b/docs/src/lib/presenters/BorderColor.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function ( { token } ) {
+	return (
+		<div className='color' style={{ border: `2px solid ${token.value}`, backgroundColor: '#fff' }} />
+	);
+}