Merge pull request #249 from frappe/fix-update-frappe-ui-colors

Author: surajshetty3416

frappe-ui

@@ -24,7 +24,7 @@
     "ace-builds": "^1.22.0",
     "autoprefixer": "^10.4.2",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.43",
+    "frappe-ui": "0.1.80",
     "opentype.js": "^1.3.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.5",

frontend/espresso_colors.js

@@ -52,8 +52,8 @@ const isDark = useDark({
 [id^="headlessui-dialog-panel"] > div > div > div > div.mb-6.flex.items-center.justify-between > button {
 	@apply bg-surface-gray-1;
 	@apply hover:bg-surface-gray-3;
-	@apply stroke-text-icons-gray-8;
-	@apply hover:stroke-text-icons-gray-9;
+	@apply stroke-ink-gray-8;
+	@apply hover:stroke-ink-gray-9;
 	> svg {
 		@apply stroke-[0.2px];
 		@apply h-[14px];
@@ -63,7 +63,7 @@ const isDark = useDark({
 [id^="headlessui-dialog-panel"] > div,
 [id^="headlessui-dialog-panel"] .space-y-4 > p {
 	@apply bg-surface-white;
-	@apply text-text-icons-gray-8;
+	@apply text-ink-gray-8;
 }
 
 [id^="headlessui-dialog-panel"] header h3 {
@@ -82,7 +82,7 @@ const isDark = useDark({
 [id^="headlessui-combobox-options"] {
 	@apply bg-surface-white;
 	@apply dark:bg-surface-gray-1;
-	@apply text-text-icons-gray-7;
+	@apply text-ink-gray-7;
 
 	@apply overflow-y-auto;
 	-ms-overflow-style: none; /* IE and Edge */

frontend/package.json

@@ -14,7 +14,7 @@
 							:data-block-layer-id="element.blockId"
 							:title="element.blockId"
 							@contextmenu.prevent.stop="onContextMenu"
-							class="min-w-24 cursor-pointer overflow-hidden rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-text-icons-gray-7"
+							class="min-w-24 cursor-pointer overflow-hidden rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7"
 							@click.stop="
 								store.activeCanvas?.history.pause();
 								store.selectBlock(element, $event, false, true);
@@ -30,7 +30,7 @@
 								}">
 								<FeatherIcon
 									:name="isExpanded(element) ? 'chevron-down' : 'chevron-right'"
-									class="ml-[-18px] h-3 w-3 text-text-icons-gray-4"
+									class="ml-[-18px] h-3 w-3 text-ink-gray-4"
 									v-if="element.children && element.children.length && !element.isRoot()"
 									@click.stop="toggleExpanded(element)" />
 								<FeatherIcon
@@ -67,7 +67,7 @@
 									:name="element.isVisible() ? 'eye' : 'eye-off'"
 									class="ml-auto mr-2 hidden h-3 w-3 group-hover:block"
 									@click.stop="element.toggleVisibility()" />
-								<span v-if="element.isRoot()" class="ml-auto mr-2 text-sm capitalize text-text-icons-gray-5">
+								<span v-if="element.isRoot()" class="ml-auto mr-2 text-sm capitalize text-ink-gray-5">
 									{{ store.activeBreakpoint }}
 								</span>
 							</span>

frontend/src/App.vue

@@ -34,7 +34,7 @@
 							}">
 							<img :src="blockTemplate.preview" />
 						</div>
-						<p class="text-sm text-text-icons-gray-6">
+						<p class="text-sm text-ink-gray-6">
 							{{ blockTemplate.template_name }}
 						</p>
 					</div>

frontend/src/colors.css

@@ -4,7 +4,7 @@
 		<div class="overlay absolute" id="overlay" ref="overlay" />
 		<Transition name="fade">
 			<div
-				class="absolute bottom-0 left-0 right-0 top-0 z-[19] grid w-full place-items-center bg-surface-gray-1 p-10 text-text-icons-gray-5"
+				class="absolute bottom-0 left-0 right-0 top-0 z-[19] grid w-full place-items-center bg-surface-gray-1 p-10 text-ink-gray-5"
 				v-show="store.settingPage">
 				<LoadingIcon></LoadingIcon>
 			</div>
@@ -31,8 +31,8 @@
 						:name="breakpoint.icon"
 						class="h-8 w-6"
 						:class="{
-							'text-text-icons-gray-8': breakpoint.visible,
-							'text-text-icons-gray-3': !breakpoint.visible,
+							'text-ink-gray-8': breakpoint.visible,
+							'text-ink-gray-3': !breakpoint.visible,
 						}" />
 				</div>
 			</div>

frontend/src/components/BlockLayers.vue

@@ -4,9 +4,9 @@
 			<button
 				v-for="option of leftPanelOptions"
 				:key="option.value"
-				class="flex size-8 items-center justify-center rounded text-text-icons-gray-7 hover:bg-surface-gray-2 focus:!bg-surface-gray-3"
+				class="flex size-8 items-center justify-center rounded text-ink-gray-7 hover:bg-surface-gray-2 focus:!bg-surface-gray-3"
 				:class="{
-					'bg-surface-gray-3 text-text-icons-gray-9': store.leftPanelActiveTab === option.value,
+					'bg-surface-gray-3 text-ink-gray-9': store.leftPanelActiveTab === option.value,
 				}"
 				@click.stop="setActiveTab(option.value as LeftSidebarTabOption)"
 				:title="option.label">
@@ -71,6 +71,7 @@
 import ComponentIcon from "@/components/Icons/Component.vue";
 import LayersIcon from "@/components/Icons/Layers.vue";
 import PlusIcon from "@/components/Icons/Plus.vue";
+import PageScript from "@/components/PageScript.vue";
 import Block from "@/utils/block";
 import convertHTMLToBlocks from "@/utils/convertHTMLToBlocks";
 import { createResource } from "frappe-ui";
@@ -81,7 +82,6 @@ import BuilderAssets from "./BuilderAssets.vue";
 import BuilderBlockTemplates from "./BuilderBlockTemplates.vue";
 import BuilderCanvas from "./BuilderCanvas.vue";
 import PanelResizer from "./PanelResizer.vue";
-import PageScript from "@/components/PageScript.vue";
 
 const pageCanvas = inject("pageCanvas") as Ref<InstanceType<typeof BuilderCanvas> | null>;
 const fragmentCanvas = inject("fragmentCanvas") as Ref<InstanceType<typeof BuilderCanvas> | null>;