Ability to transfer tokens between color scheme and common

apps/showcase/components/layout/designer/editor/DesignTokenField.vue

@@ -1,6 +1,9 @@
 <template>
-    <div>
+    <div class="group">
-        <label :for="inputId" class="text-sm text-zinc-700 dark:text-white block capitalize text-ellipsis overflow-hidden w-full whitespace-nowrap" :title="label">{{ label }}</label>
+        <div class="flex justify-between justify-items-center">
+            <label :for="inputId" class="text-sm text-zinc-700 dark:text-white block capitalize text-ellipsis overflow-hidden w-full whitespace-nowrap" :title="label">{{ label }}</label>
+            <button type="button" @click="transfer"><i class="pi pi-sort-alt !text-xs text-zinc-400 hidden group-hover:block animate-fadein"></i></button>
+        </div>
         <div :id="id" class="relative">
             <AutoComplete
                 :modelValue="modelValue"
@@ -41,6 +44,8 @@
 <script>
 import { UniqueComponentId } from '@primevue/core/utils';
 import { $dt } from '@primevue/themes';
+import set from 'lodash.set';
+import unset from 'lodash.unset';
 
 export default {
     emits: ['update:modelValue'],
@@ -56,6 +61,14 @@ export default {
         modelValue: {
             type: null,
             default: undefined
+        },
+        componentKey: {
+            type: null,
+            default: null
+        },
+        path: {
+            type: String,
+            default: undefined
         }
     },
     data() {
@@ -83,6 +96,59 @@ export default {
             } else {
                 this.items = [];
             }
+        },
+        getPathFromColorScheme(colorScheme) {
+            const lightPrefix = 'light.';
+            const darkPrefix = 'dark.';
+
+            if (colorScheme.startsWith(lightPrefix)) {
+                return colorScheme.slice(lightPrefix.length);
+            } else if (colorScheme.startsWith(darkPrefix)) {
+                return colorScheme.slice(darkPrefix.length);
+            }
+
+            return colorScheme;
+        },
+        transfer(event) {
+            let tokens = this.$appState.designer.theme.preset.components[this.componentKey] || this.$appState.designer.theme.preset.directives[this.componentKey];
+            const colorSchemePrefix = 'colorScheme.';
+
+            if (this.path.startsWith(colorSchemePrefix)) {
+                let tokenPath = this.getPathFromColorScheme(this.path.slice(colorSchemePrefix.length));
+
+                set(tokens, tokenPath, this.modelValue);
+                unset(tokens, 'colorScheme.light.' + tokenPath);
+                unset(tokens, 'colorScheme.dark.' + tokenPath);
+            } else {
+                set(tokens, 'colorScheme.light.' + this.path, this.modelValue);
+                set(tokens, 'colorScheme.dark.' + this.path, this.modelValue);
+                unset(tokens, this.path);
+            }
+
+            this.removeEmptyProps(tokens);
+
+            event.preventDefault();
+        },
+        removeEmptyProps(obj) {
+            if (typeof obj !== 'object' || obj === null) {
+                return obj;
+            }
+
+            for (const key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    const value = obj[key];
+
+                    if (typeof value === 'object' && value !== null) {
+                        this.removeEmptyProps(value);
+                    }
+
+                    if (typeof value === 'object' && value !== null && Object.keys(value).length === 0) {
+                        delete obj[key];
+                    }
+                }
+            }
+
+            return obj;
         }
     },
     computed: {

apps/showcase/components/layout/designer/editor/component/DesignComponentSection.vue

@@ -3,7 +3,7 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0 capitalize">{{ sectionName }}</div>
         <div class="grid grid-cols-4 gap-2">
             <template v-for="(t_value, t_name) in tokens" :key="t_name">
-                <DesignTokenField v-if="!isObject(t_value)" v-model="tokens[t_name]" :label="camelCaseToSpaces(t_name)" :type="isColor(t_name) ? 'color' : null" />
+                <DesignTokenField v-if="!isObject(t_value)" v-model="tokens[t_name]" :label="camelCaseToSpaces(t_name)" :type="isColor(t_name) ? 'color' : null" :componentKey="componentKey" :path="path + '.' + t_name" />
             </template>
         </div>
         <template v-if="hasNestedTokens">

apps/showcase/package.json

@@ -63,7 +63,9 @@
         "superstruct": "^2.0.2"
     },
     "dependencies": {
-        "@docsearch/js": "^3.3.3"
+        "@docsearch/js": "^3.3.3",
+        "lodash.set": "^4.3.2",
+        "lodash.unset": "^4.3.2"
     },
     "engines": {
         "node": ">=12.11.0"