✨ Display inactive set warning

frontend/resources/images/icons/eye-off.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 16 16">
+  <path d="M7.411 4.104c.237-.028.475-.042.714-.041 2.623 0 4.725 1.632 5.625 3.937a6.502 6.502 0 0 1-.875 1.568M5.043 4.917C3.895 5.617 3.006 6.702 2.5 8c.9 2.305 3.001 3.938 5.625 3.938a5.874 5.874 0 0 0 3.082-.856M6.932 6.807a1.69 1.69 0 0 0 .757 2.824 1.686 1.686 0 0 0 1.63-.437M3.625 3.5l9 9"/>
+</svg>

frontend/src/app/main/ui/ds/foundations/assets/icon.cljs

@@ -134,6 +134,7 @@
 (def ^:icon-id exit "exit")
 (def ^:icon-id expand "expand")
 (def ^:icon-id external-link "external-link")
+(def ^:icon-id eye-off "eye-off")
 (def ^:icon-id feedback "feedback")
 (def ^:icon-id fill-content "fill-content")
 (def ^:icon-id filter "filter")

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

@@ -111,6 +111,7 @@
 (def ^:icon elipse (icon-xref :elipse))
 (def ^:icon exit (icon-xref :exit))
 (def ^:icon expand (icon-xref :expand))
+(def ^:icon external-link (icon-xref :external-link))
 (def ^:icon feedback (icon-xref :feedback))
 (def ^:icon fill-content (icon-xref :fill-content))
 (def ^:icon filter-icon (icon-xref :filter))
@@ -144,7 +145,6 @@
 (def ^:icon img (icon-xref :img))
 (def ^:icon interaction (icon-xref :interaction))
 (def ^:icon join-nodes (icon-xref :join-nodes))
-(def ^:icon external-link (icon-xref :external-link))
 (def ^:icon justify-content-column-around (icon-xref :justify-content-column-around))
 (def ^:icon justify-content-column-between (icon-xref :justify-content-column-between))
 (def ^:icon justify-content-column-center (icon-xref :justify-content-column-center))

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

@@ -303,6 +303,16 @@
                                   tokens)]
             (ctob/group-by-type tokens)))
 
+        active-token-sets-names
+        (mf/with-memo [tokens-lib]
+          (some-> tokens-lib (ctob/get-active-themes-set-names)))
+
+        token-set-active?
+        (mf/use-fn
+         (mf/deps active-token-sets-names)
+         (fn [name]
+           (contains? active-token-sets-names name)))
+
         [empty-group filled-group]
         (mf/with-memo [tokens-by-type]
           (get-sorted-token-groups tokens-by-type))]
@@ -319,7 +329,14 @@
 
     [:*
      [:& token-context-menu]
-     [:span {:class (stl/css :sets-header)} (tr "workspace.token.tokens-section-title" selected-token-set-name)]
+     [:div {:class (stl/css :sets-header-container)}
+      [:span {:class (stl/css :sets-header)} (tr "workspace.token.tokens-section-title" selected-token-set-name)]
+      [:div {:class (stl/css :sets-header-status) :title (tr "workspace.token.inactive-set-description")}
+       (when (not (token-set-active? selected-token-set-name))
+         [:*
+          [:> i/icon* {:class (stl/css :sets-header-status-icon) :icon-id i/eye-off}]
+          [:span {:class (stl/css :sets-header-status-text)}
+           (tr "workspace.token.inactive-set")]])]]
 
      (for [type filled-group]
        (let [tokens (get tokens-by-type type)]

frontend/src/app/main/ui/workspace/tokens/sidebar.scss

@@ -39,7 +39,7 @@
 }
 
 .themes-header,
-.sets-header {
+.sets-header-container {
   @include use-typography("headline-small");
   display: block;
   padding: $s-8;
@@ -47,10 +47,31 @@
   word-break: break-word;
 }
 
-.sets-header {
+.sets-header-container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: $s-4;
   margin-block-start: $s-8;
 }
 
+.sets-header {
+  flex: 1;
+}
+
+.sets-header-status {
+  @include use-typography("body-small");
+  text-transform: none;
+  color: var(--color-foreground-secondary);
+  display: flex;
+  align-items: center;
+  gap: $s-4;
+}
+
+.sets-header-status-text {
+  font-style: italic;
+}
+
 .themes-wrapper {
   padding: $s-12 0 0 $s-12;
 }

frontend/translations/en.po

@@ -6946,6 +6946,14 @@ msgstr "Enter a value or alias with {alias}"
 msgid "workspace.token.tokens-section-title"
 msgstr "TOKENS -  %s"
 
+#: src/app/main/ui/workspace/tokens/sidebar.cljs:345
+msgid "workspace.token.inactive-set"
+msgstr "Inactive"
+
+#: src/app/main/ui/workspace/tokens/sidebar.cljs:340
+msgid "workspace.token.inactive-set-description"
+msgstr "This set is not active. Change theme or activate the set / theme to see changes in the canvas"
+
 #: src/app/main/ui/workspace/tokens/sidebar.cljs:405
 msgid "workspace.token.tools"
 msgstr "Tools"

frontend/translations/es.po

@@ -6924,6 +6924,14 @@ msgstr "Valor"
 msgid "workspace.token.token-value-enter"
 msgstr "Introduce un valor o un alias usando {alias}"
 
+#: src/app/main/ui/workspace/tokens/sidebar.cljs:345
+msgid "workspace.token.inactive-set"
+msgstr "Inactivo"
+
+#: src/app/main/ui/workspace/tokens/sidebar.cljs:340
+msgid "workspace.token.inactive-set-description"
+msgstr "Set inactivo. Cambia el tema o activa el set para ver los cambios en el canvas."
+
 #: src/app/main/ui/workspace/tokens/sidebar.cljs:405
 msgid "workspace.token.tools"
 msgstr "Herramientas"