penpot/frontend/src/app/main/ui/workspace/palette.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

@use "../ds/spacing.scss" as *;
@use "../ds/z-index.scss" as *;
@use "../ds/_sizes.scss" as *;

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

.palette-wrapper {
  position: absolute;
  width: 100vw;
  left: 0;
  bottom: 0;
  padding-bottom: $s-4;

  /** Aligns AI Chat button **/
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
}

.palettes {
  z-index: $z-index-2;
  position: relative;
  right: 0;
  grid-area: color-palette;
  display: grid;
  grid-template-areas:
    "resize resize resize"
    "buttons actions palette";
  grid-template-rows: $s-8 1fr;
  grid-template-columns: $s-32 auto 1fr;
  max-height: $s-80;
  height: var(--height);
  width: fit-content;
  padding: $s-0 $s-0 $s-8 $s-8;
  border-radius: $br-8;
  background-color: var(--palette-background-color);
  border: $s-2 solid var(--panel-border-color);
  transition:
    right 0.3s,
    opacity 0.2s,
    width 0.3s;
  &.wide {
    width: 100%;
  }

  .resize-area {
    grid-area: resize;
    height: $s-8;
    z-index: $z-index-4;
    width: calc(100% - $s-8);
    border-radius: $br-circle;
    cursor: ns-resize;
    background-color: var(--palette-background-color);
  }
  .palette-btn-list {
    grid-area: buttons;
    background-color: var(--palette-background-color);
    height: calc(var(--height) - $s-16);
    width: $s-32;
    margin: $s-0;
    list-style: none;
    z-index: $z-index-2;
    gap: $s-2;
    &.mid-palette,
    &.small-palette {
      display: flex;
    }
    .palette-item {
      @include flexCenter;
      border-radius: $br-8;
      opacity: $op-10;
      transition: opacity 1s ease;
      .palette-btn {
        @extend .button-tertiary;
        height: $s-32;
        width: $s-32;
        border-radius: $br-8;
        background-clip: padding-box;
        padding: 0;
        svg {
          @extend .button-icon-small;
          stroke: var(--icon-foreground);
        }
        &.selected {
          @extend .button-icon-selected;
        }
      }
    }
  }

  .palette-actions {
    @extend .button-tertiary;
    grid-area: actions;
    height: calc(var(--height) - $s-16);
    width: $s-32;
    padding: 0;
    margin-left: $s-4;
    border-radius: $br-8;
    background-color: var(--palette-background-color);
    z-index: $z-index-2;
    svg {
      @extend .button-icon;
      stroke: var(--icon-foreground);
    }
  }
  .palette {
    grid-area: palette;
    width: 100%;
    min-width: 0;
  }
}

.handler {
  @include buttonStyle;
  @include flexCenter;
  width: $s-12;
  height: 100%;
  .handler-btn {
    width: $s-4;
    height: 100%;
    max-height: $s-40;
    margin: $s-8 $s-4;
    padding: 0;
    border-radius: $s-4;
    background-color: var(--palette-handler-background-color);
  }
}

.mid-palette,
.small-palette {
  grid-template-columns: $s-64 auto 1fr;
}

.hidden-bts {
  right: $s-2;
  z-index: $z-index-1;
  width: 22px;
  grid-template-columns: $s-8 auto 1fr;
  padding: 0;
  border-inline-start: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  .palette-btn-list {
    opacity: $op-0;
    visibility: hidden;
    width: 0;
    .palette-item {
      opacity: $op-0;
      visibility: hidden;
      z-index: 0;
    }
  }
  .resize-area {
    visibility: hidden;
    z-index: 0;
    width: 0;
  }
  .palette-actions {
    visibility: hidden;
    z-index: 0;
  }
  .palette {
    visibility: hidden;
    z-index: 0;
  }
  .handler {
    padding-bottom: $s-8;
  }
}

/** AI Chat button styles **/
.help-btn {
  z-index: var(--z-index-panels);
  flex-shrink: 0;
  @extend .button-secondary;
  inline-size: $sz-40;
  block-size: $sz-40;
  border-radius: $br-circle;
  border: none;
  &.selected {
    @extend .button-icon-selected;
  }
  &:hover {
    border: none;
  }
}

.icon-help {
  @extend .button-icon;
  stroke: var(--icon-foreground);
  inline-size: var(--sp-xxl);
  block-size: var(--sp-xxl);
}