Skip to content

Commit 95ea1d3

Browse files
developitdevelopit
committed
Adjust radix menu dialog styling
1 parent a004b84 commit 95ea1d3

File tree

2 files changed

+42
-50
lines changed

2 files changed

+42
-50
lines changed

‎packages/pui-theme-radix/src/components/context-menu.css‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,26 @@
99
*/
1010

1111
[p="context-menu"] {
12-
--base-menu-content-padding: var(--space-2);
13-
--base-menu-item-padding-left: var(--space-3);
14-
--base-menu-item-padding-right: var(--space-3);
15-
--base-menu-item-height: var(--space-6);
16-
--base-menu-item-radius: var(--radius-2);
12+
--base-menu-content-padding: calc(5px * var(--scaling));
13+
--base-menu-item-padding-left: calc(25px * var(--scaling));
14+
--base-menu-item-padding-right: calc(5px * var(--scaling));
15+
--base-menu-item-height: calc(25px * var(--scaling));
16+
--base-menu-item-radius: calc(3px * var(--scaling));
1717
--base-menu-bg: hsl(var(--p-popover));
1818
--menu-highlight-bg: var(--accent-a4);
1919
--menu-highlight-color: inherit;
20+
--menu-item-color: var(--gray-12);
21+
--menu-shadow:
22+
0 10px 38px -10px rgb(22 23 24 / 0.35),
23+
0 10px 20px -15px rgb(22 23 24 / 0.2);
2024

21-
display: flex;
22-
flex-direction: column;
2325
box-sizing: border-box;
2426
overflow: auto;
2527
background-color: var(--base-menu-bg);
26-
box-shadow: var(--shadow-5);
28+
box-shadow: var(--menu-shadow);
2729
padding: var(--base-menu-content-padding);
28-
border-radius: var(--radius-4);
30+
border-radius: calc(6px * var(--scaling));
31+
min-width: calc(220px * var(--scaling));
2932
max-height: var(--radix-context-menu-content-available-height);
3033
transform-origin: var(--radix-context-menu-content-transform-origin);
3134
}
@@ -36,6 +39,7 @@
3639

3740
[p="context-menu"]:open {
3841
display: flex;
42+
flex-direction: column;
3943
}
4044

4145
[p="context-menu"][variant="solid"] {
@@ -44,19 +48,11 @@
4448
}
4549

4650
[p="context-menu"][size="1"] {
47-
--base-menu-content-padding: var(--space-1);
48-
--base-menu-item-padding-left: calc(var(--space-5) / 1.2);
49-
--base-menu-item-padding-right: var(--space-2);
50-
--base-menu-item-height: var(--space-5);
51-
--base-menu-item-radius: var(--radius-1);
51+
--base-menu-content-padding: calc(5px * var(--scaling));
5252
}
5353

5454
[p="context-menu"][size="2"] {
55-
--base-menu-content-padding: var(--space-2);
56-
--base-menu-item-padding-left: var(--space-3);
57-
--base-menu-item-padding-right: var(--space-3);
58-
--base-menu-item-height: var(--space-6);
59-
--base-menu-item-radius: var(--radius-2);
55+
--base-menu-content-padding: calc(5px * var(--scaling));
6056
}
6157

6258
[p="context-menu-item"] {
@@ -75,12 +71,12 @@
7571
text-align: left;
7672
white-space: nowrap;
7773
font: inherit;
78-
font-size: var(--font-size-2);
79-
line-height: var(--line-height-2);
80-
letter-spacing: var(--letter-spacing-2);
74+
font-size: calc(13px * var(--scaling));
75+
line-height: 1;
76+
letter-spacing: 0;
8177
font-weight: var(--font-weight-regular);
8278
cursor: var(--cursor-menu-item);
83-
color: inherit;
79+
color: var(--menu-item-color);
8480
text-decoration: none;
8581
outline: none;
8682
user-select: none;
@@ -104,6 +100,6 @@
104100

105101
[p="context-menu"] [p="separator"] {
106102
height: 1px;
107-
margin: var(--space-2) 0;
108-
background-color: var(--gray-a6);
103+
margin: calc(5px * var(--scaling));
104+
background-color: var(--accent-a11);
109105
}

‎packages/pui-theme-radix/src/components/dropdown-menu.css‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,26 @@
99
*/
1010

1111
[p="dropdown-content"] {
12-
--base-menu-content-padding: var(--space-2);
13-
--base-menu-item-padding-left: var(--space-3);
14-
--base-menu-item-padding-right: var(--space-3);
15-
--base-menu-item-height: var(--space-6);
16-
--base-menu-item-radius: var(--radius-2);
12+
--base-menu-content-padding: calc(5px * var(--scaling));
13+
--base-menu-item-padding-left: calc(25px * var(--scaling));
14+
--base-menu-item-padding-right: calc(5px * var(--scaling));
15+
--base-menu-item-height: calc(25px * var(--scaling));
16+
--base-menu-item-radius: calc(3px * var(--scaling));
1717
--base-menu-bg: hsl(var(--p-popover));
1818
--menu-highlight-bg: var(--accent-a4);
1919
--menu-highlight-color: inherit;
20+
--menu-item-color: var(--gray-12);
21+
--menu-shadow:
22+
0 10px 38px -10px rgb(22 23 24 / 0.35),
23+
0 10px 20px -15px rgb(22 23 24 / 0.2);
2024

21-
display: flex;
22-
flex-direction: column;
2325
box-sizing: border-box;
2426
overflow: auto;
2527
background-color: var(--base-menu-bg);
26-
box-shadow: var(--shadow-5);
28+
box-shadow: var(--menu-shadow);
2729
padding: var(--base-menu-content-padding);
28-
border-radius: var(--radius-4);
30+
border-radius: calc(6px * var(--scaling));
31+
min-width: calc(220px * var(--scaling));
2932
max-height: var(--radix-dropdown-menu-content-available-height);
3033
transform-origin: var(--radix-dropdown-menu-content-transform-origin);
3134
}
@@ -36,6 +39,7 @@
3639

3740
[p="dropdown-content"]:open {
3841
display: flex;
42+
flex-direction: column;
3943
}
4044

4145
[p="dropdown-content"][variant="solid"] {
@@ -44,19 +48,11 @@
4448
}
4549

4650
[p="dropdown-content"][size="1"] {
47-
--base-menu-content-padding: var(--space-1);
48-
--base-menu-item-padding-left: calc(var(--space-5) / 1.2);
49-
--base-menu-item-padding-right: var(--space-2);
50-
--base-menu-item-height: var(--space-5);
51-
--base-menu-item-radius: var(--radius-1);
51+
--base-menu-content-padding: calc(5px * var(--scaling));
5252
}
5353

5454
[p="dropdown-content"][size="2"] {
55-
--base-menu-content-padding: var(--space-2);
56-
--base-menu-item-padding-left: var(--space-3);
57-
--base-menu-item-padding-right: var(--space-3);
58-
--base-menu-item-height: var(--space-6);
59-
--base-menu-item-radius: var(--radius-2);
55+
--base-menu-content-padding: calc(5px * var(--scaling));
6056
}
6157

6258
[p="dropdown-menu-item"] {
@@ -75,12 +71,12 @@
7571
text-align: left;
7672
white-space: nowrap;
7773
font: inherit;
78-
font-size: var(--font-size-2);
79-
line-height: var(--line-height-2);
80-
letter-spacing: var(--letter-spacing-2);
74+
font-size: calc(13px * var(--scaling));
75+
line-height: 1;
76+
letter-spacing: 0;
8177
font-weight: var(--font-weight-regular);
8278
cursor: var(--cursor-menu-item);
83-
color: inherit;
79+
color: var(--menu-item-color);
8480
text-decoration: none;
8581
outline: none;
8682
user-select: none;
@@ -104,6 +100,6 @@
104100

105101
[p="dropdown-content"] [p="separator"] {
106102
height: 1px;
107-
margin: var(--space-2) 0;
108-
background-color: var(--gray-a6);
103+
margin: calc(5px * var(--scaling));
104+
background-color: var(--accent-a11);
109105
}

0 commit comments

Comments
 (0)