styles —— مصدر الأنماط

styles/ هو المصدر الوحيد لأنماط مكوّنات العائلة بصيغة BEM (الخط الأحمر 2): 58 دليل مكوّن + طبقة الرموز theme/common/. ولا يُسمح لأي مكتبة واجهة بنسخ الأنماط وتعديلها يدويًا.

بنية الدليل

styles/
├── index.scss                  # التجميع الكامل (الرموز + كل المكوّنات)، استيراد بسطر واحد
├── theme/
│   ├── common/
│   │   ├── var.scss            # رموز الوضع الفاتح (:root، 185 متغير CSS)
│   │   ├── var-dark.scss       # تجاوزات الوضع الداكن ([data-theme='dark'], .dark، 118 عنصرًا)
│   │   ├── variables.scss      # طبقة متغيرات SCSS (183 متغيرًا $lh-*، ثوابت في وقت الترجمة)
│   │   ├── patterns.scss       # نظام الزخارف الصينية (6 زخارف)
│   │   ├── transition.scss     # المصدر الوحيد لأسماء أصناف الانتقال عبر الأطراف (3 mixin)
│   │   └── …                   # طبقة mixin / function العامة
│   └── index.scss              # مدخل تجميع السمة
├── button/index.scss           # أنماط المكوّن (58 دليلًا)
├── dialog/index.scss
└── …

كل دليل مكوّن هو ملف index.scss واحد، يُستورد عبر @lh-ui/share/styles/<name> (يحلّ vite الدليل إلى index).

طريقة الاستيراد

// أربع طرق للاستيراد (انظر البدء)
import '@lh-ui/share/styles/button'        // مكوّن واحد
import '@lh-ui/share/styles'                // الكل (styles/index.scss)
import '@lh-ui/share/styles/theme'          // رموز السمة فقط
import '@lh-ui/share/styles/theme/common/var-dark'  // وصول إلى ملف محدد

تختلف استراتيجية الحقن في كل مكتبة واجهة: يحقن plus كل الأنماط عند مدخل المكتبة، أما vue2 فيستورد المستخدم عند الطلب (انظر استراتيجية الحقن).

اتفاقيات BEM

تأخذ أسماء الأصناف دائمًا البادئة lh- + ثلاث طبقات من BEM:

.lh-button {                    // Block
  &__text { }                   // Element
  &--primary { }                // Modifier
  &__text--disabled { }         // Element + Modifier
  &.is-loading { }              // صنف الحالة (بادئة is-، دون نطاق تسمية)
}

تُولَّد الأسماء بواسطة createNamespace لضمان الاتساق في العائلة بأكملها.
أصناف الحالة تستخدم البادئة is- (is-loading / is-disabled / is-open)، وليست معدِّلات BEM.
عند إضافة أسماء أصناف جديدة يجب تحديث docs/src/data/classes.json (يُولَّد بواسطة scripts/gen-docs-data.mjs الذي يفحص styles/*/index.scss).

ثلاث طبقات للرموز

الطبقة	الملف	العدد	الخصائص
متغيرات CSS (فاتح)	`var.scss`	185 عنصرًا	`:root { --lh-*: ... }`، يمكن تجاوزها في وقت التشغيل
متغيرات CSS (داكن)	`var-dark.scss`	118 عنصرًا	`[data-theme='dark'], .dark { ... }` تجاوز الفاتح
متغيرات SCSS	`variables.scss`	183 متغيرًا	`$lh-`، مخبوزة في وقت الترجمة*

لا تستهلك المكوّنات إلا متغيرات CSS

// ✅ صحيح: سلسلة fallback عبر var()، تُقيَّم في وقت التشغيل
.lh-button--primary {
  color: var(--lh-color-on-primary, #fff);
  background: var(--lh-primary-color, #1677ff);
}

// ❌ خطأ: الإشارة المباشرة إلى متغير SCSS، لن ينقلب في الوضع الداكن
.lh-button--primary {
  background: #{$lh-primary-color};
}

فخ الخبز في وقت الترجمة

الرموز التي تأخذ في var.scss قيمًا بصيغة #{$lh-foo} تُستبدل متغيراتها SCSS في وقت الترجمة بقيم فاتحة ملموسة، فلا تنقلب تلقائيًا في الوضع الداكن. ويجب أن تشير هذه الرموز بشكل صريح من جديد إلى الرموز الدلالية الداكنة داخل var-dark.scss:

[data-theme='dark'],
.dark {
  --lh-menu-item-color: var(--lh-text-primary);   // ← إعادة توجيه صريحة
}

أدّى مثل هذا النقص في السابق إلى بقاء نصوص القوائم / الجداول / الخطوط الزمنية تأخذ قيمًا فاتحة فلا تظهر في الوضع الداكن. ويقوم على حراسة ذلك البند السابع من pnpm verify:styles (إمكانية الوصول في الوضع الداكن). وفي المقابل فإن سلسلة fallback var(--lh-foo, var(--lh-bar, #x)) داخل المكوّن تُقيَّم في وقت التشغيل، فتكون آمنة ما دام في السلسلة رمز لديه تجاوز داكن، دون الحاجة إلى إعادة التصريح. لمزيد من التفاصيل انظر الوضع الداكن.

ملف `styles/index.scss` مُولَّد

ملف التجميع الكامل يُولَّد بواسطة scripts/build-styles.mjs عبر فحص أدلة المكوّنات، ويتحقق verify:styles من اتساقه —— لا تُعدِّله يدويًا. وأي دليل مكوّن جديد يُغطَّى تلقائيًا بالتجميع.

علامة hairline المُلغاة

~~يجب أن تحمل إعلادات الحدود الرفيعة 1px علامة سطرية /* hairline */~~ —— هذا الخط الأحمر مُلغى (فقد أصبح uniapp v3 يُخرج px مباشرةً دون ترجمة rpx، ففقدت العلامة فائدتها؛ انظر docs/bugfix-log.md D-02). وتُحفَظ العلامات التاريخية البالغ عددها 65 داخل styles/ كتعليقات عادية، ولا تحتاج حدود 1px الجديدة إلى علامة بعد الآن. أما الحدود الهيكلية (2px / 3px) فلم تكن تُوسَّم أصلًا.

الجدول الكامل لرموز السمة

主色与衍生语义

令牌	暗色	SCSS 源
`--lh-primary-color`	`#3D649E`	`$lh-primary`
`--lh-primary-color-hover`	`#5078AB`	`$lh-primary-hover`
`--lh-primary-color-active`	`#2B4C7C`	`$lh-primary-active`
`--lh-primary-color-bg`	`color-mix(in srgb, var(--lh-primary-color) 25%, transparent)`	`$lh-primary-light`
`--lh-primary-color-border`	`#2A3A4A`	`$lh-primary-lighter`
`--lh-color-on-primary`	`#fff`	`$lh-on-primary`

状态

令牌	明色	暗色	SCSS 源	备注
`--lh-hover-bg-color`		`rgba(255, 255, 255, 0.08)`	`$lh-hover-bg`
`--lh-selected-color`		`color-mix(in srgb, var(--lh-primary-color) 40%, #fff)`	—

功能色

令牌	暗色	SCSS 源
`--lh-success-color`	`#6FA36E`	`$lh-success`
`--lh-success-color-hover`	`#82B581`	`$lh-success-hover`
`--lh-success-color-active`	`#5B8C5A`	`$lh-success-active`
`--lh-success-color-bg`	`#1A2A1A`	`$lh-success-light`
`--lh-warning-color`	`#D4B76F`	`$lh-warning`
`--lh-warning-color-hover`	`#E0C680`	`$lh-warning-hover`
`--lh-warning-color-active`	`#C4A35A`	`$lh-warning-active`
`--lh-warning-color-bg`	`#2A251A`	`$lh-warning-light`
`--lh-danger-color`	`#C45050`	`$lh-danger`
`--lh-danger-color-hover`	`#D46060`	`$lh-danger-hover`
`--lh-danger-color-active`	`#B23A3A`	`$lh-danger-active`
`--lh-danger-color-bg`	`#2A1A1A`	`$lh-danger-light`
`--lh-info-color`	`#8F8F8F`	`$lh-info`
`--lh-info-color-hover`	`#A0A0A0`	`$lh-info-hover`
`--lh-info-color-active`	`#7A7A7A`	`$lh-info-active`
`--lh-info-color-bg`	`#1A1A1A`	`$lh-info-light`

国风装饰色

令牌	暗色	SCSS 源
`--lh-gold-color`	`#D4A843`	`$lh-gold`
`--lh-gold-color-hover`	`#E8C35C`	`$lh-gold-hover`
`--lh-gold-color-active`	`#B8860B`	`$lh-gold-active`
`--lh-gold-color-bg`	`#2A241A`	`$lh-gold-light`
`--lh-gold-color-border`	`#3A2E1A`	`$lh-gold-lighter`
`--lh-vermilion-color`	`#E85D4A`	`$lh-vermilion`
`--lh-vermilion-color-hover`	`#FF7B6B`	`$lh-vermilion-hover`
`--lh-vermilion-color-active`	`#C43A31`	`$lh-vermilion-active`
`--lh-vermilion-color-bg`	`#2A1A18`	`$lh-vermilion-light`
`--lh-jade-color`	`#7AAE7A`	`$lh-jade`
`--lh-jade-color-hover`	`#9CC89C`	`$lh-jade-hover`
`--lh-jade-color-active`	`#5B8C5A`	`$lh-jade-active`
`--lh-jade-color-bg`	`#1A2A1A`	`$lh-jade-light`
`--lh-decoration-color`	`rgba(212, 168, 67, 0.08)`	`$lh-decoration-color`

文本

令牌	暗色	SCSS 源
`--lh-text-primary`	`#E8E0D8`	`$lh-text-primary`
`--lh-text-regular`	`#C8C0B8`	`$lh-text-regular`
`--lh-text-secondary`	`#A09890`	`$lh-text-secondary`
`--lh-text-placeholder`	`#7A7270`	`$lh-text-placeholder`
`--lh-text-disabled`	`#5A5250`	`$lh-text-disabled`

边框

令牌	暗色	SCSS 源
`--lh-border-color-base`	`#3A3530`	`$lh-border-color-base`
`--lh-border-color-light`	`#302B28`	`$lh-border-color-light`
`--lh-border-color-lighter`	`#2A2520`	`$lh-border-color-lighter`
`--lh-border-color-extra-light`	`#242018`	`$lh-border-color-extra-light`

圆角

令牌	暗色	SCSS 源
`--lh-border-radius-base`	沿用明色	`$lh-border-radius-base`
`--lh-border-radius-small`	沿用明色	`$lh-border-radius-small`
`--lh-border-radius-round`	沿用明色	`$lh-border-radius-round`
`--lh-border-radius-circle`	沿用明色	`$lh-border-radius-circle`

背景

令牌	暗色	SCSS 源
`--lh-bg-color`	`#2A2520`	`$lh-bg-color`
`--lh-bg-color-page`	`#1E1A16`	`$lh-bg-color-page`
`--lh-bg-color-disabled`	`#242018`	`$lh-bg-color-disabled`
`--lh-bg-color-overlay`	`rgba(10, 8, 6, 0.7)`	`$lh-bg-color-overlay`

阴影

令牌	暗色	SCSS 源
`--lh-box-shadow-base`	`0 2px 12px 0 rgba(0, 0, 0, 0.5)`	`$lh-box-shadow-base`
`--lh-box-shadow-light`	`0 2px 4px 0 rgba(0, 0, 0, 0.4)`	`$lh-box-shadow-light`
`--lh-box-shadow-lighter`	`0 0 4px 0 rgba(0, 0, 0, 0.3)`	`$lh-box-shadow-lighter`

字体

令牌	暗色	SCSS 源
`--lh-font-family`	沿用明色	`$lh-font-family`
`--lh-font-size-extra-large`	沿用明色	`$lh-font-size-extra-large`
`--lh-font-size-large`	沿用明色	`$lh-font-size-large`
`--lh-font-size-medium`	沿用明色	`$lh-font-size-medium`
`--lh-font-size-base`	沿用明色	`$lh-font-size-base`
`--lh-font-size-small`	沿用明色	`$lh-font-size-small`
`--lh-font-size-extra-small`	沿用明色	`$lh-font-size-extra-small`
`--lh-font-weight-primary`	沿用明色	`$lh-font-weight-primary`
`--lh-font-weight-bold`	沿用明色	`$lh-font-weight-bold`
`--lh-font-line-height-primary`	沿用明色	`$lh-font-line-height-primary`

组件级 · control

令牌	暗色	SCSS 源
`--lh-control-height-mini`	沿用明色	`$lh-control-height-mini`
`--lh-control-height-small`	沿用明色	`$lh-control-height-small`
`--lh-control-height-medium`	沿用明色	`$lh-control-height-medium`
`--lh-control-height-large`	沿用明色	`$lh-control-height-large`
`--lh-control-height-x-large`	沿用明色	`$lh-control-height-x-large`

间距

令牌	暗色	SCSS 源
`--lh-spacing-xs`	沿用明色	`$lh-spacing-xs`
`--lh-spacing-sm`	沿用明色	`$lh-spacing-sm`
`--lh-spacing-md`	沿用明色	`$lh-spacing-md`
`--lh-spacing-base`	沿用明色	`$lh-spacing-base`
`--lh-spacing-lg`	沿用明色	`$lh-spacing-lg`
`--lh-spacing-xl`	沿用明色	`$lh-spacing-xl`
`--lh-spacing-xxl`	沿用明色	`$lh-spacing-xxl`

层级

令牌	暗色	SCSS 源
`--lh-z-index-normal`	沿用明色	`$lh-z-index-normal`
`--lh-z-index-dropdown`	沿用明色	`$lh-z-index-dropdown`
`--lh-z-index-sticky`	沿用明色	`$lh-z-index-sticky`
`--lh-z-index-fixed`	沿用明色	`$lh-z-index-fixed`
`--lh-z-index-modal-backdrop`	沿用明色	`$lh-z-index-modal-backdrop`
`--lh-z-index-modal`	沿用明色	`$lh-z-index-modal`
`--lh-z-index-popover`	沿用明色	`$lh-z-index-popover`
`--lh-z-index-tooltip`	沿用明色	`$lh-z-index-tooltip`

过渡

令牌	暗色	SCSS 源
`--lh-transition-duration-fast`	沿用明色	`$lh-transition-duration-fast`
`--lh-transition-duration-base`	沿用明色	`$lh-transition-duration-base`
`--lh-transition-duration-slow`	沿用明色	`$lh-transition-duration-slow`
`--lh-transition-function-ease-in-out`	沿用明色	`$lh-transition-function-ease-in-out`

禁用态

令牌	暗色	SCSS 源
`--lh-disabled-bg-color`	`#242018`	`$lh-disabled-bg-color`
`--lh-disabled-text-color`	`#5A5250`	`$lh-disabled-text-color`
`--lh-disabled-border-color`	`#302B28`	`$lh-disabled-border-color`
`--lh-disabled-opacity`	`0.5`	`$lh-disabled-opacity`

组件级 · popover

令牌	暗色	SCSS 源
`--lh-popover-bg-color`	`#2A2520`	`$lh-popover-bg-color`
`--lh-popover-border-color`	`#3A3530`	`$lh-popover-border-color`
`--lh-popover-border-radius`	沿用明色	`$lh-popover-border-radius`
`--lh-popover-padding`	沿用明色	`$lh-popover-padding`
`--lh-popover-title-color`	`#E8E0D8`	`$lh-popover-title-color`
`--lh-popover-content-color`	`#C8C0B8`	`$lh-popover-content-color`
`--lh-popover-arrow-size`	沿用明色	`$lh-popover-arrow-size`

组件级 · popconfirm

令牌	明色	暗色	SCSS 源	备注
`--lh-popconfirm-padding`		沿用明色	`$lh-popconfirm-padding`
`--lh-popconfirm-icon-size`		沿用明色	`$lh-popconfirm-icon-size`

组件级 · drawer

令牌	暗色	SCSS 源
`--lh-drawer-bg-color`	`#2A2520`	`$lh-drawer-bg-color`
`--lh-drawer-border-color`	`#3A3530`	`$lh-drawer-border-color`
`--lh-drawer-header-padding`	沿用明色	`$lh-drawer-header-padding`
`--lh-drawer-body-padding`	沿用明色	`$lh-drawer-body-padding`
`--lh-drawer-footer-padding`	沿用明色	`$lh-drawer-footer-padding`
`--lh-drawer-title-color`	`#E8E0D8`	`$lh-drawer-title-color`
`--lh-drawer-close-size`	沿用明色	`$lh-drawer-close-size`

组件级 · dropdown

令牌	暗色	SCSS 源
`--lh-dropdown-bg-color`	`#2A2520`	`$lh-dropdown-bg-color`
`--lh-dropdown-border-color`	`#3A3530`	`$lh-dropdown-border-color`
`--lh-dropdown-border-radius`	沿用明色	`$lh-dropdown-border-radius`
`--lh-dropdown-padding`	沿用明色	`$lh-dropdown-padding`
`--lh-dropdown-item-height`	沿用明色	`$lh-dropdown-item-height`
`--lh-dropdown-item-padding`	沿用明色	`$lh-dropdown-item-padding`
`--lh-dropdown-item-color`	`#C8C0B8`	`$lh-dropdown-item-color`
`--lh-dropdown-item-hover-bg-color`	`var(--lh-hover-bg-color)`	`$lh-dropdown-item-hover-bg-color`
`--lh-dropdown-divider-color`	`#302B28`	`$lh-dropdown-divider-color`

组件级 · message

令牌	暗色	SCSS 源
`--lh-message-bg`	`#2A2520`	`$lh-message-bg-color`
`--lh-message-border`	`#3A3530`	`$lh-message-border-color`
`--lh-message-color`	`#C8C0B8`	`$lh-message-content-color`
`--lh-message-shadow`	沿用明色	`$lh-message-shadow`

组件级 · notification

令牌	暗色	SCSS 源
`--lh-notification-bg`	`#2A2520`	`$lh-notification-bg-color`
`--lh-notification-border`	`#3A3530`	`$lh-notification-border-color`
`--lh-notification-title-color`	`#E8E0D8`	`$lh-notification-title-color`
`--lh-notification-content-color`	`#C8C0B8`	`$lh-notification-content-color`
`--lh-notification-width`	沿用明色	`$lh-notification-width`
`--lh-notification-gap`	沿用明色	`$lh-notification-gap`
`--lh-notification-shadow`	沿用明色	`$lh-notification-shadow`

组件级 · loading

令牌	明色	暗色	SCSS 源	备注
`--lh-loading-bg`		`rgba(10, 8, 6, 62%)`	`$lh-loading-bg-color`
`--lh-loading-text-color`		`#C8C0B8`	`$lh-loading-text-color`

组件级 · timeline

令牌	暗色	SCSS 源
`--lh-timeline-line`	`#302B28`	`$lh-timeline-line`
`--lh-timeline-dot`	`var(--lh-info-color)`	`$lh-timeline-dot`
`--lh-timeline-timestamp`	`var(--lh-text-secondary)`	`$lh-timeline-timestamp`

组件级 · collapse

令牌	明色	暗色	SCSS 源	备注
`--lh-collapse-border`		`#302B28`	`$lh-collapse-border`

组件级 · rate

令牌	明色	暗色	SCSS 源	备注
`--lh-rate-active`		`var(--lh-warning-color)`	`$lh-rate-active`

组件级 · segmented

令牌	明色	暗色	SCSS 源	备注
`--lh-segmented-bg`		`#242018`	`$lh-segmented-bg`

组件级 · calendar

令牌	明色	暗色	SCSS 源	备注
`--lh-calendar-border`		`var(--lh-border-color-lighter)`	`$lh-calendar-border`

组件级 · affix

令牌	明色	暗色	SCSS 源	备注
`--lh-affix-z-index`		沿用明色	`$lh-affix-z-index`

组件级 · backtop

令牌	明色	暗色	SCSS 源	备注
`--lh-backtop-z-index`		沿用明色	`$lh-backtop-z-index`

组件级 · menu

令牌	暗色	SCSS 源
`--lh-menu-bg`	`#242018`	`$lh-menu-bg`
`--lh-menu-padding`	沿用明色	`$lh-menu-padding`
`--lh-menu-border`	`#302B28`	`$lh-menu-border`
`--lh-menu-height`	沿用明色	`$lh-menu-height`
`--lh-menu-collapse-width`	沿用明色	`$lh-menu-collapse-width`
`--lh-menu-item-height`	沿用明色	`$lh-menu-item-height`
`--lh-menu-item-padding`	沿用明色	`$lh-menu-item-padding`
`--lh-menu-item-color`	`var(--lh-text-primary)`	`$lh-menu-item-color`
`--lh-menu-item-hover-bg`	`#302B28`	`$lh-menu-item-hover-bg`
`--lh-menu-item-active-color`	`var(--lh-selected-color)`	`$lh-menu-item-active-color`
`--lh-menu-item-active-bg`	`var(--lh-primary-color-bg)`	`$lh-menu-item-active-bg`
`--lh-menu-arrow-color`	`var(--lh-text-secondary)`	`$lh-menu-arrow-color`
`--lh-menu-z-index`	沿用明色	`$lh-menu-z-index`

组件级 · table

令牌	暗色	SCSS 源
`--lh-table-bg`	`#242018`	`$lh-table-bg`
`--lh-table-color`	`var(--lh-text-regular)`	`$lh-table-color`
`--lh-table-header-bg`	`#2A2420`	`$lh-table-header-bg`
`--lh-table-header-color`	`var(--lh-text-primary)`	`$lh-table-header-color`
`--lh-table-border`	`#302B28`	`$lh-table-border`
`--lh-table-row-hover-bg`	`#2A2420`	`$lh-table-row-hover-bg`
`--lh-table-stripe-bg`	`color-mix(in srgb, var(--lh-bg-color-page) 60%, transparent)`	`$lh-table-stripe-bg`
`--lh-table-cell-padding`	沿用明色	`$lh-table-cell-padding`

组件级 · layout

令牌	暗色	SCSS 源
`--lh-layout-header-height`	沿用明色	`$lh-layout-header-height`
`--lh-layout-header-bg`	`#242018`	`$lh-layout-header-bg`
`--lh-layout-aside-width`	沿用明色	`$lh-layout-aside-width`
`--lh-layout-aside-bg`	`#242018`	`$lh-layout-aside-bg`
`--lh-layout-main-bg`	`#1C1815`	`$lh-layout-main-bg`
`--lh-layout-border`	`#302B28`	`$lh-layout-border`

组件级 · row

令牌	明色	暗色	SCSS 源	备注
`--lh-row-gutter`		沿用明色	`$lh-row-gutter`

组件级 · tree

令牌	暗色	SCSS 源
`--lh-tree-color`	`#D8D0C8`	`$lh-tree-color`
`--lh-tree-padding`	沿用明色	`$lh-tree-padding`
`--lh-tree-node-height`	沿用明色	`$lh-tree-node-height`
`--lh-tree-node-hover-bg`	`#2A2420`	`$lh-tree-node-hover-bg`
`--lh-tree-node-selected-color`	`var(--lh-selected-color)`	`$lh-tree-node-selected-color`
`--lh-tree-node-selected-bg`	`var(--lh-primary-color-bg)`	`$lh-tree-node-selected-bg`
`--lh-tree-arrow-color`	`var(--lh-text-secondary)`	`$lh-tree-arrow-color`

组件级 · transfer

令牌	暗色	SCSS 源
`--lh-transfer-panel-width`	沿用明色	`$lh-transfer-panel-width`
`--lh-transfer-panel-height`	沿用明色	`$lh-transfer-panel-height`
`--lh-transfer-bg`	`#242018`	`$lh-transfer-bg`
`--lh-transfer-border`	`#302B28`	`$lh-transfer-border`

组件级 · upload

令牌	暗色	SCSS 源
`--lh-upload-bg`	`#242018`	`$lh-upload-bg`
`--lh-upload-border`	`var(--lh-border-color-base)`	`$lh-upload-border`
`--lh-upload-trigger-padding`	沿用明色	`$lh-upload-trigger-padding`

组件级 · anchor

令牌	明色	暗色	SCSS 源	备注
`--lh-anchor-color`		`var(--lh-text-regular)`	`$lh-anchor-color`

组件级 · image

令牌	明色	暗色	SCSS 源	备注
`--lh-image-viewer-mask`		`rgba(0, 0, 0, 80%)`	—

无障碍焦点环

令牌	暗色	SCSS 源
`--lh-focus-color`	`#7FA6D9`	`$lh-primary`
`--lh-focus-ring-width`	沿用明色	—
`--lh-focus-ring-offset`	沿用明色	—

(تُولَّد بيانات الرموز بواسطة scripts/gen-docs-data.mjs الذي يحلِّل var.scss / var-dark.scss / variables.scss، مع تأكيدات على الأعداد.)

ملاحظات

تعديل الأنماط يتم في هذا المستودع فقط: لا يُسمح لأي مكتبة واجهة بإمساك نسخة من scss المكوّن. وتُستوعب اختلافات أسماء أصناف الانتقال عبر الأطراف بـ transition mixin.
الألوان دائمًا var(--lh-*, fallback)، ولا تُضاف قيم ألوان جامدة (يتولى حراستها بند var fallback في verify:styles).
يجب أن يملك المكوّن الجديد styles/<name>/index.scss، وإلا فلن يكون له مخرجات أنماط في أحد الأطراف (تخطٍّ صامت في سكريبت البناء دون خطأ).
اكتمال الوضع الداكن شرط إلزامي: تدعم جميع المكوّنات افتراضيًا الوضعين الفاتح والداكن، ويُعترض أي نقص في الوضع الداكن عبر البند السابع من verify:styles.