penpot/frontend/src/app/main/ui/debug/components_preview.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@import "refactor/common-refactor.scss";

.themes-row {
  width: 100%;
  padding: $s-20;
  color: var(--color-foreground-primary);
  background: var(--color-background-secondary);
  .wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: $s-40;
    background-color: var(--color-background-primary);
    width: 100%;
    padding: $s-20;
    .rect {
      display: flex;
      justify-content: center;
      align-items: center;
      border: $s-1 solid var(--color-foreground-primary);
      padding: $s-20;
      height: $s-96;
      min-width: $s-152;
    }
  }
}
.color-wrapper {
  display: grid;
  grid-template-rows: auto $s-96;
}

.components-row {
  color: var(--color-foreground-primary);
  background: var(--color-background-secondary);
  height: 100%;
  padding: 0 $s-20;
  .title {
    padding: $s-20;
  }
  .components-wrapper {
    padding: $s-20;
    display: flex;
    flex-wrap: wrap;
    gap: $s-20;
    .components-group {
      @include flexCenter;
      justify-content: flex-start;
      flex-direction: column;
      border-radius: $s-8;
      h3 {
        @include bodySmallTypography;
        font-size: $fs-24;
        width: 100%;
      }
      .component {
        display: flex;
        flex-direction: column;
        gap: $s-8;
        width: $s-240;
        max-height: $s-80;
        margin-bottom: $s-16;
        .component-name {
          @include uppercaseTitleTipography;
          font-weight: bold;
        }
      }
    }
    .button-primary {
      @extend .button-primary;
      height: $s-32;
      svg {
        @extend .button-icon;
      }
    }
    .button-secondary {
      @extend .button-secondary;
      height: $s-32;
      svg {
        @extend .button-icon;
      }
    }
    .button-tertiary {
      @extend .button-tertiary;
      height: $s-32;
      svg {
        @extend .button-icon;
      }
    }
    .input-wrapper {
      @extend .input-element;
      @include bodySmallTypography;
    }
  }
}