Skip to content

Commit 0e01a3c

Browse files
lepturelepture
committed
fix: using components layer on avatar, card, dialog, popover, tabs
1 parent 73d0e28 commit 0e01a3c

File tree

9 files changed

+166
-169
lines changed

9 files changed

+166
-169
lines changed

‎.vitepress/theme/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1+
import './style.css'
12
import type { Theme } from 'vitepress'
23
import * as components from '#components'
34
import Example from '../components/Example.vue'
45
import PropsTable from '../components/PropsTable.vue'
56
import Layout from '../custom/Layout.vue'
67

7-
import './style.css'
8-
98
export default {
109
Layout,
1110
async enhanceApp({ app }) {

‎src/components/accordion/AccordionTrigger.vue‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -55,20 +55,22 @@ const indicatorSide = computed(() => {
5555
</template>
5656

5757
<style>
58-
.ui-AccordionTrigger {
59-
display: flex;
60-
align-items: center;
61-
justify-content: space-between;
62-
text-align: initial;
63-
width: 100%;
64-
cursor: pointer;
65-
user-select: none;
66-
font-size: var(--accordion-trigger-font-size);
67-
padding-top: var(--accordion-padding);
68-
padding-bottom: var(--accordion-padding);
69-
font-weight: var(--font-weight-medium);
70-
gap: var(--accordion-trigger-gap);
71-
--accordion-indicator-icon-size: var(--accordion-trigger-font-size);
58+
@layer components {
59+
.ui-AccordionTrigger {
60+
display: flex;
61+
align-items: center;
62+
justify-content: space-between;
63+
text-align: initial;
64+
width: 100%;
65+
cursor: pointer;
66+
user-select: none;
67+
font-size: var(--accordion-trigger-font-size);
68+
padding-top: var(--accordion-padding);
69+
padding-bottom: var(--accordion-padding);
70+
font-weight: var(--font-weight-medium);
71+
gap: var(--accordion-trigger-gap);
72+
--accordion-indicator-icon-size: var(--accordion-trigger-font-size);
73+
}
7274
}
7375
.ui-AccordionTrigger:hover {
7476
text-decoration: underline;

‎src/components/avatar/Avatar.vue‎

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -86,15 +86,19 @@ const fallback = computed(() => {
8686
</template>
8787

8888
<style>
89-
.ui-Avatar {
90-
display: inline-flex;
91-
align-items: center;
92-
justify-content: center;
93-
vertical-align: middle;
94-
user-select: none;
95-
width: var(--avatar-size);
96-
height: var(--avatar-size);
97-
flex-shrink: 0;
89+
@layer components {
90+
.ui-Avatar {
91+
display: inline-flex;
92+
align-items: center;
93+
justify-content: center;
94+
vertical-align: middle;
95+
user-select: none;
96+
width: var(--avatar-size);
97+
height: var(--avatar-size);
98+
flex-shrink: 0;
99+
border-radius: var(--avatar-border-radius);
100+
letter-spacing: var(--avatar-letter-spacing);
101+
}
98102
}
99103
100104
.ui-Avatar > img {
@@ -133,17 +137,17 @@ const fallback = computed(() => {
133137
--avatar-fallback-two-letters-font-size: var(--font-size-1);
134138
--avatar-ring-width: 1px;
135139
--avatar-ring-offset: 1px;
136-
border-radius: max(var(--radius-2), var(--radius-full));
137-
letter-spacing: var(--letter-spacing-1);
140+
--avatar-border-radius: max(var(--radius-2), var(--radius-full));
141+
--avatar-letter-spacing: var(--letter-spacing-1);
138142
}
139143
.ui-Avatar:where(.r-size-2) {
140144
--avatar-size: var(--space-6);
141145
--avatar-fallback-one-letter-font-size: var(--font-size-3);
142146
--avatar-fallback-two-letters-font-size: var(--font-size-2);
143147
--avatar-ring-width: 2px;
144148
--avatar-ring-offset: 2px;
145-
border-radius: max(var(--radius-2), var(--radius-full));
146-
letter-spacing: var(--letter-spacing-2);
149+
--avatar-border-radius: max(var(--radius-2), var(--radius-full));
150+
--avatar-letter-spacing: var(--letter-spacing-2);
147151
}
148152
149153
.ui-Avatar:where(.r-size-3) {
@@ -152,8 +156,8 @@ const fallback = computed(() => {
152156
--avatar-fallback-two-letters-font-size: var(--font-size-3);
153157
--avatar-ring-width: 2px;
154158
--avatar-ring-offset: 2px;
155-
border-radius: max(var(--radius-3), var(--radius-full));
156-
letter-spacing: var(--letter-spacing-3);
159+
--avatar-border-radius: max(var(--radius-3), var(--radius-full));
160+
--avatar-letter-spacing: var(--letter-spacing-3);
157161
}
158162
159163
.ui-Avatar:where(.r-size-4) {
@@ -162,53 +166,53 @@ const fallback = computed(() => {
162166
--avatar-fallback-two-letters-font-size: var(--font-size-4);
163167
--avatar-ring-width: 2px;
164168
--avatar-ring-offset: 2px;
165-
border-radius: max(var(--radius-3), var(--radius-full));
166-
letter-spacing: var(--letter-spacing-4);
169+
--avatar-border-radius: max(var(--radius-3), var(--radius-full));
170+
--avatar-letter-spacing: var(--letter-spacing-4);
167171
}
168172
169173
.ui-Avatar:where(.r-size-5) {
170174
--avatar-size: var(--space-9);
171175
--avatar-fallback-one-letter-font-size: var(--font-size-6);
172176
--avatar-ring-width: 3px;
173177
--avatar-ring-offset: 2px;
174-
border-radius: max(var(--radius-4), var(--radius-full));
175-
letter-spacing: var(--letter-spacing-6);
178+
--avatar-border-radius: max(var(--radius-4), var(--radius-full));
179+
--avatar-letter-spacing: var(--letter-spacing-6);
176180
}
177181
178182
.ui-Avatar:where(.r-size-6) {
179183
--avatar-size: 80px;
180184
--avatar-fallback-one-letter-font-size: var(--font-size-7);
181185
--avatar-ring-width: 3px;
182186
--avatar-ring-offset: 3px;
183-
border-radius: max(var(--radius-5), var(--radius-full));
184-
letter-spacing: var(--letter-spacing-7);
187+
--avatar-border-radius: max(var(--radius-5), var(--radius-full));
188+
--avatar-letter-spacing: var(--letter-spacing-7);
185189
}
186190
187191
.ui-Avatar:where(.r-size-7) {
188192
--avatar-size: 96px;
189193
--avatar-fallback-one-letter-font-size: var(--font-size-7);
190194
--avatar-ring-width: 3px;
191195
--avatar-ring-offset: 3px;
192-
border-radius: max(var(--radius-5), var(--radius-full));
193-
letter-spacing: var(--letter-spacing-7);
196+
--avatar-border-radius: max(var(--radius-5), var(--radius-full));
197+
--avatar-letter-spacing: var(--letter-spacing-7);
194198
}
195199
196200
.ui-Avatar:where(.r-size-8) {
197201
--avatar-size: 128px;
198202
--avatar-fallback-one-letter-font-size: var(--font-size-8);
199203
--avatar-ring-width: 4px;
200204
--avatar-ring-offset: 3px;
201-
border-radius: max(var(--radius-6), var(--radius-full));
202-
letter-spacing: var(--letter-spacing-8);
205+
--avatar-border-radius: max(var(--radius-6), var(--radius-full));
206+
--avatar-letter-spacing: var(--letter-spacing-8);
203207
}
204208
205209
.ui-Avatar:where(.r-size-9) {
206210
--avatar-size: 160px;
207211
--avatar-fallback-one-letter-font-size: var(--font-size-9);
208212
--avatar-ring-width: 4px;
209213
--avatar-ring-offset: 4px;
210-
border-radius: max(var(--radius-6), var(--radius-full));
211-
letter-spacing: var(--letter-spacing-9);
214+
--avatar-border-radius: max(var(--radius-6), var(--radius-full));
215+
--avatar-letter-spacing: var(--letter-spacing-9);
212216
}
213217
214218
.ui-Avatar:where(.r-variant-ring) {

‎src/components/card/style.css‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
1-
.ui-BaseCard {
2-
display: block;
3-
position: relative;
4-
overflow: hidden;
5-
font-style: normal;
6-
text-align: start;
7-
box-sizing: border-box;
8-
border-radius: var(--card-border-radius);
9-
padding: var(--card-padding);
10-
border-color: var(--card-border-color, var(--gray-a5));
11-
border-width: var(--card-border-width, 1px);
12-
border-style: solid;
13-
width: 100%;
1+
@layer components {
2+
.ui-BaseCard {
3+
display: block;
4+
position: relative;
5+
overflow: hidden;
6+
font-style: normal;
7+
text-align: start;
8+
box-sizing: border-box;
9+
border-radius: var(--card-border-radius);
10+
padding: var(--card-padding);
11+
border-color: var(--card-border-color, var(--gray-a5));
12+
border-width: var(--card-border-width, 1px);
13+
border-style: solid;
14+
width: 100%;
15+
}
1416
}
17+
1518
.ui-BaseCard:where(:any-link, button, label):where(:hover) {
1619
--card-border-color: var(--gray-a7);
1720
}
1821
.ui-BaseCard:where(:any-link, button, label):where(:focus-visible) {
1922
--card-border-color: var(--focus-8);
2023
box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
2124
}
22-
23-
/** special enhancement for tailwindcss */
24-
.ui-BaseCard:where(.p-0) {
25-
--card-padding: 0;
26-
}

‎src/components/dialog/style.css‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,23 +28,26 @@
2828
padding-top: var(--space-6);
2929
}
3030

31-
.ui-DialogPopup {
32-
width: 100%;
33-
max-height: calc(100vh - var(--space-6) * 2);
34-
position: relative;
35-
box-sizing: border-box;
36-
overflow: auto;
37-
text-align: left;
38-
box-sizing: border-box;
39-
background-color: var(--color-panel-solid);
40-
outline: none;
41-
border-top-left-radius: var(--dialog-popup-radius);
42-
border-top-right-radius: var(--dialog-popup-radius);
43-
max-width: var(--dialog-popup-max-width);
44-
max-height: var(--dialog-popup-max-height);
45-
padding: var(--dialog-popup-padding);
31+
@layer components {
32+
.ui-DialogPopup {
33+
width: 100%;
34+
max-height: calc(100vh - var(--space-6) * 2);
35+
position: relative;
36+
box-sizing: border-box;
37+
overflow: auto;
38+
text-align: left;
39+
box-sizing: border-box;
40+
background-color: var(--color-panel-solid);
41+
outline: none;
42+
border-top-left-radius: var(--dialog-popup-radius);
43+
border-top-right-radius: var(--dialog-popup-radius);
44+
max-width: var(--dialog-popup-max-width);
45+
max-height: var(--dialog-popup-max-height);
46+
padding: var(--dialog-popup-padding);
47+
}
4648
}
4749

50+
4851
.ui-DialogPopup:where(.r-size-1) {
4952
--dialog-popup-padding: var(--space-3);
5053
--dialog-popup-radius: var(--radius-4);
@@ -76,11 +79,6 @@
7679
--dialog-popup-max-height: calc(100vh - 64px);
7780
}
7881

79-
/* special handle for tailwindcss p-0, when css priority doesn't work */
80-
.ui-DialogPopup:where(.p-0) {
81-
--dialog-popup-padding: 0;
82-
}
83-
8482
@media (min-width: 450px) {
8583
.ui-DialogContainer {
8684
justify-content: center;

‎src/components/dropdown/DropdownMenuContent.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,6 @@ provideDropdownMenuContentContext({ size, variant, color, highContrast })
9696
box-sizing: border-box;
9797
overflow: hidden;
9898
border-radius: var(--menu-content-border-radius);
99-
10099
box-shadow: var(--shadow-5);
101100
background-color: var(--color-panel-solid);
102101
}

‎src/components/popover/PopoverPopup.vue‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -48,17 +48,19 @@ const forwarded = useForwardPropsEmitsWithout(props, emits, ['to', 'size'])
4848
<style src="./popper.css"></style>
4949

5050
<style>
51-
.ui-PopoverPopup {
52-
background-color: var(--color-panel-solid);
53-
box-shadow: var(--shadow-5);
54-
min-width: var(--reka-popover-trigger-width);
55-
max-width: var(--reka-popover-content-available-width);
56-
outline: 0;
57-
overflow: auto;
58-
position: relative;
59-
box-sizing: border-box;
60-
transform-origin: var(--reka-popover-content-transform-origin);
61-
padding: var(--popover-popup-padding);
51+
@layer components {
52+
.ui-PopoverPopup {
53+
background-color: var(--color-panel-solid);
54+
box-shadow: var(--shadow-5);
55+
min-width: var(--reka-popover-trigger-width);
56+
max-width: var(--reka-popover-content-available-width);
57+
outline: 0;
58+
overflow: auto;
59+
position: relative;
60+
box-sizing: border-box;
61+
transform-origin: var(--reka-popover-content-transform-origin);
62+
padding: var(--popover-popup-padding);
63+
}
6264
}
6365
.ui-PopoverPopup:where(.r-size-1) {
6466
border-radius: var(--radius-4);
@@ -68,7 +70,4 @@ const forwarded = useForwardPropsEmitsWithout(props, emits, ['to', 'size'])
6870
border-radius: var(--radius-5);
6971
--popover-popup-padding: var(--space-4);
7072
}
71-
.ui-PopoverPopup:where(.p-0) {
72-
--popover-popup-padding: 0;
73-
}
7473
</style>

‎src/components/radio/RadioTabsRoot.vue‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,16 @@ const resetClass = buildPropsClass(props, ['size', 'variant'])
4747
</template>
4848

4949
<style>
50-
.ui-RadioTabsRoot {
51-
display: inline-flex;
52-
width: fit-content;
53-
align-items: center;
54-
box-sizing: border-box;
55-
padding: var(--radio-tabs-list-padding);
56-
border-radius: var(--radio-tabs-list-radius);
57-
font-size: var(--radio-tabs-font-size);
50+
@layer components {
51+
.ui-RadioTabsRoot {
52+
display: inline-flex;
53+
width: fit-content;
54+
align-items: center;
55+
box-sizing: border-box;
56+
padding: var(--radio-tabs-list-padding);
57+
border-radius: var(--radio-tabs-list-radius);
58+
font-size: var(--radio-tabs-font-size);
59+
}
5860
}
5961
6062
.ui-RadioTabsRoot:where(.r-size-1) {
@@ -85,9 +87,4 @@ const resetClass = buildPropsClass(props, ['size', 'variant'])
8587
.ui-RadioTabsRoot:where(.r-variant-soft) {
8688
background-color: var(--accent-a3);
8789
}
88-
89-
/* special fix for tailwind */
90-
.ui-RadioTabsRoot:where(.w-full) {
91-
width: 100%;
92-
}
9390
</style>

0 commit comments

Comments
 (0)