Introduction

AppTheme is the shared theme and UI library for Dos applications — design tokens, ViewComponents and vanilla-JS behaviours packaged as a Rails engine.

Every page in this styleguide renders live components straight from the gem, next to the Haml that produced them. The chrome of this site — sidebar, navbar, the filter field above — is itself built with AppTheme components.

Components are rendered through app_theme_* helpers. Styles never use raw values: everything resolves through role tokens like var(--app-color-primary) so apps re-theme by swapping a theme file, not by touching component CSS.

Using the gem in an app

# Gemfile
source "https://rubygems.pkg.github.com/dosfinds" do
  gem "app_theme"
end

# app/views/layouts/application.html.haml
%html{ app_theme_html_attributes }
  %head
    = stylesheet_link_tag "app_theme/application"
    = javascript_include_tag "app_theme/application", defer: true
    = app_theme_favicon_tags