docs: update theme and content

mrholek · mrholek · commit de9be7c92ff0 · 2023-04-29T16:19:34.000+02:00
diff --git a/docs/assets/scss/_content.scss b/docs/assets/scss/_content.scss
@@ -1,7 +1,13 @@
 //
-// Bootstrap docs content theming
+// CoreUI docs content theming
 //
 
+.docs-intro {
+  > h2 {
+    --cui-heading-color: var(--cui-emphasis-color);
+  }
+}
+
 .docs-content {
   > h2,
   > h3,
diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md
@@ -214,7 +214,7 @@ myAlert.addEventListener('closed.coreui.alert', event => {
 
 ## Customizing
 
-### CSS Variables
+### CSS variables
 
 Alerts use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
@@ -224,43 +224,10 @@ Alerts use local CSS variables on `.alert` for enhanced real-time customization.
 
 {{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}
 
-### SASS variants
-
-CoreUI allows defining variant colors in two ways.
-
-Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to customize these loops and extend CoreUI's base-modifier approach to your own code.
-
-#### Manual
-
-You can define each color manually and keep full control of the component appearance.
-
-{{< highlight scss >}}
-$alert-variants: (
-  "primary": (
-    "background": $your-bg-color,
-    "border": $your-border-color,
-    "color": $your-color,
-    "link-color": $your-link-color
-  )
-  ...
-);
-{{< /highlight >}}
-
-#### Color function
-
-The color set can be generated automatically thanks to our `alert-color-map` function.
-
-{{< scss-docs name="alert-color-functions" file="scss/_functions.scss" >}}
-
-{{< highlight scss >}}
-$alert-variants: (
-  "primary": alert-color-map($primary),
-  ...
-);
-{{< /highlight >}}
-
 ### SASS mixin
 
+{{< deprecated-in "4.3.0" >}}
+
 Used in combination with `$alert-variants` to create contextual modifier classes for our alerts.
 
 {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
@@ -269,6 +236,4 @@ Used in combination with `$alert-variants` to create contextual modifier classes
 
 Loop that generates the modifier classes with the `alert-variant()` mixin.
 
-{{< scss-docs name="alert-variants" file="scss/_variables.scss" >}}
-
 {{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}}
diff --git a/docs/content/components/badge.md b/docs/content/components/badge.md
@@ -93,7 +93,7 @@ Apply the `.rounded-pill` modifier class to make badges rounded.
 
 ## Customizing
 
-### CSS Variables
+### CSS variables
 
 Badges use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/docs/content/components/breadcrumb.md b/docs/content/components/breadcrumb.md
@@ -103,7 +103,7 @@ For more information, see the [ARIA Authoring Practices Guide breadcrumb pattern
 
 ## Customizing
 
-### CSS Variables
+### CSS variables
 
 Breadcrumbs use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md
@@ -54,7 +54,7 @@ You can combine button with our [CoreUI Icons](https://icons.coreui.io/).
 {{< example >}}
 {{< buttons.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<button type="button" class="btn btn-{{ .name }}"><span class="cil-contrast btn-icon mr-2"></span> {{ .name | title }}</button>
+<button type="button" class="btn btn-{{ .name }}"><span class="cil-contrast me-2"></span> {{ .name | title }}</button>
 {{- end -}}
 {{< /buttons.inline >}}
 
diff --git a/docs/content/components/callout.md b/docs/content/components/callout.md
@@ -27,7 +27,7 @@ Callout component is prepared for any length of text, as well as an optional ele
 
 ## Customizing
 
-### CSS Variables
+### CSS variables
 
 Callouts use local CSS variables on `.callout` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/docs/content/components/card.md b/docs/content/components/card.md
@@ -747,7 +747,7 @@ Just like with card groups, card footers will automatically line up.
 
 ## Customizing
 
-### CSS Variables
+### CSS variables
 
 Cards use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/docs/content/components/close-button.md b/docs/content/components/close-button.md
@@ -38,5 +38,5 @@ Change the default `.btn-close` to be white with the `.btn-close-white` class. T
 
 {{< scss-docs name="close-variables" file="scss/_variables.scss" >}}
 
-### CSS Variables
+### CSS variables
 {{< css-vars-docs file="scss/_close.scss" >}}
diff --git a/docs/content/components/dropdowns.md b/docs/content/components/dropdowns.md
@@ -1095,7 +1095,7 @@ myDropdown.addEventListener('show.coreui.dropdown', event => {
 
 ## Customizing
 
-### CSS Variables
+### CSS variables
 
 Dropdowns use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/docs/content/components/list-group.md b/docs/content/components/list-group.md
@@ -475,7 +475,7 @@ tabElms.forEach(tabElm => {
 
 ## Customizing
 
-### CSS Variables
+### CSS variables
 
 List groups use local CSS variables on `.list-group` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
@@ -485,40 +485,10 @@ List groups use local CSS variables on `.list-group` for enhanced real-time cust
 
 {{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
 
-### SASS variants
-
-CoreUI allows defining variant colors in two ways.
-
-#### Manual
-
-You can define each color manually and keep full control of the component appearance.
-
-{{< highlight scss >}}
-$alert-variants: (
-  "primary": (
-    "background": $your-bg-color,
-    "background-hover": $your-bg-hover-color,
-    "color": $your-color
-  )
-  ...
-);
-{{< /highlight >}}
-
-#### Color function
-
-The color set can be generated automatically thanks to our `list-group-color-map` function.
-
-{{< scss-docs name="list-group-color-functions" file="scss/_functions.scss" >}}
-
-{{< highlight scss >}}
-$alert-variants: (
-  "primary": alert-color-map($primary),
-  ...
-);
-{{< /highlight >}}
-
 ### SASS mixins
 
+{{< deprecated-in "4.3.0" >}}
+
 Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
 
 {{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
diff --git a/docs/content/components/navbar.md b/docs/content/components/navbar.md
@@ -781,7 +781,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
 
 ## Customizing
 
-### CSS Variables
+### CSS variables
 
 Navbars use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/docs/content/components/navs-tabs.md b/docs/content/components/navs-tabs.md
@@ -643,7 +643,7 @@ tabEl.addEventListener('shown.coreui.tab', event => {
 
 ## Customizing
 
-### CSS Variables
+### CSS variables
 
 Navs use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/docs/content/components/offcanvas.md b/docs/content/components/offcanvas.md
@@ -339,7 +339,7 @@ myOffcanvas.addEventListener('hidden.coreui.offcanvas', event => {
 
 ## Customization
 
-### CSS Variables
+### CSS variables
 
 Offcanvas uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/docs/content/components/pagination.md b/docs/content/components/pagination.md
@@ -161,7 +161,7 @@ Or with `.justify-content-end`:
 
 ## Customizing
 
-### CSS Variables
+### CSS variables
 
 Pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/docs/content/content/tables.md b/docs/content/content/tables.md
@@ -822,17 +822,16 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 
 ## Customization
 
-### SASS
-
-#### Variables
+### SASS variables
 
 {{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
 
-#### Loop
+
+### SASS loop
 
 {{< scss-docs name="table-loop" file="scss/_variables.scss" >}}
 
-#### Customizing
+### Customizing
 
 - The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants.
 - Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-scale` variable.
diff --git a/docs/content/utilities/background.md b/docs/content/utilities/background.md
@@ -14,7 +14,7 @@ Similar to the contextual text color classes, set the background of an element t
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
-<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
+<div class="p-3 mb-2 bg-{{ .name }}-subtle text-{{ .name }}-emphasis">.bg-{{ .name }}-subtle</div>
 {{- end -}}
 {{< /colors.inline >}}
 <p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
diff --git a/docs/layouts/partials/header.html b/docs/layouts/partials/header.html
@@ -33,7 +33,7 @@
                 data-coreui-display="static">
           {{ partial "icons/contrast.svg" (dict "class" "theme-icon-active icon icon-xl") }}
         </button>
-        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--cui-dropdown-min-width: 8rem;">
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="cd-theme" style="--cui-dropdown-min-width: 8rem;">
           <li>
             <button type="button" class="dropdown-item d-flex align-items-center" data-coreui-theme-value="light">
               {{ partial "icons/sun.svg" (dict "class" "theme-icon icon icon-lg me-2") }}
diff --git a/docs/layouts/shortcodes/deprecated-in.html b/docs/layouts/shortcodes/deprecated-in.html
@@ -0,0 +1,5 @@
+{{- /* Outputs badge to identify the version something was deprecated */ -}}
+
+{{- $version := .Get 0 -}}
+
+<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2">Deprecated in v{{ $version }}</small>
diff --git a/docs/layouts/shortcodes/js-docs.html b/docs/layouts/shortcodes/js-docs.html
@@ -26,8 +26,8 @@
   {{- $match = replace $match $capture_start "" -}}
   {{- $match = replace $match $capture_end "" -}}
 
-  <div class="bd-example-snippet bd-code-snippet">
-    <div class="bd-clipboard">
+  <div class="docs-example-snippet docs-code-snippet">
+    <div class="docs-clipboard">
       <button type="button" class="btn-clipboard" title="Copy to clipboard">
         <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
       </button>
