CSS: button-set ​

.instui-button-set — صف أزرار متلاصق (محاذي، بلا فواصل)،) مع تقويس الزاويتين الخارجيتين فقط.

تحدّد المعدِّلات المتسلسلة الخاصة بها (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) قيمة افتراضية لكل عنصر فرعي .instui-button لا يحمل مُعدِّلًا خاصًا به ضمن الفئة نفسها — فئة المُعدِّل الخاصة بالزر تتغلب دائمًا على القيمة الافتراضية للمجموعة. يكون -icon-* خاصًا بكل زر دائمًا؛ ولا يُقرأ مطلقًا من المجموعة. لا تُدعم أسماء الأزرار المستعارة المهجورة (-ghost, -color-primary-inverse) كمُعدِّلات على مستوى المجموعة — استخدم البدائل الأساسية المقابلة لها (-color-tertiary, -on-color) بدلًا منها. يُظهر كل اتصال فاصلًا بعرض 1px بلون الحدود الخاص بالأزرار (تتلوّن التعبئات المصمتة، التي يطابق لون حدودها لون التعبئة، بلون التسمية). -without-seam خاص بالمجموعة فقط: يخفي هذا الفاصل لتبدو الأزرار كأنها عنصر تحكم واحد متصل. أضف -width-half إلى زر فرعي منفرد بأيقونة فقط لإنشاء مشغّل لإجراء منقسم بنصف العرض المربّع القياسي وبارتفاع الزر كاملًا.

Usage ​

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

Per-button override ​

html
<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">إلغاء</button>
  <button class="instui-button -color-primary -icon-checkmark">### config</button>
</div>

Flush (no seams) ​

html
<div class="instui-button-set -without-seam">
  <button class="instui-button">اليوم</button>
  <button class="instui-button"> الأسبوع 1</button>
  <button class="instui-button">next</button>
</div>

Split action ​

Put -width-half on only the icon-only trigger to give it half the standard square button's width, keeping the full height. The main action can have a text label or be an icon-only square button. Group sizes and per-button size overrides apply; the width isn't a fraction of the main action. Give the icon-only button an accessible name. This example shows layout only: wire the trigger to a real menu and manage its expanded state and focus in your application.

html
<div class="instui-button-set -color-primary" role="group" aria-label="Save actions">
  <button class="instui-button" type="button">حفظ التغييرات</button>
  <button class="instui-button -width-half -icon-chevron-down" type="button" aria-label="More save actions"></button>
</div>
<div class="instui-button-set -size-md" role="group" aria-label="Add actions">
  <button class="instui-button -shape-square -icon-plus" type="button" aria-label="Add"></button>
  <button class="instui-button -width-half -icon-chevron-down" type="button" aria-label="More add actions"></button>
</div>

Structure ​

text
.instui-button-set
  button (component, 1..n)
flowchart TD n0[".instui-button-set"]:::cssdoc-root n1(["button"]):::cssdoc-component n0 -->|1..n| n1 click n1 "/api/css/button.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modifiers ​

ModifierDescription
.-color-aiتعيين كل عنصر فرعي غير معدل افتراضيًا إلى معالجة التدرج الذكي (AI).
.-color-ai-secondaryتعيين كل عنصر فرعي غير معدل افتراضيًا إلى معالجة الذكاء الاصطناعي ذات التأكيد الأقل.
.-color-dangerتعيين كل عنصر فرعي غير معدل افتراضيًا إلى اللون التحتي (المدمّر).
.-color-primaryتعيين كل عنصر فرعي غير معدل افتراضيًا إلى اللون الأساسي.
.-color-secondaryتعيين كل عنصر فرعي غير معدل افتراضيًا إلى اللون الثانوي.
.-color-successتعيين كل عنصر فرعي غير معدل افتراضيًا إلى لون النجاح.
.-color-tertiaryتعيين كل عنصر فرعي غير معدل افتراضيًا إلى اللون الثلاثي (نمط النص)).
.-condensedتعيين كل عنصر فرعي غير معدل افتراضيًا إلى مسافة داخلية أصغر.
.-display-blockعرض كل عنصر فرعي غير معدل بعرض كامل.
.-on-colorتعيين كل عنصر فرعي غير معدل افتراضيًا ليتم وضعه على سطح ملون.
.-shape-circleتعيين كل عنصر فرعي غير معدل افتراضيًا إلى زر أيقونة دائري.
.-shape-squareتعيين كل عنصر فرعي غير معدل افتراضيًا إلى زر أيقونة مربع.
.-size-lgتعيين كل عنصر فرعي غير معدل افتراضيًا إلى كبير.
.-size-md(الافتراضي) حجم متوسط.
.-size-smتعيين كل عنصر فرعي غير معدل افتراضيًا إلى صغير.
.-toggleتعيين كل عنصر فرعي غير معدل افتراضيًا إلى معاملة تبديل حالة الضغط.
.-without-backgroundتعيين كل عنصر فرعي غير معدل افتراضيًا إلى بدون تعبئة.
.-without-borderتعيين كل عنصر فرعي غير معدل افتراضيًا إلى بدون حد.
.-without-seamإخفاء الفاصل بعرض 1 بكسل بين الأزرار.

Pseudo-elements ​

Pseudo-elementDescription
::after—
::before—

States ​

StateDescription
[aria-disabled="true"]—
[aria-pressed="true"]—
:disabled—

Accessibility ​

استخدم مجموعة ذات تسمية للإجراءات المترابطة؛ وعندما تمثّل الأزرار خيار تبديل، أظهر حالة كل زر باستخدام aria-pressed. امنح الأزرار التي تحتوي على أيقونات فقط اسمًا يمكن الوصول إليه. مشغّلات نصف العرض أهداف ضيقة (بعرض 16px أو 20px أو 24px وفق الأحجام القياسية)؛ احرص على توفير تباعد كافٍ بين الأهداف أو استخدم زرًا مربّعًا كامل العرض للواجهات التي تعمل باللمس.

القواعد (axe-core)إعادة تصميم العلامة التجارية (فاتح)إعادة تصميم العلامة التجارية (داكن)Canvasتباين عالٍ للوحة
color-contrastWCAG 2.2 1.4.3تحتاج إلى مراجعةتحتاج إلى مراجعةتحتاج إلى مراجعةتحتاج إلى مراجعة

يجب أن تستوفي العناصر الحد الأدنى لنسب تباين الألوان

  • .-color-ai > button:nth-child(1)
  • .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8FailFailFailFail

يجب أن تكون جميع أهداف اللمس بحجم 24px على الأقل، أو اترك مسافة كافية بينها

  • .-color-primary[aria-label="Save actions"][role="group"]:nth-child(19) > .-wi...
  • .-color-primary[aria-label="Save actions"][role="group"]:nth-child(22) > .-wi...
  • button[aria-label="More add actions"]
الشروطإعادة تصميم العلامة التجارية (فاتح)إعادة تصميم العلامة التجارية (داكن)Canvasتباين عالٍ للوحة
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7PassPassPassPass
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6FailFailFailFail

إعادة تسمية العلامة التجارية (الفاتح): مع تفعيل prefers-contrast: more، ينخفض تباين ستة أجزاء من النص عن الحد الأدنى. أسوأها "Send" بنسبة 1.64:1 (المطلوب 4.5:1).

إعادة تسمية العلامة التجارية (الداكن): مع تفعيل prefers-contrast: more، ينخفض تباين ستة أجزاء من النص عن الحد الأدنى. أسوأها "Send" بنسبة 1.78:1 (المطلوب 4.5:1).

Canvas، Canvas High Contrast: مع تفعيل prefers-contrast: more، ينخفض تباين جزأين من النص عن الحد الأدنى. أسوأهما "Rewrite" بنسبة 1.88:1 (المطلوب 4.5:1).

reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2لا ينطبقPassPassلا ينطبق
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11PassPassلا ينطبقلا ينطبق
reflow-at-320pxWCAG 2.2 1.4.10FailFailFailFail

في نافذة بعرض 320px، تنزلق الصفحة أفقيًا (يبلغ عرضها 592px في نافذة بعرض 320px)، ويتجاوز أحد العناصر الحافة اليمنى: button.instui-button ينتهي عند 592px. يستثني معيار WCAG 1.4.10 لإعادة التدفق (المستوى AA) المحتوى ثنائي الأبعاد مثل جداول البيانات والخرائط، لذا ينبغي للشخص تقييم ما إذا كان ذلك ينطبق.

text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
قارئ شاشة (محاكاة)إعادة تصميم العلامة التجارية (فاتح)إعادة تصميم العلامة التجارية (داكن)Canvasتباين عالٍ للوحة
AnnouncementsPassPassPassPass

لا تثبت هذه النتائج الآلية أن الصفحة تستوفي معايير WCAG؛ فما زالت المراجعة اليدوية مطلوبة.

Tokens consumed ​

TokenTypeValue
--instui-border-width-md<length>0.125rem
--instui-border-width-sm<length>0.0625rem
--instui-color-background-interactive-action-ai-bottom-gradient-active<color>#01626E
--instui-color-background-interactive-action-ai-bottom-gradient-base<color>#027887
--instui-color-background-interactive-action-ai-bottom-gradient-hover<color>#00828E
--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient<color>LightDarklight-dark(#CFF0F6, #00424A)
--instui-color-background-interactive-action-ai-secondary-active-top-gradient<color>LightDarklight-dark(#F3E5F7, #522965)
--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient<color>LightDarklight-dark(#CFF0F6, #00424A)
--instui-color-background-interactive-action-ai-secondary-hover-top-gradient<color>LightDarklight-dark(#F3E5F7, #522965)
--instui-color-background-interactive-action-ai-top-gradient-active<color>#793F93
--instui-color-background-interactive-action-ai-top-gradient-base<color>#944FB3
--instui-color-background-interactive-action-ai-top-gradient-hover<color>#9E58BD
--instui-color-background-interactive-action-destructive-active<color>#AE161B
--instui-color-background-interactive-action-destructive-base<color>#CF1F24
--instui-color-background-interactive-action-destructive-hover<color>#E62429
--instui-color-background-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-background-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-background-interactive-action-secondary-active<color>light-dark(color-mix(in srgb, #44709F 15%, transparent), #2E5177)
--instui-color-background-interactive-action-success-base<color>#037D37
--instui-color-background-interactive-action-success-hover<color>#03893D
--instui-color-background-muted<color>LightDarklight-dark(#F2F4F5, #273540)
--instui-color-stroke-interactive-action-ai-bottom-gradient-active<color>LightDarklight-dark(#01626E, #02717E)
--instui-color-stroke-interactive-action-ai-bottom-gradient-base<color>#027887
--instui-color-stroke-interactive-action-ai-bottom-gradient-hover<color>#00828E
--instui-color-stroke-interactive-action-ai-top-gradient-active<color>LightDarklight-dark(#793F93, #8A49A7)
--instui-color-stroke-interactive-action-ai-top-gradient-base<color>#944FB3
--instui-color-stroke-interactive-action-ai-top-gradient-hover<color>#9E58BD
--instui-color-stroke-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-stroke-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-stroke-interactive-action-secondary-active<color>light-dark(color-mix(in srgb, #44709F 0%, transparent), #2E5177)
--instui-color-text-interactive-action-ai-active<color>#ffffff
--instui-color-text-interactive-action-ai-base<color>#ffffff
--instui-color-text-interactive-action-ai-hover<color>#ffffff
--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base<color>LightDarklight-dark(#027887, #3CC0D4)
--instui-color-text-interactive-action-ai-secondary-top-gradient-base<color>LightDarklight-dark(#944FB3, #CAA1D9)
--instui-color-text-interactive-action-primary-base<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-color-text-interactive-action-secondary-base<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-color-text-interactive-action-status-base<color>#ffffff
--instui-component-base-button-ai-disabled-background-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-ai-disabled-border-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-ai-disabled-text-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-component-base-button-border-radius<length>0.75rem
--instui-component-base-button-large-font-size<length>1.125rem
--instui-component-base-button-large-height<length>3rem
--instui-component-base-button-large-padding-horizontal<length>1.25rem
--instui-component-base-button-medium-font-size<length>1rem
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-medium-padding-horizontal<length>1rem
--instui-component-base-button-primary-color<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-component-base-button-primary-disabled-background-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-ghost-active-background<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-primary-ghost-background<color>transparent
--instui-component-base-button-primary-ghost-border-color<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)
--instui-component-base-button-primary-ghost-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)
--instui-component-base-button-primary-inverse-active-background<color>#E2EAF7
--instui-component-base-button-primary-inverse-background<color>#ffffff
--instui-component-base-button-primary-inverse-border-color<color>#ffffff
--instui-component-base-button-primary-inverse-color<color>#213D5B
--instui-component-base-button-primary-inverse-hover-background<color>#EEF4FD
--instui-component-base-button-primary-on-color-active-border-color<color>#B6CCEA
--instui-component-base-button-primary-on-color-active-text-color<color>#213D5B
--instui-component-base-button-primary-on-color-disabled-background-color<color>#8D959F
--instui-component-base-button-primary-on-color-disabled-border-color<color>#8D959F
--instui-component-base-button-primary-on-color-disabled-text-color<color>#4A5B68
--instui-component-base-button-primary-on-color-hover-border-color<color>#D5E2F6
--instui-component-base-button-primary-on-color-hover-text-color<color>#213D5B
--instui-component-base-button-secondary-active-background<color>hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l * 0.85))
--instui-component-base-button-secondary-active-border-color<color>color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-active-text-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-background<color>LightDarklight-dark(#44709f33, #86a8d54d)
--instui-component-base-button-secondary-border-color<color>color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-disabled-background-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-secondary-disabled-border-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-secondary-disabled-text-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-component-base-button-secondary-hover-background<color>hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l + (100 - l) * 0.4))
--instui-component-base-button-secondary-hover-border-color<color>color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-hover-text-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-small-font-size<length>0.875rem
--instui-component-base-button-small-height<length>2rem
--instui-component-base-button-small-padding-horizontal<length>0.75rem
--instui-component-base-button-tertiary-active-border-color<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)
--instui-component-base-button-tertiary-active-text-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-tertiary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-tertiary-disabled-text-color<color>LightDarklight-dark(#AAB0B5, #4A5B68)
--instui-component-base-button-tertiary-hover-border-color<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-tertiary-hover-text-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-icon-action-ai-disabled-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-spacing-space-xs<length>0.25rem

Subcomponents ​