fix(tokens)!: rgb transform to split out rgb values from css attribut…

…es (#1590)

BREAKING CHANGE: transforms color tokens to split out their `rgb` values

Co-authored-by: castastrophe <[email protected]>

.github/workflows/pr-build-and-deploy.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Install dependencies
         run: yarn install
       - name: Build everything
-        run: yarn build
+        run: yarn build:all
       - name: Deploy to Netlify
         uses: nwtgck/[email protected]
         with:

.github/workflows/testing.yml

@@ -28,9 +28,7 @@ jobs:
         uses: chromaui/action@v1
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          buildScriptName: "build"
-          workingDir: tools/preview
-          storybookBaseDir: tools/preview
+          buildScriptName: build:preview
           storybookConfigDir: tools/preview
           exitOnceUploaded: true
           onlyChanged: true

COPYRIGHT

@@ -1,5 +1,10 @@
-Copyright 2023 Adobe
+Copyright 2023 Adobe. All rights reserved.
 
-Adobe holds the copyright for all the files found in this repository.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 
-See the LICENSE file for licensing information.
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.

components/expressvars/gulpfile.js

@@ -10,25 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+const path = require('path');
+
 const gulp = require('gulp');
-const logger = require('gulplog');
-const fs = require('fs');
 const concat = require('gulp-concat');
 const replace = require('gulp-replace');
-const del = require('del');
-const path = require('path');
-
-function clean() {
-  return del('dist/*');
-}
-
-function prepareBuild(cb) {
-  var dir = 'dist';
-  if (!fs.existsSync(dir)){
-    fs.mkdirSync(dir);
-  }
-  cb();
-}
+const insert = require('gulp-insert');
 
 function copyGlobals() {
   return gulp.src([
@@ -54,22 +41,20 @@ function copySources() {
       'css/themes/*.css',
       'css/scales/*.css'
     ])
-    .pipe(replace(':root', function (match){
+    .pipe(replace(':root', function () {
       return classMap[path.basename(this.file.path)];
     }))
     .pipe(gulp.dest('dist/'));
 }
 
-const insert = require('gulp-insert');
-
 function concatGlobalsFinal() {
   return gulp.src([
     '.tmp/spectrum-global.css',
     'dist/globals/spectrum-dimensionAliases.css',
     'dist/globals/spectrum-colorAliases.css',
     'custom.css'
   ])
-    .pipe(replace(/{/, function(match) {
+    .pipe(replace(/{/, function() {
       if (this.file.path.match('Aliases.css')) {
         return `{\n  /* ${path.basename(this.file.path)} */`;
       }
@@ -86,7 +71,7 @@ function concatGlobalsTemp() {
     '!css/globals/spectrum-dimensionAliases.css',
     '!css/globals/spectrum-colorAliases.css'
   ])
-    .pipe(replace(/:root {/, function(match) {
+    .pipe(replace(/:root {/, function() {
       return `  /* ${path.basename(this.file.path)} */`;
     }))
     .pipe(replace(/}/, ''))
@@ -97,30 +82,26 @@ function concatGlobalsTemp() {
 }
 
 function processColorAliases() {
-  var colorStops = [
-    'darkest',
-    'dark',
-    'light',
-    'lightest'
-  ];
-
   return gulp.src([
     'css/globals/spectrum-colorAliases.css'
   ])
-    .pipe(replace(/:root/, colorStops.map(stop => `.spectrum--${stop}`).join(',\n')))
+    .pipe(replace(/:root/, [
+      'darkest',
+      'dark',
+      'light',
+      'lightest'
+    ].map(stop => `.spectrum--${stop}`).join(',\n')))
     .pipe(gulp.dest('dist/globals/'));
 }
 
 function processDimensionAliases() {
-  var scales = [
-    'medium',
-    'large'
-  ];
-
   return gulp.src([
     'css/globals/spectrum-dimensionAliases.css'
   ])
-    .pipe(replace(/:root/, scales.map(scale => `.spectrum--${scale}`).join(',\n')))
+    .pipe(replace(/:root/, [
+      'medium',
+      'large'
+    ].map(scale => `.spectrum--${scale}`).join(',\n')))
     .pipe(gulp.dest('dist/globals/'));
 }
 
@@ -139,8 +120,6 @@ function copyMetadata() {
 }
 
 let build = gulp.series(
-  clean,
-  prepareBuild,
   gulp.parallel(
     copyMetadata,
     copyGlobals,
@@ -153,11 +132,7 @@ let build = gulp.series(
   concatGlobalsFinal
 );
 
-exports.update = gulp.series(
-  require('./tasks/updateDNA').updateDNA,
-  build
-);
+exports.update = require('./tasks/updateDNA').updateDNA;
 
-exports.clean = clean;
 exports.default = build;
 exports.build = exports.buildLite = exports.buildHeavy = exports.buildMedium = build;

components/expressvars/package.json

@@ -15,17 +15,21 @@
   },
   "main": "dist/spectrum-metadata.json",
   "scripts": {
-    "build": "gulp build",
-    "update": "gulp update"
+    "build": "yarn clean && gulp build",
+    "clean": "rimraf dist/*",
+    "copy:metadata": "cp json/spectrum-metadata.json dist/",
+    "dna:clean": "rimraf css/* js/*",
+    "dna:update": "yarn dna:clean && gulp update && yarn build"
   },
   "devDependencies": {
-    "del": "^5.0.0",
+    "@adobe/spectrum-express-tokens-deprecated": "^1.0.0-beta.35",
     "gulp": "^4.0.0",
     "gulp-concat": "^2.6.1",
+    "gulp-insert": "^0.5.0",
     "gulp-replace": "^1.0.0",
-    "gulplog": "^1.0.0",
     "postcss": "^7.0.36",
     "replace-ext": "^1.0.0",
+    "rimraf": "^4.4.1",
     "through2": "^3.0.1"
   },
   "publishConfig": {