v6-dev

[mdo]

Yes, it's happening! Here's what's happened so far:

High level

• Dropped extraneous grid, reboot, and utilities bundles for now (potentially will bring them back)
• Browser support has been significantly updated, moving to floating targets (e.g., last 1 versions and not dead)
• Moved from Hugo to Astro for the docs
• Fixes Investigate adding markdownlint #29919: Added Markdownlint via npm script (npm run lint-mdx)
• Monorepo structure?

Sass & CSS

• Fix Switch from Sass imports to Sass Module System #29853: Migrated to Sass modules across the board
• All Dart Sass, no Node Sass
• New _colors.scss stylesheet
• New _config.scss stylesheet
• Fix Reorganize Scss folder structure #28553: Rearranged Sass files (e.g., _forms.scss is now forms/index.scss and uses @forward)
• Implement CSS layers
• Fix Add global configuration and methods to enable the use of calc by default in numeric operations #40412: Drop custom add() and subtract() functions for native calc(); also replace custom divide() function with Sass math.div().
• Drop !important from utilities
• Native CSS nesting in output?
• Replace RFS with something simpler, maybe using clamp()?
• Localize variables, mixins, and some functions within each stylesheet that needs them (except truly shared or global ones)
• Fix Switch to using range context queries #41046: Range CSS media queries (e.g. @media (width < 768px)

Colors, Customizing, Themes, etc

• Fix Add CSS variables for all color variations #39587: Add all color tints and shades as CSS variables
  • Migrate components to use these CSS variables
• Simplify theme support down to light/dark mode, media queries only instead of data-bs-theme?
• Use more light-dark() function?
• Ensure color-scheme values are being set
• If using data-bs-theme still, look into how we could set color/bg automatically?
• Move to oklch over mix of hex/rgb?
• Use native color-mix() as needed
• Fix Gray color utilities do not follow text-{color}-{level} convention #38569: Normalize gray color keys in $grays map to the other colors
• Use relative colors as needed (component variants and states?)
• P3 colors? Mixin to convert them? Plugin to do so after the fact?
• Expand the color palette more if we can? Move from semantic colors to full palette for component variants?

Layout

• Dropped OG flexbox grid and replaced with CSS Grid layout (includes dropping most mixins I think?)
• Renamed $grid-breakpoints to $breakpoints
• Renamed -xxl breakpoint to -2xl, as well as all component size variants
• Sub grid modifier to inherit parent grid cols
• Add autofill grid option plus 12-col system
• Explore additional flex utilities to support the move
• Expand width utilities perhaps? Since grid layout uses grid-specific properties

Reboot

• Ditch legend and fieldset changes, add a fieldset reset perhaps
• Fix <code> elements ignore auto-contrasting colors #40582: Colorize code elements for light/dark mode

Content

• Fix Explore a .content class for broad margin changes and more #30177: Add new .content-body class for long form content

Buttons

• Move to inline-flex
• Simplify btn-check code? Restyle checkboxes as button?

Forms

• Replace custom radio SVG with background/border combo
• Improve input groups, especially with validation
• :user-valid/invalid vs :valid/invalid
• field-sizing: content for textareas?

Utilities & Helpers

• Fix Replace aspect ratio options with min aspect ratios #36129: Moved ratio helper to become .ratio utility
• Sidebar: You can now modify the utilities map to make these responsive. Original request at Suggest a new feature - add breakpoints to ratios #39449.
• Fix Remove the clearfix helper #38641: Drop clearfix helper for new display: flow-root utility, .d-flow-root
• Explore @property in CSS for disabling inheritance? (see appendix)
• Smooth out API?
• Fix Rename max-width and max-height utilities from mw-*/mh-* to max-w-*/max-h-* #40674: Rename max-width and max-height utilities for clarity

JavaScript

• Drop all things jQuery from our plugins
• Modernize modal plugin to become a new Dialog plugin, built on the native dialog component
• Popover native plugin? Dialog for popover to natively disable scroll? Anchor positioning (not yet in FF or Safari)
• @starting-style for animations?
• Native drop down menu?
• Fixes Expounding on "opt-in for performance reasons" #29378: Automatically make tooltips and popovers work, remove performance mention from docs

---

Appendix

Custom properties to disable inheritance in some utility classes?

@property --bs-bg-alpha {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --bs-text-alpha {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

Screenshots

Expansive color palette?

More button variants, all generated from a larger map?

CSS grid in action

[ffoodd]

Wow, what a nice move 🚀

Any way to share ideas for v6? Or should we try some PR to your branch?

[julien-deramond]

Adding this link as a reference for reusing other elements in case we run into any issues: #38319

[mdo]

@ffoodd Ayyy good to see you! Issues here or jump into our team Slack :). I'll update the original comment with more of what I'm thinking shortly.

[ffoodd]

💜

I only have a few things that comes to my mind :

• switch to logical properties, to drop RTLCSS and RTL build ;
• try to rely on modern HTML for components : <dialog>, <details> and <summary>, maybe popover and its API ?
• use container queries for responsive ?

Probably for v7 but the anchor
positioning API could replace Popper / Floating UI, but we may try as a progressive enhancement.

There could be more, but those are already quite big.