@zimbra/x-ui 10.0.0 → 11.0.1-master.d6d6416.0

package/.circleci/config.yml

@@ -0,0 +1,115 @@
+version: 2.1
+
+############################################################################
+
+executors:
+  node-executor:
+    working_directory: ~/zm-x-ui
+    docker:
+      - image: cimg/node:18.20
+    resource_class: small
+
+############################################################################
+
+# Cache node_modules
+restore-dependencies-cache: &restore-dependencies-cache
+  restore_cache:
+    keys:
+      - v1-dependencies-{{ .Branch }}-{{ checksum "package.json" }}
+      # fallback to using the cache from the same branch
+      - v1-dependencies-{{ .Branch }}-
+      # fallback to using the latest cache if no exact match is found
+      - v1-dependencies-
+
+save-dependencies-cache: &save-dependencies-cache
+  save_cache:
+    paths:
+      - node_modules
+    key: v1-dependencies-{{ .Branch }}-{{ checksum "package.json" }}
+
+persist-workspace: &persist-workspace
+  persist_to_workspace:
+    root: ~/
+    paths:
+      - zm-x-ui
+
+attach-workspace: &attach-workspace
+  attach_workspace:
+    at: ~/
+
+feature-branch: &feature-branch
+  filters:
+    branches:
+      ignore:
+        - /(custom_)?release\/.*/
+
+############################################################################
+# JOBS
+############################################################################
+
+jobs:
+
+  build:
+    executor: node-executor
+    steps:
+      - checkout
+
+      - *restore-dependencies-cache
+
+      - run:
+          name: Install dependencies
+          command: npm install
+
+      - *save-dependencies-cache
+
+      - run:
+          name: Build project
+          command: npm run build
+
+      - *persist-workspace
+
+
+  publish:
+    executor: node-executor
+    steps:
+      - *attach-workspace
+
+      - run:
+          name: Setup npm authentication
+          command: |
+            echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
+
+      - run:
+          name: Set dynamic prerelease version (no git tag)
+          command: |
+            SAFE_BRANCH=$(echo "$CIRCLE_BRANCH" | sed 's/\//-/g')
+            npm version prerelease \
+              --preid=${SAFE_BRANCH} \
+              --no-git-tag-version
+
+      - run:
+          name: Publish to npm
+          command: |
+            SAFE_BRANCH=$(echo "$CIRCLE_BRANCH" | sed 's/\//-/g')
+            if [ "$SAFE_BRANCH" = "master" ]; then
+              npm publish --access public --tag beta
+            else
+              npm publish --access public --tag $SAFE_BRANCH
+            fi
+
+############################################################################
+# WORKFLOWS
+############################################################################
+
+workflows:
+  version: 2
+
+  build-and-publish:
+    jobs:
+      - build:
+          <<: *feature-branch
+
+      - publish:
+          <<: *feature-branch
+          requires:
+            - build

package/css-variables.css

@@ -28,6 +28,8 @@
 	--black-bg: #000000;
 	--white-bg: #ffffff;
 
+	--surface-color: #f5f8fc;
+	--surface-bg: light-dark(var(--surface-color), var(--gray-lighter));
 	--gray-placeholder: var(--gray-dark);
 	--warm-gray: var(--gray-light);
 	--off-white: #fafafa;
@@ -46,6 +48,7 @@
 	--text-color-white: #ffffff;
 	--text-color-black: #000000;
 	--dialog-title-fg: var(--gray-base);
+	--dialog-bg: light-dark(#ffffff, #1A1A1A);
 	--background-gray: var(--gray-lightest);
 	--link-color: light-dark(var(--brand-primary-600), var(--brand-primary-400));
 	--link-hover-color: light-dark(var(--brand-primary-800), var(--brand-primary-200));
@@ -54,16 +57,16 @@
 	--item-selected-bg: var(--brand-primary-100);
 	--border-color: light-dark(var(--gray-lighter), var(--gray));
 	--hr-border: light-dark(var(--gray-lighter), var(--gray));
-	--input-border-color: light-dark(var(--gray), var(--gray));
+	--input-border-color: var(--gray-light);
 	--placeholder-color: var(--gray-dark);
 	--app-menu-active-color: light-dark(var(--text-color-white), var(--brand-primary-500));
 	--app-menu-active-background-color: light-dark(var(--brand-primary-500), var(--text-color-white));
 	--list-active-bg: light-dark(var(--brand-primary-50), var(--brand-primary-900));
 	--list-hover-bg: var(--gray-lightest);
 	--folder-item-hover-bg: var(--list-hover-bg);
-	--sidebar-bg-color: var(--gray-lightest);
-	--sidebar-header-bg-color: var(--gray-lightest);
-	--sidebar-shaded-color: var(--gray-lighter);
+	--sidebar-bg-color: var(--body-bg);
+	--sidebar-header-bg-color: var(--body-bg);
+	--sidebar-shaded-color: var(--border-color);
 	--rightbar-bg-color: var(--gray-lightest);
 	--read-pane-toolbar-color: var(--gray-lightest);
 	--read-pane-bg-color: var(--gray-lightest);
@@ -92,6 +95,7 @@
 	--font-family-primary: inherit;
 	--font-family-secondary: inherit;
 	--font-family-plainText: monospace;
+	--font-size-folder-list: 13px;
 	--font-size-base: 14px;
 	--font-size-med: calc(var(--font-size-base) * 1.15); /*~16px*/
 	--font-size-large: calc(var(--font-size-base) * 1.25); /*~18px*/
@@ -115,6 +119,12 @@
 	--spacing-md: calc(var(--spacing-base) * 2);
 	--spacing-lg: calc(var(--spacing-base) * 3);
 	--spacing-xl: calc(var(--spacing-base) * 4);
+	--radius-base: 4px;
+	--radius-xs: var(--radius-base);
+	--radius-sm: calc(var(--radius-base) * 2);
+	--radius-md: calc(var(--radius-base) * 3);
+	--radius-lg: calc(var(--radius-base) * 4);
+	--radius-xl: calc(var(--radius-base) * 5);
 	--icon-size-xs: 12px;
 	--icon-size-sm: 16px;
 	--icon-size-md: 24px;
@@ -132,9 +142,39 @@
 	--row-height-wide: 27px;
 	--tag-secondary-font-color: #ffffff;
 	--popover-row-border-color: var(--border-color);
-	--warning-banner-bg: light-dark(var(--brand-warning-300), var(--brand-warning-500));
+	--warning-banner-bg: light-dark(var(--brand-warning-50), var(--brand-warning-200));
 	--drop-zone-bg: light-dark(rgba(215, 243, 255, 0.9), rgba(0, 55, 79, 0.9));
 	--drop-zone-border-color: light-dark(rgba(0, 118, 168, 0.9), rgba(128, 187, 212, 0.9));
 	--drop-zone-text-color: light-dark(#00648f, #80bbd4);
 	--secondary-scrollbar: light-dark(#d1d1d1, #4d4d4d) light-dark(#d1d1d1, #4D4D4D);
-}
+	--tag-color-blue: #3C82F6;
+	--tag-color-cyan: #008080;
+	--tag-color-green: #248723;
+	--tag-color-purple: #6F3C96;
+	--tag-color-red: #DC2625;
+	--tag-color-yellow: #FBAF19;
+	--tag-color-pink: #DD0B73;
+	--tag-color-gray: #758083;
+	--tag-color-orange: #FF7015;
+	--calendar-color-blue: #d2def8;
+	--calendar-color-cyan: #d2eff3;
+	--calendar-color-green: #d6f0cf;
+	--calendar-color-purple: #e4d8ee;
+	--calendar-color-red: #fcc3be;
+	--calendar-color-yellow: #fdf8b1;
+	--calendar-color-pink: #ffd7df;
+	--calendar-color-gray: #e5e5e5;
+	--calendar-color-orange: #fcdbb3;
+	--avatar-color-navy: #1E3A8A;
+	--avatar-color-violet: #5B21B6;
+	--avatar-color-teal: #0F766E;
+	--avatar-color-forest: #166534;
+	--avatar-color-emerald: #065F46;
+	--avatar-color-rust: #C2410C;
+	--avatar-color-amber: #B45309;
+	--avatar-color-crimson: #991B1B;
+	--avatar-color-rose: #9F1239;
+	--avatar-color-indigo: #3730A3;
+	--avatar-color-coffee: #4E342E;
+	--avatar-color-slate: #334155;
+}

package/helpers.less

@@ -140,8 +140,7 @@
 
 .listItem() {
 	display: block;
-	height: 32px;
-	padding: 7px 32px;
+	padding: var(--spacing-xs);
 	color: var(--text-color);
 	border: none;
 	text-decoration: none;
@@ -153,22 +152,6 @@
 		color: var(--gray-darker);
 		text-decoration: none;
 	}
-
-	&[data-depth="2"] {
-		padding-left: calc(32px * 1.5);
-	}
-	&[data-depth="3"] {
-		padding-left: calc(32px * 2);
-	}
-	&[data-depth="4"] {
-		padding-left: calc(32px * 2.5);
-	}
-	&[data-depth="5"] {
-		padding-left: calc(32px * 3);
-	}
-	&[data-depth="6"] {
-		padding-left: calc(32px * 3.5);
-	}
 }
 
 .toolbarHeight() {
@@ -238,4 +221,10 @@
 	color: light-dark(var(--brand-danger-500), var(--text-color-white));
 	background-color: light-dark(var(--brand-danger-50), var(--brand-danger-900));
 	font-size: var(--font-size-base);
+}
+
+.popover() {
+	background: var(--dialog-bg);
+	border-radius: var(--radius-sm);
+	box-shadow: 0 5px 15px light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
 }

package/icon-variables.css

@@ -1,5 +1,33 @@
 /* THIS FILE IS AUTOGENERATED - DO NOT MODIFY */ 
 :root {
+	--zimbra-icon-translate: "\e9c8";
+	--zimbra-icon-warning-o: "\e9c7";
+	--zimbra-icon-account-external: "\e9c6";
+	--zimbra-icon-fit-to-screen: "\e9c1";
+	--zimbra-icon-date-picker: "\e9c3";
+	--zimbra-icon-filter: "\e9c4";
+	--zimbra-icon-search-tips: "\e9c5";
+	--zimbra-icon-folder-outbox: "\e9c0";
+	--zimbra-icon-calendar-filled: "\e9c2";
+	--zimbra-icon-contact-list: "\e9bf";
+	--zimbra-icon-search-o: "\e9be";
+	--zimbra-icon-folder-contacts: "\e9b9";
+	--zimbra-icon-folder-briefcase: "\e9ba";
+	--zimbra-icon-file-shared: "\e9bb";
+	--zimbra-icon-distribution-list: "\e9bc";
+	--zimbra-icon-global-address-list: "\e9bd";
+	--zimbra-icon-save: "\e9b8";
+	--zimbra-icon-folder-shared: "\e9b6";
+	--zimbra-icon-folder-search: "\e9b7";
+	--zimbra-icon-star-o: "\e9b5";
+	--zimbra-icon-folder-trash: "\e9af";
+	--zimbra-icon-folder-archive: "\e9b2";
+	--zimbra-icon-folder-drafts: "\e9b3";
+	--zimbra-icon-folder-junk: "\e9b4";
+	--zimbra-icon-folder-inbox: "\e9ae";
+	--zimbra-icon-folder-sent: "\e9b0";
+	--zimbra-icon-cog-o: "\e9ad";
+	--zimbra-icon-folder-o: "\e9b1";
 	--zimbra-icon-mail-draft-o: "\e9ac";
 	--zimbra-icon-mail-unread-o: "\e9a2";
 	--zimbra-icon-mail-reply-o: "\e9a3";
@@ -77,7 +105,6 @@
 	--zimbra-icon-mail-reply-all: "\e93c";
 	--zimbra-icon-mail-reply: "\e93d";
 	--zimbra-icon-align-right: "\e93e";
-	--zimbra-icon-search: "\e93f";
 	--zimbra-icon-cog: "\e940";
 	--zimbra-icon-music: "\e941";
 	--zimbra-icon-shield: "\e942";
@@ -121,6 +148,7 @@
 	--zimbra-icon-bell-slash: "\e968";
 	--zimbra-icon-warning: "\e969";
 	--zimbra-icon-encrypted: "\e96a";
+	--zimbra-icon-search: "\e93f";
 	--zimbra-icon-search-plus: "\e96b";
 	--zimbra-icon-search-minus: "\e96c";
 	--zimbra-icon-rotate_right: "\e96d";