Using "style-dictionary" from Clojure.
Summary:
A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc.
Introduction
I'm working on a tool to update slack with details from the goings on from jira. I am the interest of theming things along with the corporate style, I found out that 'style-dictionaries' are a tool that allows you to reference them in a json document.
I don't write clojurescript, I render my html serverside, so I'm documenting what worked for me.
According to the official style dictionary site:
A style dictionary consists of: - Design tokens, organized in JSON, JSONC, JSON5, or JS files - Static assets (e.g. fonts, icons, images, sounds, etc.), organized into folders - Configuration, defining the transformation and formatting of the tokens and assets for each output platform
In the example repo I have found there isn't much in regards to static assetts.
I believe the goal is to transform the styles across different tools/document formats so that there is some kind of visual consistency.
I'm using the Red Hat Design Tokens repo as the the source for my style dictionary.
They seem to call their tooling "design tokens" rather than "style dictionary", maybe these terms can be used interchangably. If you can explain what the complexities here easily, please drop me a line.
Getting the 'design tokens' / 'style dictionary'.
Git clone the repository into your 'resources' folder. This is the location where we expect to see all non clojure / resources in a clojure project.
$ git clone https://github.com/RedHat-UX/red-hat-design-tokens.git resources/red-hat-design-tokens
This looks like a "npm" project. There is no hard requirement for a style dictionary to be an NPM project, in this case the goal would be to turn the raw data into multiple 'styling formats'. I really only care about the css style in this example.
$ cd resources/red-hat-design-tokens $ npm install $ npm run build
This downloaded and installs the build toolchain, then builds the 'style dictionary' across the different formats.
I imagine this only needs to be done once.
The files it generated were created in the ./json
$ tree . ├── rhds.tokens.flat.json └── rhds.tokens.json 1 directory, 2 files
Using the token json files.
Its so easy, I barely think it worth writing a library for it. Here is how I did it:
(ns simple-web-app.theme (:require [cheshire.core :as json] [clojure.java.io :as io])) (defn load-style-dict [path] (with-open [r (io/reader path)] (json/parse-stream r true))) (def style-dictionary (load-style-dictionary "resources/red-hat-design-tokens/json/rhds.tokens.json")) (defn get-style [l] (get-in style-dictionary l))
I am not sure its worth publishing this into a jar, because its so small, but you can use normal clojure syntax to find the elements.
The Red Hat style supplies a 'flat' and a 'heierachial' json files, I don't know if this is required or not, but it seems as though there is some additional logic encoded in the herierachal
You can investigate the 'top level' keys with clojure commands.
user> (keys (simple-web-app.theme/get-style [])) (:line-height :space :box-shadow :animation :color :breakpoint :font :size :opacity :length :letter-spacing :border :media)
And then query those …
user> (keys (simple-web-app.theme/get-style [:color])) (:orange :$extensions :white-hsl :gray :white :interactive :yellow :green :black-hsl :icon :canvas :brand :black-rgb :white-rgb :red-orange :status :red :blue :teal :purple :border :accent :surface :text :black)
Then look up the :blue..
user> (keys (simple-web-app.theme/get-style [:color :blue]))
and the "40" variant until you get to a :$value.
user> (simple-web-app.theme/get-style [:color :blue :40 :$value]) "#4394e5"
There are some thematic choices included in the theming, including the expectations of font colors, for example
user> (simple-web-app.theme/get-style [:color :text :primary :on-light]) {:path ["color" "text" "primary" "on-light"], :$type "color", :isSource true, :$description "Primary text color for light theme", :name "rh-color-text-primary-on-light", :original {:$value "{color.gray.95}", :$description "Primary text color for light theme", :attributes {:category "typography", :type "color"}, :$type "color"}, :$value "#151515", :filePath "tokens/color/text.yaml", :attributes {:category "typography", :isLight false, :item "primary", :rgb {:r 21, :g 21, :b 21, :a 1}, :subitem "on-light", :type "color", :hsl {:h 0, :s 0, :l 8.235294117647058, :a 1}, :hsv {:h 0, :s 0, :v 0.08235294117647059, :a 1}, :hex "151515"}}
Along with its 'dark sibling'
user> (simple-web-app.theme/get-style [:color :text :primary :on-dark]) ....
Conclusion
Its not hard to use these themes in clojure for your server side rendering.