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 *;
@use "refactor/common-refactor.scss" as deprecated;

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

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

.palettes {
  z-index: deprecated.$z-index-2;
  position: relative;
  right: 0;
  grid-area: color-palette;
  display: grid;
  grid-template: "resize resize resize" deprecated.$s-8 "buttons actions palette" 1fr / deprecated.$s-32 auto 1fr;
  max-height: deprecated.$s-80;
  height: var(--height);
  width: fit-content;
  padding: deprecated.$s-0 deprecated.$s-0 deprecated.$s-8 deprecated.$s-8;
  border-radius: deprecated.$br-8;
  background-color: var(--palette-background-color);
  border: deprecated.$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: deprecated.$s-8;
    z-index: deprecated.$z-index-4;
    width: calc(100% - deprecated.$s-8);
    border-radius: deprecated.$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) - deprecated.$s-16);
    width: deprecated.$s-32;
    margin: deprecated.$s-0;
    list-style: none;
    z-index: deprecated.$z-index-2;
    gap: deprecated.$s-2;

    &.mid-palette,
    &.small-palette {
      display: flex;
    }

    .palette-item {
      @include deprecated.flex-center;

      border-radius: deprecated.$br-8;
      opacity: deprecated.$op-10;
      transition: opacity 1s ease;

      .palette-btn {
        @extend %button-tertiary;

        height: deprecated.$s-32;
        width: deprecated.$s-32;
        border-radius: deprecated.$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) - deprecated.$s-16);
    width: deprecated.$s-32;
    padding: 0;
    margin-left: deprecated.$s-4;
    border-radius: deprecated.$br-8;
    background-color: var(--palette-background-color);
    z-index: deprecated.$z-index-2;

    svg {
      @extend %button-icon;

      stroke: var(--icon-foreground);
    }
  }

  .palette {
    grid-area: palette;
    width: 100%;
    min-width: 0;
  }
}

.handler {
  @include deprecated.button-style;
  @include deprecated.flex-center;

  width: deprecated.$s-12;
  height: 100%;

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

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

.hidden-bts {
  right: deprecated.$s-2;
  z-index: deprecated.$z-index-1;
  width: 22px;
  grid-template-columns: deprecated.$s-8 auto 1fr;
  padding: 0;
  border-inline-start: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;

  .palette-btn-list {
    opacity: deprecated.$op-0;
    visibility: hidden;
    width: 0;

    .palette-item {
      opacity: deprecated.$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: deprecated.$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: deprecated.$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);
}