Tokens plugin MVP

common/src/app/common/types/plugins.cljc

@@ -6,6 +6,7 @@
 
 (ns app.common.types.plugins
   (:require
+   [app.common.schema :as sm]
    [app.common.schema.generators :as sg]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -37,6 +38,8 @@
    [:icon {:optional true} :string]
    [:permissions [:set :string]]])
 
+(sm/register! ::registry-entry schema:registry-entry)
+
 (def schema:plugin-registry
   [:map
    [:ids [:vector :string]]

common/src/app/common/types/token.cljc

@@ -52,7 +52,11 @@
    :typography      "typography"})
 
 (def dtcg-token-type->token-type
-  (set/map-invert token-type->dtcg-token-type))
+  (-> (set/map-invert token-type->dtcg-token-type)
+      ;; Backwards compability
+      (assoc "fontWeight" :font-weight
+             "fontSize" :font-size
+             "fontFamily" :font-family)))
 
 (def token-types
   (into #{} (keys token-type->dtcg-token-type)))
@@ -441,3 +445,8 @@
     (when (font-weight-values weight)
       (cond-> {:weight weight}
         italic? (assoc :style "italic")))))
+
+(defn typography-composite-token-reference?
+  "Predicate if a typography composite token is a reference value - a string pointing to another reference token."
+  [token-value]
+  (string? token-value))

common/src/app/common/types/tokens_lib.cljc

@@ -1501,6 +1501,29 @@ Will return a value that matches this schema:
   (and (not (contains? decoded-json "$metadata"))
        (not (contains? decoded-json "$themes"))))
 
+(defn- transform-font-family-value-dtcg->internal
+  "Transform font family token value from DTCG format to internal format.
+   - If value is a string, split it into an array of font families
+   - If value is already an array, keep it as is
+   - Otherwise return as is"
+  [value]
+  (cond
+    (string? value) (cto/split-font-family value)
+    ;; Keep array / collection
+    (sequential? value) value
+    :else value))
+
+(defn- transform-typography-value-keys-dtcg->internal
+  "Transform typography token value keys from DTCG format to internal format."
+  [value]
+  (if (map? value)
+    (-> value
+        (set/rename-keys cto/dtcg-token-type->token-type)
+        (select-keys cto/typography-keys)
+        ;; Transform font-family values within typography composite tokens
+        (d/update-when :font-family transform-font-family-value-dtcg->internal))
+    value))
+
 (defn- flatten-nested-tokens-json
   "Convert a tokens tree in the decoded json fragment into a flat map,
    being the keys the token paths after joining the keys with '.'."
@@ -1518,16 +1541,12 @@ Will return a value that matches this schema:
              (assoc tokens child-path (make-token
                                        :name child-path
                                        :type token-type
-                                       :value (cond-> (get v "$value")
-                                                ;; Split string of font-families
-                                                (and (= :font-family token-type)
-                                                     (string? (get v "$value")))
-                                                cto/split-font-family
-
-                                                ;; Keep array of font-families
-                                                (and (= :font-family token-type)
-                                                     (sequential? (get v "$value")))
-                                                identity)
+                                       :value
+                                       (let [token-value (get v "$value")]
+                                         (case token-type
+                                           :font-family (transform-font-family-value-dtcg->internal token-value)
+                                           :typography (transform-typography-value-keys-dtcg->internal token-value)
+                                           token-value))
                                        :description (get v "$description")))
              ;; Discard unknown type tokens
              tokens)))))
@@ -1680,8 +1699,31 @@ Will return a value that matches this schema:
       :else
       (parse-multi-set-dtcg-json decoded-json))))
 
+(defn- transform-typography-value-keys-internal->dtcg
+  "Transform typography token value keys from internal format to DTCG format."
+  [value]
+  (if (map? value)
+    (->> value
+         (reduce-kv (fn [acc internal-key v]
+                      (let [dtcg-key (case internal-key
+                                       :font-weight "fontWeight"
+                                       :font-size "fontSize"
+                                       :letter-spacing "letterSpacing"
+                                       :font-family "fontFamilies"
+                                       :text-case "textCase"
+                                       :text-decoration "textDecoration"
+                                       nil)]
+                        (if dtcg-key
+                          (assoc acc dtcg-key v)
+                          acc)))
+                    {}))
+    value))
+
 (defn- token->dtcg-token [token]
-  (cond-> {"$value" (:value token)
+  (cond-> {"$value" (cond-> (:value token)
+                      ;; Transform typography token values
+                      (= :typography (:type token))
+                      transform-typography-value-keys-internal->dtcg)
            "$type" (cto/token-type->dtcg-token-type (:type token))}
     (:description token) (assoc "$description" (:description token))))
 

common/test/common_tests/types/data/tokens-font-family-example.json

@@ -0,0 +1,26 @@
+{
+  "fonts": {
+    "string-font-family": {
+      "$value": "Arial, Helvetica, sans-serif",
+      "$type": "fontFamilies",
+      "$description": "A font family defined as a string"
+    },
+    "array-font-family": {
+      "$value": ["Inter", "system-ui", "sans-serif"],
+      "$type": "fontFamilies",
+      "$description": "A font family defined as an array"
+    },
+    "single-font-family": {
+      "$value": "Georgia",
+      "$type": "fontFamilies"
+    },
+    "complex-font-family": {
+      "$value": "Times New Roman, serif",
+      "$type": "fontFamilies"
+    },
+    "font-with-spaces": {
+      "$value": "Source Sans Pro, Arial, sans-serif",
+      "$type": "fontFamilies"
+    }
+  }
+}

common/test/common_tests/types/data/tokens-typography-example.json

@@ -0,0 +1,52 @@
+{
+  "test": {
+    "typo": {
+      "$value": {
+        "fontWeight": "100",
+        "fontSize": "16px",
+        "letterSpacing": "0.1em"
+      },
+      "$type": "typography"
+    },
+    "typo2": {
+      "$value": "{typo}",
+      "$type": "typography"
+    },
+    "font-weight": {
+      "$value": "200",
+      "$type": "fontWeights"
+    },
+    "typo-to-single": {
+      "$value": "{font-weight}",
+      "$type": "typography"
+    },
+    "test-empty": {
+      "$value": {},
+      "$type": "typography"
+    },
+    "font-size": {
+      "$value": "18px",
+      "$type": "fontSizes"
+    },
+    "typo-complex": {
+      "$value": {
+        "fontWeight": "bold",
+        "fontSize": "24px",
+        "letterSpacing": "0.05em",
+        "fontFamilies": ["Arial", "sans-serif"],
+        "textCase": "uppercase"
+      },
+      "$type": "typography",
+      "$description": "A complex typography token"
+    },
+    "typo-with-string-font-family": {
+      "$value": {
+        "fontWeight": "600",
+        "fontSize": "20px",
+        "fontFamilies": "Roboto, Helvetica, sans-serif"
+      },
+      "$type": "typography",
+      "$description": "Typography token with string font family"
+    }
+  }
+}