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(({ isLoading, children }) children: isLoading ? randomString(5, 12) : children, ...(isLoading && { 'aria-label': 'Loading tag' }), }))` - 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;