| @import '../common/styles/theme-functions'; |
| @import '../common/styles/typography-functions'; |
| |
| @mixin td-json-formatter-typography($config) { |
| .td-key { |
| font: { |
| family: td-font-family($config); |
| size: td-font-size($config, body-1); |
| } |
| } |
| } |
| |
| @mixin td-json-formatter-theme($theme) { |
| $primary: map-get($theme, primary); |
| $accent: map-get($theme, accent); |
| $warn: map-get($theme, warn); |
| $foreground: map-get($theme, foreground); |
| $background: map-get($theme, background); |
| .td-json-formatter-wrapper { |
| .function::after, |
| .date::after, |
| .td-object-name::after, |
| .td-array-length::after { |
| content: '\200E'; |
| } |
| .td-key { |
| &.td-key-node { |
| &:focus, |
| &:hover { |
| background-color: mat-color($background, hover); |
| } |
| .td-node-icon { |
| color: mat-color($foreground, secondary-text); |
| } |
| } |
| } |
| .key { |
| color: mat-color($primary); |
| } |
| .value { |
| .string { |
| color: mat-color($warn); |
| } |
| .number { |
| color: mat-color($accent); |
| } |
| .boolean { |
| color: mat-color($accent); |
| } |
| .null, |
| .undefined { |
| color: mat-color($foreground, disabled-text); |
| } |
| .function { |
| color: mat-color($primary); |
| } |
| .date { |
| color: mat-color($foreground, text); |
| } |
| } |
| } |
| } |