Skip to content

Commit 763e482

Browse files
codecalmcodecalm
committed
Update color references and enhance badge styles for consistency
1 parent 137e5be commit 763e482

30 files changed

+313
-172
lines changed

‎core/docs/ui/base/colors.mdx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,18 @@ Choose one of the available colors from the basic color palette and make your de
2929
All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs.
3030

3131
<ColorsTable colors={[
32-
{ name: "blue-lt", value: "#e9f0f9" },
33-
{ name: "azure-lt", value: "#ecf5fc" },
34-
{ name: "indigo-lt", value: "#eceffd" },
35-
{ name: "purple-lt", value: "#f7ecfa" },
36-
{ name: "pink-lt", value: "#fbebf0" },
37-
{ name: "red-lt", value: "#fbebeb" },
38-
{ name: "orange-lt", value: "#fef0e6" },
39-
{ name: "yellow-lt", value: "#fef5e6" },
40-
{ name: "lime-lt", value: "#f1f8e8" },
41-
{ name: "green-lt", value: "#eaf7ec" },
42-
{ name: "teal-lt", value: "#e7f6f2" },
43-
{ name: "cyan-lt", value: "#e8f6f8" }
32+
{ name: "blue-lightest", value: "#e9f0f9" },
33+
{ name: "azure-lightest", value: "#ecf5fc" },
34+
{ name: "indigo-lightest", value: "#eceffd" },
35+
{ name: "purple-lightest", value: "#f7ecfa" },
36+
{ name: "pink-lightest", value: "#fbebf0" },
37+
{ name: "red-lightest", value: "#fbebeb" },
38+
{ name: "orange-lightest", value: "#fef0e6" },
39+
{ name: "yellow-lightest", value: "#fef5e6" },
40+
{ name: "lime-lightest", value: "#f1f8e8" },
41+
{ name: "green-lightest", value: "#eaf7ec" },
42+
{ name: "teal-lightest", value: "#e7f6f2" },
43+
{ name: "cyan-lightest", value: "#e8f6f8" }
4444
]}/>
4545

4646
## Gray palette

‎core/docs/ui/components/avatars.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -110,11 +110,11 @@ Besides pictures and initials, you can also use icons to make the avatars more u
110110
Customize the color of the avatars' background. You can click [here](/docs/ui/base/colors) to see the list of available colors.
111111

112112
```html example centered separated code
113-
<span class="avatar bg-green-lt">AB</span>
114-
<span class="avatar bg-red-lt">CD</span>
115-
<span class="avatar bg-yellow-lt">EF</span>
116-
<span class="avatar bg-primary-lt">GH</span>
117-
<span class="avatar bg-purple-lt">IJ</span>
113+
<span class="avatar bg-green-lightest">AB</span>
114+
<span class="avatar bg-red-lightest">CD</span>
115+
<span class="avatar bg-yellow-lightest">EF</span>
116+
<span class="avatar bg-primary-lightest">GH</span>
117+
<span class="avatar bg-purple-lightest">IJ</span>
118118
```
119119

120120
## Avatar size

‎core/docs/ui/components/badges.mdx

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,18 @@ bootstrapLink: components/badge/
1010
The default badges are square and come in the basic set of colors.
1111

1212
```html example centered separated
13-
<span class="badge bg-blue-lt">Blue</span>
14-
<span class="badge bg-azure-lt">Azure</span>
15-
<span class="badge bg-indigo-lt">Indigo</span>
16-
<span class="badge bg-purple-lt">Purple</span>
17-
<span class="badge bg-pink-lt">Pink</span>
18-
<span class="badge bg-red-lt">Red</span>
19-
<span class="badge bg-orange-lt">Orange</span>
20-
<span class="badge bg-yellow-lt">Yellow</span>
21-
<span class="badge bg-lime-lt">Lime</span>
22-
<span class="badge bg-green-lt">Green</span>
23-
<span class="badge bg-teal-lt">Teal</span>
24-
<span class="badge bg-cyan-lt">Cyan</span>
13+
<span class="badge bg-blue-lightest">Blue</span>
14+
<span class="badge bg-azure-lightest">Azure</span>
15+
<span class="badge bg-indigo-lightest">Indigo</span>
16+
<span class="badge bg-purple-lightest">Purple</span>
17+
<span class="badge bg-pink-lightest">Pink</span>
18+
<span class="badge bg-red-lightest">Red</span>
19+
<span class="badge bg-orange-lightest">Orange</span>
20+
<span class="badge bg-yellow-lightest">Yellow</span>
21+
<span class="badge bg-lime-lightest">Lime</span>
22+
<span class="badge bg-green-lightest">Green</span>
23+
<span class="badge bg-teal-lightest">Teal</span>
24+
<span class="badge bg-cyan-lightest">Cyan</span>
2525
```
2626

2727
## Headings
@@ -59,37 +59,37 @@ The default badges are square and come in the basic set of colors.
5959
Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
6060

6161
```html example centered separated
62-
<span class="badge badge-pill bg-blue-lt">1</span>
63-
<span class="badge badge-pill bg-azure-lt">2</span>
64-
<span class="badge badge-pill bg-indigo-lt">3</span>
65-
<span class="badge badge-pill bg-purple-lt">4</span>
66-
<span class="badge badge-pill bg-pink-lt">5</span>
67-
<span class="badge badge-pill bg-red-lt">6</span>
68-
<span class="badge badge-pill bg-orange-lt">7</span>
69-
<span class="badge badge-pill bg-yellow-lt">8</span>
70-
<span class="badge badge-pill bg-lime-lt">9</span>
71-
<span class="badge badge-pill bg-green-lt">10</span>
72-
<span class="badge badge-pill bg-teal-lt">11</span>
73-
<span class="badge badge-pill bg-cyan-lt">12</span>
62+
<span class="badge badge-pill bg-blue-lightest">1</span>
63+
<span class="badge badge-pill bg-azure-lightest">2</span>
64+
<span class="badge badge-pill bg-indigo-lightest">3</span>
65+
<span class="badge badge-pill bg-purple-lightest">4</span>
66+
<span class="badge badge-pill bg-pink-lightest">5</span>
67+
<span class="badge badge-pill bg-red-lightest">6</span>
68+
<span class="badge badge-pill bg-orange-lightest">7</span>
69+
<span class="badge badge-pill bg-yellow-lightest">8</span>
70+
<span class="badge badge-pill bg-lime-lightest">9</span>
71+
<span class="badge badge-pill bg-green-lightest">10</span>
72+
<span class="badge badge-pill bg-teal-lightest">11</span>
73+
<span class="badge badge-pill bg-cyan-lightest">12</span>
7474
```
7575

7676
## Links
7777

7878
Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
7979

8080
```html example centered separated
81-
<a href="#" class="badge bg-blue-lt">Blue</a>
82-
<a href="#" class="badge bg-azure-lt">Azure</a>
83-
<a href="#" class="badge bg-indigo-lt">Indigo</a>
84-
<a href="#" class="badge bg-purple-lt">Purple</a>
85-
<a href="#" class="badge bg-pink-lt">Pink</a>
86-
<a href="#" class="badge bg-red-lt">Red</a>
87-
<a href="#" class="badge bg-orange-lt">Orange</a>
88-
<a href="#" class="badge bg-yellow-lt">Yellow</a>
89-
<a href="#" class="badge bg-lime-lt">Lime</a>
90-
<a href="#" class="badge bg-green-lt">Green</a>
91-
<a href="#" class="badge bg-teal-lt">Teal</a>
92-
<a href="#" class="badge bg-cyan-lt">Cyan</a>
81+
<a href="#" class="badge bg-blue-lightest">Blue</a>
82+
<a href="#" class="badge bg-azure-lightest">Azure</a>
83+
<a href="#" class="badge bg-indigo-lightest">Indigo</a>
84+
<a href="#" class="badge bg-purple-lightest">Purple</a>
85+
<a href="#" class="badge bg-pink-lightest">Pink</a>
86+
<a href="#" class="badge bg-red-lightest">Red</a>
87+
<a href="#" class="badge bg-orange-lightest">Orange</a>
88+
<a href="#" class="badge bg-yellow-lightest">Yellow</a>
89+
<a href="#" class="badge bg-lime-lightest">Lime</a>
90+
<a href="#" class="badge bg-green-lightest">Green</a>
91+
<a href="#" class="badge bg-teal-lightest">Teal</a>
92+
<a href="#" class="badge bg-cyan-lightest">Cyan</a>
9393
```
9494

9595
## Button with badge

‎core/docs/ui/components/progress.mdx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ By using a progress bar component as a background element, designers can create
193193
```html
194194
<div class="progressbg">
195195
<div class="progress progressbg-progress">
196-
<div class="progress-bar bg-primary-lt" style="width: 65%"></div>
196+
<div class="progress-bar bg-primary-lightest" style="width: 65%"></div>
197197
</div>
198198
<div class="progressbg-text">Poland</div>
199199
<div class="progressbg-value">65%</div>
@@ -205,35 +205,35 @@ Thanks to this you can create a nice looking statistics section:
205205
```html example vertical separated centered columns={1} plugins="flags" height="20rem"
206206
<div class="progressbg">
207207
<div class="progress progressbg-progress">
208-
<div class="progress-bar bg-primary-lt" style="width: 65%"></div>
208+
<div class="progress-bar bg-primary-lightest" style="width: 65%"></div>
209209
</div>
210210
<div class="progressbg-text">Poland</div>
211211
<div class="progressbg-value">65%</div>
212212
</div>
213213
<div class="progressbg">
214214
<div class="progress progressbg-progress">
215-
<div class="progress-bar bg-primary-lt" style="width: 35%"></div>
215+
<div class="progress-bar bg-primary-lightest" style="width: 35%"></div>
216216
</div>
217217
<div class="progressbg-text">Germany</div>
218218
<div class="progressbg-value">35%</div>
219219
</div>
220220
<div class="progressbg">
221221
<div class="progress progressbg-progress">
222-
<div class="progress-bar bg-primary-lt" style="width: 28%"></div>
222+
<div class="progress-bar bg-primary-lightest" style="width: 28%"></div>
223223
</div>
224224
<div class="progressbg-text">United Stated</div>
225225
<div class="progressbg-value">28%</div>
226226
</div>
227227
<div class="progressbg">
228228
<div class="progress progressbg-progress">
229-
<div class="progress-bar bg-primary-lt" style="width: 20%"></div>
229+
<div class="progress-bar bg-primary-lightest" style="width: 20%"></div>
230230
</div>
231231
<div class="progressbg-text">United Kingdom</div>
232232
<div class="progressbg-value">20%</div>
233233
</div>
234234
<div class="progressbg">
235235
<div class="progress progressbg-progress">
236-
<div class="progress-bar bg-primary-lt" style="width: 15%"></div>
236+
<div class="progress-bar bg-primary-lightest" style="width: 15%"></div>
237237
</div>
238238
<div class="progressbg-text">France</div>
239239
<div class="progressbg-value">15%</div>

‎core/docs/ui/components/timelines.mdx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ The available timeline design is composed of many components that will help you
1111
```html example height="400px" scrollable background="base"
1212
<ul class="timeline">
1313
<li class="timeline-event">
14-
<div class="timeline-event-icon bg-twitter-lt">
14+
<div class="timeline-event-icon bg-twitter-lightest">
1515
<svg
1616
xmlns="http://www.w3.org/2000/svg"
1717
class="icon"
@@ -94,7 +94,7 @@ The available timeline design is composed of many components that will help you
9494
</div>
9595
</li>
9696
<li class="timeline-event">
97-
<div class="timeline-event-icon bg-facebook-lt">
97+
<div class="timeline-event-icon bg-facebook-lightest">
9898
<svg
9999
xmlns="http://www.w3.org/2000/svg"
100100
class="icon"
@@ -234,7 +234,7 @@ The available timeline design is composed of many components that will help you
234234
```html
235235
<ul class="timeline">
236236
<li class="timeline-event">
237-
<div class="timeline-event-icon bg-twitter-lt">
237+
<div class="timeline-event-icon bg-twitter-lightest">
238238
<!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
239239
<svg>...</svg>
240240
</div>
@@ -273,7 +273,7 @@ The available timeline design is composed of many components that will help you
273273
</div>
274274
</li>
275275
<li class="timeline-event">
276-
<div class="timeline-event-icon bg-facebook-lt">
276+
<div class="timeline-event-icon bg-facebook-lightest">
277277
<!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
278278
<svg>...</svg>
279279
</div>
@@ -357,7 +357,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
357357
```html example height="400px" scrollable background="base"
358358
<ul class="timeline timeline-simple">
359359
<li class="timeline-event">
360-
<div class="timeline-event-icon bg-twitter-lt">
360+
<div class="timeline-event-icon bg-twitter-lightest">
361361
<svg
362362
xmlns="http://www.w3.org/2000/svg"
363363
class="icon"
@@ -440,7 +440,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
440440
</div>
441441
</li>
442442
<li class="timeline-event">
443-
<div class="timeline-event-icon bg-facebook-lt">
443+
<div class="timeline-event-icon bg-facebook-lightest">
444444
<svg
445445
xmlns="http://www.w3.org/2000/svg"
446446
class="icon"
@@ -580,7 +580,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
580580
```html
581581
<ul class="timeline timeline-simple">
582582
<li class="timeline-event">
583-
<div class="timeline-event-icon bg-twitter-lt">
583+
<div class="timeline-event-icon bg-twitter-lightest">
584584
<!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
585585
<svg>...</svg>
586586
</div>
@@ -619,7 +619,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
619619
</div>
620620
</li>
621621
<li class="timeline-event">
622-
<div class="timeline-event-icon bg-facebook-lt">
622+
<div class="timeline-event-icon bg-facebook-lightest">
623623
<!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
624624
<svg>...</svg>
625625
</div>

0 commit comments

Comments
 (0)