Color Area

<script setup lang="ts">
import {
  ColorAreaArea,
  ColorAreaRoot,
  ColorAreaThumb,
} from 'akar';
import { ref } from 'vue';
import './styles.css';

const color = ref('#56d799');
</script>

<template>
  <div class="akar-demo akar-demo-ColorArea">
    <div class="ColorAreaDemo">
      <div class="ColorAreaValue">
        Current: {{ color }}
      </div>

      <ColorAreaRoot
        v-slot="{ style }"
        v-model="color"
        class="ColorAreaRoot"
      >
        <ColorAreaArea
          class="ColorAreaArea"
          :style="style"
        >
          <ColorAreaThumb class="ColorAreaThumb" />
        </ColorAreaArea>
      </ColorAreaRoot>
    </div>
  </div>
</template>

@import '../_colors/black-alpha.css';
@import '../_colors/grass.css';
@import '../_colors/mauve.css';

@scope (.akar-demo-ColorArea) {
  .ColorAreaDemo {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ColorAreaValue {
    color: var(--mauve-11);
    font-size: 14px;
  }

  .ColorAreaRoot {
    position: relative;
  }

  .ColorAreaArea {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
  }

  .ColorAreaArea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--grass-7);
  }

  .ColorAreaThumb {
    display: block;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-color: white;
    border: 2px solid var(--mauve-8);
    border-radius: 9999px;
    box-shadow: 0 2px 10px var(--black-a7);
  }
}