Темы
CDS поставляется с шестью темами: три бренда (cds, b2b, promo) × светлая и тёмная. Тема — это набор семантических цветовых токенов, из которых при старте приложения генерируются CSS-переменные --cds-color-*.
Подробнее о подключении и создании своих тем — в гайде Тематизация.
Цветовые токены тем
Values are shown for the luma brand — switch the brand in the site header to see other themes.
| Token | lumaLight | lumaDark |
|---|---|---|
--cds-color-surface-secondary | oklch(94.5% 0.007 208.78) | oklch(26.9% 0.012 270.96) |
--cds-color-surface-primary | oklch(100% 0 0) | oklch(23% 0.008 264.4) |
--cds-color-surface-overlay | oklch(37.4% 0.029 185.91) | oklch(28.4% 0.012 264.37) |
--cds-color-surface-inverse | oklch(28% 0.025 187.47) | oklch(89.9% 0.008 278.63) |
--cds-color-surface-elevated | oklch(100% 0 0) | oklch(26.9% 0.012 270.96) |
--cds-color-status-warning-surface | oklch(79.8% 0.164 82.71) | oklch(73.47% 0.117 86.95) |
--cds-color-status-warning-line | oklch(79.8% 0.164 82.71) | oklch(69.5% 0.1206 86.16) |
--cds-color-status-warning-fill-hover | oklch(68.2% 0.146 71.37 / 0.251) | oklch(53.06% 0.1084 83.17) |
--cds-color-status-warning-fill | oklch(96.1% 0.071 103.3) | oklch(40.6% 0.0837 79.45) |
--cds-color-status-warning-content | oklch(68.2% 0.146 71.47) | oklch(89.5% 0.047 86.46) |
--cds-color-status-success-surface | oklch(70.9% 0.208 145.6) | oklch(71.9% 0.14 141.96) |
--cds-color-status-success-line | oklch(70.9% 0.208 145.6) | oklch(68.08% 0.149 142) |
--cds-color-status-success-fill-hover | oklch(60.4% 0.176 147.38 / 0.251) | oklch(51.44% 0.152 143.36) |
--cds-color-status-success-fill | oklch(94.1% 0.05 146.07) | oklch(39.3% 0.1197 143.62) |
--cds-color-status-success-content | oklch(60.4% 0.176 147.35) | oklch(89.1% 0.051 139.82) |
--cds-color-status-progress-surface | oklch(69.2% 0.16 240.38) | oklch(73.5% 0.1464 245.37) |
--cds-color-status-progress-line | oklch(69.2% 0.16 240.38) | oklch(69.05% 0.1644 243.02) |
--cds-color-status-progress-fill-hover | oklch(61.9% 0.207 259.23 / 0.251) | oklch(52.84% 0.1242 241.61) |
--cds-color-status-progress-fill | oklch(93.6% 0.026 235.36) | oklch(40.8% 0.0935 240.32) |
--cds-color-status-progress-content | oklch(59.3% 0.151 245.37) | oklch(89.82% 0.05 253.9) |
--cds-color-status-info-surface | oklch(70.7% 0.032 262.49) | oklch(73.4% 0.014 266.67) |
--cds-color-status-info-line | oklch(70.7% 0.032 262.49) | oklch(69.5% 0.017 266.23) |
--cds-color-status-info-fill-hover | oklch(55.1% 0.027 264.33 / 0.251) | oklch(53.1% 0.022 265.85) |
--cds-color-status-info-fill | oklch(92.8% 0.007 268.54) | oklch(40.5% 0.014 264.4) |
--cds-color-status-info-content | oklch(55.1% 0.047 264.08) | oklch(89.9% 0.008 278.63) |
--cds-color-status-indication-surface | oklch(58.3% 0.239 28.48) | oklch(79.5% 0.118 27.6) |
--cds-color-status-indication-line | oklch(58.3% 0.239 28.48) | oklch(79.5% 0.118 27.6) |
--cds-color-status-indication-fill-hover | oklch(58.3% 0.238 28.48 / 0.251) | oklch(54.3% 0.154 25.99) |
--cds-color-status-indication-fill | oklch(93.6% 0.032 17.74) | oklch(41.5% 0.124 26.02) |
--cds-color-status-indication-content | oklch(50.9% 0.209 28.51) | oklch(90.1% 0.052 27.01) |
--cds-color-status-danger-surface | oklch(63.7% 0.221 35.48) | oklch(79.5% 0.118 27.6) |
--cds-color-status-danger-line | oklch(63.7% 0.221 35.48) | oklch(79.5% 0.118 27.6) |
--cds-color-status-danger-fill-hover | oklch(58.3% 0.238 28.48 / 0.251) | oklch(54.3% 0.154 25.99) |
--cds-color-status-danger-fill | oklch(92.9% 0.032 39.33) | oklch(41.5% 0.124 26.02) |
--cds-color-status-danger-content | oklch(59.3% 0.192 38.44) | oklch(90.1% 0.052 27.01) |
--cds-color-page-primary | oklch(96.7% 0.004 197.09) | oklch(20.5% 0.006 271.11) |
--cds-color-other-teal-surface | oklch(60.5% 0.107 184.17) | oklch(72.233% 0.12325 208.489) |
--cds-color-other-teal-line | oklch(60.5% 0.107 184.17) | oklch(68.13% 0.1172 208.66) |
--cds-color-other-teal-fill-hover | oklch(91.1% 0.096 180.11) | oklch(52.4% 0.0904 208.95) |
--cds-color-other-teal-fill | oklch(95.2% 0.051 181.07) | oklch(40.2% 0.0676 207.81) |
--cds-color-other-teal-content | oklch(51.5% 0.09 185.73) | oklch(94.1% 0.032 208.74) |
--cds-color-other-purple-surface | oklch(55.8% 0.288 302.3) | oklch(74.7% 0.131 297.82) |
--cds-color-other-purple-line | oklch(55.8% 0.288 302.3) | oklch(70.9% 0.144 298.98) |
--cds-color-other-purple-fill-hover | oklch(90% 0.062 307.2) | oklch(54.9% 0.15 303.23) |
--cds-color-other-purple-fill | oklch(94.6% 0.033 307.17) | oklch(42.2% 0.123 305.48) |
--cds-color-other-purple-content | oklch(50.6% 0.267 301.87) | oklch(94.8% 0.03 307.12) |
--cds-color-other-pink-surface | oklch(59.8% 0.242 1.37) | oklch(75.3% 0.145 336.52) |
--cds-color-other-pink-line | oklch(59.8% 0.242 1.37) | oklch(71.4% 0.16 336.9) |
--cds-color-other-pink-fill-hover | oklch(89.9% 0.061 343.45) | oklch(55.2% 0.169 336.63) |
--cds-color-other-pink-fill | oklch(94.8% 0.028 342.26) | oklch(42.4% 0.138 336.93) |
--cds-color-other-pink-content | oklch(53.2% 0.214 4.81) | oklch(94.8% 0.033 336.69) |
--cds-color-other-lime-surface | oklch(64.9% 0.184 133.28) | oklch(72.5% 0.13 120.48) |
--cds-color-other-lime-line | oklch(64.9% 0.184 133.28) | oklch(68.4% 0.1356 121.3) |
--cds-color-other-lime-fill-hover | oklch(93.7% 0.126 124.26) | oklch(52% 0.128 123.25) |
--cds-color-other-lime-fill | oklch(96.7% 0.067 122.08) | oklch(39.8% 0.098 123.33) |
--cds-color-other-lime-content | oklch(53.2% 0.149 132.39) | oklch(94.1% 0.029 113.26) |
--cds-color-other-lemon-surface | oklch(68.2% 0.146 71.47) | oklch(72.8% 0.125 110.7) |
--cds-color-other-lemon-line | oklch(68.2% 0.146 71.47) | oklch(68.7% 0.13 111.91) |
--cds-color-other-lemon-fill-hover | oklch(94.5% 0.129 101.4) | oklch(52.5% 0.118 113.99) |
--cds-color-other-lemon-fill | oklch(97.3% 0.071 103.29) | oklch(39.9% 0.0886 113.2) |
--cds-color-other-lemon-content | oklch(55.5% 0.127 62.52) | oklch(94.4% 0.028 106.92) |
--cds-color-other-indigo-surface | oklch(54% 0.251 277.08) | oklch(74.5% 0.132 276.05) |
--cds-color-other-indigo-line | oklch(54% 0.251 277.08) | oklch(70.5% 0.146 277.64) |
--cds-color-other-indigo-fill-hover | oklch(87% 0.064 273.31) | oklch(54.7% 0.15 280.67) |
--cds-color-other-indigo-fill | oklch(93% 0.033 272.79) | oklch(41.9% 0.122 278.61) |
--cds-color-other-indigo-content | oklch(50.5% 0.254 277.06) | oklch(94.6% 0.027 285.88) |
--cds-color-other-cyan-surface | oklch(61.4% 0.116 224.64) | oklch(71.743% 0.13137 177.512) |
--cds-color-other-cyan-line | oklch(61.4% 0.116 224.64) | oklch(67.8% 0.1233 178.21) |
--cds-color-other-cyan-fill-hover | oklch(91.8% 0.081 204.61) | oklch(51.9% 0.094 178.33) |
--cds-color-other-cyan-fill | oklch(95.6% 0.045 203.23) | oklch(39.6% 0.072 179.89) |
--cds-color-other-cyan-content | oklch(52.3% 0.099 225.32) | oklch(94% 0.033 177.74) |
--cds-color-other-chocolate-surface | oklch(55.2% 0.055 11.12) | oklch(73.9% 0.091 62.89) |
--cds-color-other-chocolate-line | oklch(55.2% 0.055 11.12) | oklch(70.1% 0.098 63.03) |
--cds-color-other-chocolate-fill-hover | oklch(92.8% 0.02 9.8) | oklch(53.6% 0.107 63.42) |
--cds-color-other-chocolate-fill | oklch(96.7% 0.008 7.29) | oklch(40.8% 0.095 60.07) |
--cds-color-other-chocolate-content | oklch(44.6% 0.06 10.67) | oklch(94.6% 0.0265 65.68) |
--cds-color-line-tertiary-hover | oklch(75.5% 0.014 208.76 / 0.502) | oklch(60% 0.022 267.16) |
--cds-color-line-tertiary | oklch(75.5% 0.014 208.76 / 0.2) | oklch(47.6% 0.018 257.24) |
--cds-color-line-selected-hover | oklch(57.4% 0.16 254.98) | oklch(78.6% 0.107 260.74) |
--cds-color-line-selected | oklch(67.8% 0.162 255.91) | oklch(69.7% 0.155 258.14) |
--cds-color-line-secondary-hover | oklch(75.5% 0.014 208.76 / 0.6) | oklch(69.5% 0.017 266.23) |
--cds-color-line-secondary | oklch(75.5% 0.014 208.76 / 0.302) | oklch(60% 0.022 267.16) |
--cds-color-line-primary-hover | oklch(75.5% 0.014 208.76 / 0.702) | oklch(78.1% 0.013 276.05) |
--cds-color-line-primary | oklch(75.5% 0.014 208.76 / 0.4) | oklch(69.5% 0.017 266.23) |
--cds-color-line-focus-outline | oklch(82% 0.088 261.18) | oklch(47.8% 0.161 257.53) |
--cds-color-line-focus | oklch(67.8% 0.162 255.91) | oklch(69.7% 0.155 258.14) |
--cds-color-line-elevated | oklch(100% 0 0 / 0) | oklch(63.1% 0.022 260.16 / 0.4) |
--cds-color-line-disable | oklch(55.2% 0.021 155.44 / 0.149) | oklch(53.1% 0.022 265.85) |
--cds-color-fill-selected-hover | oklch(57.4% 0.16 254.98) | oklch(78.6% 0.107 260.74) |
--cds-color-fill-selected | oklch(67.8% 0.162 255.91) | oklch(69.7% 0.155 258.14) |
--cds-color-fill-secondary-hover | oklch(86.9% 0.017 211.04 / 0.502) | oklch(47.6% 0.018 257.24) |
--cds-color-fill-secondary-active | oklch(86.9% 0.017 211.04 / 0.702) | oklch(53.1% 0.022 265.85) |
--cds-color-fill-secondary | oklch(86.9% 0.017 211.04 / 0.4) | oklch(40.5% 0.014 264.4) |
--cds-color-fill-primary-hover | oklch(93.2% 0.008 207.14 / 0.502) | oklch(40.5% 0.014 264.4) |
--cds-color-fill-primary-active | oklch(93.2% 0.008 207.14 / 0.651) | oklch(47.6% 0.018 257.24) |
--cds-color-fill-primary | oklch(100% 0 0 / 0.749) | oklch(28.4% 0.012 264.37) |
--cds-color-fill-elevated | oklch(100% 0 0) | oklch(60% 0.022 267.16) |
--cds-color-fill-disable | oklch(93.1% 0.009 205.89 / 0.549) | oklch(40.5% 0.014 264.4) |
--cds-color-state | oklch(82.4% 0.023 155.83) | oklch(100% 0 0) |
--cds-color-state-inverse | oklch(100% 0 0) | oklch(0% 0 0) |
--cds-color-state-selected | oklch(87.3% 0.019 155.77) | oklch(100% 0 0) |
--cds-color-state-disabled | oklch(91.6% 0.012 190.43) | oklch(40.5% 0.014 264.4) |
--cds-color-content-tertiary | oklch(44.5% 0.023 157.16 / 0.851) | oklch(78.1% 0.013 276.05) |
--cds-color-content-secondary | oklch(14.3% 0.019 158.66 / 0.749) | oklch(86.3% 0.008 260.73) |
--cds-color-content-primary | oklch(14.3% 0.019 158.66) | oklch(94.4% 0.004 286.32) |
--cds-color-content-placeholder | oklch(44.5% 0.023 157.16 / 0.349) | oklch(73.4% 0.014 266.67) |
--cds-color-content-on-dark | oklch(100% 0 0) | oklch(98.3% 0.004 286.33) |
--cds-color-content-link-visited | oklch(70.7% 0.022 188.99) | oklch(79.3% 0.105 295.06) |
--cds-color-content-link | oklch(74.8% 0.155 233.25) | oklch(78.6% 0.107 260.74) |
--cds-color-content-inverse | oklch(100% 0 0) | oklch(21.8% 0 0) |
--cds-color-content-disable | oklch(44.5% 0.023 157.16 / 0.349) | oklch(69.5% 0.017 266.23) |
--cds-color-brand-secondary-hover | oklch(37.4% 0.029 185.91) | oklch(41.2% 0.154 11.97) |
--cds-color-brand-secondary-border | oklch(70.7% 0.022 188.99 / 0.4) | oklch(45.9% 0.17 14.37) |
--cds-color-brand-secondary-active | oklch(44.7% 0.029 186.65) | oklch(45.9% 0.17 14.37) |
--cds-color-brand-secondary | oklch(20.8% 0.021 190.24) | oklch(35.3% 0.1305 12.39) |
--cds-color-brand-primary-hover | oklch(59.4% 0.213 19.55) | oklch(41.2% 0.154 11.97) |
--cds-color-brand-primary-content | oklch(55.3% 0.213 19.6) | oklch(91.94% 0.043 3.74) |
--cds-color-brand-primary-border | oklch(55.3% 0.213 19.6) | oklch(55.6% 0.2135 14.24) |
--cds-color-brand-primary-active | oklch(62.4% 0.213 19.77) | oklch(33.1% 0.1214 11.64) |
--cds-color-brand-primary | oklch(55.3% 0.213 19.6) | oklch(55.6% 0.2135 14.24) |