A CSS-implementation of the Spectrum design language

Features

• Robust documentation: Spectrum CSS is designed to be used in partnership with Spectrum’s detailed usage guidelines.
• Flexible: Our CSS is customizable, powerful, and designed to work with any JavaScript framework.
• Rigorously tested: These individually-versioned components have been vetted to be accessible and inclusive of global audiences.
• Multi-platform support: We support evergreen browsers for scalability and flexibility.
• 

Using Spectrum CSS

The preferred method of using Spectrum CSS relies on custom properties to swap out variables for different themes and contexts. This results in the lowest bundle sizes and is one of the simpler approaches. Want to get a component up and running as soon as possible? Check out the quick start guide.

Functionality

Spectrum CSS is a pure CSS implementation that performs interactivity using only CSS. While lightweight JavaScript is included for demonstration purposes in our Storybook, it’s designed to be paired with implementations of Spectrum or very simple applications using basic elements.

For instance, using Spectrum CSS is akin to cooking a meal: you have a basic recipe (your CSS), some ingredients (components), and the kitchen tools (theme variables). The better you understand your recipe and have the right tools, the better your meal will taste (or in this case, your interface will look).

Installing Components

You can install Spectrum CSS components from npm as separate, individually versioned packages inside the @spectrum-css org. Here’s how you can get started:

yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @spectrum-css/icon @spectrum-css/button

Installed components will be available in the node_modules/@spectrum-css folder of your project. Each library in this package has a peer dependency on @spectrum-csstokens which serves design tokens via CSS custom properties.

Using Components in Your Project

There are various build outputs available to incorporate Spectrum CSS into a project:

• index.css: Most commonly used, contains component styles and variable definitions.
• index-base.css: Similar to index.css, will not contain extended contexts.
• index-theme.css: Contains only the visual language for a component.

Including Assets

Start by including the base set of variables:

@import node_modules/@spectrum-css/tokens/dist/index.css;

Modifying Components

You can customize Spectrum CSS by redefining custom properties in context. Consult the Custom Property API in each component’s documentation for customizable properties.

Importing UI Icons

Some components will require specific UI icons. These can be found in the @spectrum-css/ui-icons package and they should correspond to your selected scale.

Language Support

For locale-specific changes, specify a Content-Language response header or set the lang attribute in your HTML document.

Browser Support

Spectrum CSS supports the latest two versions of evergreen web browsers as detailed in the project’s package.json file.

Optimizing Spectrum CSS

While Spectrum CSS is built to be flexible, you can take further optimization steps such as tree shaking, purging, and minification to streamline your use of the library.

Troubleshooting

If your styles appear off or aren’t applying, double-check you’re using the new tokens system with @spectrum-csstokens. As of February 2024, the Spectrum project has transitioned to utilize this tokens package. For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Contributing

Thanks to our contributors for their efforts in this project. Interested in joining the team? Check out the contributing guidelines to get started.

Available Tasks

• clean: Cleans all output files.
• build: Builds all components.
• dev: Serves documentation on default port (3000).
• compare: Compares the current version of components with previous versions.
• lint: Provides updates for the component’s package.json file.