<commit_before>//
// Copyright (c) Tiny Technologies, Inc. All rights reserved.
// Licensed under the LGPL or a commercial license.
// For LGPL see License.txt in the project root for license information.
// For commercial licenses see https://www.tiny.cloud/
//

//
// Color
//

@color-input-swatch-checker-color: contrast(@textfield-background-color, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25));

.tox {
  .tox-color-input {
    display: flex;
    position: relative;
    z-index: 1;

    .tox-textfield {
      z-index: -1;
    }

    span {
      border-color: rgba(red(@color-black), green(@color-black), blue(@color-black), .2);
      border-radius: 50%;
      border-style: solid;
      border-width: 1px;
      box-shadow: none;
      box-sizing: border-box;
      cursor: pointer;
      height: @textfield-height - 8px;
      position: absolute;
      top: 4px;
      width: $height;

      &:focus {
        border-color: @input-button-focus-border-color;
      }

      &::before {
        background-image:
          linear-gradient(45deg, @color-input-swatch-checker-color 25%, transparent 25%),
          linear-gradient(-45deg, @color-input-swatch-checker-color 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, @color-input-swatch-checker-color 75%),
          linear-gradient(-45deg, transparent 75%, @color-input-swatch-checker-color 75%);
        background-position: 0 0, 0 5px, 5px -5px, -5px 0;
        background-size: 10px 10px;
        border: 1px solid @textfield-background-color;
        border-radius: 50%;
        box-sizing: border-box;
        content: '';
        height: @textfield-height - 8px;
        left: -1px;
        position: absolute;
        top: -1px;
        width: $height;
        z-index: -1;
      }
    }
  }
}

.tox:not([dir=rtl]) {
  .tox-color-input {
    .tox-textfield {
      padding-left: @textfield-height;
    }

    span {
      left: 4px;
    }
  }
}

// RTL
.tox[dir="rtl"] {
  .tox-color-input {
    .tox-textfield {
      padding-right: @textfield-height;
    }

    span {
      right: 4px;
    }
  }
}<commit_msg>Updated the default design of the color input field swatch to be square<commit_after>//
// Copyright (c) Tiny Technologies, Inc. All rights reserved.
// Licensed under the LGPL or a commercial license.
// For LGPL see License.txt in the project root for license information.
// For commercial licenses see https://www.tiny.cloud/
//

//
// Color
//

@color-input-swatch-checker-color: contrast(@textfield-background-color, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25));
@color-input-swatch-border-radius: @control-border-radius;

.tox {
  .tox-color-input {
    display: flex;
    position: relative;
    z-index: 1;

    .tox-textfield {
      z-index: -1;
    }

    span {
      border-color: rgba(red(@color-black), green(@color-black), blue(@color-black), .2);
      border-radius: @color-input-swatch-border-radius;
      border-style: solid;
      border-width: 1px;
      box-shadow: none;
      box-sizing: border-box;
      cursor: pointer;
      height: @textfield-height - 12px;
      position: absolute;
      top: 6px;
      width: $height;

      &:focus {
        border-color: @input-button-focus-border-color;
      }

      &::before {
        background-image:
          linear-gradient(45deg, @color-input-swatch-checker-color 25%, transparent 25%),
          linear-gradient(-45deg, @color-input-swatch-checker-color 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, @color-input-swatch-checker-color 75%),
          linear-gradient(-45deg, transparent 75%, @color-input-swatch-checker-color 75%);
        background-position: 0 0, 0 6px, 6px -6px, -6px 0;
        background-size: 12px 12px;
        border: 1px solid @textfield-background-color;
        border-radius: @color-input-swatch-border-radius;
        box-sizing: border-box;
        content: '';
        height: @textfield-height - 12px;
        left: -1px;
        position: absolute;
        top: -1px;
        width: $height;
        z-index: -1;
      }
    }
  }
}

.tox:not([dir=rtl]) {
  .tox-color-input {
    .tox-textfield {
      padding-left: @textfield-height;
    }

    span {
      left: 6px;
    }
  }
}

// RTL
.tox[dir="rtl"] {
  .tox-color-input {
    .tox-textfield {
      padding-right: @textfield-height;
    }

    span {
      right: 6px;
    }
  }
}
{'fraction_non_alphanumeric': 0.1471861471861472, 'fraction_numerical': 0.030986557302346777, 'mean_word_length': 2.2020423048869437, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1458386', 'n_tokens_mistral': 1624, 'n_tokens_neox': 1450, 'n_words': 330}