A Web Component base

With the ever advancing web platform we can do things that where hard and brittle just a few years ago. Also, browser vendors are committed to becoming more interoperable allowing us to utilise upcoming technologies with confidence that these will land in all future browsers. No more polyfiling and hoping the feature gets supported.

Project "Tivet" is a way to enable these new technologies in solutions where buildtooling stills needs to catch up. Trivet use the following web features to enable this white label library:

Web Components Importmaps Native CSS modules through assertions Constructed stylesheets CSS Layers CSS Custom Properties CSS Subgrid CSS '::part()' CSS Container queries CSS ':has()' CSS Color Mix Toggles and Modals

Project Goals

Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr humblebrag. Blue bottle put a bird on it twee prism biodiesel brooklyn. Blue bottle ennui tbh succulents.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, magnam dignissimos. Reiciendis magnam molestiae delectus rem soluta, magni aliquam quo dolores quibusdam esse reprehenderit quos tempora at ratione perspiciatis temporibus.

Approve

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus modi magni, possimus fugiat placeat cupiditate non perspiciatis sint est voluptatum amet aliquam incidunt illum totam sit ipsa alias ut maiores!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ducimus distinctio impedit similique velit molestiae accusantium, mollitia id delectus sapiente, facilis dolorem praesentium placeat deleniti cumque? Nisi atque delectus eos.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit quasi tenetur nisi adipisci delectus, incidunt modi dignissimos id temporibus odio vitae amet dolore aut quo nostrum! Excepturi omnis beatae deserunt!

Default Pause Abort Approve Release Primary
Cell 1.1 Cell 1.2 Cell 2.1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium illo architecto deleniti iure nisi, cupiditate ut? Voluptates ex impedit laboriosam aut eius recusandae ab tempore autem, libero, consectetur dolorum nemo. Cell 2.3 Cell 3.1 Cell 3.2 Cell 4.1
Voluptates ex impedit laboriosam aut eius recusandae
Cell 4.2 Cell 4.3
Cell 5.2
Cell 6.1 - A Table Footer
first item

second item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolorem laudantium reiciendis modi veritatis, consectetur repellendus? Corporis, est aperiam nam dolorum repudiandae nostrum ex, officia blanditiis similique cumque, eos inventore!

forth item

forth:first item forth:second item

forth:third item

forth:third:first item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolorem laudantium reiciendis modi veritatis, consectetur repellendus? Corporis, est aperiam nam dolorum repudiandae nostrum ex, officia blanditiis similique cumque, eos inventore!

forth:third:third item forth:third:forth item
forth:forth item
fifth item sixth item

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus excepturi dolorem atque obcaecati consequuntur ex quas, voluptatibus aut voluptas. Est natus dolores et commodi sunt, temporibus vitae sapiente sint vero?

Just another point

Just another point, but this time for real!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus excepturi dolorem atque obcaecati consequuntur ex quas, voluptatibus aut voluptas. Est natus dolores et commodi sunt, temporibus vitae sapiente sint vero?

eighth item

Contextual Colors

Editorial

Presentational

Actionable

Hierarchical

Status

Open Source Colors

This site is themed using the Colar color scheme

Note: The tokens in Trivet uses the open-source Open Color color scheme as it's default color library.

Note that these 'lib' colours are not present in the CSS custom properties. Styling is done entirely with semantic tokens.

A Token Structure

Note that Trivet wouldn't use all of these. This is a structure to help create tokens with consistent and predictable names.

Namespace Foundation Topic Property Modifier Variant Range State trvt color editorial text primary 000-100 hover layout promotional background secondary light-bold visited spacing message border tertiary thin-thick active size layer easing highlight low-high focus line signals delay brand small-large readonly time interactive offset invalid typography anchor weight <boolean> shadow tag order pending position onhold gap ready block loaded inline complete grid aborted path error

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Facilis dolorem praesentium placeat deleniti cumque? Nisi atque delectus eos.

Twitter logo Twitter linkedin logo Linkedin Informaat Instagram logo Instagram Flickr