PluginProbe
OpenStation: Desktop Windows, Dock & Virtual Desktops for WP Admin / 1.1.10
OpenStation: Desktop Windows, Dock & Virtual Desktops for WP Admin v1.1.10
1.1.10 1.1.9 1.1.8 1.1.7 1.1.6 1.1.5 1.1.4 1.1.3 1.1.2 1.1.1 1.1.0 1.0.1 1.0.0 0.9.8 0.9.7 0.9.6 0.9.4 0.9.5 0.9.3 0.9.2 0.9.1 0.9.0 0.8.9 0.8.8 0.8.7 All 34 releases
← All changes | assets/css/variables.css +175 -62 1.1.91.1.10 View file →
@@ -532,8 +532,18 @@
532 532 --os-ui-selection-fg: #fffbff;
533 533
534 534 /* Accent — the identity moment. */
535 535 --os-ui-accent: #f252fc;
536 + /*
537 + * Ink on the accent FILL: the tick in a checked box, the dot in a
538 + * radio, the label of a primary button. Distinct from
539 + * `--os-ui-fg-on-accent`, which the shell reads as "light text on
540 + * a dark surface" in seventy-odd places that are not the accent.
541 + * Starlight here for Pulse; the accent picker rewrites it inline
542 + * to Void whenever the chosen accent is light (Starlight, Sirius,
543 + * Nebula, Lagoon), so the pair always agree.
544 + */
545 + --os-ui-accent-ink: #fffbff;
536 546 --os-ui-accent-strong: #ec9bff;
537 547 --os-ui-accent-soft: color-mix(in srgb, var(--os-ui-accent-dim) 14%, transparent);
538 548 /*
539 549 * Pulse, one step back — and the single knob for how loud the
@@ -774,22 +784,21 @@
774 784 * satisfy WCAG 1.4.11.
775 785 */
776 786 --os-ui-holo-track-edge: #66636b;
777 787 /*
778 - * Focus. One ring for the whole kit — Pulse, offset, over a soft
779 - * halo, so it reads on Obsidian, on a mesh, and on the near-white
788 + * Focus. One ring for the whole kit — the accent, offset by a Void
789 + * gap, so it reads on Obsidian, on a mesh, and on the near-white
780 790 * of a legacy theme alike.
781 791 *
782 - * Note which layer dims and which does not. The RING is full Pulse
783 - * and stays there: it is the only thing on screen saying where the
784 - * keyboard is, and a focus indicator is the last place to trade
785 - * legibility for calm. Only the bloom behind it comes down, from
786 - * 45% to 30%, and onto the dim — which is the layer that was
787 - * making a focused control look like it was on fire.
792 + * The RING is full accent and stays there: it is the only thing on
793 + * screen saying where the keyboard is, and a focus indicator is the
794 + * last place to trade legibility for calm. The bloom that used to
795 + * sit behind it is gone: it was the layer that made a focused
796 + * control look like it was on fire, and the Void gap already does
797 + * the work of separating the ring from whatever it lands on.
788 798 */
789 799 --os-ui-focus-ring: 0 0 0 2px rgba(12, 11, 15, 0.9),
790 - 0 0 0 4px var(--os-ui-accent, #f252fc),
791 - 0 0 12px 2px color-mix(in srgb, var(--os-ui-accent-dim) 30%, transparent);
800 + 0 0 0 4px var(--os-ui-accent, #f252fc);
792 801 /*
793 802 * …and one for FIELDS, which is a different problem. A text input
794 803 * already has a border to thicken and it sits in a column of other
795 804 * inputs, so the ring above — designed to survive landing on a
@@ -805,27 +814,27 @@
805 814 * The selected row of a VERTICAL `<os-tabs>`: the sidebar in
806 815 * OpenStation Preferences, and any native window that lays its
807 816 * pages down the side rather than across the top.
808 817 *
809 - * Three layers, and the split is the whole point. Colour repeated
810 - * down nine rows is wallpaper, so the accent is spent as a
811 - * two-pixel EDGE and the row itself gets only a wash that falls
812 - * away: it appears where it is cheap to look at and expensive to
813 - * ignore.
818 + * The one selection on the station that keeps the accent. The row
819 + * runs full-bleed and says "this one" with a 2px accent line at its
820 + * leading edge, the bloom that line throws back across the row, and
821 + * a wash fading out towards the label. Everywhere else a selection
822 + * is a surface (a grey key, an outline, a flat fill); the sidebar is
823 + * where you are, and the brand marks it.
814 824 *
815 - * `-edge` is the accent the user picked, flat. It used to be
816 - * Miomesh, and a mesh does hold up at 2px where a radial one
817 - * would crop to an arbitrary lilac — but the edge is the loudest
818 - * thing on the page that says "this row", and a row that says it
819 - * in Pulse while the controls beside it say it in the chosen
820 - * accent reads as two systems.
821 - *
822 - * `-wash` and `-bloom` are AMBIENT accent, so both resolve through
823 - * `--os-ui-accent-dim` like every other glow in the kit. Turning
824 - * the station down is still one edit. The Starlight stop in the
825 - * middle of the wash is what keeps the row from reading as a pink
826 - * smear: it lifts the surface under the label rather than tinting
827 - * it, and it is gone by the time the row ends.
825 + * The three coloured layers are DERIVED from the accent: `-edge` is
826 + * the accent flat, `-wash` and `-bloom` resolve through
827 + * `--os-ui-accent-dim` like every other ambient use, so a picked
828 + * accent reaches the row on this palette and on Legacy alike (see
829 + * `desktopThemesLegacy.php`: a theme cannot answer a derived token,
830 + * so a derivation is shared). How much of each shows, and the row's
831 + * shape, are literals a theme answers on its own: edge width, wash
832 + * and bloom opacity, and a fill, radius and inset that together
833 + * would turn the row into a lifted pill. The wash's opacity scales
834 + * every stop of the gradient, because a background image has no
835 + * opacity of its own and both of the row's pseudo-elements are
836 + * already spent on the edge and the bloom.
828 837 */
829 838 --os-ui-tab-edge: linear-gradient(
830 839 var(--os-ui-accent, #f252fc),
831 840 var(--os-ui-accent, #f252fc)
@@ -831,10 +840,15 @@
831 840 var(--os-ui-accent, #f252fc)
832 841 );
833 842 --os-ui-tab-wash: linear-gradient(
834 843 90deg,
835 - color-mix(in srgb, var(--os-ui-accent-dim) 16%, transparent) 0%,
836 - rgba(255, 251, 255, 0.04) 42%,
844 + color-mix(
845 + in srgb,
846 + var(--os-ui-accent-dim) calc(16% * var(--os-ui-tab-wash-opacity, 1)),
847 + transparent
848 + )
849 + 0%,
850 + rgba(255, 251, 255, calc(0.04 * var(--os-ui-tab-wash-opacity, 1))) 42%,
837 851 transparent 100%
838 852 );
839 853 --os-ui-tab-bloom: linear-gradient(
840 854 90deg,
@@ -840,10 +854,64 @@
840 854 90deg,
841 855 color-mix(in srgb, var(--os-ui-accent-dim) 26%, transparent),
842 856 transparent
843 857 );
858 + --os-ui-tab-edge-width: 2px;
859 + --os-ui-tab-wash-opacity: 1;
860 + --os-ui-tab-bloom-opacity: 1;
861 + --os-ui-tab-fill: transparent;
862 + --os-ui-tab-radius: 0px;
863 + --os-ui-tab-inset: 0px;
844 864
845 865 /*
866 + * `<os-segmented>`, same split again. The thumb and its label still
867 + * mix from the accent, so Legacy and any theme that answers 100%
868 + * keep a coloured pill that follows the picker. This palette answers
869 + * 0%: a Void track with the chosen option as a mid-grey key and a
870 + * Starlight label, whatever accent is picked.
871 + *
872 + * The key's grey is set by contrast, not by taste. The first pass
873 + * used the sidebar row's grey, and it sat at 1.37:1 against the
874 + * track and 1.15:1 against the card around it, so the key read as a
875 + * hole in the track rather than a thing pressed into it. This grey
876 + * clears 3:1 against Void, what a selected state needs against its
877 + * neighbours, and still carries its Starlight label at 5.7:1. A
878 + * small shadow under it and a hairline around the track do the
879 + * rest: without the hairline, a Void track on the page behind the
880 + * dock options measured 1.05:1 and all but disappeared.
881 + *
882 + * Under the pointer an unselected option takes a faint Starlight
883 + * lift instead of the holographic film.
884 + */
885 + --os-ui-segmented-bg: #0c0b0f;
886 + --os-ui-segmented-edge: inset 0 0 0 1px rgba(255, 251, 255, 0.1);
887 + --os-ui-segmented-selected-accent: 0%;
888 + --os-ui-segmented-selected-base: #67636e;
889 + --os-ui-segmented-selected-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
890 + --os-ui-segmented-hover-bg: rgba(255, 251, 255, 0.06);
891 + --os-ui-segmented-hover-sheen: none;
892 +
893 + /*
894 + * The chosen tile in a swatch grid (wallpapers, the theme and
895 + * layout cards in Preferences, and any grid a plugin builds from
896 + * `<os-swatch>`), same split. The ring is the accent and stays
897 + * derived; this palette sets its width to 0 and lifts the tile
898 + * instead: a solid Starlight stroke outlines it, a shadow sets it
899 + * above the grid, and a Starlight disc with a tick cut out of it
900 + * sits in the corner. The stroke is Starlight rather than the
901 + * accent, like the badge, so the chosen tile stands out the same
902 + * way whichever accent is picked; a translucent hairline was too
903 + * faint on the dark theme cards. Legacy answers 2px, no lift, no
904 + * badge. The accent chips in the colour row keep their ring
905 + * whatever these say: a colour is the whole content there, and a
906 + * lift on a 28px square is invisible.
907 + */
908 + --os-ui-swatch-ring-width: 0px;
909 + --os-ui-swatch-lift: 0 0 0 1px #fffbff,
910 + 0 12px 24px -12px rgba(0, 0, 0, 0.8);
911 + --os-ui-swatch-badge-bg: #fffbff;
912 +
913 + /*
846 914 * ---- Motion --------------------------------------------------
847 915 *
848 916 * Four durations and three curves, and every animated thing in the
849 917 * kit picks from them. Not for tidiness: a panel where the switch
@@ -993,10 +1061,10 @@
993 1061 * only from the component's own `::slotted( a )`. See the comment
994 1062 * there: a slotted link is a document-tree element, so wp-admin's
995 1063 * bare `a` rule outranks anything the shadow root says about it.
996 1064 */
997 - --os-ui-notice-link: #ec9bff;
998 - --os-ui-notice-link-hover: #fffbff;
1065 + --os-ui-notice-link: #fffbff;
1066 + --os-ui-notice-link-hover: #ccc8ce;
999 1067 --os-ui-badge-danger-bg: rgba(255, 90, 90, 0.16);
1000 1068 --os-ui-badge-success-bg: rgba(147, 240, 198, 0.16);
1001 1069 --os-ui-badge-warning-bg: rgba(248, 242, 182, 0.16);
1002 1070 --os-ui-badge-info-bg: rgba(194, 241, 241, 0.16);
@@ -1098,16 +1166,31 @@
1098 1166 * them under "what stays fixed" — and moving this one to Nebula put
1099 1167 * white cluster labels on a pale lilac chip at 1.9:1. It keeps its
1100 1168 * own colour, and the label keeps carrying on it.
1101 1169 *
1102 - * The graph's toolbar is chrome, though, and it does follow. The
1103 - * count pill on an ACTIVE filter chip is a 70%-white fill, and it
1104 - * was carrying `--os-ui-accent-strong` numerals — Nebula on white,
1105 - * ~1.7:1. It is one more bright fill naming its own dark text, the
1106 - * same escape hatch `--os-ui-ribbon-fg` and `--os-ui-step-chip-fg`
1107 - * take, and for the same reason.
1170 + * The graph's toolbar is chrome, though, and it follows the same
1171 + * split as selection everywhere else: the accent stays derived, a
1172 + * literal says how much of it shows. An ON filter chip mixes its
1173 + * edge, wash and text from the accent by `-accent`, towards the
1174 + * neutrals below; this palette answers 0%, so an on chip reads like
1175 + * the selected theme card in Preferences, a Starlight outline around
1176 + * the dark surface. Legacy answers 100%. An OFF chip sits on the
1177 + * toolbar with the strong border as its edge, because the plain
1178 + * border is the toolbar's own colour and a chip drawn with it has no
1179 + * outline at all.
1180 + *
1181 + * The count pill is the strong border's grey on both, with Starlight
1182 + * numerals: muted numerals on that grey land at 4.0:1, under what
1183 + * 12px text needs.
1108 1184 */
1109 - --os-ui-cg-chip-count-fg-active: #0c0b0f;
1185 + --os-ui-cg-chip-accent: 0%;
1186 + --os-ui-cg-chip-border: #4d4a52;
1187 + --os-ui-cg-chip-border-active: #fffbff;
1188 + --os-ui-cg-chip-fill-active: #1a1721;
1189 + --os-ui-cg-chip-count-bg: #4d4a52;
1190 + --os-ui-cg-chip-count-fg: #fffbff;
1191 + --os-ui-cg-chip-count-bg-active: #4d4a52;
1192 + --os-ui-cg-chip-count-fg-active: #fffbff;
1110 1193
1111 1194 /*
1112 1195 * ---- The widget card's public token contract ----------------
1113 1196 *
@@ -1346,14 +1429,22 @@
1346 1429 --os-dock-indicator-bg: color-mix( in srgb, var( --os-ui-accent, #f252fc ) 72%, transparent );
1347 1430 --os-dock-bg: rgba(12, 11, 15, 0.72);
1348 1431 --os-dock-icon-color: rgba(255, 251, 255, 0.72);
1349 1432 --os-dock-icon-color-hover: #fffbff;
1350 - --os-dock-item-bg-hover: rgba(242, 82, 252, 0.18);
1433 + --os-dock-item-bg-hover: rgba(255, 251, 255, 0.08);
1351 1434 /*
1435 + * The tile whose window is in front sits on a lit plate: the same
1436 + * Starlight wash the hover uses, one step brighter, so "this is the
1437 + * app you are in" reads as depth rather than as a coloured mark.
1438 + * The running dot under every open app stays; a lit plate says
1439 + * which one is in front, the dots say which ones are open.
1440 + */
1441 + --os-dock-item-bg-focused: rgba(255, 251, 255, 0.1);
1442 + /*
1352 1443 * The status indicator and the focus ring, and both say "this
1353 1444 * one" about a tile the user chose — so they read the accent
1354 - * rather than a fixed Pulse. Pulse is still what an untouched
1355 - * install shows, because that is what the picker starts on.
1445 + * rather than a fixed colour. Starlight is what an untouched
1446 + * install shows, because that is the accent the picker starts on.
1356 1447 */
1357 1448 --os-dock-item-outline: var(--os-ui-accent, #f252fc);
1358 1449 /*
1359 1450 * Hairline between the dock and the desktop. Reaches the side
@@ -1535,8 +1626,21 @@
1535 1626 rgba(255, 90, 90, 0.16)
1536 1627 );
1537 1628 --os-ai-panel-bg: rgba(26, 23, 33, 0.97);
1538 1629 /*
1630 + * The Site assistant, the same split as selection everywhere else:
1631 + * its header tint and mark, search icon, lit row and icon tiles still
1632 + * mix from the accent, and so does its send button; --os-ai-accent
1633 + * says how much. This palette
1634 + * answers 0%, so the chrome is neutral and a lit row is the flat 8%
1635 + * Starlight of the Preferences sidebar; Legacy answers 100%. The
1636 + * command icons keep the accent here too: they read it directly, so
1637 + * the colour stays in the pictures and out of the chrome.
1638 + */
1639 + --os-ai-accent: 0%;
1640 + --os-ai-row-fill: rgba(255, 251, 255, 0.08);
1641 + --os-ai-tile-fill: rgba(255, 251, 255, 0.06);
1642 + /*
1539 1643 * ---- Window tab strip ---------------------------------------
1540 1644 *
1541 1645 * A window with sub-pages reads as three surfaces stacked in
1542 1646 * depth, and the values below are that ramp: Astro on the focused
@@ -1615,46 +1719,54 @@
1615 1719 #f4eff9 0%,
1616 1720 #ffffff 58%
1617 1721 );
1618 1722 /*
1619 - * The crown. Holomesh, masked away before the joint for the same
1620 - * reason. It is on exactly ONE tab at a time — that is what keeps
1621 - * the mesh an identity moment instead of wallpaper, and it is the
1622 - * rule the rest of the kit follows. Set it to `none` to get the
1623 - * plain frosted plate back.
1723 + * The crown. Holomesh over the top of the plate, masked away before
1724 + * the joint, on exactly ONE tab at a time. Off in this palette: the
1725 + * plain frosted plate is the tab, and the one identity moment on a
1726 + * window is left to the wallpaper behind it. A theme that wants the
1727 + * mesh back declares `var(--os-mesh-holo)` here, at around 0.3.
1624 1728 */
1625 - --os-tabs-active-crown: var(--os-mesh-holo);
1729 + --os-tabs-active-crown: none;
1626 1730 --os-tabs-active-crown-opacity: 0.3;
1627 1731 /*
1628 1732 * The rail: one continuous line around the silhouette of
1629 - * page-plus-tab.
1733 + * page-plus-tab, painted as a background-image through a mask,
1734 + * which is why it is a gradient and not a colour. It is the accent
1735 + * the user picked, flat, and it stays derived so the pick reaches
1736 + * it on every theme.
1630 1737 *
1631 - * This is the one place the accent is spent on the tab strip, and
1632 - * spending it here is what lets the tab itself stay uncoloured —
1633 - * so it is the accent the user picked, flat, and not Pulsemesh.
1634 - * A mesh here would be the accent everywhere else on the tab
1635 - * strip disagreeing with the one line that carries it. Written as
1636 - * a gradient rather than a colour because the rail is painted as
1637 - * a background-image through a mask.
1638 - *
1639 - * Set it to `none` for the plain frosted plate with no line.
1738 + * On this palette it is drawn at 0 opacity. The plate already
1739 + * reads as "this tab" by being the one white shape on an Obsidian
1740 + * strip that joins the page below it; a coloured line around that
1741 + * silhouette was saying the same thing a second time, on every
1742 + * window on the desk. The opacity is the literal a theme answers
1743 + * (Legacy: 1), and the width stays at 2px because the strip's
1744 + * geometry is built on it: the plate sits on the rail whether or
1745 + * not the rail is visible, so turning it back on costs no seam.
1640 1746 */
1641 1747 --os-tabs-rail: linear-gradient(
1642 1748 var(--os-ui-accent, #f252fc),
1643 1749 var(--os-ui-accent, #f252fc)
1644 1750 );
1751 + --os-tabs-rail-opacity: 0;
1645 1752 --os-tabs-rail-width: 2px;
1646 1753 --os-media-tile-bg: rgba(255, 251, 255, 0.05);
1647 1754 --os-media-visual-bg: rgba(255, 251, 255, 0.04);
1648 1755 --os-skeleton-low: rgba(255, 251, 255, 0.05);
1649 1756 --os-skeleton-high: rgba(255, 251, 255, 0.13);
1650 - --os-drop-preview-bg: rgba(242, 82, 252, 0.1);
1651 - --os-drop-preview-border: rgba(242, 82, 252, 0.55);
1757 + --os-drop-preview-bg: rgba(255, 251, 255, 0.08);
1758 + --os-drop-preview-border: rgba(255, 251, 255, 0.45);
1652 1759
1653 1760 /*
1654 1761 * File tiles — anywhere a `.os-file-tile` (or sibling
1655 1762 * canvas tile) renders. The defaults match the desk: Starlight
1656 - * labels over a dark sky, with a Pulse selection wash.
1763 + * labels over a dark sky, and a selected tile is a lifted
1764 + * Starlight plate, the same language as the selected row in the
1765 + * Preferences sidebar, one step brighter than the hover wash so
1766 + * the two states stay apart. The accent ring around it is a
1767 + * derived colour with a literal width; this palette sets the
1768 + * width to 0 (Legacy keeps 1px) so selection is depth, not colour.
1657 1769 *
1658 1770 * Surfaces that are light in their own right override these in
1659 1771 * their own scope, e.g.:
1660 1772 *
@@ -1668,9 +1780,10 @@
1668 1780 */
1669 1781 --os-tile-fg: var(--os-fg, #fffbff);
1670 1782 --os-tile-fg-muted: rgba(255, 251, 255, 0.7);
1671 1783 --os-tile-hover-bg: rgba(255, 251, 255, 0.12);
1672 - --os-tile-selected-bg: rgba(242, 82, 252, 0.24);
1784 + --os-tile-selected-bg: rgba(255, 251, 255, 0.16);
1785 + --os-tile-selected-ring-width: 0px;
1673 1786 --os-tile-focus-ring: var(--wp-admin-theme-color, #f252fc);
1674 1787 --os-tile-shortcut-bg: rgba(12, 11, 15, 0.7);
1675 1788 --os-tile-shortcut-fg: #fffbff;
1676 1789 --os-tile-shortcut-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);