_style-guide.styl

$style-guide-bad-bg = lighten(desaturate($red, 50%), 80%)
$style-guide-bad-text = darken(desaturate($red, 80%), 20%)
$style-guide-good-bg = lighten(desaturate($green, 80%), 85%)
$style-guide-good-text = darken(desaturate($green, 80%), 10%)

$style-guide-priority-a-bg = $style-guide-bad-text
$style-guide-priority-a-color = white
$style-guide-priority-b-bg = $style-guide-bad-text
$style-guide-priority-b-color = white
$style-guide-priority-c-bg = steelblue
$style-guide-priority-c-color = white
$style-guide-priority-d-bg = $style-guide-bad-text
$style-guide-priority-d-color = white

.style-guide
  .style-example, details, .style-enforcement
    border-radius $radius
    margin: 1.6em 0
    padding: 1.6em
    h4
      margin-top: 0
    figure, p
      &:last-child
        margin-bottom: 0
        padding-bottom: 0
  .style-example
    &.example-bad
      background: $style-guide-bad-bg
      h4
        color: $style-guide-bad-text
    &.example-good
      background: $style-guide-good-bg
      h4
        color: $style-guide-good-text
  details, .style-enforcement
    background-color: #eee
  details
    display: block // Add the correct display in IE and Edge.
    position: relative
    &:not([open]) summary
      &::after
        content: "..."
      &:hover
        background: rgba(255, 255, 255, .3)
  summary
    cursor: pointer
    padding: 1.6em
    margin: -1.6em
    outline: none
    > h4
      display: inline-block
      margin: 0
  .style-enforcement
    table
      width: 100%
      background-color: $codebg
      border-radius: $radius
    th, td
      padding: .4em
      text-align: center
    th
      padding-bottom: .2em
    td
      padding-top: .2em
  .style-rule-tag
    background-color: $codebg
    border-radius: $radius
    font-size: .9em
    color: $style-guide-good-text
    font-weight: 600
    text-transform: uppercase
    padding: .1em .4em
  a > .style-rule-tag
    color: $green
  sup
    text-transform: uppercase
    font-size: .7em
    margin-left: 1em
    pointer-events: all
    position: absolute
  [data-p="a"]
    color: #6b2a2a
  [data-p="b"]
    color: #8c480a
  [data-p="c"]
    color: #2b5a99
  [data-p="d"]
    content: #3f536d