Skip to content

Commit

Permalink
Add theme support for form validation (#4981)
Browse files Browse the repository at this point in the history
  • Loading branch information
@britneywwc
britneywwc committed Feb 9, 2024
1 parent 598cf5d commit ca0eefa
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 234 deletions.
294 changes: 72 additions & 222 deletions scss/_patterns_form-validation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,261 +18,111 @@
margin-top: -$sp-unit;
}

// Theming
@if ($theme-default-forms == 'dark') {
.is-caution {
.p-form-validation__input {
.is-success & {
@include vf-form-validation-input-success-dark-theme;
}
background-color: $colors--theme--background-caution-default;
border-bottom-color: $colors--theme--border-caution;

.is-caution & {
@include vf-form-validation-input-caution-dark-theme;
&:hover {
background-color: $colors--theme--background-caution-hover;
}

.is-error & {
@include vf-form-validation-input-error-dark-theme;
&:focus {
background-color: $colors--theme--background-caution-active;
}
}

.p-form-validation__message {
.is-success & {
@include vf-form-validation-message-success-dark-theme;
}

.is-caution & {
@include vf-form-validation-message-caution-dark-theme;
@include vf-icon-warning($color: map-get($colors-light-theme--tinted-borders, caution));
color: $colors--theme--border-caution;

// FIXME: Temporary workaround for unsupported theme colors in icons
// stylelint-disable-next-line selector-max-type
body.is-dark &,
&.is-dark {
@include vf-icon-warning($color: map-get($colors-dark-theme--tinted-borders, caution), $color-symbol: $colors--dark-theme--background-default);
}

.is-error & {
@include vf-form-validation-message-error-dark-theme;
// FIXME: Temporary workaround for unsupported theme colors in icons
// stylelint-disable-next-line selector-max-type
&.is-light,
&.is-paper,
body.is-light &,
body.is-paper & {
@include vf-icon-warning($color: map-get($colors-light-theme--tinted-borders, caution));
}
}
} @else {
}

.is-error {
.p-form-validation__input {
.is-success & {
@include vf-form-validation-input-success-light-theme;
}
background-color: $colors--theme--background-negative-default;
border-bottom-color: $colors--theme--border-negative;

.is-caution & {
@include vf-form-validation-input-caution-light-theme;
&:hover {
background-color: $colors--theme--background-negative-hover;
}

.is-error & {
@include vf-form-validation-input-error-light-theme;
&:focus {
background-color: $colors--theme--background-negative-active;
}
}

.p-form-validation__message {
.is-success & {
@include vf-form-validation-message-success-light-theme;
@include vf-icon-error($color: map-get($colors-light-theme--tinted-borders, negative));
color: $colors--theme--border-negative;

// FIXME: Temporary workaround for unsupported theme colors in icons
// stylelint-disable-next-line selector-max-type
body.is-dark &,
&.is-dark {
@include vf-icon-error($color: map-get($colors-dark-theme--tinted-borders, negative), $color-symbol: $colors--dark-theme--background-default);
}

.is-caution & {
@include vf-form-validation-message-caution-light-theme;
// FIXME: Temporary workaround for unsupported theme colors in icons
// stylelint-disable-next-line selector-max-type
&.is-light,
&.is-paper,
body.is-light &,
body.is-paper & {
@include vf-icon-error($color: map-get($colors-light-theme--tinted-borders, negative));
}

.is-error & {
@include vf-form-validation-message-error-light-theme;
}
}
}

// when is-dark/is-light is set on root p-form-validation element or its parent
.is-dark .is-success,
.is-success.is-dark {
.p-form-validation__input {
@include vf-form-validation-input-success-dark-theme;
}
.p-form-validation__message {
@include vf-form-validation-message-success-dark-theme;
}
}

.is-success.is-light {
.is-success {
.p-form-validation__input {
@include vf-form-validation-input-success-light-theme;
}
.p-form-validation__message {
@include vf-form-validation-message-success-light-theme;
}
}
background-color: $colors--theme--background-positive-default;
border-bottom-color: $colors--theme--border-positive;

.is-dark .is-caution,
.is-caution.is-dark {
.p-form-validation__input {
@include vf-form-validation-input-caution-dark-theme;
}
.p-form-validation__message {
@include vf-form-validation-message-caution-dark-theme;
}
}

.is-caution.is-light {
.p-form-validation__input {
@include vf-form-validation-input-caution-light-theme;
}
.p-form-validation__message {
@include vf-form-validation-message-caution-light-theme;
}
}
&:hover {
background-color: $colors--theme--background-positive-hover;
}

.is-dark .is-error,
.is-error.is-dark {
.p-form-validation__input {
@include vf-form-validation-input-error-dark-theme;
}
.p-form-validation__message {
@include vf-form-validation-message-error-dark-theme;
&:focus {
background-color: $colors--theme--background-positive-active;
}
}
}

.is-error.is-light {
.p-form-validation__input {
@include vf-form-validation-input-error-light-theme;
}
.p-form-validation__message {
@include vf-form-validation-message-error-light-theme;
}
}

// when is-dark/is-light is set on p-form-validation__input element
.is-success .p-form-validation__input {
.is-dark &,
&.is-dark {
@include vf-form-validation-input-success-dark-theme;
}

&.is-light {
@include vf-form-validation-input-success-light-theme;
}
}

.is-caution .p-form-validation__input {
.is-dark &,
&.is-dark {
@include vf-form-validation-input-caution-dark-theme;
}

&.is-light {
@include vf-form-validation-input-caution-light-theme;
}
}

.is-error .p-form-validation__input {
.is-dark &,
&.is-dark {
@include vf-form-validation-input-error-dark-theme;
}
@include vf-icon-success($color: map-get($colors-light-theme--tinted-borders, positive));
color: $colors--theme--border-positive;

// FIXME: Temporary workaround for unsupported theme colors in icons
// stylelint-disable-next-line selector-max-type
body.is-dark &,
&.is-dark {
@include vf-icon-success($color: map-get($colors-dark-theme--tinted-borders, positive), $color-symbol: $colors--dark-theme--background-default);
}

&.is-light {
@include vf-form-validation-input-error-light-theme;
// FIXME: Temporary workaround for unsupported theme colors in icons
// stylelint-disable-next-line selector-max-type
&.is-light,
&.is-paper,
body.is-light &,
body.is-paper & {
@include vf-icon-success($color: map-get($colors-light-theme--tinted-borders, positive));
}
}
}
}

@mixin vf-form-validation-input-state-theme($color-background-default, $color-background-hover, $color-background-active, $color-border, $color-text) {
background-color: $color-background-default;
border-bottom-color: $color-border;

&:hover {
background-color: $color-background-hover;
}

&:focus {
background-color: $color-background-active;
}
}

@mixin vf-form-validation-input-success-dark-theme {
@include vf-form-validation-input-state-theme(
$color-background-default: map-get($colors-dark-theme--tinted-backgrounds, 'positive', 'default'),
$color-background-hover: map-get($colors-dark-theme--tinted-backgrounds, 'positive', 'hover'),
$color-background-active: map-get($colors-dark-theme--tinted-backgrounds, 'positive', 'active'),
$color-border: map-get($colors-dark-theme--tinted-borders, 'positive'),
$color-text: map-get($colors-dark-theme--tinted-borders, 'positive')
);
}

@mixin vf-form-validation-input-caution-dark-theme {
@include vf-form-validation-input-state-theme(
$color-background-default: map-get($colors-dark-theme--tinted-backgrounds, 'caution', 'default'),
$color-background-hover: map-get($colors-dark-theme--tinted-backgrounds, 'caution', 'hover'),
$color-background-active: map-get($colors-dark-theme--tinted-backgrounds, 'caution', 'active'),
$color-border: map-get($colors-dark-theme--tinted-borders, 'caution'),
$color-text: map-get($colors-dark-theme--tinted-borders, 'caution')
);
}

@mixin vf-form-validation-input-error-dark-theme {
@include vf-form-validation-input-state-theme(
$color-background-default: map-get($colors-dark-theme--tinted-backgrounds, 'negative', 'default'),
$color-background-hover: map-get($colors-dark-theme--tinted-backgrounds, 'negative', 'hover'),
$color-background-active: map-get($colors-dark-theme--tinted-backgrounds, 'negative', 'active'),
$color-border: map-get($colors-dark-theme--tinted-borders, 'negative'),
$color-text: map-get($colors-dark-theme--tinted-borders, 'negative')
);
}

@mixin vf-form-validation-input-success-light-theme {
@include vf-form-validation-input-state-theme(
$color-background-default: $color-positive-background,
$color-background-hover: $color-positive-background--hover,
$color-background-active: $color-positive-background--focus,
$color-border: $color-positive,
$color-text: $color-positive
);
}

@mixin vf-form-validation-input-caution-light-theme {
@include vf-form-validation-input-state-theme(
$color-background-default: $color-caution-background,
$color-background-hover: $color-caution-background--hover,
$color-background-active: $color-caution-background--focus,
$color-border: $color-caution,
$color-text: $color-caution
);
}

@mixin vf-form-validation-input-error-light-theme {
@include vf-form-validation-input-state-theme(
$color-background-default: $color-negative-background,
$color-background-hover: $color-negative-background--hover,
$color-background-active: $color-negative-background--focus,
$color-border: $color-negative,
$color-text: $color-negative
);
}

@mixin vf-form-validation-message-state-theme($color-text) {
color: $color-text;
}

@mixin vf-form-validation-message-success-dark-theme {
@include vf-form-validation-message-state-theme($color-text: map-get($colors-dark-theme--tinted-borders, 'positive'));
@include vf-icon-success($color: map-get($colors-dark-theme--tinted-borders, 'positive'), $color-symbol: $colors--dark-theme--background-default);
}

@mixin vf-form-validation-message-caution-dark-theme {
@include vf-form-validation-message-state-theme($color-text: map-get($colors-dark-theme--tinted-borders, 'caution'));
@include vf-icon-warning($color: map-get($colors-dark-theme--tinted-borders, 'caution'), $color-symbol: $colors--dark-theme--background-default);
}

@mixin vf-form-validation-message-error-dark-theme {
@include vf-form-validation-message-state-theme($color-text: map-get($colors-dark-theme--tinted-borders, 'negative'));
@include vf-icon-error($color: map-get($colors-dark-theme--tinted-borders, 'negative'), $color-symbol: $colors--dark-theme--background-default);
}

@mixin vf-form-validation-message-success-light-theme {
@include vf-form-validation-message-state-theme($color-text: $color-positive);
@include vf-icon-success($color-positive);
}

@mixin vf-form-validation-message-caution-light-theme {
@include vf-form-validation-message-state-theme($color-text: $colors--light-theme--text-default);
@include vf-icon-warning($color-caution);
}

@mixin vf-form-validation-message-error-light-theme {
@include vf-form-validation-message-state-theme($color-text: $color-negative);
@include vf-icon-error($color-negative);
}
17 changes: 5 additions & 12 deletions templates/docs/examples/patterns/forms/form-validation-dark.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,28 @@

{% block standalone_css %}patterns_forms{% endblock %}

{% block style %}
<style>
body {
background: #262626;
color: #fff;
}
</style>
{% endblock %}
{% set is_dark = true %}
{% block content %}
<form>
<div class="p-form-validation is-error is-dark">
<div class="p-form-validation is-error">
<label for="exampleTextInputError">Email address</label>
<input class="p-form-validation__input" type="email" id="exampleTextInputError" placeholder="example@canonical.com" name="exampleTextInputError" autocomplete="email" aria-invalid="true" aria-describedby="exampleInputErrorMessage" />
<p class="p-form-validation__message" id="exampleInputErrorMessage">This field is required.</p>
</div>

<div class="p-form-validation is-caution is-dark">
<div class="p-form-validation is-caution">
<label for="exampleTextInputCaution">Mail configuration ID</label>
<input class="p-form-validation__input" type="text" id="exampleTextInputCaution" placeholder="14" name="exampleTextInputCaution" autocomplete="on" aria-describedby="exampleInputCautionMessage"/>
<p class="p-form-validation__message" id="exampleInputCautionMessage">No validation is performed in preview mode.</p>
</div>

<div class="p-form-validation is-success is-dark">
<div class="p-form-validation is-success">
<label for="exampleTextInputSuccess">Card number</label>
<input class="p-form-validation__input" type="text" id="exampleTextInputSuccess" placeholder="**** **** **** ****" name="exampleTextInputSuccess" autocomplete="off" aria-describedby="exampleInputSuccessMessage"/>
<p class="p-form-validation__message" id="exampleInputSuccessMessage">Verified.</p>
</div>

<div class="p-form-validation is-error is-dark">
<div class="p-form-validation is-error">
<label for="exampleSelectInputError">Ubuntu releases</label>
<div class="p-form-validation__select-wrapper">
<select class="p-form-validation__input" id="exampleSelectInputError" name="exampleSelectInputError" aria-invalid="true" aria-describedby="exampleSelectErrorMessage">
Expand Down

0 comments on commit ca0eefa

Please sign in to comment.