کاوش توکن های طراحی Typesafe در Tailwind 4

Summarize this content to 400 words in Persian Lang
Tailwind 4 برای مدتی در افق بوده است و تیم برای اولین بار پیشرفت خود را در مارس 2024 منبع باز کرد. به نظر من یکی از قابل توجه ترین تغییرات تغییر از یک پیکربندی مبتنی بر جاوا اسکریپت به یک پیکربندی مبتنی بر CSS است. . Tailwind 4 در حال حاضر در مرحله بتا است و از آنچه که من جمع‌آوری کرده‌ام، تیم هنوز با چالش‌هایی به‌ویژه سازگاری با Safari دست و پنجه نرم می‌کند.

توجه: بعداً در مقاله، فرض می‌کنیم که از یک چارچوب / کتابخانه مبتنی بر مؤلفه استفاده می‌کنید، اما مفاهیم مورد بحث به راحتی به روش‌های دیگر قابل انتقال هستند.

تغییرات در Tailwind 4

انتقال به یک پیکربندی CSS

من شکایاتی در این مورد شنیده ام، به خصوص از کاربران TypeScript. با این حال، نقشه راه برای Tailwind 4.0 شامل پشتیبانی از کلاسیک است tailwind.config.js به عنوان اولویت اصلی آن:

پشتیبانی از فایل‌های پیکربندی جاوا اسکریپت – با معرفی مجدد سازگاری با فایل کلاسیک tailwind.config.js برای آسان کردن مهاجرت به نسخه 4.

با این حال، به نظر می‌رسد که این در درجه اول برای مقاصد مهاجرت در نظر گرفته شده است و ممکن است یک راه‌حل بلندمدت پایدار نباشد.

این برای Typesafety به چه معناست

زیر کاپوت Tailwind 4 از جدید استفاده می کند @property قوانین CSS برای تعریف خصوصیات سفارشی داخلی.

استفاده می کنیم @property تا ویژگی های سفارشی داخلی خود را با انواع و محدودیت های مناسب تعریف کنیم

همانطور که وجود دارد، من نمی توانم پشتیبانی از برجسته سازی نحو مناسب را پیدا کنم @property قوانین موجود در کد VS، من با Bluesky تماس گرفتم تا ببینم آیا کسی از من شانس بیشتری داشته است.

امیدوارم بهتر باشه @property پشتیبانی می تواند در آینده به ما کمک کند، در ادامه بیشتر در مورد آن.

قانون CSS@property چیست

را @property قانون یک ثبت ویژگی سفارشی را مستقیماً در یک شیوه نامه بدون نیاز به اجرای جاوا اسکریپت نشان می دهد. قوانین معتبر @property منجر به یک ویژگی سفارشی ثبت شده می شود که شبیه فراخوانی است registerProperty() با پارامترهای معادل

توکن های طراحی چیست؟

اکنون که تغییرات آتی در Tailwind 4 و تأثیر بالقوه آنها را پوشش داده ایم، اجازه دهید لحظه ای در مورد توکن های طراحی صحبت کنیم. اگر با این اصطلاح آشنا نیستید، در اینجا یک توضیح سریع وجود دارد: نشانه های طراحی روشی برای ذخیره و مدیریت تصمیمات طراحی در قالبی سازگار و قابل استفاده مجدد، معمولاً به عنوان متغیر هستند. آنها ویژگی های بصری کلیدی یک سیستم طراحی مانند رنگ ها، تایپوگرافی، فاصله گذاری، سایه ها را به روشی ساختاریافته نشان می دهند. هدف این است که این مقادیر طراحی را متمرکز کنیم تا بتوان آنها را به راحتی به روز کرد، نگهداری کرد و در پلتفرم ها و ابزارهای مختلف به اشتراک گذاشت.

سیستم های طراحی معمولاً از دو نوع ارزش اصلی تشکیل می شوند: System values و Component values. به عنوان مثال، مقادیر سیستم شما ممکن است چیزی شبیه به این باشد:

const SYSTEM_TOKENS: ISystemTokens = {
/* … */
COLORS: {
/* … */
GREEN: {
LIGHT: “#E0E5D9”,
MEDIUM: “#3F6212”,
DARK: “#28331A”,
}
/* … */
},
TYPOGRAPHY: {
/* … */
}
/* … */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس می توانید مقادیر سیستم خود را در توکن های مؤلفه خود به این صورت ارجاع دهید:

import { SYSTEM_TOKENS } from “…”;

const BUTTON_VALUES: IButtonTokens = {
/* … */
COLORS: {
/* … */
BACKGROUND: SYSTEM_TOKENS.COLORS.GREEN.DARK,
/* … */
},
TYPOGRAPHY: {
/* … */
}
/* … */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اگر علاقه مند به یادگیری بیشتر در مورد سیستم های طراحی هستید، ارزش بررسی سیستم های شناخته شده ای مانند طراحی مواد را دارد.

ساختار توکن های طراحی اجزا با Tailwind

حدود یک هفته پیش، مقاله‌ای نوشتم که در مورد رویکرد جایگزینی که برای ایجاد انواع کامپوننت با Tailwind CSS استفاده می‌کردم بحث می‌کردم. به طور خلاصه، این مقاله به بررسی این موضوع می‌پردازد که چگونه می‌توانیم متغیرهای CSS را در کنار Tailwind برای مدیریت انواع پیچیده، تنظیم مقادیر متغیر از طریق اجزای پویا و نگاشت متغیرها، به کار ببریم. اگر کنجکاو هستید که چگونه به این رویکرد رسیدم، می‌توانید در اینجا بیشتر در مورد آن بخوانید: رویکردی متفاوت برای نوشتن انواع مؤلفه‌ها با Tailwind CSS.

ما باید با شناسایی قسمت‌هایی از مؤلفه‌مان که به توکن‌های طراحی وابسته هستند، شروع کنیم. همانطور که قبلا ذکر شد، این شامل رنگ‌ها، تایپوگرافی، فاصله و سایر مقادیر ثابت سیستمی است که در طراحی شما ضروری است. بیایید نگاهی به موارد زیر بیندازیم Button component، بدون نشانه های طراحی:

class=”p-4 bg-red text-white rounded-lg relative flex justify-center”>Click me

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در مثال بالا، می‌توانیم چندین مقدار را مشخص کنیم که می‌توان آنها را نشانه‌گذاری کرد. هر یک از کلاس های زیر می تواند با یک مقدار در سیستم طراحی ما مطابقت داشته باشد:

اکنون که مقادیری را که می توان نشانه گذاری کرد شناسایی کردیم، می توانیم آنها را به دو گروه دسته بندی کنیم: static values و dynamic ارزش ها مقادیر استاتیک آنهایی هستند که در مؤلفه شما ثابت می مانند، در حالی که مقادیر پویا آنهایی هستند که می توانند بر اساس موارد ارسال شده به مؤلفه تغییر کنند. برای مثال ما بالشتک را می سازیم (p-4استاتیک، در حالی که رنگ متن (text-white) و پس زمینه (bg-red) باید به صورت پویا از طریق a تنظیم شود theme پشتیبانی

ایجاد توکن ها

پیکربندی Tailwind 4

ابتدا باید خودمان را تعریف کنیم System tokens در پیکربندی جدید Tailwind CSS:

@import “tailwindcss”;

@theme {
–color-white: #FFFFFF;
–color-green-light: #E0E5D9;
–color-green-medium: #3F6212;
–color-green-dark: #28331A;
–color-red-light: #F4CCCC;
–color-red-medium: #D50000;
–color-red-dark: #640000;

–spacing-sm: 1rem;
–spacing-md: 2rem;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توکن های سیستم

بعد ما باید خودمان را ایجاد کنیم system.tokens.ts فایل:

export type TColor = “–color-white” | “–color-green-light” | “–color-green-medium” | “–color-green-dark” | “–color-red-light” | “–color-red-medium” | “–color-red-dark”;

export type TSpacing = “–spacing-sm” | “–spacing-md”;

interface ISystemTokens {
COLORS: {
WHITE: TColor;
GREEN: {
LIGHT: TColor;
MEDIUM: TColor;
DARK: TColor;
},
RED: {
LIGHT: TColor;
MEDIUM: TColor;
DARK: TColor;
}
},
SPACING: {
SMALL: TSpacing;
MEDIUM: TSpacing;
}
}

export const SYSTEM_TOKENS: ISystemTokens {
COLORS: {
WHITE: “–color-white”;
GREEN: {
LIGHT: “–color-green-light”;
MEDIUM: “–color-green-light”;
DARK: “–color-green-light”;
},
RED: {
LIGHT: “–color-red-light”;
MEDIUM: “–color-red-medium”;
DARK: “–color-red-dark”;
}
},
SPACING: {
SMALL: “–spacing-sm”;
MEDIUM: “–spacing-md”;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نشانه های طراحی سیستم را می توان در طرح هایی مانند موارد زیر ارجاع داد:$system.COLORS.GREEN.LIGHT.

در یک دنیای ایده‌آل، ما می‌توانیم انواع را مستقیماً از قواعد Property@ فایل CSS خود به ما صادر کنیم TColor و TSpacing انواع، بسیار شبیه نحوه تبدیل واردات SCSS به جاوا اسکریپت. متأسفانه، در حال حاضر، تا جایی که من می دانم، این امکان پذیر نیست.

توکن های کامپوننت

اکنون که توکن‌های سیستم خود را پیاده‌سازی کرده‌ایم، می‌توانیم شروع به ادغام آنها در اجزای خود کنیم. اولین قدم این است که ما را راه اندازی کنیم .tokens.ts فایل برای نشان دادن این موضوع، بیایید مولفه Button را که قبلا به آن نگاه کردیم، مثال بزنیم و یک متن مربوطه ایجاد کنیم. Button.tokens.ts file.

برای جمع بندی، در اینجا نحوه ساختار مولفه Button ما آمده است:

class=”p-4 bg-red text-white rounded-lg relative flex justify-center”>Click me

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

قبلاً، ما در مورد تمایز بین مقادیر استاتیک (مانند p-4) و مقادیر پویا (مانند bg-red و text-white). این تمایز نحوه سازماندهی توکن های طراحی خود را راهنمایی می کند. خواص استاتیک، مانند p-4، باید در زیر گروه بندی شود STATIC، در حالی که خواص پویا مانند bg-red و text-white، باید تحت شناسه prop مناسب گروه بندی شوند. در این مورد، از آنجایی که ما در حال کنترل هستیم bg-red و text-white از طریق a theme پایه، آنها باید در زیر قرار داده شوند THEME بخش در فایل توکن ما. برای مثال ما 2 متغیر موضوعی را در نظر می گیریم – PRIMARY و SECONDARY.

import { SYSTEM_TOKENS, TColor, TSpacing } from “./system.tokens.ts”;
import { TTheme } from “./Button”; // PRIMARY, SECONDARY

interface IButtonStaticTokens {
padding: TSpacing;
}

interface IButtonThemeTokens {
backgroundColor: TColor;
textColor: TColor;
}

export const STATIC: IButtonStaticTokens {
padding: “–spacing-sm”;
}

export const THEME: IButtonStaticTokens {
PRIMARY: {
backgroundColor: “–color-red-dark”;
textColor: “–color-red-light”;
},
SECONDARY: {
backgroundColor: “–color-green-dark”;
textColor: “–color-green-light”;
};
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توکن های طراحی کامپوننت را می توان در طرح هایی مانند موارد زیر ارجاع داد: $component.Button.THEME.PRIMARY.backgroundColor. ترجیح من برای قراردادهای نامگذاری استفاده از:$component…tokenName

$component: تفاوت بین $system و $component توکن ها: از قرارداد نامگذاری فایل داخلی برای اجزا پیروی کنیدPROP_NAME: مورد ثابتPROP_VALUE: باید از پوشش داخلی ارزش پایه پیروی کندToken name (backgroundColor): مورد شتر*

این در نهایت یک موضوع ترجیحی شخصی است و این شما هستید که تصمیم می گیرید چه چیزی برای گردش کار شما بهترین کار را انجام می دهد.

هنگام نام‌گذاری نشانه‌ها، اگر بخواهم نشانه‌ای را برای وضعیت یک عنصر مشخص کنم، از حروف Camel کمی منحرف می‌شوم. :hover. در این موارد، پیشوند نام رمز را با حالت و به دنبال آن دو خط زیر می‌زنم، مانند: hover__backgroundColor.

استفاده از نشانه های طراحی در کامپوننت ها

همانطور که قبلاً در مقاله ذکر کردم، قبلاً در مورد بررسی روشی متفاوت برای نوشتن انواع مؤلفه با Tailwind CSS نوشتم. من در اینجا به آن رویکرد اشاره خواهم کرد، بنابراین اگر هنوز آن را نخوانده اید، ممکن است برای درک زمینه پشت این روش، ابتدا آن را بررسی کنید.

در این قسمت از مقاله فرض می شود که شما از یک چارچوب یا کتابخانه جاوا اسکریپت برای ساخت اجزای خود استفاده می کنید.

به روز رسانی مولفه Button

ما باید کلاس‌های قابل‌توکنیزاسیون موجود را با کلاس‌های Tailwind که توسط متغیرهای css تغذیه می‌شوند جایگزین کنیم. توجه داشته باشید که نام متغیرها با نام های موجود در رابط های نشانه مؤلفه 2 دکمه ما مطابقت دارد. IButtonStaticTokens و IButtonThemeTokens;

class=”p-[–padding] bg-[–backgroundColor] text-[–textColor] rounded-lg relative flex justify-center”>Click me

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون که کلاس های خود را به روز کرده ایم، باید سبک های مؤلفه را به صورت پویا اعمال کنیم و متغیرها را به روز کنیم. برای رسیدن به این هدف، از a استفاده خواهیم کرد variableMap عملکرد روی کامپوننت در اصل، این تابع توکن‌های ما را از آن نقشه‌برداری می‌کند Button.tokens.ts متغیرهای CSS را مستقیماً روی کامپوننت قرار دهیم که کلاس‌های ما می‌توانند به آن ارجاع دهند. برای مثالی از یک نقشه متغیر لطفاً انتهای این مقاله را ببینید.

<template>

:style=”[variableMap(STATIC), variableMap(THEME[props.THEME])]”
class=”p-[–padding] bg-[–backgroundColor] text-[–textColor] rounded-lg relative flex justify-center”
>
Click me

template>
<script setup lang=”ts”>
import { variableMap } from “…”;
import { STATIC, THEME } from “Button.tokens.ts”;

const props = /*THEME*/
script>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

من مشتاقانه منتظر انتشار Tailwind 4 هستم و اینکه تیم چه تغییراتی را از حالا تا آن زمان ایجاد می کند. من از آزمایش ایده‌هایی برای مقابله با برخی از چالش‌های مربوط به نشانه‌های طراحی، انواع مختلف و ایمنی نوع لذت برده‌ام.

این یک رویکرد تجربی است که من مطمئن هستم که نظرات قوی در مورد آن وجود خواهد داشت.

اگر این مقاله برای شما جالب یا مفید بود، لطفاً من را در Bluesky (من در اینجا بیشتر فعال هستم)، Medium، Dev و/یا Twitter دنبال کنید.

const SYSTEM_TOKENS: ISystemTokens = {
  /* ... */
  COLORS: {
    /* ... */
    GREEN: {
      LIGHT: "#E0E5D9",
      MEDIUM: "#3F6212",
      DARK: "#28331A",
    }
    /* ... */
  },
  TYPOGRAPHY: {
    /* ... */
  }
  /* ... */
}

import { SYSTEM_TOKENS } from "...";

const BUTTON_VALUES: IButtonTokens = {
  /* ... */
  COLORS: {
    /* ... */
    BACKGROUND: SYSTEM_TOKENS.COLORS.GREEN.DARK,
    /* ... */
  },
  TYPOGRAPHY: {
    /* ... */
  }
  /* ... */
}

 class="p-4 bg-red text-white rounded-lg relative flex justify-center">Click me

@import "tailwindcss";

@theme {
  --color-white: #FFFFFF;
  --color-green-light: #E0E5D9;
  --color-green-medium: #3F6212;
  --color-green-dark: #28331A;
  --color-red-light: #F4CCCC;
  --color-red-medium: #D50000;
  --color-red-dark: #640000;

  --spacing-sm: 1rem;
  --spacing-md: 2rem;
}

export type TColor = "--color-white" | "--color-green-light" | "--color-green-medium" | "--color-green-dark" | "--color-red-light" | "--color-red-medium" | "--color-red-dark";

export type TSpacing = "--spacing-sm" | "--spacing-md";


interface ISystemTokens {
  COLORS: {
    WHITE: TColor;
    GREEN: {
      LIGHT: TColor;
      MEDIUM: TColor;
      DARK: TColor;
    },
    RED: {
      LIGHT: TColor;
      MEDIUM: TColor;
      DARK: TColor;
    }
  },
  SPACING: {
    SMALL: TSpacing;
    MEDIUM: TSpacing;
  }
}

export const  SYSTEM_TOKENS: ISystemTokens {
  COLORS: {
    WHITE: "--color-white";
    GREEN: {
      LIGHT: "--color-green-light";
      MEDIUM: "--color-green-light";
      DARK: "--color-green-light";
    },
    RED: {
      LIGHT: "--color-red-light";
      MEDIUM: "--color-red-medium";
      DARK: "--color-red-dark";
    }
  },
  SPACING: {
    SMALL: "--spacing-sm";
    MEDIUM: "--spacing-md";
  }
}

 class="p-4 bg-red text-white rounded-lg relative flex justify-center">Click me

import { SYSTEM_TOKENS, TColor, TSpacing } from "./system.tokens.ts";
import { TTheme } from "./Button"; // PRIMARY, SECONDARY

interface IButtonStaticTokens {
  padding: TSpacing;
}

interface IButtonThemeTokens {
  backgroundColor: TColor;
  textColor: TColor;
}

export const STATIC: IButtonStaticTokens {
  padding: "--spacing-sm";
}

export const THEME: IButtonStaticTokens {
  PRIMARY: {
    backgroundColor: "--color-red-dark";
    textColor: "--color-red-light";
  },
  SECONDARY: {
    backgroundColor: "--color-green-dark";
    textColor: "--color-green-light";
  };
}

 class="p-[--padding] bg-[--backgroundColor] text-[--textColor] rounded-lg relative flex justify-center">Click me

<template>
  
    :style="[variableMap(STATIC), variableMap(THEME[props.THEME])]"
    class="p-[--padding] bg-[--backgroundColor] text-[--textColor] 
    rounded-lg relative flex justify-center"
  >
    Click me
  
template>
<script setup lang="ts">
import { variableMap } from "...";
import { STATIC, THEME } from "Button.tokens.ts";

const props = /*THEME*/
script>