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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Add theme support for form validation #4981

Merged
merged 4 commits into from
Feb 9, 2024
Merged

Add theme support for form validation #4981

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
48c7d39
Set dark theme to body
britneywwc Feb 8, 2024
9d32643
Add theme support for form validation
britneywwc Feb 8, 2024
1ced83d
Fix PR comments
britneywwc Feb 9, 2024
2210759
Fix PR comments
britneywwc Feb 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
294 changes: 72 additions & 222 deletions scss/_patterns_form-validation.scss
View file
Open in desktop
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;
britneywwc marked this conversation as resolved.
Show resolved Hide resolved
}
}

.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: $color-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: $color-caution);
britneywwc marked this conversation as resolved.
Show resolved Hide resolved
}
}
} @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: $color-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: $color-negative);
britneywwc marked this conversation as resolved.
Show resolved Hide resolved
}

.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: $color-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: $color-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
Open in desktop
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