docs: update colors and typography (#8604)

medusajs · Aug 16, 2024 · f00e617 · f00e617
1 parent 12728f1
commit f00e617
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 89 deletions.
diff --git a/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx b/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx
@@ -39,7 +39,7 @@ const SecurityDescription = ({
         {getSecuritySchemaTypeName(securitySchema)}
       </p>
       {(securitySchema.type === "http" || securitySchema.type === "apiKey") && (
-        <p className={clsx("bg-docs-bg-surface", "p-1")}>
+        <p className={clsx("bg-medusa-bg-subtle", "p-1")}>
           <strong>
             {securitySchema.type === "http"
               ? "HTTP Authorization Scheme"

diff --git a/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx b/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx
@@ -12,7 +12,7 @@ const TagsOperationParametersNested = ({
       {...props}
       className={clsx(
         props.className,
-        "bg-docs-bg-surface px-1 pt-1",
+        "bg-medusa-bg-subtle px-1 pt-1",
         "border-medusa-border-base my-1 rounded-sm border"
       )}
     >

diff --git a/www/apps/ui/src/components/component-example.tsx b/www/apps/ui/src/components/component-example.tsx
@@ -44,7 +44,7 @@ export function ComponentExample({
           >
             <div
               className={clx(
-                "bg-docs-bg border-medusa-border-base flex max-h-[400px] min-h-[400px]",
+                "bg-medusa-bg-base border-medusa-border-base flex max-h-[400px] min-h-[400px]",
                 "w-full items-center justify-center overflow-auto rounded-md border px-10 py-5"
               )}
             >

diff --git a/www/packages/docs-ui/src/components/Bordered/index.tsx b/www/packages/docs-ui/src/components/Bordered/index.tsx
@@ -9,8 +9,8 @@ export const Bordered = ({ wrapperClassName, children }: BorderedProps) => {
   return (
     <span
       className={clsx(
-        "border-medusa-border-strong bg-docs-bg",
-        "dark:bg-docs-bg-dark mr-docs_1 inline-flex w-fit items-center justify-center rounded-docs_DEFAULT border border-solid p-[3px]",
+        "border-medusa-border-strong bg-medusa-bg-base",
+        "mr-docs_1 inline-flex w-fit items-center justify-center rounded-docs_DEFAULT border border-solid p-[3px]",
         "no-zoom-img",
         wrapperClassName
       )}

diff --git a/www/packages/docs-ui/src/components/LearningPath/index.tsx b/www/packages/docs-ui/src/components/LearningPath/index.tsx
@@ -35,7 +35,7 @@ export const LearningPath = ({
   return (
     <div
       className={clsx(
-        "rounded shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark bg-docs-bg-surface mt-docs_1.5 mb-docs_4",
+        "rounded shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark bg-medusa-bg-subtle mt-docs_1.5 mb-docs_4",
         className
       )}
     >

diff --git a/www/packages/tailwind/base.tailwind.config.js b/www/packages/tailwind/base.tailwind.config.js
@@ -186,43 +186,36 @@ module.exports = {
             },
           },
         },
-        /* docs defaults */
-        docs: {
-          bg: {
-            DEFAULT: "var(--docs-bg)",
-            surface: "var(--docs-bg-surface)",
-          },
-        },
       },
       boxShadow: {
         "elevation-card-rest":
           "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
         "elevation-card-rest-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
         "elevation-card-hover":
           "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.1)",
         "elevation-card-hover-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
         "elevation-tooltip":
           "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08)",
         "elevation-tooltip-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
         "elevation-flyout":
           "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)",
         "elevation-flyout-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
         "elevation-modal":
           "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 1.5px rgba(228, 228, 231, 0.6) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)",
         "elevation-modal-dark":
-          "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32)",
+          "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
         "button-neutral":
           "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)",
         "button-neutral-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
         "button-neutral-focused":
           "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
         "button-neutral-focused-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
         "button-danger":
           "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 1)",
         "button-danger-dark":
@@ -241,15 +234,15 @@ module.exports = {
           "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
 
         "elevation-code-block":
-          "0px 0px 0px 1px #18181B inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.20) inset",
+          "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset",
         "elevation-code-block-dark":
-          "0px 0px 0px 1px #27272A inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.10) inset",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
         active: "0px 0px 0px 3px #E1F0FF",
         "active-dark": "0px 0px 0px 3px #2C2250",
         "border-base":
           "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)",
         "border-base-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px #18181B, 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
       },
       borderRadius: {
         xxs: "2px",
@@ -323,128 +316,128 @@ module.exports = {
       },
       fontSize: {
         h1: [
-          "32px",
+          "2rem",
           {
-            lineHeight: "44px",
+            lineHeight: "2.75rem",
             fontWeight: "500",
           },
         ],
         h2: [
-          "24px",
+          "1.5rem",
           {
-            lineHeight: "32px",
+            lineHeight: "2rem",
             fontWeight: "500",
           },
         ],
         h3: [
-          "18px",
+          "1.125rem",
           {
-            lineHeight: "28px",
+            lineHeight: "1.75rem",
             fontWeight: "500",
           },
         ],
         h4: [
-          "16px",
+          "1rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-large-plus": [
-          "16px",
+          "1rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-large": [
-          "16px",
+          "1rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "400",
           },
         ],
         "compact-medium-plus": [
-          "14px",
+          "0.875rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-medium": [
-          "14px",
+          "0.875rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "400",
           },
         ],
         "compact-small-plus": [
-          "13px",
+          "0.8125rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-small": [
-          "13px",
+          "0.8125rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "400",
           },
         ],
         "compact-x-small-plus": [
-          "12px",
+          "0.75rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-x-small": [
-          "13px",
+          "0.75rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "400",
           },
         ],
         "x-large-plus": [
-          "18px",
+          "1.125rem",
           {
-            lineHeight: "32px",
+            lineHeight: "1.6875rem",
             fontWeight: "500",
           },
         ],
         "x-large": [
-          "18px",
+          "1.125rem",
           {
-            lineHeight: "32px",
+            lineHeight: "1.6875rem",
             fontWeight: "400",
           },
         ],
         "large-plus": [
-          "16px",
+          "1rem",
           {
-            lineHeight: "28px",
+            lineHeight: "1.5rem",
             fontWeight: "500",
           },
         ],
         large: [
-          "16px",
+          "1rem",
           {
-            lineHeight: "28px",
+            lineHeight: "1.5rem",
             fontWeight: "400",
           },
         ],
         "medium-plus": [
-          "14px",
+          "0.875rem",
           {
-            lineHeight: "24px",
+            lineHeight: "1.3125rem",
             fontWeight: "500",
           },
         ],
         medium: [
-          "14px",
+          "0.875rem",
           {
-            lineHeight: "24px",
+            lineHeight: "1.3125rem",
             fontWeight: "400",
           },
         ],
@@ -458,7 +451,7 @@ module.exports = {
         "code-body": [
           "12px",
           {
-            lineHeight: "22px",
+            lineHeight: "18px",
             fontWeight: "400",
           },
         ],