Skip to content

Commit 7f14ade

Browse files
json-derulojson-derulo
committed
feat!: drop support for background and foreground variables
1 parent a56ddfa commit 7f14ade

File tree

4 files changed

+2
-246
lines changed

4 files changed

+2
-246
lines changed

‎projects/material-css-vars/src/lib/_internal-helper.scss

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -34,26 +34,6 @@
3434
@return $string;
3535
}
3636

37-
@function _mat-css-hex-to-rgb($color, $rgb-wrap: true) {
38-
@if ($color == null) {
39-
@return null;
40-
}
41-
@if ($rgb-wrap) {
42-
@return rgb(red($color), green($color), blue($color));
43-
}
44-
@return red($color), green($color), blue($color);
45-
}
46-
47-
@function _mat-css-hex-to-rgba($color, $rgb-wrap: true) {
48-
@if ($color == null) {
49-
@return null;
50-
}
51-
@if ($rgb-wrap) {
52-
@return rgba(red($color), green($color), blue($color), alpha($color));
53-
}
54-
@return red($color), green($color), blue($color), alpha($color);
55-
}
56-
5737
@mixin root($varMap: null) {
5838
@at-root :root {
5939
@each $varName, $varValue in $varMap {

‎projects/material-css-vars/src/lib/_main.scss

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,10 @@
66
// needs to come after "@angular/material"
77
@use "mat-lib-overwrites";
88

9-
@mixin init-css-vars($default-theme, $text, $default-foreground, $default-background) {
9+
@mixin init-css-vars($default-theme, $text) {
1010
// init css variables
1111
@include internal-helper.root($text);
1212
@include internal-helper.root($default-theme);
13-
@include internal-helper.root($default-foreground);
14-
@include internal-helper.root($default-background);
1513
}
1614

1715
@mixin init-mat-theme($dark-theme-selector, $typography-config: mat.define-typography-config()) {
@@ -72,10 +70,8 @@
7270
$dark-theme-selector: variables.$dark-theme-selector,
7371
$default-theme-text: variables.$text,
7472
$typography-config: mat.define-typography-config(),
75-
$default-foreground: variables.$default-foreground,
76-
$default-background: variables.$default-background,
7773
) {
78-
@include init-css-vars($default-theme, $default-theme-text, $default-foreground, $default-background);
74+
@include init-css-vars($default-theme, $default-theme-text);
7975
@include init-mat-theme($dark-theme-selector, $typography-config) using ($mat-css-theme) {
8076
@content($mat-css-theme);
8177
}

‎projects/material-css-vars/src/lib/_variables.scss

Lines changed: 0 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -31,128 +31,6 @@ $text:
3131
--light-dividers: $light-dividers,
3232
--light-focused: $light-focused) !default;
3333

34-
$default-foreground: (
35-
// LIGHT
36-
--palette-foreground-base: public-color-util.hex-to-rgb(#000000),
37-
--palette-foreground-base-alpha: 1,
38-
--palette-foreground-divider: public-color-util.hex-to-rgb(#000000),
39-
--palette-foreground-divider-alpha: 0.12,
40-
--palette-foreground-dividers: public-color-util.hex-to-rgb(#000000),
41-
--palette-foreground-dividers-alpha: 0.12,
42-
--palette-foreground-disabled: public-color-util.hex-to-rgb(#000000),
43-
--palette-foreground-disabled-alpha: 0.38,
44-
--palette-foreground-disabled-button: public-color-util.hex-to-rgb(#000000),
45-
--palette-foreground-disabled-button-alpha: 0.26,
46-
--palette-foreground-disabled-text: public-color-util.hex-to-rgb(#000000),
47-
--palette-foreground-disabled-text-alpha: 0.38,
48-
--palette-foreground-hint-text: public-color-util.hex-to-rgb(#000000),
49-
--palette-foreground-hint-text-alpha: 0.38,
50-
--palette-foreground-secondary-text: public-color-util.hex-to-rgb(#000000),
51-
--palette-foreground-secondary-text-alpha: 0.54,
52-
--palette-foreground-icon: public-color-util.hex-to-rgb(#000000),
53-
--palette-foreground-icon-alpha: 0.54,
54-
--palette-foreground-icons: public-color-util.hex-to-rgb(#000000),
55-
--palette-foreground-icons-alpha: 0.54,
56-
--palette-foreground-text: public-color-util.hex-to-rgb(#000000),
57-
--palette-foreground-text-alpha: 0.87,
58-
--palette-foreground-slider-min: public-color-util.hex-to-rgb(#000000),
59-
--palette-foreground-slider-min-alpha: 0.87,
60-
--palette-foreground-slider-off: public-color-util.hex-to-rgb(#000000),
61-
--palette-foreground-slider-off-alpha: 0.26,
62-
--palette-foreground-slider-off-active: public-color-util.hex-to-rgb(#000000),
63-
--palette-foreground-slider-off-active-alpha: 0.38,
64-
// DARK
65-
--palette-foreground-base-dark: public-color-util.hex-to-rgb(#ffffff),
66-
--palette-foreground-base-dark-alpha: 1,
67-
--palette-foreground-divider-dark: public-color-util.hex-to-rgb(#ffffff),
68-
--palette-foreground-divider-dark-alpha: 0.12,
69-
--palette-foreground-dividers-dark: public-color-util.hex-to-rgb(#ffffff),
70-
--palette-foreground-dividers-dark-alpha: 0.12,
71-
--palette-foreground-disabled-dark: public-color-util.hex-to-rgb(#ffffff),
72-
--palette-foreground-disabled-dark-alpha: 0.5,
73-
--palette-foreground-disabled-button-dark: public-color-util.hex-to-rgb(#ffffff),
74-
--palette-foreground-disabled-button-dark-alpha: 0.3,
75-
--palette-foreground-disabled-text-dark: public-color-util.hex-to-rgb(#ffffff),
76-
--palette-foreground-disabled-text-dark-alpha: 0.5,
77-
--palette-foreground-hint-text-dark: public-color-util.hex-to-rgb(#ffffff),
78-
--palette-foreground-hint-text-dark-alpha: 0.5,
79-
--palette-foreground-secondary-text-dark: public-color-util.hex-to-rgb(#ffffff),
80-
--palette-foreground-secondary-text-dark-alpha: 0.7,
81-
--palette-foreground-icon-dark: public-color-util.hex-to-rgb(#ffffff),
82-
--palette-foreground-icon-dark-alpha: 1,
83-
--palette-foreground-icons-dark: public-color-util.hex-to-rgb(#ffffff),
84-
--palette-foreground-icons-dark-alpha: 1,
85-
--palette-foreground-text-dark: public-color-util.hex-to-rgb(#ffffff),
86-
--palette-foreground-text-dark-alpha: 1,
87-
--palette-foreground-slider-min-dark: public-color-util.hex-to-rgb(#ffffff),
88-
--palette-foreground-slider-min-dark-alpha: 1,
89-
--palette-foreground-slider-off-dark: public-color-util.hex-to-rgb(#ffffff),
90-
--palette-foreground-slider-off-dark-alpha: 0.3,
91-
--palette-foreground-slider-off-active-dark: public-color-util.hex-to-rgb(#ffffff),
92-
--palette-foreground-slider-off-active-dark-alpha: 0.38
93-
) !default;
94-
95-
$default-background: (
96-
// LIGHT
97-
--palette-background-status-bar: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 300)),
98-
--palette-background-app-bar: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 100)),
99-
--palette-background-background: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 50)),
100-
--palette-background-hover: public-color-util.hex-to-rgb(#000000),
101-
--palette-background-hover-alpha: 0.04,
102-
--palette-background-card: public-color-util.hex-to-rgb(#ffffff),
103-
--palette-background-dialog: public-color-util.hex-to-rgb(#ffffff),
104-
--palette-background-disabled-button: public-color-util.hex-to-rgb(#000000),
105-
--palette-background-disabled-button-alpha: 0.12,
106-
--palette-background-raised-button: public-color-util.hex-to-rgb(#ffffff),
107-
--palette-background-focused-button: public-color-util.hex-to-rgb(#000000),
108-
--palette-background-focused-button-alpha: 0.12,
109-
--palette-background-selected-button: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 300)),
110-
--palette-background-selected-disabled-button: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 400)),
111-
--palette-background-disabled-button-toggle: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 200)),
112-
--palette-background-disabled-list-option: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 200)),
113-
--palette-background-tooltip: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 700)),
114-
// DARK
115-
--palette-background-status-bar-dark: public-color-util.hex-to-rgb(#000),
116-
--palette-background-app-bar-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 900)),
117-
--palette-background-background-dark: public-color-util.hex-to-rgb(#303030),
118-
--palette-background-hover-dark: public-color-util.hex-to-rgb(#ffffff),
119-
--palette-background-hover-dark-alpha: 0.04,
120-
--palette-background-card-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 800)),
121-
--palette-background-dialog-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 800)),
122-
--palette-background-disabled-button-dark: public-color-util.hex-to-rgb(#ffffff),
123-
--palette-background-disabled-button-dark-alpha: 0.12,
124-
--palette-background-raised-button-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 800)),
125-
--palette-background-focused-button-dark: public-color-util.hex-to-rgb(#ffffff),
126-
--palette-background-focused-button-dark-alpha: 0.12,
127-
--palette-background-selected-button-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 900)),
128-
--palette-background-selected-disabled-button-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 800)),
129-
--palette-background-disabled-button-toggle-dark: public-color-util.hex-to-rgb(#000000),
130-
--palette-background-disabled-list-option-dark: public-color-util.hex-to-rgb(#000000),
131-
--palette-background-tooltip-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 700)),
132-
) !default;
133-
134-
$text: map-merge(
135-
map-merge(
136-
( --dark-primary-text-no-rgb: #{0, 0, 0},
137-
--light-primary-text-no-rgb: #{255, 255, 255},
138-
--dark-primary-text: public-color-util.hex-to-rgba($dark-primary-text),
139-
--dark-secondary-text: public-color-util.hex-to-rgba($dark-secondary-text),
140-
--dark-accent-text: public-color-util.hex-to-rgba($dark-primary-text),
141-
--dark-warn-text: public-color-util.hex-to-rgba($dark-primary-text),
142-
--dark-disabled-text: public-color-util.hex-to-rgba($dark-disabled-text),
143-
--dark-dividers: public-color-util.hex-to-rgba($dark-dividers),
144-
--dark-focused: public-color-util.hex-to-rgba($dark-focused),
145-
--light-primary-text: public-color-util.hex-to-rgba($light-primary-text),
146-
--light-secondary-text: public-color-util.hex-to-rgba($light-secondary-text),
147-
--light-accent-text: public-color-util.hex-to-rgba($light-primary-text),
148-
--light-warn-text: public-color-util.hex-to-rgba($light-primary-text),
149-
--light-disabled-text: public-color-util.hex-to-rgba($light-disabled-text),
150-
--light-dividers: public-color-util.hex-to-rgba($light-dividers),
151-
--light-focused: public-color-util.hex-to-rgba($light-focused)),
152-
$default-background
153-
),
154-
$default-foreground) !default;
155-
15634
$default-light-theme:
15735
(
15836
// PRIMARY

‎projects/material-css-vars/src/lib/model.ts

Lines changed: 0 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -130,102 +130,4 @@ export enum MaterialCssVariables {
130130
'WarnA700' = '--palette-warn-A700',
131131
'DarkWarnText' = '--dark-warn-text',
132132
'LightWarnText' = '--light-warn-text',
133-
134-
// BACKGROUND
135-
'BackgroundStatusBar' = '--palette-background-status-bar',
136-
'BackgroundAppBar' = '--palette-background-app-bar',
137-
'BackgroundBackground' = '--palette-background-background',
138-
'BackgroundHover' = '--palette-background-hover',
139-
'BackgroundHoverAlpha' = '--palette-background-hover-alpha',
140-
'BackgroundCard' = '--palette-background-card',
141-
'BackgroundDialog' = '--palette-background-dialog',
142-
'BackgroundDisabledButton' = '--palette-background-disabled-button',
143-
'BackgroundDisabledButtonAlpha' = '--palette-background-disabled-button-alpha',
144-
'BackgroundRaisedButton' = '--palette-background-raised-button',
145-
'BackgroundFocusedButton' = '--palette-background-focused-button',
146-
'BackgroundFocusedButtonAlpha' = '--palette-background-focused-button-alpha',
147-
'BackgroundSelectedButton' = '--palette-background-selected-button',
148-
'BackgroundSelectedDisabledButton' = '--palette-background-selected-disabled-button',
149-
'BackgroundDisabledButtonToggle' = '--palette-background-disabled-button-toggle',
150-
'BackgroundUnselectedChip' = '--palette-background-unselected-chip',
151-
'BackgroundDisabledListOption' = '--palette-background-disabled-list-option',
152-
153-
// FOREGROUND
154-
'ForegroundBase' = '--palette-foreground-base',
155-
'ForegroundDivider' = '--palette-foreground-divider',
156-
'ForegroundDividerAlpha' = '--palette-foreground-divider-alpha',
157-
'ForegroundDividers' = '--palette-foreground-dividers',
158-
'ForegroundDividersAlpha' = '--palette-foreground-dividers-alpha',
159-
'ForegroundDisabled' = '--palette-foreground-disabled',
160-
'ForegroundDisabledAlpha' = '--palette-foreground-disabled-alpha',
161-
'ForegroundDisabledButton' = '--palette-foreground-disabled-button',
162-
'ForegroundDisabledButtonAlpha' = '--palette-foreground-disabled-button-alpha',
163-
'ForegroundDisabledText' = '--palette-foreground-disabled-text',
164-
'ForegroundDisabledTextAlpha' = '--palette-foreground-disabled-text-alpha',
165-
'ForegroundElevation' = '--palette-foreground-elevation',
166-
'ForegroundHintText' = '--palette-foreground-hint-text',
167-
'ForegroundHintTextAlpha' = '--palette-foreground-hint-text-alpha',
168-
'ForegroundSecondaryText' = '--palette-foreground-secondary-text',
169-
'ForegroundSecondaryTextAlpha' = '--palette-foreground-secondary-text-alpha',
170-
'ForegroundIcon' = '--palette-foreground-icon',
171-
'ForegroundIconAlpha' = '--palette-foreground-icon-alpha',
172-
'ForegroundIcons' = '--palette-foreground-icons',
173-
'ForegroundIconsAlpha' = '--palette-foreground-icons-alpha',
174-
'ForegroundText' = '--palette-foreground-text',
175-
'ForegroundTextAlpha' = '--palette-foreground-text-alpha',
176-
'ForegroundSliderMin' = '--palette-foreground-slider-min',
177-
'ForegroundSliderMinAlpha' = '--palette-foreground-slider-min-alpha',
178-
'ForegroundSliderOff' = '--palette-foreground-slider-off',
179-
'ForegroundSliderOffAlpha' = '--palette-foreground-slider-off-alpha',
180-
'ForegroundSliderOffActive' = '--palette-foreground-slider-off-active',
181-
'ForegroundSliderOffActiveAlpha' = '--palette-foreground-slider-off-active-alpha',
182-
183-
// BACKGROUND DARK
184-
'BackgroundStatusBarDark' = '--palette-background-status-bar-dark',
185-
'BackgroundAppBarDark' = '--palette-background-app-bar-dark',
186-
'BackgroundBackgroundDark' = '--palette-background-background-dark',
187-
'BackgroundHoverDark' = '--palette-background-hover-dark',
188-
'BackgroundHoverDarkAlpha' = '--palette-background-hover-dark-alpha',
189-
'BackgroundCardDark' = '--palette-background-card-dark',
190-
'BackgroundDialogDark' = '--palette-background-dialog-dark',
191-
'BackgroundDisabledButtonDark' = '--palette-background-disabled-button-dark',
192-
'BackgroundDisabledButtonDarkAlpha' = '--palette-background-disabled-button-dark-alpha',
193-
'BackgroundRaisedButtonDark' = '--palette-background-raised-button-dark',
194-
'BackgroundFocusedButtonDark' = '--palette-background-focused-button-dark',
195-
'BackgroundFocusedButtonDarkAlpha' = '--palette-background-focused-button-dark-alpha',
196-
'BackgroundSelectedButtonDark' = '--palette-background-selected-button-dark',
197-
'BackgroundSelectedDisabledButtonDark' = '--palette-background-selected-disabled-button-dark',
198-
'BackgroundDisabledButtonToggleDark' = '--palette-background-disabled-button-toggle-dark',
199-
'BackgroundUnselectedChipDark' = '--palette-background-unselected-chip-dark',
200-
'BackgroundDisabledListOptionDark' = '--palette-background-disabled-list-option-dark',
201-
202-
// FOREGROUND DARK
203-
'ForegroundBaseDark' = '--palette-foreground-base-dark',
204-
'ForegroundDividerDark' = '--palette-foreground-divider-dark',
205-
'ForegroundDividerDarkAlpha' = '--palette-foreground-divider-dark-alpha',
206-
'ForegroundDividersDark' = '--palette-foreground-dividers-dark',
207-
'ForegroundDividersDarkAlpha' = '--palette-foreground-dividers-dark-alpha',
208-
'ForegroundDisabledDark' = '--palette-foreground-disabled-dark',
209-
'ForegroundDisabledDarkAlpha' = '--palette-foreground-disabled-dark-alpha',
210-
'ForegroundDisabledButtonDark' = '--palette-foreground-disabled-button-dark',
211-
'ForegroundDisabledButtonDarkAlpha' = '--palette-foreground-disabled-button-dark-alpha',
212-
'ForegroundDisabledTextDark' = '--palette-foreground-disabled-text-dark',
213-
'ForegroundDisabledTextDarkAlpha' = '--palette-foreground-disabled-text-dark-alpha',
214-
'ForegroundElevationDark' = '--palette-foreground-elevation-dark',
215-
'ForegroundHintTextDark' = '--palette-foreground-hint-text-dark',
216-
'ForegroundHintTextDarkAlpha' = '--palette-foreground-hint-text-dark-alpha',
217-
'ForegroundSecondaryTextDark' = '--palette-foreground-secondary-text-dark',
218-
'ForegroundSecondaryTextAlphaDark' = '--palette-foreground-secondary-text-alpha-dark',
219-
'ForegroundIconDark' = '--palette-foreground-icon-dark',
220-
'ForegroundIconDarkAlpha' = '--palette-foreground-icon-dark-alpha',
221-
'ForegroundIconsDark' = '--palette-foreground-icons-dark',
222-
'ForegroundIconsDarkAlpha' = '--palette-foreground-icons-dark-alpha',
223-
'ForegroundTextDark' = '--palette-foreground-text-dark',
224-
'ForegroundTextDarkAlpha' = '--palette-foreground-text-dark-alpha',
225-
'ForegroundSliderMinDark' = '--palette-foreground-slider-min-dark',
226-
'ForegroundSliderMinDarkAlpha' = '--palette-foreground-slider-min-dark-alpha',
227-
'ForegroundSliderOffDark' = '--palette-foreground-slider-off-dark',
228-
'ForegroundSliderOffDarkAlpha' = '--palette-foreground-slider-off-dark-alpha',
229-
'ForegroundSliderOffActiveDark' = '--palette-foreground-slider-off-active-dark',
230-
'ForegroundSliderOffActiveDarkAlpha' = '--palette-foreground-slider-off-active-dark-alpha',
231133
}

0 commit comments

Comments
 (0)