Конфігурація
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))
|
