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

feat(dashboard,ui): Streamline spacing and sizing (#6061)

Browse Source
This commit is contained in:
Kasper Fabricius Kristensen
2024-01-15 11:43:16 +01:00
committed by GitHub
parent 5dacd4ac9f
commit a2c149e7e5
266 changed files with 10738 additions and 4646 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/design-system/ui-preset/src/theme/extension/theme.ts
+24 -24
View File
@@ -12,20 +12,11 @@ export const theme = {
"DEFAULT": "var(--button-inverted-hover)"
}
},
"transparent": {
"DEFAULT": "var(--button-transparent)",
"hover": {
"DEFAULT": "var(--button-transparent-hover)"
},
"pressed": {
"DEFAULT": "var(--button-transparent-pressed)"
}
},
"neutral": {
"DEFAULT": "var(--button-neutral)",
"pressed": {
"DEFAULT": "var(--button-neutral-pressed)"
},
"DEFAULT": "var(--button-neutral)",
"hover": {
"DEFAULT": "var(--button-neutral-hover)"
}
@@ -38,30 +29,39 @@ export const theme = {
"hover": {
"DEFAULT": "var(--button-danger-hover)"
}
},
"transparent": {
"hover": {
"DEFAULT": "var(--button-transparent-hover)"
},
"pressed": {
"DEFAULT": "var(--button-transparent-pressed)"
},
"DEFAULT": "var(--button-transparent)"
}
},
"code": {
"text": {
"base": {
"DEFAULT": "var(--code-text-base)"
},
"fg": {
"subtle": {
"DEFAULT": "var(--code-text-subtle)"
"DEFAULT": "var(--code-fg-subtle)"
},
"muted": {
"DEFAULT": "var(--code-fg-muted)"
},
"base": {
"DEFAULT": "var(--code-fg-base)"
}
},
"bg": {
"subtle": {
"DEFAULT": "var(--code-bg-subtle)"
},
"base": {
"DEFAULT": "var(--code-bg-base)"
},
"header": {
"DEFAULT": "var(--code-bg-header)"
}
},
"border": {
"DEFAULT": "var(--code-border)"
},
"icon": {
"DEFAULT": "var(--code-icon)"
}
},
"tag": {
@@ -199,12 +199,12 @@ export const theme = {
}
},
"base": {
"hover": {
"DEFAULT": "var(--bg-base-hover)"
},
"DEFAULT": "var(--bg-base)",
"pressed": {
"DEFAULT": "var(--bg-base-pressed)"
},
"hover": {
"DEFAULT": "var(--bg-base-hover)"
}
},
"subtle": {
packages/design-system/ui-preset/src/theme/tokens/colors.ts
+22 -22
View File
@@ -1,9 +1,7 @@
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)",
@@ -19,11 +17,13 @@ export const colors = {
"--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
"--tag-neutral-text": "rgba(173, 177, 184, 1)",
"--fg-muted": "rgba(105, 110, 119, 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)",
"--code-fg-subtle": "rgba(105, 110, 119, 1)",
"--code-fg-base": "rgba(237, 238, 240, 1)",
"--code-bg-subtle": "rgba(24, 24, 26, 1)",
"--code-fg-muted": "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)",
@@ -64,7 +64,6 @@ export const colors = {
"--tag-orange-bg": "rgba(69, 26, 3, 1)",
"--tag-orange-bg-hover": "rgba(120, 53, 15, 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)",
@@ -105,18 +104,21 @@ export const colors = {
"--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
"--button-danger-hover": "rgba(190, 18, 60, 1)",
"--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)"
"--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--button-transparent": "rgba(0, 0, 0, 0.01)"
},
"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)",
"--code-text-base": "rgba(249, 250, 251, 1)",
"--code-fg-subtle": "rgba(156, 163, 175, 1)",
"--code-fg-muted": "rgba(107, 114, 128, 1)",
"--code-bg-subtle": "rgba(31, 41, 55, 1)",
"--code-fg-base": "rgba(249, 250, 251, 1)",
"--tag-green-bg": "rgba(209, 250, 229, 1)",
"--border-strong": "rgba(209, 213, 219, 1)",
"--border-interactive": "rgba(59, 130, 246, 1)",
"--bg-highlight": "rgba(239, 246, 255, 1)",
"--bg-base-hover": "rgba(249, 250, 251, 1)",
"--tag-neutral-bg": "rgba(243, 244, 246, 1)",
"--tag-red-bg": "rgba(255, 228, 230, 1)",
"--tag-orange-bg": "rgba(254, 244, 199, 1)",
@@ -135,7 +137,6 @@ export const colors = {
"--border-loud": "rgba(3, 7, 18, 1)",
"--fg-on-inverted": "rgba(255, 255, 255, 1)",
"--fg-on-color": "rgba(255, 255, 255, 1)",
"--button-transparent": "rgba(255, 255, 255, 0)",
"--fg-interactive-hover": "rgba(37, 99, 235, 1)",
"--fg-interactive": "rgba(59, 130, 246, 1)",
"--fg-error": "rgba(225, 29, 72, 1)",
@@ -146,7 +147,6 @@ export const colors = {
"--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
"--fg-subtle": "rgba(75, 85, 99, 1)",
"--fg-muted": "rgba(156, 163, 175, 1)",
"--bg-base-pressed": "rgba(243, 244, 246, 1)",
"--bg-subtle-hover": "rgba(243, 244, 246, 1)",
"--tag-neutral-border": "rgba(229, 231, 235, 1)",
"--tag-green-bg-hover": "rgba(167, 243, 208, 1)",
@@ -166,22 +166,11 @@ 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)",
"--button-transparent-hover": "rgba(249, 250, 251, 1)",
"--button-transparent-pressed": "rgba(243, 244, 246, 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-neutral-pressed": "rgba(243, 244, 246, 1)",
"--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
"--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
"--button-neutral": "rgba(255, 255, 255, 1)",
"--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
"--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
"--button-neutral-hover": "rgba(249, 250, 251, 1)",
"--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
"--button-neutral-hover-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)",
@@ -213,6 +202,17 @@ export const colors = {
"--contrast-bg-base-pressed": "rgba(53, 55, 60, 1)",
"--contrast-fg-secondary": "rgba(173, 177, 184, 1)",
"--contrast-bg-highlight": "rgba(53, 55, 60, 1)",
"--contrast-bg-base-hover": "rgba(46, 48, 53, 1)"
"--contrast-bg-base-hover": "rgba(46, 48, 53, 1)",
"--button-transparent-hover": "rgba(243, 244, 246, 1)",
"--button-neutral-pressed": "rgba(229, 231, 235, 1)",
"--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
"--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
"--button-transparent-pressed": "rgba(229, 231, 235, 1)",
"--button-neutral-hover": "rgba(243, 244, 246, 1)",
"--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
"--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)",
"--bg-base-pressed": "rgba(243, 244, 246, 1)",
"--bg-base-hover": "rgba(249, 250, 251, 1)",
"--button-transparent": "rgba(255, 255, 255, 0.01)"
}
}
packages/design-system/ui-preset/src/theme/tokens/components.ts
+8 -8
View File
@@ -42,18 +42,10 @@ export const components = {
"backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
"opacity": "16%"
},
".button-neutral-pressed-gradient": {
"backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
"opacity": "3%"
},
".button-neutral-gradient": {
"backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
"opacity": "3%"
},
".button-neutral-hover-gradient": {
"backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
"opacity": "3%"
},
".button-danger-gradient": {
"backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
"opacity": "16%"
@@ -73,6 +65,14 @@ export const components = {
".button-danger-hover-gradient": {
"backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
"opacity": "16%"
},
".button-neutral-pressed-gradient": {
"backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
"opacity": "3%"
},
".button-neutral-hover-gradient": {
"backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
"opacity": "3%"
}
}
}
packages/design-system/ui-preset/src/theme/tokens/typography.ts
+6 -6
View File
@@ -47,12 +47,6 @@ export const typography = {
"fontWeight": "500",
"fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
},
".h1-core": {
"fontSize": "1.25rem",
"lineHeight": "2rem",
"fontWeight": "500",
"fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
},
".h3-core": {
"fontSize": "0.875rem",
"lineHeight": "1.25rem",
@@ -190,5 +184,11 @@ export const typography = {
"lineHeight": "1.375rem",
"fontWeight": "400",
"fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
},
".h1-core": {
"fontSize": "1.125rem",
"lineHeight": "1.75rem",
"fontWeight": "500",
"fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
}
}