Skip to content

Commit 4eb18a0

Browse files
lepturelepture
committed
fix(collapsible): tweak on collapsible size style
1 parent 1d436f1 commit 4eb18a0

File tree

7 files changed

+122
-24
lines changed

7 files changed

+122
-24
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @typlog/ui
22

3+
**WIP**
4+
35
An open-source Vue component library optimized for fast development,
46
built on top of Reka UI and Radix Colors.
57

‎docs/content/components/collapsible.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,14 @@ reka: https://reka-ui.com/docs/components/collapsible
2424

2525
## Examples
2626

27+
### Size
28+
29+
<Example name="collapsible/Size.vue" />
30+
2731
### Variant
2832

2933
<Example name="collapsible/Variant.vue" />
34+
35+
### Color
36+
37+
<Example name="collapsible/Color.vue" />

‎docs/examples/collapsible/Color.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script setup lang="ts">
2+
import {
3+
CollapsibleRoot,
4+
CollapsibleTrigger,
5+
CollapsibleContent,
6+
} from '#components'
7+
</script>
8+
9+
<template>
10+
<div class="flex flex-col gap-4">
11+
<CollapsibleRoot variant="soft" color="gray">
12+
<CollapsibleTrigger>
13+
What is @typlog/ui?
14+
</CollapsibleTrigger>
15+
<CollapsibleContent>
16+
<p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
17+
</CollapsibleContent>
18+
</CollapsibleRoot>
19+
20+
<CollapsibleRoot variant="soft" color="green">
21+
<CollapsibleTrigger>
22+
What is @typlog/ui?
23+
</CollapsibleTrigger>
24+
<CollapsibleContent>
25+
<p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
26+
</CollapsibleContent>
27+
</CollapsibleRoot>
28+
29+
<CollapsibleRoot variant="soft" color="red">
30+
<CollapsibleTrigger>
31+
What is @typlog/ui?
32+
</CollapsibleTrigger>
33+
<CollapsibleContent>
34+
<p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
35+
</CollapsibleContent>
36+
</CollapsibleRoot>
37+
</div>
38+
</template>

‎docs/examples/collapsible/Size.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script setup lang="ts">
2+
import {
3+
CollapsibleRoot,
4+
CollapsibleTrigger,
5+
CollapsibleContent,
6+
} from '#components'
7+
</script>
8+
9+
<template>
10+
<div class="flex flex-col gap-4">
11+
<CollapsibleRoot variant="soft" size="1">
12+
<CollapsibleTrigger>
13+
What is @typlog/ui?
14+
</CollapsibleTrigger>
15+
<CollapsibleContent>
16+
<p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
17+
</CollapsibleContent>
18+
</CollapsibleRoot>
19+
20+
<CollapsibleRoot variant="soft" size="2">
21+
<CollapsibleTrigger>
22+
What is @typlog/ui?
23+
</CollapsibleTrigger>
24+
<CollapsibleContent>
25+
<p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
26+
</CollapsibleContent>
27+
</CollapsibleRoot>
28+
29+
<CollapsibleRoot variant="soft" size="3">
30+
<CollapsibleTrigger>
31+
What is @typlog/ui?
32+
</CollapsibleTrigger>
33+
<CollapsibleContent>
34+
<p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
35+
</CollapsibleContent>
36+
</CollapsibleRoot>
37+
</div>
38+
</template>

‎src/components/collapsible/CollapsibleContent.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,20 @@ const forwardedProps = useForwardProps(props)
2525
@keyframes collapsible-down {
2626
from {
2727
height: 0;
28+
opacity: 1;
2829
}
2930
to {
3031
height: var(--reka-collapsible-content-height);
32+
opacity: 1;
3133
}
3234
}
3335
@keyframes collapsible-up {
3436
from {
37+
opacity: 1;
3538
height: var(--reka-collapsible-content-height);
3639
}
3740
to {
41+
opacity: 0;
3842
height: 0;
3943
}
4044
}
@@ -48,7 +52,10 @@ const forwardedProps = useForwardProps(props)
4852
animation: collapsible-down 0.2s ease-out;
4953
}
5054
.ui-CollapsibleContent:where([data-state="closed"]) {
51-
animation: collapsible-up 0.2s ease-out;
55+
animation: collapsible-up 0.2s ease-in;
56+
}
57+
:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleContent {
58+
background-color: var(--accent-a2);
5259
}
5360
:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleContent {
5461
padding-inline: var(--collapsible-padding-x);

‎src/components/collapsible/CollapsibleRoot.vue‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,27 +44,27 @@ const resetClass = buildPropsClass(props, ['variant', 'size'])
4444
--collapsible-font-size: var(--font-size-2);
4545
--collapsible-trigger-gap: calc(var(--space-1) / 2);
4646
--collapsible-indicator-icon-size: var(--font-size-2);
47-
--collapsible-padding-y: var(--space-1);
48-
--collapsible-padding-x: var(--space-2);
47+
--collapsible-padding-y: var(--space-2);
48+
--collapsible-padding-x: var(--space-3);
4949
--collapsible-radius: max(var(--radius-1), var(--radius-full))
5050
}
5151
5252
.ui-CollapsibleRoot:where(.r-size-2) {
5353
--collapsible-font-size: var(--font-size-3);
5454
--collapsible-trigger-gap: var(--space-1);
5555
--collapsible-indicator-icon-size: var(--font-size-3);
56-
--collapsible-padding-y: var(--space-2);
57-
--collapsible-padding-x: var(--space-3);
56+
--collapsible-padding-y: var(--space-3);
57+
--collapsible-padding-x: var(--space-4);
5858
--collapsible-radius: max(var(--radius-2), var(--radius-full))
5959
}
6060
6161
.ui-CollapsibleRoot:where(.r-size-3) {
62-
--collapsible-font-size: var(--font-size-5);
62+
--collapsible-font-size: var(--font-size-4);
6363
--collapsible-trigger-gap: calc(var(--space-2) * 3 / 4);
6464
--collapsible-indicator-icon-size: var(--font-size-5);
65-
--collapsible-padding-y: var(--space-2);
65+
--collapsible-padding-y: var(--space-3);
6666
--collapsible-padding-x: var(--space-4);
67-
--collapsible-radius: max(var(--radius-3), var(--radius-full))
67+
--collapsible-radius: max(var(--radius-4), var(--radius-full))
6868
}
6969
7070
.ui-CollapsibleRoot:where(.r-size-4) {
@@ -76,11 +76,23 @@ const resetClass = buildPropsClass(props, ['variant', 'size'])
7676
--collapsible-radius: max(var(--radius-4), var(--radius-full))
7777
}
7878
79+
.ui-CollapsibleRoot:where(.r-variant-soft, .r-variant-surface) {
80+
--collapsible-trigger-background-color: var(--accent-a2);
81+
--collapsible-trigger-hover-background-color: var(--accent-a3);
82+
--collapsible-trigger-open-background-color: var(--accent-a3);
83+
--collapsible-trigger-open-text-color: var(--accent-a11);
84+
85+
border-radius: var(--collapsible-radius);
86+
}
87+
7988
.ui-CollapsibleRoot:where(.r-variant-surface) {
8089
box-shadow: inset 0 0 0 1px var(--gray-a4);
81-
border-radius: var(--collapsible-radius);
8290
}
8391
.ui-CollapsibleRoot:where(.r-variant-surface):where([data-state="open"]) {
8492
box-shadow: inset 0 0 0 1px var(--gray-a5);
8593
}
94+
95+
.ui-CollapsibleRoot:where(.r-variant-soft, .r-variant-surface):where([data-accent-color="gray"]) {
96+
--collapsible-trigger-open-text-color: var(--accent-12);
97+
}
8698
</style>

‎src/components/collapsible/CollapsibleTrigger.vue‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -47,26 +47,19 @@ const forwarded = useForwardPropsWithout(props, ['indicator'])
4747
text-align: initial;
4848
}
4949
:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger {
50+
background-color: var(--collapsible-trigger-background-color);
5051
padding-block: var(--collapsible-padding-y);
5152
padding-inline: var(--collapsible-padding-x);
5253
width: 100%;
53-
}
54-
55-
:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleTrigger {
56-
background: var(--accent-a2);
5754
border-radius: var(--collapsible-radius);
55+
transition: border-radius 0.2s ease;
5856
}
59-
:where(.ui-CollapsibleRoot.r-variant-surface) .ui-CollapsibleTrigger {
60-
border-top-left-radius: var(--collapsible-radius);
61-
border-top-right-radius: var(--collapsible-radius);
62-
background: var(--accent-a2);
63-
}
64-
:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleTrigger:where(:hover) {
65-
background: var(--accent-a3);
57+
:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger:where(:hover) {
58+
background-color: var(--collapsible-trigger-hover-background-color);
6659
}
67-
:where(.ui-CollapsibleRoot.r-variant-surface) .ui-CollapsibleTrigger:where([data-state="open"]),
68-
:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleTrigger:where([data-state="open"]) {
69-
background: var(--accent-a3);
70-
color: var(--accent-a11);
60+
:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger:where([data-state="open"]) {
61+
background-color: var(--collapsible-trigger-open-background-color);
62+
color: var(--collapsible-trigger-open-text-color);
63+
border-radius: var(--collapsible-radius) var(--collapsible-radius) 0 0;
7164
}
7265
</style>

0 commit comments

Comments
 (0)