asyavee/medusa-store
1
0 Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

docs: improve tailwind configuration (#5215)

Browse Source
This commit is contained in:
Shahed Nasser authored and GitHub committed 2023-09-26 15:08:30 +03:00
1 parent 240c439beb
commit 63aea62d7a
98 files changed
+643 -894
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

www/packages/tailwind/base.tailwind.config.js
+89 -306
View File
@@ -1,4 +1,5 @@
import plugin from "tailwindcss/plugin"
import presets from "./theme-presets"
/** @type {import('tailwindcss').Config} */
module.exports = {
@@ -13,374 +14,158 @@ module.exports = {
medusa: {
bg: {
subtle: {
DEFAULT: "#F9FAFB",
dark: "#18181A",
hover: {
DEFAULT: "#F3F4F6",
dark: "#1B1B1F",
},
pressed: {
DEFAULT: "#E5E7EB",
dark: "#27282D",
},
DEFAULT: "var(--docs-bg-subtle)",
hover: "var(--docs-bg-subtle-hover)",
pressed: "var(--docs-bg-subtle-pressed)",
},
base: {
DEFAULT: "#FFFFFF",
dark: "#1B1B1F",
hover: {
DEFAULT: "#F9FAFB",
dark: "#27282D",
},
pressed: {
DEFAULT: "#F3F4F6",
dark: "#2E3035",
},
},
component: {
DEFAULT: "#F1F3F5",
dark: "#27282D",
DEFAULT: "var(--docs-bg-base)",
hover: "var(--docs-bg-base-hover)",
pressed: "var(--docs-bg-base-pressed)",
},
component: "var(--docs-bg-component)",
"switch-off": {
DEFAULT: "#E5E7EB",
dark: "#35373C",
hover: {
DEFAULT: "#E5E7EB",
dark: "#464B50",
},
},
interactive: {
DEFAULT: "#3B82F6",
dark: "#60A5FA",
},
overlay: {
DEFAULT: "rgba(3, 7, 18, 0.4)",
dark: "rgba(24, 24, 26, 0.7)",
},
disabled: {
DEFAULT: "#F3F4F6",
dark: "#27282D",
DEFAULT: "var(--docs-bg-switch-off)",
hover: "var(--docs-bg-switch-off-hover)",
},
interactive: "var(--docs-bg-interactive)",
overlay: "var(--docs-bg-overlay)",
disabled: "var(--docs-bg-disabled)",
highlight: {
DEFAULT: "#EFF6FF",
dark: "#172554",
hover: {
DEFAULT: "#DBEAFE",
dark: "#1E3A8A",
},
DEFAULT: "var(--docs-bg-highlight)",
hover: "var(--docs-bg-highlight-hover)",
},
field: {
DEFAULT: "#F9FAFB",
dark: "#27282D",
hover: {
DEFAULT: "#F3F4F6",
dark: "#2E3035",
},
DEFAULT: "var(--docs-bg-field)",
hover: "var(--docs-bg-field-hover)",
},
},
fg: {
base: {
DEFAULT: "#030712",
dark: "#EDEEF0",
},
subtle: {
DEFAULT: "#4B5563",
dark: "#ADB1B8",
},
muted: {
DEFAULT: "#9CA3AF",
dark: "#696E77",
},
disabled: {
DEFAULT: "#D1D5DB",
dark: "#3C3F44",
},
base: "var(--docs-fg-base)",
subtle: "var(--docs-fg-subtle)",
muted: "var(--docs-fg-muted)",
disabled: "var(--docs-fg-disabled)",
on: {
color: {
DEFAULT: "#FFFFFF",
dark: "#FFFFFF",
},
inverted: {
DEFAULT: "#FFFFFF",
dark: "#18181A",
},
color: "var(--docs-fg-on-color)",
inverted: "var(--docs-fg-on-inverted)",
},
interactive: {
DEFAULT: "#3B82F6",
dark: "#60A5FA",
hover: {
DEFAULT: "#2563EB",
dark: "#3B82F6",
},
},
error: {
DEFAULT: "#E11D48",
dark: "#FB7185",
DEFAULT: "var(--docs-fg-interactive)",
hover: "var(--docs-fg-interactive-hover)",
},
error: "var(--docs-fg-error)",
},
border: {
base: {
DEFAULT: "#E5E7EB",
dark: "#2E3035",
},
strong: {
DEFAULT: "#D1D5DB",
dark: "#35373C",
},
loud: {
DEFAULT: "#030712",
dark: "#EDEEF0",
},
interactive: {
DEFAULT: "#3B82F6",
dark: "#60A5FA",
},
error: {
DEFAULT: "#E11D48",
dark: "#F43F5E",
},
danger: {
DEFAULT: "#BE123C",
dark: "#BE123C",
},
transparent: {
DEFAULT: "rgba(3, 7, 18, 0)",
dark: "rgba(238, 238, 238, 0)",
},
base: "var(--docs-border-base)",
strong: "var(--docs-border-strong)",
loud: "var(--docs-border-loud)",
interactive: "var(--docs-border-interactive)",
error: "var(--docs-border-error)",
danger: "var(--docs-border-danger)",
transparent: "var(--docs-border-transparent)",
},
button: {
inverted: {
DEFAULT: "#030712",
dark: "#EDEEF0",
hover: {
DEFAULT: "#1F2937",
dark: "#FFFFFF",
},
pressed: {
DEFAULT: "#374151",
dark: "#EDEEF0",
},
DEFAULT: "var(--docs-button-inverted)",
hover: "var(--docs-button-inverted-hover)",
pressed: "var(--docs-button-inverted-pressed)",
},
neutral: {
DEFAULT: "#FFFFFF",
dark: "#27282D",
hover: {
DEFAULT: "#F9FAFB",
dark: "#35373C",
},
pressed: {
DEFAULT: "#F3F4F6",
dark: "#3C3F44",
},
DEFAULT: "var(--docs-button-neutral)",
hover: "var(--docs-button-neutral-hover)",
pressed: "var(--docs-button-neutral-pressed)",
},
danger: {
DEFAULT: "#E11D48",
dark: "#9F1239",
hover: {
DEFAULT: "#E11D48",
dark: "#BE123C",
},
pressed: {
DEFAULT: "#BE123C",
dark: "#E11D48",
},
DEFAULT: "var(--docs-button-danger)",
hover: "var(--docs-button-danger-hover)",
pressed: "var(--docs-button-danger-pressed)",
},
transparent: {
DEFAULT: "rgba(255, 255, 255, 0)",
dark: "rgba(0, 0, 0, 0)",
hover: {
DEFAULT: "#F9FAFB",
dark: "#27282D",
},
pressed: {
DEFAULT: "#F3F4F6",
dark: "#2E3035",
},
},
disabled: {
DEFAULT: "#ECEEF0",
dark: "#28282C",
DEFAULT: "var(--docs-button-transparent)",
hover: "var(--docs-button-transparent-hover)",
pressed: "var(--docs-button-transparent-pressed)",
},
disabled: "var(--docs-button-disabled)",
},
tag: {
neutral: {
bg: {
DEFAULT: "#F3F4F6",
dark: "#2E3035",
hover: {
DEFAULT: "#E5E7EB",
dark: "#35373C",
},
},
text: {
DEFAULT: "#4B5563",
dark: "#ADB1B8",
},
icon: {
DEFAULT: "#6B7280",
dark: "#7D828A",
},
border: {
DEFAULT: "#E5E7EB",
dark: "#3C3F44",
DEFAULT: "var(--docs-tags-neutral-bg)",
hover: "var(--docs-tags-neutral-bg-hover)",
},
text: "var(--docs-tags-neutral-text)",
icon: "var(--docs-tags-neutral-icon)",
border: "var(--docs-tags-neutral-border)",
},
purple: {
bg: {
DEFAULT: "#EDE9FE",
dark: "#2E1064",
hover: {
DEFAULT: "#DDD6FE",
dark: "#4C1D95",
},
},
text: {
DEFAULT: "#6D28D9",
dark: "#8B5CF6",
},
icon: {
DEFAULT: "#7C3AED",
dark: "#6D28D9",
},
border: {
DEFAULT: "#DDD6FE",
dark: "#4C1D95",
DEFAULT: "var(--docs-tags-purple-bg)",
hover: "var(--docs-tags-purple-bg-hover)",
},
text: "var(--docs-tags-purple-text)",
icon: "var(--docs-tags-purple-icon)",
border: "var(--docs-tags-purple-border)",
},
blue: {
bg: {
DEFAULT: "#DBEAFE",
dark: "#172554",
hover: {
DEFAULT: "#BFDBFE",
dark: "#1E2A8A",
},
},
text: {
DEFAULT: "#1D4ED8",
dark: "#3B82F6",
},
icon: {
DEFAULT: "#2563EB",
dark: "#1D4ED8",
},
border: {
DEFAULT: "#BFDBFE",
dark: "#1E3A8A",
DEFAULT: "var(--docs-tags-blue-bg)",
hover: "var(--docs-tags-blue-bg-hover)",
},
text: "var(--docs-tags-blue-text)",
icon: "var(--docs-tags-blue-icon)",
border: "var(--docs-tags-blue-border)",
},
green: {
bg: {
DEFAULT: "#D1FAE5",
dark: "#022C22",
hover: {
DEFAULT: "#A7F3D0",
dark: "#064E3B",
},
},
text: {
DEFAULT: "#047857",
dark: "#10B981",
},
icon: {
DEFAULT: "#059669",
dark: "#047857",
},
border: {
DEFAULT: "#A7F3D0",
dark: "#064E3B",
DEFAULT: "var(--docs-tags-green-bg)",
hover: "var(--docs-tags-green-bg-hover)",
},
text: "var(--docs-tags-green-text)",
icon: "var(--docs-tags-green-icon)",
border: "var(--docs-tags-green-border)",
},
orange: {
bg: {
DEFAULT: "#FEF4C7",
dark: "#451A03",
hover: {
DEFAULT: "#FDE68A",
dark: "#78350F",
},
},
text: {
DEFAULT: "#B45309",
dark: "#F59E0B",
},
icon: {
DEFAULT: "#D97706",
dark: "#B45309",
},
border: {
DEFAULT: "#FDE68A",
dark: "#78350F",
DEFAULT: "var(--docs-tags-orange-bg)",
hover: "var(--docs-tags-orange-bg-hover)",
},
text: "var(--docs-tags-orange-text)",
icon: "var(--docs-tags-orange-icon)",
border: "var(--docs-tags-orange-border)",
},
red: {
bg: {
DEFAULT: "#FFE4E6",
dark: "#4C0519",
hover: {
DEFAULT: "#FECDD3",
dark: "#881337",
},
},
text: {
DEFAULT: "#BE123C",
dark: "#FB7185",
},
icon: {
DEFAULT: "#E11D48",
dark: "#F43F5E",
},
border: {
DEFAULT: "#FECDD3",
dark: "#881337",
DEFAULT: "var(--docs-tags-red-bg)",
hover: "var(--docs-tags-red-bg-hover)",
},
text: "var(--docs-tags-red-text)",
icon: "var(--docs-tags-red-icon)",
border: "var(--docs-tags-red-border)",
},
},
code: {
text: {
base: {
DEFAULT: "#F9FAFB",
dark: "#EDEEF0",
},
subtle: {
DEFAULT: "#9CA3AF",
dark: "#696E77",
},
highlight: "#102A4C",
},
icon: {
DEFAULT: "#6B7280",
dark: "#464B50",
base: "var(--docs-code-text-base)",
subtle: "var(--docs-code-text-subtle)",
highlight: "var(--docs-code-text-highlight)",
},
icon: "var(--docs-code-icon)",
bg: {
base: {
DEFAULT: "#111827",
dark: "#1B1B1F",
DEFAULT: "var(--docs-code-bg-base)",
// Need this one for color-fade
transparent: {
DEFAULT: "#11182700",
dark: "#1B1B1F00",
},
},
header: {
DEFAULT: "#1F2937",
dark: "#18181A",
transparent: "var(--docs-code-bg-transparent)",
},
header: "var(--docs-code-bg-header)",
},
border: {
DEFAULT: "#374151",
dark: "#2E3035",
},
border: "var(--docs-code-border)",
},
},
/* docs defaults */
docs: {
bg: {
DEFAULT: "#FFFFFF",
dark: "#18181A",
surface: {
DEFAULT: "#F9FAFB",
dark: "#1B1B1F",
},
DEFAULT: "var(--docs-bg)",
surface: "var(--docs-bg-surface)",
},
},
},
@@ -470,11 +255,8 @@ module.exports = {
"button-danger-pressed-dark":
"linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.14) 100%)",
"code-fade": `linear-gradient(90deg, ${theme(
"colors.medusa.code.bg.base.transparent.DEFAULT"
"colors.medusa.code.bg.base.transparent"
)}, ${theme("colors.medusa.code.bg.base.DEFAULT")} 24px)`,
"code-fade-dark": `linear-gradient(90deg, ${theme(
"colors.medusa.code.bg.base.transparent.dark"
)}, ${theme("colors.medusa.code.bg.base.dark")} 24px)`,
fade: "linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
"fade-dark":
"linear-gradient(to top, rgba(27, 27, 31, 1), rgba(27, 27, 31, 0))",
@@ -758,7 +540,8 @@ module.exports = {
},
},
plugins: [
plugin(({ addVariant, addUtilities, addComponents, theme }) => {
plugin(({ addBase, addVariant, addUtilities, addComponents, theme }) => {
addBase(presets)
addVariant("search-cancel", "&::-webkit-search-cancel-button")
addUtilities({
".animation-fill-forwards": {