Kolor produktuLink do sekcji Kolor produktu
Token --sk-tool-docs nadaje kolor blokowi akcentu znaku, obramowaniom, odcieniom i deseniom marki Skribly Docs. Musi osiągnąć 3:1 na każdej powierzchni w motywie dziennym i nocnym oraz 4,5:1 w wysokim kontraście, jak kontrolki i grafika; sprawdza to test/tokens.test.ts. Tekst nazwy produktu ma kolor tekstu, nie kolor produktu.
| Powierzchnia | Kolor | Kontrast | Wymagany | Wynik |
|---|---|---|---|---|
--sk-bg | #fffdf8 | 5,38:1 | 3,00:1 | Spełnia |
--sk-surface | #ffffff | 5,47:1 | 3,00:1 | Spełnia |
--sk-sunken | #faf6ee | 5,08:1 | 3,00:1 | Spełnia |
--sk-side | #f6f1e7 | 4,86:1 | 3,00:1 | Spełnia |
--sk-bar | #efe8da | 4,49:1 | 3,00:1 | Spełnia |
--sk-input | #ffffff | 5,47:1 | 3,00:1 | Spełnia |
--sk-hover | #f1eadb | 4,57:1 | 3,00:1 | Spełnia |
| Powierzchnia | Kolor | Kontrast | Wymagany | Wynik |
|---|---|---|---|---|
--sk-bg | #111318 | 9,98:1 | 3,00:1 | Spełnia |
--sk-surface | #16191f | 9,46:1 | 3,00:1 | Spełnia |
--sk-sunken | #0f1115 | 10,15:1 | 3,00:1 | Spełnia |
--sk-side | #0d0f13 | 10,30:1 | 3,00:1 | Spełnia |
--sk-bar | #0a0c0f | 10,52:1 | 3,00:1 | Spełnia |
--sk-input | #16191f | 9,46:1 | 3,00:1 | Spełnia |
--sk-hover | #1a1d23 | 9,07:1 | 3,00:1 | Spełnia |
| Powierzchnia | Kolor | Kontrast | Wymagany | Wynik |
|---|---|---|---|---|
--sk-bg | #000000 | 14,20:1 | 4,50:1 | Spełnia |
--sk-surface | #000000 | 14,20:1 | 4,50:1 | Spełnia |
--sk-sunken | #000000 | 14,20:1 | 4,50:1 | Spełnia |
--sk-side | #000000 | 14,20:1 | 4,50:1 | Spełnia |
--sk-bar | #000000 | 14,20:1 | 4,50:1 | Spełnia |
--sk-input | #000000 | 14,20:1 | 4,50:1 | Spełnia |
--sk-hover | #1a1a1a | 11,77:1 | 4,50:1 | Spełnia |
Kolory wspólneLink do sekcji Kolory wspólne
Interfejs każdego produktu używa tego samego akcentu, powierzchni i kolorów statusów. Tekst osiąga 4,5:1 na swojej powierzchni w motywie dziennym i nocnym oraz 7:1 w wysokim kontraście.
| Para | Kolor | Kontrast | Wymagany | Wynik |
|---|---|---|---|---|
--sk-fg / --sk-bg | #14171d | 17,66:1 | 4,50:1 | Spełnia |
--sk-muted / --sk-bg | #5e6573 | 5,76:1 | 4,50:1 | Spełnia |
--sk-accent-text / --sk-bg | #92400e | 6,97:1 | 4,50:1 | Spełnia |
--sk-danger / --sk-bg | #b42318 | 6,47:1 | 4,50:1 | Spełnia |
--sk-warn / --sk-bg | #a84207 | 5,99:1 | 4,50:1 | Spełnia |
--sk-ok / --sk-bg | #067647 | 5,60:1 | 4,50:1 | Spełnia |
--sk-info / --sk-bg | #1d4ed8 | 6,59:1 | 4,50:1 | Spełnia |
--sk-fg / --sk-surface | #14171d | 17,95:1 | 4,50:1 | Spełnia |
--sk-muted / --sk-surface | #5e6573 | 5,86:1 | 4,50:1 | Spełnia |
--sk-accent-text / --sk-surface | #92400e | 7,09:1 | 4,50:1 | Spełnia |
--sk-danger / --sk-surface | #b42318 | 6,57:1 | 4,50:1 | Spełnia |
--sk-warn / --sk-surface | #a84207 | 6,09:1 | 4,50:1 | Spełnia |
--sk-ok / --sk-surface | #067647 | 5,69:1 | 4,50:1 | Spełnia |
--sk-info / --sk-surface | #1d4ed8 | 6,70:1 | 4,50:1 | Spełnia |
| Para | Kolor | Kontrast | Wymagany | Wynik |
|---|---|---|---|---|
--sk-fg / --sk-bg | #ecedf0 | 15,87:1 | 4,50:1 | Spełnia |
--sk-muted / --sk-bg | #9aa1ad | 7,15:1 | 4,50:1 | Spełnia |
--sk-accent-text / --sk-bg | #f5b653 | 10,35:1 | 4,50:1 | Spełnia |
--sk-danger / --sk-bg | #f97066 | 6,67:1 | 4,50:1 | Spełnia |
--sk-warn / --sk-bg | #fdb022 | 10,10:1 | 4,50:1 | Spełnia |
--sk-ok / --sk-bg | #47cd89 | 9,17:1 | 4,50:1 | Spełnia |
--sk-info / --sk-bg | #7ca9ff | 7,94:1 | 4,50:1 | Spełnia |
--sk-fg / --sk-surface | #ecedf0 | 15,04:1 | 4,50:1 | Spełnia |
--sk-muted / --sk-surface | #9aa1ad | 6,77:1 | 4,50:1 | Spełnia |
--sk-accent-text / --sk-surface | #f5b653 | 9,81:1 | 4,50:1 | Spełnia |
--sk-danger / --sk-surface | #f97066 | 6,32:1 | 4,50:1 | Spełnia |
--sk-warn / --sk-surface | #fdb022 | 9,56:1 | 4,50:1 | Spełnia |
--sk-ok / --sk-surface | #47cd89 | 8,69:1 | 4,50:1 | Spełnia |
--sk-info / --sk-surface | #7ca9ff | 7,52:1 | 4,50:1 | Spełnia |
| Para | Kolor | Kontrast | Wymagany | Wynik |
|---|---|---|---|---|
--sk-fg / --sk-bg | #ffffff | 21,00:1 | 7,00:1 | Spełnia |
--sk-muted / --sk-bg | #e6e6e6 | 16,83:1 | 7,00:1 | Spełnia |
--sk-accent-text / --sk-bg | #ffd60a | 14,88:1 | 7,00:1 | Spełnia |
--sk-danger / --sk-bg | #ff8a8a | 9,25:1 | 7,00:1 | Spełnia |
--sk-warn / --sk-bg | #ffc247 | 13,06:1 | 7,00:1 | Spełnia |
--sk-ok / --sk-bg | #6fe3a8 | 13,23:1 | 7,00:1 | Spełnia |
--sk-info / --sk-bg | #a4c4ff | 11,92:1 | 7,00:1 | Spełnia |
--sk-fg / --sk-surface | #ffffff | 21,00:1 | 7,00:1 | Spełnia |
--sk-muted / --sk-surface | #e6e6e6 | 16,83:1 | 7,00:1 | Spełnia |
--sk-accent-text / --sk-surface | #ffd60a | 14,88:1 | 7,00:1 | Spełnia |
--sk-danger / --sk-surface | #ff8a8a | 9,25:1 | 7,00:1 | Spełnia |
--sk-warn / --sk-surface | #ffc247 | 13,06:1 | 7,00:1 | Spełnia |
--sk-ok / --sk-surface | #6fe3a8 | 13,23:1 | 7,00:1 | Spełnia |
--sk-info / --sk-surface | #a4c4ff | 11,92:1 | 7,00:1 | Spełnia |
PowierzchnieLink do sekcji Powierzchnie
| Token | Dzienny | Nocny | Wysoki kontrast |
|---|---|---|---|
--sk-bg | #fffdf8 | #111318 | #000000 |
--sk-surface | #ffffff | #16191f | #000000 |
--sk-sunken | #faf6ee | #0f1115 | #000000 |
--sk-side | #f6f1e7 | #0d0f13 | #000000 |
--sk-bar | #efe8da | #0a0c0f | #000000 |
--sk-input | #ffffff | #16191f | #000000 |
--sk-hover | #f1eadb | #1a1d23 | #1a1a1a |
--sk-accent | #b45309 | #f5b653 | #ffd60a |