lib/styles/palette.js
// source : https://yeun.github.io/open-color/
const palette = {
gray: [
"#f8f9fa",
"#f1f3f5",
"#e9ecef",
"#dee2e6",
"#ced4da",
"#adb5bd",
"#868296",
"#495057",
"#343a40",
"#212529",
],
cyan: [
"#e3fafc",
"#c5f6fa",
"#99e9f2",
"#66d9e8",
"#3bc9db",
"#22b8cf",
"#15aabf",
"#1098ad",
"#0c8599",
"#0b7285",
],
};
export default palette;
import React from "react";
import styled from "styled-components";
import palette from "../../lib/styles/palette";
const StyledButton = styled.button`
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: bold;
padding: 0.25rem 1rem;
color: white;
outline: none;
cursor: pointer;
background: ${palette.gray[8]};
&:hover {
background: ${palette.gray[6]};
}
`;