.theme-palette-example{table { &.base-palette, &.neutral-palette { width: 100%; border: .1rem solid oklch(from var(--color-shadow) l c h / 100%); caption { background-color: var(--color-surface-container-low); color: var(--color-on-surface); padding: .5em; font-size: 120%; border: .1rem solid oklch(from var(--color-shadow) l c h / 100%); border-bottom: none; } th { background-color: var(--color-surface-container); border: .1rem solid oklch(from var(--color-shadow) l c h / 100%); color: var(--color-on-surface-variant); font-weight: normal; min-width: fit-content; padding: .5em; white-space: nowrap; &.title { color: var(--color-on-surface); font-weight: bold; } thead & { text-align: center; } } td { border: .1rem solid oklch(from var(--color-shadow) l c h / 100%); min-width: fit-content; } } &.base-palette { .primary { .color-main { background-color: var(--palette-primary-main); } .color-lightest { background-color: var(--palette-primary-lightest); } .color-lighter { background-color: var(--palette-primary-lighter); } .color-light { background-color: var(--palette-primary-light); } .color-medium-light { background-color: var(--palette-primary-medium-light); } .color-medium { background-color: var(--palette-primary-medium); } .color-medium-dark { background-color: var(--palette-primary-medium-dark); } .color-dark { background-color: var(--palette-primary-dark); } .color-darker { background-color: var(--palette-primary-darker); } .color-darkest { background-color: var(--palette-primary-darkest); } } .secondary-left { .color-main { background-color: var(--palette-secondary-left-main); } .color-lightest { background-color: var(--palette-secondary-left-lightest); } .color-lighter { background-color: var(--palette-secondary-left-lighter); } .color-light { background-color: var(--palette-secondary-left-light); } .color-medium-light { background-color: var(--palette-secondary-left-medium-light); } .color-medium { background-color: var(--palette-secondary-left-medium); } .color-medium-dark { background-color: var(--palette-secondary-left-medium-dark); } .color-dark { background-color: var(--palette-secondary-left-dark); } .color-darker { background-color: var(--palette-secondary-left-darker); } .color-darkest { background-color: var(--palette-secondary-left-darkest); } } .secondary-right { .color-main { background-color: var(--palette-secondary-right-main); } .color-lightest { background-color: var(--palette-secondary-right-lightest); } .color-lighter { background-color: var(--palette-secondary-right-lighter); } .color-light { background-color: var(--palette-secondary-right-light); } .color-medium-light { background-color: var(--palette-secondary-right-medium-light); } .color-medium { background-color: var(--palette-secondary-right-medium); } .color-medium-dark { background-color: var(--palette-secondary-right-medium-dark); } .color-dark { background-color: var(--palette-secondary-right-dark); } .color-darker { background-color: var(--palette-secondary-right-darker); } .color-darkest { background-color: var(--palette-secondary-right-darkest); } } .warning { .color-main { background-color: var(--palette-warning-main); } .color-lightest { background-color: var(--palette-warning-lightest); } .color-lighter { background-color: var(--palette-warning-lighter); } .color-light { background-color: var(--palette-warning-light); } .color-medium-light { background-color: var(--palette-warning-medium-light); } .color-medium { background-color: var(--palette-warning-medium); } .color-medium-dark { background-color: var(--palette-warning-medium-dark); } .color-dark { background-color: var(--palette-warning-dark); } .color-darker { background-color: var(--palette-warning-darker); } .color-darkest { background-color: var(--palette-warning-darkest); } } .success { .color-main { background-color: var(--palette-success-main); } .color-lightest { background-color: var(--palette-success-lightest); } .color-lighter { background-color: var(--palette-success-lighter); } .color-light { background-color: var(--palette-success-light); } .color-medium-light { background-color: var(--palette-success-medium-light); } .color-medium { background-color: var(--palette-success-medium); } .color-medium-dark { background-color: var(--palette-success-medium-dark); } .color-dark { background-color: var(--palette-success-dark); } .color-darker { background-color: var(--palette-success-darker); } .color-darkest { background-color: var(--palette-success-darkest); } } .error { .color-main { background-color: var(--palette-error-main); } .color-lightest { background-color: var(--palette-error-lightest); } .color-lighter { background-color: var(--palette-error-lighter); } .color-light { background-color: var(--palette-error-light); } .color-medium-light { background-color: var(--palette-error-medium-light); } .color-medium { background-color: var(--palette-error-medium); } .color-medium-dark { background-color: var(--palette-error-medium-dark); } .color-dark { background-color: var(--palette-error-dark); } .color-darker { background-color: var(--palette-error-darker); } .color-darkest { background-color: var(--palette-error-darkest); } } .neutral { .color-main { background-color: var(--palette-neutral-main); } .color-lightest { background-color: var(--palette-neutral-lightest); } .color-lighter { background-color: var(--palette-neutral-lighter); } .color-light { background-color: var(--palette-neutral-light); } .color-medium-light { background-color: var(--palette-neutral-medium-light); } .color-medium { background-color: var(--palette-neutral-medium); } .color-medium-dark { background-color: var(--palette-neutral-medium-dark); } .color-dark { background-color: var(--palette-neutral-dark); } .color-darker { background-color: var(--palette-neutral-darker); } .color-darkest { background-color: var(--palette-neutral-darkest); } } } &.neutral-palette { tbody th { text-align: center; width: 30%; } .neutral0 { background-color: var(--palette-neutral0); } .neutral5 { background-color: var(--palette-neutral5); } .neutral10 { background-color: var(--palette-neutral10); } .neutral15 { background-color: var(--palette-neutral15); } .neutral20 { background-color: var(--palette-neutral20); } .neutral25 { background-color: var(--palette-neutral25); } .neutral30 { background-color: var(--palette-neutral30); } .neutral35 { background-color: var(--palette-neutral35); } .neutral40 { background-color: var(--palette-neutral40); } .neutral50 { background-color: var(--palette-neutral50); } .neutral60 { background-color: var(--palette-neutral60); } .neutral65 { background-color: var(--palette-neutral65); } .neutral70 { background-color: var(--palette-neutral70); } .neutral75 { background-color: var(--palette-neutral75); } .neutral80 { background-color: var(--palette-neutral80); } .neutral85 { background-color: var(--palette-neutral85); } .neutral90 { background-color: var(--palette-neutral90); } .neutral95 { background-color: var(--palette-neutral95); } .neutral100 { background-color: var(--palette-neutral100); } } } .use { margin: 2em 0; border: .1rem solid oklch(from var(--color-shadow) l c h / 50%); background-color: var(--color-surface-variant); color: var(--color-on-surface-variant); padding: 1em; }}