From cf5b555f723d4a9db94be4b89a9ad64542ffef0c Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Fri, 31 Jul 2026 14:23:37 +0200 Subject: [PATCH 01/43] Update specializations for v6 --- README.md | 2 +- dtd/base/bootstrapCommonElements.mod | 10 +- dtd/base/bootstrapDomain.ent | 4 +- dtd/base/bootstrapDomain.mod | 44 +++--- sample/accordion.dita | 8 +- sample/alerts.dita | 90 ++++++------ sample/badge.dita | 35 ++--- sample/bootstrap-extension.dita | 2 +- sample/bootstrap-table.dita | 8 +- sample/borders.dita | 16 +-- sample/breadcrumb.dita | 4 +- sample/button-group.dita | 76 +++++----- sample/buttons.dita | 62 ++++---- sample/card.dita | 12 +- sample/carousel.dita | 70 ++++----- sample/collapse.dita | 6 +- sample/color.dita | 98 ++++++------- sample/containers.dita | 16 +-- sample/dark-mode.dita | 2 +- sample/document.ditamap | 14 +- sample/drawer.dita | 205 +++++++++++++++++++++++++++ sample/extension-points.dita | 2 +- sample/figures.dita | 6 +- sample/grid.dita | 10 +- sample/icons.dita | 56 ++++---- sample/images.dita | 10 +- sample/index.dita | 16 +-- sample/list-group.dita | 8 +- sample/nav.dita | 14 +- sample/offcanvas.dita | 205 --------------------------- sample/offline.dita | 6 +- sample/pagination.dita | 4 +- sample/popovers.dita | 8 +- sample/rtl.dita | 4 +- sample/sass.dita | 6 +- sample/scrollspy.dita | 4 +- sample/search-box.dita | 8 +- sample/shadows.dita | 40 +++--- sample/spacing.dita | 56 ++++---- sample/tables.dita | 44 +++--- sample/tabs.dita | 2 +- sample/tooltips.dita | 14 +- sample/typography.dita | 61 ++++---- 43 files changed, 685 insertions(+), 683 deletions(-) create mode 100644 sample/drawer.dita delete mode 100644 sample/offcanvas.dita diff --git a/README.md b/README.md index 511bf0b..80dfd23 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ The plug-in includes DTD handling for the following DITA Bootstrap components: - [Icons](https://dita-bootstrap.github.io/icons.html) (``) - [Grid layout](https://dita-bootstrap.github.io/grid.html) (``, ``) - [List groups](https://dita-bootstrap.github.io/list-group.html) (``) -- [Offcanvas](https://dita-bootstrap.github.io/offcanvas.html) (``) +- [Drawer](https://dita-bootstrap.github.io/drawer.html) (``) - [Pagination](https://dita-bootstrap.github.io/pagination.html) (``) - [Popovers](https://dita-bootstrap.github.io/popovers.html) (``) - [Tabs](https://dita-bootstrap.github.io/tabs.html) (``) diff --git a/dtd/base/bootstrapCommonElements.mod b/dtd/base/bootstrapCommonElements.mod index c76da45..e7376c0 100644 --- a/dtd/base/bootstrapCommonElements.mod +++ b/dtd/base/bootstrapCommonElements.mod @@ -10,9 +10,9 @@ @@ -63,9 +63,9 @@ > - + @@ -41,7 +41,7 @@ - + diff --git a/dtd/base/bootstrapDomain.mod b/dtd/base/bootstrapDomain.mod index 5730455..37a2bfa 100644 --- a/dtd/base/bootstrapDomain.mod +++ b/dtd/base/bootstrapDomain.mod @@ -13,12 +13,12 @@ @@ -57,7 +57,7 @@ @@ -87,13 +87,13 @@ - - - - + + + @@ -191,10 +191,10 @@ @@ -233,7 +233,7 @@ %univ-atts;"> @@ -257,7 +257,7 @@ - + diff --git a/sample/accordion.dita b/sample/accordion.dita index 636c6d3..b46f9f9 100644 --- a/sample/accordion.dita +++ b/sample/accordion.dita @@ -26,7 +26,7 @@ -
+
How it works

The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add open="yes" to expand the relevant accordion-item .

-
+
Example

Click the accordions below to expand/collapse the accordion content.

@@ -140,7 +140,7 @@ </bodydiv>
-
+
Flush

Set flush="yes" to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent @@ -183,7 +183,7 @@

-
+
Always open

Set open="yes" to make accordion items stay open when another item is opened.

diff --git a/sample/alerts.dita b/sample/alerts.dita index 8339cfa..edfcacd 100644 --- a/sample/alerts.dita +++ b/sample/alerts.dita @@ -26,7 +26,7 @@ -
+
Example

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight required contextual classes (e.g., set outputclass to @@ -39,67 +39,67 @@ A simple danger alert—check it out! A simple warning alert—check it out! A simple info alert—check it out! - A simple light alert—check it out! - A simple dark alert—check it out! + A simple light alert—check it out! + A simple dark alert—check it out!

Specialization <alert color="primary"> - A simple primary alert—check it out! + A simple primary alert — check it out! </alert> <alert color="secondary"> - A simple secondary alert—check it out! + A simple secondary alert — check it out! </alert> <alert color="success"> - A simple success alert—check it out! + A simple success alert — check it out! </alert> <alert color="danger"> - A simple danger alert—check it out! + A simple danger alert — check it out! </alert> <alert color="warning"> - A simple warning alert—check it out! + A simple warning alert — check it out! </alert> <alert color="info"> - A simple info alert—check it out! + A simple info alert — check it out! </alert> -<alert color="light"> - A simple light alert—check it out! +<alert color="accent"> + A simple accent alert — check it out! </alert> -<alert color="dark"> - A simple dark alert—check it out! +<alert color="inverse"> + A simple inverse alert — check it out! </alert>
<xmlatt>outputclass</xmlatt> - <section outputclass="alert-primary"> - A simple primary alert—check it out! + <section outputclass="alert theme-primary"> + A simple primary alert — check it out! </section> -<section outputclass="alert-secondary"> - A simple secondary alert—check it out! +<section outputclass="alert theme-secondary"> + A simple secondary alert — check it out! </section> -<section outputclass="alert-success"> - A simple success alert—check it out! +<section outputclass="alert theme-success"> + A simple success alert — check it out! </section> -<section outputclass="alert-danger"> - A simple danger alert—check it out! +<section outputclass="alert theme-danger"> + A simple danger alert — check it out! </section> -<section outputclass="alert-warning"> - A simple warning alert—check it out! +<section outputclass="alert theme-warning"> + A simple warning alert — check it out! </section> -<section outputclass="alert-info"> - A simple info alert—check it out! +<section outputclass="alert theme-info"> + A simple info alert — check it out! </section> -<section outputclass="alert-light"> - A simple light alert—check it out! +<section outputclass="alert theme-accent"> + A simple accent alert — check it out! </section> -<section outputclass="alert-dark"> - A simple dark alert—check it out! +<section outputclass="alert theme-inverse"> + A simple inverse alert — check it out! </section>
-
+
Additional content

Alerts can also contain additional HTML elements like headings, paragraphs, icons and links.

@@ -115,7 +115,7 @@
Specialization - <alert color="success"> + <alert color="success" outputclass="vstack"> <title><icon outputclass="bi-emoji-smile" padding="e2"/>Well done!</title> <p> Aww yeah, you successfully read this important alert message. This example text with a @@ -129,7 +129,7 @@
<xmlatt>outputclass</xmlatt> - <section outputclass="alert alert-success"> + <section outputclass="alert theme-success vstack"> <title><i outputclass="bi bi-emoji-smile pe-2"/>Well done!</title> <p> Aww yeah, you successfully read this important alert message. This example text with a @@ -143,7 +143,7 @@
-
+
Notes

DITA note elements are displayed as alerts according to the type attribute. With the exception type="othertype", an icon is added if This is a primary note. This is a secondary note. - This is light note. - This is dark note. + This is light note. + This is dark note.

@@ -212,24 +212,24 @@ <note color="secondary"> This is a secondary note. </note> -<note color="light"> - This is light note. +<note color="accent"> + This is accent note. </note> -<note color="dark"> - This is dark note. +<note color="inverse"> + This is inverse note. </note>
<xmlatt>outputclass</xmlatt> - <note type="note" outputclass="alert-primary"> + <note type="note" outputclass="theme-primary"> This is a primary note.</note> -<note type="note" outputclass="alert-secondary"> +<note type="note" outputclass="theme-secondary"> This is a secondary note.</note> -<note type="note" outputclass="alert-light"> - This is light note. +<note type="note" outputclass="theme-accent"> + This is accent note. </note> -<note type="note" outputclass="alert-dark"> - This is dark note. +<note type="note" outputclass="theme-inverse"> + This is inverse note. </note>
diff --git a/sample/badge.dita b/sample/badge.dita index 29330c6..119b61f 100644 --- a/sample/badge.dita +++ b/sample/badge.dita @@ -23,7 +23,7 @@ -
+
Example

Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of v5, badges no longer have focus or hover styles for links.

@@ -46,11 +46,12 @@
<xmlatt>outputclass</xmlatt> - <title>Example Heading <ph outputclass="bg-secondary">New</ph></title> -<p>Example Text <ph outputclass="bg-secondary">New</ph></p> + <title>Example Heading <ph outputclass="badge theme-primary">New</ph></title> +<p>Example Text <ph outputclass="badge theme-primary">New</ph></p>
-
+
Background colors

Set a background-color with contrasting foreground color with Bootstrap’s text-bg-{color} helpers. Previously it was required to manually pair your choice of Danger Warning Info - Light - Dark + Light + Dark

Specialization - <badge>Primary</badge> + <badge color="primary">Primary</badge> <badge color="secondary">Secondary</badge> <badge color="success">Success</badge> <badge color="danger">Danger</badge> <badge color="warning">Warning</badge> <badge color="info">Info</badge> -<badge color="light">Light</badge> -<badge color="dark">Dark</badge> +<badge color="accent">Accent</badge> +<badge color="inverse">Inverse</badge>
<xmlatt>outputclass</xmlatt> - <ph outputclass="badge text-bg-primary">Primary</ph> -<ph outputclass="badge text-bg-secondary">Secondary</ph> -<ph outputclass="badge text-bg-success">Success</ph> -<ph outputclass="badge text-bg-danger">Danger</ph> -<ph outputclass="badge text-bg-warning">Warning</ph> -<ph outputclass="badge text-bg-info">Info</ph> -<ph outputclass="badge text-bg-light">Light</ph> -<ph outputclass="badge text-bg-dark">Dark</ph> + <ph outputclass="badge theme-primary">Primary</ph> +<ph outputclass="badge theme-secondary">Secondary</ph> +<ph outputclass="badge theme-success">Success</ph> +<ph outputclass="badge theme-danger">Danger</ph> +<ph outputclass="badge theme-warning">Warning</ph> +<ph outputclass="badge theme-info">Info</ph> +<ph outputclass="badge theme-accent">Accent</ph> +<ph outputclass="badge theme-inverse">Inverse</ph>
diff --git a/sample/bootstrap-extension.dita b/sample/bootstrap-extension.dita index 67efbd3..a1264c3 100644 --- a/sample/bootstrap-extension.dita +++ b/sample/bootstrap-extension.dita @@ -33,7 +33,7 @@ -
+
Installing the <term>DITA Bootstrap Extension</term> plug-in

Use the dita command to add the DITA Bootstrap Extension plug-in to your DITA Open Toolkit installation:

diff --git a/sample/bootstrap-table.dita b/sample/bootstrap-table.dita index 35ff72a..158a95a 100644 --- a/sample/bootstrap-table.dita +++ b/sample/bootstrap-table.dita @@ -33,7 +33,7 @@ If you just want to style DITA tables with the standard Bootstrap table styles, you don’t need a separate plug-in. See for details on the output classes that the DITA Bootstrap plug-in supports. -
+
Installing the <term>DITA Bootstrap Table</term> plug-in

Use the dita command to add the DITA Bootstrap Table plug-in to your DITA Open Toolkit installation:

@@ -41,7 +41,7 @@ >install org.dita-bootstrap.table
-
+
Search and Filtering

Add table otherprops="search" to filter the results based on a search term.

@@ -52,7 +52,7 @@ <table otherprops="search"> ...etc </table> -
+
Pagination

Add table otherprops="pagination" to add a pagination footer to a large table.

@@ -63,7 +63,7 @@ <table otherprops="pagination"> ...etc </table> -
+
Sorting

Add table otherprops="sortable" to allow each column to be sorted dynamically.

diff --git a/sample/borders.dita b/sample/borders.dita index 97cb0a2..1656c42 100644 --- a/sample/borders.dita +++ b/sample/borders.dita @@ -47,14 +47,14 @@ <ph outputclass="border-bottom">...</ph> <ph outputclass="border-start">...</ph> -
+
Border Specialization

The border and rounded attributes provide a semantic way to add borders and rounded corners.

-
+
Bordered Section

This section has a border.

@@ -108,7 +108,7 @@ </ul>
-
+
Border Styling

The border attribute also accepts numeric values 1-5 for width. The rounded attribute @@ -203,19 +203,19 @@

Circle - Pill + Pill
Specialization <ph border="yes" rounded="circle" bordercolor="info">Circle</ph> -<ph border="yes" rounded="pill" bordercolor="dark">Pill</ph> +<ph border="yes" rounded="pill" bordercolor="warning">Pill</ph>
<xmlatt>outputclass</xmlatt> <ph outputclass="border rounded-circle border-info">Circle</ph> -<ph outputclass="border rounded-pill border-dark">Pill</ph> +<ph outputclass="border rounded-pill border-warning">Pill</ph>
@@ -252,7 +252,7 @@ and summer’s lease hath all too short a date: - + Animal Gestation @@ -281,7 +281,7 @@ and summer’s lease hath all too short a date:

<codeblock frame="sides">...</codeblock> -<lines frame="topbot" outputclass="bg-secondary-subtle p-3 border rounded">...</lines> +<lines frame="topbot" outputclass="...">...</lines> <table frame="all">...</table> diff --git a/sample/breadcrumb.dita b/sample/breadcrumb.dita index dcfdf47..0140553 100644 --- a/sample/breadcrumb.dita +++ b/sample/breadcrumb.dita @@ -25,7 +25,7 @@ -

+
Adding breadcrumbs

Breadcrumbs are not included by default. You can add a breadcrumb component to each page by setting the parameter --args.breadcrumbs= @@ -35,7 +35,7 @@ --format= \ --args.breadcrumbs=

-
+
Dividers

Dividers are automatically added via CSS. They can be changed by setting the parameter --bootstrap.breadcrumb.divider.

diff --git a/sample/button-group.dita b/sample/button-group.dita index ec2af67..eac4f40 100644 --- a/sample/button-group.dita +++ b/sample/button-group.dita @@ -23,7 +23,7 @@ -
+
Basic example

Wrap a series of buttons with xref outputclass="btn-*" in a div outputclass="btn-group" @@ -40,21 +40,21 @@

Specialization <button-group> - <button href="#">Left</button> - <button href="#">Middle</button> - <button href="#">Right</button> + <button color="primary" href="#">Left</button> + <button color="primary" href="#">Middle</button> + <button color="primary" href="#">Right</button> </button-group>
<xmlatt>outputclass</xmlatt> <div outputclass="btn-group"> - <xref outputclass="btn-primary" href="#">Left</xref> - <xref outputclass="btn-primary" href="#">Middle</xref> - <xref outputclass="btn-primary" href="#">Right</xref> + <xref outputclass="btn theme-primary" href="#">Left</xref> + <xref outputclass="btn theme-primary" href="#">Middle</xref> + <xref outputclass="btn theme-primary" href="#">Right</xref> </div>
-
+
Mixed styles
@@ -76,13 +76,13 @@
<xmlatt>outputclass</xmlatt> <div outputclass="btn-group"> - <xref outputclass="btn-danger" href="#">Left</xref> - <xref outputclass="btn-warning" href="#">Middle</xref> - <xref outputclass="btn-success" href="#">Right</xref> + <xref outputclass="btn theme-danger" href="#">Left</xref> + <xref outputclass="btn theme-warning" href="#">Middle</xref> + <xref outputclass="btn theme-success" href="#">Right</xref> </div>
-
+
Outlined styles
@@ -96,21 +96,21 @@
Specialization <button-group> - <button outline="yes" href="#">Left</button> - <button outline="yes" href="#">Middle</button> - <button outline="yes" href="#">Right</button> + <button color="primary" outline="yes" href="#">Left</button> + <button color="primary" outline="yes" href="#">Middle</button> + <button color="primary" outline="yes" href="#">Right</button> </button-group>
<xmlatt>outputclass</xmlatt> <div outputclass="btn-group"> - <xref outputclass="btn-outline-primary" href="#">Left</xref> - <xref outputclass="btn-outline-primary" href="#">Middle</xref> - <xref outputclass="btn-outline-primary" href="#">Right</xref> + <xref outputclass="btn-outline theme-primary" href="#">Left</xref> + <xref outputclass="btn-outline theme-primary" href="#">Middle</xref> + <xref outputclass="btn-outline theme-primary" href="#">Right</xref> </div>
-
+
Button toolbar

Combine sets of button groups into button toolbars for more complex components.

@@ -137,10 +137,10 @@ Specialization <button-toolbar> <button-group outputclass="me-2"> - <button href="#">1</button> - <button href="#">2</button> - <button href="#">3</button> - <button href="#">4</button> + <button color="primary" href="#">1</button> + <button color="primary" href="#">2</button> + <button color="primary" href="#">3</button> + <button color="primary" href="#">4</button> </button-group> <button-group outputclass="me-2"> <button color="secondary" href="#">5</button> @@ -156,23 +156,23 @@ <xmlatt>outputclass</xmlatt> <div outputclass="btn-toolbar"> <div outputclass="btn-group me-2"> - <xref outputclass="btn-primary" href="#">1</xref> - <xref outputclass="btn-primary" href="#">2</xref> - <xref outputclass="btn-primary" href="#">3</xref> - <xref outputclass="btn-primary" href="#">4</xref> + <xref outputclass="btn theme-primary" href="#">1</xref> + <xref outputclass="btn theme-primary" href="#">2</xref> + <xref outputclass="btn theme-primary" href="#">3</xref> + <xref outputclass="btn theme-primary" href="#">4</xref> </div> <div outputclass="btn-group me-2"> - <xref outputclass="btn-secondary" href="#">5</xref> - <xref outputclass="btn-secondary" href="#">6</xref> - <xref outputclass="btn-secondary" href="#">7</xref> + <xref outputclass="btn theme-secondary" href="#">5</xref> + <xref outputclass="btn theme-secondary" href="#">6</xref> + <xref outputclass="btn theme-secondary" href="#">7</xref> </div> <div outputclass="btn-group me-2"> - <xref outputclass="btn-info" href="#">8</xref> + <xref outputclass="btn theme-info" href="#">8</xref> </div> </div>
-
+
Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally.

@@ -187,17 +187,17 @@
Specialization <button-group vertical="yes"> - <button href="#">Top</button> - <button href="#">Middle</button> - <button href="#">Bottom</button> + <button color="primary" href="#">Top</button> + <button color="primary" href="#">Middle</button> + <button color="primary" href="#">Bottom</button> </button-group>
<xmlatt>outputclass</xmlatt> <div outputclass="btn-group-vertical"> - <xref outputclass="btn-primary" href="#">Top</xref> - <xref outputclass="btn-primary" href="#">Middle</xref> - <xref outputclass="btn-primary" href="#">Bottom</xref> + <xref outputclass="btn theme-primary" href="#">Top</xref> + <xref outputclass="btn theme-primary" href="#">Middle</xref> + <xref outputclass="btn theme-primary" href="#">Bottom</xref> </div>
diff --git a/sample/buttons.dita b/sample/buttons.dita index acad795..fcabaab 100644 --- a/sample/buttons.dita +++ b/sample/buttons.dita @@ -24,7 +24,7 @@ -
+
Example

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

@@ -36,8 +36,8 @@ - - + + @@ -49,23 +49,23 @@ <button href="#" color="danger">Danger</button> <button href="#" color="warning">Warning</button> <button href="#" color="info">Info</button> -<button href="#" color="light">Light</button> -<button href="#" color="dark">Dark</button> +<button href="#" color="accent">Accent</button> +<button href="#" color="inverse">Inverse</button>
<xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-primary">Primary</xref> -<xref href="#" outputclass="btn-secondary">Secondary</xref> -<xref href="#" outputclass="btn-success">Success</xref> -<xref href="#" outputclass="btn-danger">Danger</xref> -<xref href="#" outputclass="btn-warning">Warning</xref> -<xref href="#" outputclass="btn-info">Info</xref> -<xref href="#" outputclass="btn-light">Light</xref> -<xref href="#" outputclass="btn-dark">Dark</xref> + <xref href="#" outputclass="btn theme-primary">Primary</xref> +<xref href="#" outputclass="btn theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn theme-success">Success</xref> +<xref href="#" outputclass="btn theme-danger">Danger</xref> +<xref href="#" outputclass="btn theme-warning">Warning</xref> +<xref href="#" outputclass="btn theme-info">Info</xref> +<xref href="#" outputclass="btn theme-accent">Accent</xref> +<xref href="#" outputclass="btn theme-inverse">Inverse</xref>
-
+
Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the outputclass and a value of btn-outline-* to remove all background images @@ -78,8 +78,8 @@ - - + +

@@ -90,22 +90,22 @@ <button href="#" color="danger" outline="yes">Danger</button> <button href="#" color="warning" outline="yes">Warning</button> <button href="#" color="info" outline="yes">Info</button> -<button href="#" color="light" outline="yes">Light</button> -<button href="#" color="dark" outline="yes">Dark</button> +<button href="#" color="accent" outline="yes">Accent</button> +<button href="#" color="inverse" outline="yes">Inverse</button>
<xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-outline-primary">Primary</xref> -<xref href="#" outputclass="btn-outline-secondary">Secondary</xref> -<xref href="#" outputclass="btn-outline-success">Success</xref> -<xref href="#" outputclass="btn-outline-danger">Danger</xref> -<xref href="#" outputclass="btn-outline-warning">Warning</xref> -<xref href="#" outputclass="btn-outline-info">Info</xref> -<xref href="#" outputclass="btn-outline-light">Light</xref> -<xref href="#" outputclass="btn-outline-dark">Dark</xref> + <xref href="#" outputclass="btn btn-outline theme-primary">Primary</xref> +<xref href="#" outputclass="btn-outline theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn-outline theme-success">Success</xref> +<xref href="#" outputclass="btn-outline theme-danger">Danger</xref> +<xref href="#" outputclass="btn-outline theme-warning">Warning</xref> +<xref href="#" outputclass="btn-outline theme-info">Info</xref> +<xref href="#" outputclass="btn-outline theme-accent">Accent</xref> +<xref href="#" outputclass="btn-outline theme-inverse">Inverse</xref>
-
+
Sizing

Fancy larger or smaller buttons? Use size="large" or size="small" for additional sizes.

@@ -123,8 +123,8 @@
<xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-primary btn-lg">Large button</xref> -<xref href="#" outputclass="btn-secondary btn-lg">Large button</xref> + <xref href="#" outputclass="btn theme-primary btn-lg">Large button</xref> +<xref href="#" outputclass="btn theme-secondary btn-lg">Large button</xref>
@@ -141,8 +141,8 @@
<xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-primary btn-sm">Small button</xref> -<xref href="#" outputclass="btn-secondary btn-sm">Small button</xref> + <xref href="#" outputclass="btn theme-primary btn-sm">Small button</xref> +<xref href="#" outputclass="btn theme-secondary btn-sm">Small button</xref>
diff --git a/sample/card.dita b/sample/card.dita index 45c387e..a9dfdf7 100644 --- a/sample/card.dita +++ b/sample/card.dita @@ -24,14 +24,14 @@ -
+
About

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace Bootstrap 4.0’s panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

-
+
Example

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They @@ -75,7 +75,7 @@ </section>

-
+
Titles, text, and links

Links are added and placed next to each other by altering the outputclass and adding card-link to an xref tag.

@@ -112,7 +112,7 @@ </section>
-
+
Images

The first image within a card places an image to the top of the card @@ -144,7 +144,7 @@ </section>

-
+ -
+
Card Colors

A card can be colorized by adding a color attribute. This applies a contextual background color.

diff --git a/sample/carousel.dita b/sample/carousel.dita index 6a58aa5..87ec7f1 100644 --- a/sample/carousel.dita +++ b/sample/carousel.dita @@ -445,43 +445,29 @@ And, kept unused, the user so destroys it.
Specialization - <carousel> + <carousel fade="yes"> <carousel-item> <image href="..." /> + </carousel-item> + <carousel-item> <image href="..." /> + </carousel-item> + <carousel-item> <image href="..." /> - <grid-row deliveryTarget="html"> - <grid-col colspan="4"> - <p outputclass="text-center">...</p> - </grid-col> - <grid-col colspan="4"> - <p outputclass="text-center">...</p> - </grid-col> - <grid-col colspan="4"> - <p outputclass="text-center">...</p> - </grid-col> - </grid-row> </carousel-item> - ... </carousel>
<xmlatt>outputclass</xmlatt> - <ol outputclass="carousel"> + <ol outputclass="carousel-fade"> <li> <image href="..." /> - <image href="..." /> - <image href="..." /> </li> <li> <image href="..." /> - <image href="..." /> - <image href="..." /> </li> <li> <image href="..." /> - <image href="..." /> - <image href="..." /> </li> </ol>
@@ -509,7 +495,7 @@ And, kept unused, the user so destroys it.
Specialization - <carousel fade="yes"> + <carousel autoplay="no"> <carousel-item> <image href="..." /> </carousel-item> @@ -523,7 +509,7 @@ And, kept unused, the user so destroys it.
<xmlatt>outputclass</xmlatt> - <ol outputclass="carousel-fade"> + <ol outputclass="carousel" otherprops="autoplay(false)"> <li> <image href="..." /> </li> @@ -560,28 +546,28 @@ And, kept unused, the user so destroys it.
Specialization - <carousel autoplay="no"> - <carousel-item> + <carousel> + <carousel-item interval="2000"> <image href="..." /> </carousel-item> - <carousel-item> + <carousel-item interval="1000"> <image href="..." /> </carousel-item> - <carousel-item> + <carousel-item interval="3000"> <image href="..." /> </carousel-item> </carousel>
<xmlatt>outputclass</xmlatt> - <ol outputclass="carousel" otherprops="autoplay(false)"> - <li> + <ol outputclass="carousel"> + <li otherprops="interval(2000)"> <image href="..." /> </li> - <li> + <li otherprops="interval(1000)"> <image href="..." /> </li> - <li> + <li otherprops="interval(3000)"> <image href="..." /> </li> </ol> @@ -608,14 +594,30 @@ And, kept unused, the user so destroys it.
Specialization otherprops="interval(2000)" - <carousel interval="2000"> - ... + <carousel touch="no"> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> </carousel>
<xmlatt>outputclass</xmlatt> - <ol outputclass="carousel" otherprops="interval(2000)"> - ... + <ol outputclass="carousel" otherprops="touch(false)"> + <li> + <image href="..." /> + </li> + <li> + <image href="..." /> + </li> + <li> + <image href="..." /> + </li> </ol>
diff --git a/sample/collapse.dita b/sample/collapse.dita index 1860f2e..4eab3f3 100644 --- a/sample/collapse.dita +++ b/sample/collapse.dita @@ -18,14 +18,14 @@ -
+
How it works

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.

-
+
Example

Below is a collapsed example that is displayed when the button is clicked. Add props="collapse-toggle" to an xref element to associate a button to @@ -70,7 +70,7 @@ </bodydiv>

-
+
Horizontal

The collapse plugin also supports horizontal collapsing. Add outputclass="collapse-horizontal" to transition the width instead of height and set an otherprops="style(width: ...) on the diff --git a/sample/color.dita b/sample/color.dita index 20a50ae..3e05393 100644 --- a/sample/color.dita +++ b/sample/color.dita @@ -17,7 +17,7 @@ -

+
Colors

Colorize text and backgrounds with color utilities. The color attribute provides a semantic way to apply standard Bootstrap color themes.

@@ -30,43 +30,43 @@
.text-bg-danger
.text-bg-warning
.text-bg-info
-
.text-bg-light
-
.text-bg-dark
+
.text-bg-light
+
.text-bg-inverse
Specialization - <div color="primary">.text-bg-primary</div> -<div color="secondary">.text-bg-secondary</div> -<div color="success">.text-bg-success</div> -<div color="danger">.text-bg-danger</div> -<div color="warning">.text-bg-warning</div> -<div color="info">.text-bg-info</div> -<div color="light">.text-bg-light</div> -<div color="dark">.text-bg-dark</div> + <div color="primary">bg-primary</div> +<div color="secondary">bg-secondary</div> +<div color="success">bg-success</div> +<div color="danger">bg-danger</div> +<div color="warning">bg-warning</div> +<div color="info">bg-info</div> +<div color="accent">bg-accent</div> +<div color="inverse">bg-inverse</div>
<xmlatt>outputclass</xmlatt> - <div outputclass="text-bg-primary">.text-bg-primary</div> -<div outputclass="text-bg-secondary">.text-bg-secondary</div> -<div outputclass="text-bg-success">.text-bg-success</div> -<div outputclass="text-bg-danger">.text-bg-danger</div> -<div outputclass="text-bg-warning">.text-bg-warning</div> -<div outputclass="text-bg-info">.text-bg-info</div> -<div outputclass="text-bg-light">.text-bg-light</div> -<div outputclass="text-bg-dark">.text-bg-dark</div> + <div outputclass="bg-primary fg-contrast-primary">bg-primary</div> +<div outputclass="bg-secondary fg-contrast-secondary">bg-secondary</div> +<div outputclass="bg-success fg-contrast-success">bg-success</div> +<div outputclass="bg-danger fg-contrast-danger">bg-danger</div> +<div outputclass="bg-warning fg-contrast-warning">bg-warning</div> +<div outputclass="bg-info fg-contrast-info" >bg-info</div> +<div outputclass="bg-accent fg-contrast-accent">bg-accent</div> +<div outputclass="bg-inverse fg-contrast-inverse">bg-inverse</div>
-
+
Base DITA Elements

Decoration attributes can be applied to many base DITA elements to add background color and contrasting text.

-
+
Section Decoration

This section has a primary color background.

@@ -169,24 +169,24 @@
<xmlatt>outputclass</xmlatt> - <section outputclass="text-bg-primary"> + <section outputclass="bg-primary fg-contrast-primary"> <title>Section Decoration</title> <p>This section has a primary color background.</p> </section> -<div outputclass="text-bg-success p-3"> +<div outputclass="bg-success fg-contrast-success p-3"> <p>This div has a success color background.</p> </div> -<pre outputclass="text-bg-warning"> +<pre outputclass="bg-warning fg-contrast-warning"> This pre has a warning color background. </pre> -<lq outputclass="text-bg-danger p-1"> +<lq outputclass="bg-danger fg-contrast-danger p-1"> ... </lq> -<table outputclass="table-primary p-1 w-100"> +<table outputclass="theme-primary p-1 w-100"> <tgroup cols="2"> <thead> <row> @@ -195,15 +195,15 @@ </row> </thead> <tbody> - <row outputclass="table-info"> + <row outputclass="theme-info"> ... </row> - <row outputclass="table-success"> + <row outputclass="theme-success"> ... </row> <row> <entry>...</entry> - <entry outputclass="table-danger">...</entry> + <entry outputclass="theme-danger">...</entry> </row> <row> <entry>...</entry> @@ -219,7 +219,7 @@
-
+
Specialized Elements

Many specialized components also support the color attribute for consistent theming.

@@ -244,7 +244,7 @@
  • A second item
    • - + @@ -279,7 +279,7 @@ <li>A second item</li> </list-group> -<carousel color="dark" width="50" indicators="yes"> +<carousel color="inverse" width="50" indicators="yes"> <carousel-item> <image href="..."/> </carousel-item> @@ -295,43 +295,43 @@ <xmlatt>outputclass</xmlatt> <img src="..." class="img-thumbnail bg-warning"/> -<section outputclass="card text-bg-success w-50"> +<section outputclass="card theme-success w-50"> ... </section> -<bodydiv outputclass="accordion accordion-info"> +<bodydiv outputclass="accordion theme-info"> ... </bodydiv> -<ul outputclass="list-group list-group-item-danger w-50"> +<ul outputclass="list-group theme-danger w-50"> ... </ul> -<ul outputclass="carousel carousel-dark w-50"> +<ul outputclass="carousel theme-inverse w-50"> ... </ul>
    -
    +
    Text Color

    For text-only colorization, the outputclass attribute remains the primary method.

    -

    .text-primary

    -

    .text-secondary

    -

    .text-success

    -

    .text-danger

    -

    .text-warning

    -

    .text-info

    +

    fg-primary

    +

    fg-secondary

    +

    fg-success

    +

    fg-danger

    +

    fg-warning

    +

    fg-info

     - <p outputclass="text-primary">.text-primary</p> -<p outputclass="text-secondary">.text-secondary</p> -<p outputclass="text-success">.text-success</p> -<p outputclass="text-danger">.text-danger</p> -<p outputclass="text-warning bg-dark">.text-warning</p> -<p outputclass="text-info bg-dark">.text-info</p> + <p outputclass="fg-primary">fg-primary</p> +<p outputclass="fg-secondary">fg-secondary</p> +<p outputclass="fg-success">fg-success</p> +<p outputclass="fg-danger">fg-danger</p> +<p outputclass="fg-warning">fg-warning</p> +<p outputclass="fg-info">fg-info</p> diff --git a/sample/containers.dita b/sample/containers.dita index dd1278a..78b566a 100644 --- a/sample/containers.dita +++ b/sample/containers.dita @@ -22,7 +22,7 @@ -
    +
    How they work

    Containers are the most basic layout element in Bootstrap and are required when using the default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be @@ -33,7 +33,7 @@ , which sets a max-width at each responsive breakpoint

  • - , which is width: 100% until the specified breakpoint + , which is width: 100% until the specified breakpoint
  • , which is width: 100% at all breakpoints @@ -93,7 +93,7 @@ - + 100% @@ -106,7 +106,7 @@ - + 100% @@ -121,7 +121,7 @@ - + 100% @@ -138,7 +138,7 @@ - + 100% @@ -157,7 +157,7 @@ - + 100% @@ -202,7 +202,7 @@ - The DITA Bootstrap plug-in uses the responsive by default to fill + The DITA Bootstrap plug-in uses the responsive by default to fill the viewport width with page content up to the extra extra large breakpoint. At 1400px or wider, content width is constrained to 1320px to ensure lines remain readable.

    To use different size, pass the desired value to the dita command via the diff --git a/sample/dark-mode.dita b/sample/dark-mode.dita index bb4fa4b..df976a2 100644 --- a/sample/dark-mode.dita +++ b/sample/dark-mode.dita @@ -24,7 +24,7 @@ -

    +
    Example

    To add a color mode toggler to the menu bar, add a series of button elements with the attributes data-bs-theme="light" or Getting Started - + @@ -19,7 +19,7 @@ Layout - + @@ -30,7 +30,7 @@ Content - + @@ -41,7 +41,7 @@ Components - + @@ -52,8 +52,8 @@ + - @@ -64,7 +64,7 @@ Utilities - + @@ -75,7 +75,7 @@ Extend - + diff --git a/sample/drawer.dita b/sample/drawer.dita new file mode 100644 index 0000000..d12fe8e --- /dev/null +++ b/sample/drawer.dita @@ -0,0 +1,205 @@ + + + + + Drawer + Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and + Bootstrap’s JavaScript plugin. + + + + Drawer + CSS + outputclass + + section + xref + props + + + + +

    + How it works +

    Drawer is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom + edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, + and data attributes are used to invoke Bootstrap’s JavaScript.

    +
      +
    • Drawer shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they + are separate plugins.
      • +
    • Similarly, some source Sass variables for drawer’s styles and dimensions are inherited from the modal’s + variables.
      • +
    • When shown, drawer includes a default backdrop that can be clicked to hide the drawer.
      • +
    • Similar to modals, only one drawer can be shown at a time.
      • +
    +

    Heads up! Given how CSS handles animations, you cannot use margin or translate in a Bootstrap drawer + element. Instead, use the class as an independent wrapping element.

    +
    +
    + Drawer components +

    Below is a drawer example that is displayed when the button is clicked. Add + props="drawer-toggle" to an xref element to associate a button to + a drawer

    +
    + + + + Drawer +

    Content for the drawer goes here. You can place just about any section elements here.

    +     +     + +
    + Specialization + <button props="drawer-toggle" href="#drawer1"> + Click here +</button> +<drawer id="drawer1" position="start"> + <title>Drawer</title> + <p> + Content for the drawer goes here. You can place just about any section elements here. + </p> +</drawer> +
    +
    + <xmlatt>outputclass</xmlatt> + <xref outputclass="btn-primary" props="drawer-toggle" href="#drawer1"> + Click here +</xref> +<section outputclass="drawer-start" id="drawer1"> + <title>Drawer</title> + <p> + Content for the drawer goes here. You can place just about any section elements here. + </p> +</section> +
    +     +
    + Placement +

    There’s no default placement for drawer components, so you must add one of the modifier outputclasses + below

    +
      +
    • Setting position="start" or outputclass="drawer-start" places drawer on the left of the + viewport (shown above)
      • +
    • Setting position="end" or outputclass="drawer-end" places drawer on the right of the + viewport
      • +
    • Setting position="bottom" or outputclass="drawer-bottom" places drawer on the bottom of + the viewport
      • +
    • Setting position="top" or outputclass="drawer-top" places drawer on the top of + the viewport
      • +
    +
    + + + + Drawer +

    Content for the drawer goes here. You can place just about any section elements here.

    +     +     + +
    + Specialization + <drawer position="end"> + ...etc +</drawer> +
    +
    + <xmlatt>outputclass</xmlatt> + <section outputclass="drawer-end" id="drawer2"> + ...etc +</section> +
    +     + + + + Drawer +

    Content for the drawer goes here. You can place just about any section elements here.

    +     +     + +
    + Specialization + <drawer position="bottom"> + ...etc +</drawer> +
    +
    + <xmlatt>outputclass</xmlatt> + <section outputclass="drawer-bottom" id="drawer3"> + ...etc +</section> +
    +     +
    + Responsive +

    Responsive drawer outputclasses hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, outputclass="drawer-lg" hides content in a drawer below the lg breakpoint, but shows the content above the lg breakpoint.

    +
    + + Resize your browser to show the responsive drawer toggle. + + + Drawer +

    This is content within an outputclass="drawer-lg".

    +     +     +

    Responsive drawer classes are available across for each breakpoint.

    +
      +
    • outputclass="drawer"
      • +
    • outputclass="drawer-sm"
      • +
    • outputclass="drawer-md"
      • +
    • outputclass="drawer-lg"
      • +
    • outputclass="drawer-xl"
      • +
    • outputclass="drawer-xxl"
      • +
    + +
    + Specialization + <note color="info" outputclass="d-none lg:d-block"> + Resize your browser to show the responsive drawer toggle. +</note> +<button outputclass="lg:d-none" props="drawer-toggle" href="#drawer4"> + Toggle drawer +</button> +<drawer outputclass="drawer-lg" id="drawer4"> + <title>Drawer</title> + <p> + This is content within an <xmlatt>outputclass="drawer-lg"</xmlatt>. + </p> +</drawer> +
    +
    + <xmlatt>outputclass</xmlatt> + <note outputclass="d-none lg:d-block"> + Resize your browser to show the responsive drawer toggle. +</note> +<xref outputclass="btn-primary lg:d-none" props="drawer-toggle" href="#drawer4"> + Toggle drawer +</xref> +<section outputclass="drawer-lg" id="drawer4"> + <title>Drawer</title> + <p> + This is content within an <xmlatt>outputclass="drawer-lg"</xmlatt>. + </p> +</section> +
    +     + + diff --git a/sample/extension-points.dita b/sample/extension-points.dita index b98c5c1..483e2f2 100644 --- a/sample/extension-points.dita +++ b/sample/extension-points.dita @@ -26,7 +26,7 @@ -
    +
    Extending Bootstrap

    Bootstrap is designed to be extensible. Additional CSS and JavaScript libraries can be added to the generated HTML pages to allow for new Bootstrap components and extend Bootstrap classes. Similarly, the DITA diff --git a/sample/figures.dita b/sample/figures.dita index 9e6eac4..ee904a1 100644 --- a/sample/figures.dita +++ b/sample/figures.dita @@ -32,7 +32,7 @@ -

    +
    Example

    By default figure elements are styled as shown:

    @@ -46,7 +46,7 @@ <title>A caption for the image.</title> <image href="..."/> </fig> -
    +
    Aligning text

    The figure’s caption can be aligned using the Bootstrap text utilities.

    @@ -62,7 +62,7 @@ <image href="..."/> </fig> -
    +
    Adding borders

    Use the DITA frame attribute to add borders to a fig.

    diff --git a/sample/grid.dita b/sample/grid.dita index 3b005bf..05efc60 100644 --- a/sample/grid.dita +++ b/sample/grid.dita @@ -25,7 +25,7 @@ -
    +
    Example

    Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth explanation for how the grid system @@ -63,19 +63,19 @@

    <xmlatt>outputclass</xmlatt> <bodydiv outputclass="row"> - <bodydiv outputclass="col-sm-3"> + <bodydiv outputclass="sm:col-3"> <p>One of three columns</p> </bodydiv> - <bodydiv outputclass="col-sm-3"> + <bodydiv outputclass="sm:col-3"> <p>One of three columns</p> </bodydiv> - <bodydiv outputclass="col-sm-3"> + <bodydiv outputclass="sm:col-3"> <p>One of three columns</p> </bodydiv> </bodydiv>
    -
    +
    Equal-width

    For example, here are two grid layouts that apply to every device and viewport, from xs to xxl. Add any number of unit-less classes for each breakpoint you need and every column will diff --git a/sample/icons.dita b/sample/icons.dita index dc4c52f..4db3d6c 100644 --- a/sample/icons.dita +++ b/sample/icons.dita @@ -19,7 +19,7 @@ -

    +
    Bootstrap Icons

    Bootstrap Icons is a growing @@ -28,7 +28,7 @@ >Link to the default Bootstrap Icons CDN set is included by default.

    -
    +
    Example

    Icon fonts with classes for every icon are included in Bootstrap Icons. Include the icon web fonts in your page via CSS, then reference the class names as needed in your DITA (e.g., icon @@ -87,12 +87,12 @@

    - + Light link

    - + Dark link

    @@ -118,42 +118,40 @@ <xref color="info" href="#"> <icon outputclass="bi-link"/> Info link </xref> -<xref color="light" href="#"> - <icon outputclass="bi-link"/> Light link +<xref color="accent" href="#"> + <icon outputclass="bi-link"/> Accent link </xref> -<xref color="dark" href="#"> - <icon outputclass="bi-link"/> Dark link +<xref color="inverse" href="#"> + <icon outputclass="bi-link"/> Inverse link </xref>
    <xmlatt>outputclass</xmlatt> - <xref outputclass="link-primary" href="#"> + <xref outputclass="link theme-primary" href="#"> <i outputclass="bi-link"/> Primary link </xref> -<xref outputclass="link-secondary" href="#"> +<xref outputclass="link theme-secondary" href="#"> <i outputclass="bi-link"/> Secondary link </xref> -<xref outputclass="link-success" href="#"> +<xref outputclass="link theme-success" href="#"> <i outputclass="bi-link"/> Success link </xref> -<xref outputclass="link-danger" href="#"> +<xref outputclass="link theme-danger" href="#"> <i outputclass="bi-link"/> Danger link </xref> -<xref outputclass="link-warning" href="#"> +<xref outputclass="link theme-warning" href="#"> <i outputclass="bi-link"/> Warning link </xref> -<xref outputclass="link-info" href="#"> +<xref outputclass="link theme-info" href="#"> <i outputclass="bi-link"/> Info link </xref> -<xref outputclass="link-light" href="#"> - <i outputclass="bi-link"/> Light link +<xref outputclass="link theme-accent" href="#"> + <i outputclass="bi-link"/> Accent link </xref> -<xref outputclass="link-dark" href="#"> - <i outputclass="bi-link"/> Dark link +<xref outputclass="link theme-inverse" href="#"> + <i outputclass="bi-link"/> Inverse link </xref> -<xref outputclass="link-body-emphasis" href="#"> - <i outputclass="bi-link"/> Emphasis link -</xref> +

    Icons can also be placed within buttons as shown:

    @@ -189,22 +187,22 @@
    <xmlatt>outputclass</xmlatt> - <xref outputclass="btn-primary btn-floating m-1" href="#"> + <xref outputclass="btn theme-primary btn-floating m-1" href="#"> <i outputclass="bi-arrow-down-square-fill"/> </xref> -<xref outputclass="btn-primary btn-floating m-1" href="#"> +<xref outputclass="btn theme-primary btn-floating m-1" href="#"> <i outputclass="bi-chat-left-quote-fill"/> </xref> -<xref outputclass="btn-primary btn-floating m-1" href="#"> +<xref outputclass="btn theme-primary btn-floating m-1" href="#"> <i outputclass="bi-speedometer"/> </xref> -<xref outputclass="btn-primary btn-floating m-1" href="#"> +<xref outputclass="btn theme-primary btn-floating m-1" href="#"> <i outputclass="bi-camera-fill"/> </xref> -<xref outputclass="btn-primary btn-floating m-1" href="#"> +<xref outputclass="btn theme-primary btn-floating m-1" href="#"> <i outputclass="bi-link"/> </xref> -<xref outputclass="btn-primary btn-floating m-1" href="#"> +<xref outputclass="btn theme-primary btn-floating m-1" href="#"> <i outputclass="bi-share-fill"/> </xref>
    @@ -235,7 +233,7 @@ </topicref> ... </chapter> -
    +
    Installing other icons

    Other icon sets such as Font Awesome @@ -254,7 +252,7 @@ --icons.include= \ --icons.cdn.path=path/to/icon-cdn-header.xml

    -
    +
    Excluding icons --icons.cdn.path --icons.include diff --git a/sample/images.dita b/sample/images.dita index a2dea06..7c3afd5 100644 --- a/sample/images.dita +++ b/sample/images.dita @@ -25,7 +25,7 @@ -
    +
    Responsive images

    Images in DITA Bootstrap are made responsive with scalefit="yes". This applies max-width: 100%; and height: auto; to the image so that it scales with the @@ -35,7 +35,7 @@ <image scalefit="yes" href="..." /> -

    +
    Image thumbnails

    In addition to Bootstrap’s border-radius @@ -55,7 +55,7 @@ <image outputclass="img-thumbnail" href="..." />

    -
    +
    Separate images for dark and light mode

    Use the outputclass="d-auto", outputclass="d-light", and outputclass="d-dark" attributes on image elements @@ -96,7 +96,7 @@ </fig>

    -
    +
    Support Lazy Loading

    Use the loading="lazy" attribute on image elements to wait until an image is on screen before loading. @@ -112,7 +112,7 @@ <image otherprops="loading(lazy)" href="..."/>

    -
    +
    Support HTML <xmlelement>picture</xmlelement> element

    Use the specialized picture element holding multiple image elements to display different images on diff --git a/sample/index.dita b/sample/index.dita index 09e1613..293685b 100644 --- a/sample/index.dita +++ b/sample/index.dita @@ -26,7 +26,7 @@ -

    +
    Installing

    Use the dita command to add the plug-ins to your DITA Open Toolkit installation:

    @@ -132,7 +132,7 @@ -
    +
    Using
    @@ -161,7 +161,7 @@ >--input=path/to/your.ditamap --format=pdf-bootstrap -
    +
    Bootswatch themes --bootstrap.theme

    Alternate Bootstrap themes can be downloaded directly from @@ -542,7 +542,7 @@ dita-bootstrap.github.io.

    -
    +
    Custom CSS --args.css --args.copycss @@ -570,7 +570,7 @@ scope="external" >dita-bootstrap.sass plug-in.
    -
    +
    Customizing headers, footers and sidebars --args.hdr --args.ftr @@ -676,7 +676,7 @@ scope="external" >dita-bootstrap.github.io/dita-bootstrap.
    -
    +
    Common Bootstrap utility classes --bootstrap.css.shortdesc --bootstrap.css.codeblock @@ -951,7 +951,7 @@
    -
    +
    Bootstrap icons for DITA notes --bootstrap.icon.note --bootstrap.icon.attention @@ -1066,7 +1066,7 @@
    -
    +
    Optional elements --args.breadcrumbs --icons.include diff --git a/sample/list-group.dita b/sample/list-group.dita index 1eb7840..acc9364 100644 --- a/sample/list-group.dita +++ b/sample/list-group.dita @@ -26,7 +26,7 @@ -
    +
    Basic example

    The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

    @@ -62,7 +62,7 @@ </ul>
    -
    +
    Compacted list group

    Add compact="yes" to reduce the padding of list items

    @@ -87,7 +87,7 @@ </ul>
    -
    +
    Expanded list group

    Add compact="no" to increase the padding of list items

    @@ -112,7 +112,7 @@ </ul>
    -
    +
    Flush

    Add a flush="yes" to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

    diff --git a/sample/nav.dita b/sample/nav.dita index 48319c1..b8bf9ae 100644 --- a/sample/nav.dita +++ b/sample/nav.dita @@ -25,7 +25,7 @@ -
    + -
    + -
    +
    Top bar

    A collapsible menu placed above the main menu can be included by adding the --bootstrap.topbar.hdr parameter to the @@ -204,7 +204,7 @@ scope="external" >custom header.

    -
    +
    Dividers

    - - - - Offcanvas - Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and - Bootstrap’s JavaScript plugin. - - - - Offcanvas - CSS - outputclass - - section - xref - props - - - - -

    - How it works -

    Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom - edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, - and data attributes are used to invoke Bootstrap’s JavaScript.

    -
      -
    • Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they - are separate plugins.
      • -
    • Similarly, some source Sass variables for offcanvas’s styles and dimensions are inherited from the modal’s - variables.
      • -
    • When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
      • -
    • Similar to modals, only one offcanvas can be shown at a time.
      • -
    -

    Heads up! Given how CSS handles animations, you cannot use margin or translate in a Bootstrap offcanvas - element. Instead, use the class as an independent wrapping element.

    -
    -
    - Offcanvas components -

    Below is an offcanvas example that is displayed when the button is clicked. Add - props="offcanvas-toggle" to an xref element to associate a button to - an offcanvas

    -
    - - - - Offcanvas -

    Content for the offcanvas goes here. You can place just about any section elements here.

    -     -     - -
    - Specialization - <button props="offcanvas-toggle" href="#offcanvas1"> - Click here -</button> -<offcanvas id="offcanvas1" position="start"> - <title>Offcanvas</title> - <p> - Content for the offcanvas goes here. You can place just about any section elements here. - </p> -</offcanvas> -
    -
    - <xmlatt>outputclass</xmlatt> - <xref outputclass="btn-primary" props="offcanvas-toggle" href="#offcanvas1"> - Click here -</xref> -<section outputclass="offcanvas-start" id="offcanvas1"> - <title>Offcanvas</title> - <p> - Content for the offcanvas goes here. You can place just about any section elements here. - </p> -</section> -
    -     -
    - Placement -

    There’s no default placement for offcanvas components, so you must add one of the modifier outputclasses - below

    -
      -
    • Setting position="start" or outputclass="offcanvas-start" places offcanvas on the left of the - viewport (shown above)
      • -
    • Setting position="end" or outputclass="offcanvas-end" places offcanvas on the right of the - viewport
      • -
    • Setting position="bottom" or outputclass="offcanvas-bottom" places offcanvas on the bottom of - the viewport
      • -
    • Setting position="top" or outputclass="offcanvas-top" places offcanvas on the top of - the viewport
      • -
    -
    - - - - Offcanvas -

    Content for the offcanvas goes here. You can place just about any section elements here.

    -     -     - -
    - Specialization - <offcanvas position="end"> - ...etc -</offcanvas> -
    -
    - <xmlatt>outputclass</xmlatt> - <section outputclass="offcanvas-end" id="offcanvas2"> - ...etc -</section> -
    -     - - - - Offcanvas -

    Content for the offcanvas goes here. You can place just about any section elements here.

    -     -     - -
    - Specialization - <offcanvas position="bottom"> - ...etc -</offcanvas> -
    -
    - <xmlatt>outputclass</xmlatt> - <section outputclass="offcanvas-bottom" id="offcanvas3"> - ...etc -</section> -
    -     -
    - Responsive -

    Responsive offcanvas outputclasses hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, outputclass="offcanvas-lg" hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.

    -
    - - Resize your browser to show the responsive offcanvas toggle. - - - Offcanvas -

    This is content within an outputclass="offcanvas-lg".

    -     -     -

    Responsive offcanvas classes are available across for each breakpoint.

    -
      -
    • outputclass="offcanvas"
      • -
    • outputclass="offcanvas-sm"
      • -
    • outputclass="offcanvas-md"
      • -
    • outputclass="offcanvas-lg"
      • -
    • outputclass="offcanvas-xl"
      • -
    • outputclass="offcanvas-xxl"
      • -
    - -
    - Specialization - <note color="info" outputclass="d-none d-lg-block"> - Resize your browser to show the responsive offcanvas toggle. -</note> -<button outputclass="d-lg-none" props="offcanvas-toggle" href="#offcanvas4"> - Toggle offcanvas -</button> -<offcanvas outputclass="offcanvas-lg" id="offcanvas4"> - <title>Offcanvas</title> - <p> - This is content within an <xmlatt>outputclass="offcanvas-lg"</xmlatt>. - </p> -</offcanvas> -
    -
    - <xmlatt>outputclass</xmlatt> - <note outputclass="alert-info d-none d-lg-block"> - Resize your browser to show the responsive offcanvas toggle. -</note> -<xref outputclass="btn-primary d-lg-none" props="offcanvas-toggle" href="#offcanvas4"> - Toggle offcanvas -</xref> -<section outputclass="offcanvas-lg" id="offcanvas4"> - <title>Offcanvas</title> - <p> - This is content within an <xmlatt>outputclass="offcanvas-lg"</xmlatt>. - </p> -</section> -
    -     - - diff --git a/sample/offline.dita b/sample/offline.dita index b5e68b3..855982c 100644 --- a/sample/offline.dita +++ b/sample/offline.dita @@ -30,7 +30,7 @@ >This offline approach deliberately avoids the use of online CDNs and minimises the opportunity for browsers to cache files, and therefore is not recommended for production of documents placed online. -
    +
    Procedure
    1. @@ -130,7 +130,7 @@
    -
    +
    Results

    The plug-in directory has the following layout and files:

    com.example.bootstrap-offline @@ -141,7 +141,7 @@ └── process_offline.xml
    -
    +
    What to do next
    1. Run dita diff --git a/sample/pagination.dita b/sample/pagination.dita index f808baf..783ad4e 100644 --- a/sample/pagination.dita +++ b/sample/pagination.dita @@ -85,7 +85,7 @@ </section>
    -
    +
    Sizing

    Fancy larger or smaller pagination? Use size="large" or size="small" for additional sizes.

    @@ -190,7 +190,7 @@ </section>
    -
    +
    Alignment

    Change the alignment of pagination component by appending Bootstrap -

    +
    Overview

    Things to know when using the tooltip plugin:

      @@ -46,7 +46,7 @@
    -
    +
    Examples

    Keep reading to see how popovers work with some examples.

    @@ -75,7 +75,7 @@
    -
    +
    Four directions

    Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL. To enable popovers, add @@ -133,7 +133,7 @@ </xref>

    -
    +
    Custom popovers

    You can customize the appearance of popovers using CSS variables. We set a custom class with -

    +
    Loading the Right-to-Left stylesheet

    By default the Bootstrap plugin loads standard left-to-right CSS. To enable support for right-to-left languages, DITA-OT must load the RTL version of the Bootstrap CSS. This is done automatically if the @@ -34,7 +34,7 @@ --format= \ --bidi.include=

    -
    +
    Using LTR and RTL languages in the same topic

    The overall layout is always defined by the --defaultLanguage parameter.

    To render an article as RTL across the page, set the topic xml:lang=".." to an RTL diff --git a/sample/sass.dita b/sample/sass.dita index 2ff2a11..6419871 100644 --- a/sample/sass.dita +++ b/sample/sass.dita @@ -27,7 +27,7 @@

    This approach allows you to modify additional aspects of Bootstrap’s default presentation, beyond what you can do with CSS alone.

    -
    +
    Installing

    Use the dita command to add the required plug-ins to your DITA Open Toolkit installation:

    @@ -40,7 +40,7 @@ successfully. To download and install a copy, follow the instructions for your operating system on the download page.
    -
    +
    Generating a CSS theme from Sass

    To generate a CSS theme from your custom Sass source files, follow the instructions in the dita-bootstrap.sass/sass/index.html file in a web browser.

    -
    +
    Using the generated theme

    To use a pregenerated Sass theme as CSS in the HTML Bootstrap output, run the transformation and pass the bootstrap.sass parameter to the dita diff --git a/sample/scrollspy.dita b/sample/scrollspy.dita index 3469001..bd95a1e 100644 --- a/sample/scrollspy.dita +++ b/sample/scrollspy.dita @@ -109,9 +109,9 @@

    Omit the id to ignore a section, or wrap the section in a bodydiv element. Any offcanvas components are ignored automatically. + >drawer components are ignored automatically.

    <bodydiv> <section id="section-1"> diff --git a/sample/search-box.dita b/sample/search-box.dita index b1da45f..5149026 100644 --- a/sample/search-box.dita +++ b/sample/search-box.dita @@ -28,7 +28,7 @@ -
    +
    Adding a search function

    Search boxes are not included by default. You must first install another plug-in which indexes the full DITA text. Since multiple search engines exist, search is @@ -43,7 +43,7 @@ search to other search engines.

    -
    +
    Installing the <term>DITA Bootstrap Lunr Search</term> plug-in

    Use the dita command to add the DITA Bootstrap Lunr Search plug-in to your DITA Open Toolkit installation:

    @@ -70,7 +70,7 @@

    -
    +
    Using

    To run, use the transformation and pass the --args.hdr parameter to the dita @@ -81,7 +81,7 @@ --args.hdr=path/to/your-header.xml

    -
    +
    Sample header navigation bars

    To add a search box to the menu bar, add a form class="search-box" element with an input type="search" as shown here.

    diff --git a/sample/shadows.dita b/sample/shadows.dita index 8b64787..682f599 100644 --- a/sample/shadows.dita +++ b/sample/shadows.dita @@ -17,7 +17,7 @@ -
    +
    Shadow Utilities

    Bootstrap provides utilities for adding depth with text-bg colors and box-shadows. The shadow attribute can be set to yes, sm, lg or @@ -27,62 +27,62 @@

    -
    No shadow
    -
    Small shadow
    -
    Regular shadow
    -
    Larger shadow
    +
    No shadow
    +
    Small shadow
    +
    Regular shadow
    +
    Larger shadow
    Specialization - <div shadow="none" margin="3" padding="3" color="light">No shadow</div> -<div shadow="sm" margin="3" padding="3" color="light">Small shadow</div> -<div shadow="yes" margin="3" padding="3" color="light">Regular shadow</div> -<div shadow="lg" margin="3" padding="3" color="light">Larger shadow</div> + <div shadow="none" margin="3" padding="3" border="1">No shadow</div> +<div shadow="sm" margin="3" padding="3" border="1">Small shadow</div> +<div shadow="yes" margin="3" padding="3" border="1">Regular shadow</div> +<div shadow="lg" margin="3" padding="3" border="1">Larger shadow</div>
    <xmlatt>outputclass</xmlatt> - <div outputclass="shadow-none m-3 p-3 text-bg-light">No shadow</div> -<div outputclass="shadow-sm m-3 p-3 text-bg-light">Small shadow</div> -<div outputclass="shadow m-3 p-3 text-bg-light">Regular shadow</div> -<div outputclass="shadow-lg m-3 p-3 text-bg-light">Larger shadow</div> + <div outputclass="shadow-none m-3 p-3 border">No shadow</div> +<div outputclass="shadow-sm m-3 p-3 border">Small shadow</div> +<div outputclass="shadow m-3 p-3 border">Regular shadow</div> +<div outputclass="shadow-lg m-3 p-3 border">Larger shadow</div>
    -
    +
    Applied Shadow

    Shadows can be applied to complex elements as follow:

    - + Shadowed Card

    This card has a large shadow.

     - Alert with small shadow + Alert with small shadow
    Specialization - <card shadow="lg" margin="3" color="light"> + <card shadow="lg" margin="3" color="accent"> <title>Shadowed Card</title> <p>This card has a large shadow.</p> </card> -<alert shadow="sm" color="light">Alert with small shadow</alert> +<alert shadow="sm" color="accent">Alert with small shadow</alert>
    <xmlatt>outputclass</xmlatt> - <section outputclass="card shadow-lg m-3 text-bg-light"> + <section outputclass="card shadow-lg m-3 bg-subtle-accent"> <div outputclass="card-body"> <div outputclass="card-title h5">Shadowed Card</div> <p outputclass="card-text">This card has a large shadow.</p> </div> </section> -<div outputclass="alert alert-light shadow-sm">Alert with small shadow</div> +<div outputclass="alert theme-accent m-3 shadow-sm">Alert with small shadow</div>
    diff --git a/sample/spacing.dita b/sample/spacing.dita index 51c3ec2..ceb6894 100644 --- a/sample/spacing.dita +++ b/sample/spacing.dita @@ -20,7 +20,7 @@ -
    +
    Margin

    The margin attribute controls the distance between elements, supporting values from 0 to 5 and Margin 3

    Margin 4
    Margin 5
    -
    Margin Auto
    +
    Margin Auto
    @@ -50,17 +50,17 @@
    <xmlatt>outputclass</xmlatt> - <div outputclass="text-bg-primary m-0 p-2">Margin 0</div> -<div outputclass="text-bg-secondary m-1 p-2">Margin 1</div> -<div outputclass="text-bg-success m-2 p-2">Margin 2</div> -<div outputclass="text-bg-danger m-3 p-2">Margin 3</div> -<div outputclass="text-bg-warning m-4 p-2">Margin 4</div> -<div outputclass="text-bg-info m-5 p-2">Margin 5</div> -<div outputclass="text-bg-light m-auto p-2 w-50">Margin Auto</div> + <div outputclass="bg-primary fg-contrast-primary m-0 p-2">Margin 0</div> +<div outputclass="bg-secondary fg-contrast-secondary m-1 p-2">Margin 1</div> +<div outputclass="bg-success fg-contrast-success m-2 p-2">Margin 2</div> +<div outputclass="bg-danger fg-contrast-danger m-3 p-2">Margin 3</div> +<div outputclass="bg-warning fg-contrast-warning m-4 p-2">Margin 4</div> +<div outputclass="bg-info fg-contrast-info m-5 p-2">Margin 5</div> +<div outputclass="bg-accent fg-contrast-accent m-auto p-2 w-50">Margin Auto</div>
    -
    +
    Padding

    The padding attribute controls the internal spacing of an element, supporting values from 0 to 5.

    @@ -70,23 +70,23 @@
    Padding 0
    Padding 1
    Padding 2
    Padding 3
    Padding 4
    Padding 5
    @@ -102,16 +102,16 @@
    <xmlatt>outputclass</xmlatt> - <div outputclass="text-bg-primary p-0">Padding 0</div> -<div outputclass="text-bg-secondary p-1 m-1">Padding 1</div> -<div outputclass="text-bg-success p-2 m-1">Padding 2</div> -<div outputclass="text-bg-danger p-3 m-1">Padding 3</div> -<div outputclass="text-bg-warning p-4 m-1">Padding 4</div> -<div outputclass="text-bg-info p-5 m-1">Padding 5</div> + <div outputclass="bg-primary p-0">Padding 0</div> +<div outputclass="bg-secondary p-1 m-1">Padding 1</div> +<div outputclass="bg-success p-2 m-1">Padding 2</div> +<div outputclass="bg-danger p-3 m-1">Padding 3</div> +<div outputclass="bg-warning p-4 m-1">Padding 4</div> +<div outputclass="bg-info p-5 m-1">Padding 5</div>
    -
    +
    Directional Spacing

    The margin and padding attributes also support directional spacing using a prefix:

    @@ -131,11 +131,11 @@
    Margin Horizontal 3
    Padding Vertical 5
    Padding Start 3, End 1
    @@ -149,10 +149,10 @@
    <xmlatt>outputclass</xmlatt> - <div outputclass="text-bg-primary mt-5 mb-0">Margin Top 5, Bottom 0</div> -<div outputclass="text-bg-secondary mx-3">Margin Horizontal 3</div> -<div outputclass="text-bg-success py-5">Padding Vertical 5</div> -<div outputclass="text-bg-danger ps-3 pe-1">Padding Start 3, End 1</div> + <div outputclass="bg-primary mt-5 mb-0">Margin Top 5, Bottom 0</div> +<div outputclass="bg-secondary mx-3">Margin Horizontal 3</div> +<div outputclass="bg-success py-5">Padding Vertical 5</div> +<div outputclass="bg-danger ps-3 pe-1">Padding Start 3, End 1</div>
    diff --git a/sample/tables.dita b/sample/tables.dita index b9351da..bcc9c0c 100644 --- a/sample/tables.dita +++ b/sample/tables.dita @@ -25,7 +25,7 @@ -
    +
    Overview

    Due to the widespread use of table elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are opt-in. Extend with optional modifier output classes or custom styles. @@ -106,7 +106,7 @@ </table>

    -
    +
    Variants

    Use contextual classes to color tables, table rows or individual cells.

    @@ -175,7 +175,7 @@
    <xmlatt>outputclass</xmlatt> - <table outputclass="table-primary p-1 w-100"> + <table outputclass="theme-primary p-1 w-100"> <tgroup cols="2"> <thead> <row> @@ -184,17 +184,17 @@ </row> </thead> <tbody> - <row outputclass="table-info"> + <row outputclass="theme-info"> <entry>Elephant (African and Asian)</entry> <entry>19-22 months</entry> </row> - <row outputclass="table-success"> + <row outputclass="theme-success"> <entry>Giraffe</entry> <entry>15 months</entry> </row> <row> <entry>Rhinoceros</entry> - <entry outputclass="table-danger">14-16 months</entry> + <entry outputclass="theme-danger">14-16 months</entry> </row> <row> <entry>Hippopotamus</entry> @@ -205,7 +205,7 @@ </table>
    -
    +
    Striped rows

    Use striped="yes" to add zebra-striping to any table row within the tbody.

    @@ -256,7 +256,7 @@ </table>
    -
    +
    Striped columns

    Use striped-columns="yes" to add zebra-striping to any table column within the tbody.

    @@ -307,7 +307,7 @@ </table>
    -
    +
    Bordered tables

    Add rowsep="1" and colsep="1" for borders on all sides of the table and cells.

    @@ -358,7 +358,7 @@ </table>
    -
    +
    Tables without borders

    Add rowsep="0" and colsep="0" for a table without borders.

    @@ -408,7 +408,7 @@ </table>
    -
    +
    Small tables

    Add compact="yes" to make any table more compact by cutting all cell padding in half.

    @@ -459,7 +459,7 @@ </table>
    -
    +
    Table group dividers

    Add a thicker border, darker between table groups—thead and tbody, with divider="yes" on the table.

    @@ -513,7 +513,7 @@ </tbody>
    -
    +
    Vertical alignment

    Table cells of thead are always vertical aligned to the bottom. Table cells in

    -
    +
    Table head -

    Similar to tables and dark tables, use the modifier color="light" or - color="dark" to make thead elements appear light or dark +

    Similar to tables and dark tables, use the modifier color="accent" or + color="inverse" to make thead elements appear light or dark gray.

    @@ -636,7 +636,7 @@ - + Animal Gestation @@ -668,7 +668,7 @@ Specialization <table> <tgroup> - <thead color="light"> + <thead color="secondary"> ...etc </thead> </tgroup> @@ -678,7 +678,7 @@ <xmlatt>outputclass</xmlatt> <table> <tgroup> - <thead outputclass="table-light"> + <thead outputclass="theme-secondary"> ...etc </thead> </tgroup> @@ -690,7 +690,7 @@ - + Animal Gestation @@ -722,7 +722,7 @@ Specialization <table> <tgroup> - <thead color="dark"> + <thead color="inverse"> ...etc </thead> </tgroup> @@ -732,7 +732,7 @@ <xmlatt>outputclass</xmlatt> <table> <tgroup> - <thead outputclass="table-dark"> + <thead outputclass="theme-inverse"> ...etc </thead> </tgroup> diff --git a/sample/tabs.dita b/sample/tabs.dita index 4aeedc5..e904bc1 100644 --- a/sample/tabs.dita +++ b/sample/tabs.dita @@ -25,7 +25,7 @@ -
    +
    Basic example

    The following example shows a simple tabbed dialog using a tabbed-dialog style="tabs" element containing a series of section elements diff --git a/sample/tooltips.dita b/sample/tooltips.dita index 3a9cffd..0220ec5 100644 --- a/sample/tooltips.dita +++ b/sample/tooltips.dita @@ -26,7 +26,7 @@ -

    +
    Overview

    Things to know when using the tooltip plugin:

      @@ -43,7 +43,7 @@
    -
    +
    Examples

    Hover over the links below to see tooltips:

    @@ -127,19 +127,19 @@
    Specialization <tooltip outputclass="btn-secondary"> - <desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> - Tooltip with embedded DITA +<desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> +Tooltip with embedded DITA </tooltip>
    <xmlatt>outputclass</xmlatt> <xref href="#" outputclass="btn-secondary tooltip-top"> - <desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> - Tooltip with embedded DITA +<desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> +Tooltip with embedded DITA </xref>
    -
    +
    Custom tooltips

    You can customize the appearance of tooltips using CSS variables. We set a custom class with <data name="class">custom-tooltip<data> to scope our custom appearance and use it to override a local CSS variable.

    diff --git a/sample/typography.dita b/sample/typography.dita index 4fc5fbf..a7b4112 100644 --- a/sample/typography.dita +++ b/sample/typography.dita @@ -23,7 +23,7 @@ -
    +
    Headings

    All HTML headings, h1 through h6, are available. outputclass="h1" through outputclass="h6" are also available, for when you @@ -43,7 +43,7 @@ <title outputclass="h4">h4. Bootstrap heading</title> <title outputclass="h5">h5. Bootstrap heading</title> <title outputclass="h6">h6. Bootstrap heading</title> -

    +
    Customizing headings

    Annotate a ph with an outputclass to recreate the small secondary heading text from Bootstrap 3.

    @@ -55,37 +55,38 @@ <title>Fancy display heading <ph outputclass="small text-body-secondary">with faded secondary text</ph></title> -
    +
    Display headings

    Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading — a larger, slightly more opinionated heading style.

    -

    Display 1

    -

    Display 2

    -

    Display 3

    -

    Display 4

    -

    Display 5

    -

    Display 6

    +

    Display 1

    +

    Display 2

    +

    Display 3

    +

    Display 4

    +

    Display 5

    +

    Display 6

     - <title outputclass="display-1">Display 1</title> -<title outputclass="display-2">Display 2</title> -<title outputclass="display-3">Display 3</title> -<title outputclass="display-4">Display 4</title> -<title outputclass="display-5">Display 5</title> -<title outputclass="display-6">Display 6</title> -
    + <title outputclass="fw-light fs-6xl">Display 1</title> +<title outputclass="fw-light fs-5xl">Display 2</title> +<title outputclass="fw-light fs-4xl">Display 3</title> +<title outputclass="fw-light fs-3xl">Display 4</title> +<title outputclass="fw-light fs-2xl">Display 5</title> +<title outputclass="fw-light fs-xl">Display 6</title> +
    Lead -

    Make a paragraph stand out by adding outputclass="lead" — this is automatically added to +

    Make a paragraph stand out by adding outputclass="fw-light fs-lg" — this is automatically added to shortdesc elements.

    -

    This is a lead paragraph. It stands out from regular paragraphs.

    +

    This is a lead paragraph. It stands out from regular paragraphs.

     - <p outputclass="lead"> + <p outputclass="fw-light fs-lg"> This is a lead paragraph. It stands out from regular paragraphs. </p> -
    +
    Inline text elements

    Styling for common inline HTML5 elements.

    @@ -107,13 +108,13 @@ is meant to be treated as fine print.</p> <p><b>This line rendered as bold text.</b></p> <p><i>This line rendered as italicized text.</i></p> -
    +
    Text utilities

    Change text alignment, transform, style, weight, line-height, decoration and color with Bootstrap’s text and color utilities.

    -
    +
    Abbreviations

    Stylized implementation of HTML’s abbr element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide @@ -135,7 +136,7 @@ <ph outputclass="initialism" otherprops="title(HyperText Markup Language)">HTML</ph> </p> -

    +
    Blockquotes

    For quoting blocks of content from another source within your document, use the DITA lq element, it is styled automatically.

    @@ -148,7 +149,7 @@ <lq> <p>A well-known quote, contained in a blockquote element.</p> </lq> -
    +
    Naming a source

    The HTML spec requires that blockquote attribution be placed outside the rendered HTML blockquote element. When providing attribution, wrap your the DITA @@ -170,7 +171,7 @@ <p>A well-known quote, contained in a blockquote element.</p> </lq> </fig> -

    +
    Alignment

    Use text utilities such as outputclass="text-center" as needed to change the alignment of your blockquote.

    @@ -204,10 +205,10 @@ </lq> </fig> -
    +
    Lists
    -
    +
    Unstyled

    Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the outputclass="list-unstyled" for @@ -243,7 +244,7 @@ </li> <li>This may still come in handy in some situations.</li> </ul> -

    +
    Inline

    Remove a list’s bullets and apply some light margin using the outputclass="list-inline" attribute. @@ -261,7 +262,7 @@ <li>And another one.</li> <li>But they're displayed inline.</li> </ul> -

    +
    Description list alignment

    Terms and descriptions align horizontally using Bootstrap’s grid system of predefined classes. For longer terms, text is truncated with an ellipsis.

    @@ -333,7 +334,7 @@ </dd> </dlentry> </dl> -
    +
    Description list column width

    Definitions lists use the twelve column system defined by the Bootstrap grid. By default each dt spreads over 3 column widths and each Date: Sat, 1 Aug 2026 09:35:27 +0200 Subject: [PATCH 02/43] Amending colored card example --- sample/card.dita | 6 ++---- sample/color.dita | 4 ++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/sample/card.dita b/sample/card.dita index a9dfdf7..7d541e2 100644 --- a/sample/card.dita +++ b/sample/card.dita @@ -187,15 +187,13 @@

    - Card Title - + Success Card

    Some quick example text to build on the card title and make up the bulk of the card’s content.

         <card color="success"> - <title>Card Title</title> - <image href="..." /> + <card-header>Card Title</card-header> <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> <button href="#">Go Somewhere</button> </card> diff --git a/sample/color.dita b/sample/color.dita index 3e05393..2ccdd27 100644 --- a/sample/color.dita +++ b/sample/color.dita @@ -228,7 +228,7 @@ - Card Title + Success Card

    Some quick example text to build on the card title and make up the bulk of the card’s content.

     @@ -263,7 +263,7 @@ <thumbnail href="..." color="warning"/> <card color="success" width="50"> - <title>Card Title</title> + <card-header>Card Title</card-header> <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> </card> From da7bf823444925bb38f14924eb54ae69f7f4366b Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sat, 1 Aug 2026 09:42:32 +0200 Subject: [PATCH 03/43] Remove light/dark references --- sample/alerts.dita | 8 ++++---- sample/badge.dita | 4 ++-- sample/buttons.dita | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/sample/alerts.dita b/sample/alerts.dita index edfcacd..b78b79a 100644 --- a/sample/alerts.dita +++ b/sample/alerts.dita @@ -39,8 +39,8 @@ A simple danger alert—check it out! A simple warning alert—check it out! A simple info alert—check it out! - A simple light alert—check it out! - A simple dark alert—check it out! + A simple accent alert—check it out! + A simple inverse alert—check it out!
    @@ -200,8 +200,8 @@ This is a primary note. This is a secondary note. - This is light note. - This is dark note. + This is accent note. + This is inverse note.
    diff --git a/sample/badge.dita b/sample/badge.dita index 119b61f..ce3c32a 100644 --- a/sample/badge.dita +++ b/sample/badge.dita @@ -66,8 +66,8 @@ Danger Warning Info - Light - Dark + Accent + Inverse

    diff --git a/sample/buttons.dita b/sample/buttons.dita index fcabaab..1f01516 100644 --- a/sample/buttons.dita +++ b/sample/buttons.dita @@ -36,8 +36,8 @@ - - + + From ae1905e8ed4a11c846ebf8356ed338014e569377 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sat, 1 Aug 2026 11:11:37 +0200 Subject: [PATCH 04/43] Faded text --- sample/typography.dita | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sample/typography.dita b/sample/typography.dita index a7b4112..c9a9220 100644 --- a/sample/typography.dita +++ b/sample/typography.dita @@ -50,11 +50,11 @@

    Fancy display heading with faded secondary text

     <title>Fancy display heading <ph outputclass="small text-body-secondary">with faded secondary text</ph></title> + ><title>Fancy display heading <ph outputclass="small fs-md fg-secondary">with faded secondary text</ph></title>
    Display headings

    Traditional heading elements are designed to work best in the meat of your page content. When you need a From 90e2a952a5a61dec092c880f5505676667233e61 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sat, 1 Aug 2026 11:38:31 +0200 Subject: [PATCH 05/43] Button icons --- sample/icons.dita | 48 +++++++++++++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 18 deletions(-) diff --git a/sample/icons.dita b/sample/icons.dita index 4db3d6c..8fa32cd 100644 --- a/sample/icons.dita +++ b/sample/icons.dita @@ -156,53 +156,65 @@

    Icons can also be placed within buttons as shown:

    - - - - - - + + + + + +
    Specialization - <button outputclass="btn-floating m-1" href="#"> + <button color="primary" outputclass="btn-icon" href="#"> <icon outputclass="bi-arrow-down-square-fill"/> </button> -<button outputclass="btn-floating m-1" href="#"> +<button color="secondary" outputclass="btn-icon" href="#"> <icon outputclass="bi-chat-left-quote-fill"/> </button> -<button outputclass="btn-floating m-1" href="#"> +<button color="warning" outputclass="btn-icon" href="#"> <icon outputclass="bi-speedometer"/> </button> -<button outputclass="btn-floating m-1" href="#"> +<button color="info" outputclass="btn-icon" href="#"> <icon outputclass="bi-camera-fill"/> </button> -<button outputclass="btn-floating m-1" href="#"> +<button color="accent" outputclass="btn-icon" href="#"> <icon outputclass="bi-link"/> </button> -<button outputclass="btn-floating m-1" href="#"> +<button color="danger" outputclass="btn-icon" href="#"> <icon outputclass="bi-share-fill"/> </button>
    <xmlatt>outputclass</xmlatt> - <xref outputclass="btn theme-primary btn-floating m-1" href="#"> + <xref outputclass="theme-primary btn-icon" href="#"> <i outputclass="bi-arrow-down-square-fill"/> </xref> -<xref outputclass="btn theme-primary btn-floating m-1" href="#"> +<xref outputclass="theme-secondary btn-icon" href="#"> <i outputclass="bi-chat-left-quote-fill"/> </xref> -<xref outputclass="btn theme-primary btn-floating m-1" href="#"> +<xref outputclass="theme-warning btn-icon" href="#"> <i outputclass="bi-speedometer"/> </xref> -<xref outputclass="btn theme-primary btn-floating m-1" href="#"> +<xref outputclass="theme-info btn-icon" href="#"> <i outputclass="bi-camera-fill"/> </xref> -<xref outputclass="btn theme-primary btn-floating m-1" href="#"> +<xref outputclass="theme-accent btn-icon" href="#"> <i outputclass="bi-link"/> </xref> -<xref outputclass="btn theme-primary btn-floating m-1" href="#"> +<xref outputclass="theme-danger btn-icon" href="#"> <i outputclass="bi-share-fill"/> </xref>
    From 154b7323e64dfedabea9045a3ece07a78c942a8e Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sat, 1 Aug 2026 14:53:11 +0200 Subject: [PATCH 06/43] fixing header and footer --- .github/dita-ot/footer.xml | 16 +- .github/dita-ot/header.xml | 705 ++++++++++++++++--------------------- 2 files changed, 316 insertions(+), 405 deletions(-) diff --git a/.github/dita-ot/footer.xml b/.github/dita-ot/footer.xml index 48617ad..34491f4 100644 --- a/.github/dita-ot/footer.xml +++ b/.github/dita-ot/footer.xml @@ -6,37 +6,37 @@

    diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml index ec43ad1..f3f654a 100644 --- a/.github/dita-ot/header.xml +++ b/.github/dita-ot/header.xml @@ -1,432 +1,343 @@

    • + +
      + +
    • + -
        -
      • - -
        • -
      • -
        -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • - -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      + + +
      + +
      + + + + + + + + + + + + + + + + + + + + + + + + + + +
    - + + + From 6b67e2f10c0825e6189d40fe92ac759d18f5611d Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sat, 1 Aug 2026 15:05:10 +0200 Subject: [PATCH 07/43] Amend links --- .github/dita-ot/header.xml | 8 ++++---- sample/accordion.dita | 4 ++-- sample/alerts.dita | 2 +- sample/badge.dita | 2 +- sample/bootstrap-table.dita | 2 +- sample/borders.dita | 2 +- sample/breadcrumb.dita | 2 +- sample/button-group.dita | 2 +- sample/buttons.dita | 2 +- sample/card.dita | 6 +++--- sample/carousel.dita | 2 +- sample/component.dita | 2 +- sample/containers.dita | 2 +- sample/dark-mode.dita | 2 +- sample/drawer.dita | 2 +- sample/extension-points.dita | 2 +- sample/grid.dita | 2 +- sample/images.dita | 4 ++-- sample/index.dita | 28 ++++++++++++++-------------- sample/list-group.dita | 2 +- sample/nav.dita | 10 +++++----- sample/offline.dita | 2 +- sample/pagination.dita | 4 ++-- sample/popovers.dita | 2 +- sample/rtl.dita | 2 +- sample/sass.dita | 2 +- sample/scrollspy.dita | 2 +- sample/search-box.dita | 2 +- sample/tables.dita | 2 +- sample/tabs.dita | 2 +- sample/tooltips.dita | 2 +- sample/typography.dita | 2 +- 32 files changed, 57 insertions(+), 57 deletions(-) diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml index f3f654a..6ad8dc4 100644 --- a/.github/dita-ot/header.xml +++ b/.github/dita-ot/header.xml @@ -31,25 +31,25 @@
  • Plugin
  • Releases
  • Source
  • Bootstrap Docs
    • diff --git a/sample/accordion.dita b/sample/accordion.dita index b46f9f9..ba3869c 100644 --- a/sample/accordion.dita +++ b/sample/accordion.dita @@ -1,7 +1,7 @@ diff --git a/sample/search-box.dita b/sample/search-box.dita index 5149026..fdc8abe 100644 --- a/sample/search-box.dita +++ b/sample/search-box.dita @@ -2,7 +2,7 @@ From 4b3877b71fc8652fa5cde110cd2319f6d10a4fef Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sat, 1 Aug 2026 18:52:04 +0200 Subject: [PATCH 08/43] 5.3 -> 6.0 --- sample/accordion.dita | 2 +- sample/alerts.dita | 2 +- sample/badge.dita | 2 +- sample/bootstrap-table.dita | 2 +- sample/borders.dita | 2 +- sample/breadcrumb.dita | 2 +- sample/button-group.dita | 2 +- sample/buttons.dita | 2 +- sample/card.dita | 2 +- sample/carousel.dita | 2 +- sample/component.dita | 2 +- sample/containers.dita | 2 +- sample/dark-mode.dita | 2 +- sample/drawer.dita | 2 +- sample/extension-points.dita | 2 +- sample/grid.dita | 2 +- sample/images.dita | 2 +- sample/index.dita | 2 +- sample/list-group.dita | 2 +- sample/nav.dita | 2 +- sample/offline.dita | 2 +- sample/pagination.dita | 2 +- sample/popovers.dita | 2 +- sample/rtl.dita | 2 +- sample/sass.dita | 2 +- sample/scrollspy.dita | 2 +- sample/search-box.dita | 2 +- sample/tables.dita | 2 +- sample/tabs.dita | 2 +- sample/tooltips.dita | 2 +- sample/typography.dita | 2 +- 31 files changed, 31 insertions(+), 31 deletions(-) diff --git a/sample/accordion.dita b/sample/accordion.dita index ba3869c..bd6dbb6 100644 --- a/sample/accordion.dita +++ b/sample/accordion.dita @@ -1,7 +1,7 @@ diff --git a/sample/search-box.dita b/sample/search-box.dita index fdc8abe..b1a8d25 100644 --- a/sample/search-box.dita +++ b/sample/search-box.dita @@ -2,7 +2,7 @@ From 501e0ad76932d9604448b52627eba6cc310bcd70 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sun, 2 Aug 2026 15:52:09 +0200 Subject: [PATCH 09/43] Build with v6 --- .github/workflows/ci.yml | 65 +++++++++++++++++++++++++++++++++------- 1 file changed, 55 insertions(+), 10 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7ec4c06..ce87d9c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -4,6 +4,8 @@ name: CI branches: - master - develop + - v5 + - v6 workflow_dispatch: jobs: @@ -26,6 +28,42 @@ jobs: env: SHA: ${{ env.SHA }} + # 1. Resolve external plugin URLs with branch matching/fallback and use local checkout (.) for specialization + - name: Resolve Plugin URLs 🔗 + id: plugins + run: | + owner="${{ github.repository_owner }}" + ref="${{ github.ref_name }}" + + # Function to check URL existence and return fallback on failure + get_plugin_url() { + local repo=$1 + local target_url="https://github.com/${owner}/${repo}/archive/${ref}.zip" + if curl -sfIL "$target_url" >/dev/null; then + echo "$target_url" + else + echo "https://github.com/dita-bootstrap/${repo}/archive/develop.zip" + fi + } + + HTML_URL=$(get_plugin_url "dita-bootstrap.html") + LUNR_URL=$(get_plugin_url "dita-bootstrap.lunr") + THEME_URL=$(get_plugin_url "dita-bootstrap.theme-switcher") + + # Generate multiline output list for the plugins + EOF=$(dd if=/dev/urandom bs=15 count=1 2>/dev/null | base64 | tr -dc 'a-zA-Z0-9') + echo "list<<$EOF" >> $GITHUB_OUTPUT + echo "fox.jason.extend.css" >> $GITHUB_OUTPUT + echo "." >> $GITHUB_OUTPUT # Install the local specialization plugin code + echo "$HTML_URL" >> $GITHUB_OUTPUT + echo "$LUNR_URL" >> $GITHUB_OUTPUT + echo "https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip" >> $GITHUB_OUTPUT + echo "fox.jason.favicon" >> $GITHUB_OUTPUT + echo "fox.jason.open-graph" >> $GITHUB_OUTPUT + echo "$THEME_URL" >> $GITHUB_OUTPUT + echo "$EOF" >> $GITHUB_OUTPUT + + # 2. Build Bootstrap using the resolved plugins list - name: Build Bootstrap uses: dita-ot/dita-ot-action@4.4 with: @@ -34,23 +72,30 @@ jobs: export DEBIAN_FRONTEND=noninteractive apt-get install -qy --no-install-recommends nodejs nodejs -v - plugins: | - fox.jason.extend.css - https://github.com/dita-bootstrap/dita-bootstrap.specialization/archive/develop.zip - https://github.com/dita-bootstrap/dita-bootstrap.html/archive/develop.zip - https://github.com/dita-bootstrap/dita-bootstrap.lunr/archive/develop.zip - https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip - fox.jason.favicon - fox.jason.open-graph - https://github.com/dita-bootstrap/dita-bootstrap.theme-switcher/archive/master.zip + plugins: ${{ steps.plugins.outputs.list }} project: .github/dita-ot/html.xml + # 3. Determine target folder dynamically based on current branch + - name: Determine target folder 📁 + id: set-target + run: | + if [ "${{ github.ref_name }}" = "master" ] || [ "${{ github.ref_name }}" = "develop" ]; then + echo "target_dir=" >> $GITHUB_OUTPUT + else + echo "target_dir=${{ github.ref_name }}" >> $GITHUB_OUTPUT + fi + + # 4. Deploy to the dynamically resolved folder on gh-pages - name: Deploy HTML 🚀 uses: JamesIves/github-pages-deploy-action@v4.8.0 with: token: ${{ secrets.GITHUB_TOKEN }} branch: gh-pages # The branch the action should deploy to. folder: out/html # The folder the action should deploy. - commit-message: '🚀 Deploy ${{ env.SHA }} to GitHub Pages' + target-folder: ${{ steps.set-target.outputs.target_dir }} + commit-message: '🚀 Deploy ${{ env.SHA }} to GitHub Pages (${{ github.ref_name }})' git-config-name: 'GitHub Action' git-config-email: 'action@github.com' + clean-exclude: | + v5 + v6 From e176d938154b973df733ca3f285b582c35f8ddb2 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sun, 2 Aug 2026 15:55:03 +0200 Subject: [PATCH 10/43] update CI --- .github/workflows/ci.yml | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ce87d9c..9fef692 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -28,13 +28,16 @@ jobs: env: SHA: ${{ env.SHA }} - # 1. Resolve external plugin URLs with branch matching/fallback and use local checkout (.) for specialization + # 1. Resolve external plugin URLs with branch matching/fallback and zip local specialization plugin - name: Resolve Plugin URLs 🔗 id: plugins run: | owner="${{ github.repository_owner }}" ref="${{ github.ref_name }}" + # Zip the current repository files (excluding node_modules, .git, .github) to avoid expansion issues in Docker + zip -r specialization.zip . -x "node_modules/*" ".git/*" ".github/*" ".DS_Store" "specialization.zip" + # Function to check URL existence and return fallback on failure get_plugin_url() { local repo=$1 @@ -54,7 +57,7 @@ jobs: EOF=$(dd if=/dev/urandom bs=15 count=1 2>/dev/null | base64 | tr -dc 'a-zA-Z0-9') echo "list<<$EOF" >> $GITHUB_OUTPUT echo "fox.jason.extend.css" >> $GITHUB_OUTPUT - echo "." >> $GITHUB_OUTPUT # Install the local specialization plugin code + echo "./specialization.zip" >> $GITHUB_OUTPUT # Install the zipped local plugin echo "$HTML_URL" >> $GITHUB_OUTPUT echo "$LUNR_URL" >> $GITHUB_OUTPUT echo "https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip" >> $GITHUB_OUTPUT From 73a601dca76b976d8894223ca4074b384ab4c8c3 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sun, 2 Aug 2026 16:13:22 +0200 Subject: [PATCH 11/43] Amend fallback --- .github/workflows/ci.yml | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 9fef692..772fbca 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -41,9 +41,13 @@ jobs: # Function to check URL existence and return fallback on failure get_plugin_url() { local repo=$1 - local target_url="https://github.com/${owner}/${repo}/archive/${ref}.zip" - if curl -sfIL "$target_url" >/dev/null; then - echo "$target_url" + local fork_url="https://github.com/${owner}/${repo}/archive/${ref}.zip" + local upstream_url="https://github.com/dita-bootstrap/${repo}/archive/${ref}.zip" + + if curl -sfIL "$fork_url" >/dev/null; then + echo "$fork_url" + elif curl -sfIL "$upstream_url" >/dev/null; then + echo "$upstream_url" else echo "https://github.com/dita-bootstrap/${repo}/archive/develop.zip" fi From 8b594864e5669bc1a56cddce664843f0a9fbe225 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sun, 2 Aug 2026 16:44:32 +0200 Subject: [PATCH 12/43] Add temporary lookup --- .github/workflows/ci.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 772fbca..689bed1 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -42,10 +42,14 @@ jobs: get_plugin_url() { local repo=$1 local fork_url="https://github.com/${owner}/${repo}/archive/${ref}.zip" + # TODO: Remove dev_url check once v6 branch is merged upstream + local dev_url="https://github.com/jason-fox/${repo}/archive/${ref}.zip" local upstream_url="https://github.com/dita-bootstrap/${repo}/archive/${ref}.zip" if curl -sfIL "$fork_url" >/dev/null; then echo "$fork_url" + elif [ "${owner}" != "jason-fox" ] && curl -sfIL "$dev_url" >/dev/null; then + echo "$dev_url" elif curl -sfIL "$upstream_url" >/dev/null; then echo "$upstream_url" else From 6f0fc04502ede774a11ba7e1f0f7a9e3452d8006 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Fri, 7 Aug 2026 09:10:31 +0200 Subject: [PATCH 13/43] Temporarily disable theme switcher --- .github/dita-ot/header.xml | 76 +++++++++++++++++++++++++------------- .github/dita-ot/html.xml | 2 +- 2 files changed, 51 insertions(+), 27 deletions(-) diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml index 6ad8dc4..a095a39 100644 --- a/.github/dita-ot/header.xml +++ b/.github/dita-ot/header.xml @@ -23,8 +23,9 @@ d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z" /> - DITA Bootstrap Latest - + DITA Bootstrap v6 @@ -74,6 +75,11 @@
      +
    • + + + +
      • diff --git a/dtd/base/bootstrapDomain.mod b/dtd/base/bootstrapDomain.mod index 37a2bfa..cf6d607 100644 --- a/dtd/base/bootstrapDomain.mod +++ b/dtd/base/bootstrapDomain.mod @@ -64,7 +64,7 @@ - + - + @@ -245,8 +245,8 @@ - - + + diff --git a/sample/button-group.dita b/sample/button-group.dita index e662527..12181ca 100644 --- a/sample/button-group.dita +++ b/sample/button-group.dita @@ -29,13 +29,13 @@ outputclass="btn-group"

    - + - +
    Specialization @@ -57,13 +57,13 @@
    Mixed styles
    - + - +
    Specialization @@ -85,13 +85,13 @@
    Outlined styles
    - + - +
    Specialization @@ -114,7 +114,7 @@ Button toolbar

    Combine sets of button groups into button toolbars for more complex components.

    - + @@ -131,7 +131,7 @@ - +
    Specialization @@ -176,13 +176,13 @@ Vertical variation

    Make a set of buttons appear vertically stacked rather than horizontally.

    - + - +
    Specialization diff --git a/sample/carousel.dita b/sample/carousel.dita index 5634c39..3925d45 100644 --- a/sample/carousel.dita +++ b/sample/carousel.dita @@ -479,7 +479,7 @@ And, kept unused, the user so destroys it. div outputclass="bg-body" or some custom CSS to the carousel items for proper crossfading.

    - + @@ -530,7 +530,7 @@ And, kept unused, the user so destroys it.

    When autoplay="no" is set, the carousel won’t automatically start to cycle on page load. Instead, it will only start after the first user interaction.

    - + @@ -580,7 +580,7 @@ And, kept unused, the user so destroys it. >carousel to change the amount of time to delay between automatically cycling to the next item.

    - + @@ -627,7 +627,7 @@ And, kept unused, the user so destroys it. >carousel-item to change the amount of time to delay between automatically cycling to the next item.

    - + @@ -675,7 +675,7 @@ And, kept unused, the user so destroys it.

    Carousels support swiping left/right on touchscreen devices to move between slides. Add touch="no" to disable this option.

    - + diff --git a/sample/index.dita b/sample/index.dita index e880ef7..1503387 100644 --- a/sample/index.dita +++ b/sample/index.dita @@ -181,40 +181,34 @@ -

    - -

    +     -

    - -

    +     -

    - -

    +     @@ -224,40 +218,34 @@ -

    - -

    +     -

    - -

    +     -

    - -

    +     @@ -267,40 +255,34 @@ -

    - -

    +     -

    - -

    +     -

    - -

    +     @@ -310,40 +292,34 @@ -

    - -

    +     -

    - -

    +     -

    - -

    +     @@ -353,40 +329,34 @@ -

    - -

    +     -

    - -

    +     -

    - -

    +     @@ -396,40 +366,34 @@ -

    - -

    +     -

    - -

    +     -

    - -

    +     @@ -439,40 +403,34 @@ -

    - -

    +     -

    - -

    +     -

    - -

    +     @@ -482,40 +440,34 @@ -

    - -

    +     -

    - -

    +     -

    - -

    +     @@ -525,14 +477,12 @@ -

    - -

    +     From 916ee5d5147325e296fee5657d5e2146a25cf56c Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Tue, 11 Aug 2026 08:37:46 +0200 Subject: [PATCH 22/43] Emphasise notes --- sample/alerts.dita | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/sample/alerts.dita b/sample/alerts.dita index a2b654d..8686127 100644 --- a/sample/alerts.dita +++ b/sample/alerts.dita @@ -72,28 +72,28 @@
    <xmlatt>outputclass</xmlatt> - <section outputclass="alert theme-primary"> + <section outputclass="alert theme-primary fg-emphasis-primary"> A simple primary alert — check it out! </section> -<section outputclass="alert theme-secondary"> +<section outputclass="alert theme-secondary fg-emphasis-secondary"> A simple secondary alert — check it out! </section> -<section outputclass="alert theme-success"> +<section outputclass="alert theme-success fg-emphasis-success"> A simple success alert — check it out! </section> -<section outputclass="alert theme-danger"> +<section outputclass="alert theme-danger fg-emphasis-danger"> A simple danger alert — check it out! </section> -<section outputclass="alert theme-warning"> +<section outputclass="alert theme-warning fg-emphasis-warning"> A simple warning alert — check it out! </section> -<section outputclass="alert theme-info"> +<section outputclass="alert theme-info fg-emphasis-info"> A simple info alert — check it out! </section> -<section outputclass="alert theme-accent"> +<section outputclass="alert theme-accent fg-emphasis-accent"> A simple accent alert — check it out! </section> -<section outputclass="alert theme-inverse"> +<section outputclass="alert theme-inverse fg-emphasis-inverse"> A simple inverse alert — check it out! </section>
    From 6c5d57c48a97038595d07ab174c63741e80d375e Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Tue, 11 Aug 2026 13:29:48 +0200 Subject: [PATCH 23/43] Aligning documentation --- dtd/base/bootstrapDomain.mod | 12 +- sample/accordion.dita | 2 +- sample/alerts.dita | 62 ++++++++- sample/badge.dita | 113 +++++++++++++--- sample/bootstrap-table.dita | 2 +- sample/borders.dita | 2 +- sample/breadcrumb.dita | 2 +- sample/button-group.dita | 22 ++-- sample/buttons.dita | 249 ++++++++++++++++++++++++++++++++--- sample/card.dita | 2 +- sample/carousel.dita | 2 +- sample/component.dita | 2 +- sample/containers.dita | 2 +- sample/dark-mode.dita | 2 +- sample/drawer.dita | 2 +- sample/extension-points.dita | 2 +- sample/figures.dita | 2 +- sample/grid.dita | 2 +- sample/images.dita | 2 +- sample/index.dita | 22 +++- sample/list-group.dita | 2 +- sample/nav.dita | 2 +- sample/offline.dita | 2 +- sample/pagination.dita | 2 +- sample/popovers.dita | 2 +- sample/rtl.dita | 2 +- sample/sass.dita | 2 +- sample/search-box.dita | 2 +- sample/tables.dita | 2 +- sample/tabs.dita | 2 +- sample/tooltips.dita | 2 +- 31 files changed, 445 insertions(+), 85 deletions(-) diff --git a/dtd/base/bootstrapDomain.mod b/dtd/base/bootstrapDomain.mod index cf6d607..1c5654a 100644 --- a/dtd/base/bootstrapDomain.mod +++ b/dtd/base/bootstrapDomain.mod @@ -13,7 +13,7 @@ @@ -57,9 +58,10 @@ diff --git a/sample/accordion.dita b/sample/accordion.dita index bd6dbb6..5b51c82 100644 --- a/sample/accordion.dita +++ b/sample/accordion.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/alerts.dita b/sample/alerts.dita index 8686127..0ffa2eb 100644 --- a/sample/alerts.dita +++ b/sample/alerts.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> @@ -26,11 +26,33 @@ -
    - Example -

    Alerts are available for any length of text, as well as an optional close button. For proper styling, use one - of the eight required contextual classes (e.g., set outputclass to - alert-success).

    +
    + Default alert +

    Alerts are available for any length of text, as well as an optional close button. Alerts are designed to be + used with theme colors, but have neutral fallback colors for when no theme color is applied.

    +
    + + A simple alert — check it out! + + +
    + Specialization + <alert> + A simple alert — check it out! +</alert> +
    +
    + <xmlatt>outputclass</xmlatt> + <section outputclass="alert"> + A simple alert — check it out! +</section> +
    +     + +
    + Variants +

    Use any of the eight variant theme classes for color mode adaptive, contextual styling (e.g., set + color to success).

    A simple primary alert—check it out! @@ -143,6 +165,34 @@
    +
    + With icons +

    Similarly, you can use flexbox utilities and Bootstrap Icons to create alerts with icons. Depending on your + icons and content, you may want to add more utilities or custom styles.

    +
    + + +

    An example alert with an icon

    +     +     + +
    + Specialization + <alert color="primary" outputclass="d-flex align-items-center"> + <p><icon outputclass="bi-exclamation-triangle-fill flex-shrink-0" padding="e2"/>An example alert with an icon</p> +</alert> +
    +
    + <xmlatt>outputclass</xmlatt> + <section outputclass="alert theme-primary d-flex align-items-center"> + <ph outputclass="bi bi-exclamation-triangle-fill flex-shrink-0 pe-2"/>An example alert with an icon +</section> +
    +     +
    Notes

    DITA note elements are displayed as alerts according to the type diff --git a/sample/badge.dita b/sample/badge.dita index 5deb88d..2f37f50 100644 --- a/sample/badge.dita +++ b/sample/badge.dita @@ -23,10 +23,38 @@ -

    - Example -

    Badges scale to match the size of the immediate parent element by using relative font sizing and - em units. As of v5, badges no longer have focus or hover styles for links.

    +
    + Examples +

    Badges are tiny, static display components used for adding context to other elements. They can be used as + part of navigation, buttons, and more to provide a counter or label. Badges scale to match the size of the + immediate parent element by using relative font sizing and em units.

    +

    Badges come in three variants: solid (default), subtle, and outline.

    +
    + +

    + New + New + New +

    +     + +
    + Specialization + <badge color="primary">New</badge> +<badge color="primary" style="subtle">New</badge> +<badge color="primary" style="outline">New</badge> +
    +
    + <xmlatt>outputclass</xmlatt> + <ph outputclass="badge theme-primary">New</ph> +<ph outputclass="badge badge-subtle theme-primary">New</ph> +<ph outputclass="badge badge-outline theme-primary">New</ph> +
    +     + +
    + Headings +

    Badges adapt to the font-size of the parent element.

    @@ -46,21 +74,18 @@
    <xmlatt>outputclass</xmlatt> - <title>Example Heading <ph outputclass="badge theme-primary">New</ph></title> -<p>Example Text <ph outputclass="badge theme-primary">New</ph></p> + <title>Example Heading <ph outputclass="badge">New</ph></title> +<p>Example Text <ph outputclass="badge">New</ph></p>
    -
    - Background colors -

    Set a background-color with contrasting foreground color with Bootstrap’s text-bg-{color} helpers. Previously it was required to manually pair your choice of outputclass text-{color} and bg-{color} utilities for styling, which you still may use if you prefer.

    +
    + Variants +

    Use the contextual color attribute to apply a semantic theme color to badges, in any of the + solid, subtle, or outline styles.

    - Primary + Primary Secondary Success Danger @@ -69,6 +94,26 @@ Accent Inverse

    +

    + Primary + Secondary + Success + Danger + Warning + Info + Accent + Inverse +

    +

    + Primary + Secondary + Success + Danger + Warning + Info + Accent + Inverse +

    @@ -80,7 +125,25 @@ <badge color="warning">Warning</badge> <badge color="info">Info</badge> <badge color="accent">Accent</badge> -<badge color="inverse">Inverse</badge> +<badge color="inverse">Inverse</badge> + +<badge color="primary" style="subtle">Primary</badge> +<badge color="secondary" style="subtle">Secondary</badge> +<badge color="success" style="subtle">Success</badge> +<badge color="danger" style="subtle">Danger</badge> +<badge color="warning" style="subtle">Warning</badge> +<badge color="info" style="subtle">Info</badge> +<badge color="accent" style="subtle">Accent</badge> +<badge color="inverse" style="subtle">Inverse</badge> + +<badge color="primary" style="outline">Primary</badge> +<badge color="secondary" style="outline">Secondary</badge> +<badge color="success" style="outline">Success</badge> +<badge color="danger" style="outline">Danger</badge> +<badge color="warning" style="outline">Warning</badge> +<badge color="info" style="outline">Info</badge> +<badge color="accent" style="outline">Accent</badge> +<badge color="inverse" style="outline">Inverse</badge>
    <xmlatt>outputclass</xmlatt> @@ -91,7 +154,25 @@ <ph outputclass="badge theme-warning">Warning</ph> <ph outputclass="badge theme-info">Info</ph> <ph outputclass="badge theme-accent">Accent</ph> -<ph outputclass="badge theme-inverse">Inverse</ph> +<ph outputclass="badge theme-inverse">Inverse</ph> + +<ph outputclass="badge badge-subtle theme-primary">Primary</ph> +<ph outputclass="badge badge-subtle theme-secondary">Secondary</ph> +<ph outputclass="badge badge-subtle theme-success">Success</ph> +<ph outputclass="badge badge-subtle theme-danger">Danger</ph> +<ph outputclass="badge badge-subtle theme-warning">Warning</ph> +<ph outputclass="badge badge-subtle theme-info">Info</ph> +<ph outputclass="badge badge-subtle theme-accent">Accent</ph> +<ph outputclass="badge badge-subtle theme-inverse">Inverse</ph> + +<ph outputclass="badge badge-outline theme-primary">Primary</ph> +<ph outputclass="badge badge-outline theme-secondary">Secondary</ph> +<ph outputclass="badge badge-outline theme-success">Success</ph> +<ph outputclass="badge badge-outline theme-danger">Danger</ph> +<ph outputclass="badge badge-outline theme-warning">Warning</ph> +<ph outputclass="badge badge-outline theme-info">Info</ph> +<ph outputclass="badge badge-outline theme-accent">Accent</ph> +<ph outputclass="badge badge-outline theme-inverse">Inverse</ph>
    diff --git a/sample/bootstrap-table.dita b/sample/bootstrap-table.dita index 57d0059..b77e954 100644 --- a/sample/bootstrap-table.dita +++ b/sample/bootstrap-table.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/borders.dita b/sample/borders.dita index f20be1f..411f692 100644 --- a/sample/borders.dita +++ b/sample/borders.dita @@ -6,7 +6,7 @@ markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work, is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. + This work, is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. --> diff --git a/sample/breadcrumb.dita b/sample/breadcrumb.dita index 50ea2f0..0c13bd7 100644 --- a/sample/breadcrumb.dita +++ b/sample/breadcrumb.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/button-group.dita b/sample/button-group.dita index 12181ca..7df7dbf 100644 --- a/sample/button-group.dita +++ b/sample/button-group.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> @@ -54,8 +54,8 @@ </div>
    -
    - Mixed styles +
    + Theme variants
    @@ -82,23 +82,23 @@ </div>
    -
    - Outlined styles +
    + Style variants
    - - - + + +
    Specialization <button-group> - <button color="primary" outline="yes" href="#">Left</button> - <button color="primary" outline="yes" href="#">Middle</button> - <button color="primary" outline="yes" href="#">Right</button> + <button color="primary" style="outline" href="#">Left</button> + <button color="primary" style="outline" href="#">Middle</button> + <button color="primary" style="outline" href="#">Right</button> </button-group>
    diff --git a/sample/buttons.dita b/sample/buttons.dita index 8ec4437..bdcc8d7 100644 --- a/sample/buttons.dita +++ b/sample/buttons.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,Bootstrap 6.0 docs and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> @@ -24,13 +24,33 @@ +
    + Base class +

    Buttons have a standard btn class that sets up basic styles such as padding and content + alignment, along with fallback visual styles for basic accessibility. Change this class to another button + class to apply different visual styles for a specific button variant and theme.

    +
    + + + + +
    + Specialization + <button style="none">Base class</button> +
    +
    + <xmlatt>outputclass</xmlatt> + <ph outputclass="btn">Base class</ph> +
    +     +
    Example

    Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

    - + @@ -43,7 +63,7 @@
    Specialization - <button href="#">Primary</button> + <button href="#" color="primary">Primary</button> <button href="#" color="secondary">Secondary</button> <button href="#" color="success">Success</button> <button href="#" color="danger">Danger</button> @@ -65,6 +85,175 @@
    +
    + Variants +

    Compare the solid (default), outline, subtle, and text button styles at once, combined with theme + colors.

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Specialization + <button href="#" color="primary">Primary</button> +<button href="#" color="primary" style="outline">Primary</button> +<button href="#" color="primary" style="subtle">Primary</button> +<button href="#" color="primary" style="text">Primary</button> +<button href="#" color="secondary">Secondary</button> +<button href="#" color="secondary" style="outline">Secondary</button> +<button href="#" color="secondary" style="subtle">Secondary</button> +<button href="#" color="secondary" style="text">Secondary</button> +<button href="#" color="success">Success</button> +<button href="#" color="success" style="outline">Success</button> +<button href="#" color="success" style="subtle">Success</button> +<button href="#" color="success" style="text">Success</button> +<button href="#" color="danger">Danger</button> +<button href="#" color="danger" style="outline">Danger</button> +<button href="#" color="danger" style="subtle">Danger</button> +<button href="#" color="danger" style="text">Danger</button> +<button href="#" color="warning">Warning</button> +<button href="#" color="warning" style="outline">Warning</button> +<button href="#" color="warning" style="subtle">Warning</button> +<button href="#" color="warning" style="text">Warning</button> +<button href="#" color="info">Info</button> +<button href="#" color="info" style="outline">Info</button> +<button href="#" color="info" style="subtle">Info</button> +<button href="#" color="info" style="text">Info</button> +<button href="#" color="accent">Accent</button> +<button href="#" color="accent" style="outline">Accent</button> +<button href="#" color="accent" style="subtle">Accent</button> +<button href="#" color="accent" style="text">Accent</button> +<button href="#" color="inverse">Inverse</button> +<button href="#" color="inverse" style="outline">Inverse</button> +<button href="#" color="inverse" style="subtle">Inverse</button> +<button href="#" color="inverse" style="text">Inverse</button> +
    +
    + <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-solid theme-primary">Primary</xref> +<xref href="#" outputclass="btn-outline theme-primary">Primary</xref> +<xref href="#" outputclass="btn-subtle theme-primary">Primary</xref> +<xref href="#" outputclass="btn-text theme-primary">Primary</xref> +<xref href="#" outputclass="btn-solid theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn-outline theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn-subtle theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn-text theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn-solid theme-success">Success</xref> +<xref href="#" outputclass="btn-outline theme-success">Success</xref> +<xref href="#" outputclass="btn-subtle theme-success">Success</xref> +<xref href="#" outputclass="btn-text theme-success">Success</xref> +<xref href="#" outputclass="btn-solid theme-danger">Danger</xref> +<xref href="#" outputclass="btn-outline theme-danger">Danger</xref> +<xref href="#" outputclass="btn-subtle theme-danger">Danger</xref> +<xref href="#" outputclass="btn-text theme-danger">Danger</xref> +<xref href="#" outputclass="btn-solid theme-warning">Warning</xref> +<xref href="#" outputclass="btn-outline theme-warning">Warning</xref> +<xref href="#" outputclass="btn-subtle theme-warning">Warning</xref> +<xref href="#" outputclass="btn-text theme-warning">Warning</xref> +<xref href="#" outputclass="btn-solid theme-info">Info</xref> +<xref href="#" outputclass="btn-outline theme-info">Info</xref> +<xref href="#" outputclass="btn-subtle theme-info">Info</xref> +<xref href="#" outputclass="btn-text theme-info">Info</xref> +<xref href="#" outputclass="btn-solid theme-accent">Accent</xref> +<xref href="#" outputclass="btn-outline theme-accent">Accent</xref> +<xref href="#" outputclass="btn-subtle theme-accent">Accent</xref> +<xref href="#" outputclass="btn-text theme-accent">Accent</xref> +<xref href="#" outputclass="btn-solid theme-inverse">Inverse</xref> +<xref href="#" outputclass="btn-outline theme-inverse">Inverse</xref> +<xref href="#" outputclass="btn-subtle theme-inverse">Inverse</xref> +<xref href="#" outputclass="btn-text theme-inverse">Inverse</xref> +
    +     + +
    + Styled buttons +

    Add visual depth to solid buttons with gradients and shadows using the btn-styled modifier + class. This provides a more three-dimensional appearance that can be customized further with CSS + variables.

    +
    + + + + + + + + + + + +
    + Specialization + <button href="#" color="primary" gradient="yes">Primary</button> +<button href="#" color="secondary" gradient="yes">Secondary</button> +<button href="#" color="success" gradient="yes">Success</button> +<button href="#" color="danger" gradient="yes">Danger</button> +<button href="#" color="warning" gradient="yes">Warning</button> +<button href="#" color="info" gradient="yes">Info</button> +<button href="#" color="accent" gradient="yes">Accent</button> +<button href="#" color="inverse" gradient="yes">Inverse</button> +
    +
    + <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-solid btn-styled theme-primary">Primary</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-success">Success</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-danger">Danger</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-warning">Warning</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-info">Info</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-accent">Accent</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-inverse">Inverse</xref> +
    +     +
    Outline buttons

    In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with @@ -72,26 +261,26 @@ and colors on any button.

    - - - - - - - - + + + + + + + +
    Specialization - <button href="#" outline="yes">Primary</button> -<button href="#" color="secondary" outline="yes">Secondary</button> -<button href="#" color="success" outline="yes">Success</button> -<button href="#" color="danger" outline="yes">Danger</button> -<button href="#" color="warning" outline="yes">Warning</button> -<button href="#" color="info" outline="yes">Info</button> -<button href="#" color="accent" outline="yes">Accent</button> -<button href="#" color="inverse" outline="yes">Inverse</button> + <button href="#" style="outline">Primary</button> +<button href="#" color="secondary" style="outline">Secondary</button> +<button href="#" color="success" style="outline">Success</button> +<button href="#" color="danger" style="outline">Danger</button> +<button href="#" color="warning" style="outline">Warning</button> +<button href="#" color="info" style="outline">Info</button> +<button href="#" color="accent" style="outline">Accent</button> +<button href="#" color="inverse" style="outline">Inverse</button>
    <xmlatt>outputclass</xmlatt> @@ -107,8 +296,8 @@
    Sizing -

    Fancy larger or smaller buttons? Use size="large" or - size="small" for additional sizes.

    +

    Fancy larger or smaller buttons? Use size="large", size="small", or + size="xs" for additional sizes.

    @@ -145,6 +334,24 @@ <xref href="#" outputclass="btn theme-secondary btn-sm">Small button</xref>
    + + + + + + + +
    + Specialization + <button href="#" size="xs">Extra small button</button> +<button href="#" color="secondary" size="xs">Extra small button</button> +
    +
    + <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn theme-primary btn-xs">Extra small button</xref> +<xref href="#" outputclass="btn theme-secondary btn-xs">Extra small button</xref> +
    +     diff --git a/sample/card.dita b/sample/card.dita index 63db441..bf147d9 100644 --- a/sample/card.dita +++ b/sample/card.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/carousel.dita b/sample/carousel.dita index 3925d45..93495f2 100644 --- a/sample/carousel.dita +++ b/sample/carousel.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/component.dita b/sample/component.dita index 45515e8..0cf2581 100644 --- a/sample/component.dita +++ b/sample/component.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/containers.dita b/sample/containers.dita index 331b9d2..fd9cf20 100644 --- a/sample/containers.dita +++ b/sample/containers.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/dark-mode.dita b/sample/dark-mode.dita index 95f1a09..e4ec5fe 100644 --- a/sample/dark-mode.dita +++ b/sample/dark-mode.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/drawer.dita b/sample/drawer.dita index 8dffc41..b89abdc 100644 --- a/sample/drawer.dita +++ b/sample/drawer.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/extension-points.dita b/sample/extension-points.dita index 3d869e9..496d1d8 100644 --- a/sample/extension-points.dita +++ b/sample/extension-points.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/figures.dita b/sample/figures.dita index d869515..75f3d51 100644 --- a/sample/figures.dita +++ b/sample/figures.dita @@ -6,7 +6,7 @@ markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work, is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. + This work, is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.--> diff --git a/sample/grid.dita b/sample/grid.dita index 2fe70ad..e15bf56 100644 --- a/sample/grid.dita +++ b/sample/grid.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/images.dita b/sample/images.dita index 71df605..8054aa1 100644 --- a/sample/images.dita +++ b/sample/images.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/index.dita b/sample/index.dita index 1503387..105c6e5 100644 --- a/sample/index.dita +++ b/sample/index.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> @@ -632,6 +632,8 @@ --bootstrap.css.codeblock --bootstrap.css.topic.title --bootstrap.css.section.title + --bootstrap.css.badge + --bootstrap.css.button --bootstrap.css.card --bootstrap.css.carousel --bootstrap.css.carousel.caption @@ -689,6 +691,24 @@ accordion components + + + --bootstrap.css​.badge + + + Common utility classes for Bootstrap + badge components + + + + + --bootstrap.css​.button + + + Common utility classes for Bootstrap + button components + + --bootstrap.css​.card diff --git a/sample/list-group.dita b/sample/list-group.dita index 758b301..6d519a3 100644 --- a/sample/list-group.dita +++ b/sample/list-group.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/nav.dita b/sample/nav.dita index b6bcfd6..c19825c 100644 --- a/sample/nav.dita +++ b/sample/nav.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/offline.dita b/sample/offline.dita index 0d63f62..e787bc7 100644 --- a/sample/offline.dita +++ b/sample/offline.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/pagination.dita b/sample/pagination.dita index 849685d..25b1216 100644 --- a/sample/pagination.dita +++ b/sample/pagination.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/popovers.dita b/sample/popovers.dita index 94b9127..339d71c 100644 --- a/sample/popovers.dita +++ b/sample/popovers.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/rtl.dita b/sample/rtl.dita index c565b84..ab808e4 100644 --- a/sample/rtl.dita +++ b/sample/rtl.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/sass.dita b/sample/sass.dita index fe7bd94..d8076db 100644 --- a/sample/sass.dita +++ b/sample/sass.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/search-box.dita b/sample/search-box.dita index b1a8d25..e63eb87 100644 --- a/sample/search-box.dita +++ b/sample/search-box.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/tables.dita b/sample/tables.dita index aa9e954..e2010c4 100644 --- a/sample/tables.dita +++ b/sample/tables.dita @@ -5,7 +5,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/tabs.dita b/sample/tabs.dita index 7a6742f..45f36f6 100644 --- a/sample/tabs.dita +++ b/sample/tabs.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/tooltips.dita b/sample/tooltips.dita index 7804c25..e91aaff 100644 --- a/sample/tooltips.dita +++ b/sample/tooltips.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> From 170d30fd4b963d1817c100e7e25bff1bcf1dfd89 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Tue, 11 Aug 2026 14:23:05 +0200 Subject: [PATCH 24/43] Amend alignment --- sample/alerts.dita | 4 +- sample/buttons.dita | 146 +++++++++++++++++++++++++++++++------------- 2 files changed, 107 insertions(+), 43 deletions(-) diff --git a/sample/alerts.dita b/sample/alerts.dita index 0ffa2eb..69af74c 100644 --- a/sample/alerts.dita +++ b/sample/alerts.dita @@ -171,7 +171,7 @@ icons and content, you may want to add more utilities or custom styles.

    - +

    Specialization - <alert color="primary" outputclass="d-flex align-items-center"> + <alert color="primary"> <p><icon outputclass="bi-exclamation-triangle-fill flex-shrink-0" padding="e2"/>An example alert with an icon</p> </alert>
    diff --git a/sample/buttons.dita b/sample/buttons.dita index bdcc8d7..484d3bc 100644 --- a/sample/buttons.dita +++ b/sample/buttons.dita @@ -61,9 +61,9 @@ -
    - Specialization - <button href="#" color="primary">Primary</button> +
    + Specialization + <button href="#" color="primary">Primary</button> <button href="#" color="secondary">Secondary</button> <button href="#" color="success">Success</button> <button href="#" color="danger">Danger</button> @@ -71,10 +71,10 @@ <button href="#" color="info">Info</button> <button href="#" color="accent">Accent</button> <button href="#" color="inverse">Inverse</button> -
    -
    - <xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn theme-primary">Primary</xref> +
    +
    + <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn theme-primary">Primary</xref> <xref href="#" outputclass="btn theme-secondary">Secondary</xref> <xref href="#" outputclass="btn theme-success">Success</xref> <xref href="#" outputclass="btn theme-danger">Danger</xref> @@ -82,8 +82,8 @@ <xref href="#" outputclass="btn theme-info">Info</xref> <xref href="#" outputclass="btn theme-accent">Accent</xref> <xref href="#" outputclass="btn theme-inverse">Inverse</xref> -
    - +
    +
    Variants @@ -92,52 +92,116 @@
    - - - - + + + + + + + + + + + + - - - - + + + + + + + + + + + + - - - - + + + + + + + + + + + + - - - - + + + + + + + + + + + + - - - - + + + + + + + + + + + + - - - - + + + + + + + + + + + + - - - - + + + + + + + + + + + + - - - - + + + + + + + + + + + + From a68209ce20e7aa90279332a83c818479512a5a81 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Tue, 11 Aug 2026 15:29:22 +0200 Subject: [PATCH 25/43] Fix DTD --- dtd/base/bootstrapDomain.mod | 2 +- sample/alerts.dita | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/dtd/base/bootstrapDomain.mod b/dtd/base/bootstrapDomain.mod index 1c5654a..7c419e9 100644 --- a/dtd/base/bootstrapDomain.mod +++ b/dtd/base/bootstrapDomain.mod @@ -148,7 +148,7 @@ - + diff --git a/sample/alerts.dita b/sample/alerts.dita index 69af74c..69777c3 100644 --- a/sample/alerts.dita +++ b/sample/alerts.dita @@ -172,17 +172,18 @@
    -

    An example alert with an icon

    +
    + An example alert with an icon +
    Specialization <alert color="primary"> - <p><icon outputclass="bi-exclamation-triangle-fill flex-shrink-0" padding="e2"/>An example alert with an icon</p> + <div> + <icon outputclass="bi-exclamation-triangle-fill flex-shrink-0" padding="e2"/>An example alert with an icon + </div> </alert>
    From 9cc8cfe7d436fa85c144b7838fc8ba7c0c0c584c Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Tue, 11 Aug 2026 16:03:51 +0200 Subject: [PATCH 26/43] Update pagination --- dtd/base/bootstrapDomain.mod | 2 +- sample/pagination.dita | 186 +++++++++++++++++++++++++++++++++++ 2 files changed, 187 insertions(+), 1 deletion(-) diff --git a/dtd/base/bootstrapDomain.mod b/dtd/base/bootstrapDomain.mod index 7c419e9..5984064 100644 --- a/dtd/base/bootstrapDomain.mod +++ b/dtd/base/bootstrapDomain.mod @@ -173,7 +173,7 @@ > - +
    +
    + Variants +

    Add a color attribute to a pagination list to apply a semantic theme color across the + component, including hover, focus, and the active page item.

    +
    + + + Page navigation example +
      +
    1. Previous
      2. +
    2. 1
      3. +
    3. 2
      4. +
    4. 3
      5. +
    5. Next
      6. +
    +     + + Page navigation example +
      +
    1. Previous
      2. +
    2. 1
      3. +
    3. 2
      4. +
    4. 3
      5. +
    5. Next
      6. +
    +     + + Page navigation example +
      +
    1. Previous
      2. +
    2. 1
      3. +
    3. 2
      4. +
    4. 3
      5. +
    5. Next
      6. +
    +     + + Page navigation example +
      +
    1. Previous
      2. +
    2. 1
      3. +
    3. 2
      4. +
    4. 3
      5. +
    5. Next
      6. +
    +     + + Page navigation example +
      +
    1. Previous
      2. +
    2. 1
      3. +
    3. 2
      4. +
    4. 3
      5. +
    5. Next
      6. +
    +     + + Page navigation example +
      +
    1. Previous
      2. +
    2. 1
      3. +
    3. 2
      4. +
    4. 3
      5. +
    5. Next
      6. +
    +     + + Page navigation example +
      +
    1. Previous
      2. +
    2. 1
      3. +
    3. 2
      4. +
    4. 3
      5. +
    5. Next
      6. +
    +     + + Page navigation example +
      +
    1. Previous
      2. +
    2. 1
      3. +
    3. 2
      4. +
    4. 3
      5. +
    5. Next
      6. +
    +     +     + +
    + Specialization + <pagination color="primary"> + <title>Page navigation example</title> + <ol> + <li><xref href="#">Previous</xref></li> + <li><xref href="#">1</xref></li> + <li><xref href="#">2</xref></li> + <li><xref href="#">3</xref></li> + <li><xref href="#">Next</xref></li> + </ol> +</pagination> +<pagination color="secondary"> + <title>Page navigation example</title> + <ol>...</ol> +</pagination> +<pagination color="success"> + <title>Page navigation example</title> + <ol>...</ol> +</pagination> +<pagination color="danger"> + <title>Page navigation example</title> + <ol>...</ol> +</pagination> +<pagination color="warning"> + <title>Page navigation example</title> + <ol>...</ol> +</pagination> +<pagination color="info"> + <title>Page navigation example</title> + <ol>...</ol> +</pagination> +<pagination color="accent"> + <title>Page navigation example</title> + <ol>...</ol> +</pagination> +<pagination color="inverse"> + <title>Page navigation example</title> + <ol>...</ol> +</pagination> +
    +
    + <xmlatt>outputclass</xmlatt> + <section> + <title>Page navigation example</title> + <ol outputclass="pagination theme-primary"> + <li><xref href="#">Previous</xref></li> + <li><xref href="#">1</xref></li> + <li><xref href="#">2</xref></li> + <li><xref href="#">3</xref></li> + <li><xref href="#">Next</xref></li> + </ol> +</section> +<section> + <title>Page navigation example</title> + <ol outputclass="pagination theme-secondary"> + ... + </ol> +</section> +<section> + <title>Page navigation example</title> + <ol outputclass="pagination theme-success"> + ... + </ol> +</section> +<section> + <title>Page navigation example</title> + <ol outputclass="pagination theme-danger"> + ... + </ol> +</section> +<section> + <title>Page navigation example</title> + <ol outputclass="pagination theme-warning"> + ... + </ol> +</section> +<section> + <title>Page navigation example</title> + <ol outputclass="pagination theme-info"> + ... + </ol> +</section> +<section> + <title>Page navigation example</title> + <ol outputclass="pagination theme-accent"> + ... + </ol> +</section> +<section> + <title>Page navigation example</title> + <ol outputclass="pagination theme-inverse"> + ... + </ol> +</section> +
    +     +
    Sizing

    Fancy larger or smaller pagination? Use size="large" or From aa93bd1f08bb8e5598ae33d759730fa5f21ce792 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Tue, 11 Aug 2026 20:12:06 +0200 Subject: [PATCH 27/43] Updating buttons and references --- .github/dita-ot/header.xml | 112 ++++++++++++++++++------------------- README.md | 4 +- sample/badge.dita | 2 +- sample/card.dita | 4 +- sample/collapse.dita | 4 +- sample/drawer.dita | 4 +- sample/index.dita | 6 +- sample/offline.dita | 2 +- sample/popovers.dita | 36 ++++++------ sample/rtl.dita | 6 +- sample/tooltips.dita | 60 ++++++++++++++------ 11 files changed, 132 insertions(+), 108 deletions(-) diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml index a095a39..26bb938 100644 --- a/.github/dita-ot/header.xml +++ b/.github/dita-ot/header.xml @@ -28,7 +28,7 @@ >v6 -

      + @@ -159,191 +159,191 @@
      diff --git a/README.md b/README.md index 80dfd23..127674e 100644 --- a/README.md +++ b/README.md @@ -57,8 +57,8 @@ Most DITA Bootstrap Specializations, as well as many base DITA elements, support [Apache 2.0](LICENSE) © 2026 Jason Fox -Within the sample documentation, where necessary, the texts describing the usage of each component have been copied directly from the official [Bootstrap 5.3 documentation][3], however DITA markup is used throughout the examples describing how to implement these components correctly using DITA specializations or `outputclass`. The text is therefore a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. +Within the sample documentation, where necessary, the texts describing the usage of each component have been copied directly from the official [Bootstrap 6.0 documentation][3], however DITA markup is used throughout the examples describing how to implement these components correctly using DITA specializations or `outputclass`. The text is therefore a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. [1]: http://www.dita-ot.org [2]: https://dita-bootstrap.github.io/ -[3]: https://getbootstrap.com/docs/5.3 +[3]: https://getbootstrap.com/docs/6.0 diff --git a/sample/badge.dita b/sample/badge.dita index 2f37f50..9480258 100644 --- a/sample/badge.dita +++ b/sample/badge.dita @@ -4,7 +4,7 @@ directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass. - This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, + This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses. --> diff --git a/sample/card.dita b/sample/card.dita index bf147d9..b924322 100644 --- a/sample/card.dita +++ b/sample/card.dita @@ -71,7 +71,7 @@ <title outputclass="h5">Card Title</title> <image outputclass="card-img-top" href="..." /> <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> - <xref outputclass="btn-primary" href="#">Go Somewhere</xref> + <xref outputclass="btn-solid theme-primary" href="#">Go Somewhere</xref> </section>
    @@ -172,7 +172,7 @@ <div outputclass="card-header">Featured</div> <title outputclass="h5">Special title treatment</title> <p>With supporting text below as a natural lead-in to additional content.</p> - <xref href="#" outputclass="btn-primary">Go somewhere</xref> + <xref href="#" outputclass="btn-solid theme-primary">Go somewhere</xref> </section>
    diff --git a/sample/collapse.dita b/sample/collapse.dita index 9c8fb1c..a5c8388 100644 --- a/sample/collapse.dita +++ b/sample/collapse.dita @@ -59,7 +59,7 @@
    <xmlatt>outputclass</xmlatt> <p> - <xref outputclass="btn-primary" props="collapse-toggle" href="#collapse1"> + <xref outputclass="btn-solid theme-primary" props="collapse-toggle" href="#collapse1"> Toggle Collapse </xref> </p> @@ -102,7 +102,7 @@
    <xmlatt>outputclass</xmlatt> <p> - <xref outputclass="btn-primary" props="collapse-toggle" href="#collapse2">Toggle Width Collapse</xref> + <xref outputclass="btn-solid theme-primary" props="collapse-toggle" href="#collapse2">Toggle Width Collapse</xref> </p> <bodydiv outputclass="collapse-horizontal" id="collapse2" otherprops="style(min-height: 120px;)"> <div outputclass="card card-body" otherprops="style(width: 300px;)"> diff --git a/sample/drawer.dita b/sample/drawer.dita index b89abdc..01569e3 100644 --- a/sample/drawer.dita +++ b/sample/drawer.dita @@ -70,7 +70,7 @@
    <xmlatt>outputclass</xmlatt> - <xref outputclass="btn-primary" props="drawer-toggle" href="#drawer1"> + <xref outputclass="btn-solid theme-primary" props="drawer-toggle" href="#drawer1"> Click here </xref> <section outputclass="drawer-start" id="drawer1"> @@ -190,7 +190,7 @@ <note outputclass="d-none lg:d-block"> Resize your browser to show the responsive drawer toggle. </note> -<xref outputclass="btn-primary lg:d-none" props="drawer-toggle" href="#drawer4"> +<xref outputclass="btn-solid theme-primary lg:d-none" props="drawer-toggle" href="#drawer4"> Toggle drawer </xref> <section outputclass="drawer-lg" id="drawer4"> diff --git a/sample/index.dita b/sample/index.dita index 105c6e5..64d62ec 100644 --- a/sample/index.dita +++ b/sample/index.dita @@ -13,13 +13,13 @@ A series of plug-ins for DITA Open Toolkit that extends the default HTML5 and PDF outputs with a - Bootstrap 5.3 template and + Bootstrap 6.0 template and components. - Bootstrap 5.3 + Bootstrap 6.0 DITA installing @@ -1158,7 +1158,7 @@
    Within the sample documentation, the texts describing the usage of each component have been copied directly from the - official Bootstrap 5.3 + official Bootstrap 6.0 documentation, however DITA markup is used throughout the examples describing how to implement these components correctly using DITA specializations or the DITA outputclass attribute. This text is therefore a derivative of Bootstrap 5 docs by Twitter, Inc. and the Bootstrap Authors, and used diff --git a/sample/offline.dita b/sample/offline.dita index e787bc7..a09584d 100644 --- a/sample/offline.dita +++ b/sample/offline.dita @@ -87,7 +87,7 @@ Sample <filepath>offline-bootstrap.css</filepath> file @charset "UTF-8"; /*! - * Bootstrap v5.3.0 (https://getbootstrap.com/) + * Bootstrap v6.0.0 (https://getbootstrap.com/) * Copyright 2011-2023 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ diff --git a/sample/popovers.dita b/sample/popovers.dita index 339d71c..c66b8e3 100644 --- a/sample/popovers.dita +++ b/sample/popovers.dita @@ -52,14 +52,14 @@
    - + Popover title And here’s some amazing content. It’s very engaging. Right? Click to toggle popover
    Specialization - <popover outputclass="btn-lg btn-danger"> + <popover outputclass="btn-lg btn-solid theme-danger"> <data name="title">Popover title</data> <desc>And here’s some amazing content. It’s very engaging. Right?</desc> Click to toggle popover @@ -67,7 +67,7 @@
    <xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-lg btn-danger popover-top"> + <xref href="#" outputclass="btn-lg btn-solid theme-danger popover-top"> <data name="title">Popover title</data> <desc>And here’s some amazing content. It’s very engaging. Right?</desc> Click to toggle popover @@ -84,50 +84,50 @@ popover is appended to the output-class or taken from the attribute.

    - + Top popover Popover on top - + Right Popover Popover on right - + Bottom popover Popover on bottom - + Left popover Popover on left
    Specialization - <popover outputclass="btn-secondary" position="top"> + <popover outputclass="btn-solid theme-secondary" position="top"> <desc>Top popover</desc> Popover on top </popover> -<popover outputclass="btn-secondary" position="right"> +<popover outputclass="btn-solid theme-secondary" position="right"> <desc>Right Popover</desc> Popover on right </popover> -<popover outputclass="btn-secondary" position="bottom"> +<popover outputclass="btn-solid theme-secondary" position="bottom"> <desc>Bottom popover</desc> Popover on bottom </popover> -<popover outputclass="btn-secondary" position="left"> +<popover outputclass="btn-solid theme-secondary" position="left"> <desc>Left popover</desc> Popover on left </popover>
    <xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-secondary popover-top"> + <xref href="#" outputclass="btn-solid theme-secondary popover-top"> <desc>Top popover</desc> Popover on top </xref> -<xref href="#" outputclass="btn-secondary popover-right"> +<xref href="#" outputclass="btn-solid theme-secondary popover-right"> <desc>Right Popover</desc> Popover on right </xref> -<xref href="#" outputclass="btn-secondary popover-bottom"> +<xref href="#" outputclass="btn-solid theme-secondary popover-bottom"> <desc>Bottom popover</desc> Popover on bottom </xref> -<xref href="#" outputclass="btn-secondary popover-left"> +<xref href="#" outputclass="btn-solid theme-secondary popover-left"> <desc>Left popover</desc> Popover on left </xref> @@ -149,7 +149,7 @@ }
    - + Popover title custom-popover And here’s some amazing content. It’s very engaging. Right?Custom popover @@ -157,7 +157,7 @@
    Specialization - <popover outputclass="btn-lg btn-danger"> + <popover outputclass="btn-lg btn-solid theme-danger"> <data name="title">Popover title</data> <data name="class">custom-popover</data> <desc>And here’s some amazing content. It’s very engaging. Right?</desc> @@ -166,7 +166,7 @@
    <xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-lg btn-danger popover-top"> + <xref href="#" outputclass="btn-lg btn-solid theme-danger popover-top"> <data name="title">Popover title</data> <data name="class">custom-popover</data> <desc>And here’s some amazing content. It’s very engaging. Right?</desc> diff --git a/sample/rtl.dita b/sample/rtl.dita index ab808e4..54f87a7 100644 --- a/sample/rtl.dita +++ b/sample/rtl.dita @@ -50,7 +50,7 @@ عنوان البطاقة

    بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

    - + @@ -64,7 +64,7 @@ <title>عنوان البطاقة</title> <image href="..." /> <p>بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p> - <button href="#">اذهب لمكان ما</button> + <button href="#" color="primary">اذهب لمكان ما</button> </card> </grid-col> </grid-row>     @@ -77,7 +77,7 @@ <title outputclass="h5">عنوان البطاقة</title> <image outputclass="card-img-top" href="..." /> <p>بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p> - <xref href="#" outputclass="btn-primary">اذهب لمكان ما</xref> + <xref href="#" outputclass="btn-solid theme-primary">اذهب لمكان ما</xref> </section> </bodydiv> </bodydiv>     diff --git a/sample/tooltips.dita b/sample/tooltips.dita index e91aaff..3890db9 100644 --- a/sample/tooltips.dita +++ b/sample/tooltips.dita @@ -58,6 +58,30 @@ work in practice, once you use them on your ownThe last tip! site or project.

    + +
    + Specialization + <p>Placeholder text to demonstrate some + <tooltip> inline links <desc>Default tooltip</desc></tooltip> with tooltips. This is + now just filler, no killer. Content placed here just to mimic the presence of + <tooltip> real text<desc>Another tooltip</desc></tooltip>. And all that just to give + you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how + <tooltip> these tooltips on links<desc>Another one here too</desc></tooltip> can + work in practice, once you use them on + <tooltip> your own<desc>The last tip!</desc></tooltip> site or project.</p> +
    +
    + <xmlatt>outputclass</xmlatt> + <p>Placeholder text to demonstrate some + <xref href="#" outputclass="tooltip-top"> inline links <desc>Default tooltip</desc></xref> with tooltips. This is + now just filler, no killer. Content placed here just to mimic the presence of + <xref href="#" outputclass="tooltip-top"> real text<desc>Another tooltip</desc></xref>. And all that just to give + you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how + <xref href="#" outputclass="tooltip-top"> these tooltips on links<desc>Another one here too</desc></xref> can + work in practice, once you use them on + <xref href="#" outputclass="tooltip-top"> your own<desc>The last tip!</desc></xref> site or project.</p> +
    +

    To enable tooltips, add output-class="tooltip-*" to the enclosing xref. For the tooltip element use the Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.

    - + Tooltip on top Tooltip on top - + Tooltip on right Tooltip on right - + Tooltip on bottom Tooltip on bottom - + Tooltip on left Tooltip on left
    Specialization - <tooltip outputclass="btn-secondary" position="top"> + <tooltip outputclass="btn-solid theme-secondary" position="top"> <desc>Tooltip on top</desc> Tooltip on top </tooltip> -<tooltip outputclass="btn-secondary" position="right"> +<tooltip outputclass="btn-solid theme-secondary" position="right"> <desc>Tooltip on right</desc> Tooltip on right </tooltip> -<tooltip outputclass="btn-secondary" position="bottom"> +<tooltip outputclass="btn-solid theme-secondary" position="bottom"> <desc>Tooltip on bottom</desc> Tooltip on bottom </tooltip> -<tooltip outputclass="btn-secondary" position="left"> +<tooltip outputclass="btn-solid theme-secondary" position="left"> <desc>Tooltip on left</desc> Tooltip on left </tooltip>
    <xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-secondary tooltip-top"> + <xref href="#" outputclass="btn-solid theme-secondary tooltip-top"> <desc>Tooltip on top</desc> Tooltip on top </xref> -<xref href="#" outputclass="btn-secondary tooltip-right"> +<xref href="#" outputclass="btn-solid theme-secondary tooltip-right"> <desc>Tooltip on right</desc> Tooltip on right </xref> -<xref href="#" outputclass="btn-secondary tooltip-bottom"> +<xref href="#" outputclass="btn-solid theme-secondary tooltip-bottom"> <desc>Tooltip on bottom</desc> Tooltip on bottom </xref> -<xref href="#" outputclass="btn-secondary tooltip-left"> +<xref href="#" outputclass="btn-solid theme-secondary tooltip-left"> <desc>Tooltip on left</desc> Tooltip on left </xref> @@ -118,7 +142,7 @@

    Custom HTML can be added to tooltips using additional DITA elements within the desc

    - + Tooltip with DITA elements Tooltip with embedded DITA @@ -126,14 +150,14 @@
    Specialization - <tooltip outputclass="btn-secondary"> + <tooltip outputclass="btn-solid theme-secondary"> <desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> Tooltip with embedded DITA </tooltip>
    <xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-secondary tooltip-top"> + <xref href="#" outputclass="btn-solid theme-secondary tooltip-top"> <desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> Tooltip with embedded DITA </xref> @@ -148,7 +172,7 @@ Tooltip with embedded DITA --bs-tooltip-bg: var(--bs-primary); } - + custom-tooltip This top tooltip is themed via CSS variables. Custom tooltip @@ -157,7 +181,7 @@ Tooltip with embedded DITA
    Specialization - <tooltip outputclass="btn-secondary"> + <tooltip outputclass="btn-solid theme-secondary"> <data name="class">custom-tooltip</data> <desc>This top tooltip is themed via CSS variables.</desc> Custom tooltip @@ -165,7 +189,7 @@ Tooltip with embedded DITA
    <xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-secondary tooltip-top"> + <xref href="#" outputclass="btn-solid theme-secondary tooltip-top"> <data name="class">custom-tooltip</data> <desc>This top tooltip is themed via CSS variables.</desc> Custom tooltip From 8056d64e0b85efa059c5a8d8fa20fb7e11f79e56 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Tue, 11 Aug 2026 20:24:54 +0200 Subject: [PATCH 28/43] Use theme colors --- sample/popovers.dita | 24 ++++++++++++------------ sample/tooltips.dita | 24 ++++++++++++------------ 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/sample/popovers.dita b/sample/popovers.dita index c66b8e3..a5bf0a5 100644 --- a/sample/popovers.dita +++ b/sample/popovers.dita @@ -52,14 +52,14 @@
    - + Popover title And here’s some amazing content. It’s very engaging. Right? Click to toggle popover
    Specialization - <popover outputclass="btn-lg btn-solid theme-danger"> + <popover outputclass="btn-lg btn-solid" color="danger"> <data name="title">Popover title</data> <desc>And here’s some amazing content. It’s very engaging. Right?</desc> Click to toggle popover @@ -84,31 +84,31 @@ popover is appended to the output-class or taken from the attribute.

    - + Top popover Popover on top - + Right Popover Popover on right - + Bottom popover Popover on bottom - + Left popover Popover on left
    Specialization - <popover outputclass="btn-solid theme-secondary" position="top"> + <popover outputclass="btn-solid" color="secondary" position="top"> <desc>Top popover</desc> Popover on top </popover> -<popover outputclass="btn-solid theme-secondary" position="right"> +<popover outputclass="btn-solid" color="secondary" position="right"> <desc>Right Popover</desc> Popover on right </popover> -<popover outputclass="btn-solid theme-secondary" position="bottom"> +<popover outputclass="btn-solid" color="secondary" position="bottom"> <desc>Bottom popover</desc> Popover on bottom </popover> -<popover outputclass="btn-solid theme-secondary" position="left"> +<popover outputclass="btn-solid" color="secondary" position="left"> <desc>Left popover</desc> Popover on left </popover> @@ -149,7 +149,7 @@ }
    - + Popover title custom-popover And here’s some amazing content. It’s very engaging. Right?Custom popover @@ -157,7 +157,7 @@
    Specialization - <popover outputclass="btn-lg btn-solid theme-danger"> + <popover outputclass="btn-lg btn-solid" color="danger"> <data name="title">Popover title</data> <data name="class">custom-popover</data> <desc>And here’s some amazing content. It’s very engaging. Right?</desc> diff --git a/sample/tooltips.dita b/sample/tooltips.dita index 3890db9..53c8033 100644 --- a/sample/tooltips.dita +++ b/sample/tooltips.dita @@ -90,31 +90,31 @@

    Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.

    - + Tooltip on top Tooltip on top - + Tooltip on right Tooltip on right - + Tooltip on bottom Tooltip on bottom - + Tooltip on left Tooltip on left
    Specialization - <tooltip outputclass="btn-solid theme-secondary" position="top"> + <tooltip outputclass="btn-solid" color="secondary" position="top"> <desc>Tooltip on top</desc> Tooltip on top </tooltip> -<tooltip outputclass="btn-solid theme-secondary" position="right"> +<tooltip outputclass="btn-solid" color="secondary" position="right"> <desc>Tooltip on right</desc> Tooltip on right </tooltip> -<tooltip outputclass="btn-solid theme-secondary" position="bottom"> +<tooltip outputclass="btn-solid" color="secondary" position="bottom"> <desc>Tooltip on bottom</desc> Tooltip on bottom </tooltip> -<tooltip outputclass="btn-solid theme-secondary" position="left"> +<tooltip outputclass="btn-solid" color="secondary" position="left"> <desc>Tooltip on left</desc> Tooltip on left </tooltip> @@ -142,7 +142,7 @@

    Custom HTML can be added to tooltips using additional DITA elements within the desc

    - + Tooltip with DITA elements Tooltip with embedded DITA @@ -150,7 +150,7 @@
    Specialization - <tooltip outputclass="btn-solid theme-secondary"> + <tooltip outputclass="btn-solid" color="secondary"> <desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> Tooltip with embedded DITA </tooltip> @@ -172,7 +172,7 @@ Tooltip with embedded DITA --bs-tooltip-bg: var(--bs-primary); } - + custom-tooltip This top tooltip is themed via CSS variables. Custom tooltip @@ -181,7 +181,7 @@ Tooltip with embedded DITA
    Specialization - <tooltip outputclass="btn-solid theme-secondary"> + <tooltip outputclass="btn-solid" color="secondary"> <data name="class">custom-tooltip</data> <desc>This top tooltip is themed via CSS variables.</desc> Custom tooltip From 460dbf1c5f0f24f0d1b93d8a3ade77c51b4ffea4 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Tue, 11 Aug 2026 20:48:08 +0200 Subject: [PATCH 29/43] Reorder command line parameters. --- sample/index.dita | 220 +++++++++++++++++++++++++++++----------------- 1 file changed, 137 insertions(+), 83 deletions(-) diff --git a/sample/index.dita b/sample/index.dita index 64d62ec..a232bb6 100644 --- a/sample/index.dita +++ b/sample/index.dita @@ -626,36 +626,11 @@ scope="external" >dita-bootstrap.github.io/dita-bootstrap.
    -
    - Common Bootstrap utility classes - --bootstrap.css.shortdesc - --bootstrap.css.codeblock - --bootstrap.css.topic.title - --bootstrap.css.section.title - --bootstrap.css.badge - --bootstrap.css.button - --bootstrap.css.card - --bootstrap.css.carousel - --bootstrap.css.carousel.caption - --bootstrap.css.carousel.indicators - --bootstrap.css.footer - --bootstrap.css.menubar.toc - --bootstrap.css.table - --bootstrap.css.tabs - --bootstrap.css.tabs.vertical - --bootstrap.css.thead - --bootstrap.css.accordion +
    + Accessibility utility classes --bootstrap.css.accessibility.nav --bootstrap.css.accessibility.link - --bootstrap.css.figure - --bootstrap.css.figure.caption - --bootstrap.css.figure.image - --bootstrap.css.dl - --bootstrap.css.dt - --bootstrap.css.dd - --bootstrap.css.nav.parent - --bootstrap.css.example -

    The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for +

    The HTML output for accessibility-related elements can be annotated with common Bootstrap utility classes for borders, + +

    +
    + Bootstrap component utility classes + --bootstrap.css.badge + --bootstrap.css.button + --bootstrap.css.card + --bootstrap.css.card.title + --bootstrap.css.card.width + --bootstrap.css.carousel + --bootstrap.css.carousel.caption + --bootstrap.css.carousel.indicators + --bootstrap.css.container.size + --bootstrap.css.footer + --bootstrap.css.menubar.toc + --bootstrap.css.nav.parent + --bootstrap.css.pagination + --bootstrap.css.popover + --bootstrap.css.tabs + --bootstrap.css.tabs.vertical + --bootstrap.css.tooltip + --bootstrap.css.accordion +

    The HTML output for the following Bootstrap components can be annotated with common Bootstrap utility classes for + borders, + background, + text, + spacing, + etc. using additional command line parameters:

    + --bootstrap.css​.accordion @@ -763,15 +772,6 @@ carousel indicators - - - --bootstrap.css​.codeblock - - - Common Bootstrap utility classes for DITA - codeblock elements - - --bootstrap.css​.container​.size @@ -785,141 +785,195 @@ - --bootstrap.css​.dd + --bootstrap.css​.footer - Common Bootstrap utility classes for DITA - dd definition description elements + + Common utility classes for the HTML + footer element - --bootstrap.css​.dl + --bootstrap.css​.menubar​.toc - Common Bootstrap utility classes for DITA - dl definition list elements + + CSS class for the menu bar. Defaults to + - --bootstrap.css​.dt + --bootstrap.css​.nav​.parent - Common Bootstrap utility classes for DITA - dt definition term elements + + Common Bootstrap utility classes for ancestors of active nav-pill elements - --bootstrap.css​.example + --bootstrap.css​.pagination - Common Bootstrap utility classes for DITA - example elements + Common utility classes for Bootstrap + pagination components + + + + + --bootstrap.css​.popover + + + Common utility classes for Bootstrap + popover components - --bootstrap.css​.figure + --bootstrap.css​.tabs - Common Bootstrap utility classes for DITA - fig elements + + Common utility classes for Bootstrap + tabbed dialog components - --bootstrap.css​.figure​.caption + --bootstrap.css​.tabs​.vertical - Common Bootstrap utility classes for DITA - title elements within fig elements + Common utility classes for Bootstrap + vertical tabbed dialog components + + + --bootstrap.css​.tooltip + + + Common utility classes for Bootstrap + tooltip components + + + +
    +
    + DITA element utility classes + --bootstrap.css.shortdesc + --bootstrap.css.codeblock + --bootstrap.css.topic.title + --bootstrap.css.section.title + --bootstrap.css.table + --bootstrap.css.figure + --bootstrap.css.figure.caption + --bootstrap.css.figure.image + --bootstrap.css.dl + --bootstrap.css.dt + --bootstrap.css.dd + --bootstrap.css.example +

    The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for + borders, + background, + text, + spacing, + etc. using additional command line parameters:

    + - --bootstrap.css​.figure​.image + --bootstrap.css​.codeblock Common Bootstrap utility classes for DITA - image elements within fig elements + codeblock elements - --bootstrap.css​.footer + --bootstrap.css​.dd - - Common utility classes for the HTML - footer element + Common Bootstrap utility classes for DITA + dd definition description elements - --bootstrap.css​.menubar​.toc + --bootstrap.css​.dl - - CSS class for the menu bar. Defaults to - + Common Bootstrap utility classes for DITA + dl definition list elements - --bootstrap.css​.nav​.parent + --bootstrap.css​.dt - - Common Bootstrap utility classes for ancestors of active nav-pill elements + Common Bootstrap utility classes for DITA + dt definition term elements - --bootstrap.css​.pagination + --bootstrap.css​.example - Common utility classes for Bootstrap - pagination components + Common Bootstrap utility classes for DITA + example elements - --bootstrap.css​.section​.title + --bootstrap.css​.figure + + Common Bootstrap utility classes for DITA + fig elements + + + + + --bootstrap.css​.figure​.caption Common Bootstrap utility classes for DITA - title elements within section elements + title elements within fig elements - --bootstrap.css​.shortdesc + --bootstrap.css​.figure​.image Common Bootstrap utility classes for DITA - shortdesc elements + image elements within fig elements - --bootstrap.css​.table + --bootstrap.css​.section​.title Common Bootstrap utility classes for DITA - table elements + title elements within section elements - --bootstrap.css​.tabs + --bootstrap.css​.shortdesc - Common utility classes for Bootstrap - tabbed dialog components + Common Bootstrap utility classes for DITA + shortdesc elements - --bootstrap.css​.tabs​.vertical + --bootstrap.css​.table - Common utility classes for Bootstrap - vertical tabbed dialog components + Common Bootstrap utility classes for DITA + table elements From e22c1e6c7555cea935aa618455c7af87c5c2ad47 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 12 Aug 2026 06:56:13 +0200 Subject: [PATCH 30/43] Update favicon --- .github/dita-ot/favicon.svg | 50 ++++++++++++++++++++++++++----------- 1 file changed, 35 insertions(+), 15 deletions(-) diff --git a/.github/dita-ot/favicon.svg b/.github/dita-ot/favicon.svg index 1b58a0e..6272e37 100644 --- a/.github/dita-ot/favicon.svg +++ b/.github/dita-ot/favicon.svg @@ -1,16 +1,36 @@ - - - + + + + + + + + + + + + + + 6 From 16c36bb0bddc81d3d5f4f8da9e2b4a3bd47ad2fc Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 12 Aug 2026 15:41:24 +0200 Subject: [PATCH 31/43] Add theme parameters --- .github/dita-ot/html.xml | 2 + sample/index.dita | 93 +++++++++++++++++++++++++++++----------- 2 files changed, 71 insertions(+), 24 deletions(-) diff --git a/.github/dita-ot/html.xml b/.github/dita-ot/html.xml index 42cf6a6..96965f2 100644 --- a/.github/dita-ot/html.xml +++ b/.github/dita-ot/html.xml @@ -29,6 +29,8 @@ + + diff --git a/sample/index.dita b/sample/index.dita index a232bb6..e10b985 100644 --- a/sample/index.dita +++ b/sample/index.dita @@ -626,20 +626,18 @@ scope="external" >dita-bootstrap.github.io/dita-bootstrap.
    -
    - Accessibility utility classes - --bootstrap.css.accessibility.nav +
    + Bootstrap Themes --bootstrap.css.accessibility.link -

    The HTML output for accessibility-related elements can be annotated with common Bootstrap utility classes for - borders, - background, - text, - spacing, - etc. using additional command line parameters:

    + --bootstrap.theme.accessibility + --bootstrap.theme.body + --bootstrap.theme.content + --bootstrap.theme.footer + --bootstrap.theme.header + --bootstrap.theme.scrollspy + --bootstrap.theme.sidebar + --bootstrap.theme.topbar +

    Layout regions can be styled with a Bootstrap theme color using additional command line parameters.

    @@ -651,12 +649,69 @@ - --bootstrap.css​.accessibility​.nav + --bootstrap.theme​.accessibility Common Bootstrap utility classes for accessibility navigation + + + --bootstrap.theme​.body + + + Theme utility class for the page body. + Defaults to + + + + + --bootstrap.theme​.content + + + Theme utility class for the main content area. Defaults to + + + + + --bootstrap.theme​.footer + + + Theme utility class for the page footer. Defaults to + + + + + --bootstrap.theme​.header + + + Theme utility class for the page header. Defaults to + + + + + --bootstrap.theme​.scrollspy + + + Theme utility class for the scrollspy menu. Defaults to + + + + + --bootstrap.theme​.sidebar + + + Theme utility class for the sidebar navigation. Defaults to + + + + + --bootstrap.theme​.topbar + + + Theme utility class for the collapsible top header. Defaults to + +
    @@ -670,7 +725,6 @@ --bootstrap.css.carousel.caption --bootstrap.css.carousel.indicators --bootstrap.css.container.size - --bootstrap.css.footer --bootstrap.css.menubar.toc --bootstrap.css.nav.parent --bootstrap.css.pagination @@ -783,15 +837,6 @@ >container class for main layout and menubar-TOC - - - --bootstrap.css​.footer - - - Common utility classes for the HTML - footer element - - --bootstrap.css​.menubar​.toc From 68a03066db1b9d6a77deb58ee2a227b2263cbb2c Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 12 Aug 2026 19:12:46 +0200 Subject: [PATCH 32/43] Add theme --- dtd/base/bootstrapCommonElements.mod | 70 +++-- dtd/base/bootstrapDomain.mod | 76 ++++-- sample/accordion.dita | 6 +- sample/alerts.dita | 92 +++---- sample/badge.dita | 114 ++++----- sample/borders.dita | 65 ++--- sample/button-group.dita | 60 ++--- sample/buttons.dita | 242 +++++++++--------- sample/card.dita | 14 +- sample/carousel.dita | 8 +- sample/collapse.dita | 10 +- sample/color.dita | 102 ++++---- sample/document.ditamap | 1 + sample/drawer.dita | 12 +- sample/grid.dita | 4 +- sample/icons.dita | 56 ++-- sample/pagination.dita | 44 ++-- sample/popovers.dita | 24 +- sample/rtl.dita | 6 +- sample/shadows.dita | 18 +- sample/spacing.dita | 68 ++--- sample/tables.dita | 28 +- sample/tabs.dita | 6 +- sample/theme.dita | 367 +++++++++++++++++++++++++++ sample/tooltips.dita | 24 +- 25 files changed, 971 insertions(+), 546 deletions(-) create mode 100644 sample/theme.dita diff --git a/dtd/base/bootstrapCommonElements.mod b/dtd/base/bootstrapCommonElements.mod index e7376c0..eb83b65 100644 --- a/dtd/base/bootstrapCommonElements.mod +++ b/dtd/base/bootstrapCommonElements.mod @@ -9,10 +9,39 @@ - + + + + + + + + + - + + @@ -29,22 +63,23 @@ - + - - - - - - - + + + + + + + @@ -63,9 +98,8 @@ > + + + + + + @@ -88,14 +113,13 @@ > - - + @@ -193,10 +216,9 @@ @@ -235,7 +257,7 @@ %univ-atts;"> diff --git a/sample/accordion.dita b/sample/accordion.dita index 5b51c82..8496b82 100644 --- a/sample/accordion.dita +++ b/sample/accordion.dita @@ -40,7 +40,7 @@ Example

    Click the accordions below to expand/collapse the accordion content.

    - + Accordion Item #1 @@ -146,7 +146,7 @@ background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

    - + Accordion Item #1 @@ -187,7 +187,7 @@ Always open

    Set open="yes" to make accordion items stay open when another item is opened.

    - + Accordion Item #1 diff --git a/sample/alerts.dita b/sample/alerts.dita index 69777c3..0fdefd5 100644 --- a/sample/alerts.dita +++ b/sample/alerts.dita @@ -31,7 +31,7 @@

    Alerts are available for any length of text, as well as an optional close button. Alerts are designed to be used with theme colors, but have neutral fallback colors for when no theme color is applied.

    - + A simple alert — check it out! @@ -52,43 +52,43 @@
    Variants

    Use any of the eight variant theme classes for color mode adaptive, contextual styling (e.g., set - color to success).

    + theme to success).

    - - A simple primary alert—check it out! - A simple secondary alert—check it out! - A simple success alert—check it out! - A simple danger alert—check it out! - A simple warning alert—check it out! - A simple info alert—check it out! - A simple accent alert—check it out! - A simple inverse alert—check it out! + + A simple primary alert—check it out! + A simple secondary alert—check it out! + A simple success alert—check it out! + A simple danger alert—check it out! + A simple warning alert—check it out! + A simple info alert—check it out! + A simple accent alert—check it out! + A simple inverse alert—check it out!
    Specialization - <alert color="primary"> + <alert theme="primary-subtle-border"> A simple primary alert — check it out! </alert> -<alert color="secondary"> +<alert theme="secondary-subtle-border"> A simple secondary alert — check it out! </alert> -<alert color="success"> +<alert theme="success-subtle-border"> A simple success alert — check it out! </alert> -<alert color="danger"> +<alert theme="danger-subtle-border"> A simple danger alert — check it out! </alert> -<alert color="warning"> +<alert theme="warning-subtle-border"> A simple warning alert — check it out! </alert> -<alert color="info"> +<alert theme="info-subtle-border"> A simple info alert — check it out! </alert> -<alert color="accent"> +<alert theme="accent-subtle-border"> A simple accent alert — check it out! </alert> -<alert color="inverse"> +<alert theme="inverse-subtle-border"> A simple inverse alert — check it out! </alert>
    @@ -125,8 +125,8 @@ Additional content

    Alerts can also contain additional HTML elements like headings, paragraphs, icons and links.

    - - + + <icon outputclass="bi-emoji-smile" padding="e2"/>Well done!

    Aww yeah, you successfully read this important alert message. This example text with a link is going to run a bit longer so that you can see how spacing within an alert works @@ -137,7 +137,7 @@

    Specialization - <alert color="success" outputclass="vstack"> + <alert theme="success-contrast" outputclass="vstack"> <title><icon outputclass="bi-emoji-smile" padding="e2"/>Well done!</title> <p> Aww yeah, you successfully read this important alert message. This example text with a @@ -151,7 +151,7 @@
    <xmlatt>outputclass</xmlatt> - <section outputclass="alert theme-success vstack"> + <section outputclass="alert theme-success theme-contrast vstack"> <title><i outputclass="bi bi-emoji-smile pe-2"/>Well done!</title> <p> Aww yeah, you successfully read this important alert message. This example text with a @@ -170,8 +170,8 @@

    Similarly, you can use flexbox utilities and Bootstrap Icons to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.

    - - + +
    An example alert with an icon
    @@ -180,7 +180,7 @@
    Specialization - <alert color="primary"> + <alert theme="primary-subtle-border"> <div> <icon outputclass="bi-exclamation-triangle-fill flex-shrink-0" padding="e2"/>An example alert with an icon </div> @@ -249,38 +249,38 @@

    The default colors can be overridden by using a color attribute or an outputclass.

    - This is a primary note. - This is a secondary note. - This is accent note. - This is inverse note. + This is a high contrast primary note. + This is a high contrast secondary note. + This is a high contrast accent note. + This is a high contrast inverse note.
    Specialization - <note color="primary"> - This is a primary note. + <note theme="primary-contrast"> + This is a high contrast primary note. </note> -<note color="secondary"> - This is a secondary note. +<note theme="secondary-contrast"> + This is a high contrast secondary note. </note> -<note color="accent"> - This is accent note. +<note theme="accent-contrast"> + This is a high contrast accent note. </note> -<note color="inverse"> - This is inverse note. +<note theme="inverse-contrast"> + This is a high contrast inverse note. </note>
    <xmlatt>outputclass</xmlatt> - <note type="note" outputclass="theme-primary"> - This is a primary note.</note> -<note type="note" outputclass="theme-secondary"> - This is a secondary note.</note> -<note type="note" outputclass="theme-accent"> - This is accent note. + <note type="note" outputclass="theme-primary theme-contrast"> + This is a high contrast primary note.</note> +<note type="note" outputclass="theme-secondary theme-contrast"> + This is a high contrast secondary note.</note> +<note type="note" outputclass="theme-accent theme-contrast"> + This is a high contrast accent note. </note> -<note type="note" outputclass="theme-inverse"> - This is inverse note. +<note type="note" outputclass="theme-inverse theme-contrast"> + This is a high contrast inverse note. </note>
    diff --git a/sample/badge.dita b/sample/badge.dita index 9480258..6e3ff4d 100644 --- a/sample/badge.dita +++ b/sample/badge.dita @@ -30,19 +30,19 @@ immediate parent element by using relative font sizing and em units.

    Badges come in three variants: solid (default), subtle, and outline.

    - +

    - New - New - New + New + New + New

    Specialization - <badge color="primary">New</badge> -<badge color="primary" style="subtle">New</badge> -<badge color="primary" style="outline">New</badge> + <badge theme="primary">New</badge> +<badge theme="primary-subtle">New</badge> +<badge theme="primary-outline">New</badge>
    <xmlatt>outputclass</xmlatt> @@ -56,7 +56,7 @@ Headings

    Badges adapt to the font-size of the parent element.

    - +

    Example heading New

    Example heading New

    @@ -80,70 +80,70 @@
    Variants -

    Use the contextual color attribute to apply a semantic theme color to badges, in any of the +

    Use the contextual theme attribute to apply a semantic theme color to badges, in any of the solid, subtle, or outline styles.

    - Primary - Secondary - Success - Danger - Warning - Info - Accent - Inverse + Primary + Secondary + Success + Danger + Warning + Info + Accent + Inverse

    - Primary - Secondary - Success - Danger - Warning - Info - Accent - Inverse + Primary + Secondary + Success + Danger + Warning + Info + Accent + Inverse

    - Primary - Secondary - Success - Danger - Warning - Info - Accent - Inverse + Primary + Secondary + Success + Danger + Warning + Info + Accent + Inverse

    Specialization - <badge color="primary">Primary</badge> -<badge color="secondary">Secondary</badge> -<badge color="success">Success</badge> -<badge color="danger">Danger</badge> -<badge color="warning">Warning</badge> -<badge color="info">Info</badge> -<badge color="accent">Accent</badge> -<badge color="inverse">Inverse</badge> + <badge theme="primary">Primary</badge> +<badge theme="secondary">Secondary</badge> +<badge theme="success">Success</badge> +<badge theme="danger">Danger</badge> +<badge theme="warning">Warning</badge> +<badge theme="info">Info</badge> +<badge theme="accent">Accent</badge> +<badge theme="inverse">Inverse</badge> -<badge color="primary" style="subtle">Primary</badge> -<badge color="secondary" style="subtle">Secondary</badge> -<badge color="success" style="subtle">Success</badge> -<badge color="danger" style="subtle">Danger</badge> -<badge color="warning" style="subtle">Warning</badge> -<badge color="info" style="subtle">Info</badge> -<badge color="accent" style="subtle">Accent</badge> -<badge color="inverse" style="subtle">Inverse</badge> +<badge theme="primary-subtle">Primary</badge> +<badge theme="secondary-subtle">Secondary</badge> +<badge theme="success-subtle">Success</badge> +<badge theme="danger-subtle">Danger</badge> +<badge theme="warning-subtle">Warning</badge> +<badge theme="info-subtle">Info</badge> +<badge theme="accent-subtle">Accent</badge> +<badge theme="inverse-subtle">Inverse</badge> -<badge color="primary" style="outline">Primary</badge> -<badge color="secondary" style="outline">Secondary</badge> -<badge color="success" style="outline">Success</badge> -<badge color="danger" style="outline">Danger</badge> -<badge color="warning" style="outline">Warning</badge> -<badge color="info" style="outline">Info</badge> -<badge color="accent" style="outline">Accent</badge> -<badge color="inverse" style="outline">Inverse</badge> +<badge theme="primary-outline">Primary</badge> +<badge theme="secondary-outline">Secondary</badge> +<badge theme="success-outline">Success</badge> +<badge theme="danger-outline">Danger</badge> +<badge theme="warning-outline">Warning</badge> +<badge theme="info-outline">Info</badge> +<badge theme="accent-outline">Accent</badge> +<badge theme="inverse-outline">Inverse</badge>
    <xmlatt>outputclass</xmlatt> diff --git a/sample/borders.dita b/sample/borders.dita index 411f692..3606fac 100644 --- a/sample/borders.dita +++ b/sample/borders.dita @@ -53,17 +53,17 @@ >rounded attributes provide a semantic way to add borders and rounded corners.

    - -
    + +
    Bordered Section

    This section has a border.

    -
    +

    This div has a border and rounded corners.

    - + @@ -76,15 +76,15 @@
    Specialization - <section border="yes" padding="2"> + <section border="1" padding="2"> ... </section> -<div border="yes" rounded="yes" padding="2" margin="2"> +<div border="1" rounded="yes" padding="2" margin="2"> ... </div> -<carousel border="yes" rounded="yes" margin="2" width="50"> +<carousel border="1" rounded="yes" margin="2" width="50"> <carousel-item> <image href="..."/> </carousel-item> @@ -113,7 +113,8 @@

    The border attribute also accepts numeric values 1-5 for width. The rounded attribute supports values 0-5, circle and pill. - The bordercolor attribute can be used to set the color of the border.

    + The -border theme suffix (e.g. theme="primary-border") can be used to set + the color of the border.

    @@ -146,19 +147,19 @@
    - Primary - Primary subtle - Success - Danger + Primary + Primary subtle + Success + Danger
    Specialization - <ph bordercolor="primary">Primary</ph> -<ph bordercolor="primary-subtle">Primary subtle</ph> -<ph bordercolor="success">Success</ph> -<ph bordercolor="danger">Danger</ph> + <ph theme="primary-border">Primary</ph> +<ph theme="primary-subtle-border">Primary subtle</ph> +<ph theme="success-border">Success</ph> +<ph theme="danger-border">Danger</ph>
    <xmlatt>outputclass</xmlatt> @@ -171,23 +172,23 @@
    - Rounded 0 - Rounded 1 - Rounded 2 - Rounded 3 - Rounded 4 - Rounded 5 + Rounded 0 + Rounded 1 + Rounded 2 + Rounded 3 + Rounded 4 + Rounded 5
    Specialization - <ph border="yes" rounded="0">Rounded 0</ph> -<ph border="yes" rounded="1">Rounded 1</ph> -<ph border="yes" rounded="2">Rounded 2</ph> -<ph border="yes" rounded="3">Rounded 3</ph> -<ph border="yes" rounded="4">Rounded 4</ph> -<ph border="yes" rounded="5">Rounded 5</ph> + <ph border="1" rounded="0">Rounded 0</ph> +<ph border="1" rounded="1">Rounded 1</ph> +<ph border="1" rounded="2">Rounded 2</ph> +<ph border="1" rounded="3">Rounded 3</ph> +<ph border="1" rounded="4">Rounded 4</ph> +<ph border="1" rounded="5">Rounded 5</ph>
    <xmlatt>outputclass</xmlatt> @@ -202,15 +203,15 @@
    - Circle - Pill + Circle + Pill
    Specialization - <ph border="yes" rounded="circle" bordercolor="info">Circle</ph> -<ph border="yes" rounded="pill" bordercolor="warning">Pill</ph> + <ph border="1" rounded="circle" theme="info-border">Circle</ph> +<ph border="1" rounded="pill" theme="warning-border">Pill</ph>
    <xmlatt>outputclass</xmlatt> diff --git a/sample/button-group.dita b/sample/button-group.dita index 7df7dbf..99ef9ab 100644 --- a/sample/button-group.dita +++ b/sample/button-group.dita @@ -40,9 +40,9 @@
    Specialization <button-group> - <button color="primary" href="#">Left</button> - <button color="primary" href="#">Middle</button> - <button color="primary" href="#">Right</button> + <button theme="primary" href="#">Left</button> + <button theme="primary" href="#">Middle</button> + <button theme="primary" href="#">Right</button> </button-group>
    @@ -59,18 +59,18 @@
    - - - + + +
    Specialization <button-group> - <button color="danger" href="#">Left</button> - <button color="warning" href="#">Middle</button> - <button color="success" href="#">Right</button> + <button theme="danger" href="#">Left</button> + <button theme="warning" href="#">Middle</button> + <button theme="success" href="#">Right</button> </button-group>
    @@ -87,18 +87,18 @@
    - - - + + +
    Specialization <button-group> - <button color="primary" style="outline" href="#">Left</button> - <button color="primary" style="outline" href="#">Middle</button> - <button color="primary" style="outline" href="#">Right</button> + <button theme="primary-outline" href="#">Left</button> + <button theme="primary-outline" href="#">Middle</button> + <button theme="primary-outline" href="#">Right</button> </button-group>
    @@ -123,12 +123,12 @@ - - - + + + - + @@ -137,18 +137,18 @@ Specialization <button-toolbar> <button-group outputclass="me-2"> - <button color="primary" href="#">1</button> - <button color="primary" href="#">2</button> - <button color="primary" href="#">3</button> - <button color="primary" href="#">4</button> + <button theme="primary" href="#">1</button> + <button theme="primary" href="#">2</button> + <button theme="primary" href="#">3</button> + <button theme="primary" href="#">4</button> </button-group> <button-group outputclass="me-2"> - <button color="secondary" href="#">5</button> - <button color="secondary" href="#">6</button> - <button color="secondary" href="#">7</button> + <button theme="secondary" href="#">5</button> + <button theme="secondary" href="#">6</button> + <button theme="secondary" href="#">7</button> </button-group> <button-group outputclass="me-2"> - <button color="info" href="#">8</button> + <button theme="info" href="#">8</button> </button-group> </button-toolbar>
    @@ -187,9 +187,9 @@
    Specialization <button-group vertical="yes"> - <button color="primary" href="#">Top</button> - <button color="primary" href="#">Middle</button> - <button color="primary" href="#">Bottom</button> + <button theme="primary" href="#">Top</button> + <button theme="primary" href="#">Middle</button> + <button theme="primary" href="#">Bottom</button> </button-group>
    diff --git a/sample/buttons.dita b/sample/buttons.dita index 484d3bc..7f34532 100644 --- a/sample/buttons.dita +++ b/sample/buttons.dita @@ -31,12 +31,12 @@ class to apply different visual styles for a specific button variant and theme.

    - +
    Specialization - <button style="none">Base class</button> + <button>Base class</button>
    <xmlatt>outputclass</xmlatt> @@ -50,27 +50,27 @@ thrown in for more control.

    - - - - - - - - + + + + + + + +
    Specialization - <button href="#" color="primary">Primary</button> -<button href="#" color="secondary">Secondary</button> -<button href="#" color="success">Success</button> -<button href="#" color="danger">Danger</button> -<button href="#" color="warning">Warning</button> -<button href="#" color="info">Info</button> -<button href="#" color="accent">Accent</button> -<button href="#" color="inverse">Inverse</button> + <button href="#" theme="primary">Primary</button> +<button href="#" theme="secondary">Secondary</button> +<button href="#" theme="success">Success</button> +<button href="#" theme="danger">Danger</button> +<button href="#" theme="warning">Warning</button> +<button href="#" theme="info">Info</button> +<button href="#" theme="accent">Accent</button> +<button href="#" theme="inverse">Inverse</button>
    <xmlatt>outputclass</xmlatt> @@ -90,155 +90,155 @@

    Compare the solid (default), outline, subtle, and text button styles at once, combined with theme colors.

    - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
    Specialization - <button href="#" color="primary">Primary</button> -<button href="#" color="primary" style="outline">Primary</button> -<button href="#" color="primary" style="subtle">Primary</button> -<button href="#" color="primary" style="text">Primary</button> -<button href="#" color="secondary">Secondary</button> -<button href="#" color="secondary" style="outline">Secondary</button> -<button href="#" color="secondary" style="subtle">Secondary</button> -<button href="#" color="secondary" style="text">Secondary</button> -<button href="#" color="success">Success</button> -<button href="#" color="success" style="outline">Success</button> -<button href="#" color="success" style="subtle">Success</button> -<button href="#" color="success" style="text">Success</button> -<button href="#" color="danger">Danger</button> -<button href="#" color="danger" style="outline">Danger</button> -<button href="#" color="danger" style="subtle">Danger</button> -<button href="#" color="danger" style="text">Danger</button> -<button href="#" color="warning">Warning</button> -<button href="#" color="warning" style="outline">Warning</button> -<button href="#" color="warning" style="subtle">Warning</button> -<button href="#" color="warning" style="text">Warning</button> -<button href="#" color="info">Info</button> -<button href="#" color="info" style="outline">Info</button> -<button href="#" color="info" style="subtle">Info</button> -<button href="#" color="info" style="text">Info</button> -<button href="#" color="accent">Accent</button> -<button href="#" color="accent" style="outline">Accent</button> -<button href="#" color="accent" style="subtle">Accent</button> -<button href="#" color="accent" style="text">Accent</button> -<button href="#" color="inverse">Inverse</button> -<button href="#" color="inverse" style="outline">Inverse</button> -<button href="#" color="inverse" style="subtle">Inverse</button> -<button href="#" color="inverse" style="text">Inverse</button> + <button href="#" theme="primary">Primary</button> +<button href="#" theme="primary-outline">Primary</button> +<button href="#" theme="primary-subtle">Primary</button> +<button href="#" theme="primary-text">Primary</button> +<button href="#" theme="secondary">Secondary</button> +<button href="#" theme="secondary-outline">Secondary</button> +<button href="#" theme="secondary-subtle">Secondary</button> +<button href="#" theme="secondary-text">Secondary</button> +<button href="#" theme="success">Success</button> +<button href="#" theme="success-outline">Success</button> +<button href="#" theme="success-subtle">Success</button> +<button href="#" theme="success-text">Success</button> +<button href="#" theme="danger">Danger</button> +<button href="#" theme="danger-outline">Danger</button> +<button href="#" theme="danger-subtle">Danger</button> +<button href="#" theme="danger-text">Danger</button> +<button href="#" theme="warning">Warning</button> +<button href="#" theme="warning-outline">Warning</button> +<button href="#" theme="warning-subtle">Warning</button> +<button href="#" theme="warning-text">Warning</button> +<button href="#" theme="info">Info</button> +<button href="#" theme="info-outline">Info</button> +<button href="#" theme="info-subtle">Info</button> +<button href="#" theme="info-text">Info</button> +<button href="#" theme="accent">Accent</button> +<button href="#" theme="accent-outline">Accent</button> +<button href="#" theme="accent-subtle">Accent</button> +<button href="#" theme="accent-text">Accent</button> +<button href="#" theme="inverse">Inverse</button> +<button href="#" theme="inverse-outline">Inverse</button> +<button href="#" theme="inverse-subtle">Inverse</button> +<button href="#" theme="inverse-text">Inverse</button>
    <xmlatt>outputclass</xmlatt> @@ -284,26 +284,26 @@ variables.

    - - - - - - - - + + + + + + + +
    Specialization - <button href="#" color="primary" gradient="yes">Primary</button> -<button href="#" color="secondary" gradient="yes">Secondary</button> -<button href="#" color="success" gradient="yes">Success</button> -<button href="#" color="danger" gradient="yes">Danger</button> -<button href="#" color="warning" gradient="yes">Warning</button> -<button href="#" color="info" gradient="yes">Info</button> -<button href="#" color="accent" gradient="yes">Accent</button> -<button href="#" color="inverse" gradient="yes">Inverse</button> + <button href="#" theme="primary-styled">Primary</button> +<button href="#" theme="secondary-styled">Secondary</button> +<button href="#" theme="success-styled">Success</button> +<button href="#" theme="danger-styled">Danger</button> +<button href="#" theme="warning-styled">Warning</button> +<button href="#" theme="info-styled">Info</button> +<button href="#" theme="accent-styled">Accent</button> +<button href="#" theme="inverse-styled">Inverse</button>
    <xmlatt>outputclass</xmlatt> @@ -325,26 +325,26 @@ and colors on any button.

    - - - - - - - - + + + + + + + +
    Specialization - <button href="#" style="outline">Primary</button> -<button href="#" color="secondary" style="outline">Secondary</button> -<button href="#" color="success" style="outline">Success</button> -<button href="#" color="danger" style="outline">Danger</button> -<button href="#" color="warning" style="outline">Warning</button> -<button href="#" color="info" style="outline">Info</button> -<button href="#" color="accent" style="outline">Accent</button> -<button href="#" color="inverse" style="outline">Inverse</button> + <button href="#" theme="primary-outline">Primary</button> +<button href="#" theme="secondary-outline">Secondary</button> +<button href="#" theme="success-outline">Success</button> +<button href="#" theme="danger-outline">Danger</button> +<button href="#" theme="warning-outline">Warning</button> +<button href="#" theme="info-outline">Info</button> +<button href="#" theme="accent-outline">Accent</button> +<button href="#" theme="inverse-outline">Inverse</button>
    <xmlatt>outputclass</xmlatt> @@ -365,14 +365,14 @@
    - +
    Specialization <button href="#" size="large">Large button</button> -<button href="#" color="secondary" size="large">Large button</button> +<button href="#" theme="secondary" size="large">Large button</button>
    <xmlatt>outputclass</xmlatt> @@ -383,14 +383,14 @@ - +
    Specialization <button href="#" size="small">Small button</button> -<button href="#" color="secondary" size="small">Small button</button> +<button href="#" theme="secondary" size="small">Small button</button>
    <xmlatt>outputclass</xmlatt> @@ -401,14 +401,14 @@ - +
    Specialization <button href="#" size="xs">Extra small button</button> -<button href="#" color="secondary" size="xs">Extra small button</button> +<button href="#" theme="secondary" size="xs">Extra small button</button>
    <xmlatt>outputclass</xmlatt> diff --git a/sample/card.dita b/sample/card.dita index b924322..f33731b 100644 --- a/sample/card.dita +++ b/sample/card.dita @@ -47,7 +47,7 @@ >sizing options.

    - + Card Title @@ -81,7 +81,7 @@ card-link to an xref tag.

    Subtitles are used by adding a div element.

    - + Card Title
    Card Subtitle
    @@ -118,7 +118,7 @@ >card places an image to the top of the card

    - +

    Some quick example text to build on the card title and make up the bulk of the card’s content.

    @@ -146,7 +146,7 @@ >card-header and card-footer elements.

    - + Special title treatment Featured @@ -181,14 +181,14 @@

    A card can be colorized by adding a color attribute. This applies a contextual background color.

    - - + + Success Card

    Some quick example text to build on the card title and make up the bulk of the card’s content.

         - <card color="success"> + <card theme="success"> <card-header>Card Title</card-header> <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> <button href="#">Go Somewhere</button> diff --git a/sample/carousel.dita b/sample/carousel.dita index 93495f2..3fe9f78 100644 --- a/sample/carousel.dita +++ b/sample/carousel.dita @@ -216,7 +216,7 @@ - Is it for fear to wet a widow’s eye + Is it for fear to wet a widow’s eye That thou consum’st thyself in single life? Ah, if thou issueless shalt hap to die, The world will wail thee like a makeless wife; @@ -227,7 +227,7 @@ The world will wail thee like a makeless wife; - The world will be thy widow and still weep + The world will be thy widow and still weep That thou no form of thee hast left behind, When every private widow well may keep, By children’s eyes, her husband’s shape in mind. @@ -238,7 +238,7 @@ By children’s eyes, her husband’s shape in mind. - Look what an unthrift in the world doth spend + Look what an unthrift in the world doth spend Shifts but his place, for still the world enjoys it; But beauty’s waste hath in the world an end, And, kept unused, the user so destroys it. @@ -249,7 +249,7 @@ And, kept unused, the user so destroys it. - No love toward others in that bosom sits + No love toward others in that bosom sits That on himself such murd’rous shame commits. Sonnet 9 - William Shakespeare diff --git a/sample/collapse.dita b/sample/collapse.dita index a5c8388..f27446e 100644 --- a/sample/collapse.dita +++ b/sample/collapse.dita @@ -31,9 +31,9 @@ props="collapse-toggle" to an xref element to associate a button to a collapse

    - +

    - +

    @@ -46,7 +46,7 @@
    Specialization <p> - <button props="collapse-toggle" href="#collapse1"> + <button theme="primary" props="collapse-toggle" href="#collapse1"> Toggle Collapse </button> </p> @@ -76,9 +76,9 @@ to transition the width instead of height and set an otherprops="style(width: ...) on the immediate child div element.

    - +

    - +

    diff --git a/sample/color.dita b/sample/color.dita index 5673402..e7f478a 100644 --- a/sample/color.dita +++ b/sample/color.dita @@ -3,7 +3,7 @@ Color Convey meaning through color with a handful of color utility classes. Includes support for - styling text and background colors via the semantic color attribute. + styling text and background colors via the semantic theme attribute. @@ -12,7 +12,7 @@ CSS outputclass - color + theme @@ -20,31 +20,31 @@
    Colors

    Colorize text and backgrounds with color utilities. The color attribute provides a semantic way to apply standard Bootstrap color themes.

    + >theme attribute provides a semantic way to apply standard Bootstrap color themes.

    -
    .text-bg-primary
    -
    .text-bg-secondary
    -
    .text-bg-success
    -
    .text-bg-danger
    -
    .text-bg-warning
    -
    .text-bg-info
    -
    .text-bg-light
    -
    .text-bg-inverse
    +
    .text-bg-primary
    +
    .text-bg-secondary
    +
    .text-bg-success
    +
    .text-bg-danger
    +
    .text-bg-warning
    +
    .text-bg-info
    +
    .text-bg-light
    +
    .text-bg-inverse
    Specialization - <div color="primary">bg-primary</div> -<div color="secondary">bg-secondary</div> -<div color="success">bg-success</div> -<div color="danger">bg-danger</div> -<div color="warning">bg-warning</div> -<div color="info">bg-info</div> -<div color="accent">bg-accent</div> -<div color="inverse">bg-inverse</div> + <div theme="primary-contrast">bg-primary</div> +<div theme="secondary-contrast">bg-secondary</div> +<div theme="success-contrast">bg-success</div> +<div theme="danger-contrast">bg-danger</div> +<div theme="warning-contrast">bg-warning</div> +<div theme="info-contrast">bg-info</div> +<div theme="accent-contrast">bg-accent</div> +<div theme="inverse-contrast">bg-inverse</div>
    <xmlatt>outputclass</xmlatt> @@ -65,25 +65,25 @@ >Decoration attributes can be applied to many base DITA elements to add background color and contrasting text.

    - -
    + +
    Section Decoration

    This section has a primary color background.

    -
    +

    This div has a success color background.

    - 
    +      
             This pre has a warning color background.
       
    
 
-      
+      
         This is a long quote with a danger color background.
       
 
-      
+      
    
           
@@ -92,17 +92,17 @@
             
-            
+            
               Elephant (African and Asian)
               19-22 months
             
-            
+            
               Giraffe
               15 months
             
             
               Rhinoceros
-              14-16 months
+              14-16 months
             
             
               Hippopotamus
@@ -112,7 +112,7 @@
         
       
    
         
             
           
           
    
 
-      
+      
         This is a note with a primary color theme.
       
     
@@ -120,24 +120,24 @@
     
       
    
         Specialization
-        <section color="primary">
+        <section theme="primary-contrast">
   <title>Section Decoration</title>
   <p>This section has a primary color background.</p>
 </section>
 
-<div color="success" padding="3">
+<div theme="success-contrast" padding="3">
   <p>This div has a success color background.</p>
 </div>
 
-<pre color="warning">
+<pre theme="warning-contrast">
   This pre has a warning color background.
 </pre>
 
-<lq color="danger" padding="1">
+<lq theme="danger-contrast" padding="1">
   This is a long quote with a danger color background.
 </lq>
 
-<table color="primary" padding="1" width="100">
+<table theme="primary" padding="1" width="100">
   <tgroup cols="2">
     <thead>
       <row>
@@ -146,15 +146,15 @@
       </row>
     </thead>
     <tbody>
-      <row color="info">
+      <row theme="info">
         ...
       </row>
-      <row color="success">
+      <row theme="success">
         ...
       </row>
       <row>
         <entry>...</entry>
-        <entry color="danger">...</entry>
+        <entry theme="danger">...</entry>
       </row>
       <row>
         ...
@@ -163,7 +163,7 @@
   </tgroup>
 </table>
 
-<note color="primary">
+<note theme="primary-contrast">
   This is a note with a primary color theme.
 </note>
       
    
@@ -213,7 +213,7 @@
   </tgroup>
 </table>
 
-<note color="primary">
+<note outputclass="theme-primary theme-contrast">
   ...
 </note>
    @@ -221,30 +221,30 @@
    Specialized Elements -

    Many specialized components also support the color attribute for consistent theming.

    +

    Many specialized components also support the theme attribute for consistent theming.

    - + - - + + Success Card

    Some quick example text to build on the card title and make up the bulk of the card’s content.

     - + Accordion Item #1

    This is the first item's accordion body.

         - +
  • An item
  • A second item
    •  - + @@ -260,26 +260,26 @@
    Specialization - <thumbnail href="..." color="warning"/> + <thumbnail href="..." theme="warning-contrast"/> -<card color="success" width="50"> +<card theme="success-contrast" width="50"> <card-header>Card Title</card-header> <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> </card> -<accordion color="info"> +<accordion theme="info-contrast"> <accordion-item open="yes"> <title>Accordion Item #1</title> <p>This is the first item's accordion body.</p> </accordion-item> </accordion> -<list-group width="50" color="danger"> +<list-group width="50" theme="danger-contrast"> <li>An item</li> <li>A second item</li> </list-group> -<carousel color="inverse" width="50" indicators="yes"> +<carousel theme="inverse-contrast" width="50" indicators="yes"> <carousel-item> <image href="..."/> </carousel-item> diff --git a/sample/document.ditamap b/sample/document.ditamap index 32c1748..fb1429f 100644 --- a/sample/document.ditamap +++ b/sample/document.ditamap @@ -70,6 +70,7 @@ + diff --git a/sample/drawer.dita b/sample/drawer.dita index 01569e3..5dac517 100644 --- a/sample/drawer.dita +++ b/sample/drawer.dita @@ -48,7 +48,7 @@ props="drawer-toggle" to an xref element to associate a button to a drawer

    - + Drawer @@ -100,7 +100,7 @@ the viewport
    - + Drawer @@ -121,7 +121,7 @@ </section>
    - + Drawer @@ -149,9 +149,9 @@ >outputclass="drawer-lg" hides content in a drawer below the lg breakpoint, but shows the content above the lg breakpoint.

    - + Resize your browser to show the responsive drawer toggle. @@ -172,7 +172,7 @@
    Specialization - <note color="info" outputclass="d-none lg:d-block"> + <note theme="info" outputclass="d-none lg:d-block"> Resize your browser to show the responsive drawer toggle. </note> <button outputclass="lg:d-none" props="drawer-toggle" href="#drawer4"> diff --git a/sample/grid.dita b/sample/grid.dita index e15bf56..49b75ad 100644 --- a/sample/grid.dita +++ b/sample/grid.dita @@ -32,7 +32,7 @@ comes together. The grid-col element supports breakpoint and colspan attributes to define the column width at different screen sizes.

    - +

    One of three columns

    @@ -81,7 +81,7 @@ xxl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

    - +

    One of two columns

    diff --git a/sample/icons.dita b/sample/icons.dita index a817b3c..b71492e 100644 --- a/sample/icons.dita +++ b/sample/icons.dita @@ -57,42 +57,42 @@

    Icons placed within an xref element are colorized appropriately:

    - + Primary link

    - + Secondary link

    - + Success link

    - + Danger link

    - + Warning link

    - + Info link

    - + Light link

    - + Dark link

    @@ -100,28 +100,28 @@
    Specialization - <xref color="primary" href="#"> + <xref theme="primary-contrast" href="#"> <icon outputclass="bi-link"/> Primary link </xref> -<xref color="secondary" href="#"> +<xref theme="secondary-contrast" href="#"> <icon outputclass="bi-link"/> Secondary link </xref> -<xref color="success" href="#"> +<xref theme="success-contrast" href="#"> <icon outputclass="bi-link"/> Success link </xref> -<xref color="danger" href="#"> +<xref theme="danger-contrast" href="#"> <icon outputclass="bi-link"/> Danger link </xref> -<xref color="warning" href="#"> +<xref theme="warning-contrast" href="#"> <icon outputclass="bi-link"/> Warning link </xref> -<xref color="info" href="#"> +<xref theme="info-contrast" href="#"> <icon outputclass="bi-link"/> Info link </xref> -<xref color="accent" href="#"> +<xref theme="accent-contrast" href="#"> <icon outputclass="bi-link"/> Accent link </xref> -<xref color="inverse" href="#"> +<xref theme="inverse-contrast" href="#"> <icon outputclass="bi-link"/> Inverse link </xref>
    @@ -156,44 +156,44 @@

    Icons can also be placed within buttons as shown:

    - - - - - -
    Specialization - <button color="primary" outputclass="btn-icon" href="#"> + <button theme="primary" outputclass="btn-icon" href="#"> <icon outputclass="bi-arrow-down-square-fill"/> </button> -<button color="secondary" outputclass="btn-icon" href="#"> +<button theme="secondary" outputclass="btn-icon" href="#"> <icon outputclass="bi-chat-left-quote-fill"/> </button> -<button color="warning" outputclass="btn-icon" href="#"> +<button theme="warning" outputclass="btn-icon" href="#"> <icon outputclass="bi-speedometer"/> </button> -<button color="info" outputclass="btn-icon" href="#"> +<button theme="info" outputclass="btn-icon" href="#"> <icon outputclass="bi-camera-fill"/> </button> -<button color="accent" outputclass="btn-icon" href="#"> +<button theme="accent" outputclass="btn-icon" href="#"> <icon outputclass="bi-link"/> </button> -<button color="danger" outputclass="btn-icon" href="#"> +<button theme="danger" outputclass="btn-icon" href="#"> <icon outputclass="bi-share-fill"/> </button>
    diff --git a/sample/pagination.dita b/sample/pagination.dita index 5fb18c9..1d13c23 100644 --- a/sample/pagination.dita +++ b/sample/pagination.dita @@ -35,7 +35,7 @@ - + Page navigation example
      @@ -90,8 +90,8 @@

      Add a color attribute to a pagination list to apply a semantic theme color across the component, including hover, focus, and the active page item.

    - - + + Page navigation example
    1. Previous
      2. @@ -101,7 +101,7 @@
    2. Next
     - + Page navigation example
    1. Previous
      2. @@ -111,7 +111,7 @@
    2. Next
     - + Page navigation example
    1. Previous
      2. @@ -121,7 +121,7 @@
    2. Next
     - + Page navigation example
    1. Previous
      2. @@ -131,7 +131,7 @@
    2. Next
     - + Page navigation example
    1. Previous
      2. @@ -141,7 +141,7 @@
    2. Next
     - + Page navigation example
    1. Previous
      2. @@ -151,7 +151,7 @@
    2. Next
     - + Page navigation example
    1. Previous
      2. @@ -161,7 +161,7 @@
    2. Next
     - + Page navigation example
    1. Previous
      2. @@ -175,7 +175,7 @@
      Specialization - <pagination color="primary"> + <pagination theme="primary"> <title>Page navigation example</title> <ol> <li><xref href="#">Previous</xref></li> @@ -185,31 +185,31 @@ <li><xref href="#">Next</xref></li> </ol> </pagination> -<pagination color="secondary"> +<pagination theme="secondary"> <title>Page navigation example</title> <ol>...</ol> </pagination> -<pagination color="success"> +<pagination theme="success"> <title>Page navigation example</title> <ol>...</ol> </pagination> -<pagination color="danger"> +<pagination theme="danger"> <title>Page navigation example</title> <ol>...</ol> </pagination> -<pagination color="warning"> +<pagination theme="warning"> <title>Page navigation example</title> <ol>...</ol> </pagination> -<pagination color="info"> +<pagination theme="info"> <title>Page navigation example</title> <ol>...</ol> </pagination> -<pagination color="accent"> +<pagination theme="accent"> <title>Page navigation example</title> <ol>...</ol> </pagination> -<pagination color="inverse"> +<pagination theme="inverse"> <title>Page navigation example</title> <ol>...</ol> </pagination> @@ -276,7 +276,7 @@

      Fancy larger or smaller pagination? Use size="large" or size="small" for additional sizes.

      - + Page navigation example
        @@ -326,7 +326,7 @@ </section>
    - + Page navigation example
      @@ -387,7 +387,7 @@ to the outputclass

    - + Page navigation example
      @@ -437,7 +437,7 @@ </section>
    - + Page navigation example
      diff --git a/sample/popovers.dita b/sample/popovers.dita index a5bf0a5..384f6ca 100644 --- a/sample/popovers.dita +++ b/sample/popovers.dita @@ -52,14 +52,14 @@
    - + Popover title And here’s some amazing content. It’s very engaging. Right? Click to toggle popover
    Specialization - <popover outputclass="btn-lg btn-solid" color="danger"> + <popover outputclass="btn-lg btn-solid" theme="danger-contrast"> <data name="title">Popover title</data> <desc>And here’s some amazing content. It’s very engaging. Right?</desc> Click to toggle popover @@ -84,31 +84,31 @@ popover is appended to the output-class or taken from the attribute.

    - + Top popover Popover on top - + Right Popover Popover on right - + Bottom popover Popover on bottom - + Left popover Popover on left
    Specialization - <popover outputclass="btn-solid" color="secondary" position="top"> + <popover outputclass="btn-solid" theme="secondary-contrast" position="top"> <desc>Top popover</desc> Popover on top </popover> -<popover outputclass="btn-solid" color="secondary" position="right"> +<popover outputclass="btn-solid" theme="secondary-contrast" position="right"> <desc>Right Popover</desc> Popover on right </popover> -<popover outputclass="btn-solid" color="secondary" position="bottom"> +<popover outputclass="btn-solid" theme="secondary-contrast" position="bottom"> <desc>Bottom popover</desc> Popover on bottom </popover> -<popover outputclass="btn-solid" color="secondary" position="left"> +<popover outputclass="btn-solid" theme="secondary-contrast" position="left"> <desc>Left popover</desc> Popover on left </popover> @@ -149,7 +149,7 @@ }
    - + Popover title custom-popover And here’s some amazing content. It’s very engaging. Right?Custom popover @@ -157,7 +157,7 @@
    Specialization - <popover outputclass="btn-lg btn-solid" color="danger"> + <popover outputclass="btn-lg btn-solid" theme="danger-contrast"> <data name="title">Popover title</data> <data name="class">custom-popover</data> <desc>And here’s some amazing content. It’s very engaging. Right?</desc> diff --git a/sample/rtl.dita b/sample/rtl.dita index 54f87a7..b922dbe 100644 --- a/sample/rtl.dita +++ b/sample/rtl.dita @@ -43,14 +43,14 @@

    Additionally, within any topic, setting the dir attribute on any DITA element thereafter will cause the layout to be recalculated for the enclosed block only.

    - + عنوان البطاقة

    بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

    - +     @@ -64,7 +64,7 @@ <title>عنوان البطاقة</title> <image href="..." /> <p>بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p> - <button href="#" color="primary">اذهب لمكان ما</button> + <button href="#" theme="primary">اذهب لمكان ما</button> </card> </grid-col> </grid-row> diff --git a/sample/shadows.dita b/sample/shadows.dita index 3ddfc1b..d3bf3df 100644 --- a/sample/shadows.dita +++ b/sample/shadows.dita @@ -27,10 +27,10 @@
    -
    No shadow
    -
    Small shadow
    -
    Regular shadow
    -
    Larger shadow
    +
    No shadow
    +
    Small shadow
    +
    Regular shadow
    +
    Larger shadow
     @@ -55,23 +55,23 @@

    Shadows can be applied to complex elements as follow:

    - - + + Shadowed Card

    This card has a large shadow.

     - Alert with small shadow + Alert with small shadow
    Specialization - <card shadow="lg" margin="3" color="accent"> + <card shadow="lg" margin="3" theme="accent-contrast"> <title>Shadowed Card</title> <p>This card has a large shadow.</p> </card> -<alert shadow="sm" color="accent">Alert with small shadow</alert> +<alert shadow="sm" theme="accent-contrast">Alert with small shadow</alert>
    <xmlatt>outputclass</xmlatt> diff --git a/sample/spacing.dita b/sample/spacing.dita index 6b4bfe2..98fade2 100644 --- a/sample/spacing.dita +++ b/sample/spacing.dita @@ -28,25 +28,25 @@
    -
    Margin 0
    -
    Margin 1
    -
    Margin 2
    -
    Margin 3
    -
    Margin 4
    -
    Margin 5
    -
    Margin Auto
    +
    Margin 0
    +
    Margin 1
    +
    Margin 2
    +
    Margin 3
    +
    Margin 4
    +
    Margin 5
    +
    Margin Auto
    Specialization - <div color="primary" margin="0" padding="2">Margin 0</div> -<div color="secondary" margin="1" padding="2">Margin 1</div> -<div color="success" margin="2" padding="2">Margin 2</div> -<div color="danger" margin="3" padding="2">Margin 3</div> -<div color="warning" margin="4" padding="2">Margin 4</div> -<div color="info" margin="5" padding="2">Margin 5</div> -<div color="light" margin="auto" padding="2" width="50">Margin Auto</div> + <div theme="primary-contrast" margin="0" padding="2">Margin 0</div> +<div theme="secondary-contrast" margin="1" padding="2">Margin 1</div> +<div theme="success-contrast" margin="2" padding="2">Margin 2</div> +<div theme="danger-contrast" margin="3" padding="2">Margin 3</div> +<div theme="warning-contrast" margin="4" padding="2">Margin 4</div> +<div theme="info-contrast" margin="5" padding="2">Margin 5</div> +<div theme="light-contrast" margin="auto" padding="2" width="50">Margin Auto</div>
    <xmlatt>outputclass</xmlatt> @@ -67,24 +67,24 @@
    -
    Padding 0
    -
    Padding 0
    +
    Padding 1
    -
    Padding 2
    -
    Padding 3
    -
    Padding 4
    -
    Padding 5
    @@ -93,12 +93,12 @@
    Specialization - <div color="primary" padding="0">Padding 0</div> -<div color="secondary" padding="1" margin="1">Padding 1</div> -<div color="success" padding="2" margin="1">Padding 2</div> -<div color="danger" padding="3" margin="1">Padding 3</div> -<div color="warning" padding="4" margin="1">Padding 4</div> -<div color="info" padding="5" margin="1">Padding 5</div> + <div theme="primary-contrast" padding="0">Padding 0</div> +<div theme="secondary-contrast" padding="1" margin="1">Padding 1</div> +<div theme="success-contrast" padding="2" margin="1">Padding 2</div> +<div theme="danger-contrast" padding="3" margin="1">Padding 3</div> +<div theme="warning-contrast" padding="4" margin="1">Padding 4</div> +<div theme="info-contrast" padding="5" margin="1">Padding 5</div>
    <xmlatt>outputclass</xmlatt> @@ -127,13 +127,13 @@
    -
    Margin Top 5, Bottom 0
    -
    Margin Horizontal 3
    -
    Margin Top 5, Bottom 0
    +
    Margin Horizontal 3
    +
    Padding Vertical 5
    -
    Padding Start 3, End 1
    @@ -142,10 +142,10 @@
    Specialization - <div color="primary" margin="t5 b0">Margin Top 5, Bottom 0</div> -<div color="secondary" margin="x3">Margin Horizontal 3</div> -<div color="success" padding="y5">Padding Vertical 5</div> -<div color="danger" padding="s3 e1">Padding Start 3, End 1</div> + <div theme="primary-contrast" margin="t5 b0">Margin Top 5, Bottom 0</div> +<div theme="secondary-contrast" margin="x3">Margin Horizontal 3</div> +<div theme="success-contrast" padding="y5">Padding Vertical 5</div> +<div theme="danger-contrast" padding="s3 e1">Padding Start 3, End 1</div>
    <xmlatt>outputclass</xmlatt> diff --git a/sample/tables.dita b/sample/tables.dita index e2010c4..5240eac 100644 --- a/sample/tables.dita +++ b/sample/tables.dita @@ -111,7 +111,7 @@

    Use contextual classes to color tables, table rows or individual cells.

    - +
    @@ -120,17 +120,17 @@ - + Elephant (African and Asian) 19-22 months - + Giraffe 15 months Rhinoceros - 14-16 months + 14-16 months Hippopotamus @@ -144,7 +144,7 @@
    Specialization - <table color="primary" padding="1" width="100"> + <table theme="primary" padding="1" width="100"> <tgroup cols="2"> <thead> <row> @@ -153,17 +153,17 @@ </row> </thead> <tbody> - <row color="info"> + <row theme="info"> <entry>Elephant (African and Asian)</entry> <entry>19-22 months</entry> </row> - <row color="success"> + <row theme="success"> <entry>Giraffe</entry> <entry>15 months</entry> </row> <row> <entry>Rhinoceros</entry> - <entry color="danger">14-16 months</entry> + <entry theme="danger">14-16 months</entry> </row> <row> <entry>Hippopotamus</entry> @@ -627,8 +627,8 @@
    Table head -

    Similar to tables and dark tables, use the modifier color="accent" or - color="inverse" to make thead elements appear light or dark +

    Similar to tables and dark tables, use the modifier theme="accent" or + theme="inverse" to make thead elements appear light or dark gray.

    @@ -636,7 +636,7 @@ -
    + Animal Gestation @@ -668,7 +668,7 @@ Specialization <table> <tgroup> - <thead color="secondary"> + <thead theme="secondary"> ...etc </thead> </tgroup> @@ -690,7 +690,7 @@ - + Animal Gestation @@ -722,7 +722,7 @@ Specialization <table> <tgroup> - <thead color="inverse"> + <thead theme="inverse"> ...etc </thead> </tgroup> diff --git a/sample/tabs.dita b/sample/tabs.dita index 45f36f6..00801de 100644 --- a/sample/tabs.dita +++ b/sample/tabs.dita @@ -31,7 +31,7 @@ style="tabs" element containing a series of section elements

    - +
    Home @@ -97,7 +97,7 @@

    The tabs plugin also works with pills using style="pills"

    - +
    Home @@ -163,7 +163,7 @@

    And with vertical pills using style="vertical-pills"

    - +
    Home diff --git a/sample/theme.dita b/sample/theme.dita new file mode 100644 index 0000000..ae411ad --- /dev/null +++ b/sample/theme.dita @@ -0,0 +1,367 @@ + + + + + Theme + Combine one of three theme utilities with our theme color classes to set + color and background-color pairings on any element, just like component variants. + + + + Theme + Color + Background + CSS + outputclass + + + + + + +
    + Overview +

    Take any of our theme color classes and add theme-contrast, + theme-subtle, or theme-muted to set a predefined + color and background-color pairing. Then optionally add theme-border + to set a predefined border color.

    +
    + +
    + Contrast +

    Contrast pairs the bg theme token with the contrast text color for maximum + readability with theme-contrast. This is ideal for high-emphasis + elements with solid backgrounds.

    +
    + +
    +
    .theme-primary .theme-contrast
    +
    .theme-accent .theme-contrast
    +
    .theme-success .theme-contrast
    +
    .theme-danger .theme-contrast
    +
    .theme-warning .theme-contrast
    +
    .theme-info .theme-contrast
    +
    .theme-inverse .theme-contrast
    +
    .theme-secondary .theme-contrast
    +
    +     + <div outputclass="p-2 theme-primary theme-contrast">.theme-primary .theme-contrast</div> +<div outputclass="p-2 theme-accent theme-contrast">.theme-accent .theme-contrast</div> +<div outputclass="p-2 theme-success theme-contrast">.theme-success .theme-contrast</div> +<div outputclass="p-2 theme-danger theme-contrast">.theme-danger .theme-contrast</div> +<div outputclass="p-2 theme-warning theme-contrast">.theme-warning .theme-contrast</div> +<div outputclass="p-2 theme-info theme-contrast">.theme-info .theme-contrast</div> +<div outputclass="p-2 theme-inverse theme-contrast">.theme-inverse .theme-contrast</div> +<div outputclass="p-2 theme-secondary theme-contrast">.theme-secondary .theme-contrast</div> + +

    Nested links inherit the contrast foreground so they stay legible on the solid background:

    + +
    +
    Theme Primary with a + nested link inside.
    +
    Theme Accent with a + nested link inside.
    +
    Theme Success with a + nested link inside.
    +
    Theme Danger with a + nested link inside.
    +
    Theme Warning with a + nested link inside.
    +
    Theme Info with a + nested link inside.
    +
    Theme Inverse with a + nested link inside.
    +
    Theme Secondary with a + nested link inside.
    +
    +     + <div outputclass="p-3 theme-primary theme-contrast">Theme Primary with a + <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div> + +
    + Subtle +

    Subtle pairs the bg-subtle theme token with the text text color for a + lower-contrast, more subtle appearance. This combination will automatically + adjust to the current color mode.

    +
    + +
    +
    .theme-primary .theme-subtle
    +
    .theme-accent .theme-subtle
    +
    .theme-success .theme-subtle
    +
    .theme-danger .theme-subtle
    +
    .theme-warning .theme-subtle
    +
    .theme-info .theme-subtle
    +
    .theme-inverse .theme-subtle
    +
    .theme-secondary .theme-subtle
    +
    +     + <div outputclass="p-2 theme-primary theme-subtle">.theme-primary .theme-subtle</div> +<div outputclass="p-2 theme-accent theme-subtle">.theme-accent .theme-subtle</div> +<div outputclass="p-2 theme-success theme-subtle">.theme-success .theme-subtle</div> +<div outputclass="p-2 theme-danger theme-subtle">.theme-danger .theme-subtle</div> +<div outputclass="p-2 theme-warning theme-subtle">.theme-warning .theme-subtle</div> +<div outputclass="p-2 theme-info theme-subtle">.theme-info .theme-subtle</div> +<div outputclass="p-2 theme-inverse theme-subtle">.theme-inverse .theme-subtle</div> +<div outputclass="p-2 theme-secondary theme-subtle">.theme-secondary .theme-subtle</div> + +

    And with borders:

    + +
    +
    .theme-primary .theme-subtle .theme-border
    +
    .theme-accent .theme-subtle .theme-border
    +
    .theme-success .theme-subtle .theme-border
    +
    .theme-danger .theme-subtle .theme-border
    +
    .theme-warning .theme-subtle .theme-border
    +
    .theme-info .theme-subtle .theme-border
    +
    .theme-inverse .theme-subtle .theme-border
    +
    .theme-secondary .theme-subtle .theme-border
    +
    +     + <div outputclass="p-2 theme-primary theme-subtle theme-border">.theme-primary .theme-subtle .theme-border</div> +<div outputclass="p-2 theme-accent theme-subtle theme-border">.theme-accent .theme-subtle .theme-border</div> +<div outputclass="p-2 theme-success theme-subtle theme-border">.theme-success .theme-subtle .theme-border</div> +<div outputclass="p-2 theme-danger theme-subtle theme-border">.theme-danger .theme-subtle .theme-border</div> +<div outputclass="p-2 theme-warning theme-subtle theme-border">.theme-warning .theme-subtle .theme-border</div> +<div outputclass="p-2 theme-info theme-subtle theme-border">.theme-info .theme-subtle .theme-border</div> +<div outputclass="p-2 theme-inverse theme-subtle theme-border">.theme-inverse .theme-subtle .theme-border</div> +<div outputclass="p-2 theme-secondary theme-subtle theme-border">.theme-secondary .theme-subtle .theme-border</div> + +

    Nested links inherit the subtle foreground so they stay legible on the subtle background:

    + +
    +
    Theme Primary with a + nested link inside.
    +
    Theme Accent with a + nested link inside.
    +
    Theme Success with a + nested link inside.
    +
    Theme Danger with a + nested link inside.
    +
    Theme Warning with a + nested link inside.
    +
    Theme Info with a + nested link inside.
    +
    Theme Inverse with a + nested link inside.
    +
    Theme Secondary with a + nested link inside.
    +
    +     + <div outputclass="p-3 theme-primary theme-subtle">Theme Primary with a + <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div> + +
    + Muted +

    Muted pairs the bg-muted theme token with the text-emphasis text color for a + lower-contrast, more muted appearance. Like subtle, this combination will + automatically adjust to the current color mode.

    +
    + +
    +
    .theme-primary .theme-muted
    +
    .theme-accent .theme-muted
    +
    .theme-success .theme-muted
    +
    .theme-danger .theme-muted
    +
    .theme-warning .theme-muted
    +
    .theme-info .theme-muted
    +
    .theme-inverse .theme-muted
    +
    .theme-secondary .theme-muted
    +
    +     + <div outputclass="p-2 theme-primary theme-muted">.theme-primary .theme-muted</div> +<div outputclass="p-2 theme-accent theme-muted">.theme-accent .theme-muted</div> +<div outputclass="p-2 theme-success theme-muted">.theme-success .theme-muted</div> +<div outputclass="p-2 theme-danger theme-muted">.theme-danger .theme-muted</div> +<div outputclass="p-2 theme-warning theme-muted">.theme-warning .theme-muted</div> +<div outputclass="p-2 theme-info theme-muted">.theme-info .theme-muted</div> +<div outputclass="p-2 theme-inverse theme-muted">.theme-inverse .theme-muted</div> +<div outputclass="p-2 theme-secondary theme-muted">.theme-secondary .theme-muted</div> + +

    And with borders:

    + +
    +
    .theme-primary .theme-muted .theme-border
    +
    .theme-accent .theme-muted .theme-border
    +
    .theme-success .theme-muted .theme-border
    +
    .theme-danger .theme-muted .theme-border
    +
    .theme-warning .theme-muted .theme-border
    +
    .theme-info .theme-muted .theme-border
    +
    .theme-inverse .theme-muted .theme-border
    +
    .theme-secondary .theme-muted .theme-border
    +
    +     + <div outputclass="p-2 theme-primary theme-muted theme-border">.theme-primary .theme-muted .theme-border</div> +<div outputclass="p-2 theme-accent theme-muted theme-border">.theme-accent .theme-muted .theme-border</div> +<div outputclass="p-2 theme-success theme-muted theme-border">.theme-success .theme-muted .theme-border</div> +<div outputclass="p-2 theme-danger theme-muted theme-border">.theme-danger .theme-muted .theme-border</div> +<div outputclass="p-2 theme-warning theme-muted theme-border">.theme-warning .theme-muted .theme-border</div> +<div outputclass="p-2 theme-info theme-muted theme-border">.theme-info .theme-muted .theme-border</div> +<div outputclass="p-2 theme-inverse theme-muted theme-border">.theme-inverse .theme-muted .theme-border</div> +<div outputclass="p-2 theme-secondary theme-muted theme-border">.theme-secondary .theme-muted .theme-border</div> + +

    Nested links inherit the muted foreground so they stay legible on the muted background:

    + +
    +
    Theme Primary with a + nested link inside.
    +
    Theme Accent with a + nested link inside.
    +
    Theme Success with a + nested link inside.
    +
    Theme Danger with a + nested link inside.
    +
    Theme Warning with a + nested link inside.
    +
    Theme Info with a + nested link inside.
    +
    Theme Inverse with a + nested link inside.
    +
    Theme Secondary with a + nested link inside.
    +
    +     + <div outputclass="p-3 theme-primary theme-muted">Theme Primary with a + <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div> + +
    + Comparison +

    Here's a side-by-side comparison of all three styles for each theme color, + including nested links:

    +
    + +
    +
    Primary with a + link
    +
    Primary with a + link
    +
    Primary with a + link
    +
    +
    +
    Accent with a + link
    +
    Accent with a + link
    +
    Accent with a + link
    +
    +
    +
    Success with a + link
    +
    Success with a + link
    +
    Success with a + link
    +
    +
    +
    Danger with a + link
    +
    Danger with a + link
    +
    Danger with a + link
    +
    +
    +
    Warning with a + link
    +
    Warning with a + link
    +
    Warning with a + link
    +
    +
    +
    Info with a + link
    +
    Info with a + link
    +
    Info with a + link
    +
    +
    +
    Inverse with a + link
    +
    Inverse with a + link
    +
    Inverse with a + link
    +
    +
    +
    Secondary with a + link
    +
    Secondary with a + link
    +
    Secondary with a + link
    +
    +     + <div outputclass="d-flex gap-2 mb-2"> + <div outputclass="theme-primary theme-contrast p-3 flex-fill text-center rounded">Primary with a + <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div> + <div outputclass="theme-primary theme-subtle p-3 flex-fill text-center rounded">Primary with a + <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div> + <div outputclass="theme-primary theme-muted p-3 flex-fill text-center rounded">Primary with a + <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div> +</div> + +
    + With components +

    Theme utilities work great with components that support theming. Apply the + theme color to a container and use theme style classes on individual elements.

    +
    + +
    +
    + Contrast badge + Subtle badge + Muted badge +
    +
    +
    +
    + Contrast badge + Subtle badge + Muted badge +
    +
    +     + <div outputclass="theme-primary"> + <div outputclass="d-flex gap-2 mb-3"> + <ph outputclass="badge theme-contrast">Contrast badge</ph> + <ph outputclass="badge theme-subtle">Subtle badge</ph> + <ph outputclass="badge theme-muted">Muted badge</ph> + </div> +</div> + +

    You can also mix theme colors within the same container by applying different + theme-{color} classes to child elements:

    + +
    +
    Success
    +
    Warning
    +
    Danger
    +
    +     + <div outputclass="d-flex gap-2"> + <div outputclass="theme-success theme-contrast p-3 rounded">Success</div> + <div outputclass="theme-warning theme-contrast p-3 rounded">Warning</div> + <div outputclass="theme-danger theme-contrast p-3 rounded">Danger</div> +</div> + + +     diff --git a/sample/tooltips.dita b/sample/tooltips.dita index 53c8033..ba8d426 100644 --- a/sample/tooltips.dita +++ b/sample/tooltips.dita @@ -90,31 +90,31 @@

    Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.

    - + Tooltip on top Tooltip on top - + Tooltip on right Tooltip on right - + Tooltip on bottom Tooltip on bottom - + Tooltip on left Tooltip on left
    Specialization - <tooltip outputclass="btn-solid" color="secondary" position="top"> + <tooltip outputclass="btn-solid" theme="secondary-contrast" position="top"> <desc>Tooltip on top</desc> Tooltip on top </tooltip> -<tooltip outputclass="btn-solid" color="secondary" position="right"> +<tooltip outputclass="btn-solid" theme="secondary-contrast" position="right"> <desc>Tooltip on right</desc> Tooltip on right </tooltip> -<tooltip outputclass="btn-solid" color="secondary" position="bottom"> +<tooltip outputclass="btn-solid" theme="secondary-contrast" position="bottom"> <desc>Tooltip on bottom</desc> Tooltip on bottom </tooltip> -<tooltip outputclass="btn-solid" color="secondary" position="left"> +<tooltip outputclass="btn-solid" theme="secondary-contrast" position="left"> <desc>Tooltip on left</desc> Tooltip on left </tooltip> @@ -142,7 +142,7 @@

    Custom HTML can be added to tooltips using additional DITA elements within the desc

    - + Tooltip with DITA elements Tooltip with embedded DITA @@ -150,7 +150,7 @@
    Specialization - <tooltip outputclass="btn-solid" color="secondary"> + <tooltip outputclass="btn-solid" theme="secondary-contrast"> <desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> Tooltip with embedded DITA </tooltip> @@ -172,7 +172,7 @@ Tooltip with embedded DITA --bs-tooltip-bg: var(--bs-primary); } - + custom-tooltip This top tooltip is themed via CSS variables. Custom tooltip @@ -181,7 +181,7 @@ Tooltip with embedded DITA
    Specialization - <tooltip outputclass="btn-solid" color="secondary"> + <tooltip outputclass="btn-solid" theme="secondary-contrast"> <data name="class">custom-tooltip</data> <desc>This top tooltip is themed via CSS variables.</desc> Custom tooltip From 40e53da2864efe5a07de99c9bf1306e0cc0d7ac3 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 12 Aug 2026 19:25:58 +0200 Subject: [PATCH 33/43] Fix spacing color contrast --- sample/spacing.dita | 43 ++++++++++++++++++++----------------------- 1 file changed, 20 insertions(+), 23 deletions(-) diff --git a/sample/spacing.dita b/sample/spacing.dita index 98fade2..6cf0c63 100644 --- a/sample/spacing.dita +++ b/sample/spacing.dita @@ -50,13 +50,13 @@
    <xmlatt>outputclass</xmlatt> - <div outputclass="bg-primary fg-contrast-primary m-0 p-2">Margin 0</div> -<div outputclass="bg-secondary fg-contrast-secondary m-1 p-2">Margin 1</div> -<div outputclass="bg-success fg-contrast-success m-2 p-2">Margin 2</div> -<div outputclass="bg-danger fg-contrast-danger m-3 p-2">Margin 3</div> -<div outputclass="bg-warning fg-contrast-warning m-4 p-2">Margin 4</div> -<div outputclass="bg-info fg-contrast-info m-5 p-2">Margin 5</div> -<div outputclass="bg-accent fg-contrast-accent m-auto p-2 w-50">Margin Auto</div> + <div outputclass="theme-primary theme-contrast m-0 p-2">Margin 0</div> +<div outputclass="theme-secondary theme-contrast m-1 p-2">Margin 1</div> +<div outputclass="theme-success theme-contrast m-2 p-2">Margin 2</div> +<div outputclass="theme-danger theme-contrastm-3 p-2">Margin 3</div> +<div outputclass="theme-warning theme-contrast m-4 p-2">Margin 4</div> +<div outputclass="theme-info theme-contrast m-5 p-2">Margin 5</div> +<div outputclass="theme-accent theme-contrast m-auto p-2 w-50">Margin Auto</div>
    @@ -70,23 +70,23 @@
    Padding 0
    Padding 1
    Padding 2
    Padding 3
    Padding 4
    Padding 5
     @@ -102,12 +102,12 @@
    <xmlatt>outputclass</xmlatt> - <div outputclass="bg-primary p-0">Padding 0</div> -<div outputclass="bg-secondary p-1 m-1">Padding 1</div> -<div outputclass="bg-success p-2 m-1">Padding 2</div> -<div outputclass="bg-danger p-3 m-1">Padding 3</div> -<div outputclass="bg-warning p-4 m-1">Padding 4</div> -<div outputclass="bg-info p-5 m-1">Padding 5</div> + <div outputclass="theme-primary theme-contrast p-0">Padding 0</div> +<div outputclass="theme-secondary theme-contrast p-1 m-1">Padding 1</div> +<div outputclass="theme-success theme-contrast p-2 m-1">Padding 2</div> +<div outputclass="theme-danger theme-contrast p-3 m-1">Padding 3</div> +<div outputclass="theme-warning theme-contrast p-4 m-1">Padding 4</div> +<div outputclass="theme-info theme-contrast p-5 m-1">Padding 5</div>
    @@ -129,13 +129,10 @@
    Margin Top 5, Bottom 0
    Margin Horizontal 3
    -
    Padding Vertical 5
    +
    Padding Vertical 5
    Padding Start 3, End 1
     From 6223ad037329f89f2b10dab402f18c568cf678a8 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 12 Aug 2026 19:42:52 +0200 Subject: [PATCH 34/43] Amend texts --- sample/alerts.dita | 2 +- sample/card.dita | 2 +- sample/pagination.dita | 2 +- sample/spacing.dita | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/sample/alerts.dita b/sample/alerts.dita index 0fdefd5..e8caabf 100644 --- a/sample/alerts.dita +++ b/sample/alerts.dita @@ -246,7 +246,7 @@ <note type="other" othertype="Another note"> This is something other than a normal note. </note>     -

    The default colors can be overridden by using a color attribute or an The default colors can be overridden by using a theme attribute or an outputclass.

    This is a high contrast primary note. diff --git a/sample/card.dita b/sample/card.dita index f33731b..caf0af5 100644 --- a/sample/card.dita +++ b/sample/card.dita @@ -178,7 +178,7 @@
    Card Colors -

    A card can be colorized by adding a color attribute. This +

    A card can be colorized by adding a theme attribute. This applies a contextual background color.

    diff --git a/sample/pagination.dita b/sample/pagination.dita index 1d13c23..f0dc3b7 100644 --- a/sample/pagination.dita +++ b/sample/pagination.dita @@ -87,7 +87,7 @@
    Variants -

    Add a color attribute to a pagination list to apply a semantic theme color across the +

    Add a theme attribute to a pagination list to apply a semantic theme color across the component, including hover, focus, and the active page item.

    diff --git a/sample/spacing.dita b/sample/spacing.dita index 6cf0c63..24c9d5a 100644 --- a/sample/spacing.dita +++ b/sample/spacing.dita @@ -46,7 +46,7 @@ <div theme="danger-contrast" margin="3" padding="2">Margin 3</div> <div theme="warning-contrast" margin="4" padding="2">Margin 4</div> <div theme="info-contrast" margin="5" padding="2">Margin 5</div> -<div theme="light-contrast" margin="auto" padding="2" width="50">Margin Auto</div> +<div theme="accent-contrast" margin="auto" padding="2" width="50">Margin Auto</div>
    <xmlatt>outputclass</xmlatt> From 3d04c7fb00d9876a8733a02787b968a15af3e750 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 12 Aug 2026 20:45:02 +0200 Subject: [PATCH 35/43] Amend text --- sample/index.dita | 22 +-- sample/spacing.dita | 2 +- sample/theme.dita | 420 +++++++++++++++++++++++++++++++------------- 3 files changed, 311 insertions(+), 133 deletions(-) diff --git a/sample/index.dita b/sample/index.dita index e10b985..daaafb4 100644 --- a/sample/index.dita +++ b/sample/index.dita @@ -637,14 +637,16 @@ --bootstrap.theme.scrollspy --bootstrap.theme.sidebar --bootstrap.theme.topbar -

    Layout regions can be styled with a Bootstrap theme color using additional command line parameters.

    +

    Layout regions can be styled with Bootstrap theme color classes to set color and background-color pairings the chosen element using additional command line parameters. See + for details on how theme values are built up.

    --bootstrap.css​.accessibility​.link - Common Bootstrap utility classes for accessibility links + Common Bootstrap CSS classes for accessibility links @@ -652,7 +654,7 @@ --bootstrap.theme​.accessibility - Common Bootstrap utility classes for accessibility navigation + Bootstrap theme color classes for accessibility navigation @@ -660,7 +662,7 @@ --bootstrap.theme​.body - Theme utility class for the page body. + Bootstrap theme color classes for the page body. Defaults to @@ -669,7 +671,7 @@ --bootstrap.theme​.content - Theme utility class for the main content area. Defaults to + Bootstrap theme color classes for the main content area. Defaults to @@ -677,7 +679,7 @@ --bootstrap.theme​.footer - Theme utility class for the page footer. Defaults to + Bootstrap theme color classes for the page footer. Defaults to @@ -685,7 +687,7 @@ --bootstrap.theme​.header - Theme utility class for the page header. Defaults to + Bootstrap theme color classes for the page header. Defaults to @@ -693,7 +695,7 @@ --bootstrap.theme​.scrollspy - Theme utility class for the scrollspy menu. Defaults to + Bootstrap theme color classes for the scrollspy menu. Defaults to @@ -701,7 +703,7 @@ --bootstrap.theme​.sidebar - Theme utility class for the sidebar navigation. Defaults to + Bootstrap theme color classes for the sidebar navigation. Defaults to @@ -709,7 +711,7 @@ --bootstrap.theme​.topbar - Theme utility class for the collapsible top header. Defaults to + Bootstrap theme color classes for the collapsible top header. Defaults to diff --git a/sample/spacing.dita b/sample/spacing.dita index 24c9d5a..e3d24a6 100644 --- a/sample/spacing.dita +++ b/sample/spacing.dita @@ -53,7 +53,7 @@ <div outputclass="theme-primary theme-contrast m-0 p-2">Margin 0</div> <div outputclass="theme-secondary theme-contrast m-1 p-2">Margin 1</div> <div outputclass="theme-success theme-contrast m-2 p-2">Margin 2</div> -<div outputclass="theme-danger theme-contrastm-3 p-2">Margin 3</div> +<div outputclass="theme-danger theme-contrast m-3 p-2">Margin 3</div> <div outputclass="theme-warning theme-contrast m-4 p-2">Margin 4</div> <div outputclass="theme-info theme-contrast m-5 p-2">Margin 5</div> <div outputclass="theme-accent theme-contrast m-auto p-2 w-50">Margin Auto</div> diff --git a/sample/theme.dita b/sample/theme.dita index ae411ad..934f481 100644 --- a/sample/theme.dita +++ b/sample/theme.dita @@ -1,5 +1,5 @@ - + Theme - Combine one of three theme utilities with our theme color classes to set + Combine one of three theme utilities with the Bootstrap theme color classes to set color and background-color pairings on any element, just like component variants. @@ -30,7 +30,7 @@
    Overview -

    Take any of our theme color classes and add theme-contrast, +

    Take any of Bootstrap theme color classes and add theme-contrast, theme-subtle, or theme-muted to set a predefined color and background-color pairing. Then optionally add theme-border to set a predefined border color.

    @@ -44,38 +44,38 @@
    -
    .theme-primary .theme-contrast
    -
    .theme-accent .theme-contrast
    -
    .theme-success .theme-contrast
    -
    .theme-danger .theme-contrast
    -
    .theme-warning .theme-contrast
    -
    .theme-info .theme-contrast
    -
    .theme-inverse .theme-contrast
    -
    .theme-secondary .theme-contrast
    +
    primary-contrast
    +
    accent-contrast
    +
    success-contrast
    +
    danger-contrast
    +
    warning-contrast
    +
    info-contrast
    +
    inverse-contrast
    +
    secondary-contrast
    Specialization - <div theme="primary-contrast" padding="2">.theme-primary .theme-contrast</div> -<div theme="accent-contrast" padding="2">.theme-accent .theme-contrast</div> -<div theme="success-contrast" padding="2">.theme-success .theme-contrast</div> -<div theme="danger-contrast" padding="2">.theme-danger .theme-contrast</div> -<div theme="warning-contrast" padding="2">.theme-warning .theme-contrast</div> -<div theme="info-contrast" padding="2">.theme-info .theme-contrast</div> -<div theme="inverse-contrast" padding="2">.theme-inverse .theme-contrast</div> -<div theme="secondary-contrast" padding="2">.theme-secondary .theme-contrast</div> + <div theme="primary-contrast" padding="2">primary-contrast</div> +<div theme="accent-contrast" padding="2">accent-contrast</div> +<div theme="success-contrast" padding="2">success-contrast</div> +<div theme="danger-contrast" padding="2">danger-contrast</div> +<div theme="warning-contrast" padding="2">warning-contrast</div> +<div theme="info-contrast" padding="2">info-contrast</div> +<div theme="inverse-contrast" padding="2">inverse-contrast</div> +<div theme="secondary-contrast" padding="2">secondary-contrast</div>
    <xmlatt>outputclass</xmlatt> - <div outputclass="p-2 theme-primary theme-contrast">.theme-primary .theme-contrast</div> -<div outputclass="p-2 theme-accent theme-contrast">.theme-accent .theme-contrast</div> -<div outputclass="p-2 theme-success theme-contrast">.theme-success .theme-contrast</div> -<div outputclass="p-2 theme-danger theme-contrast">.theme-danger .theme-contrast</div> -<div outputclass="p-2 theme-warning theme-contrast">.theme-warning .theme-contrast</div> -<div outputclass="p-2 theme-info theme-contrast">.theme-info .theme-contrast</div> -<div outputclass="p-2 theme-inverse theme-contrast">.theme-inverse .theme-contrast</div> -<div outputclass="p-2 theme-secondary theme-contrast">.theme-secondary .theme-contrast</div> + <div outputclass="p-2 theme-primary theme-contrast">primary-contrast</div> +<div outputclass="p-2 theme-accent theme-contrast">accent-contrast</div> +<div outputclass="p-2 theme-success theme-contrast">success-contrast</div> +<div outputclass="p-2 theme-danger theme-contrast">danger-contrast</div> +<div outputclass="p-2 theme-warning theme-contrast">warning-contrast</div> +<div outputclass="p-2 theme-info theme-contrast">info-contrast</div> +<div outputclass="p-2 theme-inverse theme-contrast">inverse-contrast</div> +<div outputclass="p-2 theme-secondary theme-contrast">secondary-contrast</div>
    @@ -83,33 +83,33 @@
    Theme Primary with a - nested link inside.
    + nested link inside.
    Theme Accent with a - nested link inside.
    + nested link inside.
    Theme Success with a - nested link inside.
    + nested link inside.
    Theme Danger with a - nested link inside.
    + nested link inside.
    Theme Warning with a - nested link inside.
    + nested link inside.
    Theme Info with a - nested link inside.
    + nested link inside.
    Theme Inverse with a - nested link inside.
    + nested link inside.
    Theme Secondary with a - nested link inside.
    + nested link inside.
    Specialization <div theme="primary-contrast" padding="3">Theme Primary with a - <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div> + <xref href="#">nested link</xref> inside.</div>
    <xmlatt>outputclass</xmlatt> <div outputclass="p-3 theme-primary theme-contrast">Theme Primary with a - <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div> + <xref href="#">nested link</xref> inside.</div>
    @@ -121,78 +121,77 @@
    -
    .theme-primary .theme-subtle
    -
    .theme-accent .theme-subtle
    -
    .theme-success .theme-subtle
    -
    .theme-danger .theme-subtle
    -
    .theme-warning .theme-subtle
    -
    .theme-info .theme-subtle
    -
    .theme-inverse .theme-subtle
    -
    .theme-secondary .theme-subtle
    +
    primary-subtle
    +
    accent-subtle
    +
    success-subtle
    +
    danger-subtle
    +
    warning-subtle
    +
    info-subtle
    +
    inverse-subtle
    +
    secondary-subtle
    Specialization - <div theme="primary-subtle" padding="2">.theme-primary .theme-subtle</div> -<div theme="accent-subtle" padding="2">.theme-accent .theme-subtle</div> -<div theme="success-subtle" padding="2">.theme-success .theme-subtle</div> -<div theme="danger-subtle" padding="2">.theme-danger .theme-subtle</div> -<div theme="warning-subtle" padding="2">.theme-warning .theme-subtle</div> -<div theme="info-subtle" padding="2">.theme-info .theme-subtle</div> -<div theme="inverse-subtle" padding="2">.theme-inverse .theme-subtle</div> -<div theme="secondary-subtle" padding="2">.theme-secondary .theme-subtle</div> + <div theme="primary-subtle" padding="2">primary-subtle</div> +<div theme="accent-subtle" padding="2">accent-subtle</div> +<div theme="success-subtle" padding="2">success-subtle</div> +<div theme="danger-subtle" padding="2">danger-subtle</div> +<div theme="warning-subtle" padding="2">warning-subtle</div> +<div theme="info-subtle" padding="2">info-subtle</div> +<div theme="inverse-subtle" padding="2">inverse-subtle</div> +<div theme="secondary-subtle" padding="2">secondary-subtle</div>
    <xmlatt>outputclass</xmlatt> - <div outputclass="p-2 theme-primary theme-subtle">.theme-primary .theme-subtle</div> -<div outputclass="p-2 theme-accent theme-subtle">.theme-accent .theme-subtle</div> -<div outputclass="p-2 theme-success theme-subtle">.theme-success .theme-subtle</div> -<div outputclass="p-2 theme-danger theme-subtle">.theme-danger .theme-subtle</div> -<div outputclass="p-2 theme-warning theme-subtle">.theme-warning .theme-subtle</div> -<div outputclass="p-2 theme-info theme-subtle">.theme-info .theme-subtle</div> -<div outputclass="p-2 theme-inverse theme-subtle">.theme-inverse .theme-subtle</div> -<div outputclass="p-2 theme-secondary theme-subtle">.theme-secondary .theme-subtle</div> + <div outputclass="p-2 theme-primary theme-subtle">primary-subtle</div> +<div outputclass="p-2 theme-accent theme-subtle">accent-subtle</div> +<div outputclass="p-2 theme-success theme-subtle">success-subtle</div> +<div outputclass="p-2 theme-danger theme-subtle">danger-subtle</div> +<div outputclass="p-2 theme-warning theme-subtle">warning-subtle</div> +<div outputclass="p-2 theme-info theme-subtle">info-subtle</div> +<div outputclass="p-2 theme-inverse theme-subtle">inverse-subtle</div> +<div outputclass="p-2 theme-secondary theme-subtle">secondary-subtle</div>

    And with borders:

    -
    .theme-primary .theme-subtle .theme-border
    -
    .theme-accent .theme-subtle .theme-border
    -
    .theme-success .theme-subtle .theme-border
    -
    .theme-danger .theme-subtle .theme-border
    -
    .theme-warning .theme-subtle .theme-border
    -
    .theme-info .theme-subtle .theme-border
    -
    .theme-inverse .theme-subtle .theme-border
    -
    .theme-secondary .theme-subtle .theme-border
    +
    primary-subtle-border
    +
    accent-subtle-border
    +
    success-subtle-border
    +
    danger-subtle-border
    +
    warning-subtle-border
    +
    info-subtle-border
    +
    inverse-subtle-border
    +
    secondary-subtle-border
    Specialization - <div theme="primary-subtle-border" padding="2">.theme-primary .theme-subtle .theme-border</div> -<div theme="accent-subtle-border" padding="2">.theme-accent .theme-subtle .theme-border</div> -<div theme="success-subtle-border" padding="2">.theme-success .theme-subtle .theme-border</div> -<div theme="danger-subtle-border" padding="2">.theme-danger .theme-subtle .theme-border</div> -<div theme="warning-subtle-border" padding="2">.theme-warning .theme-subtle .theme-border</div> -<div theme="info-subtle-border" padding="2">.theme-info .theme-subtle .theme-border</div> -<div theme="inverse-subtle-border" padding="2">.theme-inverse .theme-subtle .theme-border</div> -<div theme="secondary-subtle-border" padding="2">.theme-secondary .theme-subtle .theme-border</div> + <div theme="primary-subtle-border" padding="2">primary-subtle-border</div> +<div theme="accent-subtle-border" padding="2">accent-subtle-border</div> +<div theme="success-subtle-border" padding="2">success-subtle-border</div> +<div theme="danger-subtle-border" padding="2">danger-subtle-border</div> +<div theme="warning-subtle-border" padding="2">warning-subtle-border</div> +<div theme="info-subtle-border" padding="2">info-subtle-border</div> +<div theme="inverse-subtle-border" padding="2">inverse-subtle-border</div> +<div theme="secondary-subtle-border" padding="2">secondary-subtle-border</div>
    <xmlatt>outputclass</xmlatt> <div outputclass="p-2 theme-primary theme-subtle theme-border">.theme-primary .theme-subtle .theme-border</div> -<div outputclass="p-2 theme-accent theme-subtle theme-border">.theme-accent .theme-subtle .theme-border</div> -<div outputclass="p-2 theme-success theme-subtle theme-border">.theme-success .theme-subtle .theme-border</div> -<div outputclass="p-2 theme-danger theme-subtle theme-border">.theme-danger .theme-subtle .theme-border</div> -<div outputclass="p-2 theme-warning theme-subtle theme-border">.theme-warning .theme-subtle .theme-border</div> -<div outputclass="p-2 theme-info theme-subtle theme-border">.theme-info .theme-subtle .theme-border</div> -<div outputclass="p-2 theme-inverse theme-subtle theme-border">.theme-inverse .theme-subtle .theme-border</div> -<div outputclass="p-2 theme-secondary theme-subtle theme-border">.theme-secondary .theme-subtle .theme-border</div> + ><div outputclass="p-2 theme-primary theme-subtle theme-border">primary-subtle-border</div> +<div outputclass="p-2 theme-accent theme-subtle theme-border">accent-subtle-border</div> +<div outputclass="p-2 theme-success theme-subtle theme-border">success-subtle-border</div> +<div outputclass="p-2 theme-danger theme-subtle theme-border">danger-subtle-border</div> +<div outputclass="p-2 theme-warning theme-subtle theme-border">warning-subtle-border</div> +<div outputclass="p-2 theme-info theme-subtle theme-border">info-subtle-border</div> +<div outputclass="p-2 theme-inverse theme-subtle theme-border">inverse-subtle-border</div> +<div outputclass="p-2 theme-secondary theme-subtle theme-border">secondary-subtle-border</div>
    @@ -200,33 +199,33 @@
    Theme Primary with a - nested link inside.
    + nested link inside.
    Theme Accent with a - nested link inside.
    + nested link inside.
    Theme Success with a - nested link inside.
    + nested link inside.
    Theme Danger with a - nested link inside.
    + nested link inside.
    Theme Warning with a - nested link inside.
    + nested link inside.
    Theme Info with a - nested link inside.
    + nested link inside.
    Theme Inverse with a - nested link inside.
    + nested link inside.
    Theme Secondary with a - nested link inside.
    + nested link inside.
    Specialization <div theme="primary-subtle" padding="3">Theme Primary with a - <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div> + <xref href="#">nested link</xref> inside.</div>
    <xmlatt>outputclass</xmlatt> <div outputclass="p-3 theme-primary theme-subtle">Theme Primary with a - <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div> + <xref href="#">nested link</xref> inside.</div>
    @@ -238,38 +237,38 @@
    -
    .theme-primary .theme-muted
    -
    .theme-accent .theme-muted
    -
    .theme-success .theme-muted
    -
    .theme-danger .theme-muted
    -
    .theme-warning .theme-muted
    -
    .theme-info .theme-muted
    -
    .theme-inverse .theme-muted
    -
    .theme-secondary .theme-muted
    +
    primary-muted
    +
    accent-muted
    +
    success-muted
    +
    danger-muted
    +
    warning-muted
    +
    info-muted
    +
    inverse-muted
    +
    secondary-muted
    Specialization - <div theme="primary-muted" padding="2">.theme-primary .theme-muted</div> -<div theme="accent-muted" padding="2">.theme-accent .theme-muted</div> -<div theme="success-muted" padding="2">.theme-success .theme-muted</div> -<div theme="danger-muted" padding="2">.theme-danger .theme-muted</div> -<div theme="warning-muted" padding="2">.theme-warning .theme-muted</div> -<div theme="info-muted" padding="2">.theme-info .theme-muted</div> -<div theme="inverse-muted" padding="2">.theme-inverse .theme-muted</div> -<div theme="secondary-muted" padding="2">.theme-secondary .theme-muted</div> + <div theme="primary-muted" padding="2">primary-muted</div> +<div theme="accent-muted" padding="2">accent-muted</div> +<div theme="success-muted" padding="2">success-muted</div> +<div theme="danger-muted" padding="2">danger-muted</div> +<div theme="warning-muted" padding="2">warning-muted</div> +<div theme="info-muted" padding="2">info-muted</div> +<div theme="inverse-muted" padding="2">inverse-muted</div> +<div theme="secondary-muted" padding="2">secondary-muted</div>
    <xmlatt>outputclass</xmlatt> - <div outputclass="p-2 theme-primary theme-muted">.theme-primary .theme-muted</div> -<div outputclass="p-2 theme-accent theme-muted">.theme-accent .theme-muted</div> -<div outputclass="p-2 theme-success theme-muted">.theme-success .theme-muted</div> -<div outputclass="p-2 theme-danger theme-muted">.theme-danger .theme-muted</div> -<div outputclass="p-2 theme-warning theme-muted">.theme-warning .theme-muted</div> -<div outputclass="p-2 theme-info theme-muted">.theme-info .theme-muted</div> -<div outputclass="p-2 theme-inverse theme-muted">.theme-inverse .theme-muted</div> -<div outputclass="p-2 theme-secondary theme-muted">.theme-secondary .theme-muted</div> + <div outputclass="p-2 theme-primary theme-muted">primary-muted</div> +<div outputclass="p-2 theme-accent theme-muted">accent-muted</div> +<div outputclass="p-2 theme-success theme-muted">success-muted</div> +<div outputclass="p-2 theme-danger theme-muted">danger-muted</div> +<div outputclass="p-2 theme-warning theme-muted">warning-muted</div> +<div outputclass="p-2 theme-info theme-muted">info-muted</div> +<div outputclass="p-2 theme-inverse theme-muted">inverse-muted</div> +<div outputclass="p-2 theme-secondary theme-muted">secondary-muted</div>
    @@ -277,33 +276,33 @@
    Theme Primary with a - nested link inside.
    + nested link inside.
    Theme Accent with a - nested link inside.
    + nested link inside.
    Theme Success with a - nested link inside.
    + nested link inside.
    Theme Danger with a - nested link inside.
    + nested link inside.
    Theme Warning with a - nested link inside.
    + nested link inside.
    Theme Info with a - nested link inside.
    + nested link inside.
    Theme Inverse with a - nested link inside.
    + nested link inside.
    Theme Secondary with a - nested link inside.
    + nested link inside.
    Specialization <div theme="primary-muted" padding="3">Theme Primary with a - <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div> + <xref href="#">nested link</xref> inside.</div>
    <xmlatt>outputclass</xmlatt> <div outputclass="p-3 theme-primary theme-muted">Theme Primary with a - <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div> + <xref href="#">nested link</xref> inside.</div>
    @@ -315,67 +314,67 @@
    Primary with a - link
    + link
    Primary with a - link
    + link
    Primary with a - link
    + link
    Accent with a - link
    + link
    Accent with a - link
    + link
    Accent with a - link
    + link
    Success with a - link
    + link
    Success with a - link
    + link
    Success with a - link
    + link
    Danger with a - link
    + link
    Danger with a - link
    + link
    Danger with a - link
    + link
    Warning with a - link
    + link
    Warning with a - link
    + link
    Warning with a - link
    + link
    Info with a - link
    + link
    Info with a - link
    + link
    Info with a - link
    + link
    Inverse with a - link
    + link
    Inverse with a - link
    + link
    Inverse with a - link
    + link
    Secondary with a - link
    + link
    Secondary with a - link
    + link
    Secondary with a - link
    + link     @@ -383,22 +382,22 @@ Specialization <div outputclass="d-flex gap-2" margin="b2"> <div theme="primary-contrast" padding="3" rounded="yes" outputclass="flex-fill text-center">Primary with a - <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div> + <xref href="#">link</xref></div> <div theme="primary-subtle" padding="3" rounded="yes" outputclass="flex-fill text-center">Primary with a - <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div> + <xref href="#">link</xref></div> <div theme="primary-muted" padding="3" rounded="yes" outputclass="flex-fill text-center">Primary with a - <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div> + <xref href="#">link</xref></div> </div>
    <xmlatt>outputclass</xmlatt> <div outputclass="d-flex gap-2 mb-2"> <div outputclass="theme-primary theme-contrast p-3 flex-fill text-center rounded">Primary with a - <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div> + <xref href="#">link</xref></div> <div outputclass="theme-primary theme-subtle p-3 flex-fill text-center rounded">Primary with a - <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div> + <xref href="#">link</xref></div> <div outputclass="theme-primary theme-muted p-3 flex-fill text-center rounded">Primary with a - <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div> + <xref href="#">link</xref></div> </div>
    From ae7140a8be868c0ba62494fdee6bbd1e4381b520 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 12 Aug 2026 22:02:21 +0200 Subject: [PATCH 38/43] Fix header --- .github/dita-ot/header.xml | 55 +++++++++++++++++++------------------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml index 26bb938..a358728 100644 --- a/.github/dita-ot/header.xml +++ b/.github/dita-ot/header.xml @@ -27,33 +27,34 @@ class="ms-1 badge bg-subtle-primary fg-primary" >v6 - - +
    + +
      + + + + + + + - - - + + + + + - - - 6 From f52238bc036b8c61bd81c072e554022daf101b8d Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sat, 15 Aug 2026 08:51:42 +0200 Subject: [PATCH 41/43] Switch sidebar footer to use theme --- .github/dita-ot/sidebar-footer.xml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/dita-ot/sidebar-footer.xml b/.github/dita-ot/sidebar-footer.xml index b49e4c1..4d144a7 100644 --- a/.github/dita-ot/sidebar-footer.xml +++ b/.github/dita-ot/sidebar-footer.xml @@ -1,4 +1,6 @@ -
      +

      Specialization From 8b5468f973f145951d17516e987f8a90bcc92c95 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Mon, 17 Aug 2026 11:00:16 +0200 Subject: [PATCH 42/43] Amend example --- sample/color.dita | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sample/color.dita b/sample/color.dita index 7527336..3cec798 100644 --- a/sample/color.dita +++ b/sample/color.dita @@ -244,7 +244,7 @@

    • A second item
      • - + @@ -279,7 +279,7 @@ <li>A second item</li> </list-group> -<carousel theme="inverse" width="50" indicators="yes"> +<carousel theme="inverse-muted" width="50" indicators="yes"> <carousel-item> <image href="..."/> </carousel-item> @@ -307,7 +307,7 @@ ... </ul> -<ul outputclass="carousel theme-inverse w-50"> +<ul outputclass="carousel theme-inverse theme-muted w-50"> ... </ul>
    From 245bfcecefd07cfed1273d64695f49edb3ed10a5 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 19 Aug 2026 13:41:54 +0200 Subject: [PATCH 43/43] Move bird --- .github/dita-ot/favicon.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/dita-ot/favicon.svg b/.github/dita-ot/favicon.svg index cd3be0a..a34abbd 100644 --- a/.github/dita-ot/favicon.svg +++ b/.github/dita-ot/favicon.svg @@ -19,7 +19,7 @@ - +