← All changes | src/tailwind.css +129 -0 3.1.4 → trunk View file →

		@@ -89,8 +89,137 @@
89	89	--color-wp-alert-green: #4ab866;
90	90	--color-wp-notice-success: #eff9f1;
91	91	--color-wp-notice-error: #fcf0f0;
92	92	--color-wp-notice-neutral: #c3c4c7;
	93	+
	94	+ /* Fallbacks match what the flow hardcoded, so an untouched site is identical. */
	95	+ --color-ui-page: var(--ext-ui-page, var(--ext-banner-main, #2271b1));
	96	+ --color-ui-page-text: var(
	97	+ --ext-ui-page-text,
	98	+ var(--ext-banner-text, #ffffff)
	99	+ );
	100	+ --ui-base-action: var(--ext-ui-action, var(--ext-design-main, #2271b1));
	101	+ --color-ui-action: var(--ui-base-action);
	102	+ --ui-base-action-text: var(
	103	+ --ext-ui-action-text,
	104	+ var(--ext-design-text, #ffffff)
	105	+ );
	106	+ --color-ui-action-text: var(--ui-base-action-text);
	107	+ --color-ui-focus: var(--ext-ui-focus, var(--color-ui-action));
	108	+ --ui-base-ink: var(--ext-ui-ink, #1e1e1e);
	109	+ --color-ui-ink: var(--ui-base-ink);
	110	+ --color-ui-ink-muted: var(--ext-ui-ink-muted, #757575);
	111	+ --color-ui-line: var(--ext-ui-line, #dddddd);
	112	+ /* Transparent, so the button reads as an outline and never as a white pill. */
	113	+ --ui-base-secondary-fill: var(--ext-ui-secondary-fill, transparent);
	114	+ --color-ui-secondary-fill: var(--ui-base-secondary-fill);
	115	+ --ui-base-secondary-line: var(--ext-ui-secondary-line, var(--ui-base-ink));
	116	+ --color-ui-secondary-line: var(--ui-base-secondary-line);
	117	+ --ui-base-secondary-text: var(--ext-ui-secondary-text, var(--ui-base-ink));
	118	+ --color-ui-secondary-text: var(--ui-base-secondary-text);
	119	+ /* Merged so one utility carries both the fill and its opacity. */
	120	+ --color-ui-surface: color-mix(
	121	+ in srgb,
	122	+ var(--ext-ui-surface, #f0f0f0)
	123	+ calc(var(--ext-ui-surface-opacity, 0.8) * 100%),
	124	+ transparent
	125	+ );
	126	+
	127	+ --radius-ui-card: var(--ext-ui-radius-card, var(--ext-ui-radius, 1.5rem));
	128	+ --radius-ui-input: var(--ext-ui-radius-input, var(--ext-ui-radius, 1.5rem));
	129	+ --radius-ui-button: var(--ext-ui-radius-button, var(--ext-ui-radius, 9999px));
	130	+ /* No global fallback: rounding the cards must not round the logo. */
	131	+ --radius-ui-logo: var(--ext-ui-radius-logo, 0px);
	132	+
	133	+ --blur-ui: var(--ext-ui-blur, 40px);
	134	+ --shadow-ui: var(
	135	+ --ext-ui-shadow,
	136	+ 0 4px 6px -1px rgb(0 0 0 / 0.1),
	137	+ 0 2px 4px -2px rgb(0 0 0 / 0.1)
	138	+ );
	139	+
	140	+ --font-ui-heading: var(--ext-ui-font-heading, var(--ext-ui-font, inherit));
	141	+ --font-ui-body: var(--ext-ui-font-body, var(--ext-ui-font, inherit));
	142	+ --font-ui-input: var(--ext-ui-font-input, var(--ext-ui-font, inherit));
	143	+ --font-weight-ui-strong: var(--ext-ui-heading-weight, 600);
	144	+
	145	+ --text-ui-heading: var(--ext-ui-heading-size, 1.25rem);
	146	+ --text-ui-heading--line-height: 1.4;
	147	+ /* 1.2x holds the `text-xl` / `md:text-2xl` pair at the default size. */
	148	+ --text-ui-heading-lg: calc(var(--ext-ui-heading-size, 1.25rem) * 1.2);
	149	+ --text-ui-heading-lg--line-height: 1.34;
	150	+ --text-ui-status: var(--ext-ui-status-size, 0.875rem);
	151	+ --text-ui-status--line-height: 1.5;
	152	+ --font-weight-ui-status: var(--ext-ui-status-weight, 500);
	153	+ --text-ui-body: var(--ext-ui-body-size, 1rem);
	154	+ --text-ui-body--line-height: var(--ext-ui-leading, 1.5rem);
	155	+
	156	+ --tracking-ui-heading: var(--ext-ui-heading-tracking, 0em);
	157	+ --leading-ui: var(--ext-ui-leading, 1.5rem);
	158	+}
	159	+
	160	+/* Launch design tokens with no matching Tailwind namespace. */
	161	+@utility border-ui {
	162	+ border-width: var(--ext-ui-border-width, 1px);
	163	+ border-style: var(--ext-ui-border-style, solid);
	164	+}
	165	+@utility max-w-ui {
	166	+ max-width: var(--ext-ui-max-width, 42rem);
	167	+}
	168	+@utility gap-ui {
	169	+ gap: var(--ext-ui-gap, 1.25rem);
	170	+}
	171	+/* Scaled so one control holds the gap-5 / md:gap-8 pair exactly. */
	172	+@utility gap-ui-lg {
	173	+ gap: calc(var(--ext-ui-gap, 1.25rem) * 1.6);
	174	+}
	175	+@utility mb-ui-label {
	176	+ margin-bottom: var(--ext-ui-label-gap, 0.5rem);
	177	+}
	178	+@utility mb-ui-block {
	179	+ margin-bottom: calc(var(--ext-ui-label-gap, 0.5rem) * 2);
	180	+}
	181	+@utility gap-ui-section {
	182	+ gap: var(--ext-ui-section-gap, 1rem);
	183	+}
	184	+/* Each side reads its own property first, so unlocking padding needs no JS. */
	185	+@utility p-ui {
	186	+ padding-top: var(--ext-ui-padding-top, var(--ext-ui-surface-padding, 1.5rem));
	187	+ padding-right: var(
	188	+ --ext-ui-padding-right,
	189	+ var(--ext-ui-surface-padding, 1.5rem)
	190	+ );
	191	+ padding-bottom: var(
	192	+ --ext-ui-padding-bottom,
	193	+ var(--ext-ui-surface-padding, 1.5rem)
	194	+ );
	195	+ padding-left: var(
	196	+ --ext-ui-padding-left,
	197	+ var(--ext-ui-surface-padding, 1.5rem)
	198	+ );
	199	+}
	200	+@utility px-ui {
	201	+ padding-right: var(
	202	+ --ext-ui-padding-right,
	203	+ var(--ext-ui-surface-padding, 1.5rem)
	204	+ );
	205	+ padding-left: var(
	206	+ --ext-ui-padding-left,
	207	+ var(--ext-ui-surface-padding, 1.5rem)
	208	+ );
	209	+}
	210	+/* Two fallbacks: the partner logo and the Extendify mark ship at different heights. */
	211	+@utility h-ui-logo {
	212	+ height: var(--ext-ui-logo-height, 2.5rem);
	213	+}
	214	+@utility h-ui-mark {
	215	+ height: var(--ext-ui-logo-height, 2rem);
	216	+}
	217	+@utility h-ui-loader {
	218	+ height: var(--ext-ui-loader-height, 118px);
	219	+}
	220	+@utility rounded-ui-loader {
	221	+ border-radius: var(--ext-ui-loader-radius, 0px);
93	222	}
94	223
95	224	/* sizing */
96	225	@utility max-w-52 {