แหล่งอ้างอิงเดียวสำหรับสี ตัวอักษร สเกล และคอมโพเนนต์ทั้งหมดของระบบ ทุกค่าบนหน้านี้อ่านจากธีม Mantine โดยตรง จึงเปลี่ยนตามธีมสว่างและมืดทันที และยูทิลิตี้ของ Tailwind ก็ชี้ไปยังตัวแปรชุดเดียวกัน ชุดสีมาจากอัตลักษณ์ของโรงเรียน ไม่ได้เลือกตามความชอบ — ดูที่มาในส่วนอ้างอิงท้ายหน้า
สเกลสีของ Mantine ใช้ดัชนี 0–9 เดียวกับยูทิลิตี้ Tailwind เช่น bg-brand-6 ตรงกับเฉด 6 พอดี
brand
--mantine-color-brand-0 … -9 · Tailwind bg-brand-0 … -9
0
1
2
3
4
5
6
7
8
9
gold
--mantine-color-gold-0 … -9 · Tailwind bg-gold-0 … -9
0
1
2
3
4
5
6
7
8
9
gray
--mantine-color-gray-0 … -9 · Tailwind ตามสเกลของ Mantine
0
1
2
3
4
5
6
7
8
9
red
--mantine-color-red-0 … -9 · Tailwind ตามสเกลของ Mantine
0
1
2
3
4
5
6
7
8
9
green
--mantine-color-green-0 … -9 · Tailwind ตามสเกลของ Mantine
0
1
2
3
4
5
6
7
8
9
Semantic tokens
ค่าเหล่านี้สลับตามธีมสว่าง/มืดโดยอัตโนมัติ ใช้แทนการระบุเฉดสีตรง ๆ
--mantine-color-body
พื้นหลังหลัก · Tailwind bg-surface
--mantine-color-text
ข้อความหลัก · Tailwind text-fg
--mantine-color-dimmed
ข้อความรอง · Tailwind text-fg-dimmed
--mantine-color-default
พื้นผิวรอง · Tailwind bg-surface-muted
--mantine-color-default-border
เส้นขอบ · Tailwind border-line
--mantine-color-anchor
ลิงก์
Tailwind ↔ Mantine
แถวบนวาดด้วยยูทิลิตี้ Tailwind แถวล่างวาดด้วยตัวแปรของ Mantine ถ้าสองแถวสีไม่ตรงกันแปลว่าสะพานเชื่อมโทเคนใน globals.css พัง
ตรวจอัตราส่วนความต่างของสีตาม WCAG 2.1 คำนวณสดจากธีมที่กำลังแสดงอยู่
อัตราส่วนความต่างของสีคำนวณสดจากธีมที่กำลังแสดงอยู่ ตามสูตร WCAG 2.1 เกณฑ์คือ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ถ้าเฉดไหนขึ้น Fail แปลว่าห้ามใช้เฉดนั้นกับข้อความบนพื้นหลังนี้
brand บนพื้นหลังปัจจุบัน
0
#f7f0ea
–
1
#e9dbcf
–
2
#d3b79f
–
3
#bd926d
–
4
#aa7448
–
5
#9f6231
–
6
#9a5924
–
7
#864c1c
–
8
#6a3a10
–
9
#502800
–
gold บนพื้นหลังปัจจุบัน
0
#fff8e1
–
1
#ffeeb8
–
2
#ffe08a
–
3
#ffd25c
–
4
#fdc63a
–
5
#fbbc22
–
6
#f8b000
–
7
#dd9a00
–
8
#c48700
–
9
#a97200
–
ความสูงบรรทัดวางบนจังหวะเดียวกันทั้งสเกล และผ่อนกว่าค่าเริ่มต้นของ Mantine เพราะสระและวรรณยุกต์ไทยซ้อนบนล่าง
Font stack
var(--font-thai), var(--font-geist-sans), sans-serif
Noto Sans Thai นำหน้า Geist เพราะ Geist ไม่มีชุดอักขระไทย หากสลับลำดับ ข้อความไทยจะตกไปใช้ฟอนต์ระบบแทน
Headings
h1
ประกาศผลการคัดเลือกนักเรียน ปีการศึกษา ๒๕๖๙
h2
ประกาศผลการคัดเลือกนักเรียน ปีการศึกษา ๒๕๖๙
h3
ประกาศผลการคัดเลือกนักเรียน ปีการศึกษา ๒๕๖๙
h4
ประกาศผลการคัดเลือกนักเรียน ปีการศึกษา ๒๕๖๙
h5
ประกาศผลการคัดเลือกนักเรียน ปีการศึกษา ๒๕๖๙
h6
ประกาศผลการคัดเลือกนักเรียน ปีการศึกษา ๒๕๖๙
Body sizes
Weights
400
ประกาศผลการคัดเลือกนักเรียน ปีการศึกษา ๒๕๖๙
500
ประกาศผลการคัดเลือกนักเรียน ปีการศึกษา ๒๕๖๙
600
ประกาศผลการคัดเลือกนักเรียน ปีการศึกษา ๒๕๖๙
700
ประกาศผลการคัดเลือกนักเรียน ปีการศึกษา ๒๕๖๙
ระยะห่าง มุมโค้ง เงา และจุดตัดหน้าจอ
Spacing
Mantine spacing ใช้กับคอมโพเนนต์ Mantine ส่วนเลย์เอาต์เดิมยังใช้สเกลตัวเลขของ Tailwind (gap-3, px-4) ซึ่งตั้งใจไม่ผูกเข้าด้วยกัน
xs
var(--mantine-spacing-xs)
sm
var(--mantine-spacing-sm)
md
var(--mantine-spacing-md)
lg
var(--mantine-spacing-lg)
xl
var(--mantine-spacing-xl)
Radius
xs
sm
md
lg
xl
Shadows
xs
sm
md
lg
xl
Breakpoints
xs
36em
sm
48em
md
62em
lg
75em
xl
88em
คอมโพเนนต์ Mantine ที่ใช้ได้ในระบบ แสดงผลจริงตามธีมปัจจุบัน
Button
ปุ่มหลักของระบบ ใช้ variant filled สำหรับการกระทำหลักเพียงปุ่มเดียวต่อหน้าจอ
ActionIcon · ThemeIcon · Indicator
Badge · Pill · Chip
ใช้แสดงสถานะข่าวและหมวดหมู่
Inputs
ทุกช่องกรอกมีความสูงอย่างน้อย 44px เพื่อการแตะบนมือถือ
ใช้ในลิงก์
ต้องกรอกหัวข้อ
Selection controls
Card · Avatar · Blockquote · Code
ประกาศรับสมัครนักเรียน
เปิดรับสมัครนักเรียนชั้น ม.1 ปีการศึกษา 2569
3 ส.ค. 2569
ข้อความอ้างอิงสำหรับเนื้อหาข่าวฝ่ายวิชาการ
npm run devCtrlKTable
Feedback
Overlays
Modal และ Drawer ต้องมีสถานะเปิด/ปิด จึงเป็น client component
Disclosure · Timeline
3 ส.ค. 2569
4 ส.ค. 2569
สถานะปกติ ปิดใช้งาน กำลังโหลด ผิดพลาด และวงแหวนโฟกัสสำหรับผู้ใช้คีย์บอร์ด
โฮเวอร์และโฟกัสต้องลองด้วยเมาส์และปุ่ม Tab เอง เพราะเป็นสถานะที่เรนเดอร์นิ่ง ๆ ไม่ได้ ส่วนสถานะปิดใช้งานและกำลังโหลดแสดงไว้ให้เทียบได้ตรงนี้
สถานะของช่องกรอก
ต้องกรอกหัวข้อ
วงแหวนโฟกัส
กด Tab เข้ามาที่ปุ่มด้านล่างเพื่อดูวงแหวนโฟกัส ธีมตั้ง focusRing เป็น auto จึงแสดงเฉพาะตอนใช้คีย์บอร์ด ไม่แสดงตอนคลิกเมาส์ ซึ่งเป็นเกณฑ์การเข้าถึงขั้นต่ำของเว็บภาครัฐ
คอมโพเนนต์เฉพาะโดเมนที่มีอยู่แล้ว พร้อมสถานะการย้ายมาใช้ Mantine
คอมโพเนนต์ของระบบอยู่ที่ src/features/<Domain>/<Component>/ โดยมี logic hook เป็นไฟล์พี่น้องในโฟลเดอร์เดียวกัน คอลัมน์ “ฝั่ง” คือบริบทที่คอมโพเนนต์นั้นแสดงผล — ฝั่งสาธารณะใช้แถบบน ส่วนแผงผู้ดูแลใช้แถบข้าง และตัวที่ใช้ทั้งสองฝั่งต้องไม่ผูกกับเปลือกใด
ที่มาของการตัดสินใจด้านการออกแบบ
การตัดสินใจด้านการออกแบบในหน้านี้อ้างอิงจากแหล่งต่อไปนี้ ไม่ได้เลือกตามความชอบส่วนตัว
สีประจำโรงเรียนคือน้ำตาล–เหลือง ค่าสีทั้งสองดูดมาจากไฟล์ตราสัญลักษณ์โดยตรง น้ำตาล #502800 และเหลือง #f8b000 จึงเป็นที่มาของสเกล brand และ gold
ทุกระดับของสเกลตัวอักษรใช้ความสูงบรรทัดเป็นจำนวนเท่าของค่าคงที่ เพื่อให้จังหวะแนวตั้งสม่ำเสมอและกวาดสายตาอ่านง่าย ธีมนี้ใช้หลักเดียวกันแต่ผ่อนความสูงบรรทัดขึ้นสำหรับภาษาไทย
สเกลระยะห่างแบบไล่ระดับ 0–9 และปรับตามขนาดจอที่จุดตัดเดียว ระยะเล็ก 0–3 คงที่ทุกจอ ส่วนระยะใหญ่ขยายบนจอกว้าง
มาตรฐานเว็บไซต์ภาครัฐกำหนดเรื่องการเข้าถึงเป็นข้อบังคับ ระบบนี้จึงคำนวณอัตราส่วนความต่างของสีจริงในหน้านี้ และเปิดวงแหวนโฟกัสสำหรับผู้ใช้คีย์บอร์ด
ข้อความปกติต้องมีอัตราส่วนอย่างน้อย 4.5:1 และข้อความขนาดใหญ่ 3:1 เป็นเกณฑ์ที่ส่วนตรวจสอบด้านล่างใช้ตัดสิน