styleguide.scss

@import '~@puppet/sass-variables/index';

/********** Homepage **********/

#puppet-design-system {
  &::before {
    background-image: url('./public/hero.svg');
    background-position: 0 -60px;
    background-repeat: no-repeat;
    content: '';
    display: block;
    height: 440px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }

  + h2 {
    margin-bottom: 30px;
    min-height: 140px;
  }
}

/********** UX Design Principles **********/

#do {
  color: $puppet-g400;

  + ul > li::before {
    color: $puppet-g400;
    content: '✓';
  }
}

#dont {
  color: $puppet-r400;

  + ul > li::before {
    color: $puppet-r400;
    content: 'x';
  }
}

.pds-width-50-percent {
  width: 50%;
}

.pds-gutter {
  &:not(:last-child) {
    margin-right: $puppet-common-spacing-base * 4;
  }

  &:not(:first-child) {
    margin-left: $puppet-common-spacing-base * 4;
  }
}

.pds-green-bar {
  background-color: $puppet-g400;
  display: block !important;
  width: $puppet-common-spacing-base * 4;
}

.pds-blue-bar {
  background-color: $puppet-b400;
  display: block !important;
  width: $puppet-common-spacing-base * 4;
}

.pds-red-bar {
  background-color: $puppet-r400;
  display: block !important;
  width: $puppet-common-spacing-base * 4;
}

.pds-orange-bar {
  background-color: $puppet-amber;
  display: block !important;
  width: $puppet-common-spacing-base * 4;
}

/********** Styleguidist overrides **********/

// stylelint-disable-next-line selector-max-id
#section-puppet-design-system {
  display: none;
}

// stylelint-disable-next-line selector-no-qualifying-type
span.rc-content > p:only-child {
  display: inline;
}

article[data-testid='Glossary-examples'] {
  table {
    display: inline;
    margin-right: $puppet-common-spacing-base;
  }

  table:nth-of-type(2n) {
    td {
      background: #fff !important;
    }
  }

  tbody tr:first-child td {
    border-top: $puppet-common-border-subtle !important;

    &:first-child {
      border-top-left-radius: $puppet-common-border-radius !important;
    }

    &:last-child {
      border-top-right-radius: $puppet-common-border-radius !important;
    }
  }

  th {
    background: #fff !important;
    border: 0 !important;
    font-size: 16px;
    padding-top: $puppet-common-spacing-base * 4;
  }
}

/********** Components **********/

.swatch-wrapper {
  display: flex;
  flex-flow: wrap;
}

.swatch {
  border: $puppet-common-border;
  display: flex;
  flex-direction: column;
  height: 125px;
  margin-bottom: 10px;
  margin-right: 10px;
  width: 100px;
}

.swatch-color {
  flex-grow: 1;
}

.swatch-title {
  flex-shrink: 0;
  font-family: $puppet-type-font-family;
  font-size: 11px;
  padding: 4px;
  text-align: center;
}

.swatch-color-amber {
  background: $puppet-amber;
}

.swatch-color-teal {
  background: $puppet-teal;
}

.swatch-color-purple {
  background: $puppet-purple;
}

.swatch-color-red {
  background: $puppet-red;
}

.swatch-color-brand-primary {
  background: $puppet-brand-primary;
}

.swatch-color-brand-secondary {
  background: $puppet-brand-secondary;
}

.swatch-color-black {
  background: $puppet-black;
}

// Neutral colors

.swatch-color-n950 {
  background: $puppet-n950;
}

.swatch-color-n900 {
  background: $puppet-n900;
}

.swatch-color-n850 {
  background: $puppet-n850;
}

.swatch-color-n800 {
  background: $puppet-n800;
}

.swatch-color-n700 {
  background: $puppet-n700;
}

.swatch-color-n600 {
  background: $puppet-n600;
}

.swatch-color-n500 {
  background: $puppet-n500;
}

.swatch-color-n400 {
  background: $puppet-n400;
}

.swatch-color-n300 {
  background: $puppet-n300;
}

.swatch-color-n200 {
  background: $puppet-n200;
}

.swatch-color-n100 {
  background: $puppet-n100;
}

.swatch-color-n50 {
  background: $puppet-n50;
}

.swatch-color-white {
  background: $puppet-white;
}

// Blue colors

.swatch-color-b900 {
  background: $puppet-b900;
}

.swatch-color-b800 {
  background: $puppet-b800;
}

.swatch-color-b700 {
  background: $puppet-b700;
}

.swatch-color-b600 {
  background: $puppet-b600;
}

.swatch-color-b500 {
  background: $puppet-b500;
}

.swatch-color-b400 {
  background: $puppet-b400;
}

.swatch-color-b300 {
  background: $puppet-b300;
}

.swatch-color-b200 {
  background: $puppet-b200;
}

.swatch-color-b100 {
  background: $puppet-b100;
}

.swatch-color-b50 {
  background: $puppet-b50;
}

// Red colors

.swatch-color-r900 {
  background: $puppet-r900;
}

.swatch-color-r800 {
  background: $puppet-r800;
}

.swatch-color-r700 {
  background: $puppet-r700;
}

.swatch-color-r600 {
  background: $puppet-r600;
}

.swatch-color-r500 {
  background: $puppet-r500;
}

.swatch-color-r400 {
  background: $puppet-r400;
}

.swatch-color-r300 {
  background: $puppet-r300;
}

.swatch-color-r200 {
  background: $puppet-r200;
}

.swatch-color-r100 {
  background: $puppet-r100;
}

.swatch-color-r50 {
  background: $puppet-r50;
}

// Yellow colors

.swatch-color-y900 {
  background: $puppet-y900;
}

.swatch-color-y800 {
  background: $puppet-y800;
}

.swatch-color-y700 {
  background: $puppet-y700;
}

.swatch-color-y600 {
  background: $puppet-y600;
}

.swatch-color-y500 {
  background: $puppet-y500;
}

.swatch-color-y400 {
  background: $puppet-y400;
}

.swatch-color-y300 {
  background: $puppet-y300;
}

.swatch-color-y200 {
  background: $puppet-y200;
}

.swatch-color-y100 {
  background: $puppet-y100;
}

.swatch-color-y50 {
  background: $puppet-y50;
}

// Green colors

.swatch-color-g900 {
  background: $puppet-g900;
}

.swatch-color-g800 {
  background: $puppet-g800;
}

.swatch-color-g700 {
  background: $puppet-g700;
}

.swatch-color-g600 {
  background: $puppet-g600;
}

.swatch-color-g500 {
  background: $puppet-g500;
}

.swatch-color-g400 {
  background: $puppet-g400;
}

.swatch-color-g300 {
  background: $puppet-g300;
}

.swatch-color-g200 {
  background: $puppet-g200;
}

.swatch-color-g100 {
  background: $puppet-g100;
}

.swatch-color-g50 {
  background: $puppet-g50;
}

// Purple colors

.swatch-color-p900 {
  background: $puppet-p900;
}

.swatch-color-p800 {
  background: $puppet-p800;
}

.swatch-color-p700 {
  background: $puppet-p700;
}

.swatch-color-p600 {
  background: $puppet-p600;
}

.swatch-color-p500 {
  background: $puppet-p500;
}

.swatch-color-p400 {
  background: $puppet-p400;
}

.swatch-color-p300 {
  background: $puppet-p300;
}

.swatch-color-p200 {
  background: $puppet-p200;
}

.swatch-color-p100 {
  background: $puppet-p100;
}

.swatch-color-p50 {
  background: $puppet-p50;
}

// Icons

.rc-icon-table {
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  width: 100%;
}

.rc-icon-table .rc-icon {
  vertical-align: middle;
}

.rc-icon-table tr:not(:first-of-type):hover {
  border-radius: $puppet-common-border-radius;
  box-shadow: $puppet-common-focus-outline;
}

.rc-icon-table tr th:first-of-type {
  text-align: left;
}

.rc-icon-table tr td:not(:first-of-type) {
  border-radius: $puppet-common-border-radius;
  text-align: center;
}

.rc-icon-unique-variant {
  background: rgba($puppet-g500, 0.1);
}

.rc-loading-table {
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  width: 100%;
}

.column-width-35p {
  width: 35%;
}