shoelace实现颜色主色选择生成器代码-html代码-BFW代码库

shoelace实现颜色主色选择生成器代码

代码语言：html

所属分类：选择器

代码描述：shoelace实现颜色主色选择生成器代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
html {
  --spacing: 1.5rem;
  --swatch-size: 55px;
   
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font: 16px system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  place-items: center;
  height: calc(100vh - var(--spacing) * 2);
}

main {
  display: inline-block;
  color: rgb(var(--sl-color-neutral-500));
  padding: var(--spacing);
  margin: auto;
}

h1 {
  font-size: 1.5rem;
  font-weight: 300;
  text-align: center;
  margin: 0 0 var(--spacing) 0;
}

sl-card {
   margin: 0 auto; 
}

sl-card::part(base) {
  --padding: var(--spacing);
  border: none;
  box-shadow: var(--sl-shadow-large);
}

#result {
  display: grid;
  grid-template-columns: repeat(11, var(--swatch-size));
  gap: 4px;
  margin-bottom: var(--spacing);
}

.swatch {
  display: inline-block;
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: 2px;
}

.inputs {
  display: flex;
  gap: var(--spacing);
}

sl-color-picker {
  margin-bottom: var(--spacing);  
}

sl-color-picker::part(base) {
  box-shadow: none; 
}

.right {
  flex: 1 1 auto; 
}

sl-textarea::part(textarea) {
  font-family: var(--sl-font-mono);
  font-size: 14px;
  height: 350px;
}

a {
  color: inherit; 
}

a:hover {
  color: rgb(var(--sl-color-primary-600));
}

footer {
  text-align: center; 
  margin-top: calc(var(--spacing) / 2);
}

small:not(:first-child):before {
  content: '·';
}

@media screen and (max-width: 900px) {
  html {
    --spacing: 1rem;
    --swatch-size: 40px
  }
  
  #result {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .inputs {
    flex-direction: column;
    margin: auto;
  }
  
  sl-textarea::part(textarea) {
    height: 100px;
  }
  
  small {
    display: block;
    margin-top: var(--spacing);
  }
  
  small:before {
    display: none; 
  }
}
</style>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.48/dist/themes/light.css">

</head>

<body  >


<main>
  <h1>Color Token Generator</h1>

  <sl-card>
    <div id="result"></div>

    <div class="inputs">
      <div class="left">
        <sl-color-picker inline value="#4a90e2"></sl-color-picker>
        <sl-in.........完整代码请登录后点击上方下载按钮下载查看