Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(material/core): add option to configure prefix of system variables #29139

Merged

Conversation

konstantindenerz
Copy link
Contributor

@konstantindenerz konstantindenerz commented May 29, 2024

The component tokens (CSS variables) can reference the system variables abstraction with the configuration use-system-variables at the color and typography options level.

With this PR, you can replace the --sys- prefix with, for example, --md-sys-. This makes it more flexible to adopt your own tokens, which are based on the Material 3 naming scheme but include a custom design system prefix, e.g., --labs-sys-. This saves additional mapping.

Demo configuration:

// Create a theme with the specified color type and density.
@function create-theme($type: light, $density: 0) {
  @return mat.define-theme((
    color: (
      theme-type: $type,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
      use-system-variables: true,
      system-variables-prefix: md-sys,
    ),
    typography: (use-system-variables: true, system-variables-prefix: md-sys),
    density: (
      scale: $density
    ),
  ));
}

I made a small optimization to the map with the tokens, as the key and value were the same and only the --sys- prefix was added.

The result:
image

@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label May 29, 2024
@konstantindenerz konstantindenerz marked this pull request as ready for review May 29, 2024 15:01
@konstantindenerz konstantindenerz marked this pull request as draft May 29, 2024 18:58
@konstantindenerz konstantindenerz force-pushed the feature/configurable-system-prefix branch from b9418ca to a135c99 Compare May 29, 2024 19:10
@konstantindenerz konstantindenerz marked this pull request as ready for review May 29, 2024 19:13
@konstantindenerz konstantindenerz force-pushed the feature/configurable-system-prefix branch from a376c29 to 5873704 Compare May 29, 2024 19:19
@konstantindenerz konstantindenerz force-pushed the feature/configurable-system-prefix branch from 5873704 to d9f1ac8 Compare May 30, 2024 06:42
@mmalerba mmalerba added the target: minor This PR is targeted for the next minor release label Jun 4, 2024
Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I think people will find this useful

@konstantindenerz konstantindenerz force-pushed the feature/configurable-system-prefix branch from d9f1ac8 to 592ff89 Compare June 5, 2024 15:53
@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label Jun 5, 2024
@mmalerba mmalerba merged commit 6f698fa into angular:main Jun 5, 2024
22 of 24 checks passed
@konstantindenerz konstantindenerz deleted the feature/configurable-system-prefix branch June 6, 2024 05:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: merge The PR is ready for merge by the caretaker detected: feature PR contains a feature commit target: minor This PR is targeted for the next minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants