✨ Add feature flag for design tokens

backend/scripts/repl

@@ -28,7 +28,8 @@ export PENPOT_FLAGS="\
        enable-webhooks \
        enable-access-tokens \
        enable-file-validation \
-       enable-file-schema-validation";
+       enable-file-schema-validation \
+       disable-feature-design-tokens";
 
 # Default deletion delay for devenv
 export PENPOT_DELETION_DELAY="24h"

backend/scripts/start-dev

@@ -20,7 +20,8 @@ export PENPOT_FLAGS="\
        enable-file-snapshot \
        enable-access-tokens \
        enable-file-validation \
-       enable-file-schema-validation";
+       enable-file-schema-validation \
+       disable-feature-design-tokens";
 
 export OPTIONS="
        -A:jmx-remote -A:dev \

common/src/app/common/features.cljc

@@ -49,7 +49,8 @@
     "components/v2"
     "styles/v2"
     "layout/grid"
-    "plugins/runtime"})
+    "plugins/runtime"
+    "design-tokens/v1"})
 
 ;; A set of features enabled by default
 (def default-features
@@ -81,7 +82,8 @@
         "fdata/pointer-map"
         "layout/grid"
         "fdata/shape-data-type"
-        "plugins/runtime"}
+        "plugins/runtime"
+        "design-tokens/v1"}
       (into frontend-only-features)))
 
 (sm/register! ::features
@@ -101,6 +103,7 @@
     :feature-fdata-objects-map "fdata/objects-map"
     :feature-fdata-pointer-map "fdata/pointer-map"
     :feature-plugins "plugins/runtime"
+    :feature-design-tokens "design-tokens/v1"
     nil))
 
 (defn migrate-legacy-features
@@ -308,5 +311,3 @@
                 :feature (first not-supported)
                 :hint (str/ffmt "paste features '%' not enabled on the application"
                                 (str/join "," not-supported))))))
-
-

frontend/src/app/main/features.cljs

@@ -109,7 +109,7 @@
      (watch [_ _ _]
        (when *assert*
          (->> (rx/from cfeat/no-migration-features)
-              (rx/filter #(not (contains? cfeat/backend-only-features %)))
+              (rx/filter #(not (or (contains? cfeat/backend-only-features %) (= "design-tokens/v1" %))))
               (rx/observe-on :async)
               (rx/map enable-feature))))
 

frontend/src/app/main/ui/context.cljs

@@ -24,10 +24,11 @@
 
 (def libraries            (mf/create-context nil))
 (def components-v2        (mf/create-context nil))
+(def design-tokens        (mf/create-context nil))
 
 (def current-scroll       (mf/create-context nil))
 (def current-zoom         (mf/create-context nil))
 
 (def workspace-read-only? (mf/create-context nil))
 (def is-component?        (mf/create-context false))
-(def sidebar (mf/create-context nil))
+(def sidebar              (mf/create-context nil))

frontend/src/app/main/ui/workspace.cljs

@@ -176,6 +176,7 @@
         file-ready?      (mf/deref file-ready*)
 
         components-v2?   (features/use-feature "components/v2")
+        design-tokens?   (features/use-feature "design-tokens/v1")
 
         background-color (:background-color wglobal)]
 
@@ -204,15 +205,16 @@
       [:& (mf/provider ctx/current-team-id) {:value team-id}
        [:& (mf/provider ctx/current-page-id) {:value page-id}
         [:& (mf/provider ctx/components-v2) {:value components-v2?}
-         [:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
-          [:section {:class (stl/css :workspace)
-                     :style {:background-color background-color
-                             :touch-action "none"}}
-           [:& context-menu]
+         [:& (mf/provider ctx/design-tokens) {:value design-tokens?}
+          [:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
+           [:section {:class (stl/css :workspace)
+                      :style {:background-color background-color
+                              :touch-action "none"}}
+            [:& context-menu]
 
-           (if ^boolean file-ready?
-             [:& workspace-page {:page-id page-id
-                                 :file file
-                                 :wglobal wglobal
-                                 :layout layout}]
-             [:& workspace-loader])]]]]]]]))
+            (if ^boolean file-ready?
+              [:& workspace-page {:page-id page-id
+                                  :file file
+                                  :wglobal wglobal
+                                  :layout layout}]
+              [:& workspace-loader])]]]]]]]]))

frontend/src/app/main/ui/workspace/sidebar.cljs

@@ -12,7 +12,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.tab-container :refer [tab-container tab-element]]
-   [app.main.ui.context :as muc]
+   [app.main.ui.context :as ctx]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.workspace.comments :refer [comments-sidebar]]
    [app.main.ui.workspace.left-header :refer [left-header]]
@@ -40,6 +40,7 @@
         mode-inspect?  (= options-mode :inspect)
         project        (mf/deref refs/workspace-project)
 
+        design-tokens? (mf/use-ctx ctx/design-tokens)
 
         section        (cond (or mode-inspect? (contains? layout :layers)) :layers
                              (contains? layout :assets) :assets
@@ -64,7 +65,7 @@
         on-tab-change
         (mf/use-fn #(st/emit! (dw/go-to-layout %)))]
 
-    [:& (mf/provider muc/sidebar) {:value :left}
+    [:& (mf/provider ctx/sidebar) {:value :left}
      [:aside {:ref parent-ref
               :id "left-sidebar-aside"
               :data-testid "left-sidebar"
@@ -122,7 +123,8 @@
                              :title (tr "workspace.toolbar.assets")}
              [:& assets-toolbox {:size (- size 58)}]])
 
-          (when-not ^boolean mode-inspect?
+          (when (and (not ^boolean mode-inspect?)
+                     design-tokens?)
             [:& tab-element {:id :tokens
                              :title "Tokens"}
              [:& tokens-sidebar-tab]])]])]]))
@@ -170,7 +172,7 @@
                    :on-change-section handle-change-section
                    :on-expand handle-expand)]
 
-    [:& (mf/provider muc/sidebar) {:value :right}
+    [:& (mf/provider ctx/sidebar) {:value :right}
      [:aside {:class (stl/css-case :right-settings-bar true
                                    :not-expand (not can-be-expanded?)
                                    :expanded (> size 276))