/* no-prefix */
*,
::before,
::after {
--tw-shadow: 0 0 #0000;
--tw-inset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-opacity: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
}
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
box-sizing: border-box;
border: 0px solid transparent;
}
button:not(:disabled) {
@apply cursor-pointer!;
}
}
@theme {
--breakpoint-xxs: 280px;
--breakpoint-xs: 480px;
--breakpoint-sm: 600px;
--breakpoint-md: 783px; /* Admin Bar goes big */
--breakpoint-lg: 961px; /* Sidebar auto folds */
--breakpoint-xl: 1152px;
--breakpoint-2xl: 1345px;
--breakpoint-3xl: 1600px;
--breakpoint-5xl: 2300px;
--color-gray-50: #fafafa;
--color-gray-100: #f0f0f0;
--color-gray-150: #eaeaea; /* This wasn't a variable but I saw it on buttons */
--color-gray-200: #e0e0e0; /* Used sparingly for light borders. */
--color-gray-300: #dddddd; /* Used for most borders. */
--color-gray-400: #cccccc;
--color-gray-500: #bbbbbb;
--color-gray-600: #949494; /* Meets 3:1 UI or large text contrast against white. */
--color-gray-700: #757575; /* Meets 4.6:1 text contrast against white. */
--color-gray-800: #2f2f2f;
--color-gray-900: #1e1e1e;
--color-override: var(--ext-override, #2271b1);
--color-wp-theme-bg: var(--wp-admin-theme-bg, #373b3f);
--color-wp-theme-main: var(--wp-admin-theme-main, #2271b1);
--color-wp-theme-accent: var(--wp-admin-theme-accent, #76ed85);
--color-editor-main: var(--wp-admin-theme-color, #3858e9);
--color-editor-main-darker: var(--wp-admin-theme-color-darker-10, #2145e6);
--color-editor-accent-darker: var(--wp-components-color-accent-darker-10);
--color-design-main: var(--ext-design-main, #2271b1);
--color-design-text: var(--ext-design-text, #ffffff);
--color-design-tertiary: var(--wp--preset--color--tertiary);
--color-banner-main: var(--ext-banner-main, #2271b1);
--color-banner-text: var(--ext-banner-text, #ffffff);
--color-extendify-main: #0b4a43;
--color-extendify-main-dark: #05312c;
--color-extendify-alert: #841010;
--color-extendify-gray: #5f5f5f;
--color-extendify-secondary: #cbc3f5;
--color-extendify-black: #1e1e1e;
--color-extendify-transparent-white: rgba(253, 253, 253, 0.88);
--color-extendify-transparent-black-100: rgba(0, 0, 0, 0.07);
--color-wp-alert-yellow: #f0b849;
--color-wp-alert-red: #cc1818;
--color-wp-alert-green: #4ab866;
--color-wp-notice-success: #eff9f1;
--color-wp-notice-error: #fcf0f0;
--color-wp-notice-neutral: #c3c4c7;
/* Fallbacks match what the flow hardcoded, so an untouched site is identical. */
--color-ui-page: var(--ext-ui-page, var(--ext-banner-main, #2271b1));
--color-ui-page-text: var(
--ext-ui-page-text,
var(--ext-banner-text, #ffffff)
);
--ui-base-action: var(--ext-ui-action, var(--ext-design-main, #2271b1));
--color-ui-action: var(--ui-base-action);
--ui-base-action-text: var(
--ext-ui-action-text,
var(--ext-design-text, #ffffff)
);
--color-ui-action-text: var(--ui-base-action-text);
--color-ui-focus: var(--ext-ui-focus, var(--color-ui-action));
--ui-base-ink: var(--ext-ui-ink, #1e1e1e);
--color-ui-ink: var(--ui-base-ink);
--color-ui-ink-muted: var(--ext-ui-ink-muted, #757575);
--color-ui-line: var(--ext-ui-line, #dddddd);
/* Transparent, so the button reads as an outline and never as a white pill. */
--ui-base-secondary-fill: var(--ext-ui-secondary-fill, transparent);
--color-ui-secondary-fill: var(--ui-base-secondary-fill);
--ui-base-secondary-line: var(--ext-ui-secondary-line, var(--ui-base-ink));
--color-ui-secondary-line: var(--ui-base-secondary-line);
--ui-base-secondary-text: var(--ext-ui-secondary-text, var(--ui-base-ink));
--color-ui-secondary-text: var(--ui-base-secondary-text);
/* Merged so one utility carries both the fill and its opacity. */
--color-ui-surface: color-mix(
in srgb,
var(--ext-ui-surface, #f0f0f0)
calc(var(--ext-ui-surface-opacity, 0.8) * 100%),
transparent
);
--radius-ui-card: var(--ext-ui-radius-card, var(--ext-ui-radius, 1.5rem));
--radius-ui-input: var(--ext-ui-radius-input, var(--ext-ui-radius, 1.5rem));
--radius-ui-button: var(--ext-ui-radius-button, var(--ext-ui-radius, 9999px));
/* No global fallback: rounding the cards must not round the logo. */
--radius-ui-logo: var(--ext-ui-radius-logo, 0px);
--blur-ui: var(--ext-ui-blur, 40px);
--shadow-ui: var(
--ext-ui-shadow,
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1)
);
--font-ui-heading: var(--ext-ui-font-heading, var(--ext-ui-font, inherit));
--font-ui-body: var(--ext-ui-font-body, var(--ext-ui-font, inherit));
--font-ui-input: var(--ext-ui-font-input, var(--ext-ui-font, inherit));
--font-weight-ui-strong: var(--ext-ui-heading-weight, 600);
--text-ui-heading: var(--ext-ui-heading-size, 1.25rem);
--text-ui-heading--line-height: 1.4;
/* 1.2x holds the `text-xl` / `md:text-2xl` pair at the default size. */
--text-ui-heading-lg: calc(var(--ext-ui-heading-size, 1.25rem) * 1.2);
--text-ui-heading-lg--line-height: 1.34;
--text-ui-status: var(--ext-ui-status-size, 0.875rem);
--text-ui-status--line-height: 1.5;
--font-weight-ui-status: var(--ext-ui-status-weight, 500);
--text-ui-body: var(--ext-ui-body-size, 1rem);
--text-ui-body--line-height: var(--ext-ui-leading, 1.5rem);
--tracking-ui-heading: var(--ext-ui-heading-tracking, 0em);
--leading-ui: var(--ext-ui-leading, 1.5rem);
}
/* Launch design tokens with no matching Tailwind namespace. */
@utility border-ui {
border-width: var(--ext-ui-border-width, 1px);
border-style: var(--ext-ui-border-style, solid);
}
@utility max-w-ui {
max-width: var(--ext-ui-max-width, 42rem);
}
@utility gap-ui {
gap: var(--ext-ui-gap, 1.25rem);
}
/* Scaled so one control holds the gap-5 / md:gap-8 pair exactly. */
@utility gap-ui-lg {
gap: calc(var(--ext-ui-gap, 1.25rem) * 1.6);
}
@utility mb-ui-label {
margin-bottom: var(--ext-ui-label-gap, 0.5rem);
}
@utility mb-ui-block {
margin-bottom: calc(var(--ext-ui-label-gap, 0.5rem) * 2);
}
@utility gap-ui-section {
gap: var(--ext-ui-section-gap, 1rem);
}
/* Each side reads its own property first, so unlocking padding needs no JS. */
@utility p-ui {
padding-top: var(--ext-ui-padding-top, var(--ext-ui-surface-padding, 1.5rem));
padding-right: var(
--ext-ui-padding-right,
var(--ext-ui-surface-padding, 1.5rem)
);
padding-bottom: var(
--ext-ui-padding-bottom,
var(--ext-ui-surface-padding, 1.5rem)
);
padding-left: var(
--ext-ui-padding-left,
var(--ext-ui-surface-padding, 1.5rem)
);
}
@utility px-ui {
padding-right: var(
--ext-ui-padding-right,
var(--ext-ui-surface-padding, 1.5rem)
);
padding-left: var(
--ext-ui-padding-left,
var(--ext-ui-surface-padding, 1.5rem)
);
}
/* Two fallbacks: the partner logo and the Extendify mark ship at different heights. */
@utility h-ui-logo {
height: var(--ext-ui-logo-height, 2.5rem);
}
@utility h-ui-mark {
height: var(--ext-ui-logo-height, 2rem);
}
@utility h-ui-loader {
height: var(--ext-ui-loader-height, 118px);
}
@utility rounded-ui-loader {
border-radius: var(--ext-ui-loader-radius, 0px);
}
/* sizing */
@utility max-w-52 {
max-width: 13rem;
}
@utility max-w-72 {
max-width: 18rem;
}
@utility min-w-20 {
min-width: 5rem;
}
@utility min-w-30 {
min-width: 7.5rem;
}
@utility min-w-40 {
min-width: 10rem;
}
@utility min-w-48 {
min-width: 12rem;
}
@utility min-w-60 {
min-width: 15rem;
}
@utility min-w-sm {
min-width: 7rem;
}
@utility min-w-md {
min-width: 30rem;
}
@utility w-40vw {
width: 40vw;
}
@utility min-h-16 {
min-height: 4rem;
}
@utility min-h-20 {
min-height: 5rem;
}
@utility min-h-40 {
min-height: 10rem;
}
@utility min-h-48 {
min-height: 12rem;
}
@utility min-h-60 {
min-height: 15rem;
}
@utility min-h-half {
min-height: 50vh;
}
@utility max-h-half {
max-height: 50vh;
}
/* typography */
@utility text-xss {
font-size: 11px;
}
@utility text-3xl {
font-size: 2rem;
line-height: 2.5rem;
}
@utility leading-extra-tight {
line-height: 0.5;
}
/* z-index */
@utility z-high-1 {
z-index: 99998;
}
@utility z-high {
z-index: 99999;
}
@utility z-higher {
z-index: 999999;
}
@utility z-max-1 {
z-index: 2147483646;
}
@utility z-max {
z-index: 2147483647;
}
@utility ring-wp {
--tw-ring-width: var(--wp-admin-border-width-focus, 2px);
}
/* shadows */
@utility shadow-inner-sm {
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.1),
0 3px 15px -3px rgba(0, 0, 0, 0.035),
0 0 1px rgba(0, 0, 0, 0.025);
}
@utility shadow-inner-md {
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.2),
0 3px 15px -3px rgba(0, 0, 0, 0.025),
0 0 1px rgba(0, 0, 0, 0.02);
}
@utility shadow-modal {
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.1),
0 3px 15px -3px rgba(0, 0, 0, 0.035),
0 0 1px rgba(0, 0, 0, 0.05);
}
@utility shadow-button {
box-shadow: 0 0 0 1px var(--ext-design-main, #3959e9);
}
@utility shadow-toggle {
box-shadow:
0 0 0 2px #fff,
0 0 0 4px var(--ext-design-main, #3959e9);
}
@utility shadow-surface {
box-shadow: 0 5px 20px 10px rgba(0, 0, 0, 0.03);
}
@utility shadow-lg-flipped {
box-shadow: 0px -10px 30px -15px #00000025;
}
@utility shadow-2xl-flipped {
box-shadow: 0px -25px 50px -12px #00000025;
}
@utility shadow-vibe {
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}