feat: custom type property output proposal

[lee-chase]

Contributes to #17173

Adds the ability to output custom properties for type.

Changelog

New

• packages/type/custom-properties.scss

Changed

• package.json list of files

Testing / Reviewing

Added a simple test.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9ee2576
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66ec55e90a5caf0008fa68c3
😎 Deploy Preview	https://deploy-preview-17198--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	9ee2576
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/66ec55e9a8fd15000895219a
😎 Deploy Preview	https://deploy-preview-17198--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tay1orjones]

What if they were emitted on :root behind a new sass config variable? Similar set up to what was done for the layout tokens, #14336, it would live in @carbon/styles but could put the @include behind the config variable. That way they'd conditionally be emitted inline in @carbon/styles and could use the existing mixin helpers like declaration.

[lee-chase]

@tay1orjones I can add a feature flag, but making use of enabled from the type package proved tricky.

With enabled not defined this enabled('a-flag') equates to true causing tests to fail in packages/type/__tests__/scss-test.js.

I'm not sure how to access enabled without triggering a build error

@carbon/styles: sass.Exception [Error]: This module was already loaded, so it can't be configured using "with".
@carbon/styles:    ┌──> scss/_feature-flags.scss
@carbon/styles: 8  │ ┌ @forward '@carbon/feature-flags' with (
@carbon/styles: 9  │ │   $feature-flags: (
@carbon/styles: 10 │ │     'enable-css-custom-properties': true,
@carbon/styles: 11 │ │     'enable-use-controlled-state-with-value': true,
@carbon/styles: 12 │ │     'enable-css-grid': true,
@carbon/styles: 13 │ │     'enable-v11-release': true,
@carbon/styles: 14 │ │     'enable-experimental-tile-contrast': false,
@carbon/styles: 15 │ │     'enable-v12-tile-radio-icons': false,
@carbon/styles: 16 │ │     'enable-v12-structured-list-visible-icons': false,
@carbon/styles: 17 │ │     'enable-type-custom-properties': false,
@carbon/styles: 18 │ │   )
@carbon/styles: 19 │ │   !default
@carbon/styles: 20 │ │ );
@carbon/styles:    │ └─^ new load
@carbon/styles:    ╵
@carbon/styles:    ┌──> ../../node_modules/@carbon/type/scss/_styles.scss
@carbon/styles: 18 │   @use '@carbon/feature-flags' as *;
@carbon/styles:    │   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load

[lee-chase]

This was my attempt with a feature-flag. https://github.com/lee-chase/carbon/tree/instantiateTypeTokensWithFeatureFlags

[lee-chase]

Sorry, I just spotted that you said it would live in Carbon styles. I'll adjust and update the PR.

[lee-chase]

@tay1orjones now has a feature flag.

[tay1orjones]

Nice! We could probably avoid the extra feature flag overhead by instead using just a sass config variable. A good example is $css-font-face

carbon/packages/styles/scss/_config.scss

Lines 15 to 19 in 539fc8f

	/// If true, includes font face mixins from scss/fonts
	/// @access public
	/// @type Bool
	/// @group config
	$css--font-face: true !default;

carbon/packages/styles/scss/fonts/_index.scss

Lines 43 to 54 in 36685a0

	@if config.$css--font-face == true {
	@if enabled(mono.$name) {
	@include mono.default();
	}
	@if enabled(sans-arabic.$name) {
	@include sans-arabic.default();
	}
	@if enabled(sans-devanagari.$name) {
	@include sans-devanagari.default();
	}

The config variables like this are the sort-of "default" convention for conditionally emitting styles where there isn't a js interaction that requires a js feature flag

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 76.92%. Comparing base (a1a3b8a) to head (ea0da83).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #17198   +/-   ##
=======================================
  Coverage   76.92%   76.92%           
=======================================
  Files         408      408           
  Lines       13979    13979           
  Branches     4339     4339           
=======================================
  Hits        10754    10754           
  Misses       3052     3052           
  Partials      173      173           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.