@volverjs/style 0.1.2-beta.22 → 0.1.2-beta.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.22",
+  "version": "0.1.2-beta.23",
   "description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui and static webpages as well.",
   "main": "dist/style.css",
   "style": "dist/style.css",
@@ -20,7 +20,7 @@
     "./scss/functions": "./src/tools/_functions.scss",
     "./scss/mixins": "./src/tools/_mixins.scss",
     "./scss/settings": "./src/settings/_index.scss",
-    "./scss/preflight": "./src/settings/_preflight.scss",
+    "./scss/preflight": "./src/_preflight.scss",
     "./components": "./dist/components.css",
     "./scss/components": "./src/components/index.scss",
     "./components/vv-accordion": "./dist/components/vv-accordion.css",
@@ -131,6 +131,8 @@
     "./scss/utilities/sizing": "./src/utilities/sizing.scss",
     "./utilities/spacing": "./dist/utilities/spacing.css",
     "./scss/utilities/spacing": "./src/utilities/spacing.scss",
+    "./utilities/transitions": "./dist/utilities/transitions.css",
+    "./scss/utilities/transitions": "./src/utilities/transitions.scss",
     "./utilities/typography": "./dist/utilities/typography.css",
     "./scss/utilities/typography": "./src/utilities/typography.scss",
     "./scss": "./src/volver.scss"

package/src/_context.scss

@@ -2,10 +2,10 @@
 @use 'sass:map';
 
 // configuration
-@import 'config';
+@forward 'config';
 
 // tools (mixins, functions, recipes)
-@import 'tools';
+@forward 'tools';
 
 // settings
-@import 'settings';
+@forward 'settings';

package/src/_preflight.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'context' as *;
 
 :where(:host, :root, [class*='theme']) {
 	accent-color: var(--color-brand);

package/src/components/index.scss

@@ -1,24 +1,24 @@
-@import 'vv-accordion';
-@import 'vv-alert';
-@import 'vv-badge';
-@import 'vv-breadcrumb';
-@import 'vv-button';
-@import 'vv-button-group';
-@import 'vv-card';
-@import 'vv-dialog';
-@import 'vv-dropdown';
-@import 'vv-input-checkbox-group';
-@import 'vv-input-checkbox';
-@import 'vv-input-radio-group';
-@import 'vv-input-radio';
-@import 'vv-avatar';
-@import 'vv-input-text';
-@import 'vv-nav';
-@import 'vv-progress';
-@import 'vv-select';
-@import 'vv-tab';
-@import 'vv-table';
-@import 'vv-text';
-@import 'vv-textarea';
-@import 'vv-tooltip';
-@import 'vv-toast';
+@use 'vv-accordion';
+@use 'vv-alert';
+@use 'vv-badge';
+@use 'vv-breadcrumb';
+@use 'vv-button';
+@use 'vv-button-group';
+@use 'vv-card';
+@use 'vv-dialog';
+@use 'vv-dropdown';
+@use 'vv-input-checkbox-group';
+@use 'vv-input-checkbox';
+@use 'vv-input-radio-group';
+@use 'vv-input-radio';
+@use 'vv-avatar';
+@use 'vv-input-text';
+@use 'vv-nav';
+@use 'vv-progress';
+@use 'vv-select';
+@use 'vv-tab';
+@use 'vv-table';
+@use 'vv-text';
+@use 'vv-textarea';
+@use 'vv-tooltip';
+@use 'vv-toast';

package/src/components/vv-accordion.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-accordion);
 $component-map: $vv-accordion;
@@ -8,5 +8,6 @@ $component-map: $vv-accordion;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-alert.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-alert);
 $component-map: $vv-alert;
@@ -8,5 +8,6 @@ $component-map: $vv-alert;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-avatar.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-avatar);
 $component-map: $vv-avatar;
@@ -8,5 +8,6 @@ $component-map: $vv-avatar;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-badge.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-badge);
 $component-map: $vv-badge;
@@ -8,5 +8,6 @@ $component-map: $vv-badge;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-breadcrumb.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-breadcrumb);
 $component-map: $vv-breadcrumb;
@@ -8,5 +8,6 @@ $component-map: $vv-breadcrumb;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-button-group);
 $component-map: $vv-button-group;
@@ -11,7 +11,8 @@ $button-component-selector: '.' + $button-component-name;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );
 
 // if has block modifier

package/src/components/vv-button.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-button);
 $component-map: $vv-button;
@@ -10,7 +10,8 @@ $component-selector: '.#{ $component-name}';
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-compoenents,
-	$custom-block: true
+	$custom-block: true,
+	$bps: $breakpoints
 ) {
 	// custom block
 	%#{$component-name} {

package/src/components/vv-card.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-card);
 $component-map: $vv-card;
@@ -8,5 +8,6 @@ $component-map: $vv-card;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-dialog.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-dialog);
 $component-map: $vv-dialog;
@@ -8,5 +8,6 @@ $component-map: $vv-dialog;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-dropdown.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-dropdown);
 $component-map: $vv-dropdown;
@@ -8,5 +8,6 @@ $component-map: $vv-dropdown;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-input-checkbox-group.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-input-checkbox-group);
 $component-map: $vv-input-checkbox-group;
@@ -8,5 +8,6 @@ $component-map: $vv-input-checkbox-group;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-input-checkbox.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-input-checkbox);
 $component-map: $vv-input-checkbox;
@@ -9,7 +9,8 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );
 
 @include wrap-with-where(

package/src/components/vv-input-radio-group.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-input-radio-group);
 $component-map: $vv-input-radio-group;
@@ -8,5 +8,6 @@ $component-map: $vv-input-radio-group;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-input-radio.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-input-radio);
 $component-map: $vv-input-radio;
@@ -9,7 +9,8 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );
 
 @include wrap-with-where(

package/src/components/vv-input-text.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-input-text);
 $component-map: $vv-input-text;
@@ -9,7 +9,8 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );
 
 // disabled and readonly

package/src/components/vv-nav.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-nav);
 $component-map: $vv-nav;
@@ -8,5 +8,6 @@ $component-map: $vv-nav;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-progress.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-progress);
 $component-map: $vv-progress;
@@ -8,5 +8,6 @@ $component-map: $vv-progress;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-select.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-select);
 $component-map: $vv-select;
@@ -9,7 +9,8 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );
 
 // disabled

package/src/components/vv-tab.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-tab);
 $component-map: $vv-tab;
@@ -8,5 +8,6 @@ $component-map: $vv-tab;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-table.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-table);
 $component-map: $vv-table;
@@ -8,5 +8,6 @@ $component-map: $vv-table;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-text.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-text);
 $component-map: $vv-text;
@@ -8,5 +8,6 @@ $component-map: $vv-text;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-textarea.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-textarea);
 $component-map: $vv-textarea;
@@ -9,7 +9,8 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );
 
 // disabled and readonly

package/src/components/vv-toast.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-toast);
 $component-map: $vv-toast;
@@ -8,5 +8,6 @@ $component-map: $vv-toast;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );

package/src/components/vv-tooltip.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-tooltip);
 $component-map: $vv-tooltip;
@@ -9,7 +9,8 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$bps: $breakpoints
 );
 
 @include wrap-with-where(

package/src/export.scss

@@ -3,7 +3,7 @@
 @use 'sass:string';
 
 // context
-@import 'context';
+@use 'context' as *;
 
 :export {
 	// ============================================================== */
@@ -402,9 +402,46 @@
 
 	// ============================================================== */
 	// #region EFFECTS
-	// blend-mode
-	@each $index in $blend-mode {
-		#{'blend-mode__' + $index}: $index;
+	// box-shadow
+	@each $key, $value in $box-shadow {
+		#{'box-shadow__' + $key}: $value;
+	}
+
+	// opacity
+	@each $key, $value in $opacity {
+		#{'opacity__' + $key}: $value;
+	}
+
+	// mix-blend-mode
+	@each $index in $mix-blend-mode {
+		#{'mix-blend-mode__' + $index}: $index;
+	}
+
+	// background-blend-mode
+	@each $index in $background-blend-mode {
+		#{'background-blend-mode__' + $index}: $index;
+	}
+
+	// #endregion
+
+	// ============================================================== */
+	// #region TRANSITIONS & ANIMATIONS
+	// transition property
+	@each $key, $value in $transition-property {
+		#{'transition-property__' + $key}: $value;
+	}
+
+	// transition duration
+	@each $key, $value in $transition-duration-delay {
+		#{'transition-duration-delay__' + $key}: $value;
+	}
+
+	@each $key, $value in $transition-timing-function {
+		#{'transition-timing-function__' + $key}: $value;
+	}
+
+	@each $key, $value in $animation {
+		#{'animation__' + $key}: $value;
 	}
 
 	// #endregion

package/src/props/animation.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@media (prefers-reduced-motion: no-preference) {

package/src/props/background.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($background-image, $prefix: bg);

package/src/props/borders.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($border-radius, $prefix: rounded);

package/src/props/colors.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($colors, $prefix: color);

package/src/props/effects.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($box-shadow, $prefix: shadow);

package/src/props/filters.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($blur, $prefix: blur);

package/src/props/index.scss

@@ -1,12 +1,12 @@
-@import 'animation';
-@import 'background';
-@import 'borders';
-@import 'colors';
-@import 'effects';
-@import 'filters';
-@import 'layout';
-@import 'media';
-@import 'spacing';
-@import 'typography';
-@import 'sizing';
-@import 'input';
+@use 'animation';
+@use 'background';
+@use 'borders';
+@use 'colors';
+@use 'effects';
+@use 'filters';
+@use 'layout';
+@use 'media';
+@use 'spacing';
+@use 'typography';
+@use 'sizing';
+@use 'input';

package/src/props/input.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($map: $input, $prefix: input);

package/src/props/layout.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($map: $aspect-ratio, $prefix: aspect);

package/src/props/media.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 // motion
 @custom-media --motion-ok (prefers-reduced-motion: no-preference);

package/src/props/sizing.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($width, $prefix: w);