"global-styles-inline-css" outputs colours, gradients etc not used/defined in theme.json

[landwire]

Description

global-styles-inline-css prints many colours, gradients, duotone and background/borders etc that are not defined in theme.json.
Expected behaviour would be that the global-styles-inline-css only outputs what is defined in theme.json and not some random other colours, gradients etc.

If that is on purpose then it would be good to let us opt out of this. I do not mean opt out of global-styles in general, which I know is possible, as I like my font-sizes, colour palette etc generated inside global-styles-inline-css, but opt-out of those default colours, gradients etc. that are not even defined in my theme.json and therefore do not have the possibility to choose those colours/gradients.

Step-by-step reproduction instructions

1. Upload minimal theme.json (see below code)
2. Look at output of global-styles-inline-css

Example theme.json:

{
  "$schema": "http://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "appearanceTools": false,
    "border": {
      "color": false,
      "radius": false,
      "style": false,
      "width": false
    },
    "color": {
      "background": true,
      "custom": false,
      "customDuotone": false,
      "customGradient": false,
      "defaultGradients": false,
      "defaultPalette": false,
      "duotone": [],
      "gradients": [],
      "link": false,
      "palette": [
        {
          "name": "Dark",
          "slug": "dark",
          "color": "hsl(0, 0%, 20%)"
        }
      ],
      "text": false
    },
    "custom": {},
    "layout": {
      "contentSize": "770px",
      "wideSize": "1140px"
    },
    "spacing": {
      "blockGap": null,
      "margin": false,
      "padding": false,
      "units": [ "px", "em", "rem", "vh", "vw" ]
    },
    "typography": {
      "customFontSize": false,
      "dropCap": true,
      "fontFamilies": [],
      "fontSizes": [],
      "fontStyle": false,
      "fontWeight": false,
      "letterSpacing": false,
      "lineHeight": false,
      "textDecoration": false,
      "textTransform": false
    },
    "blocks": {
      "core/paragraph": {
        "border": {},
        "color": {},
        "custom": {},
        "layout": {},
        "spacing": {},
        "typography": {}
      },
      "core/heading": {}
    }
  },
  "styles": {}
}

Small part of the generated CSS! I have only defined 4 colours, no gradients and no duotones:

body {
	--wp--preset--color--black: #000000;
	--wp--preset--color--cyan-bluish-gray: #abb8c3;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--pale-pink: #f78da7;
	--wp--preset--color--vivid-red: #cf2e2e;
	--wp--preset--color--luminous-vivid-orange: #ff6900;
	--wp--preset--color--luminous-vivid-amber: #fcb900;
	--wp--preset--color--light-green-cyan: #7bdcb5;
	--wp--preset--color--vivid-green-cyan: #00d084;
	--wp--preset--color--pale-cyan-blue: #8ed1fc;
	--wp--preset--color--vivid-cyan-blue: #0693e3;
	--wp--preset--color--vivid-purple: #9b51e0;
	--wp--preset--color--dark: hsl(0, 0%, 20%);
	--wp--preset--color--violet: hsl(320, 100%, 40%);
	--wp--preset--color--lightgrey: hsl(0, 0%, 90%);
	--wp--preset--color--slate: hsl(208, 25%, 48%);
	--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
	--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
	--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
	--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
	--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
	--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
	--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
	--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
	--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
	--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
	--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
	--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
	--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');
	--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');
	--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');
	--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');
	--wp--preset--duotone--midnight: url('#wp-duotone-midnight');
	--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');
	--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');
	--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');

Screenshots, screen recording, code snippet

No response

Environment info

Wordpress 5.9.2 & Gutenberg 12.7.2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[skorasaurus]

Hi @landwire

Thanks for adding your input;

In summary, as far as I understand:

the default color palette is still loaded so those variables can by other plugins in the WordPress Ecosystem (as explained at #24684 (comment))
Discussion is ongoing in #29568

Regarding the duotones and gradients:
This has been requested in #38299

There is a lot of active work going on figuring out how and what should be dequeued by default; and it's not quite all figured out yet; you can catch up with discussion at starting with #38681 (comment) and later comments in there.

[theking2]

What is the problem with this:

/**
 * DISABLE GUTENBERG STYLE
 */
add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'global-styles' );
}, 100 );

[skorasaurus]

What is the problem with this:

/**
 * DISABLE GUTENBERG STYLE
 */
add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'global-styles' );
}, 100 );

@theking2:

Disabling the 'global-styles' may suit your needs if you're using a 'classic' WordPress theme which all PHP (or perhaps some javascript) (without a theme.json file).

If you are using theme.json in a 'classic' theme or a block theme; then you'll run into many issues.

What this issue requests is the ability to not load those default colors, duotones, and gradients that are not defined in theme.json.

[theking2]

I love classic themes and see no benefits in anything other