Design for AICores light-dark
Cores light-dark: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
light-dark() in one line
Each color declares both values; the browser picks based on color-scheme.
Read the specCSS
.card-049 {
color-scheme: light dark;
width: 290px;
padding: 22px;
background: light-dark(#fafaf9,#1c1917);
color: light-dark(#1c1917,#fafaf9);
border: 1px solid light-dark(#e7e5e4,#44403c);
border-radius: 14px;
box-shadow: 0 4px 16px light-dark(rgba(0,0,0,.06),rgba(0,0,0,.4));
font-family: system-ui,sans-serif
}
.card-049 h3 {
margin: 0 0 6px;
font-size: 18px
}
.card-049 p {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.5;
color: light-dark(#57534e,#a8a29e)
}
.card-049 a {
display: inline-block;
padding: 8px 14px;
border-radius: 8px;
background: light-dark(#1c1917,#fafaf9);
color: light-dark(#fafaf9,#1c1917);
font-size: 13px;
font-weight: 600;
text-decoration: none
}
.card-049 a:hover {
opacity: .85
}
.card-049 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-049">
<h3>light-dark() in one line</h3>
<p>Each color declares both values; the browser picks based on color-scheme.</p>
<a href="#">Read the spec</a>
</article>Prompt
Crie um card de 290px que define color-scheme: light dark e usa a função light-dark() para todas as cores: fundo light-dark(#fafaf9,#1c1917), texto light-dark(#1c1917,#fafaf9), borda de 1px light-dark(#e7e5e4,#44403c), alfa da sombra .06 no claro e .4 no escuro, texto secundário light-dark(#57534e,#a8a29e). Raio de 14px, padding de 22px, título 18px, parágrafo 14px, e um botão pequeno cujas cores de fundo e texto se invertem entre os modos (botão escuro no modo claro, botão claro no modo escuro), 85% de opacidade no hover.