studio/apps/ui/src/index.css at 8490969dcc5c75fd7de4d494244b27792919d1bb · Automattic/studio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
:root {
	/* Default is 2px; 4px reads a bit softer. */
	--wpds-border-radius-sm: 4px;

	/* Overlay stacking — portals mount into `document.body` and must beat
	   app-chrome stacking contexts (sidebar header z-index: 1, floating
	   toggle z-index: 10). Menus stay below modal surfaces; tooltips live
	   above dialogs so help text on controls inside a modal still surfaces
	   above the containing overlay. */
	--ui-desks-z-popover: 100;
	--ui-desks-z-dialog: 700;
	--ui-desks-z-tooltip: 800;
	--wp-ui-dialog-z-index: var( --ui-desks-z-dialog );
	--wp-ui-tooltip-z-index: var( --ui-desks-z-tooltip );

	--ui-desks-bg: rgb( 232, 234, 235 );
	--ui-desks-material: #fff;
	--ui-desks-glass: rgba( 255, 255, 255, 0.85 );
	--ui-desks-glass-border: rgba( 255, 255, 255, 0.7 );
	--ui-desks-text: #14171a;
	--ui-desks-muted: #6b7280;
	--ui-desks-divider: rgba( 15, 23, 42, 0.06 );
	--ui-desks-control-hover: rgba( 15, 23, 42, 0.07 );
	--ui-desks-focus: #3858e9;
	--ui-desks-radius-control: 16px;
	--ui-desks-radius-surface: 18px;
	--ui-desks-radius-panel: 22px;
	--ui-desks-radius-button: 12px;
	--ui-desks-corner-shape: superellipse( 1.42 );
	--ui-desks-shadow-control: 0 1px 2px rgba( 15, 23, 42, 0.04 ), 0 8px 24px rgba( 15, 23, 42, 0.06 );
	--ui-desks-shadow-control-raised: 0 1px 2px rgba( 15, 23, 42, 0.04 ),
		0 18px 44px rgba( 15, 23, 42, 0.1 );
	--ui-desks-shadow-surface-raised: 0 1px 2px rgba( 15, 23, 42, 0.04 ),
		0 18px 44px rgba( 15, 23, 42, 0.1 );
}

/* Comfortable density (Settings → Preferences → Density): the design
   system's default body size (md) is 13px, which can read small in the
   desktop chrome. Bump it a step — md drives body text, site names, and
   nav labels. The attribute lives on `<html>` (set by `DensityBridge` in
   `app/app-providers.tsx`) so the override also reaches portals mounted
   on `body`. Loaded after design-tokens.css so this wins. */
:root[data-studio-density='comfortable'] {
	--wpds-typography-font-size-md: 14px;
}

/* Comfortable density: give `size="small"` buttons a step more height.
   @wordpress/ui hardcodes the 24px small-button height (sizes don't track
   density tokens), which reads cramped against the larger base font. The
   package bakes its CSS-module classes as `<hash>__is-small`, so the suffix
   is the only stable hook; being unlayered, this rule wins over the
   package's `@layer wp-ui-components` declarations. Other components'
   `__is-small` modifiers (e.g. Dialog.Popup) match too, but the
   `--wp-ui-button-*` variables are inert outside Button — and they can't
   leak to descendant buttons because every button re-declares them on
   itself. */
:root[data-studio-density='comfortable'] [class*='__is-small'] {
	--wp-ui-button-height: 28px;
}

body {
	margin: 0;
	padding: 0;
	font-family: var( --wpds-typography-font-family-body );
	font-size: var( --wpds-typography-font-size-md );
	line-height: var( --wpds-typography-line-height-md );
	background-color: var( --wpds-color-bg-surface-neutral );
	color: var( --wpds-color-fg-content-neutral );
	color-scheme: light dark;
	scrollbar-width: thin;
	scrollbar-color: gray transparent;
}

/* Universal heading styles derived from the design system's font-size /
   line-height ramp. Each level steps down one token (h1 = 2xl, h6 = xs),
   keeping the rest of the type contract — family, weight, color, zero
   margin — identical. Components can still override via their own class
   where a specific context demands it, but bare `<h1>`…`<h6>` elements
   pick up a consistent look for free. */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var( --wpds-typography-font-family-heading );
	font-weight: var( --wpds-typography-font-weight-regular );
	color: var( --wpds-color-fg-content-neutral );
	margin: 0;
}

h1 {
	font-size: var( --wpds-typography-font-size-2xl );
	line-height: var( --wpds-typography-line-height-2xl );
}

h2 {
	font-size: var( --wpds-typography-font-size-xl );
	line-height: var( --wpds-typography-line-height-xl );
}

h3 {
	font-size: var( --wpds-typography-font-size-lg );
	line-height: var( --wpds-typography-line-height-lg );
}

h4 {
	font-size: var( --wpds-typography-font-size-md );
	line-height: var( --wpds-typography-line-height-md );
}

h5 {
	font-size: var( --wpds-typography-font-size-sm );
	line-height: var( --wpds-typography-line-height-sm );
}

h6 {
	font-size: var( --wpds-typography-font-size-xs );
	line-height: var( --wpds-typography-line-height-xs );
}

/* Interactive elements inside drag-region ancestors (title bars, section
   headers) need to opt out so clicks and focus still land. Harmless where no
   drag region is active. `[data-base-ui-portal] *` covers the @base-ui Menu
   portal subtree — items render as divs, so we can't rely on the
   button/link selectors. */
button,
a,
input,
textarea,
[role='button'],
[data-base-ui-portal],
[data-base-ui-portal] * {
	-webkit-app-region: no-drag;
}

/* Show the focus ring only on keyboard focus, overriding @wordpress/ui's
   :focus-based outline. Unlayered CSS wins over WP UI's cascade layers.
   `a` covers Button primitives rendered as links via its `render` prop.
   Also revert the background/border shift @wordpress/ui's Button applies on
   `:focus` — when a Dialog auto-focuses a button on open, the "active" look
   would otherwise show without any user intent. Leave `color` alone:
   loading buttons rely on `color: transparent` to hide their label while
   the spinner runs, and overriding that here would make the label visible
   again. */
button:focus:not( :focus-visible ),
a:focus:not( :focus-visible ),
[role='button']:focus:not( :focus-visible ) {
	outline: none;
	background-color: var( --wp-ui-button-background-color );
	border-color: var( --wp-ui-button-border-color );
}

/* Compact density: shrink icons to match the tighter spacing tokens.
   @wordpress/icons draws SVGs at 24x24 by default; the theme's compact
   density only shrinks padding/gap tokens, not icon sizes. Override the
   svg width/height attributes with CSS until the design system exposes
   a density-aware icon token. Ideally this lives in ThemeProvider. */
[data-wpds-density='compact'] [data-ui-mode='classic'] svg {
	width: 16px;
	height: 16px;
}

/* Comfortable density (see the `data-studio-density` rules above): give
   icons a step more presence alongside the larger type. `:where()` keeps
   the specificity identical to the compact rule above — (0,2,1) — so this
   only outranks it by source order, and component rules that deliberately
   beat the base rule (e.g. the site-list status glyph's doubled-class
   selector) keep their custom sizes in comfortable too. */
:root[data-studio-density='comfortable'] :where([data-wpds-density='compact'] [data-ui-mode='classic']) svg {
	width: 18px;
	height: 18px;
}

/* Desks uses each shape's indicator as the visible selection outline.
   Hide tldraw's default selection box and handle glyphs while keeping the
   underlying resize/rotate wrappers interactive. */
[data-ui-mode='desks'] .tl-selection__fg__outline {
	stroke: transparent;
}

[data-ui-mode='desks'] .tl-corner-handle,
[data-ui-mode='desks'] .tl-mobile-rotate__fg,
[data-ui-mode='desks'] .tl-text-handle {
	opacity: 0;
}

/* @wordpress/components' ComboboxControl (used by DataForm's adaptive
   picker once a field has 10+ elements) leaves its wrapper without a
   background, so the body surface bleeds through around the inner input
   and suggestion rows. Force both to the same background the input
   itself uses so the control reads as one solid field. */
.components-combobox-control__suggestions-container,
.components-form-token-field__suggestions-list {
	background-color: var( --wp-components-color-background, #fff );
}

/* Honor the user's reduced-motion preference across the entire app. Class-
   scoped transitions out-specify a `*`-targeted rule, so `!important` is
   needed to clamp them. Components that genuinely need to keep motion can
   re-enable it with a more specific `!important` rule inside the same
   media query. */
@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}