| @@ -11,21 +11,24 @@ | ||
| 11 | 11 | * or another plugin's widget running on the same page. |
| 12 | 12 | * |
| 13 | 13 | * CSS CUSTOM PROPERTIES |
| 14 | 14 | * --------------------- |
| 15 | - * OpenStation sets these variables on the card body element. Using them | |
| 16 | - * means your widget automatically respects the user's chosen theme | |
| 17 | - * (light, dark, or any custom accent colour) without any extra code. | |
| 15 | + * OpenStation declares these variables in the shell palette, so your card | |
| 16 | + * inherits them. Using them means your widget follows the desktop theme | |
| 17 | + * and the user's chosen accent without any extra code. | |
| 18 | 18 | * |
| 19 | 19 | * --os-ui-color-text Primary text — body copy, headings |
| 20 | 20 | * --os-ui-color-text-subtle Muted text — labels, timestamps, metadata |
| 21 | 21 | * --os-ui-color-border Divider lines and borders |
| 22 | - * --os-ui-color-accent Brand blue — use for buttons, highlights, links | |
| 22 | + * --os-ui-color-accent The user's accent — buttons, highlights, links | |
| 23 | 23 | * --os-ui-color-surface The card's glass background (rarely needed) |
| 24 | 24 | * |
| 25 | - * Always provide a fallback value as the second argument to var() in case | |
| 26 | - * the shell loads in an unexpected context: | |
| 27 | - * color: var(--os-ui-color-text, #1a1a1a); | |
| 25 | + * The card is a dark glass panel under every theme, so the first four | |
| 26 | + * resolve to on-dark values. Always provide a fallback as the second | |
| 27 | + * argument to var() in case the shell loads in an unexpected context — | |
| 28 | + * and pick a fallback that reads on dark, or the card looks correct | |
| 29 | + * everywhere except where the palette is missing: | |
| 30 | + * color: var(--os-ui-color-text, #fff); | |
| 28 | 31 | * |
| 29 | 32 | * LAYOUT |
| 30 | 33 | * ------ |
| 31 | 34 | * The card body is a block-level element with 12px padding on all sides. |
