Skip to content

Commit 6813513

Browse files
lepturelepture
committed
fix: add @layer components to styles
1 parent a94b94d commit 6813513

22 files changed

+251
-203
lines changed

‎src/components/accordion/AccordionContent.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,12 @@ defineOptions({
4242
height: 0;
4343
}
4444
}
45-
.ui-AccordionContent {
46-
overflow: hidden;
47-
font-weight: var(--font-weight-regular);
48-
font-size: var(--accordion-content-font-size);
45+
@layer components {
46+
.ui-AccordionContent {
47+
overflow: hidden;
48+
font-weight: var(--font-weight-regular);
49+
font-size: var(--accordion-content-font-size);
50+
}
4951
}
5052
.ui-AccordionContent:where([data-state="open"]) {
5153
animation: accordion-down 0.2s ease-out;

‎src/components/badge/Badge.vue‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -60,16 +60,18 @@ const resetClass = buildPropsClass(props, ['size', 'variant', 'highContrast'])
6060
</template>
6161

6262
<style>
63-
.ui-Badge {
64-
display: inline-flex;
65-
align-items: center;
66-
white-space: nowrap;
67-
font-weight: var(--font-weight-medium);
68-
font-style: normal;
69-
flex-shrink: 0;
70-
line-height: 1;
71-
height: fit-content;
72-
width: fit-content;
63+
@layer components {
64+
.ui-Badge {
65+
display: inline-flex;
66+
align-items: center;
67+
white-space: nowrap;
68+
font-weight: var(--font-weight-medium);
69+
font-style: normal;
70+
flex-shrink: 0;
71+
line-height: 1;
72+
height: fit-content;
73+
width: fit-content;
74+
}
7375
}
7476
7577
.ui-Badge:where(.r-size-1) {

‎src/components/checkbox/Checkbox.vue‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,16 +63,18 @@ const resetClass = buildPropsClass(props, ['size', 'variant', 'highContrast'])
6363
</template>
6464

6565
<style>
66-
.ui-Checkbox {
67-
position: relative;
68-
display: inline-flex;
69-
align-items: center;
70-
justify-content: center;
71-
vertical-align: top;
72-
flex-shrink: 0;
73-
cursor: default;
74-
height: var(--checkbox-size);
75-
border-radius: var(--checkbox-border-radius);
66+
@layer components {
67+
.ui-Checkbox {
68+
position: relative;
69+
display: inline-flex;
70+
align-items: center;
71+
justify-content: center;
72+
vertical-align: top;
73+
flex-shrink: 0;
74+
cursor: default;
75+
height: var(--checkbox-size);
76+
border-radius: var(--checkbox-border-radius);
77+
}
7678
}
7779
.ui-Checkbox::before {
7880
content: '';

‎src/components/collapsible/CollapsibleContent.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,13 @@ const forwardedProps = useForwardProps(props)
4242
height: 0;
4343
}
4444
}
45-
.ui-CollapsibleContent {
46-
overflow: hidden;
47-
font-size: var(--collapsible-font-size);
48-
font-weight: var(--font-weight-regular);
49-
padding-block: var(--collapsible-padding-y);
45+
@layer components {
46+
.ui-CollapsibleContent {
47+
overflow: hidden;
48+
font-size: var(--collapsible-font-size);
49+
font-weight: var(--font-weight-regular);
50+
padding-block: var(--collapsible-padding-y);
51+
}
5052
}
5153
.ui-CollapsibleContent:where([data-state="open"]) {
5254
animation: collapsible-down 0.2s ease-out;

‎src/components/collapsible/CollapsibleIndicator.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@
77
</template>
88

99
<style>
10-
.ui-CollapsibleIndicator {
11-
display: inline-flex;
12-
align-items: center;
13-
font-size: var(--collapsible-indicator-icon-size);
14-
transition: transform 0.2s ease;
15-
color: var(--gray-10);
10+
@layer components {
11+
.ui-CollapsibleIndicator {
12+
display: inline-flex;
13+
align-items: center;
14+
font-size: var(--collapsible-indicator-icon-size);
15+
transition: transform 0.2s ease;
16+
color: var(--gray-10);
17+
}
1618
}
1719
1820
.ui-CollapsibleIndicator:where([data-side="left"]) {

‎src/components/collapsible/CollapsibleTrigger.vue‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,16 @@ const forwarded = useForwardPropsWithout(props, ['indicator'])
3333
</template>
3434

3535
<style>
36-
.ui-CollapsibleTrigger {
37-
display: inline-flex;
38-
align-items: center;
39-
justify-content: space-between;
40-
text-align: initial;
41-
gap: var(--collapsible-trigger-gap);
42-
font-size: var(--collapsible-font-size);
43-
font-weight: var(--font-weight-medium);
36+
@layer components {
37+
.ui-CollapsibleTrigger {
38+
display: inline-flex;
39+
align-items: center;
40+
justify-content: space-between;
41+
text-align: initial;
42+
gap: var(--collapsible-trigger-gap);
43+
font-size: var(--collapsible-font-size);
44+
font-weight: var(--font-weight-medium);
45+
}
4446
}
4547
.ui-CollapsibleTriggerText {
4648
flex-grow: 1;

‎src/components/combobox/ComboboxContent.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,15 @@ const contentClass = computed(() => {
9595
--scrollarea-scrollbar-vertical-margin-bottom: var(--combobox-content-padding);
9696
--scrollarea-scrollbar-horizontal-margin-left: var(--combobox-content-padding);
9797
--scrollarea-scrollbar-horizontal-margin-right: var(--combobox-content-padding);
98+
}
9899
99-
overflow: hidden;
100-
box-shadow: var(--shadow-5);
101-
background-color: var(--color-panel-solid);
102-
box-sizing: border-box;
100+
@layer components {
101+
.ui-ComboboxContent {
102+
overflow: hidden;
103+
box-shadow: var(--shadow-5);
104+
background-color: var(--color-panel-solid);
105+
box-sizing: border-box;
106+
}
103107
}
104108
105109
.ui-ComboboxContent:where([data-side]) {

‎src/components/combobox/ComboboxEmpty.vue‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,19 @@ import { ComboboxEmpty } from 'reka-ui'
99
</template>
1010

1111
<style>
12-
.ui-ComboboxEmpty {
13-
box-sizing: border-box;
14-
outline: none;
15-
scroll-margin: var(--combobox-content-padding) 0;
16-
user-select: none;
17-
cursor: default;
18-
padding-left: calc(var(--combobox-indicator-width) / 2);
19-
padding-right: var(--combobox-indicator-width);
20-
font-size: var(--combobox-item-font-size);
21-
line-height: var(--combobox-item-line-height);
22-
letter-spacing: var(--combobox-item-letter-spacing);
23-
color: var(--gray-11);
12+
@layer components {
13+
.ui-ComboboxEmpty {
14+
box-sizing: border-box;
15+
outline: none;
16+
scroll-margin: var(--combobox-content-padding) 0;
17+
user-select: none;
18+
cursor: default;
19+
padding-left: calc(var(--combobox-indicator-width) / 2);
20+
padding-right: var(--combobox-indicator-width);
21+
font-size: var(--combobox-item-font-size);
22+
line-height: var(--combobox-item-line-height);
23+
letter-spacing: var(--combobox-item-letter-spacing);
24+
color: var(--gray-11);
25+
}
2426
}
2527
</style>

‎src/components/combobox/ComboboxInput.vue‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -191,21 +191,23 @@ watch(values, () => {
191191
background-color: var(--red-a9);
192192
}
193193
194-
.ui-ComboboxInput {
195-
text-align: inherit;
196-
border: none;
197-
padding: 0;
198-
width: 100%;
199-
font-size: 1em;
200-
background-color: transparent;
201-
border-radius: calc(var(--combobox-field-border-radius) - var(--combobox-field-border-width));
202-
text-indent: var(--combobox-field-padding);
203-
height: var(--combobox-input-height);
204-
cursor: auto;
194+
@layer components {
195+
.ui-ComboboxInput {
196+
text-align: inherit;
197+
border: none;
198+
padding: 0;
199+
width: 100%;
200+
font-size: 1em;
201+
background-color: transparent;
202+
border-radius: calc(var(--combobox-field-border-radius) - var(--combobox-field-border-width));
203+
text-indent: var(--combobox-field-padding);
204+
height: var(--combobox-input-height);
205+
cursor: auto;
205206
206-
/* Reset size 2 padding bottom */
207-
padding-bottom: 0px;
208-
/* Safari credentials autofill icon */
207+
/* Reset size 2 padding bottom */
208+
padding-bottom: 0px;
209+
/* Safari credentials autofill icon */
210+
}
209211
}
210212
211213
.ui-ComboboxField:where([data-multiple="true"]) :where(.ui-ComboboxInput) {

‎src/components/combobox/ComboboxItem.vue‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,26 @@ const forwarded = useForwardProps(props)
2525

2626

2727
<style>
28-
.ui-ComboboxItem {
29-
display: flex;
30-
align-items: center;
31-
height: var(--combobox-item-height);
32-
padding-left: var(--combobox-indicator-width);
33-
padding-right: var(--combobox-indicator-width);
34-
position: relative;
35-
box-sizing: border-box;
36-
outline: none;
37-
scroll-margin: var(--combobox-content-padding) 0;
38-
user-select: none;
39-
cursor: default;
28+
@layer components {
29+
.ui-ComboboxItem {
30+
display: flex;
31+
align-items: center;
32+
height: var(--combobox-item-height);
33+
padding-left: var(--combobox-indicator-width);
34+
padding-right: var(--combobox-indicator-width);
35+
position: relative;
36+
box-sizing: border-box;
37+
outline: none;
38+
scroll-margin: var(--combobox-content-padding) 0;
39+
user-select: none;
40+
cursor: default;
4041
41-
font-size: var(--combobox-item-font-size);
42-
line-height: var(--combobox-item-line-height);
43-
letter-spacing: var(--combobox-item-letter-spacing);
44-
border-radius: var(--combobox-item-radius);
42+
font-size: var(--combobox-item-font-size);
43+
line-height: var(--combobox-item-line-height);
44+
letter-spacing: var(--combobox-item-letter-spacing);
45+
border-radius: var(--combobox-item-radius);
46+
}
4547
}
46-
4748
.ui-ComboboxItem:where([data-disabled]) {
4849
cursor: not-allowed;
4950
}

0 commit comments

Comments
 (0)