konnosutilities.css76 lines · main
| 1 | /* |
| 2 | * Custom Tailwind v4 utilities migrated from packages/config/ui.config.js |
| 3 | * (addUtilities + matchUtilities) and packages/config/tailwind.config.js |
| 4 | * (the .bg legacy shim). |
| 5 | */ |
| 6 | |
| 7 | /* |
| 8 | * The `bg` class worked in Tailwind v3 but stopped working in v4. Restored as |
| 9 | * an alias for `bg-default` to avoid a wide rename across the codebase. |
| 10 | * Should be deprecated in favor of `bg-default`. |
| 11 | */ |
| 12 | @utility bg { |
| 13 | background-color: hsl(var(--background-default)); |
| 14 | } |
| 15 | |
| 16 | /* |
| 17 | * Soft shimmer gradient used by LoadingLine. |
| 18 | */ |
| 19 | @utility line-loading-bg { |
| 20 | background: rgb(0, 0, 0); |
| 21 | background: linear-gradient( |
| 22 | 90deg, |
| 23 | rgba(0, 0, 0, 0) 0%, |
| 24 | rgba(255, 255, 255, 0.65) 50%, |
| 25 | rgba(0, 0, 0, 0) 100% |
| 26 | ); |
| 27 | } |
| 28 | @utility line-loading-bg-light { |
| 29 | background: rgb(0, 0, 0); |
| 30 | background: linear-gradient( |
| 31 | 90deg, |
| 32 | rgba(0, 0, 0, 0) 0%, |
| 33 | rgba(33, 33, 33, 0.65) 50%, |
| 34 | rgba(0, 0, 0, 0) 100% |
| 35 | ); |
| 36 | } |
| 37 | |
| 38 | /* may be unused — verify before pruning */ |
| 39 | @utility mask-fadeout-right { |
| 40 | -webkit-mask-image: linear-gradient(to right, white 98%, transparent 100%); |
| 41 | mask-image: linear-gradient(to right, white 98%, transparent 100%); |
| 42 | } |
| 43 | /* may be unused — verify before pruning */ |
| 44 | @utility mask-fadeout-left { |
| 45 | -webkit-mask-image: linear-gradient(to left, white 98%, transparent 100%); |
| 46 | mask-image: linear-gradient(to left, white 98%, transparent 100%); |
| 47 | } |
| 48 | |
| 49 | /* |
| 50 | * Functional color utilities. The `--value(--color-*)` token accepts any |
| 51 | * registered --color-* design token (e.g. highlight-foreground-light). |
| 52 | */ |
| 53 | /* may be unused — verify before pruning */ |
| 54 | @utility highlight-* { |
| 55 | box-shadow: inset 0 1px 0 0 --value(--color-*); |
| 56 | } |
| 57 | /* may be unused — verify before pruning */ |
| 58 | @utility subhighlight-* { |
| 59 | box-shadow: inset 0 -1px 0 0 --value(--color-*); |
| 60 | } |
| 61 | |
| 62 | /* |
| 63 | * Inline-SVG grid background. Used by ProjectLinker as bg-grid-black/5 and |
| 64 | * bg-grid-white/5 for the integrations onboarding visuals. |
| 65 | */ |
| 66 | @utility bg-grid-* { |
| 67 | background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='--value(--color-*)'><path d='M0 .5H31.5V32'/></svg>"); |
| 68 | } |
| 69 | |
| 70 | @utility no-scrollbar { |
| 71 | -ms-overflow-style: none; /* IE and Edge */ |
| 72 | scrollbar-width: none; /* Firefox */ |
| 73 | &::-webkit-scrollbar { |
| 74 | display: none; /* Chrome, Safari, Opera */ |
| 75 | } |
| 76 | } |