Skip to content

Commit 683ae4b

Browse files
priveraussipriveraussi
committed
Color fixes for form fields. Updates to demo for testing floating labels and hints.
1 parent b465340 commit 683ae4b

File tree

2 files changed

+55
-28
lines changed

2 files changed

+55
-28
lines changed

‎projects/material-css-vars/src/lib/_mat-lib-overwrites.scss

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@include _mat-mdc-fab-overwrites();
88
@include _mat-mdc-button-overwrites();
99
@include _mat-mdc-text-field-overwrites();
10+
@include _mat-mdc-form-field-overwrites();
1011
@include _mat-mdc-slide-toggle-overwrites();
1112
@include _mat-mdc-select-overwrites();
1213
@include _mat-mdc-checkbox-overwrites();
@@ -105,7 +106,7 @@
105106
}
106107

107108
// ---------------------------
108-
// TEXTFIELD component
109+
// TEXT FIELD component
109110
// ---------------------------
110111
@mixin _mat-mdc-text-field-overwrites {
111112
.mdc-text-field--disabled.mdc-text-field--filled,
@@ -127,6 +128,35 @@
127128
}
128129
}
129130

131+
// ---------------------------
132+
// FORM FIELD component
133+
// ---------------------------
134+
@mixin _mat-mdc-form-field-overwrites {
135+
.mat-mdc-form-field {
136+
&.mat-primary {
137+
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
138+
@include mat-css-light-dark-theme-global() {
139+
color: mat-css-color-primary(500, 0.87);
140+
}
141+
}
142+
}
143+
&.mat-accent {
144+
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
145+
@include mat-css-light-dark-theme-global() {
146+
color: mat-css-color-accent(500, 0.87);
147+
}
148+
}
149+
}
150+
&.mat-warn {
151+
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
152+
@include mat-css-light-dark-theme-global() {
153+
color: mat-css-color-warn(500, 0.87);
154+
}
155+
}
156+
}
157+
}
158+
}
159+
130160
// ---------------------------
131161
// SLIDE TOGGLE component
132162
// ---------------------------
@@ -185,10 +215,10 @@
185215
}
186216

187217
.mat-mdc-select-placeholder {
188-
@include mat-css-light-theme-global() {
218+
@include mat-css-dark-theme-global() {
189219
color: rgba(map-get($mat-css-palette-foreground-dark, "base"), 0.6);
190220
}
191-
@include mat-css-dark-theme-global() {
221+
@include mat-css-light-theme-global() {
192222
color: rgba(map-get($mat-css-palette-foreground, "base"), 0.6);
193223
}
194224
}

‎src/app/app.component.html

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -80,39 +80,37 @@ <h2>Contrast Color</h2>
8080
<br>
8181
<br>
8282

83-
<mat-form-field>
83+
<mat-form-field color="primary">
84+
<mat-label>Primary Contrast Threshold</mat-label>
8485
<mat-select (ngModelChange)="onChangeThresholdPrimary($event)"
8586
[disabled]="materialCssVarsService.isAutoContrast"
86-
[(ngModel)]="materialCssVarsService.contrastColorThresholdPrimary"
87-
placeholder="Threshold for primary contrast color">
87+
[(ngModel)]="materialCssVarsService.contrastColorThresholdPrimary">
8888
<mat-option *ngFor="let hue of hues"
8989
[value]="hue.value">
9090
{{hue.viewValue}}
9191
</mat-option>
9292
</mat-select>
9393
</mat-form-field>
9494
<br>
95-
<br>
9695

97-
<mat-form-field>
96+
<mat-form-field color="accent">
97+
<mat-label>Accent Contrast Threshold</mat-label>
9898
<mat-select (ngModelChange)="onChangeThresholdAccent($event)"
9999
[disabled]="materialCssVarsService.isAutoContrast"
100-
[(ngModel)]="materialCssVarsService.contrastColorThresholdAccent"
101-
placeholder="Threshold for Accent contrast color">
100+
[(ngModel)]="materialCssVarsService.contrastColorThresholdAccent">
102101
<mat-option *ngFor="let hue of hues"
103102
[value]="hue.value">
104103
{{hue.viewValue}}
105104
</mat-option>
106105
</mat-select>
107106
</mat-form-field>
108107
<br>
109-
<br>
110108

111-
<mat-form-field>
109+
<mat-form-field color="warn">
110+
<mat-label>Warn Contrast Threshold</mat-label>
112111
<mat-select (ngModelChange)="onChangeThresholdWarn($event)"
113112
[disabled]="materialCssVarsService.isAutoContrast"
114-
[(ngModel)]="materialCssVarsService.contrastColorThresholdWarn"
115-
placeholder="Threshold for Warn contrast color">
113+
[(ngModel)]="materialCssVarsService.contrastColorThresholdWarn">
116114
<mat-option *ngFor="let hue of hues"
117115
[value]="hue.value">
118116
{{hue.viewValue}}
@@ -122,7 +120,6 @@ <h2>Contrast Color</h2>
122120
</mat-card-content>
123121
</mat-card>
124122

125-
126123
<mat-card class="mat-elevation-z3">
127124
<mat-card-content>
128125
<h2>Dark/Light</h2>
@@ -427,15 +424,17 @@ <h2>Material Buttons</h2>
427424
<mat-card class="input-section">
428425
<mat-card-content>
429426
<h2>Material Input</h2>
430-
<mat-form-field>
431-
<input matInput
432-
placeholder="First name"/>
427+
<mat-form-field color="primary">
428+
<mat-label>First Name</mat-label>
429+
<input matInput placeholder="Enter your first name"/>
430+
<mat-hint align="start">This is a hint</mat-hint>
433431
</mat-form-field>
434-
<mat-form-field>
432+
<mat-form-field color="accent">
433+
<mat-label>Nickname</mat-label>
435434
<input #nickname
436435
matInput
437436
maxlength="50"
438-
placeholder="Nickname"/>
437+
placeholder="Enter your Nickname"/>
439438
<mat-hint align="end">
440439
{{nickname.value.length}} / 50
441440
</mat-hint>
@@ -444,16 +443,14 @@ <h2>Material Input</h2>
444443
<mat-icon class="input-icon"
445444
matPrefix>android
446445
</mat-icon>
446+
<mat-label>Phone Number</mat-label>
447447
<input matInput
448-
placeholder="Favorite phone">
448+
placeholder="Enter your favorite phone">
449449
</mat-form-field>
450-
<mat-form-field>
451-
452-
<mat-icon class="input-icon"
453-
matPrefix>motorcycle
454-
</mat-icon>
455-
<input matInput
456-
placeholder="Motorcycle model">
450+
<mat-form-field color="warn">
451+
<mat-icon class="input-icon" matPrefix>motorcycle</mat-icon>
452+
<mat-label>Motorcycle Model</mat-label>
453+
<input matInput placeholder="Motorcycle model">
457454
</mat-form-field>
458455
</mat-card-content>
459456
</mat-card>

0 commit comments

Comments
 (0)