From de4e90f5643af86f127a7540a3c262084d413bbf Mon Sep 17 00:00:00 2001
From: Bryce Osterhaus <bryce.osterhaus@liferay.com>
Date: Thu, 28 Jan 2021 12:38:47 -0800
Subject: [PATCH] feat(@clayui/color-picker): update markup for hybrid
 color-picker

---
 packages/clay-color-picker/src/Basic.tsx      |   8 +-
 packages/clay-color-picker/src/Custom.tsx     |   8 +-
 packages/clay-color-picker/src/Splotch.tsx    |   8 +-
 .../__tests__/__snapshots__/index.tsx.snap    | 140 +++++++++---------
 4 files changed, 91 insertions(+), 73 deletions(-)

diff --git a/packages/clay-color-picker/src/Basic.tsx b/packages/clay-color-picker/src/Basic.tsx
index 46cdf60179..63b10ecc5e 100644
--- a/packages/clay-color-picker/src/Basic.tsx
+++ b/packages/clay-color-picker/src/Basic.tsx
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import classNames from 'classnames';
 import React from 'react';
 
 import Splotch from './Splotch';
@@ -41,7 +42,12 @@ const ClayColorPickerBasic: React.FunctionComponent<IProps> = ({
 
 		<div className="clay-color-swatch">
 			{colors.map((hex, i) => (
-				<div className="clay-color-swatch-item" key={i}>
+				<div
+					className={classNames('clay-color-swatch-item', {
+						'clay-color-swatch-item-last-row': i >= 20,
+					})}
+					key={i}
+				>
 					<Splotch onClick={() => onChange(hex)} value={hex} />
 				</div>
 			))}
diff --git a/packages/clay-color-picker/src/Custom.tsx b/packages/clay-color-picker/src/Custom.tsx
index 26ea3e7b48..cdaf81e38a 100644
--- a/packages/clay-color-picker/src/Custom.tsx
+++ b/packages/clay-color-picker/src/Custom.tsx
@@ -6,6 +6,7 @@
 import ClayForm, {ClayInput} from '@clayui/form';
 import Icon from '@clayui/icon';
 import {TInternalStateOnChange, useInternalState} from '@clayui/shared';
+import classNames from 'classnames';
 import React from 'react';
 import tinycolor from 'tinycolor2';
 
@@ -196,7 +197,12 @@ const ClayColorPickerCustom: React.FunctionComponent<IProps> = ({
 			{showPalette && (
 				<div className="clay-color-swatch">
 					{colors.map((hex, i) => (
-						<div className="clay-color-swatch-item" key={i}>
+						<div
+							className={classNames('clay-color-swatch-item', {
+								'clay-color-swatch-item-last-row': i >= 6,
+							})}
+							key={i}
+						>
 							<Splotch
 								active={i === activeSplotchIndex}
 								onClick={() => {
diff --git a/packages/clay-color-picker/src/Splotch.tsx b/packages/clay-color-picker/src/Splotch.tsx
index 4c11c2fbf4..36de82a881 100644
--- a/packages/clay-color-picker/src/Splotch.tsx
+++ b/packages/clay-color-picker/src/Splotch.tsx
@@ -23,13 +23,18 @@ interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	 * The hex value of the splotch color
 	 */
 	value: string;
+
+	/**
+	 * Adds class `clay-color-swatch-item-last-row`
+	 */
+	last?: boolean;
 }
 
 /**
  * Renders component that displays a color
  */
 const ClayColorPickerSplotch = React.forwardRef<HTMLButtonElement, IProps>(
-	({active, className, size, value, ...otherProps}, ref) => {
+	({active, className, last, size, value, ...otherProps}, ref) => {
 		const color = tinycolor(value);
 
 		const isHex = (color.getFormat() || '').match('hex');
@@ -43,6 +48,7 @@ const ClayColorPickerSplotch = React.forwardRef<HTMLButtonElement, IProps>(
 				className={classNames('clay-color-btn', className, {
 					active,
 					'clay-color-btn-bordered': requireBorder,
+					'clay-color-swatch-item-last-row': last,
 				})}
 				displayType={null}
 				ref={ref}
diff --git a/packages/clay-color-picker/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-color-picker/src/__tests__/__snapshots__/index.tsx.snap
index 286cbe2cc0..bc9dc57948 100644
--- a/packages/clay-color-picker/src/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/clay-color-picker/src/__tests__/__snapshots__/index.tsx.snap
@@ -324,7 +324,7 @@ exports[`Rendering default 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -334,7 +334,7 @@ exports[`Rendering default 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -344,7 +344,7 @@ exports[`Rendering default 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -354,7 +354,7 @@ exports[`Rendering default 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -364,7 +364,7 @@ exports[`Rendering default 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -374,7 +374,7 @@ exports[`Rendering default 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -384,7 +384,7 @@ exports[`Rendering default 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -394,7 +394,7 @@ exports[`Rendering default 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -404,7 +404,7 @@ exports[`Rendering default 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -414,7 +414,7 @@ exports[`Rendering default 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -699,7 +699,7 @@ exports[`Rendering disabled palette 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -709,7 +709,7 @@ exports[`Rendering disabled palette 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -719,7 +719,7 @@ exports[`Rendering disabled palette 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -729,7 +729,7 @@ exports[`Rendering disabled palette 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -739,7 +739,7 @@ exports[`Rendering disabled palette 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -749,7 +749,7 @@ exports[`Rendering disabled palette 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -759,7 +759,7 @@ exports[`Rendering disabled palette 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -769,7 +769,7 @@ exports[`Rendering disabled palette 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -779,7 +779,7 @@ exports[`Rendering disabled palette 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -789,7 +789,7 @@ exports[`Rendering disabled palette 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1076,7 +1076,7 @@ exports[`Rendering disabled state 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1086,7 +1086,7 @@ exports[`Rendering disabled state 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1096,7 +1096,7 @@ exports[`Rendering disabled state 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1106,7 +1106,7 @@ exports[`Rendering disabled state 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1116,7 +1116,7 @@ exports[`Rendering disabled state 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1126,7 +1126,7 @@ exports[`Rendering disabled state 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -1136,7 +1136,7 @@ exports[`Rendering disabled state 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1146,7 +1146,7 @@ exports[`Rendering disabled state 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1156,7 +1156,7 @@ exports[`Rendering disabled state 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -1166,7 +1166,7 @@ exports[`Rendering disabled state 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1458,7 +1458,7 @@ exports[`Rendering renders w/ var() 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1468,7 +1468,7 @@ exports[`Rendering renders w/ var() 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1478,7 +1478,7 @@ exports[`Rendering renders w/ var() 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1488,7 +1488,7 @@ exports[`Rendering renders w/ var() 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1498,7 +1498,7 @@ exports[`Rendering renders w/ var() 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1508,7 +1508,7 @@ exports[`Rendering renders w/ var() 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -1518,7 +1518,7 @@ exports[`Rendering renders w/ var() 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1528,7 +1528,7 @@ exports[`Rendering renders w/ var() 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1538,7 +1538,7 @@ exports[`Rendering renders w/ var() 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -1548,7 +1548,7 @@ exports[`Rendering renders w/ var() 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1833,7 +1833,7 @@ exports[`Rendering renders with a hash for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1843,7 +1843,7 @@ exports[`Rendering renders with a hash for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1853,7 +1853,7 @@ exports[`Rendering renders with a hash for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1863,7 +1863,7 @@ exports[`Rendering renders with a hash for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1873,7 +1873,7 @@ exports[`Rendering renders with a hash for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1883,7 +1883,7 @@ exports[`Rendering renders with a hash for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -1893,7 +1893,7 @@ exports[`Rendering renders with a hash for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1903,7 +1903,7 @@ exports[`Rendering renders with a hash for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -1913,7 +1913,7 @@ exports[`Rendering renders with a hash for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -1923,7 +1923,7 @@ exports[`Rendering renders with a hash for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2216,7 +2216,7 @@ exports[`Rendering renders with a named color for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2226,7 +2226,7 @@ exports[`Rendering renders with a named color for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2236,7 +2236,7 @@ exports[`Rendering renders with a named color for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2246,7 +2246,7 @@ exports[`Rendering renders with a named color for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2256,7 +2256,7 @@ exports[`Rendering renders with a named color for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2266,7 +2266,7 @@ exports[`Rendering renders with a named color for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -2276,7 +2276,7 @@ exports[`Rendering renders with a named color for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2286,7 +2286,7 @@ exports[`Rendering renders with a named color for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2296,7 +2296,7 @@ exports[`Rendering renders with a named color for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -2306,7 +2306,7 @@ exports[`Rendering renders with a named color for the value 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2591,7 +2591,7 @@ exports[`Rendering small color-picker 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2601,7 +2601,7 @@ exports[`Rendering small color-picker 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2611,7 +2611,7 @@ exports[`Rendering small color-picker 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2621,7 +2621,7 @@ exports[`Rendering small color-picker 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2631,7 +2631,7 @@ exports[`Rendering small color-picker 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2641,7 +2641,7 @@ exports[`Rendering small color-picker 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -2651,7 +2651,7 @@ exports[`Rendering small color-picker 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2661,7 +2661,7 @@ exports[`Rendering small color-picker 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"
@@ -2671,7 +2671,7 @@ exports[`Rendering small color-picker 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn clay-color-btn-bordered btn"
@@ -2681,7 +2681,7 @@ exports[`Rendering small color-picker 1`] = `
             />
           </div>
           <div
-            class="clay-color-swatch-item"
+            class="clay-color-swatch-item clay-color-swatch-item-last-row"
           >
             <button
               class="clay-color-btn btn"