Back
Theme Tokens Stable
File: theme/webex/dark-stable.json
color
color-theme-text-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-primary-normal | --mds-color-theme-text-primary-normal | #fffffff2 | |
| color-theme-text-primary-disabled | --mds-color-theme-text-primary-disabled | #ffffff66 |
color-theme-text-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-secondary-normal | --mds-color-theme-text-secondary-normal | #ffffffb3 |
color-theme-text-error
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-error-normal | --mds-color-theme-text-error-normal | #fc8b98 | |
| color-theme-text-error-hover | --mds-color-theme-text-error-hover | #ffd4da | |
| color-theme-text-error-active | --mds-color-theme-text-error-active | #ffd4da |
color-theme-text-success
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-success-normal | --mds-color-theme-text-success-normal | #3cc29a | |
| color-theme-text-success-hover | --mds-color-theme-text-success-hover | #9fedd8 | |
| color-theme-text-success-active | --mds-color-theme-text-success-active | #9fedd8 |
color-theme-text-warning
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-warning-normal | --mds-color-theme-text-warning-normal | #f2990a | |
| color-theme-text-warning-hover | --mds-color-theme-text-warning-hover | #ffda94 | |
| color-theme-text-warning-active | --mds-color-theme-text-warning-active | #ffda94 |
color-theme-text-accent
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-accent-normal | --mds-color-theme-text-accent-normal | #64b4fa | |
| color-theme-text-accent-hover | --mds-color-theme-text-accent-hover | #bfe3ff | |
| color-theme-text-accent-active | --mds-color-theme-text-accent-active | #bfe3ff |
color-theme-text-teamdefault
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-teamdefault-normal | --mds-color-theme-text-teamdefault-normal | #ffffffb3 | |
| color-theme-text-teamdefault-hover | --mds-color-theme-text-teamdefault-hover | #ffffffb3 | |
| color-theme-text-teamdefault-active | --mds-color-theme-text-teamdefault-active | #fffffff2 |
color-theme-text-alert-purple
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-alert-purple-normal | --mds-color-theme-text-alert-purple-normal | #f294f1 | |
| color-theme-text-alert-purple-hover | --mds-color-theme-text-alert-purple-hover | #fce1fc | |
| color-theme-text-alert-purple-active | --mds-color-theme-text-alert-purple-active | #fce1fc |
color-theme-text-alert-orange
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-alert-orange-normal | --mds-color-theme-text-alert-orange-normal | #fd884e | |
| color-theme-text-alert-orange-hover | --mds-color-theme-text-alert-orange-hover | #fed5ac | |
| color-theme-text-alert-orange-active | --mds-color-theme-text-alert-orange-active | #fed5ac |
color-theme-text-team-cobalt
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-team-cobalt-normal | --mds-color-theme-text-team-cobalt-normal | #5ebff7 | |
| color-theme-text-team-cobalt-hover | --mds-color-theme-text-team-cobalt-hover | #5ebff7 | |
| color-theme-text-team-cobalt-active | --mds-color-theme-text-team-cobalt-active | #c7eeff |
color-theme-text-team-cyan
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-team-cyan-normal | --mds-color-theme-text-team-cyan-normal | #22c7d6 | |
| color-theme-text-team-cyan-hover | --mds-color-theme-text-team-cyan-hover | #22c7d6 | |
| color-theme-text-team-cyan-active | --mds-color-theme-text-team-cyan-active | #b2f4f7 |
color-theme-text-team-mint
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-team-mint-normal | --mds-color-theme-text-team-mint-normal | #30c9b0 | |
| color-theme-text-team-mint-hover | --mds-color-theme-text-team-mint-hover | #baf5e7 | |
| color-theme-text-team-mint-active | --mds-color-theme-text-team-mint-active | #baf5e7 |
color-theme-text-team-lime
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-team-lime-normal | --mds-color-theme-text-team-lime-normal | #93c437 | |
| color-theme-text-team-lime-hover | --mds-color-theme-text-team-lime-hover | #93c437 | |
| color-theme-text-team-lime-active | --mds-color-theme-text-team-lime-active | #ddf2ae |
color-theme-text-team-gold
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-team-gold-normal | --mds-color-theme-text-team-gold-normal | #d6b220 | |
| color-theme-text-team-gold-hover | --mds-color-theme-text-team-gold-hover | #d6b220 | |
| color-theme-text-team-gold-active | --mds-color-theme-text-team-gold-active | #f5eaa2 |
color-theme-text-team-orange
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-team-orange-normal | --mds-color-theme-text-team-orange-normal | #fd884e | |
| color-theme-text-team-orange-hover | --mds-color-theme-text-team-orange-hover | #fd884e | |
| color-theme-text-team-orange-active | --mds-color-theme-text-team-orange-active | #fed5ac |
color-theme-text-team-pink
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-team-pink-normal | --mds-color-theme-text-team-pink-normal | #fc97aa | |
| color-theme-text-team-pink-hover | --mds-color-theme-text-team-pink-hover | #fc97aa | |
| color-theme-text-team-pink-active | --mds-color-theme-text-team-pink-active | #ffe0e7 |
color-theme-text-team-purple
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-team-purple-normal | --mds-color-theme-text-team-purple-normal | #f294f1 | |
| color-theme-text-team-purple-hover | --mds-color-theme-text-team-purple-hover | #f294f1 | |
| color-theme-text-team-purple-active | --mds-color-theme-text-team-purple-active | #fce1fc |
color-theme-text-team-violet
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-team-violet-normal | --mds-color-theme-text-team-violet-normal | #c7a5fa | |
| color-theme-text-team-violet-hover | --mds-color-theme-text-team-violet-hover | #c7a5fa | |
| color-theme-text-team-violet-active | --mds-color-theme-text-team-violet-active | #f0e3fc |
color-theme-text-team-slate
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-team-slate-normal | --mds-color-theme-text-team-slate-normal | #b0b4d9 | |
| color-theme-text-team-slate-hover | --mds-color-theme-text-team-slate-hover | #b0b4d9 | |
| color-theme-text-team-slate-active | --mds-color-theme-text-team-slate-active | #e3e7fa |
color-theme-text
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-text-highlight | --mds-color-theme-text-highlight | #063a75 |
color-theme-inverted-text-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-inverted-text-primary-normal | --mds-color-theme-inverted-text-primary-normal | #000000f2 | |
| color-theme-inverted-text-primary-disabled | --mds-color-theme-inverted-text-primary-disabled | #00000066 |
color-theme-inverted-text-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-inverted-text-secondary-normal | --mds-color-theme-inverted-text-secondary-normal | #000000b3 |
color-theme-inverted-text-accent
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-inverted-text-accent-normal | --mds-color-theme-inverted-text-accent-normal | #0353a8 | |
| color-theme-inverted-text-accent-hover | --mds-color-theme-inverted-text-accent-hover | #0a274a | |
| color-theme-inverted-text-accent-active | --mds-color-theme-inverted-text-accent-active | #0a274a |
color-theme-inverted-background
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-inverted-background-normal | --mds-color-theme-inverted-background-normal | #ffffff |
color-theme-inverted-button-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-inverted-button-primary-normal | --mds-color-theme-inverted-button-primary-normal | #000000f2 | |
| color-theme-inverted-button-primary-hover | --mds-color-theme-inverted-button-primary-hover | #000000cc | |
| color-theme-inverted-button-primary-pressed | --mds-color-theme-inverted-button-primary-pressed | #000000b3 | |
| color-theme-inverted-button-primary-disabled | --mds-color-theme-inverted-button-primary-disabled | #00000033 |
color-theme-inverted-button-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-inverted-button-secondary-normal | --mds-color-theme-inverted-button-secondary-normal | #00000000 | |
| color-theme-inverted-button-secondary-hover | --mds-color-theme-inverted-button-secondary-hover | #00000012 | |
| color-theme-inverted-button-secondary-pressed | --mds-color-theme-inverted-button-secondary-pressed | #00000033 | |
| color-theme-inverted-button-secondary-disabled | --mds-color-theme-inverted-button-secondary-disabled | #00000000 |
color-theme-inverted-outline-button
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-inverted-outline-button-normal | --mds-color-theme-inverted-outline-button-normal | #00000080 |
color-theme-inverted-outline-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-inverted-outline-primary-normal | --mds-color-theme-inverted-outline-primary-normal | #00000075 |
color-theme-inverted-outline-disabled
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-inverted-outline-disabled-normal | --mds-color-theme-inverted-outline-disabled-normal | #00000033 |
color-theme-inverted-outline-theme
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-inverted-outline-theme-normal | --mds-color-theme-inverted-outline-theme-normal | #1170cf |
color-theme-inverted-control-active
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-inverted-control-active-normal | --mds-color-theme-inverted-control-active-normal | #1170cf | |
| color-theme-inverted-control-active-hover | --mds-color-theme-inverted-control-active-hover | #0353a8 | |
| color-theme-inverted-control-active-pressed | --mds-color-theme-inverted-control-active-pressed | #063a75 | |
| color-theme-inverted-control-active-active | --mds-color-theme-inverted-control-active-active | #063a75 | |
| color-theme-inverted-control-active-disabled | --mds-color-theme-inverted-control-active-disabled | #00000033 |
color-theme-inverted-control-inactive
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-inverted-control-inactive-normal | --mds-color-theme-inverted-control-inactive-normal | #8f8f8f | |
| color-theme-inverted-control-inactive-hover | --mds-color-theme-inverted-control-inactive-hover | #0000004d | |
| color-theme-inverted-control-inactive-pressed | --mds-color-theme-inverted-control-inactive-pressed | #00000066 | |
| color-theme-inverted-control-inactive-disabled | --mds-color-theme-inverted-control-inactive-disabled | #00000033 |
color-theme-background-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-primary-ghost | --mds-color-theme-background-primary-ghost | #ffffff00 | |
| color-theme-background-primary-hover | --mds-color-theme-background-primary-hover | #ffffff12 | |
| color-theme-background-primary-active | --mds-color-theme-background-primary-active | #ffffff1c | |
| color-theme-background-primary-disabled | --mds-color-theme-background-primary-disabled | #ffffff1c |
color-theme-background-solid-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-solid-primary-normal | --mds-color-theme-background-solid-primary-normal | #000000 |
color-theme-background-solid-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-solid-secondary-normal | --mds-color-theme-background-solid-secondary-normal | #1a1a1a |
color-theme-background-solid-tertiary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-solid-tertiary-normal | --mds-color-theme-background-solid-tertiary-normal | #262626 |
color-theme-background-solid-quaternary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-solid-quaternary-normal | --mds-color-theme-background-solid-quaternary-normal | #3b3b3b |
color-theme-background-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-secondary-normal | --mds-color-theme-background-secondary-normal | #ffffff1c | |
| color-theme-background-secondary-hover | --mds-color-theme-background-secondary-hover | #ffffff33 | |
| color-theme-background-secondary-active | --mds-color-theme-background-secondary-active | #ffffff33 | |
| color-theme-background-secondary-disabled | --mds-color-theme-background-secondary-disabled | #ffffff00 |
color-theme-background-accent
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-accent-normal | --mds-color-theme-background-accent-normal | #1170cf | |
| color-theme-background-accent-active | --mds-color-theme-background-accent-active | #64b4fa |
color-theme-background-alert-default
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-alert-default-normal | --mds-color-theme-background-alert-default-normal | #3b3b3b | |
| color-theme-background-alert-default-hover | --mds-color-theme-background-alert-default-hover | #3b3b3b | |
| color-theme-background-alert-default-active | --mds-color-theme-background-alert-default-active | #545454 |
color-theme-background-alert-success
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-alert-success-normal | --mds-color-theme-background-alert-success-normal | #0e2b20 | |
| color-theme-background-alert-success-hover | --mds-color-theme-background-alert-success-hover | #0e2b20 | |
| color-theme-background-alert-success-active | --mds-color-theme-background-alert-success-active | #134231 |
color-theme-background-alert-warning
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-alert-warning-normal | --mds-color-theme-background-alert-warning-normal | #36220c | |
| color-theme-background-alert-warning-hover | --mds-color-theme-background-alert-warning-hover | #36220c | |
| color-theme-background-alert-warning-active | --mds-color-theme-background-alert-warning-active | #57330a |
color-theme-background-alert-error
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-alert-error-normal | --mds-color-theme-background-alert-error-normal | #4f0e10 | |
| color-theme-background-alert-error-hover | --mds-color-theme-background-alert-error-hover | #4f0e10 | |
| color-theme-background-alert-error-active | --mds-color-theme-background-alert-error-active | #780d13 |
color-theme-background-alert-theme
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-alert-theme-normal | --mds-color-theme-background-alert-theme-normal | #0a274a | |
| color-theme-background-alert-theme-hover | --mds-color-theme-background-alert-theme-hover | #0a274a | |
| color-theme-background-alert-theme-active | --mds-color-theme-background-alert-theme-active | #063a75 |
color-theme-background-alert-purple
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-alert-purple-normal | --mds-color-theme-background-alert-purple-normal | #3b1840 | |
| color-theme-background-alert-purple-hover | --mds-color-theme-background-alert-purple-hover | #3b1840 | |
| color-theme-background-alert-purple-active | --mds-color-theme-background-alert-purple-active | #601e66 |
color-theme-background-alert-orange
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-alert-orange-normal | --mds-color-theme-background-alert-orange-normal | #411b04 | |
| color-theme-background-alert-orange-hover | --mds-color-theme-background-alert-orange-hover | #411b04 | |
| color-theme-background-alert-orange-active | --mds-color-theme-background-alert-orange-active | #682601 |
color-theme-background-label-cobalt
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-label-cobalt-normal | --mds-color-theme-background-label-cobalt-normal | #12283d | |
| color-theme-background-label-cobalt-hover | --mds-color-theme-background-label-cobalt-hover | #103c63 | |
| color-theme-background-label-cobalt-active | --mds-color-theme-background-label-cobalt-active | #08599c |
color-theme-background-label-gold
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-label-gold-normal | --mds-color-theme-background-label-gold-normal | #30240d | |
| color-theme-background-label-gold-hover | --mds-color-theme-background-label-gold-hover | #4d370c | |
| color-theme-background-label-gold-active | --mds-color-theme-background-label-gold-active | #735107 |
color-theme-background-label-lime
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-label-lime-normal | --mds-color-theme-background-label-lime-normal | #1e2b10 | |
| color-theme-background-label-lime-hover | --mds-color-theme-background-label-lime-hover | #2d4214 | |
| color-theme-background-label-lime-active | --mds-color-theme-background-label-lime-active | #416116 |
color-theme-background-label-mint
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-label-mint-normal | --mds-color-theme-background-label-mint-normal | #102b2a | |
| color-theme-background-label-mint-hover | --mds-color-theme-background-label-mint-hover | #12423f | |
| color-theme-background-label-mint-active | --mds-color-theme-background-label-mint-active | #12615a |
color-theme-background-label-orange
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-label-orange-normal | --mds-color-theme-background-label-orange-normal | #411b04 | |
| color-theme-background-label-orange-hover | --mds-color-theme-background-label-orange-hover | #682601 | |
| color-theme-background-label-orange-active | --mds-color-theme-background-label-orange-active | #9c3202 |
color-theme-background-label-pink
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-label-pink-normal | --mds-color-theme-background-label-pink-normal | #3b1e21 | |
| color-theme-background-label-pink-hover | --mds-color-theme-background-label-pink-hover | #66262d | |
| color-theme-background-label-pink-active | --mds-color-theme-background-label-pink-active | #a12a3a |
color-theme-background-label-purple
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-label-purple-normal | --mds-color-theme-background-label-purple-normal | #3b1840 | |
| color-theme-background-label-purple-hover | --mds-color-theme-background-label-purple-hover | #601e66 | |
| color-theme-background-label-purple-active | --mds-color-theme-background-label-purple-active | #932099 |
color-theme-background-label-slate
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-label-slate-normal | --mds-color-theme-background-label-slate-normal | #26262b | |
| color-theme-background-label-slate-hover | --mds-color-theme-background-label-slate-hover | #393a47 | |
| color-theme-background-label-slate-active | --mds-color-theme-background-label-slate-active | #535573 |
color-theme-background-label-violet
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-label-violet-normal | --mds-color-theme-background-label-violet-normal | #29223d | |
| color-theme-background-label-violet-hover | --mds-color-theme-background-label-violet-hover | #432c78 | |
| color-theme-background-label-violet-active | --mds-color-theme-background-label-violet-active | #643abd |
color-theme-background-label-default
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-label-default-normal | --mds-color-theme-background-label-default-normal | #262626 | |
| color-theme-background-label-default-hover | --mds-color-theme-background-label-default-hover | #3b3b3b | |
| color-theme-background-label-default-active | --mds-color-theme-background-label-default-active | #545454 |
color-theme-background-label-error
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-label-error-normal | --mds-color-theme-background-label-error-normal | #4f0e10 | |
| color-theme-background-label-error-hover | --mds-color-theme-background-label-error-hover | #780d13 | |
| color-theme-background-label-error-active | --mds-color-theme-background-label-error-active | #ab0a15 |
color-theme-background-namelabel
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-namelabel-normal | --mds-color-theme-background-namelabel-normal | #00000099 |
color-theme-background-gradient-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-gradient-primary-normal | --mds-color-theme-background-gradient-primary-normal | linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) |
color-theme-background-gradient-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-gradient-secondary-normal | --mds-color-theme-background-gradient-secondary-normal | linear-gradient(180deg, #262626 0%, #0f0f0f 100%) |
color-theme-background-reaction
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-reaction-normal | --mds-color-theme-background-reaction-normal | linear-gradient(90deg, #1a1a1ae6 0%, #1a1a1a00 100%) |
color-theme-background-skeleton
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-background-skeleton-normal | --mds-color-theme-background-skeleton-normal | linear-gradient(123deg, #ffffff33 0%, #ffffff4d 33.85%, #ffffff66 70.31%, #ffffff80 100%) |
color-theme-button-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-button-primary-normal | --mds-color-theme-button-primary-normal | #fffffff2 | |
| color-theme-button-primary-hover | --mds-color-theme-button-primary-hover | #ffffffcc | |
| color-theme-button-primary-pressed | --mds-color-theme-button-primary-pressed | #ffffffb3 | |
| color-theme-button-primary-disabled | --mds-color-theme-button-primary-disabled | #ffffff33 |
color-theme-button-secondary-active
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-button-secondary-active-normal | --mds-color-theme-button-secondary-active-normal | #ffffff33 | |
| color-theme-button-secondary-active-hover | --mds-color-theme-button-secondary-active-hover | #ffffff4d | |
| color-theme-button-secondary-active-pressed | --mds-color-theme-button-secondary-active-pressed | #ffffff66 | |
| color-theme-button-secondary-active-disabled | --mds-color-theme-button-secondary-active-disabled | #ffffff1c |
color-theme-button-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-button-secondary-normal | --mds-color-theme-button-secondary-normal | #ffffff00 | |
| color-theme-button-secondary-hover | --mds-color-theme-button-secondary-hover | #ffffff12 | |
| color-theme-button-secondary-pressed | --mds-color-theme-button-secondary-pressed | #ffffff33 | |
| color-theme-button-secondary-disabled | --mds-color-theme-button-secondary-disabled | #ffffff00 |
color-theme-button-join
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-button-join-normal | --mds-color-theme-button-join-normal | #1d805f | |
| color-theme-button-join-hover | --mds-color-theme-button-join-hover | #185e46 | |
| color-theme-button-join-pressed | --mds-color-theme-button-join-pressed | #134231 |
color-theme-button-cancel
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-button-cancel-normal | --mds-color-theme-button-cancel-normal | #db1f2e | |
| color-theme-button-cancel-hover | --mds-color-theme-button-cancel-hover | #ab0a15 | |
| color-theme-button-cancel-pressed | --mds-color-theme-button-cancel-pressed | #780d13 |
color-theme-button-accent
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-button-accent-normal | --mds-color-theme-button-accent-normal | #1170cf | |
| color-theme-button-accent-hover | --mds-color-theme-button-accent-hover | #0353a8 | |
| color-theme-button-accent-pressed | --mds-color-theme-button-accent-pressed | #063a75 |
color-theme-outline-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-primary-normal | --mds-color-theme-outline-primary-normal | #ffffff66 | |
| color-theme-outline-primary-disabled | --mds-color-theme-outline-primary-disabled | #ffffff33 |
color-theme-outline-theme
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-theme-normal | --mds-color-theme-outline-theme-normal | #64b4fa |
color-theme-outline-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-secondary-normal | --mds-color-theme-outline-secondary-normal | #ffffff33 |
color-theme-outline-input
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-input-normal | --mds-color-theme-outline-input-normal | #ffffff80 | |
| color-theme-outline-input-active | --mds-color-theme-outline-input-active | #ffffffe6 |
color-theme-outline-button
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-button-normal | --mds-color-theme-outline-button-normal | #ffffff80 |
color-theme-outline-join
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-join-normal | --mds-color-theme-outline-join-normal | #3cc29a |
color-theme-outline-cancel
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-cancel-normal | --mds-color-theme-outline-cancel-normal | #fc8b98 |
color-theme-outline-share
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-share-selected | --mds-color-theme-outline-share-selected | #27a17a | |
| color-theme-outline-share-active | --mds-color-theme-outline-share-active | #ec6400 | |
| color-theme-outline-share-inactive | --mds-color-theme-outline-share-inactive | #8f8f8f |
color-theme-outline-overlay
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-overlay-normal | --mds-color-theme-outline-overlay-normal | #adadad |
color-theme-outline-high-contrast
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-high-contrast-focus | --mds-color-theme-outline-high-contrast-focus | #ffffff |
color-theme-outline-label
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-label-cobalt | --mds-color-theme-outline-label-cobalt | #5ebff7 | |
| color-theme-outline-label-gold | --mds-color-theme-outline-label-gold | #d6b220 | |
| color-theme-outline-label-lime | --mds-color-theme-outline-label-lime | #93c437 | |
| color-theme-outline-label-mint | --mds-color-theme-outline-label-mint | #30c9b0 | |
| color-theme-outline-label-orange | --mds-color-theme-outline-label-orange | #fd884e | |
| color-theme-outline-label-pink | --mds-color-theme-outline-label-pink | #fc97aa | |
| color-theme-outline-label-purple | --mds-color-theme-outline-label-purple | #f294f1 | |
| color-theme-outline-label-slate | --mds-color-theme-outline-label-slate | #b0b4d9 | |
| color-theme-outline-label-violet | --mds-color-theme-outline-label-violet | #c7a5fa |
color-theme-outline-promotion
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-promotion-normal | --mds-color-theme-outline-promotion-normal | linear-gradient(46deg, #c233c4 0%, #d43b52 100%) |
color-theme-outline-gradient
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-gradient-active | --mds-color-theme-outline-gradient-active | linear-gradient(44deg, #3492eb 14.64%, #22c7d6 51.1%, #68debd 85.36%) |
color-theme-outline-warning
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-outline-warning-normal | --mds-color-theme-outline-warning-normal | #f2990a |
color-theme-control-active
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-control-active-normal | --mds-color-theme-control-active-normal | #64b4fa | |
| color-theme-control-active-hover | --mds-color-theme-control-active-hover | #3492eb | |
| color-theme-control-active-pressed | --mds-color-theme-control-active-pressed | #1170cf | |
| color-theme-control-active-active | --mds-color-theme-control-active-active | #1170cf | |
| color-theme-control-active-disabled | --mds-color-theme-control-active-disabled | #ffffff33 |
color-theme-control-indicator-inactive
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-control-indicator-inactive-normal | --mds-color-theme-control-indicator-inactive-normal | #8f8f8f |
color-theme-control-inactive
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-control-inactive-normal | --mds-color-theme-control-inactive-normal | #ffffff00 | |
| color-theme-control-inactive-hover | --mds-color-theme-control-inactive-hover | #ffffff4d | |
| color-theme-control-inactive-pressed | --mds-color-theme-control-inactive-pressed | #ffffff66 | |
| color-theme-control-inactive-disabled | --mds-color-theme-control-inactive-disabled | #ffffff33 |
color-theme-overlay-meetings
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-overlay-meetings-normal | --mds-color-theme-overlay-meetings-normal | #000000b3 |
color-theme-overlay-button-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-overlay-button-secondary-normal | --mds-color-theme-overlay-button-secondary-normal | #0f0f0f | |
| color-theme-overlay-button-secondary-hover | --mds-color-theme-overlay-button-secondary-hover | #262626 | |
| color-theme-overlay-button-secondary-pressed | --mds-color-theme-overlay-button-secondary-pressed | #3b3b3b |
color-theme-indicator
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-indicator-unstable | --mds-color-theme-indicator-unstable | #ec6400 | |
| color-theme-indicator-attention | --mds-color-theme-indicator-attention | #f55868 | |
| color-theme-indicator-stable | --mds-color-theme-indicator-stable | #27a17a | |
| color-theme-indicator-locked | --mds-color-theme-indicator-locked | #8f8f8f | |
| color-theme-indicator-caution | --mds-color-theme-indicator-caution | #cf7900 | |
| color-theme-indicator-secure | --mds-color-theme-indicator-secure | #3492eb |
color-theme-common-whiteboard-stickyNote
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-whiteboard-stickyNote-yellow | --mds-color-theme-common-whiteboard-sticky-note-yellow | #ffbe4f | |
| color-theme-common-whiteboard-stickyNote-red | --mds-color-theme-common-whiteboard-sticky-note-red | #fc8b98 | |
| color-theme-common-whiteboard-stickyNote-purple | --mds-color-theme-common-whiteboard-sticky-note-purple | #f294f1 | |
| color-theme-common-whiteboard-stickyNote-cyan | --mds-color-theme-common-whiteboard-sticky-note-cyan | #22c7d6 | |
| color-theme-common-whiteboard-stickyNote-mint | --mds-color-theme-common-whiteboard-sticky-note-mint | #30c9b0 |
color-theme-common-whiteboard-pen
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-whiteboard-pen-black | --mds-color-theme-common-whiteboard-pen-black | #0f0f0f | |
| color-theme-common-whiteboard-pen-red | --mds-color-theme-common-whiteboard-pen-red | #f55868 | |
| color-theme-common-whiteboard-pen-purple | --mds-color-theme-common-whiteboard-pen-purple | #c233c4 | |
| color-theme-common-whiteboard-pen-blue | --mds-color-theme-common-whiteboard-pen-blue | #64b4fa | |
| color-theme-common-whiteboard-pen-green | --mds-color-theme-common-whiteboard-pen-green | #3cc29a | |
| color-theme-common-whiteboard-pen-yellow | --mds-color-theme-common-whiteboard-pen-yellow | #f2990a | |
| color-theme-common-whiteboard-pen-white | --mds-color-theme-common-whiteboard-pen-white | #ffffff |
color-theme-common-text-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-text-primary-normal | --mds-color-theme-common-text-primary-normal | #fffffff2 | |
| color-theme-common-text-primary-disabled | --mds-color-theme-common-text-primary-disabled | #ffffff66 |
color-theme-common-text-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-text-secondary-normal | --mds-color-theme-common-text-secondary-normal | #ffffffb3 |
color-theme-common-text-success
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-text-success-normal | --mds-color-theme-common-text-success-normal | #3cc29a | |
| color-theme-common-text-success-hover | --mds-color-theme-common-text-success-hover | #9fedd8 |
color-theme-common-text-error
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-text-error-normal | --mds-color-theme-common-text-error-normal | #fc8b98 | |
| color-theme-common-text-error-hover | --mds-color-theme-common-text-error-hover | #ffd4da |
color-theme-common-text-warning
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-text-warning-normal | --mds-color-theme-common-text-warning-normal | #f2990a | |
| color-theme-common-text-warning-hover | --mds-color-theme-common-text-warning-hover | #ffda94 |
color-theme-common-inverted-text-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-inverted-text-secondary-normal | --mds-color-theme-common-inverted-text-secondary-normal | #00000099 |
color-theme-common-inverted-text-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-inverted-text-primary-normal | --mds-color-theme-common-inverted-text-primary-normal | #000000f2 |
color-theme-common-inverted-button-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-inverted-button-secondary-normal | --mds-color-theme-common-inverted-button-secondary-normal | #00000000 | |
| color-theme-common-inverted-button-secondary-hover | --mds-color-theme-common-inverted-button-secondary-hover | #00000012 | |
| color-theme-common-inverted-button-secondary-pressed | --mds-color-theme-common-inverted-button-secondary-pressed | #00000033 | |
| color-theme-common-inverted-button-secondary-disabled | --mds-color-theme-common-inverted-button-secondary-disabled | #00000000 |
color-theme-common-overlays-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-overlays-primary-normal | --mds-color-theme-common-overlays-primary-normal | #000000e6 |
color-theme-common-overlays-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-overlays-secondary-normal | --mds-color-theme-common-overlays-secondary-normal | #00000066 |
color-theme-common-overlays-meeting-normal
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-overlays-meeting-normal-0 | --mds-color-theme-common-overlays-meeting-normal-0 | #00000000 | |
| color-theme-common-overlays-meeting-normal-1 | --mds-color-theme-common-overlays-meeting-normal-1 | #0000004d | |
| color-theme-common-overlays-meeting-normal-2 | --mds-color-theme-common-overlays-meeting-normal-2 | #000000cc |
color-theme-common-button-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-button-primary-normal | --mds-color-theme-common-button-primary-normal | #fffffff2 | |
| color-theme-common-button-primary-hover | --mds-color-theme-common-button-primary-hover | #ffffffcc | |
| color-theme-common-button-primary-pressed | --mds-color-theme-common-button-primary-pressed | #ffffffb3 | |
| color-theme-common-button-primary-disabled | --mds-color-theme-common-button-primary-disabled | #ffffff33 |
color-theme-common-button-secondary-active
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-button-secondary-active-normal | --mds-color-theme-common-button-secondary-active-normal | #ffffff33 | |
| color-theme-common-button-secondary-active-hover | --mds-color-theme-common-button-secondary-active-hover | #ffffff4d | |
| color-theme-common-button-secondary-active-pressed | --mds-color-theme-common-button-secondary-active-pressed | #ffffff66 | |
| color-theme-common-button-secondary-active-disabled | --mds-color-theme-common-button-secondary-active-disabled | #ffffff1c |
color-theme-common-button-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-button-secondary-normal | --mds-color-theme-common-button-secondary-normal | #ffffff00 | |
| color-theme-common-button-secondary-hover | --mds-color-theme-common-button-secondary-hover | #ffffff12 | |
| color-theme-common-button-secondary-disabled | --mds-color-theme-common-button-secondary-disabled | #ffffff00 |
color-theme-common-button-join-animated-gradient
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-button-join-animated-gradient-normal | --mds-color-theme-common-button-join-animated-gradient-normal | linear-gradient(90deg, #30c9b0 0%, #64b4fa 51%, #30c9b0 100%) |
color-theme-common-button-promotion
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-button-promotion-normal | --mds-color-theme-common-button-promotion-normal | linear-gradient(45deg, #932099 0%, #a12a3a 100%) | |
| color-theme-common-button-promotion-hover | --mds-color-theme-common-button-promotion-hover | linear-gradient(45deg, #601e66 0%, #66262d 100%) | |
| color-theme-common-button-promotion-active | --mds-color-theme-common-button-promotion-active | linear-gradient(45deg, #3b1840 0%, #3b1e21 100%) |
color-theme-common-outline-button
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-outline-button-normal | --mds-color-theme-common-outline-button-normal | #ffffff4d |
color-theme-common-outline-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-outline-primary-normal | --mds-color-theme-common-outline-primary-normal | #ffffff66 | |
| color-theme-common-outline-primary-disabled | --mds-color-theme-common-outline-primary-disabled | #ffffff33 |
color-theme-common-outline-input
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-outline-input-normal | --mds-color-theme-common-outline-input-normal | #ffffff80 |
color-theme-common-outline-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-outline-secondary-normal | --mds-color-theme-common-outline-secondary-normal | #00000033 | |
| color-theme-common-outline-secondary-disabled | --mds-color-theme-common-outline-secondary-disabled | #00000033 |
color-theme-common-outline-warning
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-outline-warning-normal | --mds-color-theme-common-outline-warning-normal | #f2990a |
color-theme-common-control-share-content
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-control-share-content-selected | --mds-color-theme-common-control-share-content-selected | #3cc29a | |
| color-theme-common-control-share-content-active | --mds-color-theme-common-control-share-content-active | #c94403 | |
| color-theme-common-control-share-content-inactive | --mds-color-theme-common-control-share-content-inactive | #707070 |
color-theme-common-control-inactive
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-control-inactive-normal | --mds-color-theme-common-control-inactive-normal | #00000033 |
color-theme-common-background-alert-share
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-background-alert-share-normal | --mds-color-theme-common-background-alert-share-normal | #c94403 |
color-theme-common-background-solid
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-background-solid-dark | --mds-color-theme-common-background-solid-dark | #1a1a1a | |
| color-theme-common-background-solid-light | --mds-color-theme-common-background-solid-light | #ffffff |
color-theme-common-content
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-content-pdf | --mds-color-theme-common-content-pdf | #ee0507 | |
| color-theme-common-content-word | --mds-color-theme-common-content-word | #0078d6 | |
| color-theme-common-content-powerpoint | --mds-color-theme-common-content-powerpoint | #d93e17 | |
| color-theme-common-content-excel | --mds-color-theme-common-content-excel | #00893e | |
| color-theme-common-content-onenote | --mds-color-theme-common-content-onenote | #b839db | |
| color-theme-common-content-sheets | --mds-color-theme-common-content-sheets | #f4b400 | |
| color-theme-common-content-slides | --mds-color-theme-common-content-slides | #0f9d58 | |
| color-theme-common-content-keynote | --mds-color-theme-common-content-keynote | #029cfb | |
| color-theme-common-content-doc | --mds-color-theme-common-content-doc | #4285f4 |
color-theme-common-touchbar-background-blue
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-touchbar-background-blue-normal | --mds-color-theme-common-touchbar-background-blue-normal | #1170cf | |
| color-theme-common-touchbar-background-blue-pressed | --mds-color-theme-common-touchbar-background-blue-pressed | #063a75 |
color-theme-common-touchbar-background-pink
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-touchbar-background-pink-normal | --mds-color-theme-common-touchbar-background-pink-normal | #d43b52 | |
| color-theme-common-touchbar-background-pink-pressed | --mds-color-theme-common-touchbar-background-pink-pressed | #66262d |
color-theme-common-touchbar-background-mint
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-touchbar-background-mint-normal | --mds-color-theme-common-touchbar-background-mint-normal | #148579 | |
| color-theme-common-touchbar-background-mint-pressed | --mds-color-theme-common-touchbar-background-mint-pressed | #12423f |
color-theme-common-touchbar-background-purple
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-touchbar-background-purple-normal | --mds-color-theme-common-touchbar-background-purple-normal | #c233c4 | |
| color-theme-common-touchbar-background-purple-pressed | --mds-color-theme-common-touchbar-background-purple-pressed | #601e66 |
color-theme-common-touchbar-background-violet
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-touchbar-background-violet-normal | --mds-color-theme-common-touchbar-background-violet-normal | #875ae0 | |
| color-theme-common-touchbar-background-violet-pressed | --mds-color-theme-common-touchbar-background-violet-pressed | #432c78 |
color-theme-common-touchbar-background-orange
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-touchbar-background-orange-normal | --mds-color-theme-common-touchbar-background-orange-normal | #c94403 | |
| color-theme-common-touchbar-background-orange-pressed | --mds-color-theme-common-touchbar-background-orange-pressed | #682601 |
color-theme-common-touchbar-background-green
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-touchbar-background-green-normal | --mds-color-theme-common-touchbar-background-green-normal | #1d805f | |
| color-theme-common-touchbar-background-green-pressed | --mds-color-theme-common-touchbar-background-green-pressed | #134231 |
color-theme-common-touchbar-background-red
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-touchbar-background-red-normal | --mds-color-theme-common-touchbar-background-red-normal | #db1f2e | |
| color-theme-common-touchbar-background-red-pressed | --mds-color-theme-common-touchbar-background-red-pressed | #780d13 |
color-theme-common-touchbar-background
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-touchbar-background-transparent | --mds-color-theme-common-touchbar-background-transparent | #00000000 |
color-theme-common-touchbar-icon
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-common-touchbar-icon-attention | --mds-color-theme-common-touchbar-icon-attention | #fc8b98 | |
| color-theme-common-touchbar-icon-stable | --mds-color-theme-common-touchbar-icon-stable | #27a17a | |
| color-theme-common-touchbar-icon-secure | --mds-color-theme-common-touchbar-icon-secure | #64b4fa |
color-theme-scrollbar-button
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-scrollbar-button-normal | --mds-color-theme-scrollbar-button-normal | #ffffff66 | |
| color-theme-scrollbar-button-hover | --mds-color-theme-scrollbar-button-hover | #ffffff80 | |
| color-theme-scrollbar-button-pressed | --mds-color-theme-scrollbar-button-pressed | #ffffff99 |
color-theme-scrollbar-arrow-background
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-scrollbar-arrow-background-normal | --mds-color-theme-scrollbar-arrow-background-normal | #ffffff00 | |
| color-theme-scrollbar-arrow-background-hover | --mds-color-theme-scrollbar-arrow-background-hover | #ffffff33 | |
| color-theme-scrollbar-arrow-background-pressed | --mds-color-theme-scrollbar-arrow-background-pressed | #ffffff4d |
color-theme-scrollbar-arrow
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-scrollbar-arrow-normal | --mds-color-theme-scrollbar-arrow-normal | #ffffffb3 |
color-theme-scrollbar-background-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-scrollbar-background-secondary-ghost | --mds-color-theme-scrollbar-background-secondary-ghost | #ffffff00 | |
| color-theme-scrollbar-background-secondary-normal | --mds-color-theme-scrollbar-background-secondary-normal | #ffffff1c |
color-theme-illustrations-empty-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-illustrations-empty-primary-0 | --mds-color-theme-illustrations-empty-primary-0 | #93c437 | |
| color-theme-illustrations-empty-primary-1 | --mds-color-theme-illustrations-empty-primary-1 | #279be8 |
color-theme-illustrations-empty-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-illustrations-empty-secondary-0 | --mds-color-theme-illustrations-empty-secondary-0 | #279be8 | |
| color-theme-illustrations-empty-secondary-1 | --mds-color-theme-illustrations-empty-secondary-1 | #875ae0 |
color-theme-illustrations-onboarding-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-illustrations-onboarding-primary-0 | --mds-color-theme-illustrations-onboarding-primary-0 | #ffbe4f | |
| color-theme-illustrations-onboarding-primary-1 | --mds-color-theme-illustrations-onboarding-primary-1 | #93c437 |
color-theme-illustrations-onboarding-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-illustrations-onboarding-secondary-0 | --mds-color-theme-illustrations-onboarding-secondary-0 | #f55868 | |
| color-theme-illustrations-onboarding-secondary-1 | --mds-color-theme-illustrations-onboarding-secondary-1 | #875ae0 |
color-theme-illustrations-onboarding-tertiary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-illustrations-onboarding-tertiary-0 | --mds-color-theme-illustrations-onboarding-tertiary-0 | #ffbe4f | |
| color-theme-illustrations-onboarding-tertiary-1 | --mds-color-theme-illustrations-onboarding-tertiary-1 | #ec6400 |
color-theme-illustrations-onboarding-quartenary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-illustrations-onboarding-quartenary-0 | --mds-color-theme-illustrations-onboarding-quartenary-0 | #93c437 | |
| color-theme-illustrations-onboarding-quartenary-1 | --mds-color-theme-illustrations-onboarding-quartenary-1 | #279be8 |
color-theme-illustrations-onboarding-quinary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-illustrations-onboarding-quinary-0 | --mds-color-theme-illustrations-onboarding-quinary-0 | #279be8 | |
| color-theme-illustrations-onboarding-quinary-1 | --mds-color-theme-illustrations-onboarding-quinary-1 | #875ae0 |
color-theme-illustrations-success
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-illustrations-success-0 | --mds-color-theme-illustrations-success-0 | #3cc29a | |
| color-theme-illustrations-success-1 | --mds-color-theme-illustrations-success-1 | #93c437 |
color-theme-illustrations-error
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-illustrations-error-0 | --mds-color-theme-illustrations-error-0 | #f0677e | |
| color-theme-illustrations-error-1 | --mds-color-theme-illustrations-error-1 | #db1f2e |
color-theme-illustrations
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-illustrations-default | --mds-color-theme-illustrations-default | #ffffff |
color-theme-globaltint
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-globaltint-normal | --mds-color-theme-globaltint-normal | #3492eb | |
| color-theme-globaltint-selected | --mds-color-theme-globaltint-selected | #1170cf |
color-theme-groupedbackground-primary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-groupedbackground-primary-normal | --mds-color-theme-groupedbackground-primary-normal | #000000 |
color-theme-groupedbackground-secondary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-groupedbackground-secondary-normal | --mds-color-theme-groupedbackground-secondary-normal | #1a1a1a |
color-theme-groupedbackground-tertiary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-groupedbackground-tertiary-normal | --mds-color-theme-groupedbackground-tertiary-normal | #262626 |
color-theme-groupedbackground-quaternary
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-groupedbackground-quaternary-normal | --mds-color-theme-groupedbackground-quaternary-normal | #3b3b3b |
color-theme-gradientdivider-default
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-gradientdivider-default-normal | --mds-color-theme-gradientdivider-default-normal | linear-gradient(90deg, #ffffff00 0%, #ffffff33 22.4%, #ffffff33 72.4%, #ffffff00 100%) | |
| color-theme-gradientdivider-default-hover | --mds-color-theme-gradientdivider-default-hover | linear-gradient(90deg, #ffffff00 0%, #ffffff99 22.4%, #ffffff99 72.4%, #ffffff00 100%) |
color-theme-gradientdivider-error
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-gradientdivider-error-normal | --mds-color-theme-gradientdivider-error-normal | linear-gradient(90deg, #fc8b9800 0%, #fc8b9899 22.4%, #fc8b9899 76.04%, #fc8b9800 100%) | |
| color-theme-gradientdivider-error-hover | --mds-color-theme-gradientdivider-error-hover | linear-gradient(90deg, #fc8b9800 0%, #fc8b98e6 22.4%, #fc8b98e6 76.04%, #fc8b9800 100%) |
color-theme-gradientdivider-warning
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-gradientdivider-warning-normal | --mds-color-theme-gradientdivider-warning-normal | linear-gradient(90deg, #f2990a00 0%, #f2990a99 22.4%, #f2990a99 76.04%, #f2990a00 100%) | |
| color-theme-gradientdivider-warning-hover | --mds-color-theme-gradientdivider-warning-hover | linear-gradient(90deg, #f2990a00 0%, #f2990ae6 22.4%, #f2990ae6 76.04%, #f2990a00 100%) |
color-theme-gradientdivider-announce
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-gradientdivider-announce-normal | --mds-color-theme-gradientdivider-announce-normal | linear-gradient(90deg, #64b4fa00 0%, #64b4fa99 22.4%, #64b4fa99 76.04%, #64b4fa00 100%) | |
| color-theme-gradientdivider-announce-hover | --mds-color-theme-gradientdivider-announce-hover | linear-gradient(90deg, #64b4fa00 0%,#64b4faE6 22.4%, #64b4faE6 76.04%, #64b4fa00 100%) |
color-theme-gradientdivider-success
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-gradientdivider-success-normal | --mds-color-theme-gradientdivider-success-normal | linear-gradient(90deg, #3cc29a00 0%, #3cc29a99 22.4%, #3cc29a99 76.04%, #3cc29a00 100%) | |
| color-theme-gradientdivider-success-hover | --mds-color-theme-gradientdivider-success-hover | linear-gradient(90deg, #3cc29a00 0%,#3cc29aE6 22.4%, #3cc29aE6 76.04%, #3cc29a00 100%) |
color-theme-gradientdivider-orange
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-gradientdivider-orange-normal | --mds-color-theme-gradientdivider-orange-normal | linear-gradient(90deg, #fd884e00 0%, #fd884e99 22.4%, #fd884e99 76.04%, #fd884e00 100%) | |
| color-theme-gradientdivider-orange-hover | --mds-color-theme-gradientdivider-orange-hover | linear-gradient(90deg, #fd884e00 0%,#fd884eE6 22.4%, #fd884eE6 76.04%, #fd884e00 100%) |
color-theme-gradientdivider-purple
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-gradientdivider-purple-normal | --mds-color-theme-gradientdivider-purple-normal | linear-gradient(90deg, #f294f100 0%, #f294f199 22.4%, #f294f199 76.04%, #f294f100 100%) | |
| color-theme-gradientdivider-purple-hover | --mds-color-theme-gradientdivider-purple-hover | linear-gradient(90deg, #f294f100 0%, #f294f1E6 22.4%, #f294f1E6 76.04%, #f294f100 100%) |
color-theme-avatar
| Sample | Name | CSS Variable | Value |
|---|---|---|---|
| color-theme-avatar-default | --mds-color-theme-avatar-default | #545454 | |
| color-theme-avatar-hover | --mds-color-theme-avatar-hover | #ffffff12 | |
| color-theme-avatar-pressed | --mds-color-theme-avatar-pressed | #ffffff33 | |
| color-theme-avatar-cobalt | --mds-color-theme-avatar-cobalt | #08599c | |
| color-theme-avatar-cyan | --mds-color-theme-avatar-cyan | #066070 | |
| color-theme-avatar-gold | --mds-color-theme-avatar-gold | #735107 | |
| color-theme-avatar-lime | --mds-color-theme-avatar-lime | #416116 | |
| color-theme-avatar-mint | --mds-color-theme-avatar-mint | #12615a | |
| color-theme-avatar-orange | --mds-color-theme-avatar-orange | #9c3202 | |
| color-theme-avatar-pink | --mds-color-theme-avatar-pink | #a12a3a | |
| color-theme-avatar-purple | --mds-color-theme-avatar-purple | #932099 | |
| color-theme-avatar-slate | --mds-color-theme-avatar-slate | #535573 | |
| color-theme-avatar-violet | --mds-color-theme-avatar-violet | #643abd | |
| color-theme-avatar-yellow | --mds-color-theme-avatar-yellow | #7d4705 |