.surface-natural-demo { display: grid; color: var(--typo3-component-color); grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); border-radius: var(--typo3-component-border-radius); } .surface-natural-demo + .surface-natural-demo { margin-top: var(--typo3-spacing); } .surface-natural-demo-item { display: flex; padding: 2rem; min-height: 200px; align-items: center; justify-content: center; }
dim
base
bright
container-lowest
container-low
container-base
container-high
container-highest
.surface-color-container { display: grid; color: var(--typo3-component-color); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; } .surface-color-demo { overflow: hidden; border-radius: .5rem; box-shadow: var(--typo3-shadow-2); } .surface-color-demo-item { display: flex; padding: 1rem; min-height: 6rem; } .surface-color-demo-variables { padding: 1rem; background-color: var(--typo3-surface-container-base); } .surface-property-list { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.6875rem; font-family: var(--typo3-font-family-monospace); } .surface-property-item { display: flex; gap: 0.5rem; padding: 0.25rem 0; align-items: center; color: var(--typo3-text-color-base); font-weight: 600; } .surface-property-color-tile { width: 1rem; height: 1rem; border-radius: 0.125rem; flex-shrink: 0; }
{color}
container-{color}
--typo3-surface-{color}
--typo3-surface-{color}-text
--typo3-surface-container-{color}
--typo3-surface-container-{color}-text