@unifiedsoftware/styles 2.0.0-beta.9 → 2.0.1-beta.2

package/scss/_utilities.scss

@@ -319,7 +319,6 @@ $rounded-sizes: (
 	overflow: hidden;
 	color: var(--#{$prefix}overlay-color);
 	opacity: var(--#{$prefix}overlay-opacity);
-	z-index: -1;
 	pointer-events: none;
 	background-color: currentColor;
 	transition: var(--#{$prefix}overlay-transition, background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1));
@@ -419,6 +418,174 @@ $rounded-sizes: (
 	);
 }
 
+.#{$prefix}glow {
+	--shadow-color: rgb(var(--#{$prefix}glow-color) / var(--#{$prefix}glow-alpha));
+
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	overflow: hidden;
+	pointer-events: none;
+	z-index: var(--#{$prefix}glow-z-index);
+	opacity: var(--#{$prefix}glow-opacity);
+	transition: var(--#{$prefix}glow-transition, box-shadow, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1));
+
+	/* base color compuesto con alpha */
+	color: var(--#{$prefix}glow-color);
+	color: rgb(var(--#{$prefix}glow-color) / var(--#{$prefix}glow-alpha));
+
+	box-shadow: 0 0 var(--#{$prefix}glow-blur) var(--#{$prefix}glow-spread) var(--shadow-color);
+}
+
+/* Hover */
+:not([hidden]):hover > .#{$prefix}glow {
+	--border-color: rgb(
+		var(--#{$prefix}_hover-glow-color, var(--#{$prefix}glow-color)) /
+			var(--#{$prefix}_hover-glow-alpha, var(--#{$prefix}glow-alpha))
+	);
+
+	--shadow-color: rgb(
+		var(--#{$prefix}_hover-glow-color, var(--#{$prefix}glow-color)) /
+			var(--#{$prefix}_hover-glow-shadow-alpha, var(--#{$prefix}glow-shadow-alpha))
+	);
+
+	opacity: var(--#{$prefix}_hover-glow-opacity, var(--#{$prefix}glow-opacity));
+
+	box-shadow:
+		/* borde sólido de 1px */
+		0 0 0 1px var(--border-color),
+		/* glow difuso */ 0 0 var(--#{$prefix}_hover-glow-blur, var(--#{$prefix}glow-blur))
+			var(--#{$prefix}_hover-glow-spread, var(--#{$prefix}glow-spread)) var(--shadow-color);
+}
+
+/* Active */
+:not([hidden]):active > .#{$prefix}glow {
+	--border-color: rgb(
+		var(--#{$prefix}_active-glow-color, var(--#{$prefix}_hover-glow-color, var(--#{$prefix}glow-color))) /
+			var(--#{$prefix}_active-glow-alpha, var(--#{$prefix}_hover-glow-alpha, var(--#{$prefix}glow-alpha)))
+	);
+
+	--shadow-color: rgb(
+		var(--#{$prefix}_active-glow-color, var(--#{$prefix}_hover-glow-color, var(--#{$prefix}glow-color))) /
+			var(
+				--#{$prefix}_active-glow-shadow-alpha,
+				var(--#{$prefix}_hover-glow-shadow-alpha, var(--#{$prefix}glow-shadow-alpha))
+			)
+	);
+
+	opacity: var(--#{$prefix}_active-glow-opacity, var(--#{$prefix}_hover-glow-opacity, var(--#{$prefix}glow-opacity)));
+
+	box-shadow:
+		0 0 0 1px var(--border-color),
+		0 0 var(--#{$prefix}_active-glow-blur, var(--#{$prefix}_hover-glow-blur, var(--#{$prefix}glow-blur)))
+			var(--#{$prefix}_active-glow-spread, var(--#{$prefix}_hover-glow-spread, var(--#{$prefix}glow-spread)))
+			var(--shadow-color);
+}
+
+/* Focus */
+[class*='--focus'] > .#{$prefix}glow,
+:not([hidden]):focus > .#{$prefix}glow {
+	--border-color: rgb(
+		var(--#{$prefix}_focus-glow-color, var(--#{$prefix}glow-color)) /
+			var(--#{$prefix}_focus-glow-alpha, var(--#{$prefix}glow-alpha))
+	);
+
+	--shadow-color: rgb(
+		var(--#{$prefix}_focus-glow-color, var(--#{$prefix}glow-color)) /
+			var(--#{$prefix}_focus-glow-shadow-alpha, var(--#{$prefix}glow-shadow-alpha))
+	);
+
+	opacity: var(--#{$prefix}_focus-glow-opacity, var(--#{$prefix}glow-opacity));
+
+	box-shadow:
+		0 0 0 1px var(--border-color),
+		0 0 var(--#{$prefix}_focus-glow-blur, var(--#{$prefix}glow-blur))
+			var(--#{$prefix}_focus-glow-spread, var(--#{$prefix}glow-spread)) var(--shadow-color);
+}
+
+.#{$prefix}ring {
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	overflow: hidden;
+	color: var(--#{$prefix}ring-color);
+	opacity: var(--#{$prefix}ring-opacity, 0);
+	pointer-events: none;
+	transition: var(--#{$prefix}ring-transition, outline-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1));
+
+	outline-width: var(--#{$prefix}ring-width, 2px);
+	outline-style: solid;
+	outline-color: currentColor;
+	outline-offset: var(--#{$prefix}ring-offset, 4px);
+}
+
+/* Hover */
+:not([hidden]):hover > .#{$prefix}ring {
+	color: var(--#{$prefix}_hover-ring-color, var(--#{$prefix}ring-color));
+	opacity: var(--#{$prefix}_hover-ring-opacity, var(--#{$prefix}ring-opacity));
+	outline-width: var(--#{$prefix}_hover-ring-width, var(--#{$prefix}ring-width, 2px));
+	outline-offset: var(--#{$prefix}_hover-ring-offset, var(--#{$prefix}ring-offset, 4px));
+}
+
+/* Active */
+:not([hidden]):active > .#{$prefix}ring {
+	color: var(--#{$prefix}_active-ring-color, var(--#{$prefix}_hover-ring-color, var(--#{$prefix}ring-color)));
+	opacity: var(--#{$prefix}_active-ring-opacity, var(--#{$prefix}_hover-ring-opacity, var(--#{$prefix}ring-opacity)));
+	outline-width: var(
+		--#{$prefix}_active-ring-width,
+		var(--#{$prefix}_hover-ring-width, var(--#{$prefix}ring-width, 2px))
+	);
+	outline-offset: var(
+		--#{$prefix}_active-ring-offset,
+		var(--#{$prefix}_hover-ring-offset, var(--#{$prefix}ring-offset, 4px))
+	);
+}
+
+/* Focus */
+[class*='--focus'] > .#{$prefix}ring,
+:not([hidden]):focus > .#{$prefix}ring {
+	color: var(--#{$prefix}_focus-ring-color, var(--#{$prefix}ring-color));
+	opacity: var(--#{$prefix}_focus-ring-opacity, var(--#{$prefix}ring-opacity));
+	outline-width: var(--#{$prefix}_focus-ring-width, var(--#{$prefix}ring-width, 2px));
+	outline-offset: var(--#{$prefix}_focus-ring-offset, var(--#{$prefix}ring-offset, 4px));
+}
+
+/* Focus + Hover */
+[class*='--focus']:hover > .#{$prefix}ring,
+:not([hidden]):focus:hover > .#{$prefix}ring {
+	color: var(--#{$prefix}_focus-hover-ring-color, var(--#{$prefix}_focus-ring-color, var(--#{$prefix}ring-color)));
+	opacity: var(
+		--#{$prefix}_focus-hover-ring-opacity,
+		var(--#{$prefix}_focus-ring-opacity, var(--#{$prefix}ring-opacity))
+	);
+	outline-width: var(
+		--#{$prefix}_focus-hover-ring-width,
+		var(--#{$prefix}_focus-ring-width, var(--#{$prefix}ring-width, 2px))
+	);
+	outline-offset: var(
+		--#{$prefix}_focus-hover-ring-offset,
+		var(--#{$prefix}_focus-ring-offset, var(--#{$prefix}ring-offset, 4px))
+	);
+}
+
+/* Focus + Active */
+[class*='--focus']:active > .#{$prefix}ring,
+:not([hidden]):focus:active > .#{$prefix}ring {
+	color: var(--#{$prefix}_focus-active-ring-color, var(--#{$prefix}_focus-ring-color, var(--#{$prefix}ring-color)));
+	opacity: var(
+		--#{$prefix}_focus-active-ring-opacity,
+		var(--#{$prefix}_focus-ring-opacity, var(--#{$prefix}ring-opacity))
+	);
+	outline-width: var(
+		--#{$prefix}_focus-active-ring-width,
+		var(--#{$prefix}_focus-ring-width, var(--#{$prefix}ring-width, 2px))
+	);
+	outline-offset: var(
+		--#{$prefix}_focus-active-ring-offset,
+		var(--#{$prefix}_focus-ring-offset, var(--#{$prefix}ring-offset, 4px))
+	);
+}
+
 .#{$prefix}surface {
 	position: absolute;
 	inset: 0px;
@@ -450,3 +617,175 @@ $rounded-sizes: (
 	fill: none !important;
 	stroke: currentColor !important;
 }
+
+/* Contenedor principal */
+/* ----------------- Contenedor principal ----------------- */
+.win-container {
+	width: 100vw;
+	height: 100vh;
+	background-color: #f1f5f9; /* bg-slate-50 */
+	position: relative;
+	overflow: hidden;
+}
+
+/* ----------------- DraggableResizable ----------------- */
+.win-draggable {
+	background-color: white;
+	// 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: #fff; /* bg-gray-100 */
+	border-bottom: 1px solid #cbd5e1;
+	display: flex;
+	align-items: center;
+	padding: 0 0.5rem; /* px-2 */
+	user-select: none;
+}
+
+.win-header.win-draggable {
+	cursor: move; /* solo si draggable */
+}
+
+.win-header-title {
+	font-size: 0.875rem; /* text-sm */
+	font-weight: 500; /* font-medium */
+}
+
+.win-header-buttons {
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	gap: 0.25rem; /* gap-1 */
+}
+
+/* Botones del header */
+.win-btn {
+	width: 1.75rem; /* w-7 */
+	height: 1.5rem; /* h-6 */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 0.25rem; /* rounded */
+}
+
+.win-btn:hover {
+	background-color: #e5e7eb; /* hover:bg-gray-200 */
+}
+
+.win-btn-close: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;
+	display: flex;
+	align-items: center;
+	padding: 0 1rem; /* px-4 */
+	gap: 0.75rem; /* gap-3 */
+}
+
+.win-taskbar-button {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.25rem 0.75rem;
+	border-radius: 0.25rem;
+	cursor: pointer;
+}
+
+.win-taskbar-button.win-active {
+	background-color: #2563eb; /* bg-blue-600 */
+}
+
+.win-taskbar-button.win-inactive {
+	background-color: #334155; /* bg-slate-700 */
+}
+
+.win-taskbar-button:hover .win-btn-close {
+	background-color: #dc2626; /* hover:bg-red-600 */
+}
+
+/* ----------------- Resize handles ----------------- */
+/* Base handle */
+.win-handle {
+	position: absolute;
+	width: 0.75rem; /* w-3 */
+	height: 0.75rem; /* h-3 */
+	background-color: white;
+	border: 1px solid #d1d5db; /* border-gray-300 */
+	border-radius: 9999px; /* rounded-full */
+	z-index: 20;
+	transform-origin: center;
+	transition: background-color 0.15s ease;
+}
+
+/* Hover */
+.win-handle:hover {
+	background-color: #3b82f6; /* blue-500 */
+}
+
+/* Dirección y cursor */
+.win-handle-n {
+	top: 0;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	cursor: n-resize;
+}
+.win-handle-s {
+	bottom: 0;
+	left: 50%;
+	transform: translate(-50%, 50%);
+	cursor: s-resize;
+}
+.win-handle-e {
+	top: 50%;
+	right: 0;
+	transform: translate(50%, -50%);
+	cursor: e-resize;
+}
+.win-handle-w {
+	top: 50%;
+	left: 0;
+	transform: translate(-50%, -50%);
+	cursor: w-resize;
+}
+.win-handle-ne {
+	top: 0;
+	right: 0;
+	transform: translate(50%, -50%);
+	cursor: ne-resize;
+}
+.win-handle-nw {
+	top: 0;
+	left: 0;
+	transform: translate(-50%, -50%);
+	cursor: nw-resize;
+}
+.win-handle-se {
+	bottom: 0;
+	right: 0;
+	transform: translate(50%, 50%);
+	cursor: se-resize;
+}
+.win-handle-sw {
+	bottom: 0;
+	left: 0;
+	transform: translate(-50%, 50%);
+	cursor: sw-resize;
+}
+
+.win-snap-preview {
+	position: absolute;
+	background-color: rgba(96, 165, 250, 0.3); /* bg-blue-400 + bg-opacity-30 */
+	border: 2px solid #2563eb; /* border-blue-600 */
+	pointer-events: none;
+	z-index: 999998; /* debajo de la ventana */
+}

package/scss/components/_accordion.scss

@@ -58,6 +58,7 @@
 			flex-grow: 1;
 			display: flex;
 			flex-direction: column;
+			overflow: hidden;
 		}
 
 		&--centered &__start-content,
@@ -88,6 +89,8 @@
 			display: -webkit-box;
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: 1;
+			text-overflow: ellipsis;
+			word-break: break-word;
 		}
 
 		&__subtitle {
@@ -100,6 +103,8 @@
 			display: -webkit-box;
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: 1;
+			text-overflow: ellipsis;
+			word-break: break-word;
 		}
 	}
 

package/scss/components/_button.scss

@@ -16,7 +16,6 @@
 	cursor: pointer;
 	color: var(--#{$prefix}button-color);
 	background-color: var(--#{$prefix}button-background);
-	z-index: 0;
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
@@ -45,6 +44,8 @@
 	}
 
 	&-group {
+		border-radius: var(--#{$prefix}button-border-radius);
+		position: relative;
 		display: inline-flex;
 		align-items: center;
 	}
@@ -91,8 +92,7 @@
 	}
 
 	&__start-icon,
-	&__end-icon,
-	&__content {
+	&__end-icon {
 		position: relative;
 		display: flex;
 		align-items: center;

package/scss/components/_descriptions.scss

@@ -59,6 +59,7 @@
 		font-weight: var(--#{$prefix}description-text-font-weight);
 		color: var(--#{$prefix}description-text-color);
 		opacity: var(--#{$prefix}description-text-opacity);
+		word-break: break-word;
 	}
 
 	&-empty {

package/scss/components/_icon.scss

@@ -9,3 +9,31 @@
 	justify-content: center;
 	align-items: center;
 }
+
+.#{$prefix}opacity-0 {
+	opacity: 0;
+}
+
+.#{$prefix}opacity-60 {
+	opacity: 0.6;
+}
+
+.#{$prefix}opacity-100 {
+	opacity: 1;
+}
+
+.#{$prefix}pointer {
+	cursor: pointer;
+}
+
+.#{$prefix}hover-opacity-60 {
+	&:hover {
+		opacity: 0.6;
+	}
+}
+
+.#{$prefix}hover-opacity-100 {
+	&:hover {
+		opacity: 1;
+	}
+}

package/scss/components/_index.scss

@@ -15,11 +15,6 @@
 @use 'drawer';
 @use 'modal';
 
-@use 'input';
-@use 'checkbox';
-@use 'radio';
-@use 'switch';
-
 @use 'accordion';
 @use 'list';
 @use 'data-list';
@@ -37,3 +32,8 @@
 @use 'nav-rail';
 
 @use 'steps';
+
+@use 'input';
+@use 'checkbox';
+@use 'radio';
+@use 'switch';

package/scss/components/_input.scss

@@ -13,12 +13,13 @@
 	background-color: var(--#{$prefix}input-background);
 	z-index: 0;
 	transition: all 0.2s ease-in-out;
+	cursor: text;
 
 	&:focus-visible {
 		outline: none;
 	}
 
-	&:not(&--filterable) {
+	&--selectable {
 		cursor: pointer;
 	}
 
@@ -155,7 +156,7 @@
 	}
 
 	&__placeholder {
-		opacity: 0.6;
+		color: var(--#{$prefix}input-placeholder-color);
 	}
 
 	&__start-content,
@@ -175,14 +176,25 @@
 	}
 
 	&__start-content {
-		margin-right: calc(-1 * var(--#{$prefix}input-icon-size));
-		// padding-block: var(--#{$prefix}input-padding-y);
-		padding-inline: calc(0.75 * var(--#{$prefix}input-padding-x));
+		// margin-right: calc(-1 * var(--#{$prefix}input-icon-size));
+		padding-left: calc(0.75 * var(--#{$prefix}input-padding-x));
+		padding-right: calc(0.375 * var(--#{$prefix}input-padding-x));
 	}
 
 	&__end-content {
-		margin-left: calc(-1 * var(--#{$prefix}input-icon-size));
-		// padding-block: var(--#{$prefix}input-padding-y);
+		// margin-left: calc(-1 * var(--#{$prefix}input-icon-size));
 		padding-inline: calc(0.75 * var(--#{$prefix}input-padding-x));
 	}
+
+	&--start-content &__content &__field,
+	&--start-content &__content &__search,
+	&--start-content &__content &__placeholder {
+		padding-left: 0;
+	}
+
+	&--end-content &__content &__field,
+	&--end-content &__content &__search,
+	&--end-content &__content &__placeholder {
+		padding-right: 0;
+	}
 }

package/scss/components/_list.scss

@@ -46,7 +46,7 @@
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			gap: calc(var(--#{$prefix}list-item-gap) * 0.5);
+			gap: var(--#{$prefix}list-item-gap);
 		}
 
 		&__content {

package/scss/components/_swipe.scss

@@ -24,11 +24,11 @@
 	}
 
 	&__start-content {
-		left: -1.25rem;
+		left: 0.5rem;
 	}
 
 	&__end-content {
-		right: -1.25rem;
+		right: 0.5rem;
 	}
 
 	&--auto-hide &__start-content,

package/scss/components/_tabs.scss

@@ -66,7 +66,7 @@
 
 	&__content {
 		position: relative;
-		height: 40px;
+		height: var(--#{$prefix}tab-height);
 		display: inline-flex;
 		flex-direction: row;
 		justify-content: center;

package/scss/themes/fci/_tokens.scss

@@ -2,8 +2,15 @@
 
 .#{$prefix}theme-fci {
 	--#{$prefix}primary-rgb: 153 0 0;
-
-	--#{$prefix}primary-color: hsl(0, 100%, 30%);
+	--#{$prefix}secondary-rgb: 15 23 42;
+	--#{$prefix}success-rgb: 22 163 74;
+	--#{$prefix}info-rgb: 124 58 237;
+	--#{$prefix}warning-rgb: 248 148 6;
+	--#{$prefix}danger-rgb: 220 38 38;
+	--#{$prefix}black-rgb: 0 0 0;
+	--#{$prefix}white-rgb: 255 255 255;
+
+	--#{$prefix}primary-color: #990000;
 	--#{$prefix}secondary-color: #0f172a;
 	--#{$prefix}success-color: #16a34a;
 	--#{$prefix}success-dark-color: #15803d;