.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-code { padding: 1rem; font-size: 0.75rem; background-color: var(--typo3-surface-container-base); margin: 0 !important; }
{color}
container-{color}
--typo3-surface-{color}
--typo3-surface-{color}-text
--typo3-surface-container-{color}
--typo3-surface-container-{color}-text