Skip to content

Commit f1a4a93

Browse files
coliffcoliff
committed
v6: docs updates
various minor fixes to docs and examples
1 parent ce18b73 commit f1a4a93

7 files changed

Lines changed: 27 additions & 28 deletions

File tree

‎site/src/assets/examples/blog/index.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
6666
<div class="md:col-6">
6767
<div class="row g-0 border rounded overflow-hidden md:flex-row mb-4 shadow-sm h-md-250 position-relative">
6868
<div class="col p-4 d-flex flex-column position-static">
69-
<strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
69+
<strong class="d-inline-block mb-2 fg-emphasis-primary">World</strong>
7070
<h3 class="mb-0">Featured post</h3>
7171
<div class="mb-1 fg-2">Nov 12</div>
7272
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
@@ -83,7 +83,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
8383
<div class="md:col-6">
8484
<div class="row g-0 border rounded overflow-hidden md:flex-row mb-4 shadow-sm h-md-250 position-relative">
8585
<div class="col p-4 d-flex flex-column position-static">
86-
<strong class="d-inline-block mb-2 text-success-emphasis">Design</strong>
86+
<strong class="d-inline-block mb-2 fg-emphasis-success">Design</strong>
8787
<h3 class="mb-0">Post title</h3>
8888
<div class="mb-1 fg-2">Nov 11</div>
8989
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>

‎site/src/assets/examples/checkout/index.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const body_class = 'bg-body-tertiary'
1818
<div class="row g-5">
1919
<div class="md:col-5 lg:col-4 md:order-last">
2020
<h4 class="d-flex justify-content-between align-items-center mb-3">
21-
<span class="text-primary">Your cart</span>
21+
<span class="fg-primary">Your cart</span>
2222
<span class="badge bg-primary rounded-pill">3</span>
2323
</h4>
2424
<ul class="list-group mb-3">
@@ -44,11 +44,11 @@ export const body_class = 'bg-body-tertiary'
4444
<span class="fg-2">$5</span>
4545
</li>
4646
<li class="list-group-item d-flex justify-content-between bg-body-tertiary">
47-
<div class="text-success">
47+
<div class="fg-success">
4848
<h6 class="my-0">Promo code</h6>
4949
<small>EXAMPLECODE</small>
5050
</div>
51-
<span class="text-success">−$5</span>
51+
<span class="fg-success">−$5</span>
5252
</li>
5353
<li class="list-group-item d-flex justify-content-between">
5454
<span>Total (USD)</span>

‎site/src/assets/examples/dialogs/index.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ export const extra_css = ['dialogs.css']
5252
<p class="fg-2 mb-0">You can always change your mind in your account settings.</p>
5353
</div>
5454
<div class="dialog-footer p-0 border-top">
55-
<button type="button" class="btn btn-link text-primary flex-fill py-3 m-0 rounded-0 border-end text-decoration-none fw-semibold">Yes, enable</button>
56-
<button type="button" class="btn btn-link text-primary flex-fill py-3 m-0 rounded-0 text-decoration-none">No thanks</button>
55+
<button type="button" class="btn btn-link fg-primary flex-fill py-3 m-0 rounded-0 border-end text-decoration-none fw-semibold">Yes, enable</button>
56+
<button type="button" class="btn btn-link fg-primary flex-fill py-3 m-0 rounded-0 text-decoration-none">No thanks</button>
5757
</div>
5858
</dialog>
5959
</div>

‎site/src/content/docs/guides/migration.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,6 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
8686
| List group | `.list-group-horizontal-md` | `.md:list-group-horizontal` |
8787
| Sticky | `.sticky-md-top` | `.md:sticky-top` |
8888
| Stacks | `.vstack-md` | `.md:vstack` |
89-
| Stepper | `.stepper-horizontal-md` | `.md:stepper-horizontal` |
9089
| Dialog | `.dialog-fullscreen-sm-down` | `.sm-down:dialog-fullscreen` |
9190
| Print | `.d-print-none` | `.print:d-none` |
9291
</BsTable>

‎site/src/content/docs/utilities/background.mdx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ This approach allows us to also easily support translucency with our `.bg-{opaci
4040
<div class="p-3 mb-2 bg-3">.bg-3</div>
4141
<div class="p-3 mb-2 bg-4">.bg-4</div>
4242
<div class="p-3 mb-2 bg-black fg-white">.bg-black</div>
43-
<div class="p-3 mb-2 bg-white fg-dark">.bg-white</div>
43+
<div class="p-3 mb-2 bg-white fg-black">.bg-white</div>
4444
<div class="p-3 mb-2 bg-transparent fg-body">.bg-transparent</div>`
4545
]} />
4646

@@ -59,22 +59,22 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
5959

6060
Change the opacity of a background color by using any of the `.bg-<percentage>` utilities which use `color-mix()` to mix the background color with `transparent`.
6161

62-
<Example class="d-flex flex-column gap-2" code={`<div class="bg-success p-2 text-white">This is default success background</div>
63-
<div class="bg-success p-2 text-white bg-90">This is 90% opacity success background</div>
64-
<div class="bg-success p-2 text-white bg-80">This is 80% opacity success background</div>
65-
<div class="bg-success p-2 text-white bg-70">This is 70% opacity success background</div>
66-
<div class="bg-success p-2 text-white bg-60">This is 60% opacity success background</div>
67-
<div class="bg-success p-2 text-dark bg-50">This is 50% opacity success background</div>
68-
<div class="bg-success p-2 text-dark bg-40">This is 40% opacity success background</div>
69-
<div class="bg-success p-2 text-dark bg-30">This is 30% opacity success background</div>
70-
<div class="bg-success p-2 text-dark bg-20">This is 20% opacity success background</div>
71-
<div class="bg-success p-2 text-dark bg-10">This is 10% opacity success background</div>`} />
62+
<Example class="d-flex flex-column gap-2" code={`<div class="bg-success p-2">This is default success background</div>
63+
<div class="bg-success p-2 bg-90">This is 90% opacity success background</div>
64+
<div class="bg-success p-2 bg-80">This is 80% opacity success background</div>
65+
<div class="bg-success p-2 bg-70">This is 70% opacity success background</div>
66+
<div class="bg-success p-2 bg-60">This is 60% opacity success background</div>
67+
<div class="bg-success p-2 bg-50">This is 50% opacity success background</div>
68+
<div class="bg-success p-2 bg-40">This is 40% opacity success background</div>
69+
<div class="bg-success p-2 bg-30">This is 30% opacity success background</div>
70+
<div class="bg-success p-2 bg-20">This is 20% opacity success background</div>
71+
<div class="bg-success p-2 bg-10">This is 10% opacity success background</div>`} />
7272

7373
The same can be applied to subtle and muted background colors.
7474

75-
<Example class="d-flex flex-column gap-2" code={`<div class="bg-subtle-success p-2 text-success">This is subtle success background</div>
76-
<div class="bg-muted-success bg-40 p-2 text-success">This is 40% success background</div>
77-
<div class="bg-muted-success bg-20 p-2 text-success">This is 20% success background</div>
75+
<Example class="d-flex flex-column gap-2" code={`<div class="bg-subtle-success p-2">This is subtle success background</div>
76+
<div class="bg-muted-success bg-40 p-2">This is 40% success background</div>
77+
<div class="bg-muted-success bg-20 p-2">This is 20% success background</div>
7878
`} />
7979

8080
## CSS

‎site/src/content/docs/utilities/colors.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ If you want to colorize links, you can use the [`.link-{color}` utilities]([[doc
4141
<p class="fg-4">.fg-4</p>
4242
4343
<p class="fg-black bg-white">.fg-black</p>
44-
<p class="fg-white bg-dark">.fg-white</p>`
44+
<p class="fg-white bg-black">.fg-white</p>`
4545
]} />
4646

4747
## Opacity

‎site/src/content/docs/utilities/z-index.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ Use `z-index` utilities to stack elements on top of one another. Requires a `pos
1414
We call these “low-level” `z-index` utilities because of their default values of `-1` through `3`, which we use for the layout of overlapping components. High-level `z-index` values are used for overlay components like modals and tooltips.
1515
</Callout>
1616

17-
<Example class="bd-example-zindex-levels position-relative" code={`<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
18-
<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
19-
<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
20-
<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
21-
<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>`} />
17+
<Example class="bd-example-zindex-levels position-relative" code={`<div class="z-3 position-absolute p-9 rounded-3"><span>z-3</span></div>
18+
<div class="z-2 position-absolute p-9 rounded-3"><span>z-2</span></div>
19+
<div class="z-1 position-absolute p-9 rounded-3"><span>z-1</span></div>
20+
<div class="z-0 position-absolute p-9 rounded-3"><span>z-0</span></div>
21+
<div class="z-n1 position-absolute p-9 rounded-3"><span>z-n1</span></div>`} />
2222

2323
## Overlays
2424

0 commit comments

Comments
 (0)