Skip to content

CSS: ai-gradient ​

.--background-ai-horizontal — AI-խթանիչ գրաֆիկները նախատեսված են հարմարեցված մակերեսների համար, ոչ թե ընդհանուր InstUI պայմանագրի համար։

Source: index.ts

Օգտագործում ​

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

Մոդիֆիկատորներ ​

ՄոդիֆիկատորՆկարագիր
.--background-aiԷլեմենտի ֆոնը ներկել ընդհանուր AI գրաֆիկով։
.--background-ai-horizontalinstructure հորիզոնական լոգո (մութ).
.--border-color-aiԹափանցիկ շրջանակ՝ շրջապատված ընդհանուր AI գրաֆիկով։
.--border-color-ai-horizontalinstructure հորիզոնական լոգո (մութ).

Մուտքականություն ​

Կանոններ (axe-core)Բրենդի փոփոխություն (բաց)Բրենդի փոփոխություն (մուգ)CanvasԿտավի բարձր հակադրություն
color-contrastWCAG 2.2 1.4.3Վերանայում է անհրաժեշտՎերանայում է անհրաժեշտՎերանայում է անհրաժեշտՎերանայում է անհրաժեշտ

Տարրերը պետք է համապատասխանեն գունային հակադրության նվազագույն հարաբերակցության շեմերին

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
ՊայմաններԲրենդի փոփոխություն (բաց)Բրենդի փոփոխություն (մուգ)CanvasԿտավի բարձր հակադրություն
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Վերանայում է անհրաժեշտՎերանայում է անհրաժեշտՎերանայում է անհրաժեշտՎերանայում է անհրաժեշտ

Էջը փոխվում է prefers-contrast: more-ի դեպքում, սակայն տեսանելի տեքստ չի հաջողվել չափել։

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Էկրանի ընթերցիչ (նմանակված)Բրենդի փոփոխություն (բաց)Բրենդի փոփոխություն (մուգ)CanvasԿտավի բարձր հակադրություն
AnnouncementsPassPassPassPass

Այս ավտոմատացված արդյունքները չեն հաստատում, որ էջը համապատասխանում է WCAG-ին. ձեռքով վերանայումը դեռ անհրաժեշտ է։

Ցուցիչներ սպառված ​

TokenՏիպԱրժեք
--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)