Skip to content

Commit

Permalink
Add color theme on form-control
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton
louismaximepiton committed Oct 4, 2023
1 parent c6c74bb commit df563a7
Show file tree
Hide file tree
Showing 3 changed files with 193 additions and 4 deletions.
2 changes: 2 additions & 0 deletions scss/_root.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@
--#{$prefix}hover-color: #{$body-color};
--#{$prefix}active-bg: #{$gray-400};
--#{$prefix}disabled-color: #{$gray-500};
--#{$prefix}placeholder-color: #{$gray-700};
// ******* End additions for dark-mode
}

Expand Down Expand Up @@ -213,6 +214,7 @@
--#{$prefix}hover-color: #{$brand-orange};
--#{$prefix}active-bg: #{$gray-700};
--#{$prefix}disabled-color: #{$gray-700};
--#{$prefix}placeholder-color: #{$gray-600};
// ******* End additions for dark-mode
// scss-docs-end root-dark-mode-vars
}
Expand Down
8 changes: 4 additions & 4 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1095,12 +1095,12 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;

$input-bg: $white !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
$input-disabled-color: $gray-700 !default; // Boosted mod
$input-bg: var(--#{$prefix}body-bg) !default;
$input-disabled-color: var(--#{$prefix}placeholder-color) !default; // Boosted mod
$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$input-disabled-border-color: null !default;

$input-color: $black !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
$input-color: var(--#{$prefix}body-color) !default;
$input-border-color: var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of var(--#{$prefix}border-color)
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: none !default; // Boosted mod
Expand All @@ -1115,7 +1115,7 @@ $input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: none !default; // Boosted mod

$input-placeholder-color: var(--#{$prefix}secondary-color) !default;
$input-placeholder-color: var(--#{$prefix}placeholder-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
$input-plaintext-color: var(--#{$prefix}body-color) !default;

// Boosted mod: no $input-height-border
Expand Down
187 changes: 187 additions & 0 deletions site/content/docs/5.3/dark-mode.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -662,6 +662,78 @@ Using bg-body

## Forms

### Controls

<h4 class="mt-3">No theme</h4>

<div class="border border-tertiary p-3">
<input type="text" class="form-control" placeholder="Input placeholder">
<textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea>
<input type="text" class="form-control" placeholder="Disabled input placeholder" disabled>
<textarea class="form-control" rows="2" disabled>Disabled textarea placeholder</textarea>
<input type="text" class="form-control" value="Readonly input value" readonly>
<textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" readonly></textarea>
<input type="text" class="form-control" placeholder="Readonly disabled input placeholder" readonly disabled>
<textarea class="form-control" rows="2" readonly disabled>Readonly disabled textarea value</textarea>
<input type="text" class="form-control-plaintext" value="Readonly plaintext input" readonly>
</div>

<h4 class="mt-3">Dark theme on container</h4>

<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
<input type="text" class="form-control" placeholder="Input placeholder">
<textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea>
<input type="text" class="form-control" placeholder="Disabled input placeholder" disabled>
<textarea class="form-control" rows="2" disabled>Disabled textarea placeholder</textarea>
<input type="text" class="form-control" value="Readonly input value" readonly>
<textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" readonly></textarea>
<input type="text" class="form-control" placeholder="Readonly disabled input placeholder" readonly disabled>
<textarea class="form-control" rows="2" readonly disabled>Readonly disabled textarea value</textarea>
<input type="text" class="form-control-plaintext" value="Readonly plaintext input" readonly>
</div>

<h4 class="mt-3">Light theme on container</h4>

<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
<input type="text" class="form-control" placeholder="Input placeholder">
<textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea>
<input type="text" class="form-control" placeholder="Disabled input placeholder" disabled>
<textarea class="form-control" rows="2" disabled>Disabled textarea placeholder</textarea>
<input type="text" class="form-control" value="Readonly input value" readonly>
<textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" readonly></textarea>
<input type="text" class="form-control" placeholder="Readonly disabled input placeholder" readonly disabled>
<textarea class="form-control" rows="2" readonly disabled>Readonly disabled textarea value</textarea>
<input type="text" class="form-control-plaintext" value="Readonly plaintext input" readonly>
</div>

<h4 class="mt-3">Dark theme on component</h4>

<div class="border border-tertiary p-3" style="background-color: #282d55;">
<input type="text" class="form-control" placeholder="Input placeholder" data-bs-theme="dark">
<textarea class="form-control" rows="2" placeholder="Textarea placeholder" data-bs-theme="dark"></textarea>
<input type="text" class="form-control" placeholder="Disabled input placeholder" data-bs-theme="dark" disabled>
<textarea class="form-control" rows="2" data-bs-theme="dark" disabled>Disabled textarea placeholder</textarea>
<input type="text" class="form-control" value="Readonly input value" data-bs-theme="dark" readonly>
<textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" data-bs-theme="dark" readonly></textarea>
<input type="text" class="form-control" placeholder="Readonly disabled input placeholder" data-bs-theme="dark" readonly disabled>
<textarea class="form-control" rows="2" data-bs-theme="dark" readonly disabled>Readonly disabled textarea value</textarea>
<input type="text" class="form-control-plaintext" value="Readonly plaintext input" data-bs-theme="dark" readonly>
</div>

<h4 class="mt-3">Light theme on component</h4>

<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
<input type="text" class="form-control" placeholder="Input placeholder" data-bs-theme="light">
<textarea class="form-control" rows="2" placeholder="Textarea placeholder" data-bs-theme="light"></textarea>
<input type="text" class="form-control" placeholder="Disabled input placeholder" data-bs-theme="light" disabled>
<textarea class="form-control" rows="2" data-bs-theme="light" disabled>Disabled textarea placeholder</textarea>
<input type="text" class="form-control" value="Readonly input value" data-bs-theme="light" readonly>
<textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" data-bs-theme="light" readonly></textarea>
<input type="text" class="form-control" placeholder="Readonly disabled input placeholder" data-bs-theme="light" readonly disabled>
<textarea class="form-control" rows="2" data-bs-theme="light" readonly disabled>Readonly disabled textarea value</textarea>
<input type="text" class="form-control-plaintext" value="Readonly plaintext input" data-bs-theme="light" readonly>
</div>

### Star rating

#### No theme
Expand All @@ -680,6 +752,29 @@ Using bg-body
<input type="radio" id="excellent1" name="rating" value="5" class="visually-hidden">
<label for="excellent1" title="Excellent"><span class="visually-hidden">Excellent</span></label>
</fieldset></form>
<div class="d-flex star-rating">
<p class="visually-hidden">Star rating: rated 3 out of 5</p>
<div aria-hidden="true">
<span></span>
<span></span>
<span class="checked"></span>
<span></span>
<span></span>
</div>
</div>
<form><fieldset class="star-rating" disabled>
<legend class="visually-hidden">Results relevance</legend>
<input type="radio" id="terrible11" name="rating" value="1" class="visually-hidden">
<label for="terrible11" title="Terrible"><span class="visually-hidden">Terrible</span></label>
<input type="radio" id="bad11" name="rating" value="2" class="visually-hidden">
<label for="bad11" title="Bad"><span class="visually-hidden">Bad</span></label>
<input type="radio" id="mixed11" name="rating" value="3" class="visually-hidden">
<label for="mixed11" title="Mixed"><span class="visually-hidden">Mixed</span></label>
<input type="radio" id="good11" name="rating" value="4" class="visually-hidden" checked>
<label for="good11" title="Good"><span class="visually-hidden">Good</span></label>
<input type="radio" id="excellent11" name="rating" value="5" class="visually-hidden">
<label for="excellent11" title="Excellent"><span class="visually-hidden">Excellent</span></label>
</fieldset></form>
</div>

#### Dark theme on container
Expand All @@ -700,6 +795,29 @@ Using bg-body
<input type="radio" id="excellent2" name="rating" value="5" class="visually-hidden">
<label for="excellent2" title="Excellent"><span class="visually-hidden">Excellent</span></label>
</fieldset></form>
<div class="d-flex star-rating">
<p class="visually-hidden">Star rating: rated 3 out of 5</p>
<div aria-hidden="true">
<span></span>
<span></span>
<span class="checked"></span>
<span></span>
<span></span>
</div>
</div>
<form><fieldset class="star-rating" disabled>
<legend class="visually-hidden">Results relevance</legend>
<input type="radio" id="terrible21" name="rating" value="1" class="visually-hidden">
<label for="terrible21" title="Terrible"><span class="visually-hidden">Terrible</span></label>
<input type="radio" id="bad21" name="rating" value="2" class="visually-hidden">
<label for="bad21" title="Bad"><span class="visually-hidden">Bad</span></label>
<input type="radio" id="mixed21" name="rating" value="3" class="visually-hidden">
<label for="mixed21" title="Mixed"><span class="visually-hidden">Mixed</span></label>
<input type="radio" id="good21" name="rating" value="4" class="visually-hidden" checked>
<label for="good21" title="Good"><span class="visually-hidden">Good</span></label>
<input type="radio" id="excellent21" name="rating" value="5" class="visually-hidden">
<label for="excellent21" title="Excellent"><span class="visually-hidden">Excellent</span></label>
</fieldset></form>
</div>

#### Light theme on container
Expand All @@ -720,6 +838,29 @@ Using bg-body
<input type="radio" id="excellent3" name="rating" value="5" class="visually-hidden">
<label for="excellent3" title="Excellent"><span class="visually-hidden">Excellent</span></label>
</fieldset></form>
<div class="d-flex star-rating">
<p class="visually-hidden">Star rating: rated 3 out of 5</p>
<div aria-hidden="true">
<span></span>
<span></span>
<span class="checked"></span>
<span></span>
<span></span>
</div>
</div>
<form><fieldset class="star-rating" disabled>
<legend class="visually-hidden">Results relevance</legend>
<input type="radio" id="terrible31" name="rating" value="1" class="visually-hidden">
<label for="terrible31" title="Terrible"><span class="visually-hidden">Terrible</span></label>
<input type="radio" id="bad31" name="rating" value="2" class="visually-hidden">
<label for="bad31" title="Bad"><span class="visually-hidden">Bad</span></label>
<input type="radio" id="mixed31" name="rating" value="3" class="visually-hidden">
<label for="mixed31" title="Mixed"><span class="visually-hidden">Mixed</span></label>
<input type="radio" id="good31" name="rating" value="4" class="visually-hidden" checked>
<label for="good31" title="Good"><span class="visually-hidden">Good</span></label>
<input type="radio" id="excellent31" name="rating" value="5" class="visually-hidden">
<label for="excellent31" title="Excellent"><span class="visually-hidden">Excellent</span></label>
</fieldset></form>
</div>

#### Dark theme on component
Expand All @@ -738,6 +879,29 @@ Using bg-body
<input type="radio" id="excellent4" name="rating" value="5" class="visually-hidden">
<label for="excellent4" title="Excellent"><span class="visually-hidden">Excellent</span></label>
</fieldset></form>
<div class="d-flex star-rating">
<p class="visually-hidden">Star rating: rated 3 out of 5</p>
<div aria-hidden="true">
<span></span>
<span></span>
<span class="checked"></span>
<span></span>
<span></span>
</div>
</div>
<form><fieldset class="star-rating" data-bs-theme="dark" disabled>
<legend class="visually-hidden">Results relevance</legend>
<input type="radio" id="terrible41" name="rating" value="1" class="visually-hidden">
<label for="terrible41" title="Terrible"><span class="visually-hidden">Terrible</span></label>
<input type="radio" id="bad41" name="rating" value="2" class="visually-hidden">
<label for="bad41" title="Bad"><span class="visually-hidden">Bad</span></label>
<input type="radio" id="mixed41" name="rating" value="3" class="visually-hidden">
<label for="mixed41" title="Mixed"><span class="visually-hidden">Mixed</span></label>
<input type="radio" id="good41" name="rating" value="4" class="visually-hidden" checked>
<label for="good41" title="Good"><span class="visually-hidden">Good</span></label>
<input type="radio" id="excellent41" name="rating" value="5" class="visually-hidden">
<label for="excellent41" title="Excellent"><span class="visually-hidden">Excellent</span></label>
</fieldset></form>
</div>

#### Light theme on component
Expand All @@ -756,4 +920,27 @@ Using bg-body
<input type="radio" id="excellent5" name="rating" value="5" class="visually-hidden">
<label for="excellent5" title="Excellent"><span class="visually-hidden">Excellent</span></label>
</fieldset></form>
<div class="d-flex star-rating">
<p class="visually-hidden">Star rating: rated 3 out of 5</p>
<div aria-hidden="true">
<span></span>
<span></span>
<span class="checked"></span>
<span></span>
<span></span>
</div>
</div>
<form><fieldset class="star-rating" data-bs-theme="light" disabled>
<legend class="visually-hidden">Results relevance</legend>
<input type="radio" id="terrible51" name="rating" value="1" class="visually-hidden">
<label for="terrible51" title="Terrible"><span class="visually-hidden">Terrible</span></label>
<input type="radio" id="bad51" name="rating" value="2" class="visually-hidden">
<label for="bad51" title="Bad"><span class="visually-hidden">Bad</span></label>
<input type="radio" id="mixed51" name="rating" value="3" class="visually-hidden">
<label for="mixed51" title="Mixed"><span class="visually-hidden">Mixed</span></label>
<input type="radio" id="good51" name="rating" value="4" class="visually-hidden" checked>
<label for="good51" title="Good"><span class="visually-hidden">Good</span></label>
<input type="radio" id="excellent51" name="rating" value="5" class="visually-hidden">
<label for="excellent51" title="Excellent"><span class="visually-hidden">Excellent</span></label>
</fieldset></form>
</div>

0 comments on commit df563a7

Please sign in to comment.