Skip to content

Commit f49a230

Browse files
Afriq Yasin RamadhanAfriq Yasin Ramadhan
Afriq Yasin Ramadhan
authored and
Afriq Yasin Ramadhan
committed
docs(foundation): adjust borders and outlines documentations base on new color palette
1 parent d635ca8 commit f49a230

File tree

2 files changed

+79
-31
lines changed

2 files changed

+79
-31
lines changed

‎packages/tailwind-preset/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ module.exports = {
265265
borderColor : {
266266
'subtlest': theme.colors.gray[5],
267267
'subtle' : {
268-
DEFAULT: theme.colors.gray[25],
268+
DEFAULT: theme.colors.gray[10],
269269
alpha : `rgba(${theme.colors.gray[100]}, ${theme.opacity[5]})`,
270270
},
271271
'DEFAULT': theme.colors.gray[20],

‎src/foundation/borders/index.md

Lines changed: 78 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -25,44 +25,61 @@ The borders and also rings colors of Persona is based on [semantics borders colo
2525

2626
<div class="grid grid-cols-4 py-8 gap-y-8 gap-x-6">
2727
<div class="space-y-4">
28-
<div class="border w-28 h-28 border-default dark:border-dark-default"></div>
28+
<div class="border w-28 h-28 border-subtlest dark:border-dark-subtlest"></div>
2929
<div class="space-y-1">
30-
<p-caption size="tn" class="!text-default dark:!text-dark-default">Default</p-caption>
31-
<p-caption size="tn" class="!text-lightblue-50">borderColor.default</p-caption>
32-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/default</p-caption>
30+
<p-caption size="tn" class="!text-default dark:!text-dark-default">Subtlest</p-caption>
31+
<p-caption size="tn" class="!text-lightblue-50">borderColor.subtlest</p-caption>
32+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/subtlest</p-caption>
3333
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Border</p-caption>
34-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-default</p-caption>
34+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-subtlest</p-caption>
3535
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Ring</p-caption>
36-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-default</p-caption>
36+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-subtlest</p-caption>
3737
</div>
3838
</div>
3939

4040
<div class="space-y-4">
41-
<div class="border w-28 h-28 border-default-alpha dark:border-dark-default-alpha"></div>
41+
<div class="border w-28 h-28 border-subtle dark:border-dark-subtle"></div>
4242
<div class="space-y-1">
43-
<p-caption size="tn" class="!text-default dark:!text-dark-default">Default Alpha</p-caption>
44-
<p-caption size="tn" class="!text-lightblue-50">borderColor.default.alpha</p-caption>
45-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/defaultAlpha</p-caption>
43+
<p-caption size="tn" class="!text-default dark:!text-dark-default">Subtle</p-caption>
44+
<p-caption size="tn" class="!text-lightblue-50">borderColor.subtle</p-caption>
45+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/subtle</p-caption>
4646
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Border</p-caption>
47-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-default-alpha</p-caption>
47+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-subtle</p-caption>
4848
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Ring</p-caption>
49-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-default-alpha</p-caption>
49+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-subtle</p-caption>
5050
</div>
5151
</div>
5252

5353
<div class="space-y-4">
54-
<div class="border w-28 h-28 border-subtle dark:border-dark-subtle"></div>
54+
<div class="border w-28 h-28 border-default dark:border-dark-default"></div>
5555
<div class="space-y-1">
56-
<p-caption size="tn" class="!text-default dark:!text-dark-default">Subtle</p-caption>
57-
<p-caption size="tn" class="!text-lightblue-50">borderColor.subtle</p-caption>
58-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/subtle</p-caption>
56+
<p-caption size="tn" class="!text-default dark:!text-dark-default">Default</p-caption>
57+
<p-caption size="tn" class="!text-lightblue-50">borderColor.default</p-caption>
58+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/default</p-caption>
5959
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Border</p-caption>
60-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-subtle</p-caption>
60+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-default</p-caption>
6161
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Ring</p-caption>
62-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-subtle</p-caption>
62+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-default</p-caption>
6363
</div>
6464
</div>
6565

66+
<div class="space-y-4">
67+
<div class="border w-28 h-28 border-emphasis dark:border-dark-emphasis"></div>
68+
<div class="space-y-1">
69+
<p-caption size="tn" class="!text-default dark:!text-dark-default">Emphasis</p-caption>
70+
<p-caption size="tn" class="!text-lightblue-50">borderColor.emphasis</p-caption>
71+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/emphasis</p-caption>
72+
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Border</p-caption>
73+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-subtlest</p-caption>
74+
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Ring</p-caption>
75+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-subtlest</p-caption>
76+
</div>
77+
</div>
78+
</div>
79+
80+
### Additional
81+
82+
<div class="grid grid-cols-4 py-8 gap-y-8 gap-x-6">
6683
<div class="space-y-4">
6784
<div class="border w-28 h-28 border-subtle-alpha dark:border-dark-subtle-alpha"></div>
6885
<div class="space-y-1">
@@ -77,28 +94,59 @@ The borders and also rings colors of Persona is based on [semantics borders colo
7794
</div>
7895

7996
<div class="space-y-4">
80-
<div class="border w-28 h-28 border-subtlest dark:border-dark-subtlest"></div>
97+
<div class="border w-28 h-28 border-default-alpha dark:border-dark-default-alpha"></div>
8198
<div class="space-y-1">
82-
<p-caption size="tn" class="!text-default dark:!text-dark-default">Muted</p-caption>
83-
<p-caption size="tn" class="!text-lightblue-50">borderColor.muted</p-caption>
84-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/muted</p-caption>
99+
<p-caption size="tn" class="!text-default dark:!text-dark-default">Default Alpha</p-caption>
100+
<p-caption size="tn" class="!text-lightblue-50">borderColor.default.alpha</p-caption>
101+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/defaultAlpha</p-caption>
85102
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Border</p-caption>
86-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-muted</p-caption>
103+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-default-alpha</p-caption>
87104
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Ring</p-caption>
88-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-muted</p-caption>
105+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-default-alpha</p-caption>
89106
</div>
90107
</div>
91108

109+
<div class="space-y-4">
110+
<div class="border w-28 h-28 border-emphasis-alpha dark:border-dark-emphasis-alpha"></div>
111+
<div class="space-y-1">
112+
<p-caption size="tn" class="!text-default dark:!text-dark-default">Emphasis Alpha</p-caption>
113+
<p-caption size="tn" class="!text-lightblue-50">borderColor.emphasis-alpha</p-caption>
114+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/emphasisAlpha</p-caption>
115+
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Border</p-caption>
116+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-emphasis-alpha</p-caption>
117+
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Ring</p-caption>
118+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-emphasis-alpha</p-caption>
119+
</div>
120+
</div>
121+
</div>
122+
123+
124+
### Inverted
125+
126+
<div class="grid grid-cols-4 py-8 gap-y-8 gap-x-6">
92127
<div class="space-y-4">
93128
<div class="border w-28 h-28 border-inverse dark:border-dark-inverse"></div>
94129
<div class="space-y-1">
95-
<p-caption size="tn" class="!text-default dark:!text-dark-default">Inverse</p-caption>
96-
<p-caption size="tn" class="!text-lightblue-50">borderColor.inverse</p-caption>
97-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/inverse</p-caption>
130+
<p-caption size="tn" class="!text-default dark:!text-dark-default">Default Alpha</p-caption>
131+
<p-caption size="tn" class="!text-lightblue-50">borderColor.default.alpha</p-caption>
132+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/defaultAlpha</p-caption>
98133
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Border</p-caption>
99-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-inverse</p-caption>
134+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-default-alpha</p-caption>
100135
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Ring</p-caption>
101-
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-inverse</p-caption>
136+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-default-alpha</p-caption>
137+
</div>
138+
</div>
139+
140+
<div class="space-y-4">
141+
<div class="border w-28 h-28 border-on-inverse dark:border-dark-on-inverse"></div>
142+
<div class="space-y-1">
143+
<p-caption size="tn" class="!text-default dark:!text-dark-default">Subtle Alpha</p-caption>
144+
<p-caption size="tn" class="!text-lightblue-50">borderColor.subtle.alpha</p-caption>
145+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle">border/subtleAlpha</p-caption>
146+
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Border</p-caption>
147+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">border-subtle-alpha</p-caption>
148+
<p-caption class="!text-muted dark:!text-dark-muted mt-2">Ring</p-caption>
149+
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">ring-subtle-alpha</p-caption>
102150
</div>
103151
</div>
104152
</div>
@@ -225,7 +273,7 @@ The borders and also rings colors of Persona is based on [semantics borders colo
225273
<div class="space-y-4">
226274
<div class="w-28 h-28 outline outline-info dark:outline-dark-info"></div>
227275
<div class="space-y-1">
228-
<p-caption size="tn" class="!text-default dark:!text-dark-default">Info</p-caption>
276+
<p-caption size="tn" class="!text-default dark:!text-dark-default">info</p-caption>
229277
<p-caption size="tn" class="!text-lightblue-50">outlineColor.info</p-caption>
230278
<p-caption size="tn" class="!text-subtle dark:!text-dark-subtle" weight="bold">outline-info</p-caption>
231279
</div>

0 commit comments

Comments
 (0)