.bg-success
+.bg-90
+.bg-80
+.bg-70
+.bg-60
+.bg-50
+.bg-40
+.bg-30
+.bg-20
+.bg-10
`} />
+
+As mentioned above, this works by combining the power of multiple utilities and CSS `color-mix()`. Here's how the compiled CSS looks:
+
+```css
+[class*="bg-"] {
+ background-color: var(--bs-bg);
+}
+
+.bg-success {
+ --bs-bg: var(--bs-success);
+}
+
+.bg-10 {
+ background-color: color-mix(in srgb, var(--bs-bg) 10%, transparent);
+}
+```
+
## Background gradient
By adding a `.bg-gradient` class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
@@ -40,6 +88,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
})}
.bg-black.bg-gradient
+<<<<<<< HEAD
## Opacity
@@ -74,6 +123,8 @@ Or, choose from any of the `.bg-opacity` utilities:
This is 25% opacity success background
This is 10% opacity success background
`} />
+=======
+>>>>>>> c719573e0 (More docs stuff and wip edits)
## CSS
In addition to the following Sass functionality, consider reading about our included [CSS custom properties]([[docsref:/customize/css-variables]]) (aka CSS variables) for colors and more.
@@ -82,7 +133,9 @@ In addition to the following Sass functionality, consider reading about our incl
Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
-{/* */}
+
+
+
{/* */}
diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx
index 5bcd4c4722..0cb429f589 100644
--- a/site/src/content/docs/utilities/colors.mdx
+++ b/site/src/content/docs/utilities/colors.mdx
@@ -6,38 +6,41 @@ toc: true
import { getData } from '@libs/data'
-
-
## Colors
Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]([[docsref:/helpers/colored-links]]) which have `:hover` and `:focus` states.
-
-Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don’t yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6.
-
+- Colors are generated from the `$new-theme-colors` Sass map with a `theme-color-values()` function that looks up semantic colors based on a particular key from the Bootstrap theme config.
+- Additional colors are generated from the separate `$theme-texts` Sass map.
+- Text utilities are generated in a two-step process to allow for dynamic alpha transparency changes:
+ - We generate an attribute utility for classes that include `.text-`, which looks like `[class*="text-"]`, and set `color: var(--bs-text)`.
+ - Then, our specific color utilities set the `--bs-text` CSS variable to the color value.
+- Text utilities don't set `background-color`, so you may need to use `.bg-` [background utilities]([[docsref:/utilities/background]]) for proper contrast.
`.text-${themeColor.name}
-.text-${themeColor.name}-emphasis
`),
- `
-.text-body
-.text-body-emphasis
-.text-body-secondary
-.text-body-tertiary
+ ...getData('theme-colors').map((themeColor) => `.text-${themeColor.name}
`),
+ `.text-fg
+.text-fg-1
+.text-fg-2
+.text-fg-3
-.text-black
-.text-white
-.text-black-50
-.text-white-50
`
+.text-black
+.text-white
`
]} />
-
-**Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They’ll be removed in v6.0.0.
-
+Behind the scenes, the utilities come together like this:
-
-**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
-
+```css
+[class*="text-"] {
+ color: var(--bs-text);
+}
+
+.text-primary {
+ --bs-text: var(--bs-primary);
+}
+```
+
+
## Opacity
@@ -84,16 +87,14 @@ In addition to the following Sass functionality, consider reading about our incl
Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
-{/* */}
+
-{/* */}
+
Grayscale colors are also available, but only a subset are used to generate any utilities.
{/* */}
-{/* */}
-
Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
{/* */}
diff --git a/site/src/libs/data.ts b/site/src/libs/data.ts
index b4279b965d..b23ab350da 100644
--- a/site/src/libs/data.ts
+++ b/site/src/libs/data.ts
@@ -23,7 +23,7 @@ const dataDefinitions = {
container: zPxSizeOrEmpty
})
.array(),
- colors: zNamedHexColors(13),
+ colors: zNamedHexColors(11),
'core-team': z
.object({
name: z.string(),
diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts
index 3aa1348c42..0642cb0c1c 100644
--- a/site/src/types/auto-import.d.ts
+++ b/site/src/types/auto-import.d.ts
@@ -7,6 +7,7 @@
*/
export declare global {
export const AddedIn: typeof import('@shortcodes/AddedIn.astro').default
+ export const BreakingChange: typeof import('@shortcodes/BreakingChange.astro').default
export const BsTable: typeof import('@shortcodes/BsTable.astro').default
export const Callout: typeof import('@shortcodes/Callout.astro').default
export const CalloutDeprecatedDarkVariants: typeof import('@shortcodes/CalloutDeprecatedDarkVariants.astro').default