docs: redesigned cards

www/docs/src/components/BorderedIcon/index.js

@@ -0,0 +1,15 @@
+import React from "react"
+import ThemedImage from '@theme/ThemedImage'
+import clsx from 'clsx'
+import styles from './styles.module.css'
+
+export default function BorderedIcon ({ icon, wrapperClassName, iconClassName }) {
+ return (
+ <span className={clsx(styles.iconWrapper, 'no-zoom-img', wrapperClassName)}>
+ <ThemedImage sources={{
+ light: icon.light,
+ dark: icon.dark || icon.light
+ }} className={clsx(styles.icon, iconClassName)} />
+ </span>
+ )
+}

www/docs/src/components/BorderedIcon/styles.module.css

@@ -0,0 +1,18 @@
+.iconWrapper {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2px;
+ border: 1px solid var(--medusa-border-strong);
+ border-radius: var(--ifm-global-radius);
+ margin-right: 16px;
+ width: fit-content;
+}
+
+.icon {
+ background-color: var(--medusa-bg-component);
+ height: 24px;
+ width: 24px;
+ padding: 2px;
+ border-radius: var(--ifm-global-radius);
+}

www/docs/src/css/_card.css

@@ -1,3 +1,17 @@
+.card {
+ background-color: var(--ifm-card-bg);
+ border: 1px solid var(--ifm-card-bg-hover) !important;
+ border-radius: 8px;
+}
+
+.card-icon-wrapper {
+ margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
+}
+
+.card:hover {
+ background-color: var(--ifm-card-bg-hover);
+}
+
 .markdown p + .cards-grid {
  margin-top: var(--ifm-base-margin-vertical);
 }
@@ -17,28 +31,40 @@
  color: #0a3149;
 }
 
-.card-highlight {
+.card-highlighted {
  position: relative;
- overflow: visible;
 }
 
-.card-highlight:after {
+html[data-theme="dark"] .card-highlighted, html[data-theme="dark"] .card-highlighted:hover {
+ background-color: transparent;
+}
+
+html[data-theme="dark"] .card-highlighted::before,
+html[data-theme="dark"] .card-highlighted::after {
  content: '';
- width: 100%;
- height: 2px;
- position:absolute;
- bottom: -1px;
+ position: absolute;
+ top: 0;
  left: 0;
- background: var(--ifm-primary-gradient);
+ width: 100%;
+ height: 100%;
+ background-repeat: no-repeat;
+ background-size: cover;
 }
 
-html:not([data-theme=dark]) .card {
- border: 1px solid #cbcbcb;
- border-radius: 8px;
+html[data-theme="dark"] .card-highlighted::before {
+ z-index: -2;
+ background-color: var(--ifm-card-bg);
+ background-image: url('/img/stardust.png');
+ transition: all var(--ifm-transition-fast) ease;
+}
+
+html[data-theme="dark"] .card-highlighted::after {
+ z-index: -1;
+ background-image: url('/img/light-beam.png');
 }
 
-html[data-theme="dark"] .card {
- border: 1px solid var(--ifm-color-primary);
+html[data-theme="dark"] .card-highlighted:hover::before {
+ background-color: var(--ifm-card-bg-hover);
 }
 
 .card + p {

www/docs/src/css/_medusa.css

@@ -86,6 +86,9 @@
  --medusa-h3-size: 18px;
  --medusa-h3-line-height: 28px;
  --medusa-h3-weight: 500;
+ --medusa-label-regular-size: 14px;
+ --medusa-label-regular-line-height: 20px;
+ --medusa-label-regular-font-weight: 400;
 }
 
 /** Dark theme **/

www/docs/src/css/_sidebar.css

@@ -194,24 +194,6 @@
  margin-right: calc(var(--ifm-base-margin-vertical) / 2);
 }
 
-.sidebar-title .sidebar-item-icon {
- background-color: var(--medusa-bg-component);
- height: 24px;
- width: 24px;
- padding: 2px;
- border-radius: var(--ifm-global-radius);
-}
-
-.sidebar-title-icon-wrapper {
- display: inline-flex;
- justify-content: center;
- align-items: center;
- padding: 2px;
- border: 1px solid var(--medusa-border-strong);
- border-radius: var(--ifm-global-radius);
- margin-right: 16px;
-}
-
 /** Back Link **/
 .sidebar-back-link .menu__link {
  padding: 0 !important;

www/docs/src/css/_variables.css

@@ -168,6 +168,11 @@
  --ifm-announcement-bar-text-color: var(--ifm-color-content);
  --ifm-announcement-bar-close-icon-color: var(--medusa-icon-disabled);
 
+ /* Cards */
+ --ifm-card-bg: var(--ifm-background-surface-color);
+ --ifm-card-bg-hover: var(--medusa-bg-subtle-hover);
+ --ifm-card-border-color: var(--ifm-background-surface-color);
+
  /* Large Card */
  --large-card-bg: var(--ifm-background-surface-color);
  --large-card-border-color: var(--ifm-base-border-color);
@@ -208,6 +213,9 @@ html[data-theme="dark"] {
 
  /* Tabs */
  --ifm-tabs-color-active: #F3F3F3;
+
+ /** Cards **/
+ --ifm-card-bg-hover: var(--medusa-bg-base-hover);
 }
 
 @media screen and (min-width: 1441px) {

www/docs/src/theme/DocCard/index.js

@@ -10,6 +10,7 @@ import isInternalUrl from '@docusaurus/isInternalUrl';
 import styles from './styles.module.css';
 import {translate} from '@docusaurus/Translate';
 import ThemedImage from '@theme/ThemedImage';
+import BorderedIcon from '../../components/BorderedIcon';
 
 function CardContainer({href, children, className}) {
  return (
@@ -20,21 +21,29 @@ function CardContainer({href, children, className}) {
  </Link>
  );
 }
-function CardLayout({href, icon, title, description, containerClassName}) {
+function CardLayout({href, icon, title, description, html, containerClassName}) {
  return (
  <CardContainer href={href} className={containerClassName}>
  {icon}
  <div className={clsx(styles.contentContainer)}>
- <h2 className={clsx(styles.cardTitle)} title={title}>
+ <span className={clsx(styles.cardTitle)} title={title}>
  {title}
- </h2>
+ </span>
  {description && (
  <p
  className={clsx(styles.cardDescription)}
  title={description}>
  {description}
  </p>
  )}
+ {html && (
+ <p
+ className={clsx(styles.cardDescription)}
+ dangerouslySetInnerHTML={{
+ __html: html
+ }}
+ ></p>
+ )}
  </div>
  </CardContainer>
  );
@@ -67,24 +76,22 @@ function CardLink({item}) {
  let icon;
  if (item.customProps && item.customProps.themedImage) {
  icon = (
- <div className={clsx(styles.imageContainer, 'no-zoom-img')}>
- <ThemedImage alt={item.label} sources={{
- light: item.customProps.themedImage.light,
- dark: item.customProps.themedImage.dark
- }} />
- </div>
+ <BorderedIcon icon={{
+ light: item.customProps.themedImage.light,
+ dark: item.customProps.themedImage.dark
+ }} wrapperClassName='card-icon-wrapper' />
  )
  } else if (item.customProps && item.customProps.image) {
  icon = (
- <div className={clsx(styles.imageContainer, 'no-zoom-img')}>
- <img src={item.customProps.image} alt={item.label} />
- </div>
+ <BorderedIcon icon={{
+ light: item.customProps.image
+ }} wrapperClassName='card-icon-wrapper' />
  );
  } else if (item.customProps && item.customProps.icon) {
  icon = item.customProps.icon;
  } else {
  icon = (
- <div className={clsx(styles.imageContainer, 'no-zoom-img')}>
+ <div className={clsx('card-icon-wrapper', 'no-zoom-img')}>
  {isInternalUrl(item.href) ? '📄️' : '🔗'}
  </div>
  );
@@ -97,6 +104,7 @@ function CardLink({item}) {
  icon={icon}
  title={item.label}
  description={item.customProps?.description || doc?.description}
+ html={item.customProps?.html}
  containerClassName={item.customProps?.className}
  />
  );

www/docs/src/theme/DocCard/styles.module.css

@@ -1,60 +1,49 @@
 .cardContainer {
- --ifm-link-hover-decoration: none;
- --ifm-background-color: #fff;
- --ifm-background-color-hover: #F9FAFB;
- --ifm-border-color: #E5E7EB;
-
- background-color: var(--ifm-background-color);
- border: 1px solid var(--ifm-border-color) !important;
- border-radius: 8px;
  box-shadow: none !important;
  transition: all var(--ifm-transition-fast) ease;
- transition-property: border, box-shadow;
-
  display: flex;
- flex-direction: row;
- padding: 16px 24px;
+ padding: 24px;
  height: 100%;
 }
 
-[data-theme="dark"] .cardContainer {
- --ifm-background-color-hover: #2D2D2D;
- --ifm-background-color: #222222;
- --ifm-border-color: #393939;
-}
-
-.cardContainer:hover {
- background-color: var(--ifm-background-color-hover);
-}
-
 .cardContainer *:last-child {
  margin-bottom: 0;
 }
 
 .cardTitle {
- font-size: 14px;
- line-height: 24px;
- margin-bottom: 4px;
+ font-size: var(--medusa-body-regular-size);
+ line-height: var(--medusa-body-regular-line-height);
+ font-weight: 500;
+ color: var(--ifm-color-primary);
+ margin-bottom: 8px;
+ display: block;
 }
 
 .cardDescription {
- font-size: 14px;
- line-height: 24px;
+ font-size: var(--medusa-label-regular-size);
+ line-height: var(--medusa-label-regular-line-height);
+ font-weight: var(--medusa-label-regular-font-weight);
  color: var(--ifm-color-content);
 }
 
 .contentContainer {
  width: calc(100% - 20px);
 }
 
-.cardTitle img {
- vertical-align: bottom;
- margin-right: 2px;
+.image {
+ background-color: var(--medusa-bg-component);
+ height: 24px;
+ width: 24px;
+ padding: 2px;
+ border-radius: var(--ifm-global-radius);
 }
 
 .imageContainer {
- width: 20px;
- height: 20px;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2px;
+ border: 1px solid var(--medusa-border-strong);
+ border-radius: var(--ifm-global-radius);
  margin-right: 16px;
- margin-top: 3px;
 }

www/docs/src/theme/DocSidebarItem/Icon/index.js

@@ -1,16 +1,12 @@
 import React from "react"
 import ThemedImage from '@theme/ThemedImage'
+import BorderedIcon from "../../../components/BorderedIcon"
 
 export default function DocSidebarItemIcon ({ icon, is_title }) {
  return (
  <>
  {is_title && (
- <span className='sidebar-title-icon-wrapper'>
- <ThemedImage sources={{
- light: icon.light,
- dark: icon.dark || icon.light
- }} className='sidebar-item-icon' />
- </span>
+ <BorderedIcon icon={icon} wrapperClassName={'sidebar-title-icon-wrapper'} iconClassName={'sidebar-item-icon'} />
  )}
  {!is_title && (
  <ThemedImage sources={{