feat: wcag 2.1 new color system (#5055)

* feat: update requires token colors with wcag 2.1 standards

* chore: generate hooks for all sds files

* chore: add styling hooks path

* chore: update styling hooks version

* chore: update styling hook path

* chore: add license

* chore: update with new styling-hooks version

* chore: wcag 2.1 color update for combo, datepic, form-element

* chore(wcag-2.1): sass tokens replaced with appropriate sds tokens

* chore: wcag 2.1 color update for btn-icons, chk-btn, dtables, due-picklist

* chore(wcag-2.1): chunk2-partb.sass tokens replaced with appropriate sds tokens

* chore(wcag-2.1): chunk2-partc.sass tokens replaced with appropriate sds tokens

* chore(wcag-2.1): chunk3-parta. sass tokens replaced with appropriate slds tokens

* chore(wcag-2.1): chunk3-partb. sass tokens replaced with appropriate slds tokens

* chore(wcag-2.1): chunk3-partc.sass tokens replaced with appropriate slds hooks

* chore(wcag-2.1): chunk3-partd. sass tokens replaced with appropriate slds hooks

* chore(wcag-2.1): chunk3-parte. sass tokens replaced with appropriate slds hooks

* chore(wcag-2.1): replacing palette notation hooks to colors

* chore(wcag2.1): update tokens with hooks for buttons, tabs, checkbox-button-group, lookups

* chore(wcag2.1): update tokens with hooks for tabs

* chore(components): update all color tokens in resp components

* chore(components): update tokens with styling hooks and add fallbacks

* chore: add fallback to stylinghooks

* chore: add fallback to stylinghooks - new set

* chore: add fallback to stylinghooks - new set with neutral-95

* chore: wcag2.1 add fallback values for styling hooks - neutral-95

* chore: wcag2.1 add fallback values for styling hooks - neutral-100

* chore(tokens): revert wcag tokens changes in SLDS

* chore(tokens): add tokens to lwc file

* chore: update missing fallback values

* chore: add scss extension to props and tokens

* chore: fix linter issue while generating template

* chore: revert lwc hooks from the gulpfile

* chore: update more tokens with styling hooks

* chore: replace brand n theme tokens with shooks

* chore: update missing token

* chore: update class name to slds-wcag

* chore: replace hard coded hex colors with appropriate slds hooks

* chore: typo error fix for a slds hook

* chore: revert brand related tokens to previous state

* chore: revert brand token update with slds

* chore: fix gulpfile for build

Co-authored-by: Ravi Kiran Kudupudi <[email protected]>

Author: Amarnath510

RELEASENOTES.md

@@ -4,6 +4,11 @@
 ## Release 2.20.0 - Upcoming
 
 - Updated background colors for Standard and Actions icons
+- Added two new dependencies for SLDS global styling hooks generation,
+  - `@salesforce-ux/sds-styling-aliases`
+  - `@salesforce-ux/sds-styling-hooks`
+- 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)
 
 ## Release 2.19.0 - August 11, 2022
 

formats/custom-props.js

@@ -0,0 +1,15 @@
+const theo = require('theo');
+
+const SLDS = 'slds';
+const SCOPED_NAMESPACE = 'slds-wcag';
+
+theo.registerFormat(
+  'custom-props.scss',
+  `.${SCOPED_NAMESPACE} {
+  {{#each props as |prop|}}
+    {{#if prop.comment}}/* {{{prop.comment}}} */{{/if}}
+    --${SLDS}-{{#eq prop.scope "global"}}g-{{/eq}}{{#eq prop.scope "shared"}}s-{{/eq}}{{kebabcase prop.name}}: {{#eq prop.type "string"}}"{{/eq}}{{{prop.value}}}{{#eq prop.type "string"}}"{{/eq}};
+  {{/each}}
+  }
+  `,
+);

gulpfile.js

@@ -93,6 +93,9 @@ gulp.task('generate:tokens:components:imports', tokens.componentsImports);
 // Generate package specific tokens
 gulp.task('generate:tokens:package', tokens.packages);
 
+// Generate SLDS Styling Hooks
+gulp.task('generate:stylingHooks', tokens.stylingHooks);
+
 // Generate all tokens - [Primitive, Component Specific, Package]
 gulp.task(
   'generate:tokens:all',
@@ -102,7 +105,8 @@ gulp.task(
     ),
     withName('generate:tokens:primitive')(tokens.copyDesignPrimitiveTokens),
     withName('generate:tokens:components:imports')(tokens.componentsImports),
-    withName('generate:tokens:package')(tokens.packages)
+    withName('generate:tokens:package')(tokens.packages),
+    withName('generate:stylingHooks')(tokens.stylingHooks)
   )
 );
 

package-lock.json

@@ -54,6 +54,8 @@
     "@salesforce-ux/postcss-annotations-parser": "0.1.1",
     "@salesforce-ux/postcss-css-variable-value": "0.2.0",
     "@salesforce-ux/scss-parser-aura": "^3.1.1",
+    "@salesforce-ux/sds-styling-aliases": "0.2.3",
+    "@salesforce-ux/sds-styling-hooks": "1.0.0-alpha.1",
     "@storybook/addon-a11y": "^5.3.21",
     "@storybook/addon-backgrounds": "^5.3.21",
     "@storybook/addon-docs": "^5.3.21",

package.json

@@ -11,6 +11,8 @@ import through from 'through2';
 import Vinyl from 'vinyl';
 import paths from '../../helpers/paths';
 
+require('../../../formats/custom-props');
+
 // Some transforms are commented out because the use cases are lacking
 let formatTransforms = _({
   web: [
@@ -35,6 +37,29 @@ let formatTransforms = _({
   .flatten()
   .value();
 
+const formatsForSdsProps = [
+  {
+    format: 'json',
+    transform: 'web',
+  },
+  {
+    format: 'common.js',
+    transform: 'web',
+  },
+  {
+    format: 'module.js',
+    transform: 'web',
+  },
+  {
+    format: 'custom-props.scss',
+    transform: 'raw',
+  },
+  {
+    format: 'raw.json',
+    transform: 'raw',
+  }
+];
+
 // Pipe through every YAML file and generate a platform specific token file
 export const packages = (done) => {
   const convert = ({ name, transform }, done) =>
@@ -51,6 +76,21 @@ export const packages = (done) => {
   async.each(formatTransforms, convert, done);
 };
 
+export const stylingHooks = (done) => {
+  const convert = ({ format, transform }, done) =>
+    gulp
+      .src(path.resolve(paths.sdsStylingHooksProps, '*.json'))
+      .pipe(
+        gulpTheo({
+          transform: { type: transform },
+          format: { type: format }
+        })
+      )
+      .pipe(gulp.dest(path.resolve(paths.designTokens, 'dist')))
+      .on('finish', done);
+  async.each(formatsForSdsProps, convert, done);
+};
+
 // Pipe through every component specific YAML file and generate a file of imports
 //
 // components.yml

scripts/gulp/generate/tokens.js

@@ -37,7 +37,10 @@ module.exports = {
     node_modules,
     '@salesforce-ux/design-system-primitive-tokens'
   ),
-
+  sdsStylingHooksProps: path.resolve(
+    node_modules,
+    '@salesforce-ux/sds-styling-hooks/src/props'
+  ),
   icons: path.resolve(
     node_modules,
     '@salesforce-ux/icons/dist/salesforce-lightning-design-system-icons'

scripts/helpers/paths.js

@@ -8,6 +8,7 @@
 // Reserved for mixins, functions, variables
 // Importing this file MUST NOT output any CSS
 @use "sass:math";
+@import 'styling-hooks';
 @import 'design-tokens';
 @import 'config';
 @import 'vendor/deprecate';

ui/_init.scss

@@ -0,0 +1,9 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+
+// ----------------------------------------------------------------------------
+// Imports
+// ----------------------------------------------------------------------------
+
+@import '../design-tokens/dist/palettes.custom-props';
+@import '../design-tokens/dist/colors.custom-props';

ui/_styling-hooks.scss

@@ -22,7 +22,7 @@
 .slds-accordion__list-item {
   border-top-width: var(--slds-c-accordion-sizing-border, var(--sds-c-accordion-sizing-border, $border-width-thin));
   border-top-style: solid;
-  border-top-color: var(--slds-c-accordion-color-border, var(--sds-c-accordion-color-border, $color-border));
+  border-top-color: var(--slds-c-accordion-color-border, var(--sds-c-accordion-color-border, var(--slds-g-color-border-base-1, #{$color-border})));
 
   &:first-child {
     border-top: 0;
@@ -68,7 +68,8 @@
   display: flex;
   flex-grow: 1;
   min-width: 0;
-  color: var(--slds-c-accordion-heading-text-color, var(--sds-c-accordion-heading-text-color, $color-text-default));
+  color: var(--slds-c-accordion-heading-text-color, var(--sds-c-accordion-heading-text-color,
+    var(--slds-g-color-neutral-base-10, #{$color-text-default})));
   font-size: var(--slds-c-accordion-heading-font-size, var(--sds-c-accordion-heading-font-size, $var-font-size-5));
   line-height: var(--slds-c-accordion-heading-line-height, var(--sds-c-accordion-heading-line-height, $line-height-heading));