Skip to content

Commit a611172

Browse files
adenvtadenvt
authored
Merge pull request #1504 from privy-open-source/fix/adjust-component-color
fix: adjustment component with new palette color
2 parents aef0107 + 731b026 commit a611172

File tree

7 files changed

+42
-29
lines changed

7 files changed

+42
-29
lines changed

‎src/.vitepress/theme/css/custom.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,10 @@
144144
&:where(.freetext--hyperlink) {
145145
@apply decoration-solid;
146146
}
147+
148+
&:where(.btn) {
149+
@apply no-underline;
150+
}
147151
}
148152

149153
h1 {

‎src/components/badge/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ description: Label of the thing they're quantifying, such as the number of notif
77
import pBadge from './Badge.vue'
88
import pBanner from '../banner/Banner.vue'
99
import Icon from '@privyid/persona-icon/vue/persona/16.vue'
10-
import IconEmaterai from '@privyid/persona-icon/vue/e-meterai/16.vue'
10+
import IconEmaterai from '@privyid/persona-icon/vue/signature/16.vue'
1111
</script>
1212

1313
# Badge
@@ -32,7 +32,7 @@ Default color of badge are black.
3232
<template>
3333
<p-badge>25</p-badge>
3434
<p-badge>
35-
<pi-e-meterai-16 />
35+
<pi-signature-16 />
3636
<span>2</span>
3737
</p-badge>
3838
</template>

‎src/components/carousel/index.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ description: Slideshow for cycling through a series of content.
99
import pCard from '../card/Card.vue'
1010
import pCaption from '../caption/Caption.vue'
1111
import pBanner from '../banner/Banner.vue'
12-
import IconRight from '@privyid/persona-icon/vue/chevron-right/32.vue'
12+
import IconRight from '@privyid/persona-icon/vue/chevron-right/20.vue'
1313
import { ref } from 'vue-demi'
1414

1515
const active = ref(1)
@@ -74,7 +74,7 @@ description: Slideshow for cycling through a series of content.
7474
999999
7575
</div>
7676
</div>
77-
<IconRight />
77+
<IconRight class="text-subtle dark:text-dark-subtle" />
7878
</p-card>
7979
</p-carousel-item>
8080
<p-carousel-item>
@@ -88,7 +88,7 @@ description: Slideshow for cycling through a series of content.
8888
999999
8989
</div>
9090
</div>
91-
<IconRight />
91+
<IconRight class="text-subtle dark:text-dark-subtle" />
9292
</p-card>
9393
</p-carousel-item>
9494
</p-carousel>
@@ -190,7 +190,7 @@ You can set position of progress indicator using prop `align`, `start` or `end`.
190190
999999
191191
</div>
192192
</div>
193-
<IconRight />
193+
<IconRight class="text-subtle dark:text-dark-subtle" />
194194
</p-card>
195195
</p-carousel-item>
196196
<p-carousel-item>
@@ -204,7 +204,7 @@ You can set position of progress indicator using prop `align`, `start` or `end`.
204204
999999
205205
</div>
206206
</div>
207-
<IconRight />
207+
<IconRight class="text-subtle dark:text-dark-subtle" />
208208
</p-card>
209209
</p-carousel-item>
210210
</p-carousel>
@@ -221,7 +221,7 @@ You can set position of progress indicator using prop `align`, `start` or `end`.
221221
999999
222222
</div>
223223
</div>
224-
<IconRight />
224+
<IconRight class="text-subtle dark:text-dark-subtle" />
225225
</p-card>
226226
</p-carousel-item>
227227
<p-carousel-item>
@@ -235,7 +235,7 @@ You can set position of progress indicator using prop `align`, `start` or `end`.
235235
999999
236236
</div>
237237
</div>
238-
<IconRight />
238+
<IconRight class="text-subtle dark:text-dark-subtle" />
239239
</p-card>
240240
</p-carousel-item>
241241
</p-carousel>

‎src/components/nav/Nav.vue

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,15 @@ const classNames = computed(() => {
109109
* Last Update : Aug 03, 2022
110110
*/
111111
.nav {
112+
--p-border-nav-link-active: theme(borderColor.brand.accent.DEFAULT);
113+
--p-border-dark-nav-link-active: theme(borderColor.dark.brand.accent.DEFAULT);
114+
115+
--p-bg-nav-tabs-active: theme(backgroundColor.default.DEFAULT);
116+
--p-bg-dark-nav-tabs-active: theme(backgroundColor.dark.default.DEFAULT);
117+
118+
--p-bg-nav-pills-active: theme(backgroundColor.default.alpha);
119+
--p-bg-dark-nav-pills-active: theme(backgroundColor.default.alpha);
120+
112121
/**
113122
* Default navigation
114123
* is horizontal
@@ -164,8 +173,8 @@ const classNames = computed(() => {
164173
&.router-link-active:not(.nav__link--exact),
165174
&.router-link-exact-active.nav__link--exact {
166175
&:not(.nav__link--disabled) {
167-
@apply border-b-brand-accent;
168-
@apply dark:border-b-dark-brand-accent;
176+
@apply border-b-[color:var(--p-border-nav-link-active)];
177+
@apply dark:border-b-[color:var(--p-border-dark-nav-link-active)];
169178
}
170179
}
171180
}
@@ -182,8 +191,8 @@ const classNames = computed(() => {
182191
&.router-link-active:not(.nav__link--exact),
183192
&.router-link-exact-active.nav__link--exact {
184193
&:not(.nav__link--disabled) {
185-
@apply border-r border-r-brand-accent rounded-tr-none;
186-
@apply dark:border-r-dark-brand-accent;
194+
@apply border-r border-r-[color:var(--p-border-nav-link-active)] rounded-tr-none;
195+
@apply dark:border-r-[color:var(--p-border-dark-nav-link-active)];
187196
}
188197
}
189198
}
@@ -196,8 +205,8 @@ const classNames = computed(() => {
196205
&.router-link-active:not(.nav__link--exact),
197206
&.router-link-exact-active.nav__link--exact {
198207
&:not(.nav__link--disabled) {
199-
@apply border-l border-l-brand-accent rounded-tl-none;
200-
@apply dark:border-l-dark-brand-accent;
208+
@apply border-l border-l-[color:var(--p-border-nav-link-active)] rounded-tl-none;
209+
@apply dark:border-l-[color:var(--p-border-dark-nav-link-active)];
201210
}
202211
}
203212
}
@@ -220,8 +229,8 @@ const classNames = computed(() => {
220229
&.router-link-active:not(.nav__link--exact),
221230
&.router-link-exact-active.nav__link--exact {
222231
&:not(.nav__link--disabled) {
223-
@apply border-t-default border-x-default bg-ground;
224-
@apply dark:border-t-dark-default dark:border-x-dark-default dark:bg-dark-ground;
232+
@apply border-t-default border-x-default bg-[color:var(--p-bg-nav-tabs-active)];
233+
@apply dark:border-t-dark-default dark:border-x-dark-default dark:bg-[color:var(--p-bg-dark-nav-tabs-active)];
225234
}
226235
}
227236
}
@@ -236,8 +245,8 @@ const classNames = computed(() => {
236245
&.router-link-active:not(.nav__link--exact),
237246
&.router-link-exact-active.nav__link--exact {
238247
&:not(.nav__link--disabled) {
239-
@apply border-l-default border-y-default border-r-transparent bg-ground rounded-l rounded-r-none;
240-
@apply dark:border-l-dark-default dark:border-y-dark-default dark:border-r-transparent dark:bg-dark-ground;
248+
@apply border-l-default border-y-default border-r-transparent bg-[color:var(--p-bg-nav-tabs-active)] rounded-l rounded-r-none;
249+
@apply dark:border-l-dark-default dark:border-y-dark-default dark:border-r-transparent dark:bg-[color:var(--p-bg-dark-nav-tabs-active)];
241250
}
242251
}
243252
}
@@ -273,8 +282,8 @@ const classNames = computed(() => {
273282
&.router-link-active:not(.nav__link--exact),
274283
&.router-link-exact-active.nav__link--exact {
275284
&:not(.nav__link--disabled) {
276-
@apply bg-ground rounded-b;
277-
@apply dark:bg-dark-ground;
285+
@apply bg-[color:var(--p-bg-nav-pills-active)] rounded-b;
286+
@apply dark:bg-[color:var(--p-bg-dark-nav-pills-active)];
278287
}
279288
}
280289
}

‎src/components/progress-indicator/ProgressIndicator.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,10 @@ function setValue (value: number) {
8484

8585
<style lang="postcss">
8686
.progress-indicator {
87-
--p-bg-indicator-item: theme(backgroundColor.emphasis-alpha);
88-
--p-bg-dark-indicator-item: theme(backgroundColor.dark.emphasis-alpha);
89-
--p-bg-indicator-item-active: theme(backgroundColor.brand.accent.DEFAULT);
90-
--p-bg-dark-indicator-item-active: theme(backgroundColor.dark.brand.accent.DEFAULT);
87+
--p-bg-indicator-item: rgba(theme(backgroundColor.inverse), theme(opacity.20));
88+
--p-bg-dark-indicator-item: rgba(theme(backgroundColor.dark.inverse), theme(opacity.20));
89+
--p-bg-indicator-item-active: rgba(theme(backgroundColor.inverse), theme(opacity.60));
90+
--p-bg-dark-indicator-item-active: rgba(theme(backgroundColor.dark.inverse), theme(opacity.60));
9191
9292
@apply relative;
9393

‎src/components/shimmer/Shimmer.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,9 @@ const uid = uniqueId('shimmer-')
9696
<style lang="postcss">
9797
.shimmer {
9898
--p-shimmer-fg: theme('backgroundColor.base.DEFAULT');
99-
--p-shimmer-bg: theme('backgroundColor.base.DEFAULT');
99+
--p-shimmer-bg: theme('backgroundColor.ground');
100100
--p-shimmer-dark-bg: theme('backgroundColor.dark.base');
101-
--p-shimmer-dark-fg: theme('backgroundColor.dark.base');
101+
--p-shimmer-dark-fg: theme('backgroundColor.dark.ground');
102102
103103
&--responsive {
104104
@apply w-full h-auto;

‎src/components/shimmer/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,9 +145,9 @@ You can color of shimmer using CSS Variable
145145

146146
```sass
147147
--p-shimmer-fg: theme('backgroundColor.base.DEFAULT');
148-
--p-shimmer-bg: theme('backgroundColor.base.DEFAULT');
148+
--p-shimmer-bg: theme('backgroundColor.ground');
149149
--p-shimmer-dark-bg: theme('backgroundColor.dark.base');
150-
--p-shimmer-dark-fg: theme('backgroundColor.dark.base');
150+
--p-shimmer-dark-fg: theme('backgroundColor.dark.ground');
151151
```
152152

153153
## API

0 commit comments

Comments
 (0)