--taav-bgbg
پسزمینه کلی صفحه و shell
وابسته به تم
سیستم توکن TaavUI شامل primitive، semantic و component tokens است. مقادیر در taav-tokens.css تعریف شده و در light/dark تغییر میکنند.
import '../../../packages/ui/src/tokens/taav-tokens.css';
Semantic Colors
--taav-bgپسزمینه کلی صفحه و shell
وابسته به تم
--taav-surfaceسطح اصلی کارت و پنل
وابسته به تم
--taav-surface-mutedسطح ثانویه و پسزمینه بخشها
وابسته به تم
--taav-borderمرز پیشفرض اجزا
وابسته به تم
--taav-border-strongمرز پررنگتر برای تاکید
وابسته به تم
--taav-text-strongعنوان و متن پررنگ
وابسته به تم
--taav-text-bodyمتن اصلی
وابسته به تم
--taav-text-mutedمتن ثانویه
وابسته به تم
--taav-text-subtleمتن کماهمیت و label
وابسته به تم
--taav-brandرنگ برند اصلی
وابسته به تم
--taav-successوضعیت موفقیت
وابسته به تم
--taav-warningهشدار
وابسته به تم
--taav-dangerخطر و خطا
وابسته به تم
--taav-infoاطلاعات
وابسته به تم
--taav-required-markرنگ ستاره الزامی
وابسته به تم
--taav-field-block-support-colorرنگ متن راهنمای ثابت فیلد
وابسته به تم
--taav-field-block-error-colorرنگ پیام خطا در business field block
وابسته به تم
--taav-choice-chip-bgپسزمینه حالت عادی choice chip
وابسته به تم
--taav-choice-chip-borderمرز حالت عادی choice chip
وابسته به تم
--taav-choice-chip-textرنگ متن حالت عادی choice chip
وابسته به تم
--taav-choice-chip-selected-bgپسزمینه انتخابشده choice chip
وابسته به تم
--taav-choice-chip-selected-borderمرز حالت انتخابشده choice chip
مقدار: transparent
--taav-choice-chip-selected-textرنگ متن انتخابشده choice chip
وابسته به تم
--taav-choice-chip-selected-iconرنگ آیکن تیک انتخابشده
وابسته به تم
--taav-choice-chip-hover-bgپسزمینه hover حالت عادی choice chip
وابسته به تم
--taav-switch-track-on-brandرنگ track روشن
وابسته به تم
--taav-option-card-selected-borderمرز option card انتخابشده
وابسته به تم
--taav-overlay-backdropپسزمینه modal/drawer
مقدار: rgba
--taav-tabs-indicatorرنگ indicator فعال
وابسته به تم
--taav-stepper-currentرنگ step فعلی
وابسته به تم
--taav-stepper-connectorخط اتصال stepper
وابسته به تم
--taav-chip-selected-ringحلقه chip انتخابشده
وابسته به تم
--taav-progress-fill-brandرنگ fill progress brand
وابسته به تم
Typography
--taav-text-xsبرچسب و meta
مقدار: 11px
--taav-text-smمتن رابط پیشفرض
مقدار: 13px
--taav-text-mdمتن بدنه استاندارد
مقدار: 14px
--taav-text-lgمتن برجسته
مقدار: 16px
--taav-leading-normalفاصله خط پیشفرض فارسی
مقدار: 1.6
--taav-leading-relaxedفاصله خط برای توضیحات
مقدار: 1.8
--taav-form-label-mdتایپوگرافی label
مقدار: 13px
--taav-form-message-smپیام خطا/راهنما
مقدار: 11px
--taav-field-block-label-mdتایپوگرافی label business form
مقدار: 14px
--taav-field-block-support-mdتایپوگرافی متن راهنمای ثابت زیر فیلد
مقدار: 13px
--taav-kv-label-size-mdتایپوگرافی label
مقدار: 13px
--taav-header-title-mdتایپوگرافی عنوان page header
مقدار: 20px
--taav-stats-value-mdتایپوگرافی مقدار stats card
مقدار: 24px
Spacing
--taav-space-2فاصله فشرده
مقدار: 8px
--taav-space-3فاصله داخلی کوچک
مقدار: 12px
--taav-space-4فاصله استاندارد
مقدار: 16px
--taav-space-5فاصله کارت
مقدار: 20px
--taav-space-6فاصله بخشها
مقدار: 24px
--taav-space-8فاصله صفحه
مقدار: 32px
--taav-field-block-gap-mdفاصله عمودی پیشفرض TaavFieldBlock
مقدار: 12px
--taav-field-grid-gap-mdگتر افقی پیشفرض TaavFieldGrid
مقدار: 16px
--taav-field-grid-responsive-gapفاصله ریسپانسیو business forms
مقدار: 16px
--taav-choice-chip-gapفاصله بین آیکن تیک و متن داخل choice chip
مقدار: 8px
--taav-choice-chip-group-gap-mdفاصله بین choice chipها در گروه
مقدار: 12px
--taav-layout-gap-comfortableفاصله بین بخشهای layout
مقدار: 24px
Radius
--taav-radius-smکنترلهای کوچک
مقدار: 6px
--taav-radius-mdدکمه و input
مقدار: 10px
--taav-radius-lgکارت استاندارد
مقدار: 14px
--taav-radius-xlپنل و hero
مقدار: 18px
--taav-radius-pillbadge و chip
مقدار: 9999px
--taav-choice-chip-radius-pillشعاع pill برای TaavChoiceChip
مقدار: 9999px
Shadow
--taav-shadow-xsسایه خیلی کم
مقدار: subtle
--taav-shadow-smکارت برجسته
مقدار: card
--taav-shadow-mdtooltip و منو
مقدار: dropdown
--taav-shadow-lgلایه بالاتر
مقدار: modal
Focus Ring
--taav-focus-ringحلقه فوکوس پیشفرض
وابسته به تم
--taav-input-focus-ringحلقه فوکوس input
وابسته به تم
--taav-choice-chip-focus-ringحلقه فوکوس TaavChoiceChip
وابسته به تم
--taav-control-focus-ringحلقه فوکوس کنترلها
وابسته به تم
Motion
--taav-duration-fastانیمیشن سریع
مقدار: 120ms
--taav-duration-normalانیمیشن استاندارد
مقدار: 180ms
--taav-duration-slowانیمیشن آهسته
مقدار: 280ms
Component Sizing
--taav-btn-height-mdارتفاع دکمه md
مقدار: 40px
--taav-badge-height-mdارتفاع badge md
مقدار: 28px
--taav-card-padding-mdpadding کارت md
مقدار: 20px
--taav-tooltip-padding-xpadding افقی tooltip
مقدار: 12px
--taav-input-height-mdارتفاع input md
مقدار: 42px
--taav-input-px-mdpadding افقی input
مقدار: 14px
--taav-input-borderمرز پیشفرض input
وابسته به تم
--taav-input-bg-disabledپسزمینه disabled
وابسته به تم
--taav-input-placeholderرنگ placeholder
وابسته به تم
--taav-textarea-min-height-mdحداقل ارتفاع textarea
مقدار: 108px
--taav-choice-chip-height-mdارتفاع پیشفرض TaavChoiceChip
مقدار: 40px
--taav-choice-chip-px-mdپدینگ افقی TaavChoiceChip
مقدار: 16px
--taav-control-size-mdاندازه checkbox/radio md
مقدار: 18px
--taav-switch-track-w-mdعرض track سوییچ
مقدار: 42px
--taav-segmented-height-mdارتفاع segmented control
مقدار: 38px
--taav-segmented-selected-bgپسزمینه گزینه انتخابشده
وابسته به تم
--taav-overlay-surfaceسطح dialog/dropdown
وابسته به تم
--taav-dialog-width-mdعرض dialog md
مقدار: 480px
--taav-drawer-width-mdعرض drawer md
مقدار: 400px
--taav-dropdown-item-height-mdارتفاع آیتم dropdown
مقدار: 36px
--taav-tabs-height-mdارتفاع tab trigger
مقدار: 40px
--taav-chip-height-mdارتفاع chip md
مقدار: 30px
--taav-skeleton-bgپسزمینه skeleton
وابسته به تم
--taav-table-row-height-comfortableارتفاع row جدول
مقدار: 48px
--taav-table-header-bgپسزمینه header جدول
وابسته به تم
--taav-page-bgپسزمینه page shell
وابسته به تم
--taav-page-container-normalعرض container استاندارد
مقدار: 960px
--taav-page-container-wideعرض container گسترده
مقدار: 1200px
--taav-page-padding-mdpadding page shell md
مقدار: 24px
--taav-section-padding-mdpadding section md
مقدار: 20px
--taav-section-surface-cardسطح section card
وابسته به تم
--taav-action-bar-heightارتفاع sticky action bar
مقدار: 64px
--taav-action-bar-surfaceسطح sticky action bar
وابسته به تم
--taav-sidebar-width-mdعرض sidebar panel md
مقدار: 320px
--taav-stats-tone-brandسطح stats card brand
وابسته به تم
--taav-progress-height-mdارتفاع progress bar
مقدار: 8px
--taav-progress-bgپسزمینه progress bar
وابسته به تم
--taav-scroll-thumbthumb عمومی taav-scrollarea
مقدار: rgba subtle
Business Sidebar
--taav-business-sidebar-width-defaultعرض سایدبار کسبوکار (DastRanj)
مقدار: 192px
--taav-business-sidebar-width-collapsedعرض سایدبار جمعشده
مقدار: 52px
--taav-business-sidebar-bgپسزمینه سایدبار enterprise
مقدار: rgba navy
--taav-business-sidebar-borderمرز سایدبار
مقدار: rgba line
--taav-business-sidebar-textمتن اصلی سایدبار
مقدار: #eef6ff
--taav-business-sidebar-text-mutedمتن muted منو
مقدار: #97adc7
--taav-business-sidebar-iconرنگ آیکون toolbar
مقدار: #14b8a6
--taav-business-sidebar-active-bgپسزمینه آیتم فعال
مقدار: teal tint
--taav-business-sidebar-toolbar-bgپسزمینه نوار میانبر
مقدار: teal tint
--taav-business-sidebar-menu-item-heightارتفاع آیتم منو
مقدار: 32px
--taav-business-sidebar-tenant-active-bgپسزمینه پنل tenant فعال
مقدار: gradient
--taav-business-sidebar-tenant-btn-bgدکمه tenant
مقدار: gradient
--taav-business-sidebar-footer-bgپسزمینه footer نسخه
مقدار: teal tint
--taav-business-sidebar-badge-bgنشان اعلان قرمز
مقدار: #ef4444
--taav-business-sidebar-scroll-thumbرنگ thumb scrollbar منو
مقدار: rgba subtle
--taav-business-sidebar-scroll-thumb-hoverhover thumb scrollbar منو
مقدار: rgba subtle
--taav-business-sidebar-header-back-bgپسزمینه دکمه بازگشت هدر مسیر
وابسته به تم
--taav-business-sidebar-header-textمتن برچسب مسیر در هدر
وابسته به تم
--taav-business-nav-path-bgپسزمینه breadcrumb کنار سایدبار
وابسته به تم
--taav-business-nav-path-text-currentمتن صفحه فعلی در breadcrumb
وابسته به تم
--taav-business-sidebar-preview-bgپسزمینه mock viewport در Lab
مقدار: #0a1018
--taav-business-sidebar-preview-borderمرز mock viewport در Lab
مقدار: rgba line
--taav-business-sidebar-collapsed-item-heightارتفاع آیتم منو در collapsed
مقدار: 36px
--taav-business-sidebar-collapsed-icon-sizeاندازه آیکون collapsed
مقدار: 14px
--taav-business-sidebar-collapsed-active-bgپسزمینه آیتم فعال collapsed
مقدار: teal tint
--taav-business-sidebar-collapsed-tenant-strip-heightارتفاع نوار tenant در collapsed
مقدار: 36px
--taav-scroll-minimal-sizeعرض scrollbar مینیمال
مقدار: 3px
--taav-scroll-minimal-thumbthumb scrollbar مینیمال
مقدار: rgba low
--taav-scroll-minimal-thumb-hoverhover thumb scrollbar مینیمال
مقدار: rgba hover
Module Card
--taav-module-card-surfaceسطح کارت ماژول ERP
وابسته به تم
--taav-module-card-borderمرز کارت ماژول
وابسته به تم
--taav-module-card-radiusشعاع گوشه کارت ماژول
مقدار: var(--taav-radius-lg)
--taav-module-card-shadowسایه پیشفرض کارت ماژول
وابسته به تم
--taav-module-card-shadow-hoverسایه hover کارت ماژول
وابسته به تم
--taav-module-card-header-heightارتفاع هدر الگویی کارت ماژول
مقدار: 52px
--taav-module-card-header-pattern-geometricالگوی هندسی هدر (light/dark)
وابسته به تم
--taav-module-card-title-mdتایپوگرافی عنوان کارت ماژول
مقدار: var(--taav-text-md)
--taav-module-card-description-mdتایپوگرافی توضیح کارت ماژول
مقدار: var(--taav-text-sm)
--taav-module-card-body-padding-mdpadding بدنه کارت ماژول
مقدار: 18px 18px 20px
--taav-module-card-surface-hoverپسزمینه hover کارت ماژول
وابسته به تم
--taav-module-card-surface-selectedپسزمینه انتخابشده کارت ماژول
وابسته به تم
--taav-module-card-disabled-opacityشفافیت حالت disabled/locked
مقدار: 0.58
--taav-module-card-grid-gap-mdفاصله پیشفرض گرید کارت ماژول
مقدار: var(--taav-space-4)
--taav-module-card-preview-bg-darkپسزمینه mock تیره در Lab
مقدار: #0a1018
--taav-module-card-preview-bg-lightپسزمینه mock روشن در Lab
مقدار: #f2f5f7
Business Intro Card
--taav-business-intro-card-surfaceسطح کارت معرفی بخش بیزینسی
وابسته به تم
--taav-business-intro-card-borderمرز کارت معرفی بخش
وابسته به تم
--taav-business-intro-card-radiusشعاع گوشه کارت معرفی
مقدار: var(--taav-radius-xl)
--taav-business-intro-card-padding-mdpadding پیشفرض کارت معرفی
مقدار: 18px 20px
--taav-business-intro-card-title-mdتایپوگرافی عنوان کارت معرفی
مقدار: var(--taav-text-lg)
--taav-business-intro-card-description-mdتایپوگرافی توضیح کارت معرفی
مقدار: var(--taav-text-sm)
--taav-business-intro-card-icon-bgپسزمینه آیکون کارت معرفی
وابسته به تم
--taav-business-intro-card-icon-colorرنگ آیکون کارت معرفی
وابسته به تم
--taav-business-intro-card-action-colorرنگ اکشن برگشت/ورود
وابسته به تم
--taav-business-intro-card-action-hover-bgپسزمینه hover اکشن
وابسته به تم
--taav-business-intro-card-max-width-normalعرض محدود پیشفرض کارت معرفی
مقدار: 720px
--taav-business-intro-card-preview-bg-darkپسزمینه mock تیره در Lab
مقدار: #0a1018
Activation Switch
--taav-activation-switch-active-bgپسزمینه سگمنت فعال
وابسته به تم
--taav-activation-switch-inactive-bgپسزمینه سگمنت غیرفعال
وابسته به تم
Details Link
--taav-details-link-textمتن لینک جزئیات
وابسته به تم
Recommendation Card
--taav-recommendation-card-surfaceسطح کارت پیشنهاد تنظیمات
وابسته به تم
--taav-recommendation-card-borderمرز کارت پیشنهاد
وابسته به تم
--taav-recommendation-card-max-width-wideعرض wide کارت پیشنهاد
مقدار: 1040px