From: Mark Otto Date: Thu, 3 Apr 2025 05:15:36 +0000 (-0700) Subject: More docs stuff and wip edits X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=785c31f79b83d0ef40e4bd2ef83d6e84a1f047e3;p=thirdparty%2Fbootstrap.git More docs stuff and wip edits --- diff --git a/package-lock.json b/package-lock.json index 4c11f528dc..2fa7ed7ffd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,11 @@ } ], "license": "MIT", + "dependencies": { + "remark": "^15.0.1", + "remark-html": "^16.0.1", + "yaml": "^2.7.0" + }, "devDependencies": { "@astrojs/check": "^0.9.4", "@astrojs/markdown-remark": "^6.3.2", @@ -19398,7 +19403,6 @@ "version": "2.8.0", "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz", "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==", - "dev": true, "license": "ISC", "bin": { "yaml": "bin.mjs" diff --git a/package.json b/package.json index 38592bad77..41cc054313 100644 --- a/package.json +++ b/package.json @@ -205,5 +205,10 @@ "peerDependencies": { "@popperjs/core": "^2.11.8" } + }, + "dependencies": { + "remark": "^15.0.1", + "remark-html": "^16.0.1", + "yaml": "^2.7.0" } } diff --git a/site/src/components/Tabs.astro b/site/src/components/Tabs.astro new file mode 100644 index 0000000000..54ac2ae3a6 --- /dev/null +++ b/site/src/components/Tabs.astro @@ -0,0 +1,103 @@ +--- +interface Props { + tabs: { + id: string; + label: string; + content?: string; + }[]; + activeTab?: string; +} + +const { tabs, activeTab } = Astro.props; +--- + +
+ + +
+ {tabs.map((tab) => ( +
+ {tab.content || } +
+ ))} +
+
+ + + + diff --git a/site/src/components/shortcodes/BreakingChange.astro b/site/src/components/shortcodes/BreakingChange.astro new file mode 100644 index 0000000000..cdd173bb84 --- /dev/null +++ b/site/src/components/shortcodes/BreakingChange.astro @@ -0,0 +1,16 @@ +--- +/* + * Outputs badge to identify this as a breaking change from previous major version + */ + +interface Props { + version: string +} + +const { version } = Astro.props +--- + +Breaking Change diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 120f3daff9..774e16590d 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -22,7 +22,7 @@ If you are using the `.btn` class on its own, remember to at least define some e Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control. - ` `), ` + ` `), ` `]} /> diff --git a/site/src/content/docs/getting-started/download.mdx b/site/src/content/docs/getting-started/download.mdx index 4088b79d30..2cc4da0b53 100644 --- a/site/src/content/docs/getting-started/download.mdx +++ b/site/src/content/docs/getting-started/download.mdx @@ -4,6 +4,29 @@ description: Download Bootstrap to get the compiled CSS and JavaScript, source c toc: true --- +import Tabs from '@components/Tabs.astro'; + +## CDN + +## Install + + +
+ Custom content for tab 1 +
+
+ Custom content for tab 2 +
+ + ## Compiled CSS and JS Download ready-to-use compiled code for **Bootstrap v[[config:current_version]]** to easily drop into your project, which includes: diff --git a/site/src/content/docs/getting-started/introduction.mdx b/site/src/content/docs/getting-started/introduction.mdx index 4c621d83e0..bbfbfcd349 100644 --- a/site/src/content/docs/getting-started/introduction.mdx +++ b/site/src/content/docs/getting-started/introduction.mdx @@ -1,6 +1,6 @@ --- title: Get started with Bootstrap -description: Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes. +description: Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in a few minutes. aliases: - "/docs/[[config:docs_version]]/getting-started/" - "/docs/getting-started/" @@ -12,8 +12,6 @@ toc: true Get started by including Bootstrap’s production-ready CSS and JavaScript via CDN without the need for any build steps. See it in practice with this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj). -
- 1. **Create a new `index.html` file in your project root.** Include the `` tag as well for [proper responsive behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) in mobile devices. ```html diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx index 9d529fd4eb..cc968cbabe 100644 --- a/site/src/content/docs/utilities/background.mdx +++ b/site/src/content/docs/utilities/background.mdx @@ -1,32 +1,80 @@ --- title: Background -description: Convey meaning through `background-color` and add decoration with gradients. +description: Convey meaning through `background-color`, adjust opacity with `color-mix()` utilities, and add decoration with gradients. toc: true --- import { getData } from '@libs/data' - - ## Background color -Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you’ll want to use `.text-*` [color utilities]([[docsref:/utilities/colors]]). +Set the `background-color` of an element. - -Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don’t yet respond to color modes, however, any `.bg-*-subtle` 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-bgs` Sass map. +- Background utilities are generated in a two-step process to allow for dynamic alpha transparency changes: + - We generate an attribute utility for classes that include `.bg-`, which looks like `[class*="bg-"]`, and set `background-color: var(--bs-bg)`. + - Then, our specific color utilities set the `--bs-bg` CSS variable to the color value. +- Background utilities don't set `color`, so you may need to use `.text-` or `.text-on-*` [color utilities]([[docsref:/utilities/colors]]). `
.bg-${themeColor.name}
-
.bg-${themeColor.name}-subtle
`), - `
.bg-body-secondary
-
.bg-body-tertiary
-
.bg-body
-
.bg-black
-
.bg-white
-
.bg-transparent
` + ...getData('theme-colors').map((themeColor) => `
.bg-${themeColor.name}
+
.bg-subtle-${themeColor.name}
`), + `
.bg
+
.bg-1
+
.bg-2
+
.bg-3
` ]} /> +Behind the scenes, the utilities come together like this: + +```css +[class*="bg-"] { + background-color: var(--bs-bg); +} + +.bg-success { + --bs-bg: var(--bs-success); +} +``` + + + +## Background opacity + + + +**Background opacity utilities have changed in v6** to use `.bg-{number}` instead of `.bg-opacity-{number}`. These new utilities are built with CSS-native `color-mix()` functions that mix the `.bg-{color}`'s CSS variable with `transparent`. This allows for real-time background opacity changes without compilation. + +Note that changing the alpha-transparency or opacity of a background color may require you to also update the text color to ensure proper contrast. + +.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

- -

.text-black

-

.text-white

-

.text-black-50

-

.text-white-50

` + ...getData('theme-colors').map((themeColor) => `
.text-${themeColor.name}
`), + `
.text-fg
+
.text-fg-1
+
.text-fg-2
+
.text-fg-3
+ +
.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