vanilla-framework/scss/_base_syntax-highlighting.scss at main · Ninfa-Jeon/vanilla-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
@import 'settings';

@mixin vf-b-syntax-highlighting {
  /*
    http://prismjs.com/

    prism.js theme based by theme by Edward Horsford for GOV.UK
    https://github.com/alphagov/govuk_elements/blob/master/assets/sass/vendor/prism.scss
  */

  .token {
    &.comment,
    &.prolog,
    &.doctype,
    &.cdata {
      color: $colors--theme--text-muted;
    }

    &.punctuation {
      color: $colors--theme--text-default;
    }

    &.namespace {
      opacity: 0.7;
    }

    &.property,
    &.tag,
    &.boolean,
    &.number,
    &.constant,
    &.symbol,
    &.deleted {
      color: #77216f; // √ brand light aubergine
    }

    &.selector,
    &.attr-name,
    &.string,
    &.char,
    &.builtin,
    &.inserted {
      color: #0e811f; // positive button bg color nudged to meet AA contrast req on #f7f7f7
    }

    .operator,
    .entity,
    .url,
    .language-css &.string,
    .style &.string {
      color: #a86500; // $color-caution darkened to meet AA
    }

    &.atrule,
    &.attr-value,
    &.keyword {
      color: #06c; // $color-link
    }

    &.function,
    &.class-name {
      color: #c7162b; // color-negative
    }

    &.regex,
    &.important,
    &.variable {
      color: #dc3023; // secondary palette nudged to AA
    }

    &.important,
    &.bold {
      font-weight: $font-weight-bold;
    }
    &.italic {
      font-style: italic;
    }

    &.entity {
      cursor: help;
    }
  }
}