Color

v0.0.2-alpha.0

Text Colors #

The following text color classes are defined:

.text-dominant
.text-accent-1
.text-accent-2
.text-white
.text-neutral-50
.text-neutral-70
.text-neutral-90
.text-neutral-95
.text-invalid

Franzen sartorial gastropub helvetica vhs lumbersexual swag mumblecore try-hard pbr&b.

<p class="p-10 mb-5 text-dominant">Franzen sartorial gastropub helvetica vhs lumbersexual swag mumblecore try-hard pbr&amp;b.</p>
<p class="p-10 mb-5 text-accent-1">Franzen sartorial gastropub helvetica vhs lumbersexual swag mumblecore try-hard pbr&amp;b.</p>
<p class="p-10 mb-5 text-accent-2">Franzen sartorial gastropub helvetica vhs lumbersexual swag mumblecore try-hard pbr&amp;b.</p>
<p class="p-10 mb-5 bg-neutral-70 text-white">Franzen sartorial gastropub helvetica vhs lumbersexual swag mumblecore try-hard pbr&amp;b.</p>
<p class="p-10 mb-5 text-neutral-50">Franzen sartorial gastropub helvetica vhs lumbersexual swag mumblecore try-hard pbr&amp;b.</p>
<p class="p-10 mb-5 text-neutral-70">Franzen sartorial gastropub helvetica vhs lumbersexual swag mumblecore try-hard pbr&amp;b.</p>
<p class="p-10 mb-5 bg-neutral-70 text-neutral-90">Franzen sartorial gastropub helvetica vhs lumbersexual swag mumblecore try-hard pbr&amp;b.</p>
<p class="p-10 mb-5 bg-neutral-70 text-neutral-95">Franzen sartorial gastropub helvetica vhs lumbersexual swag mumblecore try-hard pbr&amp;b.</p>
<p class="p-10 mb-5 text-invalid">Franzen sartorial gastropub helvetica vhs lumbersexual swag mumblecore try-hard pbr&amp;b.</p>

Background Colors #

The following text color classes are defined:

.bg-dominant
.bg-accent-1
.bg-accent-2
.bg-white
.bg-neutral-50
.bg-neutral-70
.bg-neutral-90
.bg-neutral-95

Crucifix bushwick tousled bespoke distillery ugh selfies everyday asymmetrical artisan.

<p class="p-10 mb-5 text-white bg-dominant">Crucifix bushwick tousled bespoke distillery ugh selfies everyday asymmetrical artisan.</p>
<p class="p-10 mb-5 text-white bg-accent-1">Crucifix bushwick tousled bespoke distillery ugh selfies everyday asymmetrical artisan.</p>
<p class="p-10 mb-5 text-white bg-accent-2">Crucifix bushwick tousled bespoke distillery ugh selfies everyday asymmetrical artisan.</p>
<p class="p-10 mb-5 bg-white">Crucifix bushwick tousled bespoke distillery ugh selfies everyday asymmetrical artisan.</p>
<p class="p-10 mb-5 bg-neutral-50">Crucifix bushwick tousled bespoke distillery ugh selfies everyday asymmetrical artisan.</p>
<p class="p-10 mb-5 bg-neutral-70">Crucifix bushwick tousled bespoke distillery ugh selfies everyday asymmetrical artisan.</p>
<p class="p-10 mb-5 bg-neutral-90">Crucifix bushwick tousled bespoke distillery ugh selfies everyday asymmetrical artisan.</p>
<p class="p-10 mb-5 bg-neutral-95">Crucifix bushwick tousled bespoke distillery ugh selfies everyday asymmetrical artisan.</p>

Link with blue text and green hover #

Blue link

<a class="link-accent-1" href="#">Blue link</a>

Changelog #

Changelog


  14 Okt 2025 - fix(core): force bold and fix broken variable value
  21 Aug 2025 - feat(core): set line-height via css custom props.
  21 Aug 2025 - feat(core): set dashoffset via css custom props via font-file.


Fix

  14 Mar 2025 - fix(plugin): change error throw to console error for existing function
  PBS support: table text color (override bs)
  PBS support: fix box-shadow on custom-control
  Force Promise polyfill for IE11 (used for autocomplete)
  Force IE11 newline on long uninterrupted words.
  Base font size variable.
  Workaround IE11 BUG where any element with display: flex can receive focus when clicked.


Changed

  14 May 2025 - feat(core): allow focus color override
  16 Apr 2025 - fix(core): hover colors color utilities
  16 Apr 2025 - feat(core): remove .text-hover classes
  16 Apr 2025 - feat(core): add .text-hover classes
  12 Jan 2024 - Update Afek font file
  11 Aug 2022 - Allow change of hover color PBS
  CSS Optimized for print.
  Print: css adjustments
  RTL support, links containing phone numbers should be displayed left-to-right.
  Removed Avenir Next as font option.
  Accessibility: focus display in specific color #0D3360
  Accessibility: focus display
  Art direction Noto Sans (posible changes in all css files)
  Art direction Teva Sans (posible changes in all css files)


Added

  04 Okt 2023 - Install script for one-vision files
  21 Jul 2023 - Added class for blue link with green hover
  Utility color class .text-invalid
  Partial PBS support
  Introducing .vi-collapse, .vi-collapse-first and .vi-collapse-last.
  BS-5 position utility classes (like top-0, start-0)
  String sanitizer to allow Hebrew characters (but not <script>  for example)
  Added utility class .no-transition
  Font combination Afek Hebrew - Noto Sans Latin
  Wrap long words. Update core files.
  Support direction ltr inside rtl for .list-inline-item (bs).
  RTL Support
  Add bs alert behaviour to core
  Overlays text and background
  Initial draft