design-system-toolkit/packages/site/styles/app/_colour-swatch.scss at a3c22fb2c60793b2b865de7d11854d3688abb06a · ourfuturehealth/design-system-toolkit · 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
/* ==========================================================================
   #COLOUR SWATCH
   ========================================================================== */

/**
 * Custom table for the colour palette
 */

.app-colour-list {
  margin-top: 0;

  th,
  td {
    @include ofh-typography-responsive('paragraph-small');

    border: 0;
  }

  .app-colour-list__column--name code,
  .app-colour-list__column--source code,
  .app-colour-list__column--colour code {
    white-space: nowrap;
  }
}

.app-colour-list__swatch {
  background-color: $ofh-color-greyscale-6;
  border: 1px solid transparent;
  border-radius: 50%;
  display: inline-block;
  height: ofh-spacing(6);
  margin-right: ofh-spacing(2);
  vertical-align: middle;
  width: ofh-spacing(6);

  @include mq($until: tablet) {
    height: ofh-spacing(5);
    left: 0;
    position: absolute;
    width: ofh-spacing(5);
  }
}

.app-colour-list__column {
  vertical-align: middle;

  @include mq($until: tablet) {
    display: block;
    position: relative;
  }
}

.app-colour-list__row {
  .app-colour-list__column {
    @include ofh-responsive-padding(3);

    // Use a dedicated row tint so light swatches (for example #e8e8e8 and #ffffff)
    // remain distinguishable against the documentation surface.
    background-color: $ofh-color-background-secondary-grey;
  }

  .app-colour-list__column--colour code {
    background-color: transparent;
  }
}

.app-colour-list__column--name {
  font-weight: normal;
}

.app-colour-list__swatch--border {
  border: 1px solid $ofh-color-border-primary;
}