Components: Support styling native anchor elements via theming system

Created on 17 Aug 2017 · 2Comments · Source: angular/components

Bug, feature request, or proposal:

Feature request.

What is the expected behavior?

Style tags using color="primary", "accent", "warn" or something like class="md-primary".

What is the current behavior?

If you put color="primary" it doesn't work. The link stays ugly.

What is the use-case or motivation for changing an existing behavior?

Match the Material 1 behavior:
Material Design 1 - Issue

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material 2 Beta 8.

P4 theming feature needs discussion

Source

rasert

👍1

Most helpful comment

I could see the use in having a generic way to apply theme colors to arbitrary elements.

You can add styles for this yourself right now with the theming API. It would look something like:
(inside a theme file)

// Include non-theme styles for core.
@include mat-core();

// Define a theme.
$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink, A200, A100, A400);

$theme: mat-light-theme($primary, $accent);

// Include all theme styles for the components.
@include angular-material-theme($theme);

// Custom style for my anchor elements
a {
  color: mat-color($accent);
}

jelbourn on 17 Aug 2017

👍8

All 2 comments

I could see the use in having a generic way to apply theme colors to arbitrary elements.

You can add styles for this yourself right now with the theming API. It would look something like:
(inside a theme file)

// Include non-theme styles for core.
@include mat-core();

// Define a theme.
$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink, A200, A100, A400);

$theme: mat-light-theme($primary, $accent);

// Include all theme styles for the components.
@include angular-material-theme($theme);

// Custom style for my anchor elements
a {
  color: mat-color($accent);
}

jelbourn on 17 Aug 2017

👍8