Merge branch '242-spring-23' into WCAG-2.1-path-color-changes

.circleci/config.yml

@@ -315,7 +315,8 @@ jobs:
       - run:
           name: 'Do build-dist'
           command: 'npm run build-dist'
-
+          environment:
+            NODE_OPTIONS: --openssl-legacy-provider
       ####
       - run:
           name: Compress .dist
@@ -390,6 +391,8 @@ jobs:
       - run:
           name: Build static Storybook
           command: 'npm run storybook:build'
+          environment:
+            NODE_OPTIONS: --openssl-legacy-provider
 
       - run:
           name: Archive static Storybook
@@ -492,6 +495,7 @@ jobs:
           command: 'npm run build'
           environment:
             SLDS__FRAMEWORK__PATH: .slds/.dist/
+            NODE_OPTIONS: --openssl-legacy-provider
 
       - run:
           name: 'Generate site tarball'

RELEASENOTES.general.md

@@ -3,6 +3,61 @@
 
 ## 2.20.0 - Upcoming
 
+- Updated constant colors codes with global slds hooks
+- Updated background colors for Standard and Actions icons
+- Added two new dependencies for SLDS global styling hooks generation,
+  - `@salesforce-ux/sds-styling-aliases` with version `0.2.4`
+  - `@salesforce-ux/sds-styling-hooks` with version `1.1.0-alpha.2`
+- Updated `gulp` file to include SLDS global hooks generation as part of build and dist jobs
+- Updated design tokens in every component and utility with SLDS global styling hooks (except Brand-related tokens)
+- Updated icons to `v10.5.3`
+  - Standard Set:
+      - Added `asset_hierarchy`
+      - Added `budget_category_value`
+      - Added `budget_period`
+      - Updated `crypto_category_wallet_group`
+      - Added `crypto_transaction_envelope_change_snapshot`
+      - Added `data_transforms`
+      - Added `funding_award_adjustment`
+      - Added `funding_requirement`
+      - Added `promotion_tiers`
+      - Added `slack_conversations`
+      - Added `your_account`
+
+  - Utility Set:
+    - Added `asset_object`
+    - Added `budget_category_value`
+    - Added `budget_period`
+    - Added `contact`
+    - Added `funding_award_adjustment`
+    - Added `funding_requirement`
+    - Added `http`
+    - Added `knowledge_smart_link`
+    - Added `lead`
+    - Added `maintenance_plan`
+    - Added `no_return`
+    - Added `opportunity`
+    - Added `orders`
+    - Added `product`
+    - Added `proposition`
+    - Added `queue`
+    - Added `send_log`
+    - Added `service_contract`
+    - Added `slack_conversations`
+
+- Updated BG color to below Standard Icons
+  - `connect_wallet`
+  - `crypto_product_category_wallet_role`
+  - `crypto_product`
+  - `crypto_transaction_envelope_change_log`
+  - `crypto_transaction_envelope`
+  - `crypto_transaction`
+  - `crypto_wallet_group_item`
+  - `crypto_wallet_group`
+  - `crypto_wallet`
+  - `nft_settings`
+  - `nft_studio`
+
 ## 2.19.0 - August 11, 2022
 
 - Updated icons to `v10.4.0`
@@ -32,9 +87,11 @@
     - Added `tax_rate`
     - Added `tax_treatment`
     - Added `water`
+
   - Action Set:
     - Added `action_scan_enabled`
     - Added `action_scan_disabled`
+
   - Utility Set:
     - Added `captions`
     - Added `contract_line_outcome`

RELEASENOTES.md

@@ -3,13 +3,58 @@
 
 ## Release 2.20.0 - Upcoming
 
-- Updated constanst colors codes with global slds hooks
+- Updated constant colors codes with global slds hooks
 - Updated background colors for Standard and Actions icons
 - Added two new dependencies for SLDS global styling hooks generation,
   - `@salesforce-ux/sds-styling-aliases` with version `0.2.4`
   - `@salesforce-ux/sds-styling-hooks` with version `1.1.0-alpha.2`
-- Updated `gulpfile` to include SLDS global hooks generation as part of build and dist jobs
-- Updated design tokens in every component and utility with SLDS global styling hooks (except Brand related tokens)
+- Updated `gulp` file to include SLDS global hooks generation as part of build and dist jobs
+- Updated design tokens in every component and utility with SLDS global styling hooks (except Brand-related tokens)
+- Updated icons to `v10.5.3`
+  - Standard Set:
+      - Added `asset_hierarchy`
+      - Added `budget_category_value`
+      - Added `budget_period`
+      - Updated `crypto_category_wallet_group`
+      - Added `crypto_transaction_envelope_change_snapshot`
+      - Added `data_transforms`
+      - Added `funding_award_adjustment`
+      - Added `funding_requirement`
+      - Added `promotion_tiers`
+      - Added `slack_conversations`
+      - Added `your_account`
+  - Utility Set:
+    - Added `asset_object`
+    - Added `budget_category_value`
+    - Added `budget_period`
+    - Added `contact`
+    - Added `funding_award_adjustment`
+    - Added `funding_requirement`
+    - Added `http`
+    - Added `knowledge_smart_link`
+    - Added `lead`
+    - Added `maintenance_plan`
+    - Added `no_return`
+    - Added `opportunity`
+    - Added `orders`
+    - Added `product`
+    - Added `proposition`
+    - Added `queue`
+    - Added `send_log`
+    - Added `service_contract`
+    - Added `slack_conversations`
+- Updated BG color to below Standard Icons
+  - `connect_wallet`
+  - `crypto_product_category_wallet_role`
+  - `crypto_product`
+  - `crypto_transaction_envelope_change_log`
+  - `crypto_transaction_envelope`
+  - `crypto_transaction`
+  - `crypto_wallet_group_item`
+  - `crypto_wallet_group`
+  - `crypto_wallet`
+  - `nft_settings`
+  - `nft_studio`
 
 ## Release 2.19.0 - August 11, 2022
 

design-tokens/bg-standard.yml

@@ -930,37 +930,35 @@ props:
   AI_ACCELERATOR_CARD:
     value: '#107CAD'
   CONNECT_WALLET:
-    value: '#B60554'
+    value: '#1B96FF'
   CONTRACT_LINE_OUTCOME:
     value: '#22683E'
   CONTRACT_LINE_OUTCOME_DATA:
     value: '#22683E'
   CRYPTO_CATEGORY_WALLET_GROUP:
-    value: '#B60554'
+    value: '#032D60'
   CRYPTO_PRODUCT:
     value: '#9050E9'
-  CRYPTO_PRODUCT_CATEGORY_WALLET_ROLE:
-    value: '#056764'
   CRYPTO_TRANSACTION:
-    value: '#FF5D2D'
+    value: '#7E2600'
   CRYPTO_TRANSACTION_ENVELOPE:
-    value: '#056764'
+    value: '#06A59A'
   CRYPTO_TRANSACTION_ENVELOPE_ITEM:
     value: '#107CAD'
   CRYPTO_WALLET:
-    value: '#22683E'
+    value: '#396547'
   CRYPTO_WALLET_GROUP:
     value: '#107CAD'
   CRYPTO_WALLET_GROUP_ITEM:
-    value: '#9050E9'
+    value: '#5A1BA9'
   CUSTOMER:
     value: '#22683E'
   CUSTOMER_WORKSPACE:
     value: '#22683E'
   LEARNER_PROGRAM:
     value: '#FF5D2D'
   NFT_SETTINGS:
-    value: '#FF538A'
+    value: '#B60554'
   NFT_STUDIO:
     value: '#5867E8'
   PROMPT:
@@ -977,3 +975,27 @@ props:
     value: '#22683E'
   WATER:
     value: '#5867E8'
+  ASSET_HIERARCHY:
+    value: '#107CAD'
+  SLACK_CONVERSATIONS:
+    value: '#481A54'
+  DATA_TRANSFORMS:
+    value: '#5867E8'
+  CRYPTO_PRODUCT_CATEGORY_WALLET_ROLE:
+    value: '#FF5D2D'
+  CRYPTO_TRANSACTION_ENVELOPE_CHANGE_LOG:
+    value: '#084968'
+  CRYPTO_TRANSACTION_ENVELOPE_CHANGE_SNAPSHOT:
+    value: '#CB65FF'
+  PROMOTION_TIERS:
+    value: '#396547'
+  BUDGET_PERIOD:
+    value: '#9602C7'
+  BUDGET_CATEGORY_VALUE:
+    value: '#1B96FF'
+  FUNDING_AWARD_ADJUSTMENT:
+    value: '#1B96FF'
+  FUNDING_REQUIREMENT:
+    value: '#396547'
+  YOUR_ACCOUNT:
+    value: '#1B96FF'

package.json

@@ -8,7 +8,7 @@
     "CSS"
   ],
   "homepage": "https://lightningdesignsystem.com",
-  "version": "2.20.0-alpha.2",
+  "version": "2.20.0-beta.1",
   "author": "Salesforce",
   "bugs": {
     "url": "https://github.com/salesforce-ux/design-system/issues"
@@ -49,7 +49,7 @@
     "@salesforce-ux/design-system-markup": "^2.0.4",
     "@salesforce-ux/design-system-parser": "^1.1.1",
     "@salesforce-ux/design-system-primitive-tokens": "0.3.6",
-    "@salesforce-ux/icons": "10.4.0",
+    "@salesforce-ux/icons": "10.5.3",
     "@salesforce-ux/instant-vrt": "2.0.0",
     "@salesforce-ux/postcss-annotations-parser": "0.1.1",
     "@salesforce-ux/postcss-css-variable-value": "0.2.0",

ui/components/alert/base/_index.scss

@@ -54,12 +54,12 @@ $alert-gradient-size-background: 64px 64px;
     }
 
     &:active {
-      color: var(--slds-c-alert-text-color-active, var(--sds-c-alert-text-color-active, var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-active})));
+      color: var(--slds-c-alert-text-color-active, var(--sds-c-alert-text-color-active, $color-text-link-inverse-active));
     }
 
     &[disabled] {
       // @TODO: declare at shared/global level
-      color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-disabled});
+      color: $color-text-link-inverse-disabled;
     }
   }
 }

ui/components/button-icons/base/_index.scss

@@ -85,7 +85,7 @@
   &[disabled],
   &:disabled {
     background-color: $color-background-button-inverse-disabled;
-    border-color: var(--slds-g-color-neutral-base-100, #{$color-border-button-inverse-disabled});
+    border-color: $color-border-button-inverse-disabled;
   }
 }
 
@@ -135,20 +135,20 @@
 
   &:hover,
   &:focus {
-    color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-hover});
+    color: $color-text-link-inverse-hover;
   }
 
   &:focus {
     @include focus-inverse;
   }
 
   &:active {
-    color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-active});
+    color: $color-text-link-inverse-active;
   }
 
   &[disabled],
   &:disabled {
-    color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-disabled});
+    color: $color-text-link-inverse-disabled;
   }
 }
 
@@ -321,18 +321,18 @@
  */
 .slds-button__icon_inverse-hint,
 .slds-button__icon--inverse-hint {
-  fill: var(--slds-g-color-neutral-base-100, #{$color-text-icon-inverse-hint});
+  fill: $color-text-icon-inverse-hint;
 }
 
 // Handles hint on hover behavior of an inverse button icon, both bordered and non-bordered
 .slds-hint-parent {
 
   .slds-button_icon-border-inverse,
   .slds-button--icon-border-inverse {
-    border-color: var(--slds-g-color-neutral-base-100, #{$color-border-icon-inverse-hint});
+    border-color: $color-border-icon-inverse-hint;
 
     &:focus {
-      border-color: var(--slds-g-color-neutral-base-100, #{$color-border-icon-inverse-hint-hover});
+      border-color: $color-border-icon-inverse-hint-hover;
     }
   }
 
@@ -341,7 +341,7 @@
 
     .slds-button_icon-border-inverse,
     .slds-button--icon-border-inverse {
-      border-color: var(--slds-g-color-neutral-base-100, #{$color-border-icon-inverse-hint-hover});
+      border-color: $color-border-icon-inverse-hint-hover;
     }
 
     .slds-button__icon_hint,
@@ -351,7 +351,7 @@
 
     .slds-button__icon_inverse-hint,
     .slds-button__icon--inverse-hint {
-      fill: var(--slds-g-color-neutral-base-100, #{$color-text-icon-inverse-hint-hover});
+      fill: $color-text-icon-inverse-hint-hover;
     }
 
     .slds-button:disabled {