componentCss property

Implementation

@override
String get componentCss => '''
/* Heading Styles - Use heading font */
h1, h2, h3, h4, h5, h6,
.arcane-heading,
.arcane-headline,
.arcane-subheadline,
.arcane-title,
[class*="heading"],
[class*="headline"],
[class*="title"] {
font-family: var(--font-heading);
}

/* Button and important UI elements use heading font */
button,
.arcane-button,
.arcane-btn,
[class*="button"],
[class*="btn"],
.arcane-badge,
.arcane-chip,
.arcane-tab,
.arcane-nav-item,
label {
font-family: var(--font-heading);
}

/* Glow Utilities */
.codex-glow {
box-shadow: var(--shadow-md);
}

.codex-glow-strong {
box-shadow: var(--shadow-lg);
}

$_rainbowCss

/* Tree Lines for Disclosure/Navigation
 Each item draws its own connectors:
 - ::before = horizontal branch to content
 - ::after = vertical line down to next sibling (except last item = L-connector)
*/
.arcane-tree-lines {
position: relative;
--tree-indent: 1rem;
--tree-line-color: var(--border);
}

/* Each direct child is a tree item */
.arcane-tree-lines > * {
position: relative;
padding-left: var(--tree-indent);
}

/* Horizontal branch from vertical line to content */
.arcane-tree-lines > *::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: calc(var(--tree-indent) - 4px);
height: 1px;
background: var(--tree-line-color);
}

/* Vertical line segment - connects this item to the next */
.arcane-tree-lines > *::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: var(--tree-line-color);
}

/* Last item: L-connector - vertical line only goes to the horizontal branch */
.arcane-tree-lines > *:last-child::after {
bottom: 50%;
}

/* First item: start vertical line from horizontal branch */
.arcane-tree-lines > *:first-child::after {
top: 50%;
}

/* Only child: just horizontal branch, no vertical */
.arcane-tree-lines > *:only-child::after {
display: none;
}

/* Nested tree lines - progressively lighter for visual hierarchy */
.arcane-tree-lines .arcane-tree-lines {
--tree-line-color: color-mix(in srgb, var(--border) 70%, transparent);
}

.arcane-tree-lines .arcane-tree-lines .arcane-tree-lines {
--tree-line-color: color-mix(in srgb, var(--border) 50%, transparent);
}

.arcane-tree-lines .arcane-tree-lines .arcane-tree-lines .arcane-tree-lines {
--tree-line-color: color-mix(in srgb, var(--border) 35%, transparent);
}
''';