convertigo-studio-web/src/app.css

Rama develop · réplica de lectura del repositorio original.

@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@import '@skeletonlabs/skeleton-svelte';
@source './';
@import '@fontsource-variable/ibm-plex-sans';
@import '@skeletonlabs/skeleton';
@import './convertigo.theme.css';
@import './convertigo.utilities.css';

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant light (&:where(:not(.dark, .dark *)));
@custom-variant motif (&:where(.motif, .motif *));

@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-gray-200, currentColor);
	}

	html[data-theme='convertigo']:not(.dark) body {
		color-scheme: light;
		background-color: var(--color-root-bg-light);
		background-image: none;
		background-attachment: fixed;
		color: var(--typo-base--color-light);
		font-size: var(--typo-base--font-size);
	}

	html[data-theme='convertigo'].dark body {
		color-scheme: dark;
		background-color: var(--color-root-bg-dark);
		background-image: none;
		background-attachment: fixed;
		color: var(--typo-base--color-dark);
		font-size: var(--typo-base--font-size);
	}

	h1 {
		font-size: 32px;
		font-weight: var(--typo-heading--font-weight);
		color: var(--typo-base--color-light);
	}

	h2 {
		font-size: 19px;
		font-weight: var(--typo-heading--font-weight);
		color: var(--typo-base--color-light);
	}

	h3 {
		font-size: 16px;
		font-weight: var(--typo-heading--font-weight);
		color: var(--typo-base--color-light);
	}

	h4 {
		font-size: 14px;
		font-weight: var(--typo-heading--font-weight);
		color: var(--typo-base--color-light);
	}

	html[data-theme='convertigo'].dark h1,
	html[data-theme='convertigo'].dark h2,
	html[data-theme='convertigo'].dark h3,
	html[data-theme='convertigo'].dark h4 {
		color: var(--typo-base--color-dark);
	}

	.c8o-switch {
		background-color: light-dark(var(--color-surface-300), var(--color-surface-900)) !important;
		border: 1px solid light-dark(var(--color-surface-300), var(--color-surface-700));
	}

	.c8o-switch[data-state='checked'] {
		background-color: var(--color-primary-500) !important;
		border-color: var(--color-primary-500);
	}

	.c8o-switch [data-part='thumb'] {
		background-color: #fff;
		border: 0;
	}
}

@utility transition-surface {
	transition-property: background-color, color, border-color, box-shadow, filter;
	transition-duration: 160ms;
	transition-timing-function: var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

@utility transition-soft {
	transition-property: background-color, color, border-color, box-shadow, transform;
	transition-duration: 200ms;
	transition-timing-function: var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

@utility row-hover {
	@apply transition-surface hover:bg-primary-100/60 dark:hover:bg-primary-500/15;
}

@utility rail-link {
	@apply relative flex w-full items-center gap-2 rounded-base border border-transparent row-hover py-2 pr-4 pl-5 text-[14px] transition-soft;
}

@utility rail-active {
	@apply text-primary-500;
}

@utility surface-card-shell {
	@apply rounded-container border border-color shadow-follow;
}

@utility modal-panel {
	@apply rounded-container border border-color bg-surface-50-950 text-surface-950-50 shadow-xl;
}

@utility accordion-item {
	@apply w-full overflow-hidden surface-card-shell bg-surface-100-900;
}

@utility accordion-trigger {
	@apply w-full border-b border-color bg-surface-100-900 py px text-left transition-surface hover:bg-primary-100/45 data-[state=open]:bg-surface-100-900 data-[state=open]:hover:bg-primary-100/45 dark:hover:bg-primary-500/12 dark:data-[state=open]:hover:bg-primary-500/12;
}

@utility accordion-panel {
	@apply bg-surface-100-900 pt-low px pb;
}

@utility accordion-rail-item {
	@apply overflow-hidden;
}

@utility accordion-rail-trigger {
	@apply relative z-10 w-full cursor-pointer rounded-none border-b border-surface-200-800 py-2 px-low text-sm font-medium text-strong transition-surface hover:bg-primary-100/60 dark:hover:bg-primary-500/15;
}

@utility accordion-rail-panel {
	@apply m-0 -mt-px px-0 pt-0 pb-0;
}

@utility studio-panel-toolbar {
	border-bottom: 1px solid var(--color-surface-200-800);
	background: color-mix(in oklab, var(--color-surface-50-950) 94%, transparent);
	padding: 0.5rem;
}

@utility studio-surface {
	border: 1px solid var(--color-surface-200-800);
	border-radius: 0.45rem;
	background: color-mix(in oklab, var(--color-surface-100-900) 55%, transparent);
}

@utility studio-icon-tile {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	border: 1px solid var(--color-surface-200-800);
	border-radius: 0.45rem;
	background: var(--color-surface-50-950);
	color: var(--color-primary-600-400);
}

@utility studio-label {
	color: var(--color-surface-600-400);
	font-size: 0.66rem;
	font-weight: 750;
	text-transform: uppercase;
}

@utility studio-caption {
	color: var(--color-surface-700-300);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
}

@utility studio-ellipsis {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@utility studio-pill {
	display: inline-flex;
	max-width: 100%;
	min-width: 0;
	align-items: center;
	gap: 0.28rem;
	border: 1px solid var(--color-surface-200-800);
	border-radius: 999px;
	background: var(--color-surface-50-950);
	color: var(--color-surface-700-300);
	padding: 0.18rem 0.45rem;
	font-size: 0.68rem;
	font-weight: 650;
}

@utility table-frame {
	border: 0;
	border-radius: var(--radius-base);
	overflow: hidden;
}

@utility text-strong {
	color: var(--convertigo-text-strong);
}

@utility text-muted {
	color: var(--convertigo-text-muted-strong);
}

@utility fullscreen {
	@apply fixed top-0 left-0 z-50 h-full min-w-full bg-surface-50-950;
}

@utility button {
	@apply btn flex items-center gap-2 rounded-base border border-transparent px-3 py-1 text-[13px] font-medium tracking-[0.01em] transition-surface;
}

@utility motif-primary {
	@variant motif {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' opacity='0.075'%3E%3Cline x1='7.5' y1='0' x2='7.5' y2='15' stroke='black' stroke-width='2' /%3E%3C/svg%3E");
		@variant dark {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' opacity='0.075'%3E%3Cline x1='7.5' y1='0' x2='7.5' y2='15' stroke='white' stroke-width='2' /%3E%3C/svg%3E");
		}
	}
}

@utility motif-secondary {
	@variant motif {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' opacity='0.075'%3E%3Cline x1='0' y1='0' x2='20' y2='20' stroke='black' stroke-width='2' /%3E%3Cline x1='20' y1='0' x2='0' y2='20' stroke='black' stroke-width='2' /%3E%3C/svg%3E");
		@variant dark {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' opacity='0.075'%3E%3Cline x1='0' y1='0' x2='20' y2='20' stroke='white' stroke-width='2' /%3E%3Cline x1='20' y1='0' x2='0' y2='20' stroke='white' stroke-width='2' /%3E%3C/svg%3E");
		}
	}
}

@utility motif-tertiary {
	@variant motif {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' opacity='0.075'%3E%3Cline x1='7.5' y1='0' x2='7.5' y2='15' stroke='black' stroke-width='2' /%3E%3Cline x1='0' y1='7.5' x2='15' y2='7.5' stroke='black' stroke-width='2' /%3E%3C/svg%3E");
		@variant dark {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' opacity='0.075'%3E%3Cline x1='7.5' y1='0' x2='7.5' y2='15' stroke='white' stroke-width='2' /%3E%3Cline x1='0' y1='7.5' x2='15' y2='7.5' stroke='white' stroke-width='2' /%3E%3C/svg%3E");
		}
	}
}

@utility motif-warning {
	@variant motif {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' opacity='0.075'%3E%3Ccircle cx='7.5' cy='7.5' r='2' fill='black'/%3E%3C/svg%3E");
		@variant dark {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' opacity='0.075'%3E%3Ccircle cx='7.5' cy='7.5' r='2' fill='white'/%3E%3C/svg%3E");
		}
	}
}

@utility motif-error {
	@variant motif {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' opacity='0.075'%3E%3Cline x1='20' y1='0' x2='0' y2='20' stroke='black' stroke-width='2' /%3E%3C/svg%3E");
		@variant dark {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' opacity='0.075'%3E%3Cline x1='20' y1='0' x2='0' y2='20' stroke='white' stroke-width='2' /%3E%3C/svg%3E");
		}
	}
}

@utility shadow-follow {
	@apply shadow-sm/10 shadow-surface-900-100 hover:shadow-md/15 dark:shadow-sm/25 dark:hover:shadow-md/35;
}

@utility button-primary {
	@apply button preset-filled-primary-500 shadow-follow hover:border-primary-600-400 hover:bg-primary-600-400 hover:text-primary-contrast-600-400;
}

@utility button-secondary {
	@apply button preset-outlined-primary-50-950 border-primary-500 text-primary-500 shadow-follow hover:border-primary-600 hover:text-primary-600;
}

@utility button-tertiary {
	@apply button preset-filled-tertiary-500 shadow-follow hover:border-tertiary-600-400 hover:bg-tertiary-600-400 hover:text-tertiary-contrast-600-400;
}

@utility button-success {
	@apply button preset-filled-success-500 shadow-follow hover:border-success-600-400 hover:bg-success-600-400 hover:text-success-contrast-600-400;
}

@utility button-warning {
	@apply button preset-filled-warning-500 shadow-follow hover:border-warning-600-400 hover:bg-warning-600-400 hover:text-warning-contrast-600-400;
}

@utility button-error {
	@apply button preset-filled-error-500 shadow-follow hover:border-error-600-400 hover:bg-error-600-400 hover:text-error-contrast-600-400;
}

@utility button-ico-primary {
	@apply button border-transparent bg-transparent text-primary-500 shadow-none hover:text-primary-400-600;
}

@utility button-ico-secondary {
	@apply button border-transparent bg-transparent text-secondary-500 shadow-none hover:text-secondary-400-600;
}

@utility button-ico-tertiary {
	@apply button border-transparent bg-transparent text-tertiary-500 shadow-none hover:text-tertiary-400-600;
}

@utility button-ico-success {
	@apply button border-transparent bg-transparent text-success-500 shadow-none hover:text-success-400-600;
}

:root {
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--transition-surface-duration: 160ms;
	--transition-soft-duration: 200ms;
}

@utility button-ico-warning {
	@apply button border-transparent bg-transparent text-warning-500 shadow-none hover:text-warning-400-600;
}

@utility button-ico-error {
	@apply button border-transparent bg-transparent text-error-500 shadow-none hover:text-error-400-600;
}

@utility preset-gradient-one {
	background-image: linear-gradient(
		45deg,
		var(--color-secondary-200-800),
		var(--color-primary-200-800)
	);
	color: var(--color-primary-contrast-200-800);
}

@utility mini-card {
	@apply flex items-center gap-2 rounded-sm p-1 text-nowrap select-none;
}

@utility mini-card-neutral {
	@apply preset-filled-surface-200-800 text-surface-contrast-200-800;
}

@utility chip {
	@apply button border-surface-200 bg-surface-100 text-surface-700 shadow-none;

	& :hover {
		@apply border-surface-300 bg-surface-200;
	}
}

@utility more-chip {
	@apply chip cursor-pointer border-warning-300 bg-warning-200 text-warning-900;

	&:hover {
		@apply border-warning-400 bg-warning-300;
	}
}

@utility label-common {
	@apply cursor-pointer text-[14px];
}

@utility field-shell {
	@apply rounded-base border border-surface-300-700 bg-surface-100-900 text-strong;
}

@utility field-focus-ring {
	@apply focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary-500;
}

@utility input-common {
	@apply w-full field-shell font-normal field-focus-ring placeholder:text-[15px] placeholder:font-light placeholder:text-surface-600-400;
	&:focus {
		box-shadow: none;
	}
}

@utility select-common {
	@apply field-shell font-normal field-focus-ring placeholder:text-[12px] placeholder:font-light placeholder:text-surface-600-400;
}

@utility input-text {
	@apply mt-1 pl-4 text-[16px] text-surface-800-200;
}

@utility border-common {
	@apply border-b border-surface-300-700;
}

@utility select {
	& option:checked,
	& option:checked:focus,
	& option:checked:hover {
		@apply bg-primary-600 text-white;
	}
	& option:checked:active {
		@apply bg-primary-700 text-white;
	}
	@apply bg-surface-100-900;
}

@utility border-color {
	@apply border-surface-200-800;
}

@utility layout-cols-2 {
	@apply grid grid-cols-1 justify-items-stretch gap-4 lg:grid-cols-2;
}

@layer components {
	form {
		@apply rounded-sm;
	}

	.accordion-rail-group [data-part='item'] {
		gap: 0 !important;
	}
}

@layer base {
	:where(button, .button, [role='button'], a):focus-visible {
		outline: 1px solid var(--color-primary-500);
		outline-offset: -1px;
		border-radius: var(--radius-base);
	}
	:where(label[data-scope='switch'][data-part='root']):focus-visible {
		outline: none;
	}
	:where([data-scope='switch'][data-part='root'][data-focus-visible]) {
		outline: 1px solid var(--color-primary-500) !important;
		outline-offset: -1px !important;
		border-radius: var(--radius-base);
	}
	:where(label[data-scope='switch'][data-part='root']):has(input:focus-visible) {
		outline: 1px solid var(--color-primary-500);
		outline-offset: -1px;
		border-radius: var(--radius-base);
	}
	:where(.c8o-select-option) {
		padding-inline: 0.5rem;
	}
}

@layer utilities {
	.placeholder {
		background-color: var(--color-surface-400-600);
	}
	.preset-glass-neutral {
		background: color-mix(in oklab, var(--color-surface-50-950) 30%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-surface-50-950) 30%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-primary {
		background: color-mix(in oklab, var(--color-primary-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-primary-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-secondary {
		background: color-mix(in oklab, var(--color-secondary-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-secondary-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-tertiary {
		background: color-mix(in oklab, var(--color-tertiary-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-tertiary-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-success {
		background: color-mix(in oklab, var(--color-success-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-success-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-warning {
		background: color-mix(in oklab, var(--color-warning-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-warning-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-error {
		background: color-mix(in oklab, var(--color-error-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-error-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
	.preset-glass-surface {
		background: color-mix(in oklab, var(--color-surface-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-surface-500) 50%, transparent) inset;
		backdrop-filter: blur(3px);
	}
}