🚧 Big CSS Cleanup by josemigallas · Pull Request #4170 · 3scale/porta

josemigallas · 2025-11-17T10:11:05Z

🚧 WIP do not review 🚧

THREESCALE-12047: Clean up unused CSS

What does this do:

Address stylelint errors and warnings.
Find and remove unused styles
Replace legacy styles and hacks in favor of Patternfly classes and variables
Remove redundancies and reduce duplications
Decouple provider.scss (big css bundle vs. individual pages' scss)

Adjusts linting rules to accommodate the CSS modernization effort. Pins stylelint to 15.11.0 and adds stylelint-config-standard-scss. Adds .stylelintignore for developer portal stylesheets. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replaces 115+ hardcoded color definitions with 13 SCSS variables mapped to Patternfly 4 CSS custom properties. Extracts white-box-shadow mixin into shared utils.scss module. Updates all consumers to use new import paths and surviving variable names. Removes dead selectors and vendor-prefixed mixins. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Deletes 7 unused stylesheet partials that contained dead code or styles now handled by Patternfly components. Removes corresponding @forward references from _theme.scss. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Extracts body min-width to new provider.scss using Patternfly breakpoint variable. Removes .Main wrapper class from provider layout and compensates spacing through footer margin utility class. Updates Slim syntax to use explicit class attributes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replaces 6 deleted CMS SCSS partials with 3 new standalone stylesheets loaded on-demand. Adopts Patternfly tabs, drag-drop, table, and hint components for CMS UI. Improves drag-and-drop behavior with proper Patternfly state classes. Moves CMS styles from global theme to view-level loading. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replaces 5 separate apiconfig SCSS partials with one integration.scss loaded on-demand from integration views. Removes custom PromoteButton class in favor of Patternfly button classes. Moves styles from global theme to view-level loading. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Uses pf-c-banner for the Red Hat account verification notice. Moves text to i18n locale file for proper translation support. Loads banner CSS on-demand via webpack pack instead of global theme. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replaces StatsCSVLink custom CSS classes with Patternfly button and flex layout utilities in stats views. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Wraps javascript/stylesheet pack tags in content_for blocks for proper placement in HTML head. Fixes missing do keywords in content_for calls. Replaces InfoBox custom component with Patternfly cards. Extracts pf_addons as standalone pack. Cleans up JS/CSS pack tag separation. Adds i18n keys for Braintree payment gateway views. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Removes deprecated calculateRem and font-size SCSS functions. Hardcodes wizard-specific color values to decouple from the main color system. Consolidates feedback component styles and removes duplicate keyframes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

akostadinov

auto-approved based on added/removed lines ratio!

github-actions · 2026-07-27T06:49:11Z

This PR is stale because it has not received activity for more than 30 days. Remove stale label or comment or this will be closed in 15 days.

akostadinov-bot · 2026-07-27T19:44:08Z

CSS Cleanup Review — Validated Findings

Reviewed all 138 changed files for backward compatibility risks and other issues. Each finding below was verified against the actual codebase on the PR branch.

Actionable (see inline comments):

stats/_base.scss — Tooltip shadow 10x darker (likely unintentional). $stats-chart-tooltip-shadow went from rgba(#3c3f42, 0.1) (10% opacity) to var(--pf-global--palette--black-800) (100% opacity). The hex color is identical but the alpha wrapper was dropped. This will produce harsh, solid-black tooltip shadows instead of subtle ones.
swagger-ui.css — Debug marker /* !!!!!! */ should not ship. Also z-index: 9999 is higher than needed (nearby elements use ~1000).
wizard.scss — Double semicolon typo: $color-brand-primary: #ff7314;;
patternfly_components_helper.rb — type: :button on <a> tags diverges from PF4. PF4's own Button.tsx explicitly strips type from anchor elements. On <a>, type means MIME type per HTML spec, so type="button" is semantically nonsensical. Harmless in practice but produces incorrect HTML.

Informational (no action needed):

_colors.scss — 95 variables removed, all internal references cleaned up. Only risk is downstream forks importing these variables by name.
pf_link_to moved between helpers — signatures are positionally identical, all 13 callers compatible. Minor: trailing space in class attribute when no custom class.
CodeMirror theme colors shift slightly — intentional alignment with PF. Most deltas imperceptible; blue and warning/cm-special colors have visible shifts. Worth a visual check.

Original review had 18 inline comments. After validating each claim against the codebase, 11 were deleted as false positives or non-actionable. 7 remain.

akostadinov-bot · 2026-07-27T19:44:24Z

-$delete-background-color: $error-background-color;
-$warning-color: $tahitiGold;
+$body-background: white;
+$border-color: var(--pf-global--palette--black-300);


Low risk — 95 SCSS variables removed, but all internal references cleaned up.

95 SCSS variables were removed and 12 redefined to use PF CSS custom properties. The PR has cleaned up all internal references across 64 SCSS files — zero dangling references remain on the PR branch. No Sass color functions (darken(), lighten(), etc.) are called on the redefined variables.

The only remaining risk is for downstream forks or out-of-tree SCSS that imports these variables by name. Within this repo the migration is clean.

akostadinov-bot · 2026-07-27T19:44:37Z

    end
  end

-  def pf_link_to(label, url, options = {})


Minor — pf_link_to moved to PatternflyComponentsHelper with compatible signature.

The method is removed here and recreated in PatternflyComponentsHelper. The signatures are positionally identical — all 13 callers are compatible without changes. No name collision since both changes are in the same PR.

Two minor behavioral differences:

New version always adds type=button to the <a> tag (PF convention).

String interpolation for class merging leaves a trailing space when no custom class is passed (cosmetic).

akostadinov-bot · 2026-07-27T19:44:52Z

+    variant = html_options.delete(:variant) || :link
+    html_options[:class] = "pf-c-button pf-m-#{variant} #{html_options.delete(:class)}"
+    html_options[:type] = :button
+


type: :button on <a> tag diverges from PF4 convention.

PatternFly 4 itself explicitly strips type from anchor-rendered buttons — Button.tsx (line 166) sets type to null when the element is not a <button>, and the PF4 HTML docs show anchor-based buttons with no type attribute.

Per the HTML spec, type on <a> specifies the MIME type of the linked resource (e.g. application/pdf), so type="button" is semantically nonsensical (not a valid MIME type). Browsers silently ignore it, so it's harmless in practice, but it produces technically incorrect HTML and diverges from PF4's own pattern.

Consider removing the type assignment from pf_link_to, since link_to always produces <a> (never <button>).

akostadinov-bot · 2026-07-27T19:44:53Z

 $color-text-primary: $color-grey-1;
 $color-text-secondary: $color-grey-2;
 $color-text-tertiary: $color-grey-3;
 $color-border: $color-grey-4;


Bug — double semicolon. SCSS will silently accept this, but it's a typo.

$color-brand-primary: #ff7314;;

akostadinov-bot · 2026-07-27T19:45:14Z

-}
-
-/* Stats Chart Component */
 $stats-chart-border-color: $border-color;


Visual regression — tooltip shadow will be dramatically darker.

$stats-chart-tooltip-shadow changed from $box-shadow-color (which was rgba($font-color, .1) — 10% transparent) to var(--pf-global--palette--black-800) (near-opaque #3c3f42).

On line 154 this is used directly in:

box-shadow: 0 0 line-height-times(.5) $stats-chart-tooltip-shadow;

This will produce a very harsh/dark shadow. Consider using a PF box-shadow variable (--pf-global--BoxShadow--lg) or wrapping in rgba() to preserve the intended transparency.

akostadinov-bot · 2026-07-27T19:45:37Z

  list-style: none; }

 .apidocs-param-tips {
+  z-index: 9999; /* !!!!!! */


Debug marker and excessive z-index.

The /* !!!!!! */ comment looks like a debug/temporary marker that shouldn't ship.

z-index: 9999 is disproportionately high — nearby elements in active-docs use z-index: 1000. Something like 1001 would be sufficient for a tooltip overlay and more consistent with the rest of the codebase.

akostadinov-bot · 2026-07-27T19:46:39Z

-$codemirror-bg-readonly: $codemirror-bg;
-$codemirror-color-readonly: $codemirror-color;
-$codemirror-cursor-color: $highlight-color;
+$orange300: var(--pf-global--palette--orange-300);


Minor — CodeMirror theme will look slightly different (intentional alignment).

The old file had hardcoded color copies that were already stale (didn't match _colors.scss on master). The PR correctly aligns with PF CSS custom properties.

Most color deltas are imperceptible (grays differ by 1-5 RGB units). Two visible changes:

Blue (#0088ce → #0066cc): more saturated, less cyan. The old value was already wrong vs _colors.scss.

cm-special warning color (#ec7a08 → #f0ab00): orange shifts to amber/gold. This is a token remapping from $tahitiGold to PF --pf-global--warning-color--100.

Worth a visual check of the CodeMirror editor, but this is intentional alignment, not an accidental regression.

josemigallas self-assigned this Nov 17, 2025

josemigallas marked this pull request as draft November 17, 2025 10:11

github-actions Bot added the Stale label Dec 18, 2025

josemigallas removed the Stale label Dec 18, 2025

3scale deleted a comment from github-actions Bot Dec 18, 2025

josemigallas force-pushed the THREESCALE-12047_clean_up_css branch from c5f64c9 to c7d16ee Compare January 14, 2026 10:17

github-actions Bot added the Stale label Feb 14, 2026

josemigallas removed the Stale label Feb 18, 2026

3scale deleted a comment from github-actions Bot Feb 18, 2026

github-actions Bot added the Stale label Mar 21, 2026

josemigallas removed the Stale label Mar 23, 2026

3scale deleted a comment from github-actions Bot Mar 23, 2026

github-actions Bot added the Stale label Apr 23, 2026

github-actions Bot closed this May 8, 2026

josemigallas reopened this May 27, 2026

github-actions Bot removed the Stale label May 28, 2026

josemigallas and others added 12 commits June 19, 2026 11:15

remove label in codemirror input instead of hiding via css

8aec018

👯 removes pf_link_to duplication

8c50b06

🔥 removes dead SCSS files and theme imports

350d33e

Deletes 7 unused stylesheet partials that contained dead code or styles now handled by Patternfly components. Removes corresponding @forward references from _theme.scss. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

🦋 adopts PF layout for stats CSV button

db59afe

Replaces StatsCSVLink custom CSS classes with Patternfly button and flex layout utilities in stats views. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

josemigallas force-pushed the THREESCALE-12047_clean_up_css branch from c7d16ee to 0243087 Compare June 19, 2026 09:15

🥒 fixes cucumbers

e12f200

josemigallas force-pushed the THREESCALE-12047_clean_up_css branch from 0243087 to e12f200 Compare June 22, 2026 10:07

3scale deleted a comment from github-actions Bot Jun 22, 2026

akostadinov approved these changes Jun 26, 2026

View reviewed changes

github-actions Bot added the Stale label Jul 27, 2026

akostadinov removed the Stale label Jul 27, 2026

akostadinov-bot Bot reviewed Jul 27, 2026

View reviewed changes

Navigation Menu

Uh oh!

🚧 Big CSS Cleanup - #4170

🚧 Big CSS Cleanup#4170
josemigallas wants to merge 13 commits into
masterfrom
THREESCALE-12047_clean_up_css

josemigallas commented Nov 17, 2025 •

edited

Loading

Uh oh!

akostadinov left a comment

Uh oh!

github-actions Bot commented Jul 27, 2026

Uh oh!

akostadinov-bot Bot commented Jul 27, 2026 •

edited

Loading

Uh oh!

akostadinov-bot Bot Jul 27, 2026 •

edited

Loading

Uh oh!

akostadinov-bot Bot Jul 27, 2026 •

edited

Loading

Uh oh!

akostadinov-bot Bot Jul 27, 2026 •

edited

Loading

Uh oh!

akostadinov-bot Bot Jul 27, 2026

Uh oh!

akostadinov-bot Bot Jul 27, 2026

Uh oh!

akostadinov-bot Bot Jul 27, 2026 •

edited

Loading

Uh oh!

akostadinov-bot Bot Jul 27, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

josemigallas commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

akostadinov left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 27, 2026

Uh oh!

akostadinov-bot Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CSS Cleanup Review — Validated Findings

Uh oh!

akostadinov-bot Bot Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akostadinov-bot Bot Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akostadinov-bot Bot Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akostadinov-bot Bot Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

akostadinov-bot Bot Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

akostadinov-bot Bot Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akostadinov-bot Bot Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

josemigallas commented Nov 17, 2025 •

edited

Loading

akostadinov-bot Bot commented Jul 27, 2026 •

edited

Loading

akostadinov-bot Bot Jul 27, 2026 •

edited

Loading

akostadinov-bot Bot Jul 27, 2026 •

edited

Loading

akostadinov-bot Bot Jul 27, 2026 •

edited

Loading

akostadinov-bot Bot Jul 27, 2026 •

edited

Loading

akostadinov-bot Bot Jul 27, 2026 •

edited

Loading