UI Color Palette 5.0.2 Millésime

package.json

@@ -1,6 +1,6 @@
 {
   "name": "penpot-ui-color-palette",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "private": true,
   "description": "UI Color Palette is a Penpot plugin that creates, manages, exports, and publishes consistent and accessible color palettes.",
   "author": "Aurélien Grimaud",
@@ -41,7 +41,7 @@
     "@sentry/vite-plugin": "^3.3.1",
     "@types/chroma-js": "^2.4.0",
     "@types/file-saver": "^2.0.5",
-    "@types/mixpanel-browser": "^2.60.0",
+    "@types/mixpanel-browser": "^2.66.0",
     "@types/node": "^22.14.0",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
@@ -62,7 +62,7 @@
     "vite-tsconfig-paths": "^5.1.4"
   },
   "dependencies": {
-    "@a_ng_d/figmug-ui": "^1.17.2",
+    "@a_ng_d/figmug-ui": "^1.17.3",
     "@a_ng_d/figmug-utils": "^0.7.1",
     "@a_ng_d/utils-ui-color-palette": "^1.6.3",
     "@nanostores/preact": "^0.5.2",

src/bridges/checks/checkAnnouncementsStatus.ts

@@ -1,6 +1,11 @@
 const checkAnnouncementsStatus = (remoteVersion: string) => {
   const localVersion = penpot.localStorage.getItem('announcements_version')
-  const isOnboardingRead = penpot.localStorage.getItem('is_onboarding_read')
+  let isOnboardingRead = penpot.localStorage.getItem('is_onboarding_read')
+
+  if (!isOnboardingRead) {
+    penpot.localStorage.setItem('is_onboarding_read', 'false')
+    isOnboardingRead = 'false'
+  }
 
   if (!localVersion && !remoteVersion)
     return {

src/bridges/checks/checkUserPreferences.ts

@@ -2,45 +2,58 @@ import { Language } from '../../types/translations'
 import { locales } from '../../content/locales'
 
 const checkUserPreferences = async () => {
-  const isWCAGDisplayed = penpot.localStorage.getItem('is_wcag_displayed')
-  const isAPCADisplayed = penpot.localStorage.getItem('is_apca_displayed')
-  const canDeepSyncStyles = penpot.localStorage.getItem('can_deep_sync_styles')
-  const canDeepSyncVariables = penpot.localStorage.getItem(
+  let isWCAGDisplayed = penpot.localStorage.getItem('is_wcag_displayed')
+  let isAPCADisplayed = penpot.localStorage.getItem('is_apca_displayed')
+  let canDeepSyncStyles = penpot.localStorage.getItem('can_deep_sync_styles')
+  let canDeepSyncVariables = penpot.localStorage.getItem(
     'can_deep_sync_variables'
   )
-  const isVsCodeMessageDisplayed = penpot.localStorage.getItem(
+  let isVsCodeMessageDisplayed = penpot.localStorage.getItem(
     'is_vscode_message_displayed'
   )
-  const userLanguage = penpot.localStorage.getItem('user_language')
+  let userLanguage = penpot.localStorage.getItem('user_language')
 
-  if (!isWCAGDisplayed) penpot.localStorage.setItem('is_wcag_displayed', 'true')
+  if (!isWCAGDisplayed) {
+    penpot.localStorage.setItem('is_wcag_displayed', 'true')
+    isWCAGDisplayed = 'true'
+  }
 
-  if (isAPCADisplayed) penpot.localStorage.setItem('is_apca_displayed', 'true')
+  if (isAPCADisplayed) {
+    penpot.localStorage.setItem('is_apca_displayed', 'true')
+    isAPCADisplayed = 'true'
+  }
 
-  if (!canDeepSyncStyles)
+  if (!canDeepSyncStyles) {
     penpot.localStorage.setItem('can_deep_sync_styles', 'false')
+    canDeepSyncStyles = 'false'
+  }
 
-  if (!canDeepSyncVariables)
+  if (!canDeepSyncVariables) {
     penpot.localStorage.setItem('can_deep_sync_variables', 'false')
+    canDeepSyncVariables = 'false'
+  }
 
-  if (!isVsCodeMessageDisplayed)
+  if (!isVsCodeMessageDisplayed) {
     penpot.localStorage.setItem('is_vscode_message_displayed', 'true')
+    isVsCodeMessageDisplayed = 'true'
+  }
 
-  if (!userLanguage) penpot.localStorage.setItem('user_language', 'en-US')
+  if (!userLanguage) {
+    penpot.localStorage.setItem('user_language', 'en-US')
+    userLanguage = 'en-US'
+  }
 
   locales.set((userLanguage as Language) ?? 'en-US')
 
   return penpot.ui.sendMessage({
     type: 'CHECK_USER_PREFERENCES',
     data: {
-      isWCAGDisplayed: isWCAGDisplayed === 'true',
-      isAPCADisplayed: isAPCADisplayed === 'true',
-      canDeepSyncStyles: canDeepSyncStyles === 'true',
-      canDeepSyncVariables: canDeepSyncVariables === 'true',
-      isVsCodeMessageDisplayed: !isVsCodeMessageDisplayed
-        ? true
-        : isVsCodeMessageDisplayed === 'true',
-      userLanguage: userLanguage ?? 'en-US',
+      isWCAGDisplayed: isWCAGDisplayed,
+      isAPCADisplayed: isAPCADisplayed,
+      canDeepSyncStyles: canDeepSyncStyles,
+      canDeepSyncVariables: canDeepSyncVariables,
+      isVsCodeMessageDisplayed: isVsCodeMessageDisplayed,
+      userLanguage: userLanguage,
     },
   })
 }

src/bridges/loadUI.ts

@@ -72,6 +72,13 @@ const loadUI = async () => {
     penpot.ui.sendMessage({
       type: 'CHECK_ANNOUNCEMENTS_VERSION',
     })
+    penpot.ui.sendMessage({
+      type: 'CHECK_EDITOR',
+      data: {
+        id: penpot.currentUser.id,
+        editor: globalConfig.env.editor,
+      },
+    })
 
     // Checks
     checkUserConsent()

src/content/translations/en-US.json

@@ -21,10 +21,10 @@
     "duplicate": "Duplicate",
     "export": "Export palette as {format}",
     "generateDocument": {
-      "label": "Generate a document",
-      "palette": "Generate a color palette",
-      "paletteWithProperties": "Generate a detailed color palette",
-      "sheet": "Generate a color sheet"
+      "label": "Generate documentation",
+      "palette": "Simple color palette",
+      "paletteWithProperties": "Detailed color palette",
+      "sheet": "Full color sheet"
     },
     "moreActions": "More actions",
     "publishOrSyncPalette": "Publish or Synchronize palette",
@@ -380,8 +380,8 @@
     "secondaryAction": "………"
   },
   "plan": {
-    "dev": "Developer plan",
-    "free": "Basic plan",
+    "dev": "/dev plan",
+    "free": "/basic plan",
     "getPro": "Go /pro",
     "pro": "/pro plan",
     "trial": "Trial",
@@ -434,6 +434,12 @@
       "title": "UI Color Palette /pro /figma",
       "subtitle": "$5 /month via Figma",
       "text": "◻ Unlimited palettes{br}◻ Unlimited source colors{br}◻ Unlimited stops{br}◻ Unlimited color modes{br}◻ Export and Sync with library"
+    },
+    "oneFigma": {
+      "cta": "Go to UI Color Palette /one",
+      "title": "UI Color Palette /pro /one",
+      "subtitle": "$5 /month via Lemon Squeezy",
+      "text": "◻ All /figma features{br}◻ Tailored for small and larges teams{br}◻ Multi platforms{br}◻ Multi payment options"
     }
   },
   "proPlan": {

src/ui/index.tsx

@@ -2,7 +2,11 @@ import { createRoot } from 'react-dom/client'
 import React from 'react'
 import mixpanel from 'mixpanel-browser'
 import App from '@ui-lib/ui/App'
-import { initMixpanel, setMixpanelEnv } from '@ui-lib/external/tracking/client'
+import {
+  initMixpanel,
+  setEditor,
+  setMixpanelEnv,
+} from '@ui-lib/external/tracking/client'
 import { initSentry } from '@ui-lib/external/monitoring/client'
 import { initSupabase } from '@ui-lib/external/auth/client'
 import { ThemeProvider } from '@ui-lib/config/ThemeContext'
@@ -25,11 +29,17 @@ if (globalConfig.env.isMixpanelEnabled && mixpanelToken !== undefined) {
     disable_cookie: true,
     ignore_dnt: true,
     opt_out_tracking_by_default: true,
+    record_sessions_percent: 5,
+    record_mask_text_selector: '*',
+    record_block_selector: 'img',
+    // @ts-expect-error: 'record_heatmap_data' is not in the Mixpanel type definitions
+    record_heatmap_data: true,
   })
   mixpanel.opt_in_tracking()
 
   setMixpanelEnv(import.meta.env.MODE as 'development' | 'production')
   initMixpanel(mixpanel)
+  setEditor(globalConfig.env.editor)
 }
 
 if (
@@ -59,7 +69,7 @@ if (
     maxValueLength: 5000,
     maxBreadcrumbs: 150,
     tracesSampleRate: 1.0,
-    replaysSessionSampleRate: 0.1,
+    replaysSessionSampleRate: 0.01,
     replaysOnErrorSampleRate: 1.0,
     release: globalConfig.versions.pluginVersion,
   })