diff --git a/.changeset/additive-v6-utilities.md b/.changeset/additive-v6-utilities.md new file mode 100644 index 000000000..49167d616 --- /dev/null +++ b/.changeset/additive-v6-utilities.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": minor +--- + +Added container-query (`.contains-*`), grid (`.grid-cols-*`, `.place-items-*`), extended shadow and `.border-keyline` utilities. diff --git a/core/package.json b/core/package.json index 47ecf575f..b2b097125 100644 --- a/core/package.json +++ b/core/package.json @@ -88,7 +88,7 @@ }, { "path": "./dist/css/tabler.min.css", - "maxSize": "80 kB" + "maxSize": "82 kB" }, { "path": "./dist/css/tabler.rtl.css", @@ -96,7 +96,7 @@ }, { "path": "./dist/css/tabler.rtl.min.css", - "maxSize": "80 kB" + "maxSize": "82 kB" }, { "path": "./dist/css/tabler-flags.css", diff --git a/core/scss/_props.scss b/core/scss/_props.scss index f92fd5b9e..ef8667ccd 100644 --- a/core/scss/_props.scss +++ b/core/scss/_props.scss @@ -82,6 +82,9 @@ --shadow#{if(sass($name): '-#{$name}'; else: '')}: #{$value}; } + // Borders + --border-width-keyline: 0.5px; + // Border radiuses --border-radius-scale: 1; @each $name, $value in $border-radiuses { diff --git a/core/scss/_utilities.scss b/core/scss/_utilities.scss index b2bf51c67..69c16a6f5 100644 --- a/core/scss/_utilities.scss +++ b/core/scss/_utilities.scss @@ -110,8 +110,12 @@ $utilities: map.merge( class: shadow, values: ( null: var(--box-shadow), + xs: var(--shadow-xs), sm: var(--box-shadow-sm), + md: var(--shadow-md), lg: var(--box-shadow-lg), + xl: var(--shadow-xl), + '2xl': var(--shadow-2xl), none: none, ), ), @@ -936,6 +940,62 @@ $utilities: map.merge( class: z, values: $zindex-levels, ), + // Container query containment — turns an element into a query container so + // container-query components (`.card-group`, `.list-group-horizontal`) resolve. + 'container': ( + property: container-type, + class: contains, + values: ( + inline: inline-size, + size: size, + ), + ), + // Grid column counts, responsive like `justify-content`. + 'grid-column-counts': ( + responsive: true, + property: grid-template-columns, + class: grid-cols, + values: ( + 1: repeat(1, minmax(0, 1fr)), + 2: repeat(2, minmax(0, 1fr)), + 3: repeat(3, minmax(0, 1fr)), + 4: repeat(4, minmax(0, 1fr)), + 6: repeat(6, minmax(0, 1fr)), + subgrid: subgrid, + ), + ), + // `.grid-cols-fill` — span every column of the parent grid. + 'grid-columns': ( + property: grid-column, + class: grid-cols, + values: ( + fill: #{'1 / -1'}, + ), + ), + 'grid-auto-flow': ( + property: grid-auto-flow, + class: grid-auto-flow, + values: row column dense, + ), + 'justify-items': ( + property: justify-items, + values: ( + start: start, + end: end, + center: center, + stretch: stretch, + ), + ), + 'place-items': ( + responsive: true, + property: place-items, + values: ( + start: start, + end: end, + center: center, + stretch: stretch, + ), + ), ), $utilities ); diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 8b2a49518..802c1b641 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -711,6 +711,7 @@ $border-widths: ( 3: 3px, 4: 4px, 5: 5px, + keyline: var(--border-width-keyline), ) !default; $border-style: solid !default; diff --git a/core/scss/tests/_utilities-additive.test.scss b/core/scss/tests/_utilities-additive.test.scss new file mode 100644 index 000000000..d65ce0473 --- /dev/null +++ b/core/scss/tests/_utilities-additive.test.scss @@ -0,0 +1,185 @@ +// Guards the additive Bootstrap v6 utilities wired into `$utilities` +// (scss/_utilities.scss): container-query containment, grid column/flow/place +// utilities and the extended shadow scale. Each `it` pulls the real submap out +// of `$utilities` and asserts the classes `generate-utility` produces from it, +// so a dropped or renamed key fails here instead of silently vanishing from the +// bundle. `--tblr-` prefixing happens later in the css pipeline, so custom +// properties are expected bare. + +@use 'sass:map'; +@use '../config' as *; + +@include describe('additive v6 utilities') { + @include it('container-query containment emits .contains-inline / .contains-size') { + @include assert() { + @include output() { + @include generate-utility(map.get($utilities, 'container')); + } + @include expect() { + .contains-inline { + container-type: inline-size !important; + } + .contains-size { + container-type: size !important; + } + } + } + } + + @include it('grid column counts emit .grid-cols-1…6 and .grid-cols-subgrid') { + @include assert() { + @include output() { + @include generate-utility(map.get($utilities, 'grid-column-counts')); + } + @include expect() { + .grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)) !important; + } + .grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + .grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } + .grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + } + .grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; + } + .grid-cols-subgrid { + grid-template-columns: subgrid !important; + } + } + } + } + + @include it('grid column span emits .grid-cols-fill') { + @include assert() { + @include output() { + @include generate-utility(map.get($utilities, 'grid-columns')); + } + @include expect() { + .grid-cols-fill { + grid-column: #{'1 / -1'} !important; + } + } + } + } + + @include it('grid auto-flow emits .grid-auto-flow-row/column/dense') { + @include assert() { + @include output() { + @include generate-utility(map.get($utilities, 'grid-auto-flow')); + } + @include expect() { + .grid-auto-flow-row { + grid-auto-flow: row !important; + } + .grid-auto-flow-column { + grid-auto-flow: column !important; + } + .grid-auto-flow-dense { + grid-auto-flow: dense !important; + } + } + } + } + + @include it('justify-items and place-items emit start/end/center/stretch') { + @include assert() { + @include output() { + @include generate-utility(map.get($utilities, 'justify-items')); + @include generate-utility(map.get($utilities, 'place-items')); + } + @include expect() { + .justify-items-start { + justify-items: start !important; + } + .justify-items-end { + justify-items: end !important; + } + .justify-items-center { + justify-items: center !important; + } + .justify-items-stretch { + justify-items: stretch !important; + } + .place-items-start { + place-items: start !important; + } + .place-items-end { + place-items: end !important; + } + .place-items-center { + place-items: center !important; + } + .place-items-stretch { + place-items: stretch !important; + } + } + } + } + + @include it('shadow scale gains xs / md / xl / 2xl reading the --shadow-* tokens') { + @include assert() { + @include output() { + @include generate-utility(map.get($utilities, 'shadow')); + } + @include expect() { + .shadow { + box-shadow: var(--box-shadow) !important; + } + .shadow-xs { + box-shadow: var(--shadow-xs) !important; + } + .shadow-sm { + box-shadow: var(--box-shadow-sm) !important; + } + .shadow-md { + box-shadow: var(--shadow-md) !important; + } + .shadow-lg { + box-shadow: var(--box-shadow-lg) !important; + } + .shadow-xl { + box-shadow: var(--shadow-xl) !important; + } + .shadow-2xl { + box-shadow: var(--shadow-2xl) !important; + } + .shadow-none { + box-shadow: none !important; + } + } + } + } + + @include it('border-width utility gains .border-keyline from the token') { + @include assert() { + @include output() { + @include generate-utility(map.get($utilities, 'border-width')); + } + @include expect() { + .border-1 { + border-width: 1px !important; + } + .border-2 { + border-width: 2px !important; + } + .border-3 { + border-width: 3px !important; + } + .border-4 { + border-width: 4px !important; + } + .border-5 { + border-width: 5px !important; + } + .border-keyline { + border-width: var(--border-width-keyline) !important; + } + } + } + } +}