Typography Tokens Not Complete
surface
| Token | Value | Preview (English) | Preview (Persian) |
|---|---|---|---|
--tap-sys-color-surface-primary | var(--tap-palette-white) | - | - |
--tap-sys-color-surface-secondary | var(--tap-palette-gray-50) | - | - |
--tap-sys-color-surface-tertiary | var(--tap-palette-gray-100) | - | - |
--tap-sys-color-surface-background-primary | var(--tap-palette-gray-50) | - | - |
--tap-sys-color-surface-background-secondary | var(--tap-palette-gray-100) | - | - |
--tap-sys-color-surface-disabled | var(--tap-palette-gray-50) | - | - |
--tap-sys-color-surface-inverse-primary | var(--tap-palette-black) | - | - |
--tap-sys-color-surface-inverse-secondary | var(--tap-palette-gray-700) | - | - |
--tap-sys-color-surface-accent | var(--tap-palette-blue-400) | - | - |
--tap-sys-color-surface-negative | var(--tap-palette-red-400) | - | - |
--tap-sys-color-surface-warning | var(--tap-palette-yellow-400) | - | - |
--tap-sys-color-surface-positive | var(--tap-palette-green-400) | - | - |
--tap-sys-color-surface-accent-light | var(--tap-palette-blue-50) | - | - |
--tap-sys-color-surface-negative-light | var(--tap-palette-red-50) | - | - |
--tap-sys-color-surface-warning-light | var(--tap-palette-yellow-50) | - | - |
--tap-sys-color-surface-positive-light | var(--tap-palette-green-50) | - | - |
--tap-sys-color-surface-overlay-dark | #0000004d | - | - |
--tap-sys-color-surface-overlay-light | #0000001f | - | - |
--tap-sys-color-surface-black | var(--tap-palette-black) | - | - |
--tap-sys-color-surface-white | var(--tap-palette-white) | - | - |
content
| Token | Value | Preview (English) | Preview (Persian) |
|---|---|---|---|
--tap-sys-color-content-primary | var(--tap-palette-black) | - | - |
--tap-sys-color-content-secondary | var(--tap-palette-gray-600) | - | - |
--tap-sys-color-content-tertiary | var(--tap-palette-gray-500) | - | - |
--tap-sys-color-content-disabled | var(--tap-palette-gray-400) | - | - |
--tap-sys-color-content-on-inverse | var(--tap-palette-white) | - | - |
--tap-sys-color-content-accent | var(--tap-palette-blue-400) | - | - |
--tap-sys-color-content-negative | var(--tap-palette-red-400) | - | - |
--tap-sys-color-content-warning | var(--tap-palette-yellow-500) | - | - |
--tap-sys-color-content-positive | var(--tap-palette-green-400) | - | - |
--tap-sys-color-content-on-brand | var(--tap-palette-white) | - | - |
--tap-sys-color-content-on-accent | var(--tap-palette-white) | - | - |
--tap-sys-color-content-on-negative | var(--tap-palette-white) | - | - |
--tap-sys-color-content-on-warning | var(--tap-palette-black) | - | - |
--tap-sys-color-content-on-postive | var(--tap-palette-white) | - | - |
border
| Token | Value | Preview (English) | Preview (Persian) |
|---|---|---|---|
--tap-sys-color-border-primary | var(--tap-palette-gray-200) | - | - |
--tap-sys-color-border-inverse-primary | var(--tap-palette-gray-700) | - | - |
--tap-sys-color-border-selected | var(--tap-palette-gray-700) | - | - |
--tap-sys-color-border-focus | var(--tap-palette-gray-700) | - | - |
--tap-sys-color-border-accent | var(--tap-palette-blue-200) | - | - |
--tap-sys-color-border-negative | var(--tap-palette-red-200) | - | - |
--tap-sys-color-border-postive | var(--tap-palette-green-200) | - | - |
--tap-sys-color-border-warning | var(--tap-palette-yellow-200) | - | - |
brand
| Token | Value | Preview (English) | Preview (Persian) |
|---|---|---|---|
--tap-sys-color-brand | var(--tap-palette-orange-400) | - | - |
gradient
| Token | Value | Preview (English) | Preview (Persian) |
|---|---|---|---|
--tap-sys-color-gradient-brand | linear-gradient( | - | - |