From a5e63bf6885ce4809e15d40141104a9b20ce89f5 Mon Sep 17 00:00:00 2001 From: Fid GNU Date: Tue, 10 Feb 2026 11:33:00 +0800 Subject: [PATCH 1/2] feat: add tag component HTML with CSS --- .../assets/ta-preview/tag/ta-tag-preview.html | 121 +++++++++ .../docs/public/assets/ta-preview/tag/tag.css | 233 ++++++++++++++++++ 2 files changed, 354 insertions(+) create mode 100644 apps/docs/public/assets/ta-preview/tag/ta-tag-preview.html create mode 100644 apps/docs/public/assets/ta-preview/tag/tag.css diff --git a/apps/docs/public/assets/ta-preview/tag/ta-tag-preview.html b/apps/docs/public/assets/ta-preview/tag/ta-tag-preview.html new file mode 100644 index 00000000..8fe931be --- /dev/null +++ b/apps/docs/public/assets/ta-preview/tag/ta-tag-preview.html @@ -0,0 +1,121 @@ + + + + + + + Tag Component Examples + + + + + + + + + +
+

Variants

+
+ + + Default + + + + + Primary + + + + + Success + + + + + Danger + + + + + Warning + +
+
+ + +
+

Sizes

+
+ + + Small + + + + + Medium + + + + + Large + +
+
+ + +
+

Styles

+
+ + + Normal + + + + + Rounded + +
+
+ + + \ No newline at end of file diff --git a/apps/docs/public/assets/ta-preview/tag/tag.css b/apps/docs/public/assets/ta-preview/tag/tag.css new file mode 100644 index 00000000..e6f65aef --- /dev/null +++ b/apps/docs/public/assets/ta-preview/tag/tag.css @@ -0,0 +1,233 @@ +/* Select Component Styles */ +.dark body { + height: 100%; + background-color: #161619; +} + +/* Tag Component Styles */ + +/* Base Tag */ +.tag { + display: inline-flex; + align-items: center; + gap: 5px; + /* border-radius: 9999px; */ + /* border-radius: 8px; */ + border-width: 1px; + box-sizing: border-box; + border-style: solid; + /* border-color: rgba(var(--_gray-200) / 1); */ + font-weight: 500; + white-space: nowrap; + transition: all 0.15s ease; + white-space: nowrap; + border-radius: var(--Radius-Small, 8px); +} + +.tag-rounded { + /* border-radius: 9999px; */ + border-radius: var(--Radius-Small, 9999px); +} + +/* Tag Text */ +.tag-text { + line-height: 1; +} + +/* Tag Dot */ +.tag-dot { + width: 0.375rem; + height: 0.375rem; + border-radius: 50%; + flex-shrink: 0; +} + +/* Size Variants */ +.tag-small { + /* padding: 0.125rem 0.5rem; */ + /* font-size: 0.75rem; */ + padding: 2px 8px; + height: 22px; + font-size: 12px; +} + +.tag-small .tag-dot { + /* width: 0.3rem; */ + /* height: 0.3rem; */ + width: 6px; + height: 6px; +} + +.tag-medium { + /* padding: 0.25rem 0.625rem; */ + /* font-size: 0.875rem; */ + padding: 4px 8px; + height: 28px; + font-size: 14px; +} + +.tag-medium .tag-dot { + width: 8px; + height: 8px; +} + +.tag-large { + /* padding: 0.375rem 0.75rem; + font-size: 1rem; */ + height: 32px; + padding: 4px 10px; + font-size: 16px; +} + +.tag-large .tag-dot { + /* width: 0.5rem; */ + /* height: 0.5rem; */ + width: 10px; + height: 10px; +} + +/* Default Variant */ +.tag-default { + /* background-color: #f4f4f5; + color: #3f3f46; */ + /* border-color: #71717a; */ + border: 1px solid var(--Gray-gray-600-20, rgba(82, 82, 91, 0.20)); + background: var(--Background-bg-washed, #F4F4F5); + color: var(--Text-txt-black-500, #6B6B74); +} + +.tag-default .tag-dot { + background-color: #71717a; +} + +.dark .tag-default { + /* background-color: #27272a; + color: #d4d4d8; */ + background: var(--Background-bg-washed, #1D1D21); + color: var(--Text-txt-black-500, #A1A1AA); +} + +.dark .tag-default .tag-dot { + background-color: #a1a1aa; +} + +/* Primary Variant */ +.tag-primary { + /* background-color: #eff6ff; + color: #1e40af; + border-color: #1e40af; */ + /* background-color: #EFF6FF; */ + border: 1px solid var(--Primary-primary-600-20, rgba(37, 99, 235, 0.20)); + background: var(--Background-primary-bg-primary-50, #EFF6FF); + color: var(--Text-txt-primary, #2563EB); +} + +.tag-primary .tag-dot { + background-color: #2563eb; +} + +.dark .tag-primary { + /* background-color: #172554; + color: #93c5fd; */ + background: var(--Background-primary-bg-primary-50, #172554); + color: var(--Text-txt-primary, #6394FF); +} + +.dark .tag-primary .tag-dot { + /* background-color: #3b82f6; */ + background-color: #6394FF; +} + +/* Success Variant */ +.tag-success { + /* background-color: #f0fdf4; + color: #15803d; + border-color: #15803d; */ + border: 1px solid var(--Success-success-700-20, rgba(21, 128, 61, 0.20)); + background: var(--Background-success-bg-success-50, #F0FDF4); + color: var(--Text-txt-success, #15803D); +} + +.tag-success .tag-dot { + /* background-color: #22c55e; */ + background-color: #15803D; +} + +.dark .tag-success { + /* background-color: #14532d; + color: #86efac; */ + background: var(--Background-success-bg-success-50, #052E16); + color: var(--Text-txt-success, #22C55E); +} + +.dark .tag-success .tag-dot { + background-color: #22c55e; +} + +/* Danger Variant */ +.tag-danger { + /* background-color: #fef2f2; + color: #b91c1c; + border-color: #b91c1c; */ + border: 1px solid var(--Danger-danger-600-20, rgba(220, 38, 38, 0.20)); + background: var(--Background-danger-bg-danger-50, #FEF2F2); + color: var(--Text-txt-danger, #B91C1C); +} + +.tag-danger .tag-dot { + /* background-color: #ef4444; */ + background-color: #B91C1C; +} + +.dark .tag-danger { + /* background-color: #450a0a; + color: #fca5a5; */ + background: var(--Background-danger-bg-danger-50, #450A0A); + color: var(--Text-txt-danger, #F87171); +} + +.dark .tag-danger .tag-dot { + /* background-color: #ef4444; */ + background-color: #F87171; +} + +/* Warning Variant */ +.tag-warning { + /* background-color: #fefce8; + color: #a16207; + border-color: #a16207; */ + border: 1px solid var(--Warning-warning-700-20, rgba(161, 98, 7, 0.20)); + background: var(--Background-warning-bg-warning-50, #FEFCE8); + color: var(--Text-txt-warning, #A16207); +} + +.tag-warning .tag-dot { + /* background-color: #eab308; */ + background-color: #A16207; +} + +.dark .tag-warning { + /* background-color: #422006; + color: #fde047; */ + background: var(--Background-warning-bg-warning-50, #422006); + color: var(--Text-txt-warning, #EAB308); +} + +.dark .tag-warning .tag-dot { + /* background-color: #facc15; */ + background-color: #EAB308; +} + +/* Tag without dot */ +.tag-no-dot { + gap: 0; +} + +.tag-no-dot .tag-dot { + display: none; +} + +/* Hover effect (optional) */ +.tag:hover { + opacity: 0.9; +} \ No newline at end of file From 12d29e9614205acd228adfad5b1c00f4c42952b8 Mon Sep 17 00:00:00 2001 From: Fid GNU Date: Tue, 10 Feb 2026 11:46:10 +0800 Subject: [PATCH 2/2] feat: ta-tag preview --- .../(transistory-assistance)/ta-tag.mdx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-tag.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-tag.mdx index f05754f7..27d09c0d 100644 --- a/apps/docs/content/docs/develop/(transistory-assistance)/ta-tag.mdx +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-tag.mdx @@ -2,5 +2,25 @@ title: Tag 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 + /* Tag Component Implementation */ + ``` + + + ```css + /* Tag Component Styles */ + ``` + + + +## Overview \ No newline at end of file