CSS: ai-gradient ​

.--background-ai-horizontal — Cúntóirí grádáin le béim AI atá i gceist do dhromchlaí saincheaptha, ní don chonradh InstUI roinnte.

Source: index.ts

Úsáid ​

css
@import "@pantoken/plugin-custom-components/custom-components.css";

Modhnóirí ​

ModhnóirCur síos
.--background-aiPéinteáil cúlra an eilimint leis an ngraimín AI roinnte.
.--background-ai-horizontallógó Instructure cothrománach (dorcha).
.--border-color-aiTeorainn thrédhearcach atá frámaithe ag an ngraimín AI roinnte.
.--border-color-ai-horizontallógó Instructure cothrománach (dorcha).

Inrochtaineacht ​

Rialacha (axe-core)Athbhrandáil (éadrom)Athbhrandáil (dorcha)CanvasArdchodarsnacht Canvas
color-contrastWCAG 2.2 1.4.3Athbhreithniú riachtanachAthbhreithniú riachtanachAthbhreithniú riachtanachAthbhreithniú riachtanach

Caithfidh eilimintí na tairseacha íosta don chóimheas codarsnachta datha a chomhlíonadh

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
CoinníollachaAthbhrandáil (éadrom)Athbhrandáil (dorcha)CanvasArdchodarsnacht Canvas
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Athbhreithniú riachtanachAthbhreithniú riachtanachAthbhreithniú riachtanachAthbhreithniú riachtanach

Athraíonn an leathanach faoi prefers-contrast: more, ach níorbh fhéidir aon téacs infheicthe a thomhas.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Léitheoir scáileáin (insamhlaithe)Athbhrandáil (éadrom)Athbhrandáil (dorcha)CanvasArdchodarsnacht Canvas
AnnouncementsPassPassPassPass

Ní chruthaíonn na torthaí uathoibrithe seo go gcomhlíonann an leathanach WCAG; tá athbhreithniú láimhe fós riachtanach.

Tóicíní a úsáideadh ​

TokenCineálLuach
--instui-border-width-sm<length>0.0625rem
--instui-color-background-base<color>LightDarklight-dark(#ffffff, #10141A)
--instui-color-stroke-ai-bottom-gradient<color>LightDarklight-dark(#00828E, #04A4B7)
--instui-color-stroke-ai-top-gradient<color>LightDarklight-dark(#9E58BD, #B680CC)