705 lines
18 KiB
JavaScript
705 lines
18 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
prefix: "tw-",
|
|
corePlugins: {
|
|
preflight: false, // disable Tailwind's reset
|
|
},
|
|
content: ["./src/**/*.{js,jsx,ts,tsx}", "../../docs/content/**/*.{mdx,md}"],
|
|
darkMode: ["class", `[data-theme="dark"]`], // hooks into docusaurus' dark mode settigns
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
white: "#FFFFFF",
|
|
gray: {
|
|
50: "#F8F9FA",
|
|
100: "#F1F3F5",
|
|
200: "#ECEEF0",
|
|
300: "#ECEDEE",
|
|
400: "#E6E8EB",
|
|
500: "#DFE3E6",
|
|
600: "#C1C8CD",
|
|
700: "#889096",
|
|
800: "#787F85",
|
|
900: "#687076",
|
|
},
|
|
black: {
|
|
50: "#697177",
|
|
100: "#3A3F42",
|
|
200: "#2B2F31",
|
|
300: "#202425",
|
|
400: "#28282C",
|
|
500: "#26292B",
|
|
600: "#151718",
|
|
700: "#1C1C1F",
|
|
800: "#11181C",
|
|
900: "#1A1D1E",
|
|
},
|
|
green: {
|
|
50: "#DDF3E4",
|
|
100: "#CCEBD7",
|
|
200: "#B4DFC4",
|
|
300: "#4CC38A",
|
|
400: "#30A46C",
|
|
500: "#18794E",
|
|
600: "#164430",
|
|
700: "#133929",
|
|
800: "#113123",
|
|
},
|
|
blue: {
|
|
50: "#E1F0FF",
|
|
100: "#CEE7FE",
|
|
200: "#B7D9F8",
|
|
300: "#52A9FF",
|
|
400: "#0091FF",
|
|
500: "#006ADC",
|
|
600: "#0D3868",
|
|
700: "#0F3058",
|
|
800: "#102A4C",
|
|
},
|
|
purple: {
|
|
50: "#EDE9FE",
|
|
100: "#E4DEFC",
|
|
200: "#D7CFF9",
|
|
300: "#9E8CFC",
|
|
400: "#7C66DC",
|
|
500: "#6E56CF",
|
|
600: "#644FC1",
|
|
700: "#5746AF",
|
|
800: "#5842C3",
|
|
900: "#392C72",
|
|
},
|
|
orange: {
|
|
50: "#FFECBC",
|
|
100: "#FFE3A2",
|
|
200: "#FFD386",
|
|
300: "#FFB224",
|
|
400: "#F1A10D",
|
|
500: "#AD5700",
|
|
600: "#573300",
|
|
700: "#4A2900",
|
|
800: "#3F2200",
|
|
},
|
|
red: {
|
|
50: "#FFE5E5",
|
|
100: "#FDD8D8",
|
|
200: "#F9C6C6",
|
|
300: "#FF6369",
|
|
400: "#F2555A",
|
|
500: "#E5484D",
|
|
600: "#DC3D43",
|
|
700: "#CD2B31",
|
|
800: "#AA2429",
|
|
900: "#671E22",
|
|
},
|
|
pink: {
|
|
50: "#FCE5F3",
|
|
100: "#F9D8EC",
|
|
200: "#F3C6E2",
|
|
300: "#F65CB6",
|
|
400: "#D6409F",
|
|
500: "#CD1D8D",
|
|
600: "#601D48",
|
|
700: "#501B3F",
|
|
800: "#451A37",
|
|
},
|
|
/* docs colors */
|
|
medusa: {
|
|
bg: {
|
|
subtle: {
|
|
DEFAULT: "#F8F9FA",
|
|
dark: "#161618",
|
|
hover: {
|
|
DEFAULT: "#F1F3F5",
|
|
dark: "#1C1C1F",
|
|
},
|
|
pressed: {
|
|
DEFAULT: "#ECEEF0",
|
|
dark: "#232326",
|
|
},
|
|
},
|
|
base: {
|
|
DEFAULT: "#FFFFFF",
|
|
dark: "#1C1C1F",
|
|
hover: {
|
|
DEFAULT: "#F8F9FA",
|
|
dark: "#232326",
|
|
},
|
|
pressed: {
|
|
DEFAULT: "#F1F3F5",
|
|
dark: "#28282C",
|
|
},
|
|
},
|
|
component: {
|
|
DEFAULT: "#F1F3F5",
|
|
dark: "#2E2E32",
|
|
},
|
|
field: {
|
|
DEFAULT: "#F8F9FA",
|
|
dark: "#232326",
|
|
hover: {
|
|
DEFAULT: "#F1F3F5",
|
|
dark: "#28282C",
|
|
},
|
|
},
|
|
highlight: {
|
|
DEFAULT: "#E1F0FF",
|
|
dark: "#102A4C",
|
|
},
|
|
"toggle-off": {
|
|
DEFAULT: "#C1C8CD",
|
|
dark: "#3E3E44",
|
|
},
|
|
overlay: {
|
|
DEFAULT: "rgba(17, 24, 28, 0.4)",
|
|
dark: "rgba(22, 22, 24, 0.7)",
|
|
},
|
|
interactive: {
|
|
DEFAULT: "#6E56CF",
|
|
dark: "#6E56CF",
|
|
},
|
|
},
|
|
border: {
|
|
base: {
|
|
DEFAULT: "#E6E8EB",
|
|
dark: "#2E2E32",
|
|
},
|
|
strong: {
|
|
DEFAULT: "#D7DBDF",
|
|
dark: "#3E3E44",
|
|
},
|
|
focus: {
|
|
DEFAULT: "#6E56CF",
|
|
dark: "#6E56CF",
|
|
inset: {
|
|
DEFAULT: "#FFFFFF",
|
|
dark: "#1C1C1F",
|
|
},
|
|
},
|
|
interactive: {
|
|
DEFAULT: "#6E56CF",
|
|
dark: "#6E56CF",
|
|
},
|
|
"neutral-buttons": {
|
|
DEFAULT: "#11181C1A",
|
|
dark: "#FFFFFF1F",
|
|
},
|
|
},
|
|
text: {
|
|
base: {
|
|
DEFAULT: "#11181C",
|
|
dark: "#EDEDEF",
|
|
},
|
|
subtle: {
|
|
DEFAULT: "#687076",
|
|
dark: "#7E7D86",
|
|
},
|
|
placeholder: {
|
|
DEFAULT: "#889096",
|
|
dark: "#706F78",
|
|
},
|
|
disabled: {
|
|
DEFAULT: "#C1C8CD",
|
|
dark: "#504F57",
|
|
},
|
|
"on-color": {
|
|
DEFAULT: "#FFFFFF",
|
|
dark: "#FFFFFF",
|
|
},
|
|
interactive: {
|
|
DEFAULT: "#6E56CF",
|
|
dark: "#7C66DC",
|
|
hover: {
|
|
DEFAULT: "#644FC1",
|
|
dark: "#9E8CFC",
|
|
},
|
|
},
|
|
error: {
|
|
DEFAULT: "#E5484D",
|
|
dark: "#E5484D",
|
|
},
|
|
},
|
|
button: {
|
|
primary: {
|
|
DEFAULT: "#6E56CF",
|
|
dark: "#6E56CF",
|
|
hover: {
|
|
DEFAULT: "#644FC1",
|
|
dark: "#7C66DC",
|
|
},
|
|
pressed: {
|
|
DEFAULT: "#5746AF",
|
|
dark: "#9E8CFC",
|
|
},
|
|
},
|
|
secondary: {
|
|
DEFAULT: "#FFFFFF",
|
|
dark: "#232326",
|
|
hover: {
|
|
DEFAULT: "#F8F9FA",
|
|
dark: "#2E2E32",
|
|
},
|
|
pressed: {
|
|
DEFAULT: "#F1F3F5",
|
|
dark: "#2E2E32",
|
|
},
|
|
},
|
|
danger: {
|
|
DEFAULT: "#E5484D",
|
|
dark: "#E5484D",
|
|
hover: {
|
|
DEFAULT: "#DC3D43",
|
|
dark: "#DC3D43",
|
|
},
|
|
pressed: {
|
|
DEFAULT: "#CD2B31",
|
|
dark: "#CD2B31",
|
|
},
|
|
},
|
|
success: {
|
|
DEFAULT: "#30A46C",
|
|
dark: "#30A46C",
|
|
},
|
|
neutral: {
|
|
hover: {
|
|
DEFAULT: "#F8F9FA",
|
|
dark: "#2E2E32",
|
|
},
|
|
pressed: {
|
|
DEFAULT: "#F1F3F5",
|
|
dark: "#34343A",
|
|
},
|
|
},
|
|
disabled: {
|
|
DEFAULT: "#ECEEF0",
|
|
dark: "#28282C",
|
|
},
|
|
},
|
|
icon: {
|
|
primary: {
|
|
DEFAULT: "#11181C",
|
|
dark: "#EDEDEF",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "#687076",
|
|
dark: "#7E7D86",
|
|
},
|
|
placeholder: {
|
|
DEFAULT: "#889096",
|
|
dark: "#706F78",
|
|
},
|
|
disabled: {
|
|
DEFAULT: "#C1C8CD",
|
|
dark: "#504F57",
|
|
},
|
|
"on-color": {
|
|
DEFAULT: "#FFFFFF",
|
|
dark: "#FFFFFF",
|
|
},
|
|
interactive: {
|
|
DEFAULT: "#6E56CF",
|
|
dark: "#7C66DC",
|
|
hover: {
|
|
DEFAULT: "#644FC1",
|
|
dark: "#9E8CFC",
|
|
},
|
|
},
|
|
error: {
|
|
DEFAULT: "#E5484D",
|
|
dark: "#E5484D",
|
|
},
|
|
subtle: {
|
|
DEFAULT: "#687076",
|
|
dark: "#7E7D86",
|
|
},
|
|
},
|
|
support: {
|
|
error: {
|
|
DEFAULT: "#E5484D",
|
|
dark: "#E5484D",
|
|
},
|
|
warning: {
|
|
DEFAULT: "#FFB224",
|
|
dark: "#FFB224",
|
|
},
|
|
success: {
|
|
DEFAULT: "#30A46C",
|
|
dark: "#30A46C",
|
|
},
|
|
info: {
|
|
DEFAULT: "#0091FF",
|
|
dark: "#0091FF",
|
|
},
|
|
},
|
|
code: {
|
|
block: {
|
|
bg: "#1C1C1F",
|
|
transparent: "transparent",
|
|
border: "#2E2E32",
|
|
action: "#706F78",
|
|
},
|
|
tabs: {
|
|
bg: "#161616",
|
|
},
|
|
tab: {
|
|
bg: "#1C1C1F",
|
|
hover: "rgba(141, 141, 141, 0.16)",
|
|
border: "#3E3E44",
|
|
text: {
|
|
DEFAULT: "#7E7D86",
|
|
active: "#EDEDEF",
|
|
},
|
|
title: "#7E7D86",
|
|
},
|
|
"text-highlight": "#102A4C",
|
|
},
|
|
tag: {
|
|
purple: {
|
|
bg: {
|
|
DEFAULT: "#EDE9FE",
|
|
dark: "#2C2250",
|
|
hover: {
|
|
DEFAULT: "#E4DEFC",
|
|
dark: "#32275F",
|
|
},
|
|
},
|
|
text: {
|
|
DEFAULT: "#5746AF",
|
|
dark: "#9E8CFC",
|
|
},
|
|
icon: {
|
|
DEFAULT: "#6E56CF",
|
|
dark: "#6E56CF",
|
|
},
|
|
border: {
|
|
DEFAULT: "#D7CFF9",
|
|
dark: "#392C72",
|
|
},
|
|
},
|
|
orange: {
|
|
bg: {
|
|
DEFAULT: "#FFECBC",
|
|
dark: "#3F2200",
|
|
hover: {
|
|
DEFAULT: "#FFE3A2",
|
|
dark: "#4A2900",
|
|
},
|
|
},
|
|
text: {
|
|
DEFAULT: "#AD5700",
|
|
dark: "#F1A10D",
|
|
},
|
|
icon: {
|
|
DEFAULT: "#FFB224",
|
|
dark: "#FFB224",
|
|
},
|
|
border: {
|
|
DEFAULT: "#FFD386",
|
|
dark: "#573300",
|
|
},
|
|
},
|
|
green: {
|
|
bg: {
|
|
DEFAULT: "#DDF3E4",
|
|
dark: "#113123",
|
|
hover: {
|
|
DEFAULT: "#CCEBD7",
|
|
dark: "#133929",
|
|
},
|
|
},
|
|
text: {
|
|
DEFAULT: "#18794E",
|
|
dark: "#4CC38A",
|
|
},
|
|
icon: {
|
|
DEFAULT: "#30A46C",
|
|
dark: "#30A46C",
|
|
},
|
|
border: {
|
|
DEFAULT: "#B4DFC4",
|
|
dark: "#164430",
|
|
},
|
|
},
|
|
blue: {
|
|
bg: {
|
|
DEFAULT: "#E1F0FF",
|
|
dark: "#102A4C",
|
|
hover: {
|
|
DEFAULT: "#CEE7FE",
|
|
dark: "#0F3058",
|
|
},
|
|
},
|
|
text: {
|
|
DEFAULT: "#006ADC",
|
|
dark: "#52A9FF",
|
|
},
|
|
icon: {
|
|
DEFAULT: "#0091FF",
|
|
dark: "#0091FF",
|
|
},
|
|
border: {
|
|
DEFAULT: "#B7D9F8",
|
|
dark: "#0D3868",
|
|
},
|
|
},
|
|
neutral: {
|
|
bg: {
|
|
DEFAULT: "#F1F3F5",
|
|
dark: "#28282C",
|
|
hover: {
|
|
DEFAULT: "#ECEEF0",
|
|
dark: "#2E2E32",
|
|
},
|
|
},
|
|
text: {
|
|
DEFAULT: "#687076",
|
|
dark: "#A09FA6",
|
|
},
|
|
icon: {
|
|
DEFAULT: "#889096",
|
|
dark: "#706F78",
|
|
},
|
|
border: {
|
|
DEFAULT: "#DFE3E6",
|
|
dark: "#3E3E44",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
/* docs defaults */
|
|
docs: {
|
|
bg: {
|
|
DEFAULT: "#FFFFFF",
|
|
dark: "#161618",
|
|
surface: {
|
|
DEFAULT: "#F8F9FA",
|
|
dark: "#1C1C1F",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
boxShadow: {
|
|
overlay: "0px 2px 16px rgba(0, 0, 0, 0.08)",
|
|
"overlay-dark": "0px 2px 16px rgba(0, 0, 0, 0.32)",
|
|
"field-focused": "0px 0px 0px 4px #EDE9FE",
|
|
"field-focused-dark": "0px 0px 0px 4px #2C2250",
|
|
"button-focused": "0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #6E56CF",
|
|
"button-focused-dark":
|
|
"0px 0px 0px 2px #1C1C1F, 0px 0px 0px 4px #6E56CF",
|
|
navbar: "0px 1px 0px 0px #E6E8EB",
|
|
"navbar-dark": "0px 1px 0px 0px #2E2E32",
|
|
flyout:
|
|
"0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 8px 16px rgba(17, 24, 28, 0.08)",
|
|
"flyout-dark":
|
|
"0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 8px 16px rgba(0, 0, 0, 0.32)",
|
|
"neutral-button-focused":
|
|
"0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #6E56CF",
|
|
"neutral-button-focused-dark":
|
|
"0px 0px 0px 2px #1C1C1F, 0px 0px 0px 4px #6E56CF",
|
|
"card-rest":
|
|
"0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 1px 2px -1px rgba(17, 24, 28, 0.08), 0px 2px 4px rgba(17, 24, 28, 0.04)",
|
|
"card-rest-dark":
|
|
"0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",
|
|
"card-hover":
|
|
"0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 1px 2px -1px rgba(17, 24, 28, 0.08), 0px 2px 8px rgba(17, 24, 28, 0.1)",
|
|
"card-hover-dark":
|
|
"0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px rgba(0, 0, 0, 0.32)",
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: "8px",
|
|
sm: "4px",
|
|
},
|
|
lineHeight: {
|
|
DEFAULT: "24px",
|
|
},
|
|
backgroundImage: {
|
|
"primary-gradient":
|
|
"linear-gradient(90deg, rgba(146, 144, 254, 0) 0%, rgba(163, 219, 254, 0.4) 26.04%, #9290FE 53.65%, rgba(197, 145, 255, 0.4) 78.65%, rgba(201, 138, 255, 0) 100%)",
|
|
"code-fade": "linear-gradient(90deg, #1C1C1F00, #1C1C1F 24px)",
|
|
"button-neutral":
|
|
"linear-gradient(180deg, #FFFFFF 30.1%, #F8F9FA 100%)",
|
|
"button-neutral-dark":
|
|
"linear-gradient(180deg, #2E2E32 0%, #28282C 32.67%)",
|
|
"no-image": "none",
|
|
},
|
|
screens: {
|
|
xs: "576px",
|
|
lg: "992px",
|
|
xl: "1419px",
|
|
xxl: "1440px",
|
|
},
|
|
transitionTimingFunction: {
|
|
ease: "ease",
|
|
},
|
|
width: {
|
|
sidebar: "321px",
|
|
"sidebar-hidden": "0px",
|
|
"main-content": "1140px",
|
|
"main-content-hidden-sidebar": "1440px",
|
|
},
|
|
height: {
|
|
navbar: "57px",
|
|
},
|
|
maxWidth: {
|
|
"main-content": "1140px",
|
|
"main-content-hidden-sidebar": "1440px",
|
|
xl: "1419px",
|
|
},
|
|
minWidth: {
|
|
xl: "1419px",
|
|
},
|
|
fontSize: {
|
|
"body-regular-plus": [
|
|
"14px",
|
|
{
|
|
lineHeight: "24px",
|
|
fontWeight: "500",
|
|
},
|
|
],
|
|
"body-regular": [
|
|
"14px",
|
|
{
|
|
lineHeight: "24px",
|
|
fontWeight: "400",
|
|
},
|
|
],
|
|
h1: [
|
|
"32px",
|
|
{
|
|
lineHeight: "44px",
|
|
fontWeight: "500",
|
|
},
|
|
],
|
|
h2: [
|
|
"24px",
|
|
{
|
|
lineHeight: "32px",
|
|
fontWeight: "500",
|
|
},
|
|
],
|
|
h3: [
|
|
"18px",
|
|
{
|
|
lineHeight: "28px",
|
|
fontWeight: "500",
|
|
},
|
|
],
|
|
"label-large-plus": [
|
|
"16px",
|
|
{
|
|
lineHeight: "20px",
|
|
fontWeight: "500",
|
|
},
|
|
],
|
|
"label-regular-plus": [
|
|
"14px",
|
|
{
|
|
lineHeight: "20px",
|
|
fontWeight: "500",
|
|
},
|
|
],
|
|
"label-regular": [
|
|
"14px",
|
|
{
|
|
lineHeight: "20px",
|
|
fontWeight: "400",
|
|
},
|
|
],
|
|
"label-small-plus": [
|
|
"13px",
|
|
{
|
|
lineHeight: "20px",
|
|
fontWeight: "500",
|
|
},
|
|
],
|
|
"label-small": [
|
|
"13px",
|
|
{
|
|
lineHeight: "20px",
|
|
fontWeight: "400",
|
|
},
|
|
],
|
|
"label-x-small": [
|
|
"12px",
|
|
{
|
|
lineHeight: "20px",
|
|
fontWeight: "400",
|
|
},
|
|
],
|
|
"label-x-small-plus": [
|
|
"12px",
|
|
{
|
|
lineHeight: "20px",
|
|
fontWeight: "500",
|
|
},
|
|
],
|
|
},
|
|
},
|
|
fontFamily: {
|
|
base: [
|
|
"Inter",
|
|
"BlinkMacSystemFont",
|
|
"-apple-system",
|
|
"Segoe UI",
|
|
"Roboto",
|
|
"Oxygen",
|
|
"Ubuntu",
|
|
"Cantarell",
|
|
"Fira Sans",
|
|
"Droid Sans",
|
|
"Helvetica Neue",
|
|
"Helvetica",
|
|
"Arial",
|
|
"sans-serif",
|
|
],
|
|
monospace: [
|
|
"Roboto Mono",
|
|
"SFMono-Regular",
|
|
"Menlo",
|
|
"Monaco",
|
|
"Consolas",
|
|
"Liberation Mono",
|
|
"Courier New",
|
|
"monospace",
|
|
],
|
|
},
|
|
spacing: {
|
|
px: "1px",
|
|
0: "0px",
|
|
0.4: "7px",
|
|
0.5: "8px",
|
|
1: "16px",
|
|
1.5: "24px",
|
|
2: "32px",
|
|
3: "48px",
|
|
4: "64px",
|
|
5: "80px",
|
|
6: "96px",
|
|
7: "112px",
|
|
8: "128px",
|
|
},
|
|
backgroundImage: {
|
|
"large-card": "url('/img/squares-bg-light.svg')",
|
|
"large-card-dark": "url('/img/squares-bg.svg')",
|
|
"large-card-fade":
|
|
"linear-gradient(transparent, url('/img/squares-bg-light.svg'))",
|
|
"large-card-fade-dark":
|
|
"linear-gradient(transparent, url('/img/squares-bg.svg'))",
|
|
"large-card-fade-hover": "linear-gradient(transparent, #1C1C1F)",
|
|
"large-card-fade-hover-dark": "linear-gradient(transparent, #232326)",
|
|
"announcement-bg": "url('/img/announcement-bg.svg')",
|
|
"card-highlighted": "url('/img/small-squares-bg-light.svg')",
|
|
"card-highlighted-dark": "url('/img/small-squares-bg.svg')",
|
|
"search-hit": "url('/img/search-hit-light.svg')",
|
|
"search-hit-dark": "url('/img/search-hit.svg')",
|
|
"search-arrow": "url('/img/search-hit-arrow-light.svg')",
|
|
"search-arrow-dark": "url('/img/search-hit-arrow.svg')",
|
|
"search-no-result": "url('/img/search-no-result-light.svg')",
|
|
"search-no-result-dark": "url('/img/search-no-result.svg')",
|
|
"magnifying-glass": "url('/static/img/magnifying-glass.svg')",
|
|
toc: "url('/img/side-menu-light.svg')",
|
|
"toc-dark": "url('/img/side-menu.svg')",
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|