@sixbell-telco/sdk/_index.css

A collection of reusable components designed for use in Sixbell Telco Angular projects

@import 'tailwindcss' source('../');
@import '@angular/cdk/overlay-prebuilt.css';
@import './assets/styles/toast.css';

@plugin "@midudev/tailwind-animations";
@plugin "@tailwindcss/typography";
@plugin 'tailwind-scrollbar';
@plugin "daisyui" {
	themes:
		vivid_elegance_light --default,
		vivid_elegance_dark --prefers-dark;
}

@plugin "daisyui/theme" {
	name: 'vivid_elegance_light';
	default: true;
	prefersdark: false;
	color-scheme: 'light';

	/* Daisy UI Colors */
	--color-base-100: oklch(96.65% 0.0045 258.32);
	--color-base-200: oklch(100% 0 0);
	--color-base-300: oklch(92.88% 0.0126 255.51);
	--color-base-content: oklch(13.49% 0.0024 286.07);
	--color-primary: oklch(65.64% 0.1155 219.3);
	--color-primary-content: oklch(100% 0 0);
	--color-secondary: oklch(86.57% 0.0064 255.48);
	--color-secondary-content: oklch(13.49% 0.0024 286.07);
	--color-accent: oklch(70.45% 0.1926 39.23);
	--color-accent-content: oklch(13.49% 0.0024 286.07);
	--color-neutral: oklch(92.08% 0.0063 255.48);
	--color-neutral-content: oklch(13.49% 0.0024 286.07);
	--color-info: oklch(55.86% 0.1907 256);
	--color-info-content: oklch(100% 0 0);
	--color-success: oklch(73.79% 0.2409 140.89);
	--color-success-content: oklch(36.22% 0.1147 140.02);
	--color-warning: oklch(85.44% 0.1839 108.37);
	--color-warning-content: oklch(46.41% 0.0998 109);
	--color-error: oklch(65.92% 0.2275 29.05);
	--color-error-content: oklch(25.91% 0.0904 29.25);

	/* Daisy UI  Properties */
	/* border radius */
	--radius-selector: 0.5rem; /* For small sized components like checkbox, toggle, badge, etc. */
	--radius-field: 0.25rem; /* For medium sized components like button, input, select, tab, etc. */
	--radius-box: 0.5rem; /* For large sized components like card, modal, alert, etc. */

	/* base sizes */
	--size-selector: 0.25rem;
	--size-field: 0.25rem;

	/* border size */
	--border: 1px;

	/* effects */
	--depth: 0;
	--noise: 0;

	/* Custom Colors */
	--color-primary-gradient: oklch(43.1% 0.0738 214.57);
	--color-tertiary: oklch(72.52% 0 0);
	--color-tertiary-content: oklch(13.49% 0.0024 286.07);
	--color-neutral-secondary: oklch(73.97% 0.0115 280.4);
	--color-neutral-secondary-content: oklch(100% 0 0);
	--color-neutral-tertiary: oklch(100% 0 0);
	--color-neutral-tertiary-content: oklch(73.97% 0.0115 280.4);
	--color-base-placeholder: oklch(51.6% 0.0073 255.51);

	--shadow-primary: oklch(78.66% 0.0011 17.18);

	--color-metrics-increase: oklch(74.59% 0.1812 152.33);
	--color-metrics-decrease: oklch(63.07% 0.194 29.44);
	--color-metrics-neutral: oklch(62.99% 0.0152 202.37);

	--color-metrics-intensity-highest: oklch(65.64% 0.1155 219.3);
	--color-metrics-intensity-high: oklch(68.62% 0.0925 226.08);
	--color-metrics-intensity-medium: oklch(68.62% 0.0925 226.08);
	--color-metrics-intensity-low: oklch(76.18% 0.0656 213.66);
	--color-metrics-intensity-lowest: oklch(78% 0.0473 211.88);
}

@plugin "daisyui/theme" {
	name: 'vivid_elegance_dark';
	/* default: false; */
	/* prefersdark: true; */
	color-scheme: 'dark';

	/* Daisy UI Colors */
	--color-base-100: oklch(18.22% 0 0);
	--color-base-200: oklch(23.5% 0 0);
	--color-base-300: oklch(28.5% 0 0);
	--color-base-content: oklch(100% 0 0);
	--color-primary: oklch(65.64% 0.1155 219.3);
	--color-primary-content: oklch(100% 0 0);
	--color-secondary: oklch(48.72% 0.0161 276.78);
	--color-secondary-content: oklch(100% 0 0);
	--color-accent: oklch(70.45% 0.1926 39.23);
	--color-accent-content: oklch(23.5% 0 0);
	--color-neutral: oklch(49.26% 0 0);
	--color-neutral-content: oklch(100% 0 0);
	--color-info: oklch(55.86% 0.1907 256);
	--color-info-content: oklch(100% 0 0);
	--color-success: oklch(73.79% 0.2409 140.89);
	--color-success-content: oklch(36.22% 0.1147 140.02);
	--color-warning: oklch(85.44% 0.1839 108.37);
	--color-warning-content: oklch(46.41% 0.0998 109);
	--color-error: oklch(65.92% 0.2275 29.05);
	--color-error-content: oklch(25.91% 0.0904 29.25);

	/* border radius */
	--radius-selector: 0.5rem;
	--radius-field: 0.25rem;
	--radius-box: 0.5rem;

	/* base sizes */
	--size-selector: 0.25rem;
	--size-field: 0.25rem;

	/* border size */
	--border: 1px;

	/* effects */
	--depth: 0;
	--noise: 0;

	/* Custom Colors */
	--color-primary-gradient: oklch(43.1% 0.0738 214.57);
	--color-tertiary: oklch(72.52% 0 0);
	--color-tertiary-content: oklch(13.49% 0.0024 286.07);
	--color-neutral-secondary: oklch(73.97% 0.0115 280.4);
	--color-neutral-secondary-content: oklch(100% 0 0);
	--color-neutral-tertiary: oklch(100% 0 0);
	--color-neutral-tertiary-content: oklch(73.97% 0.0115 280.4);
	--color-base-placeholder: oklch(51.6% 0.0073 255.51);

	--shadow-primary: oklch(78.66% 0.0011 17.18);

	--color-metrics-increase: oklch(74.59% 0.1812 152.33);
	--color-metrics-decrease: oklch(63.07% 0.194 29.44);
	--color-metrics-neutral: oklch(62.99% 0.0152 202.37);

	--color-metrics-intensity-highest: oklch(65.64% 0.1155 219.3);
	--color-metrics-intensity-high: oklch(68.62% 0.0925 226.08);
	--color-metrics-intensity-medium: oklch(68.62% 0.0925 226.08);
	--color-metrics-intensity-low: oklch(76.18% 0.0656 213.66);
	--color-metrics-intensity-lowest: oklch(78% 0.0473 211.88);
}

@theme {
	--color-primary-gradient: rgba(var(--primary-gradient), 1);
	--color-tertiary: rgba(var(--tertiary), 1);
	--color-tertiary-content: rgba(var(--tertiary-content), 1);
	--color-neutral-secondary: rgba(var(--neutral-secondary), 1);
	--color-neutral-secondary-content: rgba(var(--neutral-secondary-content), 1);
	--color-neutral-tertiary: rgba(var(--neutral-tertiary), 1);
	--color-neutral-tertiary-content: rgba(var(--neutral-tertiary-content), 1);
	--color-base-placeholder: rgba(var(--base-placeholder), 1);

	--color-metrics-increase: rgba(var(--metrics-increase), 1);
	--color-metrics-decrease: rgba(var(--metrics-decrease), 1);
	--color-metrics-neutral: rgba(var(--metrics-neutral), 1);

	--color-metrics-intensity-highest: rgba(var(--metrics-intensity-highest), 1);
	--color-metrics-intensity-high: rgba(var(--metrics-intensity-high), 1);
	--color-metrics-intensity-medium: rgba(var(--metrics-intensity-medium), 1);
	--color-metrics-intensity-low: rgba(var(--metrics-intensity-low), 1);
	--color-metrics-intensity-lowest: rgba(var(--metrics-intensity-lowest), 1);

	--font-poppins: Poppins, sans-serif;
	--font-heading: Poppins, sans-serif;
	--font-body: Poppins, sans-serif;

	--shadow-main: 0px 0px 8px 0px rgba(var(--shadow-primary));

	--font-weight-inherit: inherit;

	--ease-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-ease-in-and-out-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);

	--animate-slide-in: slideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	--animate-slide-out: slideOut 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	--animate-toast-slide-out: toastSlideOut 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	--animate-fade-in: fadeIn 1s;
	--animate-fade-out: fadeOut 1s;
	--animate-wave: wave 1s linear infinite;

	@keyframes wave {
		0%,
		100% {
			transform: scaleY(0);
		}
		50% {
			transform: scaleY(1);
		}
	}
}

@layer base {
	* {
		margin: 0;
		padding: 0;
		@apply scrollbar-thin overscroll-contain scroll-smooth;
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
		@apply scrollbar-thin overscroll-contain scroll-smooth;
	}

	html.modal-open {
		overflow: hidden;
		scrollbar-gutter: stable;
	}

	body {
		font-size: 14px;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	img,
	video,
	svg {
		height: auto;
		max-width: 100%;
	}

	@media (prefers-reduced-motion: reduce) {
		* {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition: none;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}

	@keyframes slideIn {
		0% {
			transform: translateY(400px);
			animation-timing-function: ease-out;
		}
		60% {
			transform: translateY(-30px);
			animation-timing-function: ease-in;
		}
		80% {
			transform: translateY(10px);
			animation-timing-function: ease-out;
		}
		100% {
			transform: translateY(0px);
			animation-timing-function: ease-in;
		}
	}

	@keyframes slideOut {
		0% {
			transform: translateY(0px);
			animation-timing-function: ease-in;
			opacity: 1;
		}
		60% {
			transform: translateY(10px);
			animation-timing-function: ease-out;
			opacity: 0.4;
		}
		100% {
			transform: translateY(400px);
			animation-timing-function: ease-in;
			opacity: 0;
		}
	}

	@keyframes toastSlideOut {
		0% {
			position: absolute;
			scale: 1;
			z-index: 13;
			margin: 0;
			opacity: 1;
		}
		50% {
			position: absolute;
			scale: 1;
			z-index: 11;
			margin: 0;
			opacity: 0.8;
		}
		80% {
			position: absolute;
			scale: 1;
			z-index: 11;
			margin: 0;
			opacity: 0.4;
		}
		100% {
			bottom: 0;
			position: absolute;
			scale: 1;
			z-index: 11;
			margin: 0;
			opacity: 0;
		}
	}

	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	.animate-wave {
		animation-delay: calc(1s - var(--i));
	}
}

@layer components {
	.btn-tertiary {
		--btn-color: var(--color-tertiary);
		--btn-fg: var(--color-tertiary-content);
	}

	.badge-tertiary {
		--badge-color: var(--color-tertiary);
		--badge-fg: var(--color-tertiary-content);
	}

	.btn-soft:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) {
		--btn-shadow: '';
		--btn-fg: var(--btn-color, var(--color-base-content));
		--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 12%, var(--color-base-100));
		--btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 14%, var(--color-base-100));
		--btn-noise: none;
	}

	.badge.badge-soft {
		color: var(--badge-color, var(--color-base-content));
		background-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 12%, var(--color-base-100));
		border-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 14%, var(--color-base-100));
		background-image: none;
		box-shadow: none;
	}

	.checkbox-tertiary {
		@apply text-tertiary-content;
		--input-color: var(--color-tertiary);
	}

	.radio-tertiary {
		--input-color: var(--color-tertiary);
	}

	.input-tertiary {
		&,
		&:focus,
		&:focus-within {
			--input-color: var(--color-tertiary);
		}
	}

	.textarea-tertiary {
		&,
		&:focus,
		&:focus-within {
			--input-color: var(--color-tertiary);
		}
	}

	.select-tertiary {
		&,
		&:focus,
		&:focus-within {
			--input-color: var(--color-tertiary);
		}
	}

	.link-tertiary {
		@apply text-tertiary;

		@media (hover: hover) {
			&:hover {
				color: color-mix(in oklab, var(--color-tertiary) 80%, #000);
			}
		}
	}

	.tooltip-tertiary {
		--tt-bg: var(--color-tertiary);

		> .tooltip-content,
		&[data-tip]:before {
			@apply text-tertiary-content;
		}
	}

	.range-tertiary {
		@apply text-tertiary;
		--range-thumb: var(--color-tertiary-content);
	}

	.toggle-tertiary {
		&:checked,
		&[aria-checked='true'] {
			--input-color: var(--color-tertiary);
		}
	}

	st-icon {
		@apply inline-flex items-center justify-center align-top;
	}

	st-input-content {
		@apply inline-flex items-center align-top;
	}
}

@layer utilities {
	.input {
		&:has(> input[disabled]),
		&:is(:disabled, [disabled]) {
			@apply border-base-300 bg-base-300 placeholder-base-content text-base-content/40 cursor-not-allowed;
			box-shadow: none;
		}
	}

	.select {
		&:has(> select[disabled]),
		&:is(:disabled, [disabled]) {
			@apply border-base-300 bg-base-300 placeholder-base-content text-base-content/40 cursor-not-allowed;
		}
	}
}