From 69857d732faabf868af5836c451f9fcdcffb4778 Mon Sep 17 00:00:00 2001
From: Amber Smith <amber@chromatic.com>
Date: Thu, 21 Oct 2021 14:50:56 -0400
Subject: [PATCH] - add new colors - update TagItem and TagList styles (+
 alphabetize)

---
 src/components/shared/styles.ts |  4 ++++
 src/components/tag/TagItem.tsx  | 14 +++++++-------
 src/components/tag/TagList.tsx  |  4 +++-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/shared/styles.ts b/src/components/shared/styles.ts
index 8dff9df6..9115c2a6 100644
--- a/src/components/shared/styles.ts
+++ b/src/components/shared/styles.ts
@@ -25,6 +25,10 @@ export const color = {
   ultraviolet: '#2A0481',
   red: '#ff4400',
 
+  // Calm
+  blueLighter: '#E3F3FF', // rgba($color.blue, 12%)
+  blueLight: '#F3FAFF', // rgba($color.blue, 6%)
+
   // Monochrome
   lightest: '#FFFFFF',
   lighter: '#F8F8F8',
diff --git a/src/components/tag/TagItem.tsx b/src/components/tag/TagItem.tsx
index 72feb288..dfa4294a 100644
--- a/src/components/tag/TagItem.tsx
+++ b/src/components/tag/TagItem.tsx
@@ -18,17 +18,17 @@ export const TagItem = styled.div.attrs<TagItemProps>(({ isLoading, children })
   children: isLoading ? randomString(5, 12) : children,
   ...(isLoading && { 'aria-label': 'Loading tag' }),
 }))<TagItemProps>`
-  display: inline-block;
-  background: ${background.app};
+  background: ${color.blueLight};
+  border-color: transparent;
   border-radius: ${spacing.borderRadius.small}px;
-  padding: 6px 10px 4px 10px;
+  border-style: solid;
+  border-width: 1px;
+  color: ${color.darkest};
+  display: inline-block;
   font-size: ${typography.size.s2}px;
   line-height: ${typography.size.m1}px;
+  padding: 6px 10px 4px 10px;
   position: relative;
-  color: ${color.darkest};
-  border-width: 1px;
-  border-style: solid;
-  border-color: transparent;
   white-space: nowrap;
 
   ${(props) =>
diff --git a/src/components/tag/TagList.tsx b/src/components/tag/TagList.tsx
index 6bdd23b8..2e65872a 100644
--- a/src/components/tag/TagList.tsx
+++ b/src/components/tag/TagList.tsx
@@ -1,6 +1,6 @@
 import React, { useState, forwardRef } from 'react';
 import styled from 'styled-components';
-import { typography } from '../shared/styles';
+import { color, typography } from '../shared/styles';
 import { Link } from '../Link';
 import { TagItem } from './TagItem';
 
@@ -17,7 +17,9 @@ const TagListWrapper = styled.div`
 `;
 
 const MoreTagsButton = styled(Link)`
+  color: ${color.mediumdark};
   font-size: ${typography.size.s2}px;
+  font-weight: ${typography.weight.bold};
   padding-left: 5px;
   padding-right: 5px;