@volverjs/style 0.1.12-beta.8 → 0.1.12

package/package.json

@@ -24,11 +24,10 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.12-beta.8",
+  "version": "0.1.12",
   "engines": {
     "node": ">= 12.x"
   },
-  "packageManager": "pnpm@7.8.0",
   "type": "module",
   "main": "dist/volver.css",
   "style": "dist/volver.css",
@@ -37,48 +36,47 @@
     "dist/*"
   ],
   "devDependencies": {
-    "@iconify/vue": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@vueuse/core": "^10.4.1",
+    "@iconify/vue": "^4.1.2",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vueuse/core": "^11.1.0",
     "@vueuse/head": "^2.0.0",
-    "eslint": "^8.49.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "glob": "^10.3.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "glob": "^11.0.0",
     "icss-utils": "^5.1.0",
-    "markdown-it-anchor": "^8.6.7",
+    "markdown-it-anchor": "^9.2.0",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.29",
-    "postcss-html": "^1.5.0",
-    "postcss-preset-env": "^9.1.3",
+    "postcss": "^8.4.47",
+    "postcss-html": "^1.7.0",
+    "postcss-preset-env": "^10.0.5",
+    "prettier": "^3.3.3",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "reduce-css-calc": "^2.1.8",
-    "remark": "^14.0.3",
-    "remark-frontmatter": "^4.0.1",
-    "remark-gfm": "^3.0.1",
-    "remark-lint": "^9.1.2",
-    "sass": "^1.66.1",
-    "stylelint": "^15.10.3",
-    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recommended-scss": "^13.0.0",
+    "remark": "^15.0.1",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-lint": "^10.0.0",
+    "sass": "^1.79.4",
+    "stylelint": "^16.9.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard-scss": "^11.0.0",
-    "unplugin-auto-import": "^0.16.6",
-    "unplugin-vue-components": "^0.25.2",
-    "vite": "^4.4.9",
-    "vite-plugin-css-export": "^2.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "unplugin-auto-import": "^0.18.3",
+    "unplugin-vue-components": "^0.27.4",
+    "vite": "^5.4.8",
+    "vite-plugin-css-export": "^3.0.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-handlebars": "^1.6.0",
-    "vite-plugin-markdown": "^2.1.0",
-    "vite-plugin-pages": "^0.31.0",
-    "vite-plugin-stylelint": "^5.1.1",
-    "vite-plugin-vue-layouts": "^0.8.0",
-    "vite-ssg": "^0.23.1",
-    "vite-ssg-sitemap": "^0.5.1",
-    "vue": "^3.3.4",
+    "vite-plugin-handlebars": "^2.0.0",
+    "vite-plugin-markdown": "^2.2.0",
+    "vite-plugin-pages": "^0.32.3",
+    "vite-plugin-stylelint": "^5.3.1",
+    "vite-plugin-vue-layouts": "^0.11.0",
+    "vite-ssg": "^0.23.8",
+    "vite-ssg-sitemap": "^0.8.1",
+    "vue": "^3.5.11",
     "vue-live": "^2.5.4",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.4.5"
   },
   "exports": {
     ".": "./dist/volver.css",
@@ -88,6 +86,8 @@
     "./scss/mixins": "./src/tools/_mixins.scss",
     "./scss/settings": "./src/settings/_index.scss",
     "./scss/preflight": "./src/_preflight.scss",
+    "./scss/themes/dark/context": "./src/themes/dark/_context.scss",
+    "./scss/themes/dark/settings": "./src/themes/dark/settings/_index.scss",
     "./scss": "./src/volver.scss",
     "./reset": "./dist/reset.css",
     "./scss/reset": "./src/reset.scss",
@@ -230,6 +230,7 @@
     "dev": "vite --port 3000 --open",
     "build": "node ./scripts/build.js",
     "design-tokens": "node ./scripts/generateDesignTokens.js",
-    "styleguide": "vite-ssg build"
+    "styleguide": "vite-ssg build",
+    "preview": "vite preview"
   }
 }

package/src/_preflight.scss

@@ -36,6 +36,8 @@
 		&:where(p) {
 			@extend %vv-text !optional;
 			@extend %vv-text--copy !optional;
+			@extend %overflow-hidden !optional;
+			@extend %text-ellipsis !optional;
 		}
 
 		&:where(blockquote) {
@@ -53,10 +55,30 @@
 			@extend %list-disc !optional;
 		}
 
-		&:where(ol) {
+		&:where(ol, ol[type='1']) {
 			@extend %list-decimal !optional;
 		}
 
+		&:where(ol[type='a']) {
+			@extend %list-lower-latin !optional;
+		}
+
+		&:where(ol[type='A']) {
+			@extend %list-upper-latin !optional;
+		}
+
+		&:where(ol[type='i']) {
+			@extend %list-lower-roman !optional;
+		}
+
+		&:where(ol[type='I']) {
+			@extend %list-upper-roman !optional;
+		}
+
+		&:where(li > p) {
+			@extend %inline !optional;
+		}
+
 		&:where(b, strong, th) {
 			@extend %font-bold !optional;
 		}
@@ -84,6 +106,7 @@
 		&:where(abbr) {
 			@extend %underline !optional;
 			@extend %decoration-dotted !optional;
+			@extend %cursor-help !optional;
 		}
 
 		&:where(code) {
@@ -217,6 +240,7 @@
 		// table
 		&:where(table) {
 			@extend %vv-table !optional;
+			@extend %vv-table--bordered !optional;
 
 			:where(tr) {
 				@extend %vv-table__tr !optional;
@@ -224,10 +248,16 @@
 
 			:where(td) {
 				@extend %vv-table__td !optional;
+				@extend %vv-table-modifier-bordered__td !optional;
 			}
 
 			:where(th) {
 				@extend %vv-table__th !optional;
+				@extend %vv-table-modifier-bordered__th !optional;
+			}
+
+			:where(caption) {
+				@extend %vv-table__caption !optional;
 			}
 		}
 

package/src/components/vv-button-group.scss

@@ -48,7 +48,7 @@ $button-component-selector: '.' + $button-component-name;
 				#{$button-component-selector} {
 					// clear top border-radius for first child
 					@include wrap-with-where(
-						$selector: '&:not(:first-child)',
+						$selector: '&:not(:first-of-type)',
 						$enabled: $zero-specificity-for-components
 					) {
 						border-top-right-radius: 0;
@@ -57,7 +57,7 @@ $button-component-selector: '.' + $button-component-name;
 
 					// clear bottom border-radius for last child
 					@include wrap-with-where(
-						$selector: '&:not(:last-child)',
+						$selector: '&:not(:last-of-type)',
 						$enabled: $zero-specificity-for-components
 					) {
 						border-bottom-right-radius: 0;
@@ -67,7 +67,7 @@ $button-component-selector: '.' + $button-component-name;
 					// clear margin for inner children
 					@if map.get($vv-button, '--button-border-width') {
 						@include wrap-with-where(
-							$selector: '&:not(:last-child, :last-child)',
+							$selector: '&:not(:first-of-type, :last-of-type)',
 							$enabled: $zero-specificity-for-components
 						) {
 							margin-block: calc(var(--button-border-width) * -1);
@@ -81,7 +81,7 @@ $button-component-selector: '.' + $button-component-name;
 			#{$button-component-selector} {
 				// clear left border-radius for first child
 				@include wrap-with-where(
-					$selector: '&:not(:first-child)',
+					$selector: '&:not(:first-of-type)',
 					$enabled: $zero-specificity-for-components
 				) {
 					border-top-left-radius: 0;
@@ -90,7 +90,7 @@ $button-component-selector: '.' + $button-component-name;
 
 				// clear right border-radius for first child
 				@include wrap-with-where(
-					$selector: '&:not(:last-child)',
+					$selector: '&:not(:last-of-type)',
 					$enabled: $zero-specificity-for-components
 				) {
 					border-top-right-radius: 0;
@@ -100,7 +100,7 @@ $button-component-selector: '.' + $button-component-name;
 				// clear margin for inner children
 				@if map.get($vv-button, '--button-border-width') {
 					@include wrap-with-where(
-						$selector: '&:not(:last-child, :last-child)',
+						$selector: '&:not(:first-of-type, :last-of-type)',
 						$enabled: $zero-specificity-for-components
 					) {
 						margin-inline: calc(var(--button-border-width) * -1);

package/src/components/vv-tooltip.scss

@@ -14,7 +14,7 @@ $component-selector: '.#{ $component-name}';
 );
 
 @include wrap-with-where(
-	$selector: '*:has(#{$component-selector})',
+	$selector: '*:has(> #{$component-selector})',
 	$enabled: $zero-specificity-for-components
 ) {
 	position: relative;

package/src/export.scss

@@ -11,13 +11,13 @@
 	// #region CUSTOMIZATION
 	// colors
 	@each $key, $value in $colors {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					@if not
-						str-index($subKey, 'hue') and not
-						str-index($subKey, 'saturation') and not
-						str-index($subKey, 'lightness')
+						string.index($subKey, 'hue') and not
+						string.index($subKey, 'saturation') and not
+						string.index($subKey, 'lightness')
 					{
 						@if '' + $key == $subKey {
 							#{'colors__' + $key}: $subValue;
@@ -35,13 +35,13 @@
 	}
 
 	@each $key, $value in $dark-colors {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					@if not
-						str-index($subKey, 'hue') and not
-						str-index($subKey, 'saturation') and not
-						str-index($subKey, 'lightness')
+						string.index($subKey, 'hue') and not
+						string.index($subKey, 'saturation') and not
+						string.index($subKey, 'lightness')
 					{
 						@if '' + $key == $subKey {
 							#{'dark-colors__' + $key}: $subValue;
@@ -233,10 +233,11 @@
 	@each $size, $value in $spacing {
 		spacing__#{$size}: $value;
 	}
+
 	@each $size, $value in $spacing-dynamic {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					spacing-dynamic__#{$size}__#{$subKey}: $subValue;
 				}
 			}
@@ -247,10 +248,11 @@
 	@each $size, $value in $font-size {
 		font-size__#{$size}: $value;
 	}
+
 	@each $size, $value in $font-size-dynamic {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					font-size-dynamic__#{$size}__#{$subKey}: $subValue;
 				}
 			}

package/src/props/breakpoints.scss

@@ -2,14 +2,15 @@
 @use '../context' as *;
 
 :where(:host, :root, .theme) {
+	@include spread-map-into-props(
+		$map: map.remove($breakpoints, 'xxs'),
+		$prefix: breakpoint
+	);
+
 	@each $breakpoint, $breakpoint-value in $breakpoints {
 		@media screen and (min-width: $breakpoint-value) {
 			--breakpoint-key: #{$breakpoint};
 			--breakpoint-value: #{$breakpoint-value};
 		}
 	}
-	@include spread-map-into-props(
-		$map: map.remove($breakpoints, 'xxs'),
-		$prefix: breakpoint
-	);
 }

package/src/props/spacing.scss

@@ -10,12 +10,12 @@
 	// dynamic
 	@each $name, $sizes in $spacing-dynamic {
 		@each $breakpoint, $size in $sizes {
-			@if map-has-key($breakpoints, $breakpoint) {
+			@if map.has-key($breakpoints, $breakpoint) {
 				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static spacing
-					@if map-has-key($spacing, $size) {
+					@if map.has-key($spacing, $size) {
 						$var: var(--spacing-#{$size});
 					}
 

package/src/props/typography.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../context' as *;
 
 :where(:host, :root, .theme) {
@@ -21,12 +22,12 @@
 	// font-size dynamic
 	@each $name, $sizes in $font-size-dynamic {
 		@each $breakpoint, $size in $sizes {
-			@if map-has-key($breakpoints, $breakpoint) {
+			@if map.has-key($breakpoints, $breakpoint) {
 				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static font-size
-					@if map-has-key($font-size, $size) {
+					@if map.has-key($font-size, $size) {
 						$var: var(--text-#{$size});
 					}
 

package/src/settings/_colors.scss

@@ -13,9 +13,9 @@ $color-success: #178230 !default;
 $color-danger: #af2323 !default;
 $color-info: #31ccec !default;
 $color-warning: #e7b735 !default;
-$color-gray: hsl(color.hue($color-brand) 15% 50%) !default;
-$color-word: hsl(color.hue($color-brand) 15% 10%) !default;
-$color-surface: hsl(color.hue($color-brand) 10% 100%) !default;
+$color-gray: hsl(color-hue($color-brand) 15% 50%) !default;
+$color-word: hsl(color-hue($color-brand) 15% 10%) !default;
+$color-surface: hsl(color-hue($color-brand) 10% 100%) !default;
 $color-surface-palette: (
 	brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 90%),
 	accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 90%),
@@ -25,15 +25,15 @@ $color-surface-palette: (
 	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 90%),
 ) !default;
 $color-surface-palette-no-vars: (
-	brand: hsl(color.hue($color-brand) color.saturation($color-brand) 90%),
-	accent: hsl(color.hue($color-accent) color.saturation($color-accent) 90%),
-	success: hsl(color.hue($color-success) color.saturation($color-success) 90%),
-	danger: hsl(color.hue($color-danger) color.saturation($color-danger) 90%),
-	info: hsl(color.hue($color-info) color.saturation($color-info) 90%),
-	warning: hsl(color.hue($color-warning) color.saturation($color-warning) 90%),
+	brand: hsl(color-hue($color-brand) color-saturation($color-brand) 90%),
+	accent: hsl(color-hue($color-accent) color-saturation($color-accent) 90%),
+	success: hsl(color-hue($color-success) color-saturation($color-success) 90%),
+	danger: hsl(color-hue($color-danger) color-saturation($color-danger) 90%),
+	info: hsl(color-hue($color-info) color-saturation($color-info) 90%),
+	warning: hsl(color-hue($color-warning) color-saturation($color-warning) 90%),
 ) !default;
-$color-shadow: hsl(color.hue($color-brand) 50% 20%) !default;
-$color-backdrop: hsla(color.hue($color-brand) 50% 20% / 20%) !default;
+$color-shadow: hsl(color-hue($color-brand) 50% 20%) !default;
+$color-backdrop: hsla(color-hue($color-brand) 50% 20% / 20%) !default;
 $color-alpha: hsl(0deg 0% 0% / 0%) !default;
 
 // colors map

package/src/settings/_effects.scss

@@ -22,9 +22,9 @@ $box-shadow: (
 ) !default;
 
 // box-shadow without css vars
-$color-shadow-hue: color.hue(colors.$color-shadow);
-$color-shadow-saturation: color.saturation(colors.$color-shadow);
-$color-shadow-lightness: color.lightness(colors.$color-shadow);
+$color-shadow-hue: color-hue(colors.$color-shadow);
+$color-shadow-saturation: color-saturation(colors.$color-shadow);
+$color-shadow-lightness: color-lightness(colors.$color-shadow);
 
 // opacity
 $opacity: (

package/src/settings/_input.scss

@@ -11,10 +11,10 @@ $input: (
 	line-height: var(--leading-normal),
 	min-height: var(--spacing-52),
 	min-width: 0,
+	spacing-top: var(--spacing-sm),
+	spacing-right: var(--spacing-sm),
 	spacing-bottom: var(--spacing-sm),
 	spacing-left: var(--spacing-sm),
-	spacing-right: var(--spacing-sm),
-	spacing-top: var(--spacing-sm),
 	text-overflow: ellipsis,
 	label: (
 		color: var(--color-word-2),

package/src/settings/_interactivity.scss

@@ -37,3 +37,17 @@ $cursor: (
 	zoom-in: zoom-in,
 	zoom-out: zoom-out,
 ) !default;
+
+// pointer events
+$pointer-events: (
+	none: none,
+	auto: auto,
+) !default;
+
+// user select
+$user-select: (
+	none: none,
+	text: text,
+	all: all,
+	auto: auto,
+) !default;

package/src/settings/_typography.scss

@@ -114,7 +114,15 @@ $font-variant-numeric: (
 ) !default;
 
 // list-style-type
-$list-style-type: (none, disc, decimal) !default;
+$list-style-type: (
+	none,
+	disc,
+	decimal,
+	lower-latin,
+	upper-latin,
+	lower-roman,
+	upper-roman
+) !default;
 
 // list-style-position
 $list-style-position: (inside, outside) !default;

package/src/settings/components/_vv-accordion-group.scss

@@ -1,7 +1,7 @@
 $vv-accordion-group: (
 	display: flex,
 	flex-direction: column,
-	gap: var(--spacing-sm),
+	[gap]: var(--spacing-sm),
 	element: (
 		not-last-child: (
 			_alias: '> details:not(:last-child)',
@@ -9,7 +9,7 @@ $vv-accordion-group: (
 	),
 	modifier: (
 		condensed: (
-			gap: 0,
+			gap: var(--spacing-0),
 			element: (
 				not-last-child: (
 					border-bottom-width: 0,

package/src/settings/components/_vv-accordion.scss

@@ -32,6 +32,7 @@ $vv-accordion: (
 	element: (
 		summary: (
 			_alias: '> summary',
+			_combinator: '>',
 			position: relative,
 			cursor: pointer,
 			user-select: none,
@@ -83,6 +84,7 @@ $vv-accordion: (
 		),
 		content: (
 			_alias: '> summary + *',
+			_combinator: '>',
 			padding-block: var(--spacing-sm),
 			[padding-inline]: var(--accordion-padding-left)
 				var(--accordion-padding-right),

package/src/settings/components/_vv-alert-group.scss

@@ -9,6 +9,7 @@ $vv-alert-group: (
 	element: (
 		list: (
 			_alias: '> [role="group"]',
+			_combinator: '>',
 			display: flex,
 			flex-direction: column,
 			gap: var(--spacing-xs),
@@ -130,8 +131,10 @@ $vv-alert-group: (
 					[scale]: calc(1 - 0.05 * (var(--alert-counter, 1) - 1)),
 					[z-index]:
 						calc(
-							var(--z-notification-alert) -
-								var(--alert-counter, 1)
+							var(--z-notification-alert) - var(
+									--alert-counter,
+									1
+								)
 						),
 					filter: grayscale(100%),
 				),

package/src/settings/components/_vv-alert.scss

@@ -64,7 +64,7 @@ $vv-alert: (
 			left: 50%,
 			background-color: var(--color-gray),
 			[animation]: pie-masks var(--alert-duration) steps(1, end) reverse,
-			z-index: 1,
+			z-index: var(--z-1),
 		),
 	),
 	modifier: (

package/src/settings/components/_vv-avatar-group.scss

@@ -5,6 +5,7 @@ $vv-avatar-group: (
 	element: (
 		item: (
 			_alias: '> *',
+			_combinator: '>',
 			box-shadow: var(--shadow-md),
 		),
 		item-not-first: (

package/src/settings/components/_vv-avatar.scss

@@ -14,6 +14,7 @@ $vv-avatar: (
 	background-size: contain,
 	background-repeat: no-repeat,
 	object-fit: contain,
+	flex-shrink: 0,
 	state: (
 		focus: (
 			outline: var(--spacing-px) solid var(--color-brand),
@@ -23,6 +24,7 @@ $vv-avatar: (
 	element: (
 		badge: (
 			_alias: '> sup',
+			_combinator: '>',
 			position: absolute,
 			top: 0,
 			right: 0,
@@ -31,6 +33,7 @@ $vv-avatar: (
 		),
 		badge-bottom: (
 			_alias: '> sub',
+			_combinator: '>',
 			position: absolute,
 			bottom: 0,
 			right: 0,
@@ -39,6 +42,7 @@ $vv-avatar: (
 		),
 		image: (
 			_alias: '> img',
+			_combinator: '>',
 			width: 100%,
 			height: 100%,
 			object-fit: inherit,
@@ -64,7 +68,7 @@ $vv-avatar: (
 			),
 		),
 		bordered: (
-			border-color: var(--color-brand-darken-3),
+			border-color: var(--color-brand-lighten-3),
 			border-width: var(--border),
 			border-style: solid,
 		),
@@ -82,25 +86,25 @@ $vv-avatar: (
 			background-color: var(--color-transparent),
 		),
 		surface: (
-			background-color: var(--color-surface-1),
-			border-color: var(--color-surface-3),
+			background-color: var(--color-surface-2),
+			border-color: var(--color-surface-5),
 			color: var(--color-word-2),
 		),
 		danger: (
 			background-color: var(--color-danger),
-			border-color: var(--color-danger-darken-3),
+			border-color: var(--color-danger-lighten-3),
 		),
 		success: (
 			background-color: var(--color-success),
-			border-color: var(--color-success-darken-3),
+			border-color: var(--color-success-lighten-3),
 		),
 		warning: (
 			background-color: var(--color-warning-darken-5),
-			border-color: var(--color-warning-darken-3),
+			border-color: var(--color-warning-darken-2),
 		),
 		info: (
 			background-color: var(--color-info-darken-5),
-			border-color: var(--color-info-darken-3),
+			border-color: var(--color-info-darken-2),
 		),
 		accent: (
 			background-color: var(--color-accent),
@@ -108,7 +112,7 @@ $vv-avatar: (
 		),
 		gray: (
 			background-color: var(--color-gray-darken-1),
-			border-color: var(--color-gray-darken-3),
+			border-color: var(--color-gray-lighten-2),
 		),
 		ring: (
 			color: var(--color-brand-darken-3),

package/src/settings/components/_vv-badge.scss

@@ -21,6 +21,7 @@ $vv-badge: (
 	line-height: var(--leading-none),
 	overflow: hidden,
 	flex-shrink: 0,
+	vertical-align: middle,
 	state: (
 		empty: (
 			font-size: inherit,
@@ -39,6 +40,7 @@ $vv-badge: (
 	element: (
 		button: (
 			_alias: '> button',
+			_combinator: '>',
 			cursor: pointer,
 			padding: 0 0.5em,
 			margin: 0 -0.5em,

package/src/settings/components/_vv-breadcrumb.scss

@@ -15,6 +15,7 @@ $vv-breadcrumb: (
 	element: (
 		list: (
 			_alias: '> ol',
+			_combinator: '>',
 			position: relative,
 			overflow: auto hidden,
 			overscroll-behavior-x: contain,

package/src/settings/components/_vv-button.scss

@@ -18,6 +18,7 @@ $vv-button: (
 	transition: var(--transition-all),
 	will-change: all,
 	min-width: 0,
+	pointer-events: auto,
 	state: (
 		focus-visible: (
 			outline-offset: var(--spacing-4),