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

docs(ui,docs): Add documentation for Medusa UI 2.0.0 (#5227)

Browse Source 
* add docs for medusa ui 2.0.0

* fix: copy as child example

* fix: dropdown menu example

* add accordion examples

* fix lint issues

* fix apos in progress tabs demo

* resolve comments

* add icon

* bump z-index on modals to prevent clashing with navbar

* add sidebar item and card

* undo modal z index changes

* add links to updated and new components

* update version

* rm inline code formatting on links

---------

Co-authored-by: Shahed Nasser <shahednasser@gmail.com>
This commit is contained in:
Kasper Fabricius Kristensen
2023-09-27 18:56:25 +03:00
committed by GitHub
co-authored by Shahed Nasser
parent f5a698ad6f
commit 4e3f3b54cb
79 changed files with 1689 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/apps/ui/src/config/colors.ts
+65 -91
View File
@@ -1,5 +1,31 @@
export const colors = {
dark: {
"--code-text-subtle": "rgba(105, 110, 119, 1)",
"--button-transparent-pressed": "rgba(46, 48, 53, 1)",
"--border-base": "rgba(46, 48, 53, 1)",
"--code-text-base": "rgba(237, 238, 240, 1)",
"--tag-neutral-icon": "rgba(125, 130, 138, 1)",
"--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
"--fg-on-color": "rgba(255, 255, 255, 1)",
"--button-neutral-hover": "rgba(53, 55, 60, 1)",
"--bg-switch-off": "rgba(53, 55, 60, 1)",
"--border-strong": "rgba(53, 55, 60, 1)",
"--fg-subtle": "rgba(173, 177, 184, 1)",
"--fg-base": "rgba(237, 238, 240, 1)",
"--bg-base-hover": "rgba(39, 40, 45, 1)",
"--bg-subtle-hover": "rgba(27, 27, 31, 1)",
"--fg-disabled": "rgba(60, 63, 68, 1)",
"--bg-subtle": "rgba(24, 24, 26, 1)",
"--tag-neutral-border": "rgba(60, 63, 68, 1)",
"--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
"--tag-neutral-text": "rgba(173, 177, 184, 1)",
"--fg-muted": "rgba(105, 110, 119, 1)",
"--button-danger-pressed": "rgba(225, 29, 72, 1)",
"--code-bg-header": "rgba(24, 24, 26, 1)",
"--border-loud": "rgba(237, 238, 240, 1)",
"--bg-base-pressed": "rgba(46, 48, 53, 1)",
"--bg-disabled": "rgba(39, 40, 45, 1)",
"--code-icon": "rgba(70, 75, 80, 1)",
"--bg-highlight-hover": "rgba(30, 58, 138, 1)",
"--border-danger": "rgba(190, 18, 60, 1)",
"--border-interactive": "rgba(96, 165, 250, 1)",
@@ -11,95 +37,61 @@ export const colors = {
"--button-danger": "rgba(159, 18, 57, 1)",
"--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
"--bg-overlay": "rgba(10, 10, 10, 0.7)",
"--fg-interactive": "rgba(96, 165, 250, 1)",
"--fg-on-inverted": "rgba(10, 10, 10, 1)",
"--button-danger-pressed": "rgba(159, 18, 57, 1)",
"--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
"--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
"--button-neutral-pressed": "rgba(38, 38, 38, 1)",
"--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 0)",
"--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 1)",
"--bg-overlay": "rgba(24, 24, 26, 0.7)",
"--fg-on-inverted": "rgba(24, 24, 26, 1)",
"--button-neutral-pressed": "rgba(60, 63, 68, 1)",
"--tag-red-border": "rgba(136, 19, 55, 1)",
"--tag-red-bg": "rgba(76, 5, 25, 1)",
"--button-transparent-hover": "rgba(38, 38, 38, 1)",
"--button-transparent-hover": "rgba(39, 40, 45, 1)",
"--tag-blue-text": "rgba(96, 165, 250, 1)",
"--button-inverted": "rgba(238, 238, 238, 1)",
"--button-inverted-gradient-from": "rgba(0, 0, 0, 0)",
"--button-inverted-gradient-to": "rgba(0, 0, 0, 1)",
"--tag-orange-text": "rgba(251, 191, 36, 1)",
"--tag-green-text": "rgba(52, 211, 153, 1)",
"--button-transparent": "rgba(0, 0, 0, 0)",
"--button-transparent-pressed": "rgba(48, 48, 48, 1)",
"--tag-neutral-bg": "rgba(48, 48, 48, 1)",
"--code-text-subtle": "rgba(110, 110, 110, 1)",
"--code-bg-base": "rgba(30, 30, 30, 1)",
"--tag-neutral-bg": "rgba(46, 48, 53, 1)",
"--tag-orange-border": "rgba(120, 53, 15, 1)",
"--border-base": "rgba(48, 48, 48, 1)",
"--bg-component": "rgba(38, 38, 38, 1)",
"--code-text-base": "rgba(238, 238, 238, 1)",
"--tag-green-border": "rgba(6, 78, 59, 1)",
"--bg-base": "rgba(23, 23, 23, 1)",
"--fg-on-color": "rgba(238, 238, 238, 1)",
"--bg-base": "rgba(27, 27, 31, 1)",
"--tag-red-text": "rgba(251, 113, 133, 1)",
"--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
"--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
"--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
"--border-strong": "rgba(55, 55, 55, 1)",
"--fg-subtle": "rgba(163, 163, 163, 1)",
"--fg-base": "rgba(238, 238, 238, 1)",
"--code-border": "rgba(48, 48, 48, 1)",
"--border-transparent": "rgba(238, 238, 238, 0)",
"--border-transparent": "rgba(255, 255, 255, 0)",
"--code-border": "rgba(46, 48, 53, 1)",
"--tag-orange-icon": "rgba(245, 158, 11, 1)",
"--tag-purple-bg": "rgba(46, 16, 100, 1)",
"--bg-base-hover": "rgba(38, 38, 38, 1)",
"--bg-subtle-hover": "rgba(23, 23, 23, 1)",
"--tag-blue-bg": "rgba(23, 37, 84, 1)",
"--fg-disabled": "rgba(63, 63, 63, 1)",
"--bg-subtle": "rgba(10, 10, 10, 1)",
"--tag-green-bg": "rgba(2, 44, 34, 1)",
"--bg-subtle-pressed": "rgba(38, 38, 38, 1)",
"--tag-blue-border": "rgba(30, 58, 138, 1)",
"--fg-muted": "rgba(110, 110, 110, 1)",
"--tag-purple-border": "rgba(76, 29, 149, 1)",
"--tag-blue-bg-hover": "rgba(30, 42, 138, 1)",
"--code-bg-header": "rgba(23, 23, 23, 1)",
"--border-loud": "rgba(238, 238, 238, 1)",
"--bg-base-pressed": "rgba(48, 48, 48, 1)",
"--tag-orange-bg": "rgba(69, 26, 3, 1)",
"--bg-disabled": "rgba(38, 38, 38, 1)",
"--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
"--code-icon": "rgba(74, 74, 74, 1)",
"--bg-field-hover": "rgba(48, 48, 48, 1)",
"--bg-field": "rgba(38, 38, 38, 1)",
"--button-neutral": "rgba(38, 38, 38, 1)",
"--code-bg-base": "rgba(27, 27, 31, 1)",
"--button-transparent": "rgba(255, 255, 255, 0)",
"--button-neutral": "rgba(39, 40, 45, 1)",
"--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
"--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
"--button-inverted-pressed": "rgba(238, 238, 238, 1)",
"--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 1)",
"--button-inverted-pressed-gradient-to": "rgba(0, 0, 0, 0)",
"--button-neutral-hover": "rgba(38, 38, 38, 1)",
"--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--button-inverted-hover": "rgba(238, 238, 238, 1)",
"--button-inverted-hover-gradient-from": "rgba(0, 0, 0, 0)",
"--button-inverted-hover-gradient-to": "rgba(0, 0, 0, 1)",
"--button-danger-hover": "rgba(159, 18, 57, 1)",
"--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--bg-switch-off-hover": "rgba(74, 74, 74, 1)",
"--bg-switch-off": "rgba(55, 55, 55, 1)",
"--tag-neutral-bg-hover": "rgba(63, 63, 63, 1)",
"--tag-neutral-border": "rgba(63, 63, 63, 1)",
"--button-inverted-pressed": "rgba(237, 238, 240, 1)",
"--button-inverted-hover": "rgba(255, 255, 255, 1)",
"--button-danger-hover": "rgba(190, 18, 60, 1)",
"--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
"--tag-blue-icon": "rgba(59, 130, 246, 1)",
"--tag-red-icon": "rgba(244, 63, 94, 1)",
"--tag-neutral-icon": "rgba(129, 129, 129, 1)",
"--tag-purple-icon": "rgba(139, 92, 246, 1)",
"--tag-purple-text": "rgba(167, 139, 250, 1)",
"--tag-neutral-text": "rgba(163, 163, 163, 1)",
"--tag-green-icon": "rgba(16, 185, 129, 1)",
"--button-inverted": "rgba(237, 238, 240, 1)",
"--button-inverted-gradient-from": "rgba(24, 24, 26, 0)",
"--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
"--bg-component": "rgba(39, 40, 45, 1)",
"--bg-field": "rgba(39, 40, 45, 1)",
"--bg-field-hover": "rgba(46, 48, 53, 1)",
},
light: {
"--button-inverted": "rgba(3, 7, 18, 1)",
"--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
"--button-inverted-hover": "rgba(31, 41, 55, 1)",
"--code-text-base": "rgba(249, 250, 251, 1)",
"--tag-green-bg": "rgba(209, 250, 229, 1)",
"--border-strong": "rgba(209, 213, 219, 1)",
@@ -120,24 +112,17 @@ export const colors = {
"--tag-purple-text": "rgba(109, 40, 217, 1)",
"--tag-blue-bg": "rgba(219, 234, 254, 1)",
"--tag-blue-icon": "rgba(37, 99, 235, 1)",
"--bg-component": "rgba(241, 243, 245, 1)",
"--border-error": "rgba(225, 29, 72, 1)",
"--bg-field-hover": "rgba(243, 244, 246, 1)",
"--bg-field": "rgba(249, 250, 251, 1)",
"--border-loud": "rgba(3, 7, 18, 1)",
"--fg-on-inverted": "rgba(255, 255, 255, 1)",
"--fg-on-color": "rgba(255, 255, 255, 1)",
"--button-danger-pressed": "rgba(225, 29, 72, 1)",
"--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
"--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
"--button-transparent": "rgba(255, 255, 255, 0)",
"--bg-interactive": "rgba(59, 130, 246, 1)",
"--button-danger-pressed": "rgba(190, 18, 60, 1)",
"--fg-interactive-hover": "rgba(37, 99, 235, 1)",
"--fg-interactive": "rgba(59, 130, 246, 1)",
"--fg-error": "rgba(225, 29, 72, 1)",
"--border-danger": "rgba(190, 18, 60, 1)",
"--border-transparent": "rgba(3, 7, 18, 0)",
"--bg-overlay": "rgba(3, 7, 18, 0.4)",
"--fg-base": "rgba(3, 7, 18, 1)",
"--fg-disabled": "rgba(209, 213, 219, 1)",
"--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
@@ -163,42 +148,31 @@ export const colors = {
"--tag-red-border": "rgba(254, 205, 211, 1)",
"--tag-green-border": "rgba(167, 243, 208, 1)",
"--tag-green-text": "rgba(4, 120, 87, 1)",
"--bg-disabled": "rgba(243, 244, 246, 1)",
"--button-transparent-hover": "rgba(249, 250, 251, 1)",
"--button-transparent-pressed": "rgba(243, 244, 246, 1)",
"--bg-switch-off-hover": "rgba(229, 231, 235, 1)",
"--bg-switch-off-hover-gradient-from": "rgba(3, 7, 18, 0)",
"--bg-switch-off-hover-gradient-to": "rgba(3, 7, 18, 1)",
"--bg-highlight-hover": "rgba(219, 234, 254, 1)",
"--code-bg-base": "rgba(17, 24, 39, 1)",
"--code-bg-header": "rgba(31, 41, 55, 1)",
"--code-text-subtle": "rgba(156, 163, 175, 1)",
"--code-border": "rgba(55, 65, 81, 1)",
"--code-icon": "rgba(107, 114, 128, 1)",
"--button-inverted": "rgba(10, 10, 10, 1)",
"--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
"--button-neutral-pressed": "rgba(255, 255, 255, 1)",
"--button-neutral-pressed-gradient-from": "rgba(10, 10, 10, 1)",
"--button-neutral-pressed-gradient-to": "rgba(10, 10, 10, 0)",
"--button-inverted-pressed": "rgba(10, 10, 10, 1)",
"--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 0)",
"--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 1)",
"--button-inverted-hover": "rgba(10, 10, 10, 1)",
"--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--button-neutral-pressed": "rgba(243, 244, 246, 1)",
"--button-inverted-pressed": "rgba(55, 65, 81, 1)",
"--button-neutral": "rgba(255, 255, 255, 1)",
"--button-neutral-gradient-from": "rgba(10, 10, 10, 0)",
"--button-neutral-gradient-to": "rgba(10, 10, 10, 1)",
"--button-neutral-hover": "rgba(255, 255, 255, 1)",
"--button-neutral-hover-gradient-from": "rgba(10, 10, 10, 0)",
"--button-neutral-hover-gradient-to": "rgba(10, 10, 10, 1)",
"--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
"--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
"--button-danger": "rgba(225, 29, 72, 1)",
"--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
"--button-neutral-hover": "rgba(249, 250, 251, 1)",
"--button-danger-hover": "rgba(225, 29, 72, 1)",
"--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--bg-component": "rgba(241, 243, 245, 1)",
"--bg-overlay": "rgba(3, 7, 18, 0.4)",
"--bg-switch-off": "rgba(229, 231, 235, 1)",
"--bg-field-hover": "rgba(243, 244, 246, 1)",
"--bg-field": "rgba(249, 250, 251, 1)",
"--bg-interactive": "rgba(59, 130, 246, 1)",
"--bg-highlight-hover": "rgba(219, 234, 254, 1)",
"--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
"--bg-disabled": "rgba(243, 244, 246, 1)",
},
}
www/apps/ui/src/config/docs.ts
+40
View File
@@ -127,6 +127,11 @@ export const docsConfig: DocsConfig = {
path: "/components/command",
isPathHref: true,
},
{
title: "Command Bar",
path: "/components/command-bar",
isPathHref: true,
},
{
title: "Container",
path: "/components/container",
@@ -137,6 +142,11 @@ export const docsConfig: DocsConfig = {
path: "/components/copy",
isPathHref: true,
},
{
title: "Currency Input",
path: "/components/currency-input",
isPathHref: true,
},
{
title: "Date Picker",
path: "/components/date-picker",
@@ -162,6 +172,16 @@ export const docsConfig: DocsConfig = {
path: "/components/heading",
isPathHref: true,
},
{
title: "Icon Badge",
path: "/components/icon-badge",
isPathHref: true,
},
{
title: "Icon Button",
path: "/components/icon-button",
isPathHref: true,
},
{
title: "Input",
path: "/components/input",
@@ -177,6 +197,16 @@ export const docsConfig: DocsConfig = {
path: "/components/label",
isPathHref: true,
},
{
title: "Progress Accordion",
path: "/components/progress-accordion",
isPathHref: true,
},
{
title: "Progress Tabs",
path: "/components/progress-tabs",
isPathHref: true,
},
{
title: "Prompt",
path: "/components/prompt",
@@ -192,6 +222,11 @@ export const docsConfig: DocsConfig = {
path: "/components/select",
isPathHref: true,
},
{
title: "Status Badge",
path: "/components/status-badge",
isPathHref: true,
},
{
title: "Switch",
path: "/components/switch",
@@ -202,6 +237,11 @@ export const docsConfig: DocsConfig = {
path: "/components/table",
isPathHref: true,
},
{
title: "Tabs",
path: "/components/tabs",
isPathHref: true,
},
{
title: "Text",
path: "/components/text",