public-ui-kolibri

@use 'mixins/to-rem' as *; @layer kol-theme-global { :host { --border-radius: var(--kolibri-border-radius, 5px); --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif); --font-size: var(--kolibri-font-size, #{to-rem(16)}); --spacing: var(--kolibri-spacing, #{to-rem(4)}); --border-width: var(--kolibri-border-width, 1px); --color-primary: var(--kolibri-color-primary, #003a5c); --color-primary-variant: var(--kolibri-color-primary-variant, #005a8f); --color-secondary: var(--kolibri-color-secondary, #ccebf7); --color-danger: var(--kolibri-color-danger, #b4003c); --color-warning: var(--kolibri-color-warning, #c44931); --color-success: var(--kolibri-color-success, #005c45); --color-subtle: var(--kolibri-color-subtle, #576164); --color-light: var(--kolibri-color-light, #ffffff); --color-text: var(--kolibri-color-text, #202020); --color-mute: var(--kolibri-color-mute, #f2f3f4); --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9); } :host { font-family: var(--font-family); font-size: var(--font-size); } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } *[tabindex]:focus, .kol-input:not(.checkbox, .radio) .input:focus-within, .kol-input:is(.checkbox, .radio) input:focus, summary:focus { outline-color: var(--color-primary-variant); outline-style: solid; outline-width: 3px; cursor: pointer; outline-offset: 2px; transition: outline-offset 0.2s linear; } .kol-headline { font-weight: 700; } .kol-tooltip { &__floating { border-radius: var(--border-radius); border: var(--border-width) solid var(--color-subtle); } &__arrow { background-color: var(--color-light); border: var(--border-width) solid var(--color-subtle); } &__content { background-color: var(--color-light); border-radius: var(--border-radius); padding: to-rem(8) to-rem(12); line-height: 1.5; } } .kol-span, .kol-span__container { gap: to-rem(8); } .badge-text-hint { color: var(--color-text); background-color: var(--color-mute-variant); border-radius: 3px; padding: 0 0.3em; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } }