| @@ -1,7 +1,7 @@ | ||
| 1 | 1 | /* |
| 2 | 2 | * ============================================================================= |
| 3 | - * Desktop Mode — Starter Widget styles | |
| 3 | + * OpenStation — Starter Widget styles | |
| 4 | 4 | * ============================================================================= |
| 5 | 5 | * |
| 6 | 6 | * NAMING CONVENTION |
| 7 | 7 | * ----------------- |
| @@ -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 | - * Desktop Mode 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 | - * --wpd-color-text Primary text — body copy, headings | |
| 20 | - * --wpd-color-text-subtle Muted text — labels, timestamps, metadata | |
| 21 | - * --wpd-color-border Divider lines and borders | |
| 22 | - * --wpd-color-accent Brand blue — use for buttons, highlights, links | |
| 23 | - * --wpd-color-surface The card's glass background (rarely needed) | |
| 19 | + * --os-ui-color-text Primary text — body copy, headings | |
| 20 | + * --os-ui-color-text-subtle Muted text — labels, timestamps, metadata | |
| 21 | + * --os-ui-color-border Divider lines and borders | |
| 22 | + * --os-ui-color-accent The user's accent — buttons, highlights, links | |
| 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(--wpd-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. |
| @@ -54,9 +57,9 @@ | ||
| 54 | 57 | gap: 10px; |
| 55 | 58 | height: 100%; |
| 56 | 59 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| 57 | 60 | font-size: 13px; |
| 58 | - color: var(--wpd-color-text, #1a1a1a); | |
| 61 | + color: var(--os-ui-color-text, #1a1a1a); | |
| 59 | 62 | /* Prevent the root from exceeding the card body width. */ |
| 60 | 63 | min-width: 0; |
| 61 | 64 | } |
| 62 | 65 | |
| @@ -70,11 +73,11 @@ | ||
| 70 | 73 | font-weight: 600; |
| 71 | 74 | font-size: 11px; |
| 72 | 75 | text-transform: uppercase; |
| 73 | 76 | letter-spacing: 0.06em; |
| 74 | - color: var(--wpd-color-text-subtle, #6b7280); | |
| 77 | + color: var(--os-ui-color-text-subtle, #6b7280); | |
| 75 | 78 | padding-bottom: 8px; |
| 76 | - border-bottom: 1px solid var(--wpd-color-border, #e5e7eb); | |
| 79 | + border-bottom: 1px solid var(--os-ui-color-border, #e5e7eb); | |
| 77 | 80 | /* Fixed height — does not grow or shrink with the card. */ |
| 78 | 81 | flex-shrink: 0; |
| 79 | 82 | /* Truncate if the label is too wide for a very narrow card. */ |
| 80 | 83 | white-space: nowrap; |
| @@ -90,9 +93,9 @@ | ||
| 90 | 93 | .dm-starter__body { |
| 91 | 94 | flex: 1; |
| 92 | 95 | font-size: 12px; |
| 93 | 96 | line-height: 1.5; |
| 94 | - color: var(--wpd-color-text, #1a1a1a); | |
| 97 | + color: var(--os-ui-color-text, #1a1a1a); | |
| 95 | 98 | min-width: 0; |
| 96 | 99 | /* Allow long post titles to wrap rather than overflow. */ |
| 97 | 100 | overflow-wrap: break-word; |
| 98 | 101 | } |
| @@ -97,15 +100,15 @@ | ||
| 97 | 100 | overflow-wrap: break-word; |
| 98 | 101 | } |
| 99 | 102 | |
| 100 | 103 | /* |
| 101 | - * Counter button — demonstrates using --wpd-color-accent for interactive | |
| 104 | + * Counter button — demonstrates using --os-ui-color-accent for interactive | |
| 102 | 105 | * elements so the button colour matches the user's chosen shell accent. |
| 103 | 106 | * flex-shrink: 0 keeps it at its natural height at the bottom of the card. |
| 104 | 107 | */ |
| 105 | 108 | .dm-starter__counter { |
| 106 | 109 | flex-shrink: 0; |
| 107 | - background: var(--wpd-color-accent, #3b82f6); | |
| 110 | + background: var(--os-ui-color-accent, #3b82f6); | |
| 108 | 111 | color: #fff; |
| 109 | 112 | border: none; |
| 110 | 113 | border-radius: 6px; |
| 111 | 114 | padding: 6px 12px; |
