استخدام الرموز في الكود

طبقتان

الرموز على طبقتين: بدائية (سلالم ألوان خام، مثل color.dodger-blue.600) ودلالية (تصف الدور، مثل brand.primary التي تشير إلى البدائية). استهلك الدلالية دائما، لا البدائية ولا اللون الخام. هكذا يغيّر إعادة التلوين رمزا واحدا لا كل مكوّن.

كمتغيرات CSS

كل رمز متاح كمتغير CSS على :root. استخدمه مباشرة في أي خاصية.

.order-total {
  color: var(--color-fg-base-primary);
  background: var(--color-bg-base-section);
  border-radius: var(--shape-surface-base);
  padding: var(--spacing-inset-md);
  border: var(--border-base) solid var(--color-border-base-medium);
  box-shadow: var(--elevation-shadow-1);
  transition: background var(--motion-feedback-duration) var(--motion-feedback-easing);
}

عبر تيلويند

الإعداد المشترك @mercato/tokens/tailwind يوفّر أدوات مربوطة بالرموز: الألوان (bg-primary، text-ink، border-hairline)، والاستدارة (rounded-* مربوطة بسلّم الاستدارة)، والحركة. استخدم الأدوات القياسية؛ لا تكتب قيمة خام بين قوسين حيث يوجد رمز.

<div className="rounded-2xl border border-hairline bg-surface text-ink p-4">
  {/* rounded-2xl resolves to var(--radius-xl); bg-surface, text-ink, */}
  {/* border-hairline resolve to the semantic color tokens. */}
</div>

الحزمة

الرموز تُشحن كحزمة: استورد طبقة الـ CSS مرة في جذر التطبيق، والإعداد المشترك في تيلويند.

// app entry
import "@mercato/tokens/css";

// tailwind.config
module.exports = { presets: [require("@mercato/tokens/tailwind")] };

أهداف المنصّات

المصدر الوحيد للرموز آلي القراءة (tokens.json). من نفس المصدر تتولّد أهداف أخرى للمنصّات، فلا يُعاد إدخال أي قيمة يدويا: الويب يستهلك متغيّرات CSS، والمنصّات الأصلية تسحب الملف المولّد المناسب.

تُبنى كل الأهداف بأمر واحد. القيم الملوّنة والمسافات والمدد تعبر إلى الأهداف المطبوعة مباشرة.

npm run build --workspace @mercato/tokens
# -> tokens.css, tailwind-preset.cjs, theme.js,
#    MercatoTokens.swift, MercatoTokens.kt,
#    tokens.android.xml, tokens.style-dictionary.json, tokens.resolved.dtcg.json

import SwiftUI

Button("إرسال الطلبية") { submit() }
  .background(MercatoTokens.Colors.brandPrimary)
  .padding(MercatoTokens.Spacing.space300)

import design.mercato.tokens.MercatoTokens

Button(
  onClick = ::submit,
  colors = ButtonDefaults.buttonColors(containerColor = MercatoTokens.Colors.BrandPrimary),
) { Text("إرسال الطلبية") }

افعل ولا تفعل