From 48764c217f52aafdfbd45d38fbce9c9fa6b24dd3 Mon Sep 17 00:00:00 2001 From: Fid GNU Date: Mon, 26 Jan 2026 09:54:28 +0800 Subject: [PATCH 1/7] feature: add TA callout component styles and example HTML --- .../assets/ta-preview/callout/callout.css | 130 +++++++++++++ .../callout/ta-callout-preview.html | 174 ++++++++++++++++++ 2 files changed, 304 insertions(+) create mode 100644 apps/docs/public/assets/ta-preview/callout/callout.css create mode 100644 apps/docs/public/assets/ta-preview/callout/ta-callout-preview.html diff --git a/apps/docs/public/assets/ta-preview/callout/callout.css b/apps/docs/public/assets/ta-preview/callout/callout.css new file mode 100644 index 00000000..d52d3e23 --- /dev/null +++ b/apps/docs/public/assets/ta-preview/callout/callout.css @@ -0,0 +1,130 @@ +/* Simplified Callout Component Styles */ + +.dark body { + height: 100%; + background-color: #161619; +} + +.call-title { + color: #000; +} + +.dark .call-title { + color: #ffffff; +} + +.dark h1, h2, h3, h4, h5, h6 { + color: #ffffff; +} + +/* Callout Container */ +.callout { + display: flex; + align-items: flex-start; + gap: 0.5rem; + padding: 0.75rem; + border-radius: 0.375rem; + background-color: #eff6ff; + /* Light blue background */ + color: #2563eb; + /* Blue text */ +} + +/* Dark mode */ +.dark .callout { + background-color: #172554; + /* Dark blue background */ + color: #93c5fd; + /* Light blue text */ +} + +/* Icon */ +.callout-icon { + width: 1.25rem; + height: 1.25rem; + flex-shrink: 0; +} + +/* Content Container */ +.callout-content { + display: flex; + flex-direction: column; + flex-grow: 1; + gap: 0.5rem; +} + +.callout-row { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +/* Text Container */ +.callout-text { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +/* Title */ +.callout-title { + font-size: .875rem; + line-height: 1.25rem; + font-weight: 600; + color: inherit; +} + +/* Description */ +.callout-description { + font-weight: 400; + font-size: .875rem; + line-height: 1.25rem; + color: #18181b; + /* Dark gray */ +} + +.dark .callout-description { + color: #ffffff; + /* White in dark mode */ +} + +/* Action Container */ +.callout-action { + margin-top: 0.25rem; +} + +/* Callout Variants */ + +/* Success Variant */ +.callout-success { + background-color: #f0fdf4; + color: #15803d; +} + +.dark .callout-success { + background-color: #14532d; + color: #86efac; +} + +/* Warning Variant */ +.callout-warning { + background-color: #fefce8; + color: #a16207; +} + +.dark .callout-warning { + background-color: #422006; + color: #fde047; +} + +/* Danger Variant */ +.callout-danger { + background-color: #fef2f2; + color: #b91c1c; +} + +.dark .callout-danger { + background-color: #450a0a; + color: #fca5a5; +} \ No newline at end of file diff --git a/apps/docs/public/assets/ta-preview/callout/ta-callout-preview.html b/apps/docs/public/assets/ta-preview/callout/ta-callout-preview.html new file mode 100644 index 00000000..fa61990a --- /dev/null +++ b/apps/docs/public/assets/ta-preview/callout/ta-callout-preview.html @@ -0,0 +1,174 @@ + + + + + + Simple Callout Example + + + + + + + + + + + +

Callout Component Examples

+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + \ No newline at end of file From d8c99ccca2a324ab6bfe4c509bbcb58fdfd889c0 Mon Sep 17 00:00:00 2001 From: Fid GNU Date: Mon, 26 Jan 2026 11:31:40 +0800 Subject: [PATCH 2/7] Remove a category to make shorter. --- .../callout/ta-callout-preview.html | 33 ++----------------- 1 file changed, 3 insertions(+), 30 deletions(-) diff --git a/apps/docs/public/assets/ta-preview/callout/ta-callout-preview.html b/apps/docs/public/assets/ta-preview/callout/ta-callout-preview.html index fa61990a..5a2660af 100644 --- a/apps/docs/public/assets/ta-preview/callout/ta-callout-preview.html +++ b/apps/docs/public/assets/ta-preview/callout/ta-callout-preview.html @@ -18,11 +18,8 @@ margin: 0 auto; } .callout-main { - margin-top: 1rem; - margin-bottom: 1rem; - } - h1 { - font-size: larger; + margin-top: 0.5rem; + margin-bottom: 0.5rem; } @@ -38,7 +35,6 @@ -

Callout Component Examples

-
- -
-
- - - -
- +
+ +
+ +
+ +
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+
+ +
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+
+ + + \ No newline at end of file From ac7718cd438e2842ae3f657336d46caec49223da Mon Sep 17 00:00:00 2001 From: Fid GNU Date: Tue, 10 Feb 2026 11:10:16 +0800 Subject: [PATCH 6/7] feature: add background styles for documentation layout --- .../docs/public/assets/ta-preview/callout/callout.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/apps/docs/public/assets/ta-preview/callout/callout.css b/apps/docs/public/assets/ta-preview/callout/callout.css index 77b2f17e..a562084b 100644 --- a/apps/docs/public/assets/ta-preview/callout/callout.css +++ b/apps/docs/public/assets/ta-preview/callout/callout.css @@ -1,5 +1,16 @@ /* Simplified Callout Component Styles */ +/* for porting into documentation */ +html, +body { + height: 100%; + background-color: white; +} +.dark body { + height: 100%; + background-color: #161619; +} + /* Callout Container */ .callout { display: flex; From e67fd844cb59eb77dd22d227afa0486187064035 Mon Sep 17 00:00:00 2001 From: Fid GNU Date: Tue, 10 Feb 2026 12:50:20 +0800 Subject: [PATCH 7/7] feature: implement preview ta-select component --- .../(transistory-assistance)/ta-select.mdx | 570 +++++++++++++++++- 1 file changed, 569 insertions(+), 1 deletion(-) diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-select.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-select.mdx index 6335542d..5eaac709 100644 --- a/apps/docs/content/docs/develop/(transistory-assistance)/ta-select.mdx +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-select.mdx @@ -2,5 +2,573 @@ title: Select description: Explore the integrated accessibility testing tools in our development environment that help identify and resolve accessibility issues during development. These tools work together to ensure our components meet WCAG standards and provide a better experience for all users. --- +import { Tab, Tabs } from "fumadocs-ui/components/tabs"; +import IframeThemePreview from "@/components/iframe-theme-preview"; -## Work In Progress \ No newline at end of file + + + + + + ```tsx +
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+ + +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+
+ +
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+ +
+ +
+ +
+
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+
+
+
+ ``` + + + ```tsx + /* Select Component Styles */ + .dark body { + height: 100%; + background-color: #161619; + } + + .select-wrapper { + display: inline-block; + position: relative; + margin: 1rem; + } + + .select-label { + display: block; + font-size: 0.875rem; + font-weight: 500; + margin-bottom: 0.5rem; + color: #3f3f46; + } + + .dark .select-label { + color: #fafafa; + } + + /* Custom Select Container */ + .custom-select { + position: relative; + /* width: 200px; */ + } + + /* Select Trigger Button */ + .select-trigger { + width: 100%; + display: flex; + align-items: center; + /* justify-content: space-between; */ + background-color: #ffffff; + border: 1px solid #e4e4e7; + border-radius: 0.375rem; + color: #18181b; + cursor: pointer; + font-family: inherit; + font-size: 0.875rem; + font-weight: 400; + outline: none; + /* padding: 0.5rem 0.75rem; */ + padding: 6px 10px; + transition: all 0.15s ease; + text-align: center; + } + + .dark .select-trigger { + background-color: #27272a; + border-color: #52525b; + color: #fafafa; + } + + /* Value text */ + .select-name { + margin-right: 6px; + color: rgb(var(--txt-black-500)); + font-weight: 400; + color: #6B6B74; + } + + .dark .select-name { + color: #A1A1AA; + } + + .select-value { + flex: 1; + color: rgb(var(--txt-black-900)); + padding-right: 6px; + font-weight: 500; + } + + .select-value.has-value { + color: #18181B; + } + + .dark .select-value.has-value { + color: #fff; + } + + /* Dropdown Menu */ + .select-dropdown { + position: absolute; + top: calc(100% + 0.25rem); + left: 0; + right: 0; + background-color: #ffffff; + border: 1px solid #e4e4e7; + border-radius: 0.375rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + max-height: 200px; + overflow-y: auto; + opacity: 0; + visibility: hidden; + transform: translateY(-8px); + transition: all 0.2s ease; + z-index: 1000; + } + + .dark .select-dropdown { + /* background-color: #27272a; + border-color: #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); */ + border-radius: var(--Gap-8, 8px); + border: 1px solid var(--Outline-otl-gray-200, #27272A); + background: var(--Background-bg-dialog, #1D1D21); + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05), 0 12px 50px 0 rgba(0, 0, 0, 0.10); + } + + .custom-select.open .select-dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + + /* Dropdown Options */ + .select-option { + cursor: pointer; + transition: background-color 0.15s ease; + + overflow: hidden; + color: var(--Text-txt-black-700, #3F3F46); + text-overflow: ellipsis; + + display: flex; + padding: 5px 10px; + align-items: center; + gap: 8px; + align-self: stretch; + } + + .dark .select-option { + color: #fafafa; + } + + .select-option:hover { + background-color: #f4f4f5; + } + + .dark .select-option:hover { + background-color: #3f3f46; + } + + .select-option.selected { + /* background: var(--Background-bg-washed-active, #F4F4F5); */ + background: var(--Background-bg-washed-active, #F4F4F5); + /* color: #F4F4F5; */ + font-weight: 500; + border-radius: 4px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13.6233 7.91709C13.8537 7.57285 13.7614 7.10703 13.4171 6.87666C13.0729 6.64628 12.6071 6.73859 12.3767 7.08283L9.08932 11.995C8.99765 12.132 8.80084 12.1443 8.69278 12.0199L7.56633 10.7225C7.29476 10.4098 6.82106 10.3764 6.5083 10.6479C6.19553 10.9195 6.16213 11.3932 6.43369 11.706L7.56015 13.0033C8.31656 13.8745 9.69424 13.7881 10.3359 12.8293L13.6233 7.91709Z' fill='%231E90FF'/%3E%3C/svg%3E"); + /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%231E90FF' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.243 6.757L11 13l-1.243-1.243a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.414z'/%3E%3C/svg%3E"); */ + background-repeat: no-repeat; + background-position: right 10px center; /* Position on the right side */ + background-size: 16px 16px; /* Adjust size as needed */ + } + + .dark .select-option.selected { + background: var(--Background-bg-washed-active, #3f3f46); + /* color: #272727; */ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13.6233 7.91709C13.8537 7.57285 13.7614 7.10703 13.4171 6.87666C13.0729 6.64628 12.6071 6.73859 12.3767 7.08283L9.08932 11.995C8.99765 12.132 8.80084 12.1443 8.69278 12.0199L7.56633 10.7225C7.29476 10.4098 6.82106 10.3764 6.5083 10.6479C6.19553 10.9195 6.16213 11.3932 6.43369 11.706L7.56015 13.0033C8.31656 13.8745 9.69424 13.7881 10.3359 12.8293L13.6233 7.91709Z' fill='%231E90FF'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 10px center; + background-size: 16px 16px; + } + + .select-option.disabled { + background-color: #f4f4f5; + color: #a1a1aa; + pointer-events: none; + opacity: 0.6; /* Optional: adds a "disabled" appearance */ + cursor: not-allowed; /* Optional: changes the cursor */ + } + .dark .select-option.disabled { + background-color: #18181b; + color: #52525b; + } + + .select-small .select-option { + /* Body/XS/500 */ + font-size: 12px; + } + + .select-medium .select-option{ + font-size: 14px; + } + + .select-large .select-option { + font-size: 16px; + } + + /* Hover states for trigger */ + .select-trigger:hover { + border-color: #a1a1aa; + } + + .dark .select-trigger:hover { + border-color: #71717a; + } + + /* Focus state */ + .custom-select.open .select-trigger { + border-color: #2563eb; + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); + } + + .dark .custom-select.open .select-trigger { + border-color: #3b82f6; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); + } + + /* Size variants */ + .select-small .select-trigger { + font-size: 14px; + padding: 6px 10px; + } + + .select-medium .select-trigger { + font-size: 16px; + padding: 8px 12px; + } + + .select-large .select-trigger { + font-size: 18px; + padding: 10px 16px; + } + + /* Ghost variant */ + .select-ghost .select-trigger { + background-color: transparent; + border: 1px solid transparent; + } + + .dark .select-ghost .select-trigger { + background-color: transparent; + border-color: transparent; + } + + .select-ghost .select-trigger:hover { + background-color: #f4f4f5; + border: 1px solid transparent; + border-color: #e4e4e7; + } + + .dark .select-ghost .select-trigger:hover { + background-color: #27272a; + border-color: #3f3f46; + } + + .select-ghost.open .select-trigger { + background-color: #ffffff; + border-color: #2563eb; + } + + .dark .select-ghost.open .select-trigger { + background-color: #27272a; + border-color: #3b82f6; + } + + /* Disabled state */ + .custom-select.disabled .select-trigger { + background-color: #f4f4f5; + /* border-color: #e4e4e7; */ + color: #a1a1aa; + cursor: not-allowed; + opacity: 0.6; + } + + .dark .custom-select.disabled .select-trigger { + background-color: #18181b; + /* border-color: #3f3f46; */ + color: #52525b; + } + + .custom-select.disabled .select-value { + color: #a1a1aa; + } + + .dark .custom-select.disabled .select-value { + color: #52525b; + } + + .dark .select-label { + color: #fafafa; + } + + /* Size variants */ + .select-small { + font-size: 14px; + } + + .select-medium { + font-size: 16px; + } + + .select-large { + font-size: 18px; + } + + /* Filled variant */ + .select-filled { + background-color: #f4f4f5; + border: 1px solid transparent; + } + + .dark .select-filled { + background-color: #18181b; + border-color: transparent; + } + + .select-filled:hover { + background-color: #e4e4e7; + } + + .dark .select-filled:hover { + background-color: #27272a; + } + + /* Ghost variant */ + .select-ghost { + background-color: transparent; + border: 1px solid transparent; + } + + .dark .select-ghost { + background-color: transparent; + border-color: transparent; + } + + .select-ghost:focus { + background-color: #ffffff; + border-color: #2563eb; + } + + .dark .select-ghost:focus { + background-color: #27272a; + border-color: #3b82f6; + } + ``` + + + ```tsx + // Custom Select Dropdown functionality + document.addEventListener('DOMContentLoaded', function () { + const customSelects = document.querySelectorAll('.custom-select'); + + customSelects.forEach(select => { + const trigger = select.querySelector('.select-trigger'); + const dropdown = select.querySelector('.select-dropdown'); + const options = select.querySelectorAll('.select-option'); + const valueDisplay = select.querySelector('.select-value'); + + // Toggle dropdown + trigger.addEventListener('click', function (e) { + e.stopPropagation(); + const isDisabled = select.classList.contains('disabled'); + if (isDisabled) return; + + // Close other dropdowns + document.querySelectorAll('.custom-select').forEach(s => { + if (s !== select) s.classList.remove('open'); + }); + + select.classList.toggle('open'); + }); + + // Select option + options.forEach(option => { + option.addEventListener('click', function (e) { + e.stopPropagation(); + const value = this.dataset.value; + const text = this.textContent; + + // Update selected state + options.forEach(opt => opt.classList.remove('selected')); + this.classList.add('selected'); + + // Update display + valueDisplay.textContent = text; + valueDisplay.classList.add('has-value'); + + // Close dropdown + select.classList.remove('open'); + }); + }); + }); + + // Close dropdowns when clicking outside + document.addEventListener('click', function () { + document.querySelectorAll('.custom-select').forEach(select => { + select.classList.remove('open'); + }); + }); + }); + ``` + +