Tecitheme NPM | npm.io

ThunderTheme

SvelteKit Design System for Thunderhead web properties.

NPM package available at: https://www.npmjs.com/package/tecitheme

See https://tecitheme.netlify.app/ for demo, documentation and component details.

How to update the NPM package

This theme system is released on NPM to make it easier to include in all Thunderhead web properties.

Authenticate to NPM

npm login --auth-type=legacy
Enter username and password for the NPM account.
Enter email address
Enter 2FA Code

Update the package version

Edit package.json with the next version.
Run npm install to update the package-lock.json file.
Commit and push to origin.

Package the project and publish

npm run package
npm publish

Theme Components

The following components are available in the ThunderTheme Design System. Each component can have one or more of the three use cases listed below.

Page Section: This component can be used in the Front Matter of a markdown file for a particular page. This will result in that component being added into the page layout in the order that it appears in the page_sections array.
Content Component: This component can be used within the Markdown content like a 'shortcode'.
Layout Component: This component is not typically used directly, and is part of a page layout or as a child component in another component.

Accordion

Provides a list of prompts that can be expanded for more information.

Page Section
Content Component

Accordion Inputs

title - String - Text for the Accordion title
prompts - Array - Each expandable element
- title - String - Text for element prompt.
- content - String - HTML - Text shown when prompt is expanded.

Banner

Announcement Banner placed under the Header component in src/routes/+layout.svelte. Input values are set in the src/lib/site_config.json global config file.

Layout Component

Banner Inputs

showCTA - Boolean - Show CTA Button in Banner
shortText - String - Shorter version of Banner text for narrower screens.
longText - String - Longer version of Banner text for wider screens.
ctaText - String - CTA Button text
ctaLink - String - CTA Button URL
allowClose - Boolean - Add close/hide button to banner.

Button

Basic Button component can trigger actions with a button element or link to URLs as an a element. Must pass action = true and use an on:click function for use as a button.

Content Component
Layout Component

Button Inputs

action - Boolean - If true, will use the button element. Must also specify an on:click function for the button.
url - String - URL for a element href.
text - String - Text for the button.
color - String - Uses the getColorStyles function with the 'button' style option.
justify - String - left or right, defaults to center if not specified.

Card

Layout Component

Card Inputs

halfHeight - Boolean - If halfHeight is true, then card image aspect ratio is set to 'video' (16:9), else it is set to the default of 'square' (1:1).
image - String - Background image filename.
icon - String - Background image filename.
heading - String - Background image filename.
subheading - String - Background image filename.
subheadingColor - String - Background image filename.
cardActionStyle - String - Background image filename.
cardLinkColor - String - Background image filename.
cardLinkText - String - Background image filename.
cardURL - String - Background image filename.
links - Array - Background image filename.
- url - Array - Background image filename.
- text - Array - Background image filename.
- color - Array - Background image filename.