@unifiedsoftware/styles 2.0.1-beta.1 → 2.0.1-beta.11

package/scss/_utilities.scss

@@ -593,7 +593,6 @@ $rounded-sizes: (
 	overflow: hidden;
 	color: var(--#{$prefix}surface-color);
 	opacity: var(--#{$prefix}surface-opacity);
-	z-index: -1;
 	pointer-events: none;
 	background-color: currentColor;
 	transition: var(--#{$prefix}surface-transition, background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1));
@@ -630,19 +629,16 @@ $rounded-sizes: (
 
 /* ----------------- DraggableResizable ----------------- */
 .win-draggable {
-	position: absolute;
-	border-radius: 0.375rem; /* rounded-md */
 	background-color: white;
-	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
+	// box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
 	user-select: none;
 }
 
 .win-header {
 	width: 100%;
 	height: 2rem; /* h-8 */
-	background-color: #f3f4f6; /* bg-gray-100 */
-	border-top-left-radius: 0.375rem;
-	border-top-right-radius: 0.375rem;
+	background-color: #fff; /* bg-gray-100 */
+	border-bottom: 1px solid #cbd5e1;
 	display: flex;
 	align-items: center;
 	padding: 0 0.5rem; /* px-2 */
@@ -653,9 +649,13 @@ $rounded-sizes: (
 	cursor: move; /* solo si draggable */
 }
 
+.win-header-icon {
+	margin-right: 4px;
+}
+
 .win-header-title {
-	font-size: 0.875rem; /* text-sm */
-	font-weight: 500; /* font-medium */
+	font-size: 12px; /* text-sm */
+	font-weight: 400; /* font-medium */
 }
 
 .win-header-buttons {
@@ -673,49 +673,86 @@ $rounded-sizes: (
 	justify-content: center;
 	align-items: center;
 	border-radius: 0.25rem; /* rounded */
+	background-color: transparent;
+	outline: none;
+	border: none;
 }
 
 .win-btn:hover {
 	background-color: #e5e7eb; /* hover:bg-gray-200 */
 }
 
-.win-btn-close:hover {
+.win-btn--danger:hover {
 	background-color: #ef4444; /* hover:bg-red-500 */
 	color: white;
 }
 
 /* ----------------- Taskbar ----------------- */
 .win-taskbar {
-	height: 3rem; /* h-12 */
-	background-color: #1e293b; /* bg-slate-800 */
-	color: white;
+	height: 36px;
+	background-color: #fff;
 	display: flex;
 	align-items: center;
-	padding: 0 1rem; /* px-4 */
-	gap: 0.75rem; /* gap-3 */
+	padding: 0 0.25rem;
+	gap: 0.25rem;
+}
+
+.win-taskbar--top {
+	border-top: 1px solid #cbd5e1;
+}
+
+.win-taskbar--bottom {
+	border-bottom: 1px solid #cbd5e1;
+}
+
+.win-taskbar--highlighted {
+	background-color: #86efac;
 }
 
 .win-taskbar-button {
+	position: relative;
+	height: 28px;
 	display: flex;
 	align-items: center;
-	gap: 0.5rem;
-	padding: 0.25rem 0.75rem;
+	gap: 0.25rem;
+	font-size: 0.75rem;
+	padding: 0 0.5rem;
 	border-radius: 0.25rem;
 	cursor: pointer;
 }
 
-.win-taskbar-button.win-active {
-	background-color: #2563eb; /* bg-blue-600 */
+.win-taskbar-button > .us-outline {
+	--us-outline-border-width: 1px;
+	--us-outline-opacity: 0;
+}
+
+.win-taskbar-button > .us-overlay {
+	--us-overlay-opacity: 0.075;
+	--us-_hover-overlay-opacity: 0.125;
 }
 
-.win-taskbar-button.win-inactive {
-	background-color: #334155; /* bg-slate-700 */
+.win-taskbar-button--active {
+	color: var(--us-black-color);
 }
 
-.win-taskbar-button:hover .win-btn-close {
-	background-color: #dc2626; /* hover:bg-red-600 */
+.win-taskbar-button--active > .us-overlay {
+	--us-overlay-color: var(--us-primary-color);
+	--us-overlay-opacity: 0.125;
+	--us-_hover-overlay-opacity: 0.25;
 }
 
+.win-taskbar-button__content {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+}
+
+.win-taskbar-button .win-btn {
+	width: 1.25rem;
+	height: 1.25rem;
+	border-radius: 9999px;
+}
 /* ----------------- Resize handles ----------------- */
 /* Base handle */
 .win-handle {
@@ -792,3 +829,27 @@ $rounded-sizes: (
 	pointer-events: none;
 	z-index: 999998; /* debajo de la ventana */
 }
+
+.win-panel {
+	background-color: #fff;
+	display: flex;
+	flex-direction: column;
+}
+
+.us-lm-panel--floating {
+	border: 1px solid #e0e0e0;
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+	border-radius: 8px;
+}
+
+.us-lm-panel--floating .win-header {
+	border-radius: 8px 8px 0 0;
+}
+
+.us-lm-panel .us-lm-handle {
+	display: none;
+}
+
+.us-lm-panel:hover .us-lm-handle {
+	display: block;
+}

package/scss/components/_accordion.scss

@@ -35,7 +35,6 @@
 		padding-block: var(--#{$prefix}accordion-header-padding-y);
 		padding-inline: var(--#{$prefix}accordion-header-padding-x);
 		color: var(--#{$prefix}accordion-header-color);
-		z-index: 0;
 		display: flex;
 		align-items: center;
 		gap: var(--#{$prefix}accordion-header-gap);
@@ -48,6 +47,7 @@
 
 		&__start-content,
 		&__end-content {
+			position: relative;
 			flex-shrink: 0;
 			display: flex;
 			align-items: center;
@@ -55,6 +55,7 @@
 		}
 
 		&__content {
+			position: relative;
 			flex-grow: 1;
 			display: flex;
 			flex-direction: column;

package/scss/components/_input.scss

@@ -87,11 +87,11 @@
 	}
 
 	&__content {
+		position: relative;
 		flex: 1;
 		height: 100%;
 		display: flex;
 		align-items: center;
-		z-index: 1;
 		overflow: hidden;
 
 		&--chips {

package/scss/components/_list.scss

@@ -41,8 +41,8 @@
 
 		&__start-content,
 		&__end-content {
+			position: relative;
 			flex-shrink: 0;
-			z-index: 1;
 			display: flex;
 			justify-content: center;
 			align-items: center;
@@ -50,8 +50,8 @@
 		}
 
 		&__content {
+			position: relative;
 			flex-grow: 1;
-			z-index: 1;
 			display: grid;
 			overflow: hidden;
 		}

package/scss/components/_steps.scss

@@ -85,7 +85,10 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		z-index: 1;
+	}
+
+	&__icon {
+		position: relative;
 	}
 
 	&--current &__avatar-wrapper {

package/scss/components/_toolbar.scss

@@ -1,23 +1,23 @@
 @use '../variables' as *;
 
 .#{$prefix}toolbar {
+	flex-shrink: 0;
 	position: relative;
 	width: 100%;
-	min-height: var(--#{$prefix}toolbar-min-height);
+	height: var(--#{$prefix}toolbar-height);
 	padding-block: var(--#{$prefix}toolbar-padding-y);
 	padding-inline: var(--#{$prefix}toolbar-padding-x);
-	border-bottom: var(--#{$prefix}toolbar-border);
-	background: var(--#{$prefix}toolbar-background);
+	color: var(--#{$prefix}toolbar-color);
 	display: flex;
 	align-items: center;
 
 	&__container {
+		position: relative;
 		width: 100%;
 		margin: 0 auto;
 		display: flex;
 		align-items: center;
 		gap: var(--#{$prefix}toolbar-gap);
-		z-index: 1;
 	}
 
 	&__start-action,

package/scss/themes/fci/components/_checkbox.scss

@@ -26,7 +26,7 @@
 	.#{$prefix}checkbox {
 		--#{$prefix}checkbox-control-border-width: 1px;
 		--#{$prefix}checkbox-control-border-style: solid;
-		--#{$prefix}checkbox-control-border-color: rgba(0, 0, 0, 0.2);
+		--#{$prefix}checkbox-control-border-color: rgba(0, 0, 0, 0.4);
 		--#{$prefix}checkbox-control-color: var(--#{$prefix}white-color);
 
 		--#{$prefix}_checked-checkbox-control-border-color: var(--#{$prefix}primary-color);

package/scss/themes/fci/components/_input.scss

@@ -173,8 +173,8 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 
 		& > .#{$prefix}outline {
 			--#{$prefix}outline-border-color: currentColor;
-			--#{$prefix}outline-opacity: 0.23;
-			--#{$prefix}outline-hover-opacity: 0.5;
+			--#{$prefix}outline-opacity: 0.4;
+			--#{$prefix}outline-hover-opacity: 0.6;
 			--#{$prefix}outline-focus-opacity: 1;
 		}
 	}

package/scss/themes/fci/components/_toolbar.scss

@@ -1,17 +1,25 @@
 @use '../../../variables' as *;
 
+$colors-map: (primary, secondary, success, info, warning, danger);
+
 .#{$prefix}theme-fci {
 	.#{$prefix}toolbar {
 		--#{$prefix}toolbar-background: var(--#{$prefix}white-color);
 
 		--#{$prefix}toolbar-title-font-weight: 500;
 
-		/* Outline */
-		--#{$prefix}outline-border-width: 1px;
-		--#{$prefix}outline-border-color: #ddd;
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-color: white;
+			--#{$prefix}surface-opacity: 1;
+		}
+
+		&--bordered > .#{$prefix}outline-b {
+			--#{$prefix}outline-border-width: 1px;
+			--#{$prefix}outline-border-color: #ddd;
+		}
 
 		&--sm {
-			--#{$prefix}toolbar-min-height: 48px;
+			--#{$prefix}toolbar-height: 48px;
 			--#{$prefix}toolbar-padding-y: 0.25rem;
 			--#{$prefix}toolbar-padding-x: 1rem;
 
@@ -22,7 +30,7 @@
 		}
 
 		&--md {
-			--#{$prefix}toolbar-min-height: 56px;
+			--#{$prefix}toolbar-height: 56px;
 			--#{$prefix}toolbar-padding-y: 0.5rem;
 			--#{$prefix}toolbar-padding-x: 1rem;
 			--#{$prefix}toolbar-gap: 1rem;
@@ -39,7 +47,7 @@
 		}
 
 		&--lg {
-			--#{$prefix}toolbar-min-height: 64px;
+			--#{$prefix}toolbar-height: 64px;
 			--#{$prefix}toolbar-padding-y: 0.75rem;
 			--#{$prefix}toolbar-padding-x: 1rem;
 
@@ -49,4 +57,15 @@
 			--#{$prefix}toolbar-subtitle-line-height: 18px;
 		}
 	}
+
+	.#{$prefix}toolbar--filled {
+		--#{$prefix}toolbar-color: var(--#{$prefix}white-color);
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}toolbar--filled.#{$prefix}toolbar--#{$color} > .#{$prefix}surface {
+			--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
+			--#{$prefix}surface-opacity: 1;
+		}
+	}
 }