Color 色彩

主色

whale-ui 默认的主题色是的紫色。

Color primary

<template>
  <div class="color-primary">
    <div class="color-card" v-for="i in 9" :style="getBgClolrStyle(i)">
      <div v-if="i === 1">
          <span>Color primary</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { cssConfig } from 'whale-ui'

type ValidKey = "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";

const getBgClolrStyle = (index:number)=>{
  if(index==1)
    return {
      'background-color':cssConfig.color.primary.default
  }
  else 
    return {
    'background-color':cssConfig.color.primary.light[String(index) as ValidKey]
  } 
}

</script>

<style scoped>
.color-primary{
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  width: 50%;
}

.color-card:nth-child(1){
  grid-column: 1 / 9 ;
  height: 120px;
  position: relative;
}
.color-card:nth-child(1) span{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: white;
}

.color-card:not(.color-card:nth-child(1)){
  grid-row: 2;
  aspect-ratio: 1;
}

</style>```

辅助色

除了主颜色外，您需要在不同的场景中使用不同的场景颜色 (例如，危险的颜色表示危险的操作)

Color success

Color warning

Color danger

Color error

Color info

<template>
  <div class="color-demos">
    <div class="color-demo" v-for="item in type" :key="item">
      <div class="color-card" v-for="i in 9" :style="getBgClolrStyle(item,i)">
        <div v-if="i === 1">
          <span>Color {{ item }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { cssConfig } from 'whale-ui';
type ValidType = 'success' | 'warning' | 'danger' |'error' | 'info' 
type ValidKey = "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";

const type = ['success','warning','danger','error','info']

const getBgClolrStyle = (type:string,index:number)=>{
  if(index==1)
    return {
      'background-color':cssConfig.color[type as ValidType].default
    }
  else 
    return {
    'background-color':cssConfig.color[type as ValidType].light[String(index) as ValidKey]
  }  
}

</script>

<style scoped>
.color-demos{
  display: grid;
  grid-template-columns: repeat(2,1fr);
}
.color-demo{
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
}

.color-card:nth-child(1){
  grid-column: 1 / 9 ;
  height: 120px;
  position: relative;
}
.color-card:nth-child(1) span{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: white;
}

.color-card:not(.color-card:nth-child(1)){
  grid-row: 2;
  aspect-ratio: 1;
}

</style>```

文本色

除了主颜色外，您需要在不同的场景中使用不同的场景颜色 (例如，危险的颜色表示危险的操作)

primary

regular

secondary

placeholder

disabled

<template>
  <div class="color-demos">
    <div class="color-demo" v-for="item in type" :key="item" :style="getBgClolrStyle(item)">
      <div class="color-info">
          <p>{{ item }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const type = ['primary','regular','secondary','placeholder','disabled']

const getColorByType = (type:string)=>{
  return '--wl-text-color-'+type
}

const getBgClolrStyle = (type:string)=>{
  return {
    'background-color':`var(${getColorByType(type)})`
  }
}
</script>

<style scoped>
.color-demos{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 20px 20px ;
}
.color-demo{
  aspect-ratio: 1;
  position: relative;
}

.color-demo div{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: white;
}
</style>```

边框色

除了主颜色外，您需要在不同的场景中使用不同的场景颜色 (例如，危险的颜色表示危险的操作)

default

light

lighter

extra-light

dark

darker

<template>
  <div class="color-demos">
    <div class="color-demo" v-for="item in type" :key="item" :style="getBgClolrStyle(item)">
      <div class="color-info">
          <p v-if="item === ''">default</p>
          <p v-else>{{ item }}</p>
      </div>
    </div>
    <div class="box" :style="{'background-color':'var(--wl-border-color)'}"></div>
  </div>
</template>

<script lang="ts" setup>
const type = ['','light','lighter','extra-light','dark','darker']

const getColorByType = (type:string)=>{
  if(type === '') return '--wl-border-color'
  return '--wl-border-color-'+type
}

const getBgClolrStyle = (type:string)=>{
  return {
    'background-color':`var(${getColorByType(type)})`
  }
}
</script>

<style scoped>
.color-demos{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 20px 20px ;
}
.color-demo{
  aspect-ratio: 1;
  position: relative;
}

.color-demo div{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: black;
}
.box{
  width: 200px;
  height: 200px;
}
</style>```