Merge pull request #308 from storybookjs/amber/ch-334-update-taglist-…

…styles-in-storybook-ds Update TagItem && TagList Styles
storybookjs · Oct 21, 2021 · 5fe9cd3 · 5fe9cd3
2 parents 43bb937 + 69857d7
commit 5fe9cd3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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;