add colors to language bar chart

b517d8290796b45d05de989e438508efe03be324

Tucker McKnight <tmcknight@instructure.com> | Sun Mar 08 2026

add colors to language bar chart
new-commits-page.html:10
Before
9
10
11


12
13
    <div class="container commits-page">
      <div class="row m-2">
        <div class="col">
⁣
⁣
          <div class="row commit">
            <div class="col">
              <div class="row">
After
9
10
11
12
13
14
15
    <div class="container commits-page">
      <div class="row m-2">
        <div class="col">

          <!-- A COMMIT -->
          <div class="row commit">
            <div class="col">
              <div class="row">
new-commits-page.html:54
Before
After
scss/design-board.scss:16
Before
15
16
17
18

19
$purple: #B673FA;
$magenta: #E273FA;
$teal: #80F8D4;

⁣
$body-bg: $gray;
$primary: $blue;
After
15
16
17
18
19
20
$purple: #B673FA;
$magenta: #E273FA;
$teal: #80F8D4;
$new-magenta: #FF549B;

$body-bg: $gray;
$primary: $blue;
scss/design-board.scss:142
Before
141
142
143

144
145
146
147
148
149

150

  .lang-diff {
    height: 1.1rem;
⁣
  }

  .language-names {
    font-family: monospace;
    text-align: right;

⁣
    div {
      height: 1.1rem;
After
141
142
143
144
145
146
147
148
149
150
151
152

  .lang-diff {
    height: 1.1rem;
    font-size: 0.75rem;
  }

  .language-names {
    font-family: monospace;
    text-align: right;
    font-size: 0.85rem;

    div {
      height: 1.1rem;
scss/design-board.scss:154
Before
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

180
181
182
183
184
185
186
187
188
189
  }

  .plus-1 {
    background-color: blue;
    width: 80%;
  }
  .minus-1 {
    background-color: navy;
    width: 20%;
  }

  .plus-2 {
    background-color: red;
    width: 50%;
  }
  .minus-2 {
    background-color: darkred;
    width: 30%;
  }

  .plus-3 {
    background-color: green;
    width: 10%;
  }
  .minus-3 {
    background-color: darkgreen;
    width: 5%;
⁣
  }

  .plus-4 {
    background-color: lightgray;
    width: 50%;
  }
  .minus-4 {
    background-color: gray;
    width: 35%;
  }
}
After
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
  }

  .plus-1 {
    background-color: $teal;
    width: 80%;
  }
  .minus-1 {
    background-color: color.adjust($teal, $lightness: -25%);
    width: 20%;
  }

  .plus-2 {
    background-color: $new-magenta;
    width: 50%;
  }
  .minus-2 {
    background-color: color.adjust($new-magenta, $lightness: -25%);
    width: 30%;
  }

  .plus-3 {
    background-color: $purple;
    width: 10%;
  }
  .minus-3 {
    background-color: color.adjust($purple, $lightness: -25%);
    width: 5%;
    text-shadow: 0 0 3px color.adjust($purple, $lightness: -25%), 0 0 2px color.adjust($purple, $lightness: -25%);
  }

  .plus-4 {
    background-color: $lightblue;
    width: 50%;
  }
  .minus-4 {
    background-color: color.adjust($lightblue, $lightness: -25%);
    width: 35%;
  }
}