@volverjs/style 0.1.2-beta.10 → 0.1.2-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.10",
+  "version": "0.1.2-beta.11",
   "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",
@@ -25,6 +25,8 @@
     "./scss/components": "./src/components/index.scss",
     "./components/vv-accordion": "./dist/components/vv-accordion.css",
     "./scss/components/vv-accordion": "./src/components/vv-accordion.scss",
+    "./components/vv-alert": "./dist/components/vv-alert.css",
+    "./scss/components/vv-alert": "./src/components/vv-alert.scss",
     "./components/vv-badge": "./dist/components/vv-badge.css",
     "./scss/components/vv-badge": "./src/components/vv-badge.scss",
     "./components/vv-breadcrumb": "./dist/components/vv-breadcrumb.css",

package/src/_config.scss

@@ -12,23 +12,24 @@ $components-prefix: vv !default;
 
 // components names
 $components-names: (
+	vv-accordion: $components-prefix + -accordion,
+	vv-alert: $components-prefix + -alert,
 	vv-badge: $components-prefix + -badge,
 	vv-breadcrumb: $components-prefix + -breadcrumb,
-	vv-button: $components-prefix + -button,
 	vv-button-group: $components-prefix + -button-group,
-	vv-progress: $components-prefix + -progress,
-	vv-accordion: $components-prefix + -accordion,
+	vv-button: $components-prefix + -button,
+	vv-card: $components-prefix + -card,
 	vv-dialog: $components-prefix + -dialog,
 	vv-dropdown: $components-prefix + -dropdown,
-	vv-input-checkbox: $components-prefix + -input-checkbox,
 	vv-input-checkbox-group: $components-prefix + -input-checkbox-group,
-	vv-input-radio: $components-prefix + -input-radio,
+	vv-input-checkbox: $components-prefix + -input-checkbox,
 	vv-input-radio-group: $components-prefix + -input-radio-group,
+	vv-input-radio: $components-prefix + -input-radio,
 	vv-input-text: $components-prefix + -input-text,
 	vv-nav: $components-prefix + -nav,
-	vv-textarea: $components-prefix + -textarea,
+	vv-progress: $components-prefix + -progress,
 	vv-select: $components-prefix + -select,
 	vv-table: $components-prefix + -table,
-	vv-card: $components-prefix + -card,
 	vv-text: $components-prefix + -text,
+	vv-textarea: $components-prefix + -textarea,
 ) !default;

package/src/components/index.scss

@@ -1,19 +1,20 @@
+@import 'vv-accordion';
+@import 'vv-alert';
 @import 'vv-badge';
 @import 'vv-breadcrumb';
-@import 'vv-button';
 @import 'vv-button-group';
-@import 'vv-progress';
-@import 'vv-accordion';
+@import 'vv-button';
+@import 'vv-card';
 @import 'vv-dialog';
 @import 'vv-dropdown';
-@import 'vv-input-checkbox';
 @import 'vv-input-checkbox-group';
-@import 'vv-input-radio';
+@import 'vv-input-checkbox';
 @import 'vv-input-radio-group';
+@import 'vv-input-radio';
 @import 'vv-input-text';
 @import 'vv-nav';
-@import 'vv-textarea';
+@import 'vv-progress';
 @import 'vv-select';
 @import 'vv-table';
-@import 'vv-card';
 @import 'vv-text';
+@import 'vv-textarea';

package/src/components/vv-alert.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-alert);
+$component-map: $vv-alert;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-compoenents
+);

package/src/settings/_index.scss

@@ -15,22 +15,23 @@
 @import 'input';
 
 // components
+@import 'components/vv-accordion';
+@import 'components/vv-alert';
 @import 'components/vv-badge';
 @import 'components/vv-breadcrumb';
-@import 'components/vv-button';
 @import 'components/vv-button-group';
-@import 'components/vv-progress';
-@import 'components/vv-accordion';
+@import 'components/vv-button';
+@import 'components/vv-card';
 @import 'components/vv-dialog';
 @import 'components/vv-dropdown';
-@import 'components/vv-input-checkbox';
 @import 'components/vv-input-checkbox-group';
-@import 'components/vv-input-radio';
+@import 'components/vv-input-checkbox';
 @import 'components/vv-input-radio-group';
+@import 'components/vv-input-radio';
 @import 'components/vv-input-text';
 @import 'components/vv-nav';
-@import 'components/vv-textarea';
+@import 'components/vv-progress';
 @import 'components/vv-select';
 @import 'components/vv-table';
-@import 'components/vv-card';
 @import 'components/vv-text';
+@import 'components/vv-textarea';

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

@@ -0,0 +1,148 @@
+$vv-alert: (
+	--alert-padding-top: var(--spacing-md),
+	--alert-padding-right: var(--spacing-md),
+	--alert-padding-bottom: var(--spacing-md),
+	--alert-padding-left: var(--spacing-md),
+	[padding-top]: var(--alert-padding-top),
+	[padding-right]: var(--alert-padding-right),
+	[padding-bottom]: var(--alert-padding-bottom),
+	[padding-left]: var(--alert-padding-left),
+	background-color: var(--color-surface-2),
+	border-color: var(--color-surface-4),
+	border-width: var(--border),
+	border-style: solid,
+	border-radius: var(--rounded),
+	position: relative,
+	modifier: (
+		success: (
+			border-color: var(--color-success-lighten-5),
+			background-color:
+				hsl(
+					var(--color-success-hue) var(--color-success-saturation) 90%
+				),
+			element: (
+				icon: (
+					color: var(--color-success),
+				),
+				title: (
+					color: var(--color-success),
+				),
+			),
+		),
+		danger: (
+			border-color: var(--color-danger-lighten-5),
+			background-color:
+				hsl(var(--color-danger-hue) var(--color-danger-saturation) 90%),
+			element: (
+				icon: (
+					color: var(--color-danger-darken-1),
+				),
+				title: (
+					color: var(--color-danger-darken-1),
+				),
+			),
+		),
+		warning: (
+			border-color: var(--color-warning-lighten-5),
+			background-color:
+				hsl(
+					var(--color-warning-hue) var(--color-warning-saturation) 90%
+				),
+			element: (
+				icon: (
+					color: var(--color-warning-darken-1),
+				),
+				title: (
+					color: var(--color-warning-darken-1),
+				),
+			),
+		),
+		info: (
+			border-color: var(--color-info-lighten-5),
+			background-color:
+				hsl(var(--color-info-hue) var(--color-info-saturation) 90%),
+			element: (
+				icon: (
+					color: var(--color-info-darken-1),
+				),
+				title: (
+					color: var(--color-info-darken-1),
+				),
+			),
+		),
+		accent: (
+			border-color: var(--color-accent-lighten-5),
+			background-color:
+				hsl(var(--color-accent-hue) var(--color-accent-saturation) 90%),
+			element: (
+				icon: (
+					color: var(--color-accent-darken-1),
+				),
+				title: (
+					color: var(--color-accent-darken-1),
+				),
+			),
+		),
+		brand: (
+			--alert-color: var(--color-brand-darken-1),
+			border-color: var(--color-brand-lighten-5),
+			background-color:
+				hsl(var(--color-brand-hue) var(--color-brand-saturation) 90%),
+			element: (
+				icon: (
+					color: var(--color-brand-darken-1),
+				),
+				title: (
+					color: var(--color-brand-darken-1),
+				),
+			),
+		),
+		callout: (
+			border-radius: var(--rounded-none),
+			border-width: 0 0 0 var(--spacing-4),
+		),
+		icon: (
+			[padding-left]: calc(var(--alert-padding-left) * 2 + 1.2em),
+			element: (
+				icon: (
+					position: absolute,
+					[left]: var(--alert-padding-left),
+				),
+			),
+		),
+		action: (
+			[padding-right]: calc(var(--alert-padding-right) * 2 + 1.2em),
+			element: (
+				action: (
+					position: absolute,
+					[right]: var(--alert-padding-right),
+				),
+			),
+		),
+	),
+	element: (
+		icon: (
+			_alias: '> :where(svg, [data-icon])',
+			inline-size: 1.2em,
+			block-size: 1.2em,
+		),
+		action: (
+			font-size: 1.2em,
+			inline-size: 1em,
+			block-size: 1em,
+			cursor: pointer,
+		),
+		title: (
+			display: block,
+			margin-bottom: var(--spacing-sm),
+			font-weight: var(--font-bold),
+			text-transform: uppercase,
+		),
+		separator: (
+			_alias: '> hr',
+			height: var(--border),
+			background-color: var(--color-alpha-2),
+			margin-block: var(--spacing-sm),
+		),
+	),
+) !default;

package/src/themes/dark/components/_vv-alert.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-alert);
+$component-map: $dark-vv-alert;
+
+@mixin theme-dark-vv-alert {
+	@include spread-map-into-props(
+		$map: $component-map,
+		$prefix: $component-name
+	);
+}
+
+:where(:host, :root, .theme):not(.theme--light) {
+	@media (prefers-color-scheme: dark) {
+		@include theme-dark-vv-alert;
+	}
+}
+
+:where(.theme.theme--dark) {
+	@include theme-dark-vv-alert;
+}

package/src/themes/dark/components/_vv-button.scss

@@ -3,13 +3,11 @@
 
 $component-name: map.get($components-names, vv-button);
 $component-map: $dark-vv-button;
-$props: true;
 
 @mixin theme-dark-vv-button {
 	@include spread-map-into-props(
 		$map: $component-map,
-		$prefix: $component-name,
-		$deep: $props
+		$prefix: $component-name
 	);
 }
 

package/src/themes/dark/components/_vv-input-checkbox.scss

@@ -3,13 +3,11 @@
 
 $component-name: map.get($components-names, vv-input-checkbox);
 $component-map: $dark-vv-input-checkbox;
-$props: true;
 
 @mixin theme-dark-vv-input-checkbox {
 	@include spread-map-into-props(
 		$map: $component-map,
-		$prefix: $component-name,
-		$deep: $props
+		$prefix: $component-name
 	);
 }
 

package/src/themes/dark/components/index.scss

@@ -1,2 +1,3 @@
+@import 'vv-alert';
 @import 'vv-button';
 @import 'vv-input-checkbox';

package/src/themes/dark/settings/_index.scss

@@ -1,5 +1,6 @@
 @import 'colors';
 @import 'background';
 
+@import 'components/vv-alert';
 @import 'components/vv-button';
 @import 'components/vv-input-checkbox';

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

@@ -0,0 +1,80 @@
+$dark-vv-alert: (
+	modifier: (
+		success: (
+			background-color:
+				hsl(
+					var(--color-success-hue) var(--color-success-saturation) 10%
+				),
+			element: (
+				icon: (
+					color: var(--color-success),
+				),
+				title: (
+					color: var(--color-success),
+				),
+			),
+		),
+		danger: (
+			background-color:
+				hsl(var(--color-danger-hue) var(--color-danger-saturation) 10%),
+			element: (
+				icon: (
+					color: var(--color-danger),
+				),
+				title: (
+					color: var(--color-danger),
+				),
+			),
+		),
+		warning: (
+			background-color:
+				hsl(
+					var(--color-warning-hue) var(--color-warning-saturation) 10%
+				),
+			element: (
+				icon: (
+					color: var(--color-warning),
+				),
+				title: (
+					color: var(--color-warning),
+				),
+			),
+		),
+		info: (
+			background-color:
+				hsl(var(--color-info-hue) var(--color-info-saturation) 10%),
+			element: (
+				icon: (
+					color: var(--color-info),
+				),
+				title: (
+					color: var(--color-info),
+				),
+			),
+		),
+		accent: (
+			background-color:
+				hsl(var(--color-accent-hue) var(--color-accent-saturation) 10%),
+			element: (
+				icon: (
+					color: var(--color-accent),
+				),
+				title: (
+					color: var(--color-accent),
+				),
+			),
+		),
+		brand: (
+			background-color:
+				hsl(var(--color-brand-hue) var(--color-brand-saturation) 10%),
+			element: (
+				icon: (
+					color: var(--color-brand),
+				),
+				title: (
+					color: var(--color-brand),
+				),
+			),
+		),
+	),
+) !default;

package/src/tools/_mixins.scss

@@ -832,6 +832,7 @@
 	$breakpoints-key: 'breakpoint',
 	$props: true,
 	$zero-specificity: true,
+	$custom-props: false,
 	$custom-block: false,
 	$custom-elements: false,
 	$custom-modifiers: false,
@@ -842,13 +843,15 @@
 		$selector: '.' + $block;
 
 		// custom props
-		@if $props {
-			:where(:host, :root, .theme) {
-				@include spread-map-into-props(
-					$map: $map,
-					$prefix: $block,
-					$deep: true
-				);
+		@if not $custom-props {
+			@if $props {
+				:where(:host, :root, .theme) {
+					@include spread-map-into-props(
+						$map: $map,
+						$prefix: $block,
+						$deep: true
+					);
+				}
 			}
 		}