رنگ

دو رنگ برند

یکی هستیم را با دو رنگ می‌شناسند: آبی برند و کهربایی. در روشن دقیقا خود رنگ برندند و در تیره و تاریک نسخه کمی آرام‌تر خودشان را دارند؛ فامشان هیچ‌جا عوض نمی‌شود.

هر رنگی که در رابط می‌بینید از یک نقش می‌آید و در طراحی و کد هم رنگ را با نام همان نقش برمی‌دارید. هر نقش در سه سطح روشن، تیره و تاریک مقدار خودش را دارد، پس هر چیزی که با نقش رنگ شود در هر سه درست دیده می‌شود. پرکارترین نقش primary است، آبی عمیقی که فام آبی برند را دارد و دکمه‌های آبی، لینک‌ها و حلقه فوکوس را رنگ می‌کند.

نقش‌ها روی یک کارت

این کارت کمپین را با کامپوننت‌های پیوند ساخته‌ایم. نشانگر را روی بخشی از کارت ببرید یا یکی از نقش‌های فهرست را بزنید تا ببینید هر نقش کدام بخش‌های کارت را رنگ می‌کند.

همه نقش‌ها

پیوند ۴۲ نقش در ۱۰ خانواده دارد و نام هر نقش همان نام توکن است. بیشتر نقش‌ها جفتی دارند، مثل on-primary که روی primary نوشته می‌شود. نقشی را انتخاب کنید تا مقدارش را در هر سه سطح و کنتراستش را با جفتش ببینید. هر کد رنگ با زدنش کپی می‌شود.

حالت‌ها

هاور، فوکوس و فشردن با لایه حالت دیده می‌شوند: روی پس‌زمینه هر کنترل لایه‌ای از رنگ متن خودش می‌نشیند. برای همین دکمه‌ای که متنش روشن است در هاور کمی روشن‌تر می‌شود و دکمه‌ای که متنش تیره است کمی تیره‌تر. هر حالت اوپاسیتی ثابت خودش را دارد و حالت قوی‌تر جای ضعیف‌تر را می‌گیرد. چیزی که کشیده می‌شود لایه ۱۶٪ می‌گیرد و کل کنترل غیرفعال با اوپاسیتی ۵۰٪ دیده می‌شود. کنتراست متن کنترل فعال در همه این حالت‌ها دست‌کم ۴٫۵:۱ می‌ماند.

کنتراست

طبق WCAG، متن با زمینه‌اش دست‌کم ۴٫۵:۱ کنتراست می‌خواهد و خط دور کنترل‌ها و آیکون‌ها، مثل خط دور کادر متن، دست‌کم ۳:۱. فرمول WCAG برای متن روشن روی زمینه تیره کنتراست را بیشتر از آنچه دیده می‌شود نشان می‌دهد، پس سه سطح با APCA ساخته شده‌اند: متن بدنه و متن فرعی دست‌کم Lc ۷۵ و متن کم‌رنگ دست‌کم Lc ۶۰، در هر سه سطح و روی مدال هم، و لبه کادر متن دست‌کم Lc ۴۵. پیش از هر انتشار، این ۲۲ جفت و هدف‌های APCA را خودکار می‌سنجیم و نسخه‌ای که یکی از این سنجش‌ها را نگذراند منتشر نمی‌شود.

پالت‌های تونال

هر نقش در هر تم یک تون از پالت‌های پیوند است؛ مثلا primary در تم روشن تون ۳۸ پالت آبی است و در تیره و تاریک تون ۸۴. شماره هر تون روشنایی آن است، از ۰ برای سیاه تا ۱۰۰ برای سفید. پس تون‌های هم‌شماره در همه پالت‌ها تقریبا یک روشنایی دارند. کنتراست دو تون را هم می‌شود از فاصله شماره‌هایشان حدس زد: فاصله حدود ۵۰ یعنی کنتراست حدود ۴٫۵:۱. از پالت فقط وقتی رنگ برمی‌داریم که نقش تازه‌ای می‌سازیم.

توکن‌ها

هر تصمیم این صفحه در کد یک توکن نقش است و کامپوننت‌ها فقط با همین نام‌ها ساخته می‌شوند.

رنگ

هر رنگ در پیوند یک نقش است، مثل رنگ اصلی یا متن روی سطح، و در هر سه حالت روشن، تیره و تاریک مقدار خودش را دارد.

• color.primary--pv-sys-color-primaryروشن#006288تیره#97DAFFتاریک#97DAFF
• color.on-primary--pv-sys-color-on-primaryروشن#FFFFFFتیره#00344Aتاریک#00344A
• color.primary-container--pv-sys-color-primary-containerروشن#DAF1FFتیره#00293Bتاریک#002130
• color.on-primary-container--pv-sys-color-on-primary-containerروشن#00597Aتیره#97DAFFتاریک#8FD8FF
• color.secondary--pv-sys-color-secondaryروشن#6E4C00تیره#FFC86Bتاریک#FFC86B
• color.on-secondary--pv-sys-color-on-secondaryروشن#FFFFFFتیره#422C00تاریک#422C00
• color.secondary-container--pv-sys-color-secondary-containerروشن#FFEBCDتیره#332305تاریک#2A1A00
• color.on-secondary-container--pv-sys-color-on-secondary-containerروشن#5F4100تیره#FFC86Bتاریک#FFC561
• color.error--pv-sys-color-errorروشن#B3261Eتیره#FFC4BAتاریک#FFC4BA
• color.on-error--pv-sys-color-on-errorروشن#FFFFFFتیره#690001تاریک#690001
• color.error-container--pv-sys-color-error-containerروشن#FFE9E6تیره#3C1D19تاریک#331511
• color.on-error-container--pv-sys-color-on-error-containerروشن#930003تیره#FFC4BAتاریک#FFC4BA
• color.success--pv-sys-color-successروشن#006E30تیره#7DE797تاریک#7AE594
• color.on-success--pv-sys-color-on-successروشن#FFFFFFتیره#003A16تاریک#003A16
• color.success-container--pv-sys-color-success-containerروشن#D7F5DCتیره#102B17تاریک#07220F
• color.on-success-container--pv-sys-color-on-success-containerروشن#006029تیره#7DE797تاریک#7AE594
• color.warning--pv-sys-color-warningروشن#914C00تیره#FFC69Cتاریک#FFC69C
• color.on-warning--pv-sys-color-on-warningروشن#FFFFFFتیره#4E2600تاریک#4E2600
• color.warning-container--pv-sys-color-warning-containerروشن#FFEADCتیره#39200Bتاریک#301704
• color.on-warning-container--pv-sys-color-on-warning-containerروشن#7F4200تیره#FFC69Cتاریک#FFC295
• color.surface--pv-sys-color-surfaceروشن#FBFBFCتیره#131417تاریک#070709
• color.on-surface--pv-sys-color-on-surfaceروشن#17181Bتیره#E8E8ECتاریک#DEDEE4
• color.surface-variant--pv-sys-color-surface-variantروشن#E8E8ECتیره#26272Dتاریک#1D1E23
• color.on-surface-variant--pv-sys-color-on-surface-variantروشن#5C5F66تیره#D3D4DAتاریک#CFD0D6
• color.on-surface-muted--pv-sys-color-on-surface-mutedروشن#696D74تیره#B9BBC2تاریک#B5B7BE
• color.surface-container-lowest--pv-sys-color-surface-container-lowestروشن#FFFFFFتیره#1A1B1Fتاریک#131417
• color.surface-container-low--pv-sys-color-surface-container-lowروشن#F5F5F7تیره#1F2025تاریک#17181B
• color.surface-container--pv-sys-color-surface-containerروشن#EFEFF2تیره#26272Dتاریک#1D1E23
• color.surface-container-high--pv-sys-color-surface-container-highروشن#E8E8ECتیره#2D2E35تاریک#23242A
• color.surface-container-highest--pv-sys-color-surface-container-highestروشن#E1E1E6تیره#33343Bتاریک#2B2C33
• color.surface-dim--pv-sys-color-surface-dimروشن#D9D9DFتیره#0E0F11تاریک#000000
• color.surface-bright--pv-sys-color-surface-brightروشن#FFFFFFتیره#40414Aتاریک#35363E
• color.outline--pv-sys-color-outlineروشن#85888Fتیره#9498A0تاریک#93969E
• color.outline-variant--pv-sys-color-outline-variantروشن#E4E5E9تیره#3A3B43تاریک#3A3B43
• color.inverse-surface--pv-sys-color-inverse-surfaceروشن#17181Bتیره#E8E8ECتاریک#DEDEE4
• color.inverse-on-surface--pv-sys-color-inverse-on-surfaceروشن#F5F5F7تیره#17181Bتاریک#17181B
• color.inverse-primary--pv-sys-color-inverse-primaryروشن#77D1FFتیره#006288تاریک#006288
• color.scrim--pv-sys-color-scrimروشن#17181Bتیره#000000تاریک#000000
• color.shadow--pv-sys-color-shadowروشن#000000تیره#000000تاریک#000000
• color.brand--pv-sys-color-brandروشن#29AAE1تیره#45ADDFتاریک#3EA0CD
• color.on-brand--pv-sys-color-on-brandروشن#001E2Dتیره#001E2Dتاریک#00101A
• color.action--pv-sys-color-actionروشن#FDB933تیره#F6B53Bتاریک#E8AC3A
• color.on-action--pv-sys-color-on-actionروشن#281900تیره#281900تاریک#281900
• image.filter--pv-sys-image-filterروشنbrightness(1) saturate(1)تیرهbrightness(1) saturate(1)تاریکbrightness(0.92) saturate(0.9)

فوکوس و حالت‌ها

حلقه فوکوس و لایه‌های رنگی هاور، فشار و غیرفعال.

• focus.ring.width--pv-sys-focus-ring-width2px
• focus.ring.offset--pv-sys-focus-ring-offset2px
• focus.ring.offset-inset--pv-sys-focus-ring-offset-inset-4px
• focus.ring.halo-width--pv-sys-focus-ring-halo-width3px
• focus.ring.color.default--pv-sys-focus-ring-color-defaultروشن#006288تیره#97DAFFتاریک#97DAFF
• focus.ring.color.halo--pv-sys-focus-ring-color-haloروشن#77D1FFتیره#006288تاریک#006288
• focus.ring.color.halo-error--pv-sys-focus-ring-color-halo-errorروشن#FFE9E6تیره#3C1D19تاریک#331511
• focus.ring.color.on-brand--pv-sys-focus-ring-color-on-brandروشن#001E2Dتیره#001E2Dتاریک#00101A
• focus.ring.color.on-action--pv-sys-focus-ring-color-on-actionروشن#281900تیره#281900تاریک#281900
• focus.ring.color.on-inverse--pv-sys-focus-ring-color-on-inverseروشن#F5F5F7تیره#17181Bتاریک#17181B
• focus.ring.color.error--pv-sys-focus-ring-color-errorروشن#B3261Eتیره#FFC4BAتاریک#FFC4BA
• state.layer.hover--pv-sys-state-layer-hover0.06
• state.layer.focus--pv-sys-state-layer-focus0.08
• state.layer.pressed--pv-sys-state-layer-pressed0.12
• state.layer.dragged--pv-sys-state-layer-dragged0.16
• state.opacity.disabled-content--pv-sys-state-opacity-disabled-content0.5
• state.opacity.disabled-container--pv-sys-state-opacity-disabled-container0.12
• state.opacity.scrim--pv-sys-state-opacity-scrim0.4
• state.opacity.skeleton--pv-sys-state-opacity-skeleton0.6