Bun.Color

Bun.color(input, outputFormat?) تستفيد من محلل CSS الخاص بـ Bun لتحليل وتطبيع وتحويل الألوان من مدخلات المستخدم إلى مجموعة متنوعة من تنسيقات الإخراج، بما في ذلك:

التنسيق	المثال
`"css"`	`"red"`
`"ansi"`	`"\x1b[38;2;255;0;0m"`
`"ansi-16"`	`"\x1b[38;5;\tm"`
`"ansi-256"`	`"\x1b[38;5;196m"`
`"ansi-16m"`	`"\x1b[38;2;255;0;0m"`
`"number"`	`0x1a2b3c`
`"rgb"`	`"rgb(255, 99, 71)"`
`"rgba"`	`"rgba(255, 99, 71, 0.5)"`
`"hsl"`	`"hsl(120, 50%, 50%)"`
`"hex"`	`"#1a2b3c"`
`"HEX"`	`"#1A2B3C"`
`"{rgb}"`	`{ r: 255, g: 99, b: 71 }`
`"{rgba}"`	`{ r: 255, g: 99, b: 71, a: 1 }`
`"[rgb]"`	`[ 255, 99, 71 ]`
`"[rgba]"`	`[ 255, 99, 71, 255]`

هناك العديد من الطرق المختلفة لاستخدام واجهة برمجة التطبيقات هذه:

التحقق من صحة وتطبيع الألوان للحفظ في قاعدة بيانات (number هو الأنسب لقواعد البيانات)
تحويل الألوان إلى تنسيقات مختلفة
تسجيل ملون يتجاوز الألوان الـ 16 التي يستخدمها الكثيرون اليوم (استخدم ansi إذا كنت لا تريد معرفة ما يدعمه طرفية المستخدم، وإلا استخدم ansi-16 أو ansi-256 أو ansi-16m لعدد الألوان التي تدعمها الطرفية)
تنسيق الألوان للاستخدام في CSS المحقون في HTML
الحصول على مكونات الألوان r و g و b و a ككائنات JavaScript أو أرقام من سلسلة ألوان CSS

يمكنك التفكير في هذا كبديل لحزم npm الشائعة color و tinycolor2 إلا أنه يدعم بالكامل تحليل سلاسل ألوان CSS وبدون تبعيات مدمجة مباشرة في Bun.

مدخلات مرنة

يمكنك تمرير أي مما يلي:

أسماء ألوان CSS قياسية مثل "red"
أرقام مثل 0xff0000
سلاسل سداسية عشرية مثل "#f00"
سلاسل RGB مثل "rgb(255, 0, 0)"
سلاسل RGBA مثل "rgba(255, 0, 0, 1)"
سلاسل HSL مثل "hsl(0, 100%, 50%)"
سلاسل HSLA مثل "hsla(0, 100%, 50%, 1)"
كائنات RGB مثل { r: 255, g: 0, b: 0 }
كائنات RGBA مثل { r: 255, g: 0, b: 0, a: 1 }
مصفوفات RGB مثل [255, 0, 0]
مصفوفات RGBA مثل [255, 0, 0, 255]
سلاسل LAB مثل "lab(50% 50% 50%)"
... أي شيء آخر يمكن لـ CSS تحليله كقيمة لون واحدة

تنسيق الألوان كـ CSS

ينسق "css" إخراج CSS صالح للاستخدام في أوراق الأنماط والأنماط المضمنة ومتغيرات CSS و css-in-js وما إلى ذلك. يُرجع التمثيل الأكثر إحكامًا للون كسلسلة.

Bun.color("red", "css"); // "red"
Bun.color(0xff0000, "css"); // "#f000"
Bun.color("#f00", "css"); // "red"
Bun.color("#ff0000", "css"); // "red"
Bun.color("rgb(255, 0, 0)", "css"); // "red"
Bun.color("rgba(255, 0, 0, 1)", "css"); // "red"
Bun.color("hsl(0, 100%, 50%)", "css"); // "red"
Bun.color("hsla(0, 100%, 50%, 1)", "css"); // "red"
Bun.color({ r: 255, g: 0, b: 0 }, "css"); // "red"
Bun.color({ r: 255, g: 0, b: 0, a: 1 }, "css"); // "red"
Bun.color([255, 0, 0], "css"); // "red"
Bun.color([255, 0, 0, 255], "css"); // "red"

إذا كان الإدخال غير معروف أو فشل في التحليل، تُرجع Bun.color قيمة null.

تنسيق الألوان كـ ANSI (للطرفيات)

ينسق "ansi" إخراج رموز هروب ANSI للاستخدام في الطرفيات لجعل النص ملونًا.

Bun.color("red", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color(0xff0000, "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color("#f00", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color("#ff0000, "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color("rgb(255, 0, 0)", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color("rgba(255, 0, 0, 1)", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color("hsl(0, 100%, 50%)", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color("hsla(0, 100%, 50%, 1)", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color({ r: 255, g: 0, b: 0 }, "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color({ r: 255, g: 0, b: 0, a: 1 }, "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color([255, 0, 0], "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color([255, 0, 0, 255], "ansi"); // "\u001b[38;2;255;0;0m"

يحصل على عمق لون stdout ويختار تلقائيًا واحدًا من "ansi-16m" أو "ansi-256" أو "ansi-16" بناءً على متغيرات البيئة. إذا كان stdout لا يدعم أي شكل من أشكال ألوان ANSI، يُرجع سلسلة فارغة. كما هو الحال مع بقية واجهة برمجة تطبيقات الألوان في Bun، إذا كان الإدخال غير معروف أو فشل في التحليل، يُرجع null.

ألوان ANSI ذات 24 بت (`ansi-16m`)

ينسق "ansi-16m" إخراج ألوان ANSI ذات 24 بت للاستخدام في الطرفيات لجعل النص ملونًا. يعني لون 24 بت أنه يمكنك عرض 16 مليون لون على الطرفيات المدعومة، ويتطلب طرفية حديثة تدعمه.

هذا يحول لون الإدخال إلى RGBA، ثم يُخرجه كلون ANSI.

Bun.color("red", "ansi-16m"); // "\x1b[38;2;255;0;0m"
Bun.color(0xff0000, "ansi-16m"); // "\x1b[38;2;255;0;0m"
Bun.color("#f00", "ansi-16m"); // "\x1b[38;2;255;0;0m"
Bun.color("#ff0000", "ansi-16m"); // "\x1b[38;2;255;0;0m"

256 لون ANSI (`ansi-256`)

ينسق "ansi-256" تقريب لون الإدخال إلى أقرب ألوان ANSI الـ 256 المدعومة من بعض الطرفيات.

Bun.color("red", "ansi-256"); // "\u001b[38;5;196m"
Bun.color(0xff0000, "ansi-256"); // "\u001b[38;5;196m"
Bun.color("#f00", "ansi-256"); // "\u001b[38;5;196m"
Bun.color("#ff0000", "ansi-256"); // "\u001b[38;5;196m"

للتحويل من RGBA إلى واحد من ألوان ANSI الـ 256، قمنا بنقل الخوارزمية التي يستخدمها tmux.

16 لون ANSI (`ansi-16`)

ينسق "ansi-16" تقريب لون الإدخال إلى أقرب ألوان ANSI الـ 16 المدعومة من معظم الطرفيات.

Bun.color("red", "ansi-16"); // "\u001b[38;5;\tm"
Bun.color(0xff0000, "ansi-16"); // "\u001b[38;5;\tm"
Bun.color("#f00", "ansi-16"); // "\u001b[38;5;\tm"
Bun.color("#ff0000", "ansi-16"); // "\u001b[38;5;\tm"

يعمل هذا عن طريق تحويل الإدخال أولاً إلى مساحة ألوان RGB ذات 24 بت، ثم إلى ansi-256، ثم نحول ذلك إلى أقرب لون ANSI من 16 لونًا.

تنسيق الألوان كأرقام

ينسق "number" إخراج رقم 24 بت للاستخدام في قواعد البيانات أو التكوين أو أي حالة استخدام أخرى حيث يكون التمثيل المضغوط للون مرغوبًا.

Bun.color("red", "number"); // 16711680
Bun.color(0xff0000, "number"); // 16711680
Bun.color({ r: 255, g: 0, b: 0 }, "number"); // 16711680
Bun.color([255, 0, 0], "number"); // 16711680
Bun.color("rgb(255, 0, 0)", "number"); // 16711680
Bun.color("rgba(255, 0, 0, 1)", "number"); // 16711680
Bun.color("hsl(0, 100%, 50%)", "number"); // 16711680
Bun.color("hsla(0, 100%, 50%, 1)", "number"); // 16711680

الحصول على القنوات الحمراء والخضراء والزرقاء والشفافة

يمكنك استخدام التنسيقات "{rgba}" و "{rgb}" و "[rgba]" و "[rgb]" للحصول على القنوات الحمراء والخضراء والزرقاء والشفافة ككائنات أو مصفوفات.

كائن `{rgba}`

ينسق "{rgba}" إخراج كائن يحتوي على القنوات الحمراء والخضراء والزرقاء والشفافة.

type RGBAObject = {
  // 0 - 255
  r: number;
  // 0 - 255
  g: number;
  // 0 - 255
  b: number;
  // 0 - 1
  a: number;
};

مثال:

Bun.color("hsl(0, 0%, 50%)", "{rgba}"); // { r: 128, g: 128, b: 128, a: 1 }
Bun.color("red", "{rgba}"); // { r: 255, g: 0, b: 0, a: 1 }
Bun.color(0xff0000, "{rgba}"); // { r: 255, g: 0, b: 0, a: 1 }
Bun.color({ r: 255, g: 0, b: 0 }, "{rgba}"); // { r: 255, g: 0, b: 0, a: 1 }
Bun.color([255, 0, 0], "{rgba}"); // { r: 255, g: 0, b: 0, a: 1 }

لتتصرف بشكل مشابه لـ CSS، القناة a هي رقم عشري بين 0 و 1.

تنسيق "{rgb}" مشابه، لكنه لا يتضمن القناة الشفافة.

Bun.color("hsl(0, 0%, 50%)", "{rgb}"); // { r: 128, g: 128, b: 128 }
Bun.color("red", "{rgb}"); // { r: 255, g: 0, b: 0 }
Bun.color(0xff0000, "{rgb}"); // { r: 255, g: 0, b: 0 }
Bun.color({ r: 255, g: 0, b: 0 }, "{rgb}"); // { r: 255, g: 0, b: 0 }
Bun.color([255, 0, 0], "{rgb}"); // { r: 255, g: 0, b: 0 }

مصفوفة `[rgba]`

ينسق "[rgba]" إخراج مصفوفة تحتوي على القنوات الحمراء والخضراء والزرقاء والشفافة.

// جميع القيم 0 - 255
type RGBAArray = [number, number, number, number];

مثال:

Bun.color("hsl(0, 0%, 50%)", "[rgba]"); // [128, 128, 128, 255]
Bun.color("red", "[rgba]"); // [255, 0, 0, 255]
Bun.color(0xff0000, "[rgba]"); // [255, 0, 0, 255]
Bun.color({ r: 255, g: 0, b: 0 }, "[rgba]"); // [255, 0, 0, 255]
Bun.color([255, 0, 0], "[rgba]"); // [255, 0, 0, 255]

على عكس تنسيق "{rgba}"، القناة الشفافة هي عدد صحيح بين 0 و 255. هذا مفيد للمصفوفات المكتوبة حيث يجب أن تكون كل قناة من نفس النوع الأساسي.

تنسيق "[rgb]" مشابه، لكنه لا يتضمن القناة الشفافة.

Bun.color("hsl(0, 0%, 50%)", "[rgb]"); // [128, 128, 128]
Bun.color("red", "[rgb]"); // [255, 0, 0]
Bun.color(0xff0000, "[rgb]"); // [255, 0, 0]
Bun.color({ r: 255, g: 0, b: 0 }, "[rgb]"); // [255, 0, 0]
Bun.color([255, 0, 0], "[rgb]"); // [255, 0, 0]

تنسيق الألوان كسلاسل سداسية عشرية

ينسق "hex" إخراج سلسلة سداسية عشرية بأحرف صغيرة للاستخدام في CSS أو سياقات أخرى.

Bun.color("hsl(0, 0%, 50%)", "hex"); // "#808080"
Bun.color("red", "hex"); // "#ff0000"
Bun.color(0xff0000, "hex"); // "#ff0000"
Bun.color({ r: 255, g: 0, b: 0 }, "hex"); // "#ff0000"
Bun.color([255, 0, 0], "hex"); // "#ff0000"

تنسيق "HEX" مشابه، لكنه يُخرج سلسلة سداسية عشرية بأحرف كبيرة بدلاً من الأحرف الصغيرة.

Bun.color("hsl(0, 0%, 50%)", "HEX"); // "#808080"
Bun.color("red", "HEX"); // "#FF0000"
Bun.color(0xff0000, "HEX"); // "#FF0000"
Bun.color({ r: 255, g: 0, b: 0 }, "HEX"); // "#FF0000"
Bun.color([255, 0, 0], "HEX"); // "#FF0000"

تنسيق ألوان جانب العميل في وقت الحزمة

مثل العديد من واجهات برمجة تطبيقات Bun، يمكنك استخدام الماكرو لاستدعاء Bun.color في وقت الحزمة للاستخدام في عمليات بناء JavaScript جانب العميل:

import { color } from "bun" with { type: "macro" };

console.log(color("#f00", "css"));

ثم، قم ببناء كود جانب العميل:

bun build ./client-side.ts

سيُخرج هذا ما يلي إلى client-side.js:

// client-side.ts
console.log("red");

مدخلات مرنة ​

تنسيق الألوان كـ CSS ​

تنسيق الألوان كـ ANSI (للطرفيات) ​

ألوان ANSI ذات 24 بت (ansi-16m) ​

256 لون ANSI (ansi-256) ​

16 لون ANSI (ansi-16) ​

تنسيق الألوان كأرقام ​

الحصول على القنوات الحمراء والخضراء والزرقاء والشفافة ​

كائن {rgba} ​

مصفوفة [rgba] ​

تنسيق الألوان كسلاسل سداسية عشرية ​

تنسيق ألوان جانب العميل في وقت الحزمة ​