@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
713 lines (631 loc) • 19.2 kB
CSS
@import 'tailwindcss' source('../');
@import '@angular/cdk/overlay-prebuilt.css';
/* Legacy toast system (deprecated) + Sonner relies on component classes */
@import './assets/styles/toast.css';
@plugin "@midudev/tailwind-animations";
@plugin "@tailwindcss/typography";
@plugin "daisyui" {
exclude: rootscrollgutter, rootscrolllock, scrollbar;
themes: false;
}
@plugin "daisyui/theme" {
name: 'sixbell_telco__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-base-50: color-mix(in oklab, var(--color-base-content) 10%, transparent);
--color-primary-light: color-mix(in oklch, var(--color-primary) 75%, #fff);
--color-primary-gradient: color-mix(in oklch, var(--color-primary) 60%, #121212);
--color-primary-gradient-content: oklch(100% 0 0);
--color-secondary-gradient: color-mix(in oklch, var(--color-secondary) 60%, #121212);
--color-secondary-gradient-content: oklch(13.49% 0.0024 286.07);
--color-tertiary-gradient: color-mix(in oklch, var(--color-tertiary) 60%, #121212);
--color-tertiary-gradient-content: oklch(13.49% 0.0024 286.07);
--color-accent-gradient: color-mix(in oklch, var(--color-accent) 60%, #121212);
--color-accent-gradient-content: oklch(100% 0 0);
--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);
--color-backdrop: oklch(0% 0 0/ 0.4);
/* Shadow color tokens */
--color-shadow-primary: oklch(0.8975 0 0);
--color-shadow-backdrop: oklch(0% 0 0/ 0.25);
--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);
--color-scroll-thumb: oklch(75% 0 0);
}
@plugin "daisyui/theme" {
name: 'sixbell_telco__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-base-50: color-mix(in oklab, var(--color-base-content) 10%, transparent);
--color-primary-light: color-mix(in oklch, var(--color-primary) 75%, #000);
--color-primary-gradient: color-mix(in oklch, var(--color-primary) 60%, #121212);
--color-primary-gradient-content: oklch(100% 0 0);
--color-secondary-gradient: color-mix(in oklch, var(--color-secondary) 60%, #121212);
--color-secondary-gradient-content: oklch(100% 0 0);
--color-tertiary-gradient: color-mix(in oklch, var(--color-tertiary) 60%, #121212);
--color-tertiary-gradient-content: oklch(100% 0 0);
--color-accent-gradient: color-mix(in oklch, var(--color-accent) 60%, #121212);
--color-accent-gradient-content: oklch(100% 0 0);
--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);
--color-backdrop: oklch(0% 0 0/ 0.4);
/* Shadow color tokens */
--color-shadow-primary: oklch(0 0 0);
--color-shadow-backdrop: oklch(0% 0 0/ 0.25);
--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);
--color-scroll-thumb: oklch(35% 0 0);
}
@theme {
/* Color tokens registered for Tailwind utilities; values provided in theme plugin blocks */
--color-base-50: color-mix(in oklab, var(--color-base-content) 10%, transparent);
--color-primary-light: color-mix(in oklch, var(--color-primary) 75%, #fff);
--color-primary-gradient: color-mix(in oklch, var(--color-primary) 60%, #121212);
--color-primary-gradient-content: oklch(100% 0 0);
--color-secondary-gradient: color-mix(in oklch, var(--color-secondary) 60%, #121212);
--color-secondary-gradient-content: oklch(13.49% 0.0024 286.07);
--color-tertiary-gradient: color-mix(in oklch, var(--color-tertiary) 60%, #121212);
--color-tertiary-gradient-content: oklch(13.49% 0.0024 286.07);
--color-accent-gradient: color-mix(in oklch, var(--color-accent) 60%, #121212);
--color-accent-gradient-content: oklch(100% 0 0);
--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);
--color-backdrop: oklch(0% 0 0/ 0.4);
--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);
--color-scroll-thumb: oklch(75% 0 0);
--color-shadow-primary: oklch(0.8975 0 0);
--color-shadow-backdrop: oklch(0% 0 0/ 0.25);
/* Non-color design tokens (kept for convenience) */
--font-poppins: Poppins, sans-serif;
--font-heading: Poppins, sans-serif;
--font-body: Poppins, sans-serif;
--shadow-main:
var(--color-shadow-primary) 0px 0px 0px 0px, var(--color-shadow-primary) 0px 0px 0px 0px, var(--color-shadow-primary) 0px 0px 0px 0px,
var(--color-shadow-primary) 0px 0px 0px 0px, var(--color-shadow-primary) 0px 4px 6px -1px, var(--color-shadow-primary) 0px 2px 4px -2px;
--shadow-main-lg: 0 4px 12px var(--color-shadow-primary);
--shadow-backdrop: 0px 25px 50px -12px var(--color-shadow-backdrop);
--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;
--animate-enter: enter 0.15s ease 0s 1 normal none;
--animate-exit: exit 0.15s ease 0s 1 normal none;
--animate-morph-in: morphIn 0.2s ease-out;
--animate-morph-out: morphOut 0.2s ease-in;
--text-xxs: 0.625rem;
--text-xxs--line-height: 0.625rem;
@keyframes wave {
0%,
100% {
transform: scaleY(0);
}
50% {
transform: scaleY(1);
}
}
@keyframes enter {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes exit {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.95);
}
}
}
@layer base {
html {
scrollbar-color: var(--color-scroll-thumb);
}
*,
*::before,
*::after {
/* Firefox */
scrollbar-width: thin;
scrollbar-color: var(--color-scroll-thumb);
}
/* Chrome / Safari / Edge */
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: var(--color-scroll-thumb);
border: 0;
border-radius: 6px;
background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
background: transparent;
}
body {
font-size: 14px;
}
input,
button,
textarea,
select {
font: inherit;
}
img,
video,
svg {
height: auto;
max-width: 100%;
}
input[type='time']::-webkit-calendar-picker-indicator {
background: none;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms ;
animation-iteration-count: 1 ;
transition: none;
transition-duration: 0.01ms ;
scroll-behavior: auto ;
}
}
@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;
}
}
/* Morphing animations for dropdown view transitions */
@keyframes morphIn {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes morphOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.95);
}
}
.animate-wave {
animation-delay: calc(1s - var(--i));
}
calendar-range {
svg {
height: 16px;
width: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
path {
stroke-linecap: round;
stroke-linejoin: round;
}
&::part(previous) {
@apply btn btn-ghost btn-sm btn-square;
}
&::part(next) {
@apply btn btn-ghost btn-sm btn-square;
}
}
calendar-month {
--color-accent: var(--color-primary);
--color-text-on-accent: var(--color-primary-content);
@apply font-body;
&::part(button) {
@apply rounded-selector transition-colors duration-150 ease-linear;
}
&::part(range-inner) {
@apply bg-primary-light text-primary-content rounded-none;
}
&::part(range-start) {
@apply rounded-tr-none rounded-br-none;
}
&::part(range-end) {
@apply rounded-tl-none rounded-bl-none;
}
&::part(range-start range-end) {
@apply rounded-selector;
}
&::part(today) {
color: var(--color-primary);
}
&::part(today selected),
&::part(today):focus-visible {
@apply text-primary-content;
}
/* Hover outline only for non-selected day buttons; selected part overrides this */
&::part(button):hover {
@apply bg-base-50 text-base-content;
}
&::part(button selected):hover {
@apply bg-primary text-primary-content;
}
}
calendar-date {
&::part(previous) {
@apply btn btn-ghost btn-sm btn-square;
}
&::part(next) {
@apply btn btn-ghost btn-sm btn-square;
}
}
}
@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;
}
}
.hide-x-scrollbar {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.hide-x-scrollbar::-webkit-scrollbar {
height: 0 ; /* Chrome/Safari */
}
/* Auto-hide/show scrollbars on hover (overlay-like, no reserved gutter) */
.scrollbar-x-auto-hide {
overflow-x: auto;
scrollbar-gutter: auto; /* don't reserve space */
-ms-overflow-style: none; /* IE/Edge */
scrollbar-width: thin; /* Firefox: keep thickness constant */
scrollbar-color: transparent transparent; /* invisible by default */
}
/* WebKit: keep thickness constant; toggle visibility via color */
.scrollbar-x-auto-hide::-webkit-scrollbar {
height: 8px;
background: transparent;
}
.scrollbar-x-auto-hide::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 4px;
}
.scrollbar-x-auto-hide:hover {
scrollbar-color: var(--color-scroll-thumb) transparent;
}
.scrollbar-x-auto-hide:hover::-webkit-scrollbar-thumb {
background-color: var(--color-scroll-thumb);
}
.scrollbar-y-auto-hide {
overflow-y: auto;
scrollbar-gutter: auto; /* don't reserve space */
-ms-overflow-style: none; /* IE/Edge */
scrollbar-width: thin; /* Firefox */
scrollbar-color: transparent transparent; /* invisible by default */
}
.scrollbar-y-auto-hide::-webkit-scrollbar {
width: 8px;
background: transparent;
}
.scrollbar-y-auto-hide::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 4px;
}
.scrollbar-y-auto-hide:hover {
scrollbar-color: var(--color-scroll-thumb) transparent;
}
.scrollbar-y-auto-hide:hover::-webkit-scrollbar-thumb {
background-color: var(--color-scroll-thumb);
}
/* Both axes */
.scrollbar-auto-hide {
overflow: auto;
scrollbar-gutter: auto;
-ms-overflow-style: none;
scrollbar-width: thin; /* Firefox */
scrollbar-color: transparent transparent; /* invisible by default */
}
.scrollbar-auto-hide::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
}
.scrollbar-auto-hide::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 4px;
}
.scrollbar-auto-hide:hover {
scrollbar-color: var(--color-scroll-thumb) transparent;
}
.scrollbar-auto-hide:hover::-webkit-scrollbar-thumb {
background-color: var(--color-scroll-thumb);
}
}