.state-tokens-grid { display: grid; gap: 1rem; } .state-token-section h3 { margin-top: 0; margin-bottom: 1rem; text-transform: capitalize; } .state-variants-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .state-variant-header { font-weight: 600; font-size: 0.6875rem; text-transform: capitalize; margin-bottom: 0.5rem; } .state-variant-demo { padding: 1rem; border-radius: calc(var(--typo3-component-border-radius) * 0.5); margin-bottom: 0.75rem; text-align: center; font-weight: 500; } .state-property-list { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.6875rem; font-family: var(--typo3-font-family-monospace); } .state-property-item { display: flex; gap: 0.5rem; padding: 0.25rem 0; align-items: center; color: var(--typo3-text-color-base); font-weight: 600; } .state-property-color-tile { width: 1rem; height: 1rem; border-radius: 0.125rem; flex-shrink: 0; }
Accent Colors
{color}
{variant}
Sample Text
--typo3-state-{color}-color
--typo3-state-{color}-bg
--typo3-state-{color}-border-color
Sample Text
--typo3-state-{color}-{variant}-color
--typo3-state-{color}-{variant}-bg
--typo3-state-{color}-{variant}-border-color
State Colors
{color}
{variant}
Sample Text
--typo3-state-{color}-color
--typo3-state-{color}-bg
--typo3-state-{color}-border-color
Sample Text
--typo3-state-{color}-{variant}-color
--typo3-state-{color}-{variant}-bg
--typo3-state-{color}-{variant}-border-color