Merge pull request #805 from MyPureCloud/feature/COMUI-3306_advanced_…

…tabs_tokens feat(tokens): Added missing advanced tabs tokens
MyPureCloud · Dec 20, 2024 · d510d28 · d510d28
2 parents d0c2858 + b871724
commit d510d28
Show file tree

Hide file tree

Showing 12 changed files with 550 additions and 95 deletions.
diff --git a/.../src/components/stable/gux-tabs-advanced/gux-tab-advanced-list/gux-tab-advanced-list.scss b/.../src/components/stable/gux-tabs-advanced/gux-tab-advanced-list/gux-tab-advanced-list.scss
@@ -9,7 +9,6 @@
   align-items: center;
   justify-content: flex-start;
   inline-size: 100%;
-  margin-block-end: 16px; //TODO https://inindca.atlassian.net/browse/COMUI-2444
   background-color: var(--gse-ui-advancedTabs-set-backgroundColor);
 
   .gux-scrollable-section {
@@ -21,7 +20,9 @@
     inline-size: 100%;
     overflow-x: auto;
     scrollbar-width: none;
-    border-block-end: 1px solid var(--gse-ui-advancedTabs-divider-dividerColor); //TODO https://inindca.atlassian.net/browse/COMUI-2444
+    border-block-end: var(--gse-ui-advancedTabs-item-divider-border-width)
+      var(--gse-ui-advancedTabs-item-divider-border-style)
+      var(--gse-ui-advancedTabs-item-divider-border-color);
     scroll-behavior: smooth;
 
     &::-webkit-scrollbar {

diff --git a/...components/src/components/stable/gux-tabs-advanced/gux-tab-advanced/gux-tab-advanced.scss b/...components/src/components/stable/gux-tabs-advanced/gux-tab-advanced/gux-tab-advanced.scss
@@ -1,42 +1,3 @@
-// --gse-ui-advancedTabs-divider-dividerColor: #c6c8ce;
-// --gse-ui-advancedTabs-item-padding: 11px 12px 10px;
-// --gse-ui-advancedTabs-item-gap: 8px;
-// --gse-ui-advancedTabs-item-focus-borderRadius: 8px;
-// --gse-ui-advancedTabs-item-focus-border-color: #7b88f7;
-// --gse-ui-advancedTabs-item-focus-border-width: 3px;
-// --gse-ui-advancedTabs-item-focus-border-style: solid;
-// --gse-ui-advancedTabs-item-backgroundColor: #ffffff;
-// --gse-ui-advancedTabs-item-borderRadius: 4px 4px 0 0;
-// --gse-ui-advancedTabs-item-height: 48px;
-// --gse-ui-advancedTabs-item-width: 151px;
-// --gse-ui-advancedTabs-item-focusItem-height: 53px;
-// --gse-ui-advancedTabs-item-focusItem-width: 126px;
-// --gse-ui-advancedTabs-item-divider-bottom-height: 1px;
-// --gse-ui-advancedTabs-item-divider-right-height: 32px;
-// --gse-ui-advancedTabs-item-divider-right-width: 1px;
-// --gse-ui-advancedTabs-item-text-color: #1b2c48;
-// --gse-ui-advancedTabs-item-text-height: 9px;
-// --gse-ui-advancedTabs-item-indicator-hoverColor: #4856cb;
-// --gse-ui-advancedTabs-item-indicator-activeColor: #3742a2;
-// --gse-ui-advancedTabs-item-indicator-height: 2px;
-// --gse-ui-advancedTabs-item-icon-iconColor: #1b2c48;
-// --gse-ui-advancedTabs-item-icon-size: 16px;
-// --gse-ui-advancedTabs-item-menuButton-gap: 4px;
-// --gse-ui-advancedTabs-item-menuButton-height: 45px;
-// --gse-ui-advancedTabs-item-menuButton-width: 32px;
-// --gse-ui-advancedTabs-item-menuButton-defaultColor: #626e84;
-// --gse-ui-advancedTabs-item-menuButton-activeColor: #252e78;
-// --gse-ui-advancedTabs-item-menuButton-focus-height: 53px;
-// --gse-ui-advancedTabs-item-menuButton-focus-width: 40px;
-// --gse-ui-advancedTabs-item-itemText-fontFamily: Noto Sans;
-// --gse-ui-advancedTabs-item-itemText-lineHeight: 18px;
-// --gse-ui-advancedTabs-item-itemText-fontSize: 12px;
-// --gse-ui-advancedTabs-item-itemText-fontWeight: 400;
-// --gse-ui-advancedTabs-button-add-height: 45px;
-// --gse-ui-advancedTabs-button-arrow-height: 48px;
-// --gse-ui-advancedTabs-set-backgroundColor: #f3f5fb;
-// --gse-ui-advancedTabs-set-standard-width: 920px;
-
 @use '~genesys-spark/dist/scss/focus.scss';
 
 gux-tab-advanced {
@@ -116,23 +77,15 @@ gux-tab-advanced {
       );
 
       &.gux-disabled {
-        border-block-end-color: color-mix(
-          in srgb,
-          var(--gse-ui-advancedTabs-item-indicator-activeColor) 50%,
-          white
-        );
+        opacity: var(--gse-ui-advancedTabs-item-disabled-opacity);
       }
     }
 
     &.gux-disabled {
       .gux-buttons {
         .gux-tab-button {
           .gux-tab-button-text {
-            color: color-mix(
-              in srgb,
-              var(--gse-ui-advancedTabs-item-text-color) 50%,
-              white
-            );
+            opacity: var(--gse-ui-advancedTabs-item-disabled-opacity);
           }
         }
       }

diff --git a/packages/genesys-spark-tokens/data/$themes.json b/packages/genesys-spark-tokens/data/$themes.json
diff --git a/packages/genesys-spark-tokens/data/ui/navigation.json b/packages/genesys-spark-tokens/data/ui/navigation.json
@@ -197,10 +197,6 @@
             "style": "solid"
           },
           "type": "border"
-        },
-        "border-copy": {
-          "value": "4px",
-          "type": "border"
         }
       },
       "background_color": {
@@ -245,6 +241,14 @@
             "value": "{divider.width}",
             "type": "sizing"
           }
+        },
+        "border": {
+          "value": {
+            "color": "{advanced_tabs.divider.divider_color}",
+            "width": "{container.divider.border_width}",
+            "style": "solid"
+          },
+          "type": "border"
         }
       },
       "text": {
@@ -316,6 +320,12 @@
       "item_text": {
         "value": "{body.sm.regular}",
         "type": "typography"
+      },
+      "disabled": {
+        "opacity": {
+          "value": "{tabs.item.disable_opacity}",
+          "type": "opacity"
+        }
       }
     },
     "button": {

diff --git a/packages/genesys-spark-tokens/reports/unused-defined-ui-tokens.json b/packages/genesys-spark-tokens/reports/unused-defined-ui-tokens.json
@@ -58,7 +58,28 @@
   "--gse-ui-actionButton-tertiary-divider-color",
   "--gse-ui-actionButton-tertiary-divider-style",
   "--gse-ui-actionButton-tertiary-divider-width",
-  "--gse-ui-advancedTabs-item-focus-borderCopy",
+  "--gse-ui-advancedTabs-button-add-height",
+  "--gse-ui-advancedTabs-button-arrow-height",
+  "--gse-ui-advancedTabs-item-borderRadius",
+  "--gse-ui-advancedTabs-item-divider-bottom-height",
+  "--gse-ui-advancedTabs-item-focus-border-color",
+  "--gse-ui-advancedTabs-item-focus-border-style",
+  "--gse-ui-advancedTabs-item-focus-border-width",
+  "--gse-ui-advancedTabs-item-focusItem-height",
+  "--gse-ui-advancedTabs-item-focusItem-width",
+  "--gse-ui-advancedTabs-item-height",
+  "--gse-ui-advancedTabs-item-icon-iconColor",
+  "--gse-ui-advancedTabs-item-icon-size",
+  "--gse-ui-advancedTabs-item-indicator-hoverColor",
+  "--gse-ui-advancedTabs-item-menuButton-activeColor",
+  "--gse-ui-advancedTabs-item-menuButton-defaultColor",
+  "--gse-ui-advancedTabs-item-menuButton-focus-height",
+  "--gse-ui-advancedTabs-item-menuButton-focus-width",
+  "--gse-ui-advancedTabs-item-menuButton-gap",
+  "--gse-ui-advancedTabs-item-menuButton-height",
+  "--gse-ui-advancedTabs-item-menuButton-width",
+  "--gse-ui-advancedTabs-item-text-height",
+  "--gse-ui-advancedTabs-set-standard-width",
   "--gse-ui-alert-emphasisText-fontFamily",
   "--gse-ui-alert-emphasisText-fontSize",
   "--gse-ui-alert-emphasisText-fontWeight",
@@ -160,11 +181,7 @@
   "--gse-ui-dataTableItems-cell-multiselect-padding",
   "--gse-ui-dataTableItems-cell-tablePagination-width",
   "--gse-ui-dataTableItems-editColumn-editColumnContent-gap",
-  "--gse-ui-dataTableItems-editColumn-editColumnItem-active-foregroundColor",
-  "--gse-ui-dataTableItems-editColumn-editColumnItem-drop-borderColor",
-  "--gse-ui-dataTableItems-editColumn-editColumnItem-foregroundColor",
   "--gse-ui-dataTableItems-editColumn-editColumnItem-height",
-  "--gse-ui-dataTableItems-editColumn-editColumnItem-hover-foregroundColor",
   "--gse-ui-dataTableItems-header-compact-width",
   "--gse-ui-dataTableItems-header-default-width",
   "--gse-ui-dataTableItems-header-fixedBackgroundColor",

diff --git a/packages/genesys-spark-tokens/reports/used-tokens.json b/packages/genesys-spark-tokens/reports/used-tokens.json
@@ -3,6 +3,7 @@
   "--gse-core-fontWeight-regular",
   "--gse-core-fontWeight-semiBold",
   "--gse-semantic-background-container-elevated-default",
+  "--gse-semantic-background-container-page-tonalSubtle",
   "--gse-semantic-body-lg-bold-fontWeight",
   "--gse-semantic-body-lg-regular-fontFamily",
   "--gse-semantic-body-lg-regular-fontSize",
@@ -30,10 +31,8 @@
   "--gse-semantic-focusOutline-sm-borderRadius",
   "--gse-semantic-focusOutline-sm-borderWidth",
   "--gse-semantic-foreground-container-highEmphasis",
+  "--gse-semantic-foreground-container-lowEmphasis",
   "--gse-semantic-foreground-container-midEmphasis",
-  "--gse-semantic-foreground-formControl-clickInput-active",
-  "--gse-semantic-foreground-formControl-clickInput-enabled",
-  "--gse-semantic-foreground-formControl-clickInput-selected",
   "--gse-semantic-formControl-fieldset-header-gap",
   "--gse-semantic-formControl-fieldset-header-paddingBottom",
   "--gse-semantic-formControl-fieldset-paddingBottom",
@@ -114,44 +113,26 @@
   "--gse-ui-accordion-wrapper-dividerBorder-style",
   "--gse-ui-accordion-wrapper-dividerBorder-width",
   "--gse-ui-actionButton-borderRadius",
-  "--gse-ui-advancedTabs-button-add-height",
-  "--gse-ui-advancedTabs-button-arrow-height",
   "--gse-ui-advancedTabs-divider-dividerColor",
   "--gse-ui-advancedTabs-item-backgroundColor",
-  "--gse-ui-advancedTabs-item-borderRadius",
-  "--gse-ui-advancedTabs-item-divider-bottom-height",
+  "--gse-ui-advancedTabs-item-disabled-opacity",
+  "--gse-ui-advancedTabs-item-divider-border-color",
+  "--gse-ui-advancedTabs-item-divider-border-style",
+  "--gse-ui-advancedTabs-item-divider-border-width",
   "--gse-ui-advancedTabs-item-divider-right-height",
   "--gse-ui-advancedTabs-item-divider-right-width",
-  "--gse-ui-advancedTabs-item-focus-border-color",
-  "--gse-ui-advancedTabs-item-focus-border-style",
-  "--gse-ui-advancedTabs-item-focus-border-width",
   "--gse-ui-advancedTabs-item-focus-borderRadius",
-  "--gse-ui-advancedTabs-item-focusItem-height",
-  "--gse-ui-advancedTabs-item-focusItem-width",
   "--gse-ui-advancedTabs-item-gap",
-  "--gse-ui-advancedTabs-item-height",
-  "--gse-ui-advancedTabs-item-icon-iconColor",
-  "--gse-ui-advancedTabs-item-icon-size",
   "--gse-ui-advancedTabs-item-indicator-activeColor",
   "--gse-ui-advancedTabs-item-indicator-height",
-  "--gse-ui-advancedTabs-item-indicator-hoverColor",
   "--gse-ui-advancedTabs-item-itemText-fontFamily",
   "--gse-ui-advancedTabs-item-itemText-fontSize",
   "--gse-ui-advancedTabs-item-itemText-fontWeight",
   "--gse-ui-advancedTabs-item-itemText-lineHeight",
-  "--gse-ui-advancedTabs-item-menuButton-activeColor",
-  "--gse-ui-advancedTabs-item-menuButton-defaultColor",
-  "--gse-ui-advancedTabs-item-menuButton-focus-height",
-  "--gse-ui-advancedTabs-item-menuButton-focus-width",
-  "--gse-ui-advancedTabs-item-menuButton-gap",
-  "--gse-ui-advancedTabs-item-menuButton-height",
-  "--gse-ui-advancedTabs-item-menuButton-width",
   "--gse-ui-advancedTabs-item-padding",
   "--gse-ui-advancedTabs-item-text-color",
-  "--gse-ui-advancedTabs-item-text-height",
   "--gse-ui-advancedTabs-item-width",
   "--gse-ui-advancedTabs-set-backgroundColor",
-  "--gse-ui-advancedTabs-set-standard-width",
   "--gse-ui-alert-borderRadius",
   "--gse-ui-alert-error-backgroundColor",
   "--gse-ui-alert-error-border-color",
@@ -483,7 +464,11 @@
   "--gse-ui-dataTableItems-divider-style",
   "--gse-ui-dataTableItems-divider-width",
   "--gse-ui-dataTableItems-editColumn-editColumnContent-padding",
+  "--gse-ui-dataTableItems-editColumn-editColumnItem-active-foregroundColor",
+  "--gse-ui-dataTableItems-editColumn-editColumnItem-drop-borderColor",
+  "--gse-ui-dataTableItems-editColumn-editColumnItem-foregroundColor",
   "--gse-ui-dataTableItems-editColumn-editColumnItem-gap",
+  "--gse-ui-dataTableItems-editColumn-editColumnItem-hover-foregroundColor",
   "--gse-ui-dataTableItems-header-compact-height",
   "--gse-ui-dataTableItems-header-default-height",
   "--gse-ui-dataTableItems-header-defaultBackgroundColor",

diff --git a/packages/genesys-spark-tokens/snapshot/json/gse-ui-flare-dark.json b/packages/genesys-spark-tokens/snapshot/json/gse-ui-flare-dark.json
@@ -2593,8 +2593,7 @@
           "color": "#5476d5",
           "width": "2px",
           "style": "solid"
-        },
-        "border-copy": "4px"
+        }
       },
       "background_color": "#1e1e21",
       "border_radius": "4px 4px 0 0",
@@ -2611,6 +2610,11 @@
         "right": {
           "height": "32px",
           "width": "1px"
+        },
+        "border": {
+          "color": "#4f5157",
+          "width": "1px",
+          "style": "solid"
         }
       },
       "text": {
@@ -2642,6 +2646,9 @@
         "fontWeight": "400",
         "fontSize": "12px",
         "lineHeight": "18px"
+      },
+      "disabled": {
+        "opacity": ".5"
       }
     },
     "button": {

diff --git a/packages/genesys-spark-tokens/snapshot/json/gse-ui-flare-light.json b/packages/genesys-spark-tokens/snapshot/json/gse-ui-flare-light.json
@@ -2593,8 +2593,7 @@
           "color": "#5476d5",
           "width": "2px",
           "style": "solid"
-        },
-        "border-copy": "4px"
+        }
       },
       "background_color": "#ffffff",
       "border_radius": "4px 4px 0 0",
@@ -2611,6 +2610,11 @@
         "right": {
           "height": "32px",
           "width": "1px"
+        },
+        "border": {
+          "color": "#c1c6d4",
+          "width": "1px",
+          "style": "solid"
         }
       },
       "text": {
@@ -2642,6 +2646,9 @@
         "fontWeight": "400",
         "fontSize": "12px",
         "lineHeight": "18px"
+      },
+      "disabled": {
+        "opacity": ".5"
       }
     },
     "button": {

diff --git a/packages/genesys-spark-tokens/snapshot/json/gse-ui-legacy-light.json b/packages/genesys-spark-tokens/snapshot/json/gse-ui-legacy-light.json
@@ -2593,8 +2593,7 @@
           "color": "#aac9ff",
           "width": "2px",
           "style": "solid"
-        },
-        "border-copy": "4px"
+        }
       },
       "background_color": "#ffffff",
       "border_radius": "4px 4px 0 0",
@@ -2611,6 +2610,11 @@
         "right": {
           "height": "32px",
           "width": "1px"
+        },
+        "border": {
+          "color": "#b4bccb",
+          "width": "1px",
+          "style": "solid"
         }
       },
       "text": {
@@ -2642,6 +2646,9 @@
         "fontWeight": "400",
         "fontSize": "12px",
         "lineHeight": "18px"
+      },
+      "disabled": {
+        "opacity": ".5"
       }
     },
     "button": {

diff --git a/packages/genesys-spark-tokens/snapshot/scss/gse-ui-flare-dark.scss b/packages/genesys-spark-tokens/snapshot/scss/gse-ui-flare-dark.scss
@@ -1261,7 +1261,6 @@
   --gse-ui-advancedTabs-item-focus-border-color: #5476d5;
   --gse-ui-advancedTabs-item-focus-border-width: 2px;
   --gse-ui-advancedTabs-item-focus-border-style: solid;
-  --gse-ui-advancedTabs-item-focus-borderCopy: 4px;
   --gse-ui-advancedTabs-item-backgroundColor: #1e1e21;
   --gse-ui-advancedTabs-item-borderRadius: 4px 4px 0 0;
   --gse-ui-advancedTabs-item-height: 48px;
@@ -1271,6 +1270,9 @@
   --gse-ui-advancedTabs-item-divider-bottom-height: 1px;
   --gse-ui-advancedTabs-item-divider-right-height: 32px;
   --gse-ui-advancedTabs-item-divider-right-width: 1px;
+  --gse-ui-advancedTabs-item-divider-border-color: #4f5157;
+  --gse-ui-advancedTabs-item-divider-border-width: 1px;
+  --gse-ui-advancedTabs-item-divider-border-style: solid;
   --gse-ui-advancedTabs-item-text-color: #ffffff;
   --gse-ui-advancedTabs-item-text-height: 9px;
   --gse-ui-advancedTabs-item-indicator-hoverColor: #2143a2;
@@ -1289,6 +1291,7 @@
   --gse-ui-advancedTabs-item-itemText-fontWeight: 400;
   --gse-ui-advancedTabs-item-itemText-fontSize: 12px;
   --gse-ui-advancedTabs-item-itemText-lineHeight: 18px;
+  --gse-ui-advancedTabs-item-disabled-opacity: 0.5;
   --gse-ui-advancedTabs-button-add-height: 45px;
   --gse-ui-advancedTabs-button-arrow-height: 48px;
   --gse-ui-advancedTabs-set-backgroundColor: #2a2a2e;

diff --git a/packages/genesys-spark-tokens/snapshot/scss/gse-ui-flare-light.scss b/packages/genesys-spark-tokens/snapshot/scss/gse-ui-flare-light.scss
@@ -1261,7 +1261,6 @@
   --gse-ui-advancedTabs-item-focus-border-color: #5476d5;
   --gse-ui-advancedTabs-item-focus-border-width: 2px;
   --gse-ui-advancedTabs-item-focus-border-style: solid;
-  --gse-ui-advancedTabs-item-focus-borderCopy: 4px;
   --gse-ui-advancedTabs-item-backgroundColor: #ffffff;
   --gse-ui-advancedTabs-item-borderRadius: 4px 4px 0 0;
   --gse-ui-advancedTabs-item-height: 48px;
@@ -1271,6 +1270,9 @@
   --gse-ui-advancedTabs-item-divider-bottom-height: 1px;
   --gse-ui-advancedTabs-item-divider-right-height: 32px;
   --gse-ui-advancedTabs-item-divider-right-width: 1px;
+  --gse-ui-advancedTabs-item-divider-border-color: #c1c6d4;
+  --gse-ui-advancedTabs-item-divider-border-width: 1px;
+  --gse-ui-advancedTabs-item-divider-border-style: solid;
   --gse-ui-advancedTabs-item-text-color: #2a2a2e;
   --gse-ui-advancedTabs-item-text-height: 9px;
   --gse-ui-advancedTabs-item-indicator-hoverColor: #2143a2;
@@ -1289,6 +1291,7 @@
   --gse-ui-advancedTabs-item-itemText-fontWeight: 400;
   --gse-ui-advancedTabs-item-itemText-fontSize: 12px;
   --gse-ui-advancedTabs-item-itemText-lineHeight: 18px;
+  --gse-ui-advancedTabs-item-disabled-opacity: 0.5;
   --gse-ui-advancedTabs-button-add-height: 45px;
   --gse-ui-advancedTabs-button-arrow-height: 48px;
   --gse-ui-advancedTabs-set-backgroundColor: #f5f6fa;