diff --git a/projects/packages/premium-analytics/changelog/update-premium-analytics-no-token-fallbacks b/projects/packages/premium-analytics/changelog/update-premium-analytics-no-token-fallbacks new file mode 100644 index 000000000000..4e02c653c38f --- /dev/null +++ b/projects/packages/premium-analytics/changelog/update-premium-analytics-no-token-fallbacks @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Comment: Expand stylelint no-token-fallback-values to the whole package and remove manual WPDS token fallbacks from source so wp-build injects canonical theme fallbacks at build time. diff --git a/projects/packages/premium-analytics/packages/ui/src/date-filters-panel/date-filters-panel.scss b/projects/packages/premium-analytics/packages/ui/src/date-filters-panel/date-filters-panel.scss index 5d7ad3f15871..283e6cb8e7fb 100644 --- a/projects/packages/premium-analytics/packages/ui/src/date-filters-panel/date-filters-panel.scss +++ b/projects/packages/premium-analytics/packages/ui/src/date-filters-panel/date-filters-panel.scss @@ -55,7 +55,7 @@ .date-range-quick-presets__pill, .date-filters-panel-button { - --wp-ui-button-height: calc(var(--wpds-dimension-size-lg, 40px) - 2px); + --wp-ui-button-height: calc(var(--wpds-dimension-size-lg) - 2px); } } } diff --git a/projects/packages/premium-analytics/packages/ui/src/date-range-popover/date-range-filter.scss b/projects/packages/premium-analytics/packages/ui/src/date-range-popover/date-range-filter.scss index 89c511993ba4..235beef90a4a 100644 --- a/projects/packages/premium-analytics/packages/ui/src/date-range-popover/date-range-filter.scss +++ b/projects/packages/premium-analytics/packages/ui/src/date-range-popover/date-range-filter.scss @@ -22,7 +22,7 @@ // Hovered/focused trigger: same brand-tinted highlight the select-control // popup gives its items. .date-filters-panel-button { - font-size: max(var(--wpds-typography-font-size-md, 13px), 16px); + font-size: max(var(--wpds-typography-font-size-md), 16px); --wp-ui-button-background-color-active: var(--wpds-color-background-interactive-brand-weak-active); } @@ -102,6 +102,6 @@ @media (min-width: 600px) { .date-filters-panel-button { - font-size: var(--wpds-typography-font-size-md, 13px); + font-size: var(--wpds-typography-font-size-md); } } diff --git a/projects/packages/premium-analytics/packages/ui/src/section-tabs/section-tabs.module.scss b/projects/packages/premium-analytics/packages/ui/src/section-tabs/section-tabs.module.scss index 365a95a97b59..729310f89d68 100644 --- a/projects/packages/premium-analytics/packages/ui/src/section-tabs/section-tabs.module.scss +++ b/projects/packages/premium-analytics/packages/ui/src/section-tabs/section-tabs.module.scss @@ -1,8 +1,8 @@ .tabList { border-block-end: - var(--wpds-border-width-xs, 1px) solid - var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0); - margin-block-end: var(--wpds-dimension-gap-lg, 16px); + var(--wpds-border-width-xs) solid + var(--wpds-color-stroke-surface-neutral-weak); + margin-block-end: var(--wpds-dimension-gap-lg); } /* diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-empty-state/chart-empty-state.module.scss b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-empty-state/chart-empty-state.module.scss index 10fbdf09e800..83480288110e 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-empty-state/chart-empty-state.module.scss +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-empty-state/chart-empty-state.module.scss @@ -9,5 +9,5 @@ } .icon { - color: var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0); + color: var(--wpds-color-stroke-surface-neutral-weak); } diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-empty-state/stories/chart-empty-state.stories.tsx b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-empty-state/stories/chart-empty-state.stories.tsx index fa153948e4a7..c31bf9dfb508 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-empty-state/stories/chart-empty-state.stories.tsx +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-empty-state/stories/chart-empty-state.stories.tsx @@ -52,9 +52,9 @@ const WidgetCard = ( { style={ { width, height, - border: '1px solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0)', - borderRadius: 'var(--wpds-border-radius-md, 8px)', - background: 'var(--wpds-color-background-surface-neutral, #fff)', + border: '1px solid var(--wpds-color-stroke-surface-neutral-weak)', + borderRadius: 'var(--wpds-border-radius-md)', + background: 'var(--wpds-color-background-surface-neutral)', display: 'flex', flexDirection: 'column', overflow: 'hidden', @@ -62,11 +62,11 @@ const WidgetCard = ( { >
{ title } diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-leaderboard/leaderboard-chart.module.scss b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-leaderboard/leaderboard-chart.module.scss index cc755d486f27..58cb8c1f74c6 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-leaderboard/leaderboard-chart.module.scss +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-leaderboard/leaderboard-chart.module.scss @@ -19,10 +19,10 @@ // Row label links sit inside the chart's scroll container, which would clip // an outward focus ring — draw it inset instead. :global(a:focus-visible) { - border-radius: var(--wpds-border-radius-sm, 2px); + border-radius: var(--wpds-border-radius-sm); outline: var(--wpds-border-width-focus) solid - var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); + var(--wpds-color-stroke-focus); outline-offset: calc(-1 * var(--wpds-border-width-focus)); } diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/download-csv-button/download-csv-button.module.scss b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/download-csv-button/download-csv-button.module.scss index 284cf873d1ba..7d3c7ad57e7f 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/download-csv-button/download-csv-button.module.scss +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/download-csv-button/download-csv-button.module.scss @@ -2,7 +2,7 @@ align-self: flex-end; display: inline-flex; align-items: center; - gap: var(--wpds-dimension-gap-xs, 4px); + gap: var(--wpds-dimension-gap-xs); min-block-size: 20px; // Widget roots clip overflow, so the focus ring is drawn inset and the ring // plus its gap must live inside the button's own box (mirrors @@ -24,10 +24,10 @@ } .downloadCsv:focus-visible { - border-radius: var(--wpds-border-radius-sm, 2px); + border-radius: var(--wpds-border-radius-sm); outline: var(--wpds-border-width-focus) solid - var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); + var(--wpds-color-stroke-focus); outline-offset: calc(-1 * var(--wpds-border-width-focus)); } diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/metric-tabs-chart/metric-tabs-chart.module.scss b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/metric-tabs-chart/metric-tabs-chart.module.scss index b3a7ec6d9596..03d3eca173c8 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/metric-tabs-chart/metric-tabs-chart.module.scss +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/metric-tabs-chart/metric-tabs-chart.module.scss @@ -10,7 +10,7 @@ container-type: inline-size; display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-md, 16px); + gap: var(--wpds-dimension-gap-md); height: 100%; min-height: 0; } @@ -22,7 +22,7 @@ justify-content: space-between; align-items: flex-start; flex-shrink: 0; - gap: var(--wpds-dimension-gap-md, 16px); + gap: var(--wpds-dimension-gap-md); } /* The metric tab list: a row of cards that wrap (not a text tab bar). @@ -31,7 +31,7 @@ .tabs { display: flex; flex-wrap: wrap; - gap: var(--wpds-dimension-gap-sm, 8px); + gap: var(--wpds-dimension-gap-sm); min-width: 0; overflow: visible; } @@ -53,14 +53,14 @@ * rule sits in a low-priority @layer, so this unlayered override wins. */ .metricSelect [class*="trigger-wrapper"] { height: auto; - padding-block: var(--wpds-dimension-padding-sm, 8px); + padding-block: var(--wpds-dimension-padding-sm); } /* Draw the focus ring inside the card; the default outset ring gets clipped * by the widget chrome's `overflow: auto`. */ .tab, .metricSelect [class*="trigger-wrapper"] { - outline-offset: calc(-1 * var(--wpds-border-width-focus, 1.5px)); + outline-offset: calc(-1 * var(--wpds-border-width-focus)); } .metricSelect button { @@ -70,8 +70,8 @@ .tab { height: auto; - padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-md, 12px); - border-radius: var(--wpds-border-radius-md, 4px); + padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-md); + border-radius: var(--wpds-border-radius-md); } /* Hide the selection underline; the card fill shows selection instead. Older @@ -97,7 +97,7 @@ .tabContent { display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-xs, 4px); + gap: var(--wpds-dimension-gap-xs); align-items: flex-start; text-align: left; } diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/metric-tile/metric-tile-grid.module.scss b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/metric-tile/metric-tile-grid.module.scss index 41a567051eb1..cb89d8b5ff05 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/metric-tile/metric-tile-grid.module.scss +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/metric-tile/metric-tile-grid.module.scss @@ -5,7 +5,7 @@ $metric-tile-grid-grid-min-block-size: 360px; $metric-tile-grid-row-value-font-size-max: 40px; $metric-tile-grid-tile-value-font-size-max: 40px; $metric-tile-grid-prominent-value-font-size-max: 44px; -$metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-height-2xl, 40px) + var(--wpds-dimension-padding-2xl, 24px) + var(--wpds-dimension-padding-2xl, 24px) + var(--wpds-dimension-gap-lg, 16px)); +$metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-height-2xl) + var(--wpds-dimension-padding-2xl) + var(--wpds-dimension-padding-2xl) + var(--wpds-dimension-gap-lg)); /* Size containment removes the container from auto sizing, so it must get its * height from outside: flex stretching in a flex parent, or the 100% chain @@ -19,9 +19,9 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig .grid { display: grid; - grid-auto-rows: minmax(var(--wpds-typography-line-height-2xl, 40px), 1fr); + grid-auto-rows: minmax(var(--wpds-typography-line-height-2xl), 1fr); grid-template-columns: 1fr; - gap: var(--wpds-dimension-gap-sm, 8px); + gap: var(--wpds-dimension-gap-sm); block-size: 100%; min-block-size: 0; } @@ -30,20 +30,20 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig display: flex; align-items: center; justify-content: space-between; - gap: var(--wpds-dimension-gap-md, 12px); + gap: var(--wpds-dimension-gap-md); min-inline-size: 0; min-block-size: 0; - padding-block: var(--wpds-dimension-padding-sm, 8px); - padding-inline: var(--wpds-dimension-padding-lg, 16px); - border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak); - border-radius: var(--wpds-border-radius-lg, 8px); + padding-block: var(--wpds-dimension-padding-sm); + padding-inline: var(--wpds-dimension-padding-lg); + border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak); + border-radius: var(--wpds-border-radius-lg); } .header { display: flex; flex: 1 1 auto; align-items: center; - gap: var(--wpds-dimension-gap-sm, 8px); + gap: var(--wpds-dimension-gap-sm); min-inline-size: 0; color: var(--wpds-color-foreground-content-neutral); } @@ -66,7 +66,7 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig max-inline-size: 100%; overflow: hidden; color: var(--wpds-color-foreground-content-neutral); - font-size: clamp(var(--wpds-typography-font-size-xl, 20px), 10cqh, $metric-tile-grid-row-value-font-size-max); + font-size: clamp(var(--wpds-typography-font-size-xl), 10cqh, $metric-tile-grid-row-value-font-size-max); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; @@ -88,12 +88,12 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig * total here with explicit fallbacks. Scoped to the comparison cell so the * plain `.value` path keeps its responsive clamp. */ .comparison span { - font-size: var(--wpds-typography-font-size-xl, 20px); - line-height: var(--wpds-typography-line-height-xl, 32px); + font-size: var(--wpds-typography-font-size-xl); + line-height: var(--wpds-typography-line-height-xl); } .placeholder { - font-weight: var(--wpds-typography-font-weight-medium, 500); + font-weight: var(--wpds-typography-font-weight-medium); } .tile .placeholder { @@ -115,9 +115,9 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig .tile { flex-direction: column; justify-content: center; - gap: var(--wpds-dimension-gap-sm, 8px); - padding-block: var(--wpds-dimension-padding-md, 12px); - padding-inline: var(--wpds-dimension-padding-md, 12px); + gap: var(--wpds-dimension-gap-sm); + padding-block: var(--wpds-dimension-padding-md); + padding-inline: var(--wpds-dimension-padding-md); text-align: center; } @@ -135,7 +135,7 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig .tile .value, .tile .placeholder { - font-size: clamp(var(--wpds-typography-font-size-xl, 20px), 11cqh, $metric-tile-grid-tile-value-font-size-max); + font-size: clamp(var(--wpds-typography-font-size-xl), 11cqh, $metric-tile-grid-tile-value-font-size-max); } } @@ -152,12 +152,12 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig } .tile { - padding-block: var(--wpds-dimension-padding-2xl, 24px); - padding-inline: var(--wpds-dimension-padding-lg, 16px); + padding-block: var(--wpds-dimension-padding-2xl); + padding-inline: var(--wpds-dimension-padding-lg); } .tile .value, .tile .placeholder { - font-size: clamp(var(--wpds-typography-font-size-2xl, 32px), 12cqh, $metric-tile-grid-prominent-value-font-size-max); + font-size: clamp(var(--wpds-typography-font-size-2xl), 12cqh, $metric-tile-grid-prominent-value-font-size-max); } } diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-page-layout.module.scss b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-page-layout.module.scss index c01caba09d40..8e31513223ab 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-page-layout.module.scss +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-page-layout.module.scss @@ -1,7 +1,7 @@ .root { display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-lg, 16px); + gap: var(--wpds-dimension-gap-lg); } .header { @@ -9,25 +9,25 @@ flex-direction: row; justify-content: space-between; align-items: flex-start; - gap: var(--wpds-dimension-gap-md, 16px); + gap: var(--wpds-dimension-gap-md); } .heading { display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-xs, 4px); + gap: var(--wpds-dimension-gap-xs); min-inline-size: 0; } .description { - color: var(--wpds-color-foreground-content-neutral-weak, #757575); + color: var(--wpds-color-foreground-content-neutral-weak); } .actions { display: flex; flex-direction: row; align-items: center; - gap: var(--wpds-dimension-gap-sm, 8px); + gap: var(--wpds-dimension-gap-sm); flex-shrink: 0; } @@ -36,19 +36,19 @@ flex-direction: row; flex-wrap: wrap; align-items: center; - gap: var(--wpds-dimension-gap-sm, 8px); + gap: var(--wpds-dimension-gap-sm); } .sections { display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-lg, 16px); + gap: var(--wpds-dimension-gap-lg); } .section { border: - var(--wpds-border-width-xs, 1px) solid - var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0); - border-radius: var(--wpds-border-radius-md, 8px); - padding: var(--wpds-dimension-padding-2xl, 24px); + var(--wpds-border-width-xs) solid + var(--wpds-color-stroke-surface-neutral-weak); + border-radius: var(--wpds-border-radius-md); + padding: var(--wpds-dimension-padding-2xl); } diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-performance-chart.module.scss b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-performance-chart.module.scss index 14eae57cd4f9..77ab8f3cc1be 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-performance-chart.module.scss +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-performance-chart.module.scss @@ -1,7 +1,7 @@ .root { display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-md, 16px); + gap: var(--wpds-dimension-gap-md); } .header { @@ -9,14 +9,14 @@ flex-direction: row; justify-content: space-between; align-items: center; - gap: var(--wpds-dimension-gap-md, 16px); + gap: var(--wpds-dimension-gap-md); } .controls { display: flex; flex-direction: row; align-items: center; - gap: var(--wpds-dimension-gap-sm, 8px); + gap: var(--wpds-dimension-gap-sm); } /* Anchors the absolutely positioned loading overlay. The height must be fixed: diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/widget-back-link/widget-back-link.module.scss b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/widget-back-link/widget-back-link.module.scss index 26926b257b75..d92aba36e274 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/widget-back-link/widget-back-link.module.scss +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/widget-back-link/widget-back-link.module.scss @@ -4,9 +4,9 @@ align-self: flex-start; display: inline-flex; align-items: center; - gap: var(--wpds-dimension-gap-xs, 4px); + gap: var(--wpds-dimension-gap-xs); min-block-size: 20px; - margin-block-end: var(--wpds-dimension-gap-md, 12px); + margin-block-end: var(--wpds-dimension-gap-md); // Widget roots clip overflow, so the focus ring is drawn inset and the ring // plus its gap must live inside the button's own box. padding: calc(var(--wpds-dimension-padding-xs) + var(--wpds-border-width-focus)); @@ -26,10 +26,10 @@ } .backLink:focus-visible { - border-radius: var(--wpds-border-radius-sm, 2px); + border-radius: var(--wpds-border-radius-sm); outline: var(--wpds-border-width-focus) solid - var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); + var(--wpds-color-stroke-focus); outline-offset: calc(-1 * var(--wpds-border-width-focus)); } diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/widget-footer/widget-footer.module.scss b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/widget-footer/widget-footer.module.scss index c2fc845b6a9d..678db3d15c9d 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/widget-footer/widget-footer.module.scss +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/widget-footer/widget-footer.module.scss @@ -2,10 +2,10 @@ display: flex; align-items: center; justify-content: space-between; - gap: var(--wpds-dimension-gap-sm, 8px); + gap: var(--wpds-dimension-gap-sm); flex: 0 0 auto; border-block-start: - var(--wpds-border-width-xs, 1px) solid - var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0); - padding-block-start: var(--wpds-dimension-padding-md, 12px); + var(--wpds-border-width-xs) solid + var(--wpds-color-stroke-surface-neutral-weak); + padding-block-start: var(--wpds-dimension-padding-md); } diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/widget-state/stories/widget-state.stories.tsx b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/widget-state/stories/widget-state.stories.tsx index b1f70e2fa767..524c834ef5eb 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/widget-state/stories/widget-state.stories.tsx +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/components/widget-state/stories/widget-state.stories.tsx @@ -13,9 +13,9 @@ const WidgetCard = ( { title, children }: { title: string; children: React.React style={ { width: '360px', height: '320px', - border: '1px solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0)', - borderRadius: 'var(--wpds-border-radius-md, 8px)', - background: 'var(--wpds-color-background-surface-neutral, #fff)', + border: '1px solid var(--wpds-color-stroke-surface-neutral-weak)', + borderRadius: 'var(--wpds-border-radius-md)', + background: 'var(--wpds-color-background-surface-neutral)', display: 'flex', flexDirection: 'column', overflow: 'hidden', @@ -23,11 +23,11 @@ const WidgetCard = ( { title, children }: { title: string; children: React.React >
{ title } @@ -90,7 +90,7 @@ const MockChart = () => ( width: '100%', height: '100%', boxSizing: 'border-box', - padding: 'var(--wpds-dimension-gap-lg, 16px)', + padding: 'var(--wpds-dimension-gap-lg)', } } > diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/hooks/use-chart-theme.ts b/projects/packages/premium-analytics/packages/widgets-toolkit/src/hooks/use-chart-theme.ts index 9a638bc1d912..4a40cc7d2526 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/hooks/use-chart-theme.ts +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/hooks/use-chart-theme.ts @@ -77,15 +77,15 @@ export function useChartTheme(): WooChartTheme { labelSpacing: 'xs', barBorderRadius: 'var(--wpds-border-radius-md)', deltaColors: [ - 'var(--wpds-color-stroke-surface-error-strong, #cc1818)', - 'var(--wpds-color-foreground-content-neutral-weak, #707070)', - 'var(--wpds-color-stroke-surface-success-strong, #008030)', + 'var(--wpds-color-stroke-surface-error-strong)', + 'var(--wpds-color-foreground-content-neutral-weak)', + 'var(--wpds-color-stroke-surface-success-strong)', ] as [ string, string, string ], // [ negative, neutral, positive ] }, conversionFunnelChart: { backgroundColor: 'var(--wpds-color-background-surface-brand)', - positiveChangeColor: 'var(--wpds-color-foreground-content-success-weak, #008030)', - negativeChangeColor: 'var(--wpds-color-foreground-content-error-weak, #cc1818)', + positiveChangeColor: 'var(--wpds-color-foreground-content-success-weak)', + negativeChangeColor: 'var(--wpds-color-foreground-content-error-weak)', }, lineChart: { lineStyles: { diff --git a/projects/packages/premium-analytics/packages/widgets-toolkit/src/widgets/visitors-by-location/visitors-by-location-widget.module.scss b/projects/packages/premium-analytics/packages/widgets-toolkit/src/widgets/visitors-by-location/visitors-by-location-widget.module.scss index 452c647bf9b6..42a1b855b748 100644 --- a/projects/packages/premium-analytics/packages/widgets-toolkit/src/widgets/visitors-by-location/visitors-by-location-widget.module.scss +++ b/projects/packages/premium-analytics/packages/widgets-toolkit/src/widgets/visitors-by-location/visitors-by-location-widget.module.scss @@ -16,7 +16,7 @@ grid-template-rows: auto 1fr; column-gap: var(--wpds-dimension-gap-lg); // Separate the toggle from the leaderboard below it. - row-gap: var(--wpds-dimension-gap-md, 16px); + row-gap: var(--wpds-dimension-gap-md); align-items: stretch; height: 100%; min-height: 0; @@ -30,8 +30,8 @@ // (.next-admin-dashboard-widget__content) sets overflow: auto, which // clips the ToggleGroupControl's outward focus ring. // Add padding to create space for the focus indicator. - padding-block-start: var(--wpds-dimension-padding-xs, 4px); - padding-inline-end: var(--wpds-dimension-padding-xs, 4px); + padding-block-start: var(--wpds-dimension-padding-xs); + padding-inline-end: var(--wpds-dimension-padding-xs); padding-block-end: 0; padding-inline-start: 0; } @@ -53,7 +53,7 @@ --jpa-leaderboard-image-width: 28px; --jpa-leaderboard-image-height: auto; --jpa-leaderboard-image-fit: contain; - --jpa-leaderboard-image-radius: var(--wpds-border-radius-sm, 2px); + --jpa-leaderboard-image-radius: var(--wpds-border-radius-sm); } } diff --git a/projects/packages/premium-analytics/widgets/all-time-stats/style.module.css b/projects/packages/premium-analytics/widgets/all-time-stats/style.module.css index 56e22affb3ba..37e9f9e29baa 100644 --- a/projects/packages/premium-analytics/widgets/all-time-stats/style.module.css +++ b/projects/packages/premium-analytics/widgets/all-time-stats/style.module.css @@ -6,13 +6,13 @@ .list { display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-lg, 16px); + gap: var(--wpds-dimension-gap-lg); } .row { display: flex; align-items: center; - gap: var(--wpds-dimension-gap-md, 12px); + gap: var(--wpds-dimension-gap-md); } .icon { diff --git a/projects/packages/premium-analytics/widgets/authors/style.module.css b/projects/packages/premium-analytics/widgets/authors/style.module.css index 51cea28cd509..f61047965f44 100644 --- a/projects/packages/premium-analytics/widgets/authors/style.module.css +++ b/projects/packages/premium-analytics/widgets/authors/style.module.css @@ -29,8 +29,8 @@ text from the bar's rounded left edge. */ .postLabel { display: block; - padding-block: var(--wpds-dimension-padding-md, 12px); - padding-inline-start: var(--wpds-dimension-padding-sm, 8px); + padding-block: var(--wpds-dimension-padding-md); + padding-inline-start: var(--wpds-dimension-padding-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/projects/packages/premium-analytics/widgets/clicks/style.module.css b/projects/packages/premium-analytics/widgets/clicks/style.module.css index bb3f5dd25720..4139654ee12d 100644 --- a/projects/packages/premium-analytics/widgets/clicks/style.module.css +++ b/projects/packages/premium-analytics/widgets/clicks/style.module.css @@ -20,7 +20,7 @@ } .labelLink { - gap: var(--wpds-dimension-gap-xs, 4px); + gap: var(--wpds-dimension-gap-xs); } .labelLink:hover, diff --git a/projects/packages/premium-analytics/widgets/comments/style.module.css b/projects/packages/premium-analytics/widgets/comments/style.module.css index 425917d3ee57..68b40c733fc9 100644 --- a/projects/packages/premium-analytics/widgets/comments/style.module.css +++ b/projects/packages/premium-analytics/widgets/comments/style.module.css @@ -30,8 +30,8 @@ edge. */ .postLabel { display: block; - padding-block: var(--wpds-dimension-padding-md, 12px); - padding-inline-start: var(--wpds-dimension-padding-sm, 8px); + padding-block: var(--wpds-dimension-padding-md); + padding-inline-start: var(--wpds-dimension-padding-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/projects/packages/premium-analytics/widgets/devices/style.module.css b/projects/packages/premium-analytics/widgets/devices/style.module.css index 93e588398b1b..0dc30237fb18 100644 --- a/projects/packages/premium-analytics/widgets/devices/style.module.css +++ b/projects/packages/premium-analytics/widgets/devices/style.module.css @@ -26,13 +26,13 @@ inline-size: min(100%, 320px); display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-xl, 24px); + gap: var(--wpds-dimension-gap-xl); } @container (max-width: 420px) { .chartShell { inline-size: min(100%, 220px); - gap: var(--wpds-dimension-gap-sm, 8px); + gap: var(--wpds-dimension-gap-sm); } } diff --git a/projects/packages/premium-analytics/widgets/email-breakdown/style.module.css b/projects/packages/premium-analytics/widgets/email-breakdown/style.module.css index bf33e97ca312..0ee0a776d433 100644 --- a/projects/packages/premium-analytics/widgets/email-breakdown/style.module.css +++ b/projects/packages/premium-analytics/widgets/email-breakdown/style.module.css @@ -20,7 +20,7 @@ .locationContent { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(0, 3fr); - gap: var(--wpds-dimension-gap-lg, 16px); + gap: var(--wpds-dimension-gap-lg); align-items: stretch; block-size: 100%; min-block-size: 0; @@ -60,7 +60,7 @@ align-items: center; min-width: 0; min-height: 36px; - padding-inline-start: var(--wpds-dimension-padding-sm, 8px); + padding-inline-start: var(--wpds-dimension-padding-sm); overflow: hidden; } @@ -71,15 +71,15 @@ .flag { height: 20px; - border-radius: var(--wpds-border-radius-sm, 2px); + border-radius: var(--wpds-border-radius-sm); } /* Plain text rows (devices, clients). Vertical padding sets the overlay bar height; the inline padding insets the text from the bar's left edge. */ .labelText { display: block; - padding-block: var(--wpds-dimension-padding-md, 12px); - padding-inline-start: var(--wpds-dimension-padding-sm, 8px); + padding-block: var(--wpds-dimension-padding-md); + padding-inline-start: var(--wpds-dimension-padding-sm); overflow: hidden; color: inherit; text-overflow: ellipsis; @@ -90,8 +90,8 @@ overlay-label padding so the row height matches the other views. */ .labelLink { display: block; - padding-block: var(--wpds-dimension-padding-md, 12px); - padding-inline-start: var(--wpds-dimension-padding-sm, 8px); + padding-block: var(--wpds-dimension-padding-md); + padding-inline-start: var(--wpds-dimension-padding-sm); overflow: hidden; color: inherit; text-decoration: none; diff --git a/projects/packages/premium-analytics/widgets/email-top-row/style.module.css b/projects/packages/premium-analytics/widgets/email-top-row/style.module.css index 94e1fc267b98..3448bdbdf265 100644 --- a/projects/packages/premium-analytics/widgets/email-top-row/style.module.css +++ b/projects/packages/premium-analytics/widgets/email-top-row/style.module.css @@ -2,7 +2,7 @@ .root { display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-lg, 16px); + gap: var(--wpds-dimension-gap-lg); height: 100%; overflow-x: hidden; overflow-y: auto; diff --git a/projects/packages/premium-analytics/widgets/emails/style.module.css b/projects/packages/premium-analytics/widgets/emails/style.module.css index 0b04125d48d7..dd55d99f089f 100644 --- a/projects/packages/premium-analytics/widgets/emails/style.module.css +++ b/projects/packages/premium-analytics/widgets/emails/style.module.css @@ -19,8 +19,8 @@ rounded left edge. */ .label { display: block; - padding-block: var(--wpds-dimension-padding-md, 12px); - padding-inline-start: var(--wpds-dimension-padding-sm, 8px); + padding-block: var(--wpds-dimension-padding-md); + padding-inline-start: var(--wpds-dimension-padding-sm); overflow: hidden; color: inherit; text-overflow: ellipsis; diff --git a/projects/packages/premium-analytics/widgets/file-downloads/style.module.css b/projects/packages/premium-analytics/widgets/file-downloads/style.module.css index 86a48a6519b2..79af92d7a772 100644 --- a/projects/packages/premium-analytics/widgets/file-downloads/style.module.css +++ b/projects/packages/premium-analytics/widgets/file-downloads/style.module.css @@ -1,8 +1,8 @@ .labelLink { display: block; - padding-block: var(--wpds-dimension-padding-md, 12px); - padding-inline-start: var(--wpds-dimension-padding-sm, 8px); + padding-block: var(--wpds-dimension-padding-md); + padding-inline-start: var(--wpds-dimension-padding-sm); overflow: hidden; color: inherit; text-decoration: none; @@ -17,8 +17,8 @@ .labelText { display: block; - padding-block: var(--wpds-dimension-padding-md, 12px); - padding-inline-start: var(--wpds-dimension-padding-sm, 8px); + padding-block: var(--wpds-dimension-padding-md); + padding-inline-start: var(--wpds-dimension-padding-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/projects/packages/premium-analytics/widgets/latest-post/style.module.css b/projects/packages/premium-analytics/widgets/latest-post/style.module.css index d65f0dd6d4d0..a89269ac595f 100644 --- a/projects/packages/premium-analytics/widgets/latest-post/style.module.css +++ b/projects/packages/premium-analytics/widgets/latest-post/style.module.css @@ -1,13 +1,13 @@ .root { display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-lg, 16px); + gap: var(--wpds-dimension-gap-lg); height: 100%; overflow: hidden; /* Offset the host card's body padding so the featured image can bleed to the * card edges. Tuned to the framed widget padding. */ - --latest-post-frame-pad: var(--wpds-dimension-padding-2xl, 24px); + --latest-post-frame-pad: var(--wpds-dimension-padding-2xl); } .content { @@ -15,7 +15,7 @@ flex: 1; flex-direction: column; justify-content: space-between; - gap: var(--wpds-dimension-gap-lg, 16px); + gap: var(--wpds-dimension-gap-lg); min-width: 0; min-height: 0; } @@ -23,7 +23,7 @@ .header { display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-xs, 4px); + gap: var(--wpds-dimension-gap-xs); min-width: 0; } @@ -52,23 +52,23 @@ .metrics { display: flex; flex-flow: row wrap; - gap: var(--wpds-dimension-gap-2xl, 32px); + gap: var(--wpds-dimension-gap-2xl); } .metric { display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-xs, 4px); + gap: var(--wpds-dimension-gap-xs); min-width: 0; } .metricLabel { - font-weight: var(--wpds-typography-font-weight-medium, 500); + font-weight: var(--wpds-typography-font-weight-medium); color: var(--wpds-color-foreground-content-neutral); } .metric .metricValue { - font-size: var(--wpds-typography-font-size-lg, 15px); + font-size: var(--wpds-typography-font-size-lg); } /* Featured image. Full-bleeds to the top and sides of the card by offsetting @@ -90,11 +90,11 @@ @container widget (max-width: 599px) { .root { - gap: var(--wpds-dimension-gap-md, 12px); + gap: var(--wpds-dimension-gap-md); } .content { - gap: var(--wpds-dimension-gap-md, 12px); + gap: var(--wpds-dimension-gap-md); } .media { @@ -104,14 +104,14 @@ } .header .title { - font-size: var(--wpds-typography-font-size-xl, 20px); - line-height: var(--wpds-typography-line-height-md, 24px); + font-size: var(--wpds-typography-font-size-xl); + line-height: var(--wpds-typography-line-height-md); -webkit-line-clamp: 2; line-clamp: 2; } .metrics { - gap: var(--wpds-dimension-gap-lg, 16px); + gap: var(--wpds-dimension-gap-lg); } } diff --git a/projects/packages/premium-analytics/widgets/locations/style.module.css b/projects/packages/premium-analytics/widgets/locations/style.module.css index 011dc458c1ac..192695605bab 100644 --- a/projects/packages/premium-analytics/widgets/locations/style.module.css +++ b/projects/packages/premium-analytics/widgets/locations/style.module.css @@ -25,8 +25,8 @@ .bodyHeader { flex-wrap: wrap; justify-content: flex-end; - gap: var(--wpds-dimension-gap-sm, 8px) var(--wpds-dimension-gap-lg, 16px); - margin-block-end: var(--wpds-dimension-gap-md, 12px); + gap: var(--wpds-dimension-gap-sm) var(--wpds-dimension-gap-lg); + margin-block-end: var(--wpds-dimension-gap-md); } .stateArea { @@ -118,5 +118,5 @@ --jpa-leaderboard-image-width: 28px; --jpa-leaderboard-image-height: auto; --jpa-leaderboard-image-fit: contain; - --jpa-leaderboard-image-radius: var(--wpds-border-radius-sm, 2px); + --jpa-leaderboard-image-radius: var(--wpds-border-radius-sm); } diff --git a/projects/packages/premium-analytics/widgets/post-traffic-activity/style.module.css b/projects/packages/premium-analytics/widgets/post-traffic-activity/style.module.css index 3173573e9de5..ae8541ec7f19 100644 --- a/projects/packages/premium-analytics/widgets/post-traffic-activity/style.module.css +++ b/projects/packages/premium-analytics/widgets/post-traffic-activity/style.module.css @@ -16,7 +16,7 @@ clipped by the content area's overflow (same treatment as the metric tabs). */ .pager button { - outline-offset: calc(-1 * var(--wpds-border-width-focus, 1.5px)); + outline-offset: calc(-1 * var(--wpds-border-width-focus)); } /* Remaining tile height for WidgetState's block-level ready wrapper. */ @@ -35,7 +35,7 @@ /* The pager + content-sized grid center as one block in the leftover tile height. */ justify-content: center; - gap: var(--wpds-dimension-gap-sm, 8px); + gap: var(--wpds-dimension-gap-sm); /* Safety net for sub-minimum widths (the page floor is 4 week columns). */ overflow-x: auto; diff --git a/projects/packages/premium-analytics/widgets/referrers/style.module.css b/projects/packages/premium-analytics/widgets/referrers/style.module.css index c4ff9b9e9316..625aec394fe0 100644 --- a/projects/packages/premium-analytics/widgets/referrers/style.module.css +++ b/projects/packages/premium-analytics/widgets/referrers/style.module.css @@ -20,7 +20,7 @@ } .labelLink { - gap: var(--wpds-dimension-gap-xs, 4px); + gap: var(--wpds-dimension-gap-xs); } .labelLink:hover, diff --git a/projects/packages/premium-analytics/widgets/subscriber-highlights/style.module.css b/projects/packages/premium-analytics/widgets/subscriber-highlights/style.module.css index e3b17225af77..ffade2ccc2d4 100644 --- a/projects/packages/premium-analytics/widgets/subscriber-highlights/style.module.css +++ b/projects/packages/premium-analytics/widgets/subscriber-highlights/style.module.css @@ -2,7 +2,7 @@ .root { display: flex; flex-direction: column; - gap: var(--wpds-dimension-gap-lg, 16px); + gap: var(--wpds-dimension-gap-lg); height: 100%; overflow-x: hidden; overflow-y: auto; diff --git a/projects/packages/premium-analytics/widgets/subscribers-chart/style.module.css b/projects/packages/premium-analytics/widgets/subscribers-chart/style.module.css index b851967cb849..00ddbd8f423e 100644 --- a/projects/packages/premium-analytics/widgets/subscribers-chart/style.module.css +++ b/projects/packages/premium-analytics/widgets/subscribers-chart/style.module.css @@ -12,5 +12,5 @@ align-items: center; justify-content: center; min-height: 250px; - color: var(--wpds-color-foreground-content-neutral-weak, #646970); + color: var(--wpds-color-foreground-content-neutral-weak); } diff --git a/projects/packages/premium-analytics/widgets/tags/style.module.css b/projects/packages/premium-analytics/widgets/tags/style.module.css index 083b37a4579b..e9a813b3f0cb 100644 --- a/projects/packages/premium-analytics/widgets/tags/style.module.css +++ b/projects/packages/premium-analytics/widgets/tags/style.module.css @@ -19,10 +19,10 @@ /* Icon + label row for the leaderboard. min-height keeps a stable 36px row for both single tag/category rows and grouped (drill-down) rows. */ .itemLabel { - gap: var(--wpds-dimension-padding-sm, 8px); + gap: var(--wpds-dimension-padding-sm); min-height: 36px; min-width: 0; - padding-inline: var(--wpds-dimension-padding-sm, 8px); + padding-inline: var(--wpds-dimension-padding-sm); overflow: hidden; } @@ -54,8 +54,8 @@ a.itemLabelText:focus { .childRow { display: flex; align-items: center; - gap: var(--wpds-dimension-padding-sm, 8px); + gap: var(--wpds-dimension-padding-sm); min-height: 36px; - padding-inline: var(--wpds-dimension-padding-sm, 8px); + padding-inline: var(--wpds-dimension-padding-sm); overflow: hidden; } diff --git a/projects/packages/premium-analytics/widgets/top-posts/style.module.css b/projects/packages/premium-analytics/widgets/top-posts/style.module.css index 672d736072b6..6ca9ee8decef 100644 --- a/projects/packages/premium-analytics/widgets/top-posts/style.module.css +++ b/projects/packages/premium-analytics/widgets/top-posts/style.module.css @@ -19,7 +19,7 @@ display: flex; margin-block-start: auto; justify-content: flex-end; - padding-block-start: var(--wpds-dimension-gap-sm, 8px); + padding-block-start: var(--wpds-dimension-gap-sm); } /* Vertical padding sets the overlay bar height — the bar fills the row, @@ -30,10 +30,10 @@ .labelRow { display: flex; align-items: center; - gap: var(--wpds-dimension-gap-xs, 4px); + gap: var(--wpds-dimension-gap-xs); min-width: 0; - padding-block: var(--wpds-dimension-padding-md, 12px); - padding-inline-start: var(--wpds-dimension-padding-sm, 8px); + padding-block: var(--wpds-dimension-padding-md); + padding-inline-start: var(--wpds-dimension-padding-sm); } /* `min-width: 0` lets the flex item shrink below its content width so the @@ -63,7 +63,7 @@ .externalLink { display: inline-flex; flex: none; - color: var(--wpds-color-foreground-content-neutral-weak, currentColor); + color: var(--wpds-color-foreground-content-neutral-weak); opacity: 0; transition: opacity 120ms ease-in-out; } diff --git a/projects/packages/premium-analytics/widgets/traffic-chart/style.module.css b/projects/packages/premium-analytics/widgets/traffic-chart/style.module.css index b851967cb849..00ddbd8f423e 100644 --- a/projects/packages/premium-analytics/widgets/traffic-chart/style.module.css +++ b/projects/packages/premium-analytics/widgets/traffic-chart/style.module.css @@ -12,5 +12,5 @@ align-items: center; justify-content: center; min-height: 250px; - color: var(--wpds-color-foreground-content-neutral-weak, #646970); + color: var(--wpds-color-foreground-content-neutral-weak); } diff --git a/projects/packages/premium-analytics/widgets/utm-insights/style.module.css b/projects/packages/premium-analytics/widgets/utm-insights/style.module.css index b3fe39d58b32..3500f82c9b30 100644 --- a/projects/packages/premium-analytics/widgets/utm-insights/style.module.css +++ b/projects/packages/premium-analytics/widgets/utm-insights/style.module.css @@ -22,9 +22,9 @@ .itemLabel { min-inline-size: 0; - padding-block: var(--wpds-dimension-padding-md, 12px); - padding-inline-start: var(--wpds-dimension-padding-sm, 8px); - padding-inline-end: var(--wpds-dimension-padding-lg, 16px); + padding-block: var(--wpds-dimension-padding-md); + padding-inline-start: var(--wpds-dimension-padding-sm); + padding-inline-end: var(--wpds-dimension-padding-lg); } .itemLabelText { diff --git a/projects/packages/premium-analytics/widgets/video-detail-embeds/style.module.css b/projects/packages/premium-analytics/widgets/video-detail-embeds/style.module.css index 753c8c848851..19c71b108b03 100644 --- a/projects/packages/premium-analytics/widgets/video-detail-embeds/style.module.css +++ b/projects/packages/premium-analytics/widgets/video-detail-embeds/style.module.css @@ -30,7 +30,7 @@ } .item { - border-block-end: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0); + border-block-end: 1px solid var(--wpds-color-stroke-surface-neutral-weak); } .item:last-child { @@ -41,8 +41,8 @@ .link { display: block; min-block-size: 36px; - padding-block: var(--wpds-dimension-padding-sm, 8px); - padding-inline: var(--wpds-dimension-padding-sm, 8px); + padding-block: var(--wpds-dimension-padding-sm); + padding-inline: var(--wpds-dimension-padding-sm); overflow: hidden; color: var(--wpds-color-foreground-interactive-brand); text-overflow: ellipsis; diff --git a/tools/js-tools/stylelint.config.base.mjs b/tools/js-tools/stylelint.config.base.mjs index cc7f94b48c26..6054ae81ba27 100644 --- a/tools/js-tools/stylelint.config.base.mjs +++ b/tools/js-tools/stylelint.config.base.mjs @@ -97,7 +97,7 @@ const baseConfig = { 'projects/packages/jetpack-mu-wpcom/routes/**/*.{css,scss,sass}', 'projects/packages/newsletter/routes/**/*.{css,scss,sass}', 'projects/packages/podcast/routes/**/*.{css,scss,sass}', - 'projects/packages/premium-analytics/routes/**/*.{css,scss,sass}', + 'projects/packages/premium-analytics/**/*.{css,scss,sass}', 'projects/packages/publicize/routes/**/*.{css,scss,sass}', 'projects/packages/scan/routes/**/*.{css,scss,sass}', 'projects/packages/seo/routes/**/*.{css,scss,sass}',