Конфигурация
Trace CSS оформляет нативный HTML с помощью общего набора пользовательских свойств CSS. Чтобы изменить весь интерфейс, начните с токенов палитры и типографики. Токены компонентов позволяют настроить цвета, отступы и форму отдельных элементов.
#Палитра по умолчанию
Trace выводит по четыре оттенка для основного, дополнительного и нейтрального цветов. Формулы меняют светлоту в OKLCH, сохраняя цветовой тон и насыщенность. При смене базового цвета его оттенки обновляются автоматически.
Основной
- Самый светлый
- Светлый
- Базовый
- Тёмный
- Самый тёмный
Дополнительный
- Самый светлый
- Светлый
- Базовый
- Тёмный
- Самый тёмный
Нейтральный
- Самый светлый
- Светлый
- Базовый
- Тёмный
- Самый тёмный
Светлая тема
--trace-bg-light
--trace-text-light
Тёмная тема
--trace-bg-dark
--trace-text-dark
Токены --trace-bg и --trace-text выбирают цвета фона и текста через light-dark(). Примеры с data-mode см. в статье Цветовые схемы.
#Переопределение токенов
Подключите свои стили после Trace CSS и задайте значения на :root. Если используете сборку с ограниченной областью, задайте значения на контейнере .trace-css.
:root {
--trace-primary: oklch(48% 0.15 255deg);
--trace-secondary: oklch(88% 0.14 90deg);
--trace-radius-control: 0.5rem;
--trace-font-family-sans: system-ui, sans-serif;
}
button.checkout {
--trace-button-padding-inline: 1.5rem;
}
В обоих примерах используются одинаковые элементы управления. В настроенном варианте применены основной цвет, дополнительный цвет и радиус из примера выше.
#Справочник CSS-переменных
Здесь перечислены публичные свойства --trace-* из установленной полной сборки. Значения могут различаться в зависимости от селектора, варианта, состояния или размера области просмотра.
#Палитра и темы
| Переменная | Объявленные значения |
|---|
--trace-bg |
light-dark(var(--trace-bg-light), var(--trace-bg-dark))
|
--trace-bg-dark |
oklch(19.7902% .0189863 235.357)
|
--trace-bg-light |
oklch(96.2441% .00418752 236.497)
|
--trace-danger |
oklch(52.3358% .198564 31.9584)
|
--trace-neutral |
oklch(50% 0 0)
|
--trace-neutral-dark |
oklch(from var(--trace-neutral) calc(l - .25) c h)
|
--trace-neutral-darker |
oklch(from var(--trace-neutral) calc(l - .5) c h)
|
--trace-neutral-light |
oklch(from var(--trace-neutral) calc(l + .25) c h)
|
--trace-neutral-lighter |
oklch(from var(--trace-neutral) calc(l + .5) c h)
|
--trace-primary |
oklch(37.662% .0682014 228.503)
|
--trace-primary-dark |
oklch(from var(--trace-primary) calc(l * .7) c h)
|
--trace-primary-darker |
oklch(from var(--trace-primary) calc(l * .4) c h)
|
--trace-primary-light |
oklch(from var(--trace-primary) calc(l + (1 - l) * .3) c h)
|
--trace-primary-lighter |
oklch(from var(--trace-primary) calc(l + (1 - l) * .6) c h)
|
--trace-secondary |
oklch(87.9592% .170365 81.3235)
|
--trace-secondary-dark |
oklch(from var(--trace-secondary) calc(l * .7) c h)
|
--trace-secondary-darker |
oklch(from var(--trace-secondary) calc(l * .4) c h)
|
--trace-secondary-light |
oklch(from var(--trace-secondary) calc(l + (1 - l) * .3) c h)
|
--trace-secondary-lighter |
oklch(from var(--trace-secondary) calc(l + (1 - l) * .6) c h)
|
--trace-success |
oklch(69.13% .14353 158.708)
|
--trace-text |
light-dark(var(--trace-text-light), var(--trace-text-dark))
|
--trace-text-dark |
oklch(92.494% 0 0)
|
--trace-text-light |
oklch(9.44872% .0654731 264.052)
|
#Типографика
| Переменная | Объявленные значения |
|---|
--trace-font-body |
var(--trace-font-family-sans)
|
--trace-font-code |
var(--trace-font-family-mono)
|
--trace-font-family-emoji |
"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"
|
--trace-font-family-mono |
ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace, var(--trace-font-family-emoji)
|
--trace-font-family-sans |
system-ui, sans-serif, var(--trace-font-family-emoji)
|
--trace-font-heading |
var(--trace-font-body)
|
--trace-font-size-h1 |
3rem
2rem
|
--trace-font-size-h2 |
2.5rem
1.75rem
|
--trace-font-size-h3 |
2rem
1.5rem
|
--trace-font-size-h4 |
1.5rem
1.25rem
|
--trace-font-size-h5 |
1.25rem
1.125rem
|
--trace-font-size-h6 |
1rem
|
--trace-heading-line-height |
1.25
|
--trace-heading-margin-block-end |
1rem
|
--trace-paragraph-margin-block-end |
1rem
|
--trace-typography-border |
light-dark(var(--trace-neutral-light), var(--trace-neutral-dark))
|
--trace-typography-line-height |
1.6
|
#Общие стили элементов управления
| Переменная | Объявленные значения |
|---|
--trace-control-bg |
light-dark(var(--trace-neutral-lighter), var(--trace-bg-dark))
|
--trace-control-padding-block |
.625rem
|
--trace-control-padding-inline |
1rem
|
--trace-radius-control |
var(--trace-radius-sm)
|
--trace-radius-full |
50%
|
--trace-radius-none |
0
|
--trace-radius-sm |
4px
|
--trace-shadow |
5px 5px 0 0 var(--trace-shadow-color)
|
--trace-shadow-color |
light-dark(oklch(from var(--trace-neutral-darker) l c h / 25%), oklch(from var(--trace-neutral-lighter) l c h / 25%))
|
| Переменная | Объявленные значения |
|---|
--trace-button-bg |
transparent
|
--trace-button-border |
var(--trace-button-outline-color)
|
--trace-button-box-shadow |
var(--trace-shadow)
|
--trace-button-color |
light-dark(var(--trace-primary-darker), var(--trace-secondary))
var(--trace-primary-light)
var(--trace-danger)
|
--trace-button-contrast |
light-dark(var(--trace-secondary), var(--trace-primary-dark))
var(--trace-secondary-lighter)
var(--trace-neutral-lighter)
|
--trace-button-font-size |
1rem
.875rem
1.125rem
|
--trace-button-icon-gap |
.5em
|
--trace-button-line-height |
1.5rem
1.25rem
1.75rem
|
--trace-button-loader-color |
var(--trace-button-contrast)
|
--trace-button-outline-color |
var(--trace-button-color)
var(--trace-input-focus)
|
--trace-button-padding-block |
.375rem
.25rem
.5rem
|
--trace-button-padding-inline |
.75rem
.5rem
1rem
|
--trace-button-radius |
var(--trace-radius-control)
|
--trace-button-text |
var(--trace-button-outline-color)
var(--trace-button-contrast)
|
#Поля ввода
| Переменная | Объявленные значения |
|---|
--trace-input-border |
light-dark(var(--trace-primary), var(--trace-secondary))
|
--trace-input-error |
var(--trace-danger)
|
--trace-input-focus |
light-dark(var(--trace-primary-light), var(--trace-secondary-light))
|
--trace-input-font-size |
1rem
.875rem
1.125rem
|
--trace-input-icon-size |
1.25rem
1rem
1.5rem
|
--trace-input-line-height |
1.5rem
1.25rem
1.75rem
|
--trace-input-padding-block |
.375rem
.25rem
.5rem
|
--trace-input-padding-inline |
.625rem
.5rem
.75rem
|
--trace-input-placeholder |
light-dark(var(--trace-neutral), var(--trace-neutral-light))
|
--trace-input-radius |
var(--trace-radius-control)
|
--trace-input-shadow |
var(--trace-shadow)
|
--trace-input-text |
var(--trace-text)
|
#Многострочные поля
| Переменная | Объявленные значения |
|---|
--trace-textarea-border |
light-dark(var(--trace-primary), var(--trace-secondary))
|
--trace-textarea-error |
var(--trace-danger)
|
--trace-textarea-focus |
light-dark(var(--trace-primary-light), var(--trace-secondary-light))
|
--trace-textarea-font-size |
1rem
.875rem
1.125rem
|
--trace-textarea-line-height |
1.5rem
1.25rem
1.75rem
|
--trace-textarea-padding-block |
.375rem
.25rem
.5rem
|
--trace-textarea-padding-inline |
.625rem
.5rem
.75rem
|
--trace-textarea-placeholder |
light-dark(var(--trace-neutral), var(--trace-neutral-light))
|
--trace-textarea-radius |
var(--trace-radius-control)
|
--trace-textarea-shadow |
var(--trace-shadow)
|
--trace-textarea-text |
var(--trace-text)
|
| Переменная | Объявленные значения |
|---|
--trace-select-arrow |
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646b79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
|
--trace-select-arrow-offset |
var(--trace-select-padding-inline)
|
--trace-select-arrow-size |
1.25em
|
--trace-select-border |
light-dark(var(--trace-primary), var(--trace-secondary))
|
--trace-select-error |
var(--trace-danger)
|
--trace-select-focus |
light-dark(var(--trace-primary-light), var(--trace-secondary-light))
|
--trace-select-font-size |
1rem
.875rem
1.125rem
|
--trace-select-line-height |
1.5rem
1.25rem
1.75rem
|
--trace-select-padding-block |
.375rem
.25rem
.5rem
|
--trace-select-padding-inline |
.625rem
.5rem
.75rem
|
--trace-select-radius |
var(--trace-radius-control)
|
--trace-select-shadow |
var(--trace-shadow)
|
--trace-select-text |
var(--trace-text)
|
#Чекбоксы
| Переменная | Объявленные значения |
|---|
--trace-checkbox-color |
light-dark(var(--trace-primary), var(--trace-secondary))
var(--trace-danger)
|
--trace-checkbox-mark |
light-dark(var(--trace-neutral-lighter), var(--trace-primary-dark))
var(--trace-neutral-lighter)
|
--trace-checkbox-radius |
var(--trace-radius-control)
|
--trace-checkbox-size |
1.25rem
1rem
1.5rem
|
| Переменная | Объявленные значения |
|---|
--trace-radio-color |
light-dark(var(--trace-primary), var(--trace-secondary))
var(--trace-danger)
|
--trace-radio-size |
1.25rem
1rem
1.5rem
|
#Переключатели
| Переменная | Объявленные значения |
|---|
--trace-switch-color |
light-dark(var(--trace-primary), var(--trace-secondary))
var(--trace-danger)
|
--trace-switch-dot-active-size |
.875rem
.625rem
1.125rem
|
--trace-switch-dot-size |
.75rem
.5rem
1rem
|
--trace-switch-height |
1.25rem
1rem
1.5rem
|
--trace-switch-icon-size |
1rem
|
--trace-switch-padding |
.125rem
|
--trace-switch-radius |
var(--trace-radius-sm)
|
--trace-switch-width |
2.125rem
1.75rem
2.625rem
|
#Ползунки
| Переменная | Объявленные значения |
|---|
--trace-range-active-scale |
1.15
|
--trace-range-color |
light-dark(var(--trace-primary), var(--trace-secondary))
var(--trace-range-error)
ButtonText
|
--trace-range-duration |
.15s
|
--trace-range-error |
var(--trace-danger)
|
--trace-range-height |
2rem
1.75rem
2.5rem
|
--trace-range-thumb-size |
1.25rem
1rem
1.5rem
|
--trace-range-track-color |
light-dark(var(--trace-primary-light), var(--trace-secondary-dark))
color-mix(in srgb, var(--trace-range-error), transparent 70%)
GrayText
|
--trace-range-track-size |
.375rem
.25rem
.5rem
|
| Переменная | Объявленные значения |
|---|
--trace-file-button-bg |
var(--trace-primary-light)
|
--trace-file-button-text |
var(--trace-secondary-lighter)
|
#Таблицы
| Переменная | Объявленные значения |
|---|
--trace-table-accent |
light-dark(var(--trace-primary), var(--trace-secondary))
|
--trace-table-border |
color-mix(in oklch, var(--trace-table-accent), transparent 78%)
|
--trace-table-font-size |
1rem
.875rem
|
--trace-table-footer-bg |
transparent
|
--trace-table-header-bg |
transparent
|
--trace-table-header-text |
var(--trace-table-accent)
|
--trace-table-hover-bg |
light-dark(color-mix(in oklch, var(--trace-primary), transparent 93%), color-mix(in oklch, var(--trace-secondary), transparent 90%))
|
--trace-table-line-height |
1.5
|
--trace-table-padding-block |
.75rem
.375rem
|
--trace-table-padding-inline |
.75rem
.625rem
|
--trace-table-radius |
0
|
--trace-table-row-heading |
var(--trace-table-text)
|
--trace-table-stripe-bg |
color-mix(in oklch, var(--trace-table-accent), transparent 97%)
|
--trace-table-text |
var(--trace-text)
|
#Ссылки
| Переменная | Объявленные значения |
|---|
--trace-link-active |
light-dark(var(--trace-primary-dark), var(--trace-secondary-dark))
|
--trace-link-color |
light-dark(var(--trace-primary), var(--trace-secondary))
|
--trace-link-focus |
var(--trace-link-color)
|
--trace-link-hover |
light-dark(var(--trace-primary-light), var(--trace-secondary-light))
|
--trace-link-underline-offset |
.2em
|
--trace-link-underline-thickness |
.08em
|
--trace-link-visited |
var(--trace-link-color)
|
#Элементы контента
| Переменная | Объявленные значения |
|---|
--trace-blockquote-bg |
light-dark(color-mix(in oklch, var(--trace-bg-light), var(--trace-neutral-darker) 5%), color-mix(in oklch, var(--trace-bg-dark), var(--trace-neutral-lighter) 8%))
|
--trace-blockquote-border |
light-dark(var(--trace-primary), var(--trace-secondary))
|
--trace-blockquote-margin-block |
1.5rem
|
--trace-blockquote-padding-block |
.75rem
|
--trace-blockquote-padding-inline |
1.25rem
|
--trace-divider-margin-block |
2rem
|
--trace-kbd-bg |
light-dark(var(--trace-neutral-dark), var(--trace-neutral-lighter))
|
--trace-kbd-border |
light-dark(var(--trace-neutral-darker), var(--trace-neutral-light))
|
--trace-kbd-shadow |
1px 1px 0 0 oklch(from var(--trace-neutral-darker) l c h / 25%)
|
--trace-kbd-text |
light-dark(var(--trace-text-dark), var(--trace-text-light))
|
--trace-mark-bg |
var(--trace-secondary-lighter)
|
--trace-mark-text |
var(--trace-neutral-darker)
|
#Иконки
| Переменная | Объявленные значения |
|---|
--trace-icon-size |
var(--trace-button-line-height)
var(--trace-switch-icon-size, .75rem)
var(--trace-input-icon-size)
1.25rem
|
#Другие переменные
| Переменная | Объявленные значения |
|---|
--trace-code-bg |
light-dark(oklch(from var(--trace-neutral-darker) l c h / 4%), oklch(from var(--trace-neutral-lighter) l c h / 7%))
|
--trace-code-border |
light-dark(var(--trace-typography-border), var(--trace-neutral-light))
|
