NODEDC_LAUNCHER/dc-ui-guideline/components/glass-panel.json

37 lines
1.2 KiB
JSON

{
"id": "glass-panel",
"name": "GlassPanel",
"kind": "surface",
"status": "draft-stable",
"summary": "Dark matte glass container used for panels, cards, modal shells, dropdown shells, and admin content blocks.",
"sourceRefs": [
{
"project": "nodedc_launcher",
"file": "src/shared/ui/Glass.tsx"
},
{
"project": "nodedc_launcher",
"file": "src/styles/globals.css",
"classes": ["glass-surface", "admin-panel-nav", "admin-panel-content", "service-content-modal"]
},
{
"project": "nodedc_taskmanager",
"file": "plane-src/apps/web/styles/globals.css",
"classes": ["nodedc-dropdown-surface", "nodedc-modal-field", "nodedc-settings-card"]
}
],
"tokens": {
"radius": "card | modal | control depending on scale",
"blur": "panel | modal | dropdown",
"background": "dark matte glass gradient over rgba black",
"border": "none or transparent soft glass only"
},
"rules": [
"Never use hard outline as the main visual boundary.",
"Use background opacity and blur to separate layers.",
"For major shells use radius.card or radius.modal.",
"For controls inside shells use radius.control."
]
}