From d0a07a1916401f20f56721d2b8bd34b6e5f7c1e1 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 17 May 2022 08:59:33 -0700 Subject: [PATCH 01/45] feat: add core tokens --- README.md | 22 ++- components/tokens/README.md | 26 +++ components/tokens/config.js | 170 +++++++++++++++++ components/tokens/custom.css | 33 ++++ components/tokens/gulpfile.js | 43 +++++ components/tokens/package.json | 29 +++ site/includes/dependencies.pug | 2 + site/resources/js/SpectrumSwitcher.js | 8 + tools/bundle-builder/lib/depUtils.js | 5 + tools/bundle-builder/vars/index.js | 14 +- tools/component-builder/css/lib/varUtils.js | 4 +- tools/component-builder/css/vars.js | 2 +- tools/component-builder/package.json | 3 +- yarn.lock | 195 +++++++++++++++++++- 14 files changed, 546 insertions(+), 10 deletions(-) create mode 100644 components/tokens/README.md create mode 100644 components/tokens/config.js create mode 100644 components/tokens/custom.css create mode 100644 components/tokens/gulpfile.js create mode 100644 components/tokens/package.json diff --git a/README.md b/README.md index 5218caf6826..f440c418b44 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,9 @@ If you're targeting modern browsers, start by including the base set of variable + + + @@ -73,13 +76,28 @@ Then, make sure you've included the relevant classes to choose which scale and c ``` -**Note:** If you are importing SVG icon sprite sheets, the `.spectrum--medium`/`.spectrum--large` classes should be added to the `` element so UI icons render in the correct size in IE 11. For browsers that support custom properties, or if you're not using SVG sprite sheets for UI icons and are manually managing icon sizing in your implementation, `.spectrum--medium`/`.spectrum--large` can be added to the `` or other element. +To switch to Express, load vars from `@spectrum-css/expressvars` instead of `@spectrum-css/vars` and add the `.spectrum--express` class to the `` element: + +```html + + + + + + + + + + +``` Then you can use components by copy/pasting their code from [the documentation](http://opensource.adobe.com/spectrum-css/). With the magic of CSS custom properties, you can infinitely nest different color stops and themes, [as illustrated here](https://codepen.io/lazd/pen/axXMRL). -Additionally, you can override variables and customize Spectrum CSS' look and feel by re-defining the custom properties in context, [like so](https://codepen.io/lazd/pen/ROvOPO). See the source in `components/*/index-vars.css` to determine which custom properties you can override. +### Customizing components + +You can override variables and customize Spectrum CSS' look and feel by re-defining the custom properties in context. Look for the **Custom Property API** section in each component to determine which custom properties you can override. See [ActionButton for a complete example](https://opensource.adobe.com/spectrum-css/actionbutton.html#customized). ### Importing UI icons diff --git a/components/tokens/README.md b/components/tokens/README.md new file mode 100644 index 00000000000..23faf9c25ea --- /dev/null +++ b/components/tokens/README.md @@ -0,0 +1,26 @@ +# @spectrum-css/tokens +> Core tokens builder for Spectrum CSS + +This package uses StyleDictionary to build Spectrum core tokens for CSS. + +## Output + +The output is concatenated into a single `dist/index.css` for use in Spectrum CSS. This entire file should be imported, and the relevant classes should be toggled to swap out core tokens. + +On the `` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. To switch to Express, add `.spectrum--express`. + +## Overrides and additions + +Custom overrides and additions to core tokens can be added to `custom.css`. + +Ensure that you correctly scope any added tokens: + +* `.spectrum` - Global, unchanging tokens or tokens specific to the Spectrum flavor +* `.spectrum--express` - Tokens specific to the Express flavor +* `.spectrum--lightest` - Tokens specific to the light color stop (soon to be deprecated) +* `.spectrum--light` - Tokens specific to the light color stop +* `.spectrum--dark` - Tokens specific to the dark color stop +* `.spectrum--darkest` - Tokens specific to the darkest color stop +* `.spectrum--medium` - Tokens specific to the medium (desktop) scale +* `.spectrum--large` - Tokens specific to the large (mobile) scale +* `.spectrum--express.spectrum--*` - Tokens specific to the Express flavor for any of the above color stops and scales diff --git a/components/tokens/config.js b/components/tokens/config.js new file mode 100644 index 00000000000..8258e9ac2e8 --- /dev/null +++ b/components/tokens/config.js @@ -0,0 +1,170 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +const path = require('path'); +const StyleDictionary = require('style-dictionary'); +const CSSSetsFormatter = require('style-dictionary-sets').CSSSetsFormatter; +const NameKebabTransfom = require('style-dictionary-sets').NameKebabTransfom; +const AttributeSetsTransform = require('style-dictionary-sets').AttributeSetsTransform; + +StyleDictionary.registerTransform(NameKebabTransfom); +StyleDictionary.registerTransform(AttributeSetsTransform); +StyleDictionary.registerFormat(CSSSetsFormatter); + +const systemNames = ['express', 'spectrum', 'wireframe']; + +const getSets = (token) => { + return token.path.filter( + (part, index, array) => array[index - 1] == "sets" + ); +} + +const tokenHasSets = (token) => { + return token.path.includes('sets'); +} + +const generateFileConfig = (setName, subSystemName) => { + const sets = [setName, subSystemName]; + + const selectorMap = { + 'desktop': 'medium', + 'mobile': 'large' + }; + + const fileName = selectorMap[setName] ?? setName; + + let selector = `.spectrum--${fileName}`; + if (subSystemName !== 'spectrum') { + selector = `.spectrum--${subSystemName}${selector}`; + } + + return { + destination: `${subSystemName}/${fileName}-vars.css`, + format: CSSSetsFormatter.name, + filter: (token) => { + return ( + tokenHasSets(token) && + getSets(token).includes(subSystemName) && + getSets(token).includes(setName) + ); + }, + options: { + selector, + showFileHeader: false, + outputReferences: true, + sets + }, + } +}; + +const generateGlobalConfig = (subSystemName) => { + const sets = [subSystemName]; + + const selector = subSystemName === 'spectrum' ? '.spectrum' : `.spectrum--${subSystemName}`; + + return { + destination: `${subSystemName}/global-vars.css`, + format: CSSSetsFormatter.name, + filter: (token) => { + return ( + tokenHasSets(token) && + getSets(token).length === 1 && + getSets(token)[0] === subSystemName + ); + }, + options: { + selector, + showFileHeader: false, + outputReferences: true, + sets + }, + } +} + +const generateGlobalSetConfig = (setName) => { + const sets = [setName]; + + const selectorMap = { + 'desktop': 'medium', + 'mobile': 'large' + }; + + const fileName = selectorMap[setName] ?? setName; + + let selectors = [`.spectrum--${fileName}`]; + + // Apply all light colors as lightest for backwards compat + if (setName === 'light') { + selectors.push('.spectrum--lightest'); + } + + return { + destination: `${fileName}-vars.css`, + format: CSSSetsFormatter.name, + filter: (token) => { + return ( + tokenHasSets(token) && + getSets(token).every(set => !systemNames.includes(set)) && + getSets(token).includes(setName) + ); + }, + options: { + selector: selectors.join(', '), + showFileHeader: false, + outputReferences: true, + sets + }, + } +} + +const tokenGlob = path.dirname(require.resolve('@adobe/spectrum-tokens')) + '/src/**/*.json'; +module.exports = { + source: [tokenGlob], + platforms: { + CSS: { + buildPath: 'dist/css/', + transforms: [AttributeSetsTransform.name, NameKebabTransfom.name], + prefix: 'spectrum', + files: [ + { + destination: 'global-vars.css', + format: CSSSetsFormatter.name, + filter: (token) => !tokenHasSets(token), + options: { + showFileHeader: false, + outputReferences: true, + selector: '.spectrum' + }, + }, + generateGlobalSetConfig('desktop'), + generateGlobalSetConfig('mobile'), + generateGlobalSetConfig('light'), + generateGlobalSetConfig('dark'), + generateGlobalSetConfig('darkest'), + + generateGlobalConfig('spectrum'), + generateFileConfig('desktop', 'spectrum'), + generateFileConfig('mobile', 'spectrum'), + generateFileConfig('light', 'spectrum'), + generateFileConfig('dark', 'spectrum'), + generateFileConfig('darkest', 'spectrum'), + + generateGlobalConfig('express'), + generateFileConfig('desktop', 'express'), + generateFileConfig('mobile', 'express'), + generateFileConfig('light', 'express'), + generateFileConfig('dark', 'express'), + generateFileConfig('darkest', 'express'), + ], + }, + }, +}; diff --git a/components/tokens/custom.css b/components/tokens/custom.css new file mode 100644 index 00000000000..f792877800b --- /dev/null +++ b/components/tokens/custom.css @@ -0,0 +1,33 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +/* This file contains overrides and additions to core tokens */ + +.spectrum { + --spectrum-animation-duration-100: 130ms; +} + +.spectrum--medium { + /* edge-to-visual-only is used for icon-only buttons */ + --spectrum-edge-to-visual-only-75: 4px; + --spectrum-edge-to-visual-only-100: 7px; + --spectrum-edge-to-visual-only-200: 10px; + --spectrum-edge-to-visual-only-300: 13px; +} + +.spectrum--large { + /* edge-to-visual-only is used for icon-only buttons */ + --spectrum-edge-to-visual-only-75: 5px; + --spectrum-edge-to-visual-only-100: 9px; + --spectrum-edge-to-visual-only-200: 13px; + --spectrum-edge-to-visual-only-300: 16px; +} diff --git a/components/tokens/gulpfile.js b/components/tokens/gulpfile.js new file mode 100644 index 00000000000..a15560f82e6 --- /dev/null +++ b/components/tokens/gulpfile.js @@ -0,0 +1,43 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +const gulp = require('gulp'); +const concat = require('gulp-concat'); +const del = require('del'); +const StyleDictionary = require('style-dictionary').extend('config.js'); + +function clean() { + return del('dist/*'); +} + +function concatIndex() { + return gulp.src([ + 'dist/css/*.css', + 'dist/css/spectrum/*.css', + 'dist/css/express/*.css', + 'custom.css' + ]) + .pipe(concat('index.css')) + .pipe(gulp.dest('dist/')); +} + +function styleDictionary(cb) { + StyleDictionary.buildAllPlatforms(); + cb(); +} + +exports.clean = clean; +exports.build = exports.buildLite = exports.buildMedium = exports.default = gulp.series( + clean, + styleDictionary, + concatIndex +); diff --git a/components/tokens/package.json b/components/tokens/package.json new file mode 100644 index 00000000000..60c5fbb234a --- /dev/null +++ b/components/tokens/package.json @@ -0,0 +1,29 @@ +{ + "name": "@spectrum-css/tokens", + "version": "1.0.0-beta.0", + "description": "The Spectrum CSS tokens package", + "license": "Apache-2.0", + "main": "dist/index.css", + "scripts": { + "build": "gulp build" + }, + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/tokens" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "devDependencies": { + "gulp": "^4.0.0", + "gulp-concat": "^2.6.1", + "@adobe/spectrum-tokens": "^12.0.0-beta.21", + "style-dictionary": "^3.7.0", + "style-dictionary-sets": "^1.4.1" + }, + "publishConfig": { + "access": "public" + }, + "homepage": "https://opensource.adobe.com/spectrum-css/" +} diff --git a/site/includes/dependencies.pug b/site/includes/dependencies.pug index 5291383d8b5..c993f84dfa7 100644 --- a/site/includes/dependencies.pug +++ b/site/includes/dependencies.pug @@ -15,6 +15,8 @@ link(rel='stylesheet', type='text/css', href='../components/vars/spectrum-light. link(rel='stylesheet', type='text/css', href='../components/vars/spectrum-medium.css') link(rel='stylesheet', type='text/css', href='../components/vars/spectrum-large.css') +link(rel='stylesheet', type='text/css', href='../components/tokens/index.css') + each dep in dependencyOrder.filter((dep) => dep != 'vars' ) link(rel='stylesheet', type='text/css', href='../components/' + dep + '/index-vars.css', data-dependency=dep ) diff --git a/site/resources/js/SpectrumSwitcher.js b/site/resources/js/SpectrumSwitcher.js index bdaddafa59c..fd06487ba67 100644 --- a/site/resources/js/SpectrumSwitcher.js +++ b/site/resources/js/SpectrumSwitcher.js @@ -147,6 +147,14 @@ Object.defineProperty(SpectrumSwitcher.prototype, 'varsVersion', { sheet.setAttribute('href', sheet.href.replaceAll(expressName, defaultName)); } }); + + if (varsVersion === 'express') { + document.documentElement.classList.add('spectrum--express'); + } + else { + document.documentElement.classList.remove('spectrum--express'); + } + this._varsVersion = varsVersion; }, get: function() { diff --git a/tools/bundle-builder/lib/depUtils.js b/tools/bundle-builder/lib/depUtils.js index 6cd17c2bf42..e4a2a2553e6 100644 --- a/tools/bundle-builder/lib/depUtils.js +++ b/tools/bundle-builder/lib/depUtils.js @@ -96,6 +96,11 @@ async function getFolderDependencyOrder(packagesDir) { // Nobody relies on it, so it gets clipped, weird solution.push('@spectrum-css/expressvars'); + // Build tokens first + // This is because not every package relies on tokens, but the builder needs tokens to bake vars + solution = solution.filter(p => p !== '@spectrum-css/tokens'); + solution.unshift('@spectrum-css/tokens'); + return solution; } diff --git a/tools/bundle-builder/vars/index.js b/tools/bundle-builder/vars/index.js index 3bb570d5ab8..4a33062e1de 100644 --- a/tools/bundle-builder/vars/index.js +++ b/tools/bundle-builder/vars/index.js @@ -48,7 +48,8 @@ function getAllVars() { `${dirs.components}/vars/css/themes/*.css`, `${dirs.components}/vars/css/scales/*.css`, `${dirs.components}/vars/css/components/*.css`, - `${dirs.components}/vars/css/globals/*.css` + `${dirs.components}/vars/css/globals/*.css`, + `${dirs.components}/tokens/dist/index.css` ]) .pipe(concat('everything.css')) .pipe(through.obj(function getAllVars(file, enc, cb) { @@ -157,12 +158,19 @@ const expressVarDir = path.join(dirs.components, 'expressvars', 'dist'); function copyExpressVars() { return gulp.src(path.join(expressVarDir, 'spectrum-*.css')) .pipe(gulp.dest('dist/expressvars/')) - } +} + +const coreTokensDir = path.join(dirs.components, 'tokens', 'dist'); +function copyCoreTokens() { + return gulp.src(path.join(varDir, '**/*.css')) + .pipe(gulp.dest('dist/tokens/')) +} exports.buildUnique = buildUnique; exports.copyVars = gulp.parallel( buildUnique, copyVars, - copyExpressVars + copyExpressVars, + copyCoreTokens ); diff --git a/tools/component-builder/css/lib/varUtils.js b/tools/component-builder/css/lib/varUtils.js index c508e3ddf84..81e135391fc 100644 --- a/tools/component-builder/css/lib/varUtils.js +++ b/tools/component-builder/css/lib/varUtils.js @@ -125,6 +125,7 @@ function resolveValue(value, vars) { } const varDir = path.join(path.dirname(require.resolve('@spectrum-css/vars')), '..'); +const coreTokensFile = require.resolve('@spectrum-css/tokens'); async function readDNAVariables(file) { let css = await fsp.readFile(path.join(varDir, 'css', file)); @@ -154,7 +155,8 @@ function getAllVars() { `${varDir}/css/scales/*.css`, `${varDir}/css/components/*.css`, `${varDir}/css/globals/*.css`, - `${varDir}/custom.css` + `${varDir}/custom.css`, + coreTokensFile ]) .pipe(concat('everything.css')) .pipe(through.obj(function getAllVars(file, enc, cb) { diff --git a/tools/component-builder/css/vars.js b/tools/component-builder/css/vars.js index 2afdcfea5ff..937c2f37898 100644 --- a/tools/component-builder/css/vars.js +++ b/tools/component-builder/css/vars.js @@ -60,7 +60,7 @@ function bakeVars() { if (varName.indexOf('spectrum-global') !== -1) { logger.warn(`⚠️ ${pkg.name} directly uses global variable ${varName}`); } - else if (!allVars[varName]) { + else if (!allVars[varName] && !varName.startsWith('--custom') && !varName.startsWith('--highcontrast')) { if (componentVars.indexOf(varName) === -1) { errors.push(`${pkg.name} uses undefined variable ${varName}`); } diff --git a/tools/component-builder/package.json b/tools/component-builder/package.json index 38edd898e9e..d9fb98fcbf6 100644 --- a/tools/component-builder/package.json +++ b/tools/component-builder/package.json @@ -12,7 +12,8 @@ }, "license": "Apache-2.0", "peerDependencies": { - "@spectrum-css/vars": "^4.3.1" + "@spectrum-css/vars": "^8.0.0", + "@spectrum-css/tokens": "^1.0.0-beta" }, "dependencies": { "autoprefixer": "^6.5.3", diff --git a/yarn.lock b/yarn.lock index 2bbd694f15c..0a8a31cd432 100644 --- a/yarn.lock +++ b/yarn.lock @@ -22,6 +22,11 @@ resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens-deprecated/-/spectrum-tokens-deprecated-11.8.0.tgz#7edf6f7b7e3c22581e0732c8de97fa0a68ed66b9" integrity sha512-LW2SA/8VhW868tEcgIcugx7xdtgFG3KiUoEz+4s2nHTdmKj0h2A9pnTNplVTNAMq2uPSfp6wKKvQNNnMSIXqCg== +"@adobe/spectrum-tokens@^12.0.0-beta.21": + version "12.0.0-beta.21" + resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-12.0.0-beta.21.tgz#0b0257c14b25c4007ca4f14e096c3559e78b2df1" + integrity sha512-72A8/Wf9YlEtpGYYSc1GI1Uu4Nc6ld/o2t1VTGk+6FbArT8LteDVkjr9r1+UROfUEiOmHwOApGsxysKUpM5M8w== + "@babel/code-frame@^7.0.0": version "7.15.8" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.15.8.tgz#45990c47adadb00c03677baa89221f7cc23d2503" @@ -2553,6 +2558,14 @@ callsites@^3.0.0, callsites@^3.1.0: resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== +camel-case@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a" + integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw== + dependencies: + pascal-case "^3.1.2" + tslib "^2.0.3" + camelcase-css@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5" @@ -2606,6 +2619,15 @@ caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001269.tgz#c6f7b6db8cfe1835017716a6f5204239e0b01eb8" integrity sha512-svC8H/ioT3OcryC1qrO/EHP2opBLiQf8jIJsqIJWS2Qqt1uDO0c4V+Iv7tcpVYbPIx4rzM8AzsXUKKkpZFrEJA== +capital-case@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669" + integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + upper-case-first "^2.0.2" + caseless@~0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" @@ -2639,7 +2661,7 @@ chalk@^1.1.3: strip-ansi "^3.0.0" supports-color "^2.0.0" -chalk@^4.1.0: +chalk@^4.0.0, chalk@^4.1.0: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== @@ -2647,6 +2669,24 @@ chalk@^4.1.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +change-case@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12" + integrity sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A== + dependencies: + camel-case "^4.1.2" + capital-case "^1.0.4" + constant-case "^3.0.4" + dot-case "^3.0.4" + header-case "^2.0.4" + no-case "^3.0.4" + param-case "^3.0.4" + pascal-case "^3.1.2" + path-case "^3.0.4" + sentence-case "^3.0.4" + snake-case "^3.0.4" + tslib "^2.0.3" + character-parser@^2.1.1, character-parser@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/character-parser/-/character-parser-2.2.0.tgz#c7ce28f36d4bcd9744e5ffc2c5fcde1c73261fc0" @@ -3022,6 +3062,11 @@ commander@^2.18.0, commander@^2.2.0: resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== +commander@^8.3.0: + version "8.3.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66" + integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww== + common-path-prefix@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-3.0.0.tgz#7d007a7e07c58c4b4d5f433131a19141b29f11e0" @@ -3154,6 +3199,15 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0: resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e" integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4= +constant-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1" + integrity sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + upper-case "^2.0.2" + constantinople@^3.0.1, constantinople@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-3.1.2.tgz#d45ed724f57d3d10500017a7d3a889c1381ae647" @@ -3681,6 +3735,11 @@ deep-extend@^0.6.0: resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac" integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA== +deepmerge@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" + integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== + default-compare@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f" @@ -3934,6 +3993,14 @@ domutils@^2.5.2, domutils@^2.6.0, domutils@^2.7.0: domelementtype "^2.2.0" domhandler "^4.2.0" +dot-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751" + integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + dot-prop@^3.0.0, dot-prop@^5.1.0, dot-prop@^5.2.0, dot-prop@^6.0.1: version "5.3.0" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88" @@ -4738,6 +4805,15 @@ fs-extra@3.0.1: jsonfile "^3.0.0" universalify "^0.1.0" +fs-extra@^10.0.0: + version "10.1.0" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf" + integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ== + dependencies: + graceful-fs "^4.2.0" + jsonfile "^6.0.1" + universalify "^2.0.0" + fs-extra@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" @@ -5013,7 +5089,7 @@ glob-watcher@^5.0.3: normalize-path "^3.0.0" object.defaults "^1.1.0" -glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: +glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0: version "7.2.0" resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023" integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q== @@ -5439,6 +5515,14 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +header-case@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063" + integrity sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q== + dependencies: + capital-case "^1.0.4" + tslib "^2.0.3" + homedir-polyfill@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8" @@ -6376,6 +6460,16 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1: resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus= +json5@^2.2.0: + version "2.2.1" + resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c" + integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA== + +jsonc-parser@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.0.0.tgz#abdd785701c7e7eaca8a9ec8cf070ca51a745a22" + integrity sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA== + jsonfile@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66" @@ -6812,6 +6906,13 @@ loud-rejection@^1.0.0: currently-unhandled "^0.4.1" signal-exit "^3.0.0" +lower-case@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28" + integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg== + dependencies: + tslib "^2.0.3" + lowercase-keys@^1.0.0, lowercase-keys@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f" @@ -7388,6 +7489,14 @@ nice-try@^1.0.4: resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ== +no-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d" + integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg== + dependencies: + lower-case "^2.0.2" + tslib "^2.0.3" + node-fetch@^2.6.1: version "2.6.7" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad" @@ -8026,6 +8135,14 @@ pako@^1.0.5: resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf" integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw== +param-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5" + integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A== + dependencies: + dot-case "^3.0.4" + tslib "^2.0.3" + parent-module@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2" @@ -8152,11 +8269,27 @@ parseurl@~1.3.2, parseurl@~1.3.3: resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4" integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ== +pascal-case@^3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb" + integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + pascalcase@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14" integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ= +path-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f" + integrity sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg== + dependencies: + dot-case "^3.0.4" + tslib "^2.0.3" + path-dirname@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0" @@ -9698,6 +9831,15 @@ send@0.17.1: range-parser "~1.2.1" statuses "~1.5.0" +sentence-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f" + integrity sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + upper-case-first "^2.0.2" + serialize-error@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-7.0.1.tgz#f1360b0447f61ffb483ec4157c737fab7d778e18" @@ -9842,6 +9984,14 @@ smart-buffer@^4.1.0: resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae" integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg== +snake-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c" + integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg== + dependencies: + dot-case "^3.0.4" + tslib "^2.0.3" + snapdragon-node@^2.0.1: version "2.1.1" resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b" @@ -10309,6 +10459,28 @@ strong-log-transformer@^2.1.0: minimist "^1.2.0" through "^2.3.4" +style-dictionary-sets@^1.4.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/style-dictionary-sets/-/style-dictionary-sets-1.4.1.tgz#d8c50179879b706e8b84d7707e4b0206acd27d4f" + integrity sha512-9t3E2YEE7kftvVAAnTP1MDQfBj6s2gU7Ox8mEsiQzXXkIOSm1qssthpMWjZ1Gv3cWSzyrAsBiiwnVgt6dM7OxA== + dependencies: + deepmerge "^4.2.2" + +style-dictionary@^3.7.0: + version "3.7.0" + resolved "https://registry.yarnpkg.com/style-dictionary/-/style-dictionary-3.7.0.tgz#02f4b17232cbb1142a3fdc09a17dfb08aafde3b0" + integrity sha512-BL4AQS5kNDBXbFHWJhlCve6+ojnHgHkiwhf2nNByU698elXWdyK5b27OprphT4q0/tJ52zB+lodhqxIxbNOajQ== + dependencies: + chalk "^4.0.0" + change-case "^4.1.2" + commander "^8.3.0" + fs-extra "^10.0.0" + glob "^7.2.0" + json5 "^2.2.0" + jsonc-parser "^3.0.0" + lodash "^4.17.15" + tinycolor2 "^1.4.1" + sugarss@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d" @@ -10691,6 +10863,11 @@ tslib@^1.9.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== +tslib@^2.0.3: + version "2.4.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" + integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== + tslib@^2.2.0: version "2.3.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01" @@ -10969,6 +11146,20 @@ update-notifier@^5.0.1: semver-diff "^3.1.1" xdg-basedir "^4.0.0" +upper-case-first@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324" + integrity sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg== + dependencies: + tslib "^2.0.3" + +upper-case@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-2.0.2.tgz#d89810823faab1df1549b7d97a76f8662bae6f7a" + integrity sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg== + dependencies: + tslib "^2.0.3" + uri-js@^4.2.2: version "4.4.1" resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e" From 774d09e8e30e17775309afd84d8c3d16d2c324c4 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 17 May 2022 09:01:09 -0700 Subject: [PATCH 02/45] feat!: implement ActionButton core tokens (#1430) BREAKING CHANGE: .spectrum-ActionButton-icon is now required on icons BREAKING CHANGE: .spectrum--express must be added to support Express ActionButton --- .../actionbutton/actionbutton-generated.css | 492 ------------------ components/actionbutton/index.css | 471 +++++++++++++---- .../actionbutton/metadata/actionbutton.yml | 299 +++++++---- components/actionbutton/package.json | 1 + components/actionbutton/skin.css | 404 -------------- 5 files changed, 545 insertions(+), 1122 deletions(-) delete mode 100644 components/actionbutton/actionbutton-generated.css delete mode 100644 components/actionbutton/skin.css diff --git a/components/actionbutton/actionbutton-generated.css b/components/actionbutton/actionbutton-generated.css deleted file mode 100644 index c591eeef761..00000000000 --- a/components/actionbutton/actionbutton-generated.css +++ /dev/null @@ -1,492 +0,0 @@ -/* -Copyright 2021 Adobe. All rights reserved. -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 - -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. -*/ - -/* begin generated CSS for actionbutton */ -.spectrum-ActionButton { - &.spectrum-ActionButton--staticBlack { - &:not(.spectrum-ActionButton--quiet) { - &:disabled { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-disabled); - - &.is-selected { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected) - } - - &:not(.is-selected) { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-disabled) - } - } - - &:not(:disabled) { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-default); - - &:hover { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-hover) - } - - &:active { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-down) - } - - &:focus-visible { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-key-focus) - } - - &.is-keyboardFocused { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-key-focus) - } - - &:not(.is-selected) { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-default); - - &:hover { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-hover) - } - - &:active { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-down) - } - - &:focus-visible { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-key-focus) - } - - &.is-keyboardFocused { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-key-focus) - } - } - } - } - - &.spectrum-ActionButton--quiet { - &:disabled { - border-color: transparent; - - &:not(.is-selected) { - background-color: transparent - } - } - - &:not(:disabled) { - border-color: transparent; - - &:not(.is-selected) { - background-color: var(--spectrum-alias-component-background-color-quiet-default); - - &:hover { - background-color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-25)) - } - - &:active { - background-color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - - &:focus-visible { - background-color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-25)) - } - - &.is-keyboardFocused { - background-color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-25)) - } - } - } - } - - &:disabled { - &.is-selected { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected); - - .spectrum-ActionButton-holdIcon { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-ActionButton-label { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-Icon { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - } - - .spectrum-ActionButton-holdIcon { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-ActionButton-label { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-Icon { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - } - - &.is-selected { - &:not(:disabled) { - background-color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-90)); - - &:hover { - background-color: var(--spectrum-global-color-static-black) - } - - &:active { - background-color: var(--spectrum-global-color-static-black) - } - - &:focus-visible { - background-color: var(--spectrum-global-color-static-black) - } - - &.is-keyboardFocused { - background-color: var(--spectrum-global-color-static-black) - } - - .spectrum-ActionButton-holdIcon { - color: inherit - } - - .spectrum-ActionButton-label { - color: inherit - } - - .spectrum-Icon { - color: inherit - } - } - } - - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-ActionButton-static-black-color) - } - - &:not(:disabled) { - &:not(.is-selected) { - .spectrum-ActionButton-holdIcon { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-90)) - } - - &:hover { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-black) - } - } - - &:active { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-black) - } - } - - &:focus-visible { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-black) - } - } - - &.is-keyboardFocused { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-black) - } - } - - .spectrum-ActionButton-label { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-90)) - } - - .spectrum-Icon { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-90)) - } - } - } - - .spectrum-ActionButton-label { - color: var(--spectrum-ActionButton-static-black-color) - } - - .spectrum-Icon { - color: var(--spectrum-ActionButton-static-black-color) - } - } - - &.spectrum-ActionButton--staticWhite { - &:not(.spectrum-ActionButton--quiet) { - &:disabled { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-disabled); - - &.is-selected { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected) - } - - &:not(.is-selected) { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-disabled) - } - } - - &:not(:disabled) { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-default); - - &:hover { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-hover) - } - - &:active { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-down) - } - - &:focus-visible { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-key-focus) - } - - &.is-keyboardFocused { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-key-focus) - } - - &:not(.is-selected) { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-default); - - &:hover { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-hover) - } - - &:active { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-down) - } - - &:focus-visible { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-key-focus) - } - - &.is-keyboardFocused { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-key-focus) - } - } - } - } - - &.spectrum-ActionButton--quiet { - &:disabled { - border-color: transparent; - - &:not(.is-selected) { - background-color: transparent - } - } - - &:not(:disabled) { - border-color: transparent; - - &:not(.is-selected) { - background-color: var(--spectrum-alias-component-background-color-quiet-default); - - &:hover { - background-color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-25)) - } - - &:active { - background-color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - - &:focus-visible { - background-color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-25)) - } - - &.is-keyboardFocused { - background-color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-25)) - } - } - } - } - - &:disabled { - &.is-selected { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected); - - .spectrum-ActionButton-holdIcon { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-ActionButton-label { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-Icon { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - } - - .spectrum-ActionButton-holdIcon { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-ActionButton-label { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-Icon { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - } - - &.is-selected { - &:not(:disabled) { - background-color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-90)); - - &:hover { - background-color: var(--spectrum-global-color-static-white) - } - - &:active { - background-color: var(--spectrum-global-color-static-white) - } - - &:focus-visible { - background-color: var(--spectrum-global-color-static-white) - } - - &.is-keyboardFocused { - background-color: var(--spectrum-global-color-static-white) - } - - .spectrum-ActionButton-holdIcon { - color: inherit - } - - .spectrum-ActionButton-label { - color: inherit - } - - .spectrum-Icon { - color: inherit - } - } - } - - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-ActionButton-static-white-color) - } - - &:not(:disabled) { - &:not(.is-selected) { - .spectrum-ActionButton-holdIcon { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-90)) - } - - &:hover { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-white) - } - } - - &:active { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-white) - } - } - - &:focus-visible { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-white) - } - } - - &.is-keyboardFocused { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-white) - } - } - - .spectrum-ActionButton-label { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-90)) - } - - .spectrum-Icon { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-90)) - } - } - } - - .spectrum-ActionButton-label { - color: var(--spectrum-ActionButton-static-white-color) - } - - .spectrum-Icon { - color: var(--spectrum-ActionButton-static-white-color) - } - } -} - -/* end generated CSS for actionbutton */ diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 5bee87f2a3f..c30e69f9467 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -11,183 +11,426 @@ governing permissions and limitations under the License. */ @import "../commons/basebutton.css"; -@import "../vars/css/components/spectrum-actionbutton.css"; -@import "./actionbutton-generated.css"; -.spectrum-ActionButton--sizeS { - @remapvars { - find: --spectrum-actionbutton-s-; - replace: --spectrum-actionbutton-; - } - - /* todo: remove hardcoded values when we update DNA */ - --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-25); - --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-25); +.spectrum-ActionButton { + --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100); + --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); + + --spectrum-actionbutton-focus-ring-gap: var(--spectrum-focus-ring-gap); + --spectrum-actionbutton-focus-ring-thickness: var(--spectrum-focus-ring-thickness); + --spectrum-actionbutton-focus-ring-color: var(--spectrum-focus-ring-color); + --spectrum-actionbutton-focus-ring-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap)); +} - /* hack to fix the incorrect min-width */ - --spectrum-actionbutton-textonly-min-width: var(--spectrum-global-dimension-size-300); +.spectrum-ActionButton--sizeS { + --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-75); + --spectrum-actionbutton-height: var(--spectrum-component-height-75); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-75); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-75) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-75) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeM { - @remapvars { - find: --spectrum-actionbutton-m-; - replace: --spectrum-actionbutton-; - } - - /* todo: remove hardcoded values when we update DNA */ - --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-40); - --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-40); + --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-100); + --spectrum-actionbutton-height: var(--spectrum-component-height-100); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-100) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-100) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeL { - @remapvars { - find: --spectrum-actionbutton-l-; - replace: --spectrum-actionbutton-; - } - - /* todo: remove hardcoded values when we update DNA */ - --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-50); - --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-50); + --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-200); + --spectrum-actionbutton-height: var(--spectrum-component-height-200); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-200); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-200) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-200) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeXL { - @remapvars { - find: --spectrum-actionbutton-xl-; - replace: --spectrum-actionbutton-; - } + --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-300); + --spectrum-actionbutton-height: var(--spectrum-component-height-300); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-300); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-300) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-300) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width)); +} + +.spectrum { + .spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + + --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: transparent; + } + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-content-color-default: var(--spectrum-white); + --spectrum-actionbutton-content-color-hover: var(--spectrum-white); + --spectrum-actionbutton-content-color-down: var(--spectrum-white); + --spectrum-actionbutton-content-color-focus: var(--spectrum-white); + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + + &.spectrum-ActionButton--emphasized { + --spectrum-actionbutton-background-color-default: var(--spectrum-accent-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus); + } + } + + &.spectrum-ActionButton--staticBlack, + &.spectrum-ActionButton--staticWhite { + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-border-color-disabled: transparent; + } + } + + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); + + --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-black); + --spectrum-actionbutton-content-color-hover: var(--spectrum-black); + --spectrum-actionbutton-content-color-down: var(--spectrum-black); + --spectrum-actionbutton-content-color-focus: var(--spectrum-black); - /* todo: remove hardcoded values when we update DNA */ - --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-65); - --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-65); + --spectrum-actionbutton-focus-ring-color: var(--spectrum-static-black-focus-ring-color); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-actionbutton-border-color-disabled: transparent; + + --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + } + } + + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); + + --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-white); + --spectrum-actionbutton-content-color-hover: var(--spectrum-white); + --spectrum-actionbutton-content-color-down: var(--spectrum-white); + --spectrum-actionbutton-content-color-focus: var(--spectrum-white); + + --spectrum-actionbutton-focus-ring-color: var(--spectrum-static-white-focus-ring-color); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + } + } + } } -.spectrum-ActionButton {/* --spectrum-actionbutton-textonly-padding-left 12px */ /* --spectrum-actionbutton-textonly-border-size 1px */ - /* Adjustments for inset/outset padding in DNA */ - --spectrum-actionbutton-padding-left-adjusted: calc(var(--spectrum-actionbutton-texticon-padding-left) - var(--spectrum-actionbutton-texticon-border-size)); - --spectrum-actionbutton-padding-right-adjusted: calc(var(--spectrum-actionbutton-texticon-padding-right) - var(--spectrum-actionbutton-texticon-border-size)); - --spectrum-actionbutton-textonly-padding-left-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-left) - var(--spectrum-actionbutton-textonly-border-size)); - --spectrum-actionbutton-textonly-padding-right-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-right) - var(--spectrum-actionbutton-textonly-border-size)); - --spectrum-actionbutton-icononly-padding-left-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-left) - var(--spectrum-actionbutton-icononly-border-size)); - --spectrum-actionbutton-icononly-padding-right-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-right) - var(--spectrum-actionbutton-icononly-border-size)); - --spectrum-actionbutton-focus-ring-border-radius-adjusted: calc(var(--spectrum-actionbutton-quiet-textonly-border-radius) + var(--spectrum-actionbutton-focus-ring-gap)); +.spectrum--express { + .spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + } + + &.spectrum-ActionButton--staticBlack, + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + } + + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); + } + + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); + } + } } -a.spectrum-ActionButton { - @inherit: %spectrum-AnchorButton; +@media (forced-colors: active) { + .spectrum-ActionButton { + &:after { + /* make sure focus-ring renders */ + forced-color-adjust: none; + } + + /* force a more visible focus-ring color */ + --highcontrast-actionbutton-focus-ring-color: ButtonText; + + &.is-selected { + --highcontrast-actionbutton-background-color-default: Highlight; + --highcontrast-actionbutton-background-color-hover: Highlight; + --highcontrast-actionbutton-background-color-focus: Highlight; + --highcontrast-actionbutton-background-color-down: Highlight; + --highcontrast-actionbutton-background-color-disabled: ButtonFace; + + --highcontrast-actionbutton-border-color-default: HighlightText; + --highcontrast-actionbutton-border-color-hover: HighlightText; + --highcontrast-actionbutton-border-color-focus: HighlightText; + --highcontrast-actionbutton-border-color-down: HighlightText; + --highcontrast-actionbutton-border-color-disabled: GrayText; + + --highcontrast-actionbutton-content-color-default: HighlightText; + --highcontrast-actionbutton-content-color-hover: HighlightText; + --highcontrast-actionbutton-content-color-focus: HighlightText; + --highcontrast-actionbutton-content-color-down: HighlightText; + --highcontrast-actionbutton-content-color-disabled: GrayText; + + .spectrum-ActionButton-icon, + .spectrum-ActionButton-hold, + .spectrum-ActionButton-label { + /* ensure custom text colors from above get applied */ + /* it seems like this shouldn't have to be done, but colors are wrong without it */ + forced-color-adjust: none; + } + } + } } .spectrum-ActionButton { @inherit: %spectrum-BaseButton; position: relative; - block-size: var(--spectrum-actionbutton-textonly-height); - min-inline-size: var(--spectrum-actionbutton-textonly-min-width); + min-inline-size: var(--custom-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); + height: var(--custom-actionbutton-height, var(--spectrum-actionbutton-height)); + + border-radius: var(--custom-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius)); + border-width: var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width)); /* Start with text-only padding */ - padding-inline: var(--spectrum-actionbutton-textonly-padding-left-adjusted) var(--spectrum-actionbutton-textonly-padding-right-adjusted); + padding-inline-start: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); + padding-inline-end: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); - border-width: var(--spectrum-actionbutton-textonly-border-size); - border-radius: var(--spectrum-actionbutton-textonly-border-radius); + background-color: var(--highcontrast-actionbutton-background-color-default, var(--custom-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); + border-color: var(--highcontrast-actionbutton-border-color-default, var(--custom-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); + color: var(--highcontrast-actionbutton-content-color-default, var(--custom-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default))); - font-size: var(--spectrum-actionbutton-textonly-text-size); - font-weight: var(--spectrum-actionbutton-textonly-text-font-weight); - line-height: var(--spectrum-actionbutton-textonly-text-line-height); + &:hover { + background-color: var(--highcontrast-actionbutton-background-color-hover, var(--custom-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover))); + border-color: var(--highcontrast-actionbutton-border-color-hover, var(--custom-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover))); + color: var(--highcontrast-actionbutton-content-color-hover, var(--custom-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover))); + } - /* Let static variants inherit their color */ - color: inherit; + &:focus-ring { + background-color: var(--highcontrast-actionbutton-background-color-focus, var(--custom-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus))); + border-color: var(--highcontrast-actionbutton-border-color-focus, var(--custom-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus))); + color: var(--highcontrast-actionbutton-content-color-focus, var(--custom-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus))); + } - .spectrum-Icon { - @inherit: %spectrum-ButtonIcon; + &:active { + background-color: var(--highcontrast-actionbutton-background-color-down, var(--custom-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))); + border-color: var(--highcontrast-actionbutton-border-color-down, var(--custom-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down))); + color: var(--highcontrast-actionbutton-content-color-down, var(--custom-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))); + } - /* Scoot over, assuming we have both icon and text */ - margin-inline-start: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))); + &:disabled, + &.is-disabled { + background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--custom-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); + border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--custom-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled))); + color: var(--highcontrast-actionbutton-content-color-disabled, var(--custom-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))); } +} - .spectrum-Icon + .spectrum-ActionButton-label { +a.spectrum-ActionButton { + @inherit: %spectrum-AnchorButton; +} + +.spectrum-ActionButton-icon { + width: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + height: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + + color: inherit; + + & + .spectrum-ActionButton-label { /* Have gap on on the left */ - padding-inline-start: var(--spectrum-actionbutton-texticon-icon-gap); + padding-inline-start: var(--custom-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)); - /* - Have no padding on the right (it's built into the element) - This will fail if --spectrum-actionbutton-textonly-padding-right !== --spectrum-actionbutton-padding-right - */ + /* Have no padding on the right (it's built into the element) */ padding-inline-end: 0; } - .spectrum-ActionButton-hold + .spectrum-Icon, - .spectrum-Icon:only-child { - /* Use icon-only padding, subtracted from the default text-only padding */ - margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-icononly-padding-left-adjusted))); - margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-right-adjusted) - var(--spectrum-actionbutton-icononly-padding-right-adjusted))); - } + padding-inline-start: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)))); +} + +.spectrum-ActionButton-hold + .spectrum-ActionButton-icon, +.spectrum-ActionButton-icon:only-child { + /* Use icon-only padding, subtracted from the default text-only padding */ + margin-inline-start: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)))); + margin-inline-end: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)))); } .spectrum-ActionButton-label { @inherit: %spectrum-ButtonLabel; + font-size: var(--custom-actionbutton-font-size, var(--spectrum-actionbutton-font-size)); white-space: nowrap; - overflow: hidden; + color: inherit; + text-overflow: ellipsis; + overflow: hidden; } .spectrum-ActionButton-hold { position: absolute; - inset-inline-end: var(--spectrum-actionbutton-textonly-hold-icon-padding-right); - inset-block-end: var(--spectrum-actionbutton-textonly-hold-icon-padding-bottom); - - transform: logical rotate(0deg); -} + inset-inline-end: calc(var(--custom-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); + inset-block-end: calc(var(--custom-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); -.spectrum-ActionButton--quiet { - border-width: var(--spectrum-actionbutton-quiet-textonly-border-size); - border-radius: var(--spectrum-actionbutton-quiet-textonly-border-radius); + color: inherit; - font-size: var(--spectrum-actionbutton-quiet-textonly-text-size); - font-weight: var(--spectrum-actionbutton-quiet-textonly-text-font-weight); + transform: logical rotate(0deg); } /* special cases for focus-ring */ .spectrum-ActionButton { - --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap); - --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size); - --spectrum-actionbutton-focus-ring-color: var(--spectrum-actionbutton-m-textonly-focus-ring-border-color-key-focus); - - transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out; + transition: border-color var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; &:after { + position: absolute; + inset: 0; + + margin: calc((var(--custom-actionbutton-focus-ring-gap, var(--spectrum-actionbutton-focus-ring-gap)) + var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))) * -1); + + border-radius: var(--custom-actionbutton-focus-ring-border-radius, var(--spectrum-actionbutton-focus-ring-border-radius)); + + transition: box-shadow var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; + pointer-events: none; content: ''; - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - margin: calc((var(--spectrum-actionbutton-focus-ring-gap) + var(--spectrum-actionbutton-textonly-border-size)) * -1); - border-radius: var(--spectrum-actionbutton-focus-ring-border-radius-adjusted); - transition: box-shadow var(--spectrum-global-animation-duration-100) ease-in-out; } &:focus-ring { - /* kill the default ring */ box-shadow: none !important; &:after { - box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-ring-size) var(--spectrum-actionbutton-focus-ring-color); + box-shadow: 0 0 0 var(--custom-actionbutton-focus-ring-thickness, var(--spectrum-actionbutton-focus-ring-thickness)) var(--highcontrast-actionbutton-focus-ring-color, var(--custom-actionbutton-focus-ring-color, var(--spectrum-actionbutton-focus-ring-color))); } } } - -.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-focus-ring-color: var(--spectrum-global-color-static-white); -} - -.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-focus-ring-color: var(--spectrum-global-color-static-black); -} - -.spectrum-ActionButton--emphasized.is-selected, -.spectrum-ActionButton--staticWhite, -.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap-emphasized); - --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size-emphasized); -} diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml index 75a07a21325..731cb619cdf 100644 --- a/components/actionbutton/metadata/actionbutton.yml +++ b/components/actionbutton/metadata/actionbutton.yml @@ -5,9 +5,47 @@ description: | - For Action Buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup - If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element. - If the hold icon is used, ensure that the element with the `.spectrum-ActionButton-hold` class comes before the `.spectrum-Icon` element. + - When using `.spectrum-ActionButton--staticWhite` or `.spectrum-ActionButton--staticblack`, use the `--custom-actionbutton-static-content-color` custom property to set the text color when selected. sections: + - name: Custom Properties API + description: | + Define a subset of the following properties on your own class, such as `.custom-ActionButton`, to customize ActionButton. + + These properties override all API options, but can be layered on top of them. + + | Custom property | + | ------------------------------------------------- | + | `--custom-actionbutton-background-color-default` | + | `--custom-actionbutton-background-color-hover` | + | `--custom-actionbutton-background-color-down` | + | `--custom-actionbutton-background-color-focus` | + | `--custom-actionbutton-background-color-disabled` | + | `--custom-actionbutton-border-color-default` | + | `--custom-actionbutton-border-color-hover` | + | `--custom-actionbutton-border-color-down` | + | `--custom-actionbutton-border-color-focus` | + | `--custom-actionbutton-border-color-disabled` | + | `--custom-actionbutton-content-color-default` | + | `--custom-actionbutton-content-color-hover` | + | `--custom-actionbutton-content-color-down` | + | `--custom-actionbutton-content-color-focus` | + | `--custom-actionbutton-content-color-disabled` | + | `--custom-actionbutton-focus-ring-color` | + | `--custom-actionbutton-static-content-color` | + | `--custom-actionbutton-min-width` | + | `--custom-actionbutton-height` | + | `--custom-actionbutton-icon-size` | + | `--custom-actionbutton-font-size` | + | `--custom-actionbutton-text-to-visual` | + | `--custom-actionbutton-edge-to-hold-icon` | + | `--custom-actionbutton-edge-to-visual` | + | `--custom-actionbutton-edge-to-text` | + | `--custom-actionbutton-edge-to-visual-only` | - name: Migration Guide description: | + ### Action Button now required a class on its icon + The `.spectrum-ActionButton-icon` class is now required on the icon. + ### T-shirt sizing Action Button now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-ActionButton--size*` class. @@ -52,14 +90,14 @@ examples: @@ -68,7 +106,7 @@ examples: - Edit @@ -99,7 +137,7 @@ examples: - Edit @@ -131,7 +169,7 @@ examples: - Edit @@ -163,7 +201,7 @@ examples: - Edit @@ -200,7 +238,7 @@ examples: - Edit @@ -231,7 +269,7 @@ examples: - Edit @@ -262,7 +300,7 @@ examples: - Edit @@ -293,7 +331,7 @@ examples: - Edit @@ -331,7 +369,7 @@ examples: - Edit @@ -362,7 +400,7 @@ examples: - Edit @@ -393,7 +431,7 @@ examples: - Edit @@ -424,7 +462,7 @@ examples: - Edit @@ -462,7 +500,7 @@ examples: - Edit @@ -493,7 +531,7 @@ examples: - Edit @@ -524,7 +562,7 @@ examples: - Edit @@ -555,7 +593,7 @@ examples: - Edit @@ -592,7 +630,7 @@ examples: - Edit @@ -623,7 +661,7 @@ examples: - Edit @@ -654,7 +692,7 @@ examples: - Edit @@ -685,7 +723,7 @@ examples: -
+

Default

@@ -707,14 +745,14 @@ examples: @@ -723,7 +761,7 @@ examples: - Edit @@ -754,7 +792,7 @@ examples: - Edit @@ -785,7 +823,7 @@ examples: - Edit @@ -816,7 +854,7 @@ examples: -
+

Default

@@ -839,14 +877,14 @@ examples: @@ -855,7 +893,7 @@ examples: - Edit @@ -886,7 +924,7 @@ examples: - Edit @@ -917,7 +955,7 @@ examples: - Edit @@ -948,7 +986,7 @@ examples: -
+

Default

@@ -972,14 +1010,14 @@ examples: @@ -988,7 +1026,7 @@ examples: - Edit @@ -1019,7 +1057,7 @@ examples: - Edit @@ -1050,7 +1088,7 @@ examples: - Edit @@ -1081,7 +1119,7 @@ examples: -
+

Default

@@ -1104,14 +1142,14 @@ examples: @@ -1120,7 +1158,7 @@ examples: - Edit @@ -1151,7 +1189,7 @@ examples: - Edit @@ -1182,7 +1220,7 @@ examples: - Edit @@ -1213,7 +1251,7 @@ examples: -
+ + - id: actionbutton-api + name: Customized + markup: | + + + diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index d02512313a5..efd1b122631 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -22,6 +22,7 @@ "@spectrum-css/component-builder": "^3.1.1", "@spectrum-css/icon": "^3.0.21", "@spectrum-css/vars": "^8.0.0", + "@spectrum-css/tokens": "^1.0.0-beta", "gulp": "^4.0.0" }, "publishConfig": { diff --git a/components/actionbutton/skin.css b/components/actionbutton/skin.css deleted file mode 100644 index 83a1fb36c35..00000000000 --- a/components/actionbutton/skin.css +++ /dev/null @@ -1,404 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -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 - -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. -*/ - -.spectrum-ActionButton { - /* Overridden because of the way we draw focus rings */ - --spectrum-actionbutton-m-quiet-textonly-border-size-key-focus: 1px; -} - -.spectrum-ActionButton { - background-color: var(--spectrum-actionbutton-m-textonly-background-color); - border-color: var(--spectrum-actionbutton-m-textonly-border-color); - color: var(--spectrum-actionbutton-m-textonly-text-color); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color); - } - - .spectrum-ActionButton-hold { - color: var(--spectrum-actionbutton-m-textonly-hold-icon-color); - } - - &:hover { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-hover); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-hover); - color: var(--spectrum-actionbutton-m-textonly-text-color-hover); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-hover); - } - - .spectrum-ActionButton-hold { - color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-hover); - } - } - - &:focus-ring { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-key-focus); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-key-focus); - color: var(--spectrum-actionbutton-m-textonly-text-color-key-focus); - - &:active { - border-color: var(--spectrum-actionbutton-m-textonly-border-color-key-focus); - } - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-key-focus); - } - - .spectrum-ActionButton-hold { - color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-key-focus); - } - } - - &:active { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-down); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-down); - color: var(--spectrum-actionbutton-m-textonly-text-color-down); - - .spectrum-ActionButton-hold { - color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-down); - } - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-disabled); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-disabled); - color: var(--spectrum-actionbutton-m-textonly-text-color-disabled); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-disabled); - } - - .spectrum-ActionButton-hold { - color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-disabled); - } - } - - &.is-selected { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected); - color: var(--spectrum-actionbutton-m-textonly-text-color-selected); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-selected); - } - - &:focus-ring { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-key-focus); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-key-focus); - color: var(--spectrum-actionbutton-m-textonly-text-color-selected-key-focus); - - &:active { - border-color: var(--spectrum-actionbutton-m-textonly-border-color-key-focus); - } - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-key-focus); - } - } - - &:hover { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-hover); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-hover); - color: var(--spectrum-actionbutton-m-textonly-text-color-selected-hover); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-hover); - } - } - - &:active { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-down); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-down); - color: var(--spectrum-actionbutton-m-textonly-text-color-selected-down); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-down); - } - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-disabled); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-disabled); - color: var(--spectrum-actionbutton-m-textonly-text-color-selected-disabled); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-disabled); - } - } - } -} - -.spectrum-ActionButton--emphasized { - &.spectrum-ActionButton--quiet.is-selected, - &.is-selected { - background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected); - border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected); - color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected); - } - - &:focus-ring { - background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-key-focus); - border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-key-focus); - color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-key-focus); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-key-focus); - } - } - - &:hover { - background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover); - border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover); - color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-hover); - } - } - - &.is-active { - background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down); - border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down); - color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-down); - } - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-disabled); - border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-disabled); - color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-disabled); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-disabled); - } - } - } -} - -.spectrum-ActionButton--quiet { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color); - - &:hover { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-hover); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-hover); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-hover); - } - - &:focus-ring { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-key-focus); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-key-focus); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-key-focus); - } - - &:active { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-down); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-down); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-down); - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-disabled); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-disabled); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-disabled); - } - - &.is-selected { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected); - - &:focus-ring { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-key-focus); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-key-focus); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-key-focus); - } - - &:hover { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-hover); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-hover); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-hover); - } - - &:active { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-down); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-down); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-down); - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled); - } - } -} - -.spectrum-ActionButton--staticBlack, -.spectrum-ActionButton--staticWhite { - /* required to make rgba() work with vars */ - --spectrum-global-color-static-black-rgb: 0, 0, 0; - --spectrum-global-color-static-white-rgb: 255, 255, 255; - --spectrum-ActionButton-static-black-color: var(--spectrum-global-color-static-black); - --spectrum-ActionButton-static-white-color: var(--spectrum-global-color-static-white); - - &.is-selected { - /* let selected styles get their color from parent elements */ - color: inherit !important; - } -} - -@media (forced-colors: active) { - .spectrum-ActionButton { - &:after { - forced-color-adjust: none; - } - &.is-selected { - &:not(.is-disabled) { - .spectrum-ActionButton-label { - forced-color-adjust: none; - } - } - } - &.spectrum-ActionButton--staticBlack, - &.spectrum-ActionButton--staticWhite { - &.is-selected { - &:not(:disabled, .is-disabled) { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected); - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected); - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected); - } - .spectrum-ActionButton-label { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected) ! important; - } - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected) ! important; - } - &:hover, - &:active, - &:focus-visible, - &.is-keyboardFocused { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected); - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected); - } - - .spectrum-ActionButton-label { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected); - } - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected); - } - } - } - &:disabled, - &.is-disabled { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled); - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled); - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled); - } - .spectrum-ActionButton-label { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled); - } - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled); - } - } - } - } - --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap-emphasized); - --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size-emphasized); - --spectrum-actionbutton-focus-ring-color: ButtonText; - - --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected: HighlightText; - --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-down: HighlightText; - --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-background-color-selected: Highlight; - --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-disabled: ButtonFace; - --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down: Highlight; - --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover: Highlight; - --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-key-focus: Highlight; - --spectrum-actionbutton-m-emphasized-textonly-border-color-selected: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-hold-icon-color-selected: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-down: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-hover: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-selected: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-background-color-selected: Highlight; - --spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled: ButtonFace; - --spectrum-actionbutton-m-quiet-textonly-background-color-selected-down: Highlight; - --spectrum-actionbutton-m-quiet-textonly-background-color-selected-hover: Highlight; - --spectrum-actionbutton-m-quiet-textonly-background-color-selected-key-focus: Highlight; - --spectrum-actionbutton-m-quiet-textonly-border-color: ButtonFace; - --spectrum-actionbutton-m-quiet-textonly-border-color-down: Highlight; - --spectrum-actionbutton-m-quiet-textonly-border-color-hover: Highlight; - --spectrum-actionbutton-m-quiet-textonly-border-color-selected: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-quiet-textonly-border-color-selected-down: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-border-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-border-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-text-color-selected: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-quiet-textonly-text-color-selected-down: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-text-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-text-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-texticon-icon-color-selected: HighlightText; - --spectrum-actionbutton-m-texticon-icon-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-texticon-icon-color-selected-down: HighlightText; - --spectrum-actionbutton-m-texticon-icon-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-texticon-icon-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-textonly-background-color-selected: Highlight; - --spectrum-actionbutton-m-textonly-background-color-selected-disabled: ButtonFace; - --spectrum-actionbutton-m-textonly-background-color-selected-down: Highlight; - --spectrum-actionbutton-m-textonly-background-color-selected-hover: Highlight; - --spectrum-actionbutton-m-textonly-background-color-selected-key-focus: Highlight; - --spectrum-actionbutton-m-textonly-border-color-selected: HighlightText; - --spectrum-actionbutton-m-textonly-border-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-textonly-border-color-selected-down: HighlightText; - --spectrum-actionbutton-m-textonly-border-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-textonly-border-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-textonly-text-color-selected: HighlightText; - --spectrum-actionbutton-m-textonly-text-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-textonly-text-color-selected-down: HighlightText; - --spectrum-actionbutton-m-textonly-text-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-textonly-text-color-selected-key-focus: HighlightText; - } -} From 4612de3cac812402e6e5e9b02bae12916273918c Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Mon, 23 May 2022 14:53:11 -0700 Subject: [PATCH 03/45] feat: start on postcss-containerizer --- tools/postcss-containerizer/README.md | 71 ++++++++++++++++++ .../postcss-containerizer/expected/basic.css | 13 ++++ .../postcss-containerizer/fixtures/basic.css | 19 +++++ tools/postcss-containerizer/index.js | 75 +++++++++++++++++++ tools/postcss-containerizer/package.json | 14 ++++ tools/postcss-containerizer/test.js | 26 +++++++ 6 files changed, 218 insertions(+) create mode 100644 tools/postcss-containerizer/README.md create mode 100644 tools/postcss-containerizer/expected/basic.css create mode 100644 tools/postcss-containerizer/fixtures/basic.css create mode 100644 tools/postcss-containerizer/index.js create mode 100644 tools/postcss-containerizer/package.json create mode 100644 tools/postcss-containerizer/test.js diff --git a/tools/postcss-containerizer/README.md b/tools/postcss-containerizer/README.md new file mode 100644 index 00000000000..45a3e64960b --- /dev/null +++ b/tools/postcss-containerizer/README.md @@ -0,0 +1,71 @@ +# postcss-containerizer +> Turn container queries into var space hacks + +## Installation + +```sh +npm install postcss-containerizer +postcss -u postcss-containerizer -o dist/index.css src/index.css +``` + +## Usage + +This plugin turns this: + +```css +@container(--system: standard) { + .component { + --background-color: blue; + } +} + +@container(--system: express) { + .component { + --background-color: purple; + } +} +``` + +Into this: + +``` +.component { + --system-spectrum-component-background-color: var(--system-spectrum) blue; + --system-express-component-background-color: var(--system-express) purple; + + --background-color: var( + --system-express-component-background-color, + var(--system-spectrum-component-background-color) + ); +} +``` + +Or should it turn: + +```css +@container(--system: standard) { + .component { + --background-color: blue; + } +} + +@container(--system: express) { + .component { + --background-color: purple; + } +} +``` + +Into this: + +``` +.component { + --system-express-background-color: var(--system-express) purple; + + --background-color: var( + --system-express-background-color, + blue + ); +} +``` + diff --git a/tools/postcss-containerizer/expected/basic.css b/tools/postcss-containerizer/expected/basic.css new file mode 100644 index 00000000000..d452bfa5384 --- /dev/null +++ b/tools/postcss-containerizer/expected/basic.css @@ -0,0 +1,13 @@ +.component { + --system-spectrum-background-color: var(--system-spectrum) blue; + --system-express-background-color: var(--system-express) purple; + --background-color: var(--system-express-background-color, var(--system-spectrum-background-color)); + --system-spectrum-border-color: var(--system-spectrum) darkblue; + --system-express-border-color: var(--system-express) darkpurple; + --border-color: var(--system-express-border-color, var(--system-spectrum-border-color)) +} +.icon .component { + --system-spectrum-color: var(--system-spectrum) gray; + --system-express-color: var(--system-express) white; + --color: var(--system-express-color, var(--system-spectrum-color)) +} diff --git a/tools/postcss-containerizer/fixtures/basic.css b/tools/postcss-containerizer/fixtures/basic.css new file mode 100644 index 00000000000..5d09e3b5c07 --- /dev/null +++ b/tools/postcss-containerizer/fixtures/basic.css @@ -0,0 +1,19 @@ +@container(--system: spectrum) { + .component { + --background-color: blue; + --border-color: darkblue; + .icon { + --color: gray; + } + } +} + +@container(--system: express) { + .component { + --background-color: purple; + --border-color: darkpurple; + .icon { + --color: white; + } + } +} diff --git a/tools/postcss-containerizer/index.js b/tools/postcss-containerizer/index.js new file mode 100644 index 00000000000..bc6116ef870 --- /dev/null +++ b/tools/postcss-containerizer/index.js @@ -0,0 +1,75 @@ +const postcss = require('postcss'); + +function process(root) { + const selectorMap = {}; + root.walkAtRules(container => { + if (container.name === 'container') { + const [, identifier, value] = container.params.match(/\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/); + + const identifierKey = `${identifier}-${value}`; + + // Walk all declarations, find their selector, store in map + container.walkDecls(decl => { + const selectorPath = []; + let parent = decl.parent; + while (parent !== container) { + selectorPath.push(parent.selector); + parent = parent.parent; + } + const valueNode = selectorMap[selectorPath.join(' ')] = selectorMap[selectorPath.join(' ')] || {}; + const identifierNode = valueNode[decl.prop] = valueNode[decl.prop] || {}; + + identifierNode[identifierKey] = decl.value; + }); + + container.remove(); + } + }); + + // Process each selector + for (let [selector, props] of Object.entries(selectorMap)) { + // todo: put it back in the right place + const rule = postcss.rule({ + selector + }); + + for (let [prop, values] of Object.entries(props)) { + const variableList = []; + for (let [identifier, value] of Object.entries(values)) { + const variableName = `--${identifier}-${prop.replace(/^--/, '')}`; + variableList.push(variableName); + const decl = postcss.decl({ + prop: variableName, + value: `var(--${identifier}) ${value}` + }); + + rule.append(decl); + } + + // Add the final rule + let varString = ''; + variableList.reverse().forEach((variable, i) => { + varString += `var(${variable}`; + if (i !== variableList.length - 1) { + varString += ', '; + } + }); + varString += ')'.repeat(variableList.length); + + const decl = postcss.decl({ + prop, + value: varString + }); + + rule.append(decl); + } + + root.append(rule); + } +} + +module.exports = postcss.plugin('postcss-containerizer', function() { + return (root, result) => { + process(root); + } +}); diff --git a/tools/postcss-containerizer/package.json b/tools/postcss-containerizer/package.json new file mode 100644 index 00000000000..e9b343a1db4 --- /dev/null +++ b/tools/postcss-containerizer/package.json @@ -0,0 +1,14 @@ +{ + "name": "postcss-containerizer", + "version": "1.0.0-beta.0", + "description": "Turn container queryies into the var hack", + "main": "index.js", + "scripts": { + "test": "ava" + }, + "author": "Larry Davis ", + "license": "BSD-2-Clause", + "dependencies": { + "postcss": "^7.0.32" + } +} diff --git a/tools/postcss-containerizer/test.js b/tools/postcss-containerizer/test.js new file mode 100644 index 00000000000..d3732eff996 --- /dev/null +++ b/tools/postcss-containerizer/test.js @@ -0,0 +1,26 @@ +const fs = require('fs'); +const test = require('ava'); +const postcss = require('postcss'); +const plugin = require('./index.js'); + +function compare(t, fixtureFilePath, expectedFilePath, options = {}){ + return postcss([ plugin(options) ]) + .process( + readFile(`./fixtures/${fixtureFilePath}`), + { from: fixtureFilePath } + ) + .then(result => { + const actual = result.css; + const expected = readFile(`./expected/${expectedFilePath}`); + t.is(actual, expected); + t.is(result.warnings().length, 0); + }); +} + +function readFile(filename) { + return fs.readFileSync(filename, 'utf8'); +} + +test('create variables', t => { + return compare(t, 'basic.css', 'basic.css'); +}); From 5b448aabfd2017e6114955d7624f8f50496d4bcd Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Mon, 23 May 2022 16:28:57 -0700 Subject: [PATCH 04/45] test: add multisystem tests --- .../expected/multisystem.css | 16 ++++++++++ .../fixtures/multisystem.css | 29 +++++++++++++++++++ tools/postcss-containerizer/test.js | 6 +++- 3 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 tools/postcss-containerizer/expected/multisystem.css create mode 100644 tools/postcss-containerizer/fixtures/multisystem.css diff --git a/tools/postcss-containerizer/expected/multisystem.css b/tools/postcss-containerizer/expected/multisystem.css new file mode 100644 index 00000000000..1cfa31f0666 --- /dev/null +++ b/tools/postcss-containerizer/expected/multisystem.css @@ -0,0 +1,16 @@ +.component { + --system-spectrum-background-color: var(--system-spectrum) blue; + --system-express-background-color: var(--system-express) purple; + --system-next-background-color: var(--system-next) brown; + --background-color: var(--system-next-background-color, var(--system-express-background-color, var(--system-spectrum-background-color))); + --system-spectrum-border-color: var(--system-spectrum) darkblue; + --system-express-border-color: var(--system-express) darkpurple; + --system-next-border-color: var(--system-next) darkbrown; + --border-color: var(--system-next-border-color, var(--system-express-border-color, var(--system-spectrum-border-color))) +} +.icon .component { + --system-spectrum-color: var(--system-spectrum) gray; + --system-express-color: var(--system-express) white; + --system-next-color: var(--system-next) white; + --color: var(--system-next-color, var(--system-express-color, var(--system-spectrum-color))) +} diff --git a/tools/postcss-containerizer/fixtures/multisystem.css b/tools/postcss-containerizer/fixtures/multisystem.css new file mode 100644 index 00000000000..4bfe2d0708b --- /dev/null +++ b/tools/postcss-containerizer/fixtures/multisystem.css @@ -0,0 +1,29 @@ +@container(--system: spectrum) { + .component { + --background-color: blue; + --border-color: darkblue; + .icon { + --color: gray; + } + } +} + +@container(--system: express) { + .component { + --background-color: purple; + --border-color: darkpurple; + .icon { + --color: white; + } + } +} + +@container(--system: next) { + .component { + --background-color: brown; + --border-color: darkbrown; + .icon { + --color: white; + } + } +} diff --git a/tools/postcss-containerizer/test.js b/tools/postcss-containerizer/test.js index d3732eff996..c5b773749f3 100644 --- a/tools/postcss-containerizer/test.js +++ b/tools/postcss-containerizer/test.js @@ -21,6 +21,10 @@ function readFile(filename) { return fs.readFileSync(filename, 'utf8'); } -test('create variables', t => { +test('create basic output for 2 systems', t => { return compare(t, 'basic.css', 'basic.css'); }); + +test('create output for 3 systems', t => { + return compare(t, 'multisystem.css', 'multisystem.css'); +}); From 67ef883bfaebbcef1791a0e43e16505fb2ce8693 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Mon, 23 May 2022 22:03:14 -0700 Subject: [PATCH 05/45] refactor: rename, comment --- tools/postcss-containerizer/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/tools/postcss-containerizer/index.js b/tools/postcss-containerizer/index.js index bc6116ef870..0054237aff4 100644 --- a/tools/postcss-containerizer/index.js +++ b/tools/postcss-containerizer/index.js @@ -16,8 +16,9 @@ function process(root) { selectorPath.push(parent.selector); parent = parent.parent; } - const valueNode = selectorMap[selectorPath.join(' ')] = selectorMap[selectorPath.join(' ')] || {}; - const identifierNode = valueNode[decl.prop] = valueNode[decl.prop] || {}; + const selector = selectorPath.join(' '); + const selectorNode = selectorMap[selector] = selectorMap[selector] || {}; + const identifierNode = selectorNode[decl.prop] = selectorNode[decl.prop] || {}; identifierNode[identifierKey] = decl.value; }); @@ -34,6 +35,7 @@ function process(root) { }); for (let [prop, values] of Object.entries(props)) { + // Add a declaration for each identifier const variableList = []; for (let [identifier, value] of Object.entries(values)) { const variableName = `--${identifier}-${prop.replace(/^--/, '')}`; @@ -46,7 +48,7 @@ function process(root) { rule.append(decl); } - // Add the final rule + // Add the final declaration let varString = ''; variableList.reverse().forEach((variable, i) => { varString += `var(${variable}`; From 535126b2e86eb3468a3a0ee473fb59a278bdcfb0 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 10:25:59 -0700 Subject: [PATCH 06/45] feat: add simple component builder --- tools/bundle-builder/lib/depUtils.js | 3 +- tools/component-builder-simple/css/index.js | 116 ++++++++++++++++++ .../postcss-custom-properties-passthrough.js | 29 +++++ .../css/plugins/postcss-strip-comments.js | 35 ++++++ .../css/plugins/postcss-transform-logical.js | 86 +++++++++++++ .../css/processors.js | 54 ++++++++ tools/component-builder-simple/index.js | 41 +++++++ tools/component-builder-simple/package.json | 42 +++++++ tools/component-builder/docs/index.js | 3 +- 9 files changed, 407 insertions(+), 2 deletions(-) create mode 100644 tools/component-builder-simple/css/index.js create mode 100644 tools/component-builder-simple/css/plugins/postcss-custom-properties-passthrough.js create mode 100644 tools/component-builder-simple/css/plugins/postcss-strip-comments.js create mode 100644 tools/component-builder-simple/css/plugins/postcss-transform-logical.js create mode 100644 tools/component-builder-simple/css/processors.js create mode 100644 tools/component-builder-simple/index.js create mode 100644 tools/component-builder-simple/package.json diff --git a/tools/bundle-builder/lib/depUtils.js b/tools/bundle-builder/lib/depUtils.js index e4a2a2553e6..b018c1ec94e 100644 --- a/tools/bundle-builder/lib/depUtils.js +++ b/tools/bundle-builder/lib/depUtils.js @@ -29,7 +29,8 @@ async function getDependencies(package) { dependencies = Object.keys(pkg.devDependencies).filter((dep) => { return dep.indexOf('@spectrum-css') === 0 && dep !== '@spectrum-css/bundle-builder' && - dep !== '@spectrum-css/component-builder'; + dep !== '@spectrum-css/component-builder' && + dep !== '@spectrum-css/component-builder-simple'; }); } diff --git a/tools/component-builder-simple/css/index.js b/tools/component-builder-simple/css/index.js new file mode 100644 index 00000000000..088cc5db682 --- /dev/null +++ b/tools/component-builder-simple/css/index.js @@ -0,0 +1,116 @@ +/* +Copyright 2019 Adobe. All rights reserved. +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 + +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. +*/ + +const gulp = require('gulp'); +const path = require('path'); +const through = require('through2'); +const postcss = require('gulp-postcss'); +const postcssReal = require('postcss'); +const processors = require('./processors').processors; +const fsp = require('fs').promises; + +function getTokensUsedInCSS(root, coreTokens, componentTokens) { + let usedTokens = []; + let coreTokensUsed = {}; + let componentTokensUsed = {}; + + root.walkRules((rule, ruleIndex) => { + rule.walkDecls((decl) => { + let matches = decl.value.match(/var\(.*?\)/g); + if (matches) { + matches.forEach(function(match) { + let tokenName = match.replace(/var\((--[\w\-]+),?.*?\)/, '$1').trim(); + if (coreTokens[tokenName]) { + coreTokensUsed[tokenName] = (coreTokensUsed[tokenName] ?? 0) + 1; + } + else if (componentTokens[tokenName]) { + componentTokensUsed[tokenName] = (componentTokensUsed[tokenName] ?? 0) + 1; + } + if (usedTokens.indexOf(tokenName) === -1) { + usedTokens.push(tokenName); + } + }); + } + }); + }); + + return { usedTokens, coreTokensUsed, componentTokensUsed }; +} + +function getTokensDefinedInCSS(root) { + let variables = {}; + + root.walkRules((rule, ruleIndex) => { + rule.walkDecls((decl) => { + if (decl.prop.startsWith('--')) { + variables[decl.prop] = decl.value; + } + }); + }); + + return variables; +} + +async function getCoreTokens() { + const coreTokensFile = require.resolve('@spectrum-css/tokens'); + let contents = await fsp.readFile(coreTokensFile, 'utf8'); + let root = postcssReal.parse(contents); + return getTokensDefinedInCSS(root); +} + +function buildCSS() { + return gulp.src('index.css') + .pipe(postcss(processors)) + .pipe(gulp.dest('dist/')); +} + +let coreTokens = null; +function checkCSS() { + return gulp.src('dist/index.css') + .pipe(through.obj(async function doBake(file, enc, cb) { + // Fetch core tokes once during the build + if (coreTokens === null) { + coreTokens = await getCoreTokens(); + } + + let pkg = JSON.parse(await fsp.readFile(path.join('package.json'))); + + // Parse only once + let root = postcssReal.parse(file.contents); + + // Get tokens defined inside of the component + let componentTokens = getTokensDefinedInCSS(root); + + // Find all custom properties used in the component + let { usedTokens, coreTokensUsed, componentTokensUsed } = getTokensUsedInCSS(root, coreTokens, componentTokens); + + // For each color stop and scale, filter the variables for those matching the component + let errors = []; + usedTokens.forEach(tokenName => { + if (!coreTokens[tokenName] && !componentTokens[tokenName] && !tokenName.startsWith('--custom') && !tokenName.startsWith('--highcontrast')) { + errors.push(`${pkg.name} uses undefined token ${tokenName}`); + } + }); + + if (errors.length) { + return cb(new Error(errors.join('\n')), file); + } + + cb(null); + })); +} + +exports.checkCSS = checkCSS; +exports.buildCSS = gulp.series( + buildCSS, + checkCSS +); diff --git a/tools/component-builder-simple/css/plugins/postcss-custom-properties-passthrough.js b/tools/component-builder-simple/css/plugins/postcss-custom-properties-passthrough.js new file mode 100644 index 00000000000..41ae55b41a6 --- /dev/null +++ b/tools/component-builder-simple/css/plugins/postcss-custom-properties-passthrough.js @@ -0,0 +1,29 @@ +/* +Copyright 2019 Adobe. All rights reserved. +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 + +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. +*/ +var postcss = require('postcss'); + +module.exports = postcss.plugin('postcss-custom-properties-passthrough', function (opts) { + opts = opts || {}; + + return function (root, result) { + root.walkRules((rule, ruleIndex) => { + rule.walkDecls((decl) => { + if (decl.value.match('xvar\(.*?\)')) { + decl.value = decl.value.substr(1); + } + if (decl.prop.substr(0,3) === 'x--') { + decl.prop = decl.prop.substr(1); + } + }); + }); + } +}); diff --git a/tools/component-builder-simple/css/plugins/postcss-strip-comments.js b/tools/component-builder-simple/css/plugins/postcss-strip-comments.js new file mode 100644 index 00000000000..5ef63481a01 --- /dev/null +++ b/tools/component-builder-simple/css/plugins/postcss-strip-comments.js @@ -0,0 +1,35 @@ +/* +Copyright 2019 Adobe. All rights reserved. +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 + +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. +*/ +const postcss = require('postcss'); + +module.exports = postcss.plugin('postcss-strip-comments', (opts = {}) => { + return css => { + css.walk(node => { + if (node.type === 'comment') { + if (node.text.trim().indexOf('topdoc') === 0 && opts.preserveTopdoc) { + return; + } + + // Get a reference to the parent before the node is removed + let parent = node.parent; + + node.remove(); + + // If the comment was the last thing left in its parent, remove the parent + if (parent && parent.nodes && parent.nodes.length === 0) { + parent.remove(); + } + return; + } + }); + }; +}); \ No newline at end of file diff --git a/tools/component-builder-simple/css/plugins/postcss-transform-logical.js b/tools/component-builder-simple/css/plugins/postcss-transform-logical.js new file mode 100644 index 00000000000..dafc0e7bcd2 --- /dev/null +++ b/tools/component-builder-simple/css/plugins/postcss-transform-logical.js @@ -0,0 +1,86 @@ +/* +Copyright 2019 Adobe. All rights reserved. +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 + +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. +*/ +const postcss = require('postcss'); +const { parse } = require('postcss-values-parser'); + +const selectorParser = require('postcss-selector-parser'); +const addDir = selectors => { + selectors.each(selector => { + let dirPseudo = selectorParser.pseudo({value: ':dir(rtl)'}); + selector.append(dirPseudo); + }); +}; + +const matrix = 'matrix(-1, 0, 0, 1, 0, 0)'; + +module.exports = postcss.plugin('postcss-transform-logical', function (opts) { + opts = opts || {}; + + return function (root, result) { + root.walkRules((rule, ruleIndex) => { + rule.walkDecls((decl) => { + if (decl.prop === 'transform') { + let value; + try { + value = parse(decl.value); + } + catch (err) { + console.warn('postcss-transform-logical: could not parse %s', decl.value); + } + + if (value && value.nodes[0].value === 'logical') { + // Drop logical + value.nodes[0].remove(); + + let originalRotation = null; + let rotationNode = null; + value.walkFuncs((node, index, nodes) => { + if (node.name === 'rotate') { + originalRotation = node.nodes[0].value; + rotationNode = node; + } + else if (node.name === 'matrix') { + throw new Error('postcss-transform-logical: logical flips cannot be performed on transforms that use matrix()'); + } + }); + + if (rotationNode !== null) { + // Ignore 0 deg initial rotations for LTR; this means we meant for it to be standard rotation for LTR + if (parseInt(originalRotation, 10) !== 0) { + let ltrRule = postcss.parse(`${rule.selector}:dir(ltr) { transform: ${value}; }`); + root.insertBefore(rule, ltrRule); + + // Use the same rotation, but flip horizontal + let rtlRule = postcss.parse(`${rule.selector}:dir(rtl) { transform: ${matrix} ${value}; }`); + root.insertBefore(rule, rtlRule); + } + else { + // Drop the unnecessary rotation + rotationNode.remove(); + + // Add direction to all matching selectors + let newSelector = selectorParser(addDir).processSync(rule.selector); + + // Just flip horizontal + let rtlRule = postcss.parse(`${newSelector} { transform: ${matrix} ${value}; }`); + root.insertBefore(rule, rtlRule); + } + + // Remove original declaration + decl.remove(); + } + } + } + }); + }); + } +}); diff --git a/tools/component-builder-simple/css/processors.js b/tools/component-builder-simple/css/processors.js new file mode 100644 index 00000000000..01f6f2ee772 --- /dev/null +++ b/tools/component-builder-simple/css/processors.js @@ -0,0 +1,54 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +function getProcessors() { + return [ + require('postcss-import'), + require('postcss-containerizer'), + require('postcss-nested'), + require('postcss-inherit'), + require('postcss-logical')(), + require('./plugins/postcss-transform-logical')(), + require('postcss-dir-pseudo-class')(), + require('./plugins/postcss-custom-properties-passthrough')(), + require('postcss-calc'), + require('postcss-svg'), + require('postcss-functions')({ + functions: { + noscale: function (value) { + return value.toString().toUpperCase(); + }, + percent: function (value) { + return parseInt(value, 10) / 100; + } + } + }), + require('./plugins/postcss-strip-comments')({ preserveTopdoc: false }), + require('postcss-dropunusedvars'), + require('postcss-dropdupedvars'), + require('postcss-droproot'), + require('postcss-focus-ring'), + require('postcss-discard-empty'), + require('autoprefixer')({ + 'browsers': [ + 'IE >= 10', + 'last 2 Chrome versions', + 'last 2 Firefox versions', + 'last 2 Safari versions', + 'last 2 iOS versions' + ] + }) + ]; +} + +exports.getProcessors = getProcessors; +exports.processors = getProcessors(); diff --git a/tools/component-builder-simple/index.js b/tools/component-builder-simple/index.js new file mode 100644 index 00000000000..cddd08aa691 --- /dev/null +++ b/tools/component-builder-simple/index.js @@ -0,0 +1,41 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +const gulp = require('gulp'); +const rename = require('gulp-rename'); +const del = require('del'); +const css = require('./css'); + +function clean() { + return del('dist/*'); +} + +const build = gulp.series( + clean, + css.buildCSS, + function copyIndex() { + // Just copy index.vars as index.css to maintain backwards compat + return gulp.src('dist/index.css') + .pipe(rename((file) => { + file.basename = 'index-vars'; + })) + .pipe(gulp.dest('dist/')) + } +); + +exports.default = build; +exports.build = build; +exports.buildLite = build; +exports.buildMedium = build; +exports.buildHeavy = build; +exports.clean = clean; +exports.buildCSS = build; diff --git a/tools/component-builder-simple/package.json b/tools/component-builder-simple/package.json new file mode 100644 index 00000000000..cc3707b823b --- /dev/null +++ b/tools/component-builder-simple/package.json @@ -0,0 +1,42 @@ +{ + "name": "@spectrum-css/component-builder-simple", + "version": "1.0.0-beta.0", + "description": "The Spectrum CSS simple component builder", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "tools/component-builder" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "license": "Apache-2.0", + "peerDependencies": { + "@spectrum-css/tokens": "^1.0.0-beta" + }, + "dependencies": { + "autoprefixer": "^6.5.3", + "del": "^5.0.0", + "gulp": "^4.0.0", + "gulp-rename": "^1.4.0", + "gulp-postcss": "^7.0.0", + "postcss": "^7.0.36", + "postcss-calc": "^6.0.0", + "postcss-containerizer": "^1.0.0-beta", + "postcss-dir-pseudo-class": "^5.0.0", + "postcss-discard-empty": "^4.0.1", + "postcss-dropdupedvars": "^1.1.2", + "postcss-dropunusedvars": "^1.2.1", + "postcss-focus-ring": "^1.0.0", + "postcss-functions": "^3.0.0", + "postcss-import": "^10.0.0", + "postcss-inherit": "^4.0.3", + "postcss-logical": "^4.0.2", + "postcss-mixins": "^6.2.1", + "postcss-nested": "^3.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-svg": "^3.0.0", + "postcss-values-parser": "^3.1.1", + "through2": "^3.0.1" + } +} diff --git a/tools/component-builder/docs/index.js b/tools/component-builder/docs/index.js index ba2e1c21c0e..e74242c9f14 100644 --- a/tools/component-builder/docs/index.js +++ b/tools/component-builder/docs/index.js @@ -40,7 +40,8 @@ async function getDependencies(packagePath = '') { return ( dep.indexOf('@spectrum-css') === 0 && dep !== '@spectrum-css/bundle-builder' && - dep !== '@spectrum-css/component-builder' + dep !== '@spectrum-css/component-builder' && + dep !== '@spectrum-css/component-builder-simple' ); }) .map((dep) => dep.split('/').pop()); From 3f7ad337cfd63c64055d67f777cb4ca23205bd0c Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 10:39:25 -0700 Subject: [PATCH 07/45] feat: don't support nested selectors, it's not your job! --- .../postcss-containerizer/expected/basic.css | 2 +- .../expected/multisystem.css | 2 +- .../postcss-containerizer/fixtures/basic.css | 13 ++++++------ .../fixtures/multisystem.css | 21 +++++++++++-------- tools/postcss-containerizer/index.js | 8 +------ 5 files changed, 22 insertions(+), 24 deletions(-) diff --git a/tools/postcss-containerizer/expected/basic.css b/tools/postcss-containerizer/expected/basic.css index d452bfa5384..d064f7c75c4 100644 --- a/tools/postcss-containerizer/expected/basic.css +++ b/tools/postcss-containerizer/expected/basic.css @@ -6,7 +6,7 @@ --system-express-border-color: var(--system-express) darkpurple; --border-color: var(--system-express-border-color, var(--system-spectrum-border-color)) } -.icon .component { +.component .icon { --system-spectrum-color: var(--system-spectrum) gray; --system-express-color: var(--system-express) white; --color: var(--system-express-color, var(--system-spectrum-color)) diff --git a/tools/postcss-containerizer/expected/multisystem.css b/tools/postcss-containerizer/expected/multisystem.css index 1cfa31f0666..fd1fbcdc7a2 100644 --- a/tools/postcss-containerizer/expected/multisystem.css +++ b/tools/postcss-containerizer/expected/multisystem.css @@ -8,7 +8,7 @@ --system-next-border-color: var(--system-next) darkbrown; --border-color: var(--system-next-border-color, var(--system-express-border-color, var(--system-spectrum-border-color))) } -.icon .component { +.component .icon { --system-spectrum-color: var(--system-spectrum) gray; --system-express-color: var(--system-express) white; --system-next-color: var(--system-next) white; diff --git a/tools/postcss-containerizer/fixtures/basic.css b/tools/postcss-containerizer/fixtures/basic.css index 5d09e3b5c07..72e45c221a4 100644 --- a/tools/postcss-containerizer/fixtures/basic.css +++ b/tools/postcss-containerizer/fixtures/basic.css @@ -2,9 +2,9 @@ .component { --background-color: blue; --border-color: darkblue; - .icon { - --color: gray; - } + } + .component .icon { + --color: gray; } } @@ -12,8 +12,9 @@ .component { --background-color: purple; --border-color: darkpurple; - .icon { - --color: white; - } + + } + .component .icon { + --color: white; } } diff --git a/tools/postcss-containerizer/fixtures/multisystem.css b/tools/postcss-containerizer/fixtures/multisystem.css index 4bfe2d0708b..7680673f0ff 100644 --- a/tools/postcss-containerizer/fixtures/multisystem.css +++ b/tools/postcss-containerizer/fixtures/multisystem.css @@ -2,9 +2,10 @@ .component { --background-color: blue; --border-color: darkblue; - .icon { - --color: gray; - } + } + + .component .icon { + --color: gray; } } @@ -12,9 +13,10 @@ .component { --background-color: purple; --border-color: darkpurple; - .icon { - --color: white; - } + } + + .component .icon { + --color: white; } } @@ -22,8 +24,9 @@ .component { --background-color: brown; --border-color: darkbrown; - .icon { - --color: white; - } + } + + .component .icon { + --color: white; } } diff --git a/tools/postcss-containerizer/index.js b/tools/postcss-containerizer/index.js index 0054237aff4..fbae76b93bc 100644 --- a/tools/postcss-containerizer/index.js +++ b/tools/postcss-containerizer/index.js @@ -10,13 +10,7 @@ function process(root) { // Walk all declarations, find their selector, store in map container.walkDecls(decl => { - const selectorPath = []; - let parent = decl.parent; - while (parent !== container) { - selectorPath.push(parent.selector); - parent = parent.parent; - } - const selector = selectorPath.join(' '); + const selector = decl.parent.selector; const selectorNode = selectorMap[selector] = selectorMap[selector] || {}; const identifierNode = selectorNode[decl.prop] = selectorNode[decl.prop] || {}; From 27fc9a410a81ac254260563fc1faf3e37f29bc35 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 10:48:14 -0700 Subject: [PATCH 08/45] fix: correct order of compliation, don't complain about --system --- tools/component-builder-simple/css/index.js | 2 +- tools/component-builder-simple/css/processors.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tools/component-builder-simple/css/index.js b/tools/component-builder-simple/css/index.js index 088cc5db682..cccdceca839 100644 --- a/tools/component-builder-simple/css/index.js +++ b/tools/component-builder-simple/css/index.js @@ -96,7 +96,7 @@ function checkCSS() { // For each color stop and scale, filter the variables for those matching the component let errors = []; usedTokens.forEach(tokenName => { - if (!coreTokens[tokenName] && !componentTokens[tokenName] && !tokenName.startsWith('--custom') && !tokenName.startsWith('--highcontrast')) { + if (!coreTokens[tokenName] && !componentTokens[tokenName] && !tokenName.startsWith('--custom') && !tokenName.startsWith('--system') && !tokenName.startsWith('--highcontrast')) { errors.push(`${pkg.name} uses undefined token ${tokenName}`); } }); diff --git a/tools/component-builder-simple/css/processors.js b/tools/component-builder-simple/css/processors.js index 01f6f2ee772..3a024b3c468 100644 --- a/tools/component-builder-simple/css/processors.js +++ b/tools/component-builder-simple/css/processors.js @@ -13,8 +13,8 @@ governing permissions and limitations under the License. function getProcessors() { return [ require('postcss-import'), - require('postcss-containerizer'), require('postcss-nested'), + require('postcss-containerizer'), require('postcss-inherit'), require('postcss-logical')(), require('./plugins/postcss-transform-logical')(), From e5a66e41c2a0d45780bebdb4282d4bbafb21e485 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 10:48:52 -0700 Subject: [PATCH 09/45] feat: add support for switching on --system --- components/tokens/custom.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/components/tokens/custom.css b/components/tokens/custom.css index f792877800b..8edad6ce729 100644 --- a/components/tokens/custom.css +++ b/components/tokens/custom.css @@ -11,9 +11,31 @@ governing permissions and limitations under the License. */ /* This file contains overrides and additions to core tokens */ +:root { + --ON: ; + --OFF: inherit; + --system-spectrum: var(--OFF); + --system-express: var(--OFF); +} + +.spectrum { + --system-spectrum: var(--ON); +} + +.spectrum--express { + --system-express: var(--ON); +} .spectrum { --spectrum-animation-duration-100: 130ms; + + --spectrum-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-font-family-serif: adobe-clean-serif, 'Source Serif Pro', Georgia, serif; + --spectrum-font-family-code: 'Source Code Pro', Monaco, monospace; + + --spectrum-line-height-large: 1.7; + --spectrum-line-height-medium: 1.5; + --spectrum-line-height-small: 1.3; } .spectrum--medium { From c7b230c1a326153c71044f19f1dd7c745e1096f1 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 10:49:09 -0700 Subject: [PATCH 10/45] refactor: use containers for ActionButton --- components/actionbutton/gulpfile.js | 2 +- components/actionbutton/index.css | 8 +- components/actionbutton/package.json | 2 +- components/commons/basebutton-coretokens.css | 106 +++++++++++++++++++ 4 files changed, 113 insertions(+), 5 deletions(-) create mode 100644 components/commons/basebutton-coretokens.css diff --git a/components/actionbutton/gulpfile.js b/components/actionbutton/gulpfile.js index 3d2a7fa4e41..f13104999f1 100644 --- a/components/actionbutton/gulpfile.js +++ b/components/actionbutton/gulpfile.js @@ -1 +1 @@ -module.exports = require('@spectrum-css/component-builder'); +module.exports = require('@spectrum-css/component-builder-simple'); diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index c30e69f9467..34329b3794c 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import "../commons/basebutton.css"; +@import "../commons/basebutton-coretokens.css"; .spectrum-ActionButton { --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); @@ -75,7 +75,7 @@ governing permissions and limitations under the License. --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width)); } -.spectrum { +@container (--system: spectrum) { .spectrum-ActionButton { --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); @@ -229,7 +229,7 @@ governing permissions and limitations under the License. } } -.spectrum--express { +@container (--system: express) { .spectrum-ActionButton { --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); @@ -364,6 +364,8 @@ a.spectrum-ActionButton { } .spectrum-ActionButton-icon { + @inherit: %spectrum-ButtonIcon; + width: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); height: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index efd1b122631..2ccac0fd70e 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -19,7 +19,7 @@ "@spectrum-css/vars": "^8.0.0" }, "devDependencies": { - "@spectrum-css/component-builder": "^3.1.1", + "@spectrum-css/component-builder-simple": "^1.0.0-beta", "@spectrum-css/icon": "^3.0.21", "@spectrum-css/vars": "^8.0.0", "@spectrum-css/tokens": "^1.0.0-beta", diff --git a/components/commons/basebutton-coretokens.css b/components/commons/basebutton-coretokens.css new file mode 100644 index 00000000000..16a93d57f2c --- /dev/null +++ b/components/commons/basebutton-coretokens.css @@ -0,0 +1,106 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +%spectrum-BaseButton { + /* Contain halo */ + position: relative; + + display: inline-flex; + box-sizing: border-box; + + align-items: center; + justify-content: center; + + /* Show the button overflow in Edge. */ + overflow: visible; + + /* Remove button the margin in Firefox and Safari. */ + margin: 0; + + border-style: solid; + + /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */ + text-transform: none; + -webkit-font-smoothing: antialiased; + /* Font smoothing for Firefox */ + -moz-osx-font-smoothing: grayscale; + + /* Correct the inability to style clickable types in iOS and Safari. */ + -webkit-appearance: button; + + /* Adjacent buttons should be aligned correctly */ + vertical-align: top; + + transition: background var(--spectrum-animation-duration-100) ease-out, + border-color var(--spectrum-animation-duration-100) ease-out, + color var(--spectrum-animation-duration-100) ease-out, + box-shadow var(--spectrum-animation-duration-100) ease-out; + + text-decoration: none; + font-family: var(--spectrum-font-family-base); + + line-height: var(--spectrum-line-height-small); + + user-select: none; + -webkit-user-select: none; + + cursor: pointer; + + &:focus { + outline: none; + } + + /* Fix Firefox */ + &::-moz-focus-inner { + border: 0; + + /* Remove the inner border and padding for button in Firefox. */ + border-style: none; + padding: 0; + + /* Use uppercase PX so values don't get converted to rem */ + margin-block-start: -2px; + margin-block-end: -2px; + } + + &:disabled, + &.is-disabled { + cursor: default; + } +} + +%spectrum-ButtonIcon { + max-block-size: 100%; + flex-shrink: 0; +} + +%spectrum-AnchorButton { + /* Remove appearance for clickable types in iOS and Safari. */ + -webkit-appearance: none; + /* Make link text not selectable */ + user-select: none; +} + +%spectrum-ButtonLabel { + align-self: center; + justify-self: center; + + /* Fixes horizontal alignment of text in anchor buttons */ + text-align: center; + + /* @safari10 Workaround for https://bugs.webkit.org/show_bug.cgi?id=169700 */ + /*inline-size: 100%;*/ + + &:empty { + display: none; + } +} From 382e1963769986098a89be86d26acd5306b2534b Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 11:02:44 -0700 Subject: [PATCH 11/45] feat: remove logical fallbacks from simple builder --- tools/component-builder-simple/css/processors.js | 2 -- tools/component-builder-simple/package.json | 2 -- 2 files changed, 4 deletions(-) diff --git a/tools/component-builder-simple/css/processors.js b/tools/component-builder-simple/css/processors.js index 3a024b3c468..4f4474203b5 100644 --- a/tools/component-builder-simple/css/processors.js +++ b/tools/component-builder-simple/css/processors.js @@ -16,9 +16,7 @@ function getProcessors() { require('postcss-nested'), require('postcss-containerizer'), require('postcss-inherit'), - require('postcss-logical')(), require('./plugins/postcss-transform-logical')(), - require('postcss-dir-pseudo-class')(), require('./plugins/postcss-custom-properties-passthrough')(), require('postcss-calc'), require('postcss-svg'), diff --git a/tools/component-builder-simple/package.json b/tools/component-builder-simple/package.json index cc3707b823b..47866daa869 100644 --- a/tools/component-builder-simple/package.json +++ b/tools/component-builder-simple/package.json @@ -23,7 +23,6 @@ "postcss": "^7.0.36", "postcss-calc": "^6.0.0", "postcss-containerizer": "^1.0.0-beta", - "postcss-dir-pseudo-class": "^5.0.0", "postcss-discard-empty": "^4.0.1", "postcss-dropdupedvars": "^1.1.2", "postcss-dropunusedvars": "^1.2.1", @@ -31,7 +30,6 @@ "postcss-functions": "^3.0.0", "postcss-import": "^10.0.0", "postcss-inherit": "^4.0.3", - "postcss-logical": "^4.0.2", "postcss-mixins": "^6.2.1", "postcss-nested": "^3.0.0", "postcss-selector-parser": "^6.0.2", From 7404880e2408100bb5bc02b9a3c9abed85b3686b Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 11:10:02 -0700 Subject: [PATCH 12/45] feat: drop support for IE in AutoPrefixer config, remove useless plugin --- tools/component-builder-simple/css/processors.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tools/component-builder-simple/css/processors.js b/tools/component-builder-simple/css/processors.js index 4f4474203b5..c0d6ff03936 100644 --- a/tools/component-builder-simple/css/processors.js +++ b/tools/component-builder-simple/css/processors.js @@ -33,12 +33,11 @@ function getProcessors() { require('./plugins/postcss-strip-comments')({ preserveTopdoc: false }), require('postcss-dropunusedvars'), require('postcss-dropdupedvars'), - require('postcss-droproot'), require('postcss-focus-ring'), require('postcss-discard-empty'), require('autoprefixer')({ 'browsers': [ - 'IE >= 10', + 'last 2 Edge versions', 'last 2 Chrome versions', 'last 2 Firefox versions', 'last 2 Safari versions', From 1dd03fb67867ec015eefe85cd21e4a5e89316f3d Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 11:13:41 -0700 Subject: [PATCH 13/45] feat: drop even more unused plugins --- tools/component-builder-simple/css/processors.js | 11 ----------- tools/component-builder-simple/package.json | 2 -- 2 files changed, 13 deletions(-) diff --git a/tools/component-builder-simple/css/processors.js b/tools/component-builder-simple/css/processors.js index c0d6ff03936..4f1e7ed1136 100644 --- a/tools/component-builder-simple/css/processors.js +++ b/tools/component-builder-simple/css/processors.js @@ -19,17 +19,6 @@ function getProcessors() { require('./plugins/postcss-transform-logical')(), require('./plugins/postcss-custom-properties-passthrough')(), require('postcss-calc'), - require('postcss-svg'), - require('postcss-functions')({ - functions: { - noscale: function (value) { - return value.toString().toUpperCase(); - }, - percent: function (value) { - return parseInt(value, 10) / 100; - } - } - }), require('./plugins/postcss-strip-comments')({ preserveTopdoc: false }), require('postcss-dropunusedvars'), require('postcss-dropdupedvars'), diff --git a/tools/component-builder-simple/package.json b/tools/component-builder-simple/package.json index 47866daa869..cd2593b0d55 100644 --- a/tools/component-builder-simple/package.json +++ b/tools/component-builder-simple/package.json @@ -27,13 +27,11 @@ "postcss-dropdupedvars": "^1.1.2", "postcss-dropunusedvars": "^1.2.1", "postcss-focus-ring": "^1.0.0", - "postcss-functions": "^3.0.0", "postcss-import": "^10.0.0", "postcss-inherit": "^4.0.3", "postcss-mixins": "^6.2.1", "postcss-nested": "^3.0.0", "postcss-selector-parser": "^6.0.2", - "postcss-svg": "^3.0.0", "postcss-values-parser": "^3.1.1", "through2": "^3.0.1" } From b1471d9d046180e00fcfd00775e51c1373e9ecd9 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 11:30:39 -0700 Subject: [PATCH 14/45] feat: check that all defined tokens are used also, fix bug where some used tokens were not caught! --- tools/component-builder-simple/css/index.js | 52 +++++++++++++++------ 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/tools/component-builder-simple/css/index.js b/tools/component-builder-simple/css/index.js index cccdceca839..8342e7342a6 100644 --- a/tools/component-builder-simple/css/index.js +++ b/tools/component-builder-simple/css/index.js @@ -17,6 +17,22 @@ const postcss = require('gulp-postcss'); const postcssReal = require('postcss'); const processors = require('./processors').processors; const fsp = require('fs').promises; +const { parse } = require('postcss-values-parser'); + +function getTokensUsedInValueNode(node, usedTokens) { + usedTokens = usedTokens ?? []; + if (node.nodes) { + node.nodes.forEach(subNode => { + if (subNode.type === 'word' && subNode.value.startsWith('--')) { + usedTokens.push(subNode.value); + } + else if (subNode.type === 'func') { + getTokensUsedInValueNode(subNode, usedTokens); + } + }); + } + return usedTokens; +} function getTokensUsedInCSS(root, coreTokens, componentTokens) { let usedTokens = []; @@ -27,17 +43,20 @@ function getTokensUsedInCSS(root, coreTokens, componentTokens) { rule.walkDecls((decl) => { let matches = decl.value.match(/var\(.*?\)/g); if (matches) { - matches.forEach(function(match) { - let tokenName = match.replace(/var\((--[\w\-]+),?.*?\)/, '$1').trim(); - if (coreTokens[tokenName]) { - coreTokensUsed[tokenName] = (coreTokensUsed[tokenName] ?? 0) + 1; - } - else if (componentTokens[tokenName]) { - componentTokensUsed[tokenName] = (componentTokensUsed[tokenName] ?? 0) + 1; - } - if (usedTokens.indexOf(tokenName) === -1) { - usedTokens.push(tokenName); - } + let parsed = parse(decl.value); + parsed.nodes.forEach(node => { + const usedTokensInValue = getTokensUsedInValueNode(node); + usedTokensInValue.forEach(tokenName => { + if (coreTokens[tokenName]) { + coreTokensUsed[tokenName] = (coreTokensUsed[tokenName] ?? 0) + 1; + } + else if (componentTokens[tokenName]) { + componentTokensUsed[tokenName] = (componentTokensUsed[tokenName] ?? 0) + 1; + } + if (usedTokens.indexOf(tokenName) === -1) { + usedTokens.push(tokenName); + } + }); }); } }); @@ -90,10 +109,10 @@ function checkCSS() { // Get tokens defined inside of the component let componentTokens = getTokensDefinedInCSS(root); - // Find all custom properties used in the component + // Find all tokens used in the component let { usedTokens, coreTokensUsed, componentTokensUsed } = getTokensUsedInCSS(root, coreTokens, componentTokens); - // For each color stop and scale, filter the variables for those matching the component + // Make sure the component doesn't use any undefined tokens let errors = []; usedTokens.forEach(tokenName => { if (!coreTokens[tokenName] && !componentTokens[tokenName] && !tokenName.startsWith('--custom') && !tokenName.startsWith('--system') && !tokenName.startsWith('--highcontrast')) { @@ -101,6 +120,13 @@ function checkCSS() { } }); + // Make sure all tokens defined in the component are used + Object.keys(componentTokens).forEach(tokenName => { + if (!usedTokens.includes(tokenName)) { + errors.push(`${pkg.name} defines ${tokenName}, but never uses it`); + } + }); + if (errors.length) { return cb(new Error(errors.join('\n')), file); } From cae6252aceedb9be8b90da252f52160cd9292f87 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 11:53:16 -0700 Subject: [PATCH 15/45] feat: define --system for completeness, don't ignore usage in builder it's unused, but it should be there --- components/tokens/custom.css | 2 ++ tools/component-builder-simple/css/index.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/components/tokens/custom.css b/components/tokens/custom.css index 8edad6ce729..73da8445c00 100644 --- a/components/tokens/custom.css +++ b/components/tokens/custom.css @@ -20,10 +20,12 @@ governing permissions and limitations under the License. .spectrum { --system-spectrum: var(--ON); + --system: spectrum; } .spectrum--express { --system-express: var(--ON); + --system: express; } .spectrum { diff --git a/tools/component-builder-simple/css/index.js b/tools/component-builder-simple/css/index.js index 8342e7342a6..5b9a7a58770 100644 --- a/tools/component-builder-simple/css/index.js +++ b/tools/component-builder-simple/css/index.js @@ -115,7 +115,7 @@ function checkCSS() { // Make sure the component doesn't use any undefined tokens let errors = []; usedTokens.forEach(tokenName => { - if (!coreTokens[tokenName] && !componentTokens[tokenName] && !tokenName.startsWith('--custom') && !tokenName.startsWith('--system') && !tokenName.startsWith('--highcontrast')) { + if (!coreTokens[tokenName] && !componentTokens[tokenName] && !tokenName.startsWith('--custom') && !tokenName.startsWith('--highcontrast')) { errors.push(`${pkg.name} uses undefined token ${tokenName}`); } }); From e847e7cb985e54b795c751c5929e7e0b0ddd761f Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 11:56:47 -0700 Subject: [PATCH 16/45] style: cleanup --- tools/postcss-containerizer/fixtures/basic.css | 1 - 1 file changed, 1 deletion(-) diff --git a/tools/postcss-containerizer/fixtures/basic.css b/tools/postcss-containerizer/fixtures/basic.css index 72e45c221a4..1f38a77bb2a 100644 --- a/tools/postcss-containerizer/fixtures/basic.css +++ b/tools/postcss-containerizer/fixtures/basic.css @@ -12,7 +12,6 @@ .component { --background-color: purple; --border-color: darkpurple; - } .component .icon { --color: white; From ec42ed833b1c0b5641cec3a90c82861d20a3539a Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 12:04:58 -0700 Subject: [PATCH 17/45] refactor: dump output near input instead of at the end of file --- .../postcss-containerizer/expected/basic.css | 19 +++++++------- .../expected/multisystem.css | 25 ++++++++++--------- tools/postcss-containerizer/index.js | 9 +++++-- 3 files changed, 30 insertions(+), 23 deletions(-) diff --git a/tools/postcss-containerizer/expected/basic.css b/tools/postcss-containerizer/expected/basic.css index d064f7c75c4..9e66e79ac6b 100644 --- a/tools/postcss-containerizer/expected/basic.css +++ b/tools/postcss-containerizer/expected/basic.css @@ -1,13 +1,14 @@ .component { - --system-spectrum-background-color: var(--system-spectrum) blue; - --system-express-background-color: var(--system-express) purple; - --background-color: var(--system-express-background-color, var(--system-spectrum-background-color)); - --system-spectrum-border-color: var(--system-spectrum) darkblue; - --system-express-border-color: var(--system-express) darkpurple; - --border-color: var(--system-express-border-color, var(--system-spectrum-border-color)) + --system-spectrum-background-color: var(--system-spectrum) blue; + --system-express-background-color: var(--system-express) purple; + --background-color: var(--system-express-background-color, var(--system-spectrum-background-color)); + --system-spectrum-border-color: var(--system-spectrum) darkblue; + --system-express-border-color: var(--system-express) darkpurple; + --border-color: var(--system-express-border-color, var(--system-spectrum-border-color)) } + .component .icon { - --system-spectrum-color: var(--system-spectrum) gray; - --system-express-color: var(--system-express) white; - --color: var(--system-express-color, var(--system-spectrum-color)) + --system-spectrum-color: var(--system-spectrum) gray; + --system-express-color: var(--system-express) white; + --color: var(--system-express-color, var(--system-spectrum-color)) } diff --git a/tools/postcss-containerizer/expected/multisystem.css b/tools/postcss-containerizer/expected/multisystem.css index fd1fbcdc7a2..f62f34f0f45 100644 --- a/tools/postcss-containerizer/expected/multisystem.css +++ b/tools/postcss-containerizer/expected/multisystem.css @@ -1,16 +1,17 @@ .component { - --system-spectrum-background-color: var(--system-spectrum) blue; - --system-express-background-color: var(--system-express) purple; - --system-next-background-color: var(--system-next) brown; - --background-color: var(--system-next-background-color, var(--system-express-background-color, var(--system-spectrum-background-color))); - --system-spectrum-border-color: var(--system-spectrum) darkblue; - --system-express-border-color: var(--system-express) darkpurple; - --system-next-border-color: var(--system-next) darkbrown; - --border-color: var(--system-next-border-color, var(--system-express-border-color, var(--system-spectrum-border-color))) + --system-spectrum-background-color: var(--system-spectrum) blue; + --system-express-background-color: var(--system-express) purple; + --system-next-background-color: var(--system-next) brown; + --background-color: var(--system-next-background-color, var(--system-express-background-color, var(--system-spectrum-background-color))); + --system-spectrum-border-color: var(--system-spectrum) darkblue; + --system-express-border-color: var(--system-express) darkpurple; + --system-next-border-color: var(--system-next) darkbrown; + --border-color: var(--system-next-border-color, var(--system-express-border-color, var(--system-spectrum-border-color))) } + .component .icon { - --system-spectrum-color: var(--system-spectrum) gray; - --system-express-color: var(--system-express) white; - --system-next-color: var(--system-next) white; - --color: var(--system-next-color, var(--system-express-color, var(--system-spectrum-color))) + --system-spectrum-color: var(--system-spectrum) gray; + --system-express-color: var(--system-express) white; + --system-next-color: var(--system-next) white; + --color: var(--system-next-color, var(--system-express-color, var(--system-spectrum-color))) } diff --git a/tools/postcss-containerizer/index.js b/tools/postcss-containerizer/index.js index fbae76b93bc..e7e801e5fbc 100644 --- a/tools/postcss-containerizer/index.js +++ b/tools/postcss-containerizer/index.js @@ -2,6 +2,8 @@ const postcss = require('postcss'); function process(root) { const selectorMap = {}; + const containersToRemove = []; + root.walkAtRules(container => { if (container.name === 'container') { const [, identifier, value] = container.params.match(/\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/); @@ -17,7 +19,7 @@ function process(root) { identifierNode[identifierKey] = decl.value; }); - container.remove(); + containersToRemove.push(container); } }); @@ -56,12 +58,15 @@ function process(root) { prop, value: varString }); + decl.raws.before = '\n '; rule.append(decl); } - root.append(rule); + containersToRemove[0].parent.insertBefore(containersToRemove[0], rule); } + + containersToRemove.forEach(container => container.remove()); } module.exports = postcss.plugin('postcss-containerizer', function() { From b9f783e25b53e79bf618e76de1881dc1e17ad4db Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 12:17:35 -0700 Subject: [PATCH 18/45] test: make sure separate blocks for the same system work --- .../fixtures/duplicatesystem.css | 25 +++++++++++++++++++ tools/postcss-containerizer/test.js | 4 +++ 2 files changed, 29 insertions(+) create mode 100644 tools/postcss-containerizer/fixtures/duplicatesystem.css diff --git a/tools/postcss-containerizer/fixtures/duplicatesystem.css b/tools/postcss-containerizer/fixtures/duplicatesystem.css new file mode 100644 index 00000000000..d855a0c623b --- /dev/null +++ b/tools/postcss-containerizer/fixtures/duplicatesystem.css @@ -0,0 +1,25 @@ +@container(--system: spectrum) { + .component { + --background-color: blue; + --border-color: darkblue; + } +} + +@container(--system: spectrum) { + .component .icon { + --color: gray; + } +} + +@container(--system: express) { + .component { + --background-color: purple; + --border-color: darkpurple; + } +} + +@container(--system: express) { + .component .icon { + --color: white; + } +} diff --git a/tools/postcss-containerizer/test.js b/tools/postcss-containerizer/test.js index c5b773749f3..e45dd4d194f 100644 --- a/tools/postcss-containerizer/test.js +++ b/tools/postcss-containerizer/test.js @@ -28,3 +28,7 @@ test('create basic output for 2 systems', t => { test('create output for 3 systems', t => { return compare(t, 'multisystem.css', 'multisystem.css'); }); + +test('work when system container queries appear more than once', t => { + return compare(t, 'duplicatesystem.css', 'basic.css'); +}); From 454a35a9c6f909c10d4f528d64ec9fef96d0fec5 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 12:19:15 -0700 Subject: [PATCH 19/45] docs: add README --- tools/component-builder-simple/README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 tools/component-builder-simple/README.md diff --git a/tools/component-builder-simple/README.md b/tools/component-builder-simple/README.md new file mode 100644 index 00000000000..3d13cb2e42f --- /dev/null +++ b/tools/component-builder-simple/README.md @@ -0,0 +1,15 @@ +# @spectrum-css/component-builder-simple +> Simplified build system for Spectrum CSS components + +This package uses gulp to compile CSS for Spectrum CSS components. + +## CLI + +The following tasks are available: + +* `gulp clean` - Clean everything +* `gulp build` - Build everything + +## Accessing PostCSS preprocessors + +You can pull the list of preprocessors with `require('@spectrum-css/component-builder-simple/css/processors')`. From 206f54389f091a8f140c0073a8be267d73b48784 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 22:04:24 -0700 Subject: [PATCH 20/45] feat: first crack at splitinator --- .../css/processors.js | 9 +- tools/postcss-splitinator/README.md | 62 ++++++++++++++ tools/postcss-splitinator/expected/basic.css | 23 ++++++ tools/postcss-splitinator/fixtures/basic.css | 23 ++++++ tools/postcss-splitinator/index.js | 82 +++++++++++++++++++ tools/postcss-splitinator/package.json | 14 ++++ tools/postcss-splitinator/test.js | 33 ++++++++ 7 files changed, 245 insertions(+), 1 deletion(-) create mode 100644 tools/postcss-splitinator/README.md create mode 100644 tools/postcss-splitinator/expected/basic.css create mode 100644 tools/postcss-splitinator/fixtures/basic.css create mode 100644 tools/postcss-splitinator/index.js create mode 100644 tools/postcss-splitinator/package.json create mode 100644 tools/postcss-splitinator/test.js diff --git a/tools/component-builder-simple/css/processors.js b/tools/component-builder-simple/css/processors.js index 4f1e7ed1136..a1f709efd05 100644 --- a/tools/component-builder-simple/css/processors.js +++ b/tools/component-builder-simple/css/processors.js @@ -14,7 +14,14 @@ function getProcessors() { return [ require('postcss-import'), require('postcss-nested'), - require('postcss-containerizer'), + require('postcss-splitinator')({ + processIdentifier: (identifier) => { + if (identifier === 'express') { + return 'spectrum--express'; + } + return identifier; + } + }), require('postcss-inherit'), require('./plugins/postcss-transform-logical')(), require('./plugins/postcss-custom-properties-passthrough')(), diff --git a/tools/postcss-splitinator/README.md b/tools/postcss-splitinator/README.md new file mode 100644 index 00000000000..68bd42f16dd --- /dev/null +++ b/tools/postcss-splitinator/README.md @@ -0,0 +1,62 @@ +# postcss-splitinator +> Splits custom properties organized by classes into named tokens + +## Installation + +```sh +npm install postcss-splitinator +postcss -u postcss-splitinator -o dist/index.css src/index.css +``` + +## Usage + +This plugin turns this: + +```css +@container(--system: standard) { + .component { + --background-color: blue; + } + .component.is-selected { + --background-color: darkblue; + } + .component .icon { + --color: gray; + } +} + +@container(--system: express) { + .component { + --background-color: purple; + } + .component.is-selected { + --background-color: darkpurple; + } + .component .icon { + --color: white; + } +} + +``` + +Into this: + +``` +.spectrum { + --system-component-background-color: blue; + --system-component-selected-background-color: darkblue; +} + +.spectrum--express { + --system-component-background-color: blue; + --system-component-selected-background-color: darkblue; +} + +.component { + --background-color: var(--system-component-background-color); +} + +.component.is-selected { + --background-color: var(--system-component-selected-background-color); +} +``` diff --git a/tools/postcss-splitinator/expected/basic.css b/tools/postcss-splitinator/expected/basic.css new file mode 100644 index 00000000000..e3e1349f65f --- /dev/null +++ b/tools/postcss-splitinator/expected/basic.css @@ -0,0 +1,23 @@ +.spectrum { + --system-component-background-color: blue; + --system-component-selected-background-color: darkblue; + --system-component-icon-color: gray +} + +.spectrum--express { + --system-component-background-color: purple; + --system-component-selected-background-color: darkpurple; + --system-component-icon-color: white +} + +.component { + --background-color: var(--system-component-background-color) +} + +.component.is-selected { + --background-color: var(--system-component-selected-background-color) +} + +.component .icon { + --color: var(--system-component-icon-color) +} diff --git a/tools/postcss-splitinator/fixtures/basic.css b/tools/postcss-splitinator/fixtures/basic.css new file mode 100644 index 00000000000..e7c9a8e5ab8 --- /dev/null +++ b/tools/postcss-splitinator/fixtures/basic.css @@ -0,0 +1,23 @@ +@container(--system: spectrum) { + .component { + --background-color: blue; + } + .component.is-selected { + --background-color: darkblue; + } + .component .icon { + --color: gray; + } +} + +@container(--system: express) { + .component { + --background-color: purple; + } + .component.is-selected { + --background-color: darkpurple; + } + .component .icon { + --color: white; + } +} diff --git a/tools/postcss-splitinator/index.js b/tools/postcss-splitinator/index.js new file mode 100644 index 00000000000..c71396bf937 --- /dev/null +++ b/tools/postcss-splitinator/index.js @@ -0,0 +1,82 @@ +const postcss = require('postcss'); + +function getName(selector, prop) { + // This regex is designed to pull spectrum-ActionButton out of a selector + let baseSelectorMatch = selector.match(/^\.([a-z]+-[\A-Z][^-. ]+)/); + if (baseSelectorMatch) { + const [, baseSelector] = baseSelectorMatch; + const baseSelectorRegExp = new RegExp(baseSelector, 'gi'); + prop = prop.replace(baseSelectorRegExp, ''); + selector = baseSelector + selector.replace(baseSelectorRegExp, ''); + } + + selector = selector.replace(/is-/g, ''); + + let selectorParts = selector.replace(/\s+/g, '').replace(/,/g, '').split('.'); + + return `--system-` + (`${selectorParts.join('-')}-${prop.substr(2)}`).replace(/-+/g, '-'); +} + +function process(root, options) { + const selectorMap = {}; + + let lastRule = null; + root.walkAtRules(container => { + if (container.name === 'container') { + const [, identifier, identifierKey] = container.params.match(/\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/); + + const rule = postcss.rule({ + selector: `.${(options && typeof options.processIdentifier === 'function') ? options.processIdentifier(identifierKey) : identifierKey}`, + source: container.source + }); + + container.parent.insertAfter(container, rule); + + container.walkDecls(decl => { + if (decl.prop.startsWith('--')) { + // Process rules that match multiple selectors separately to avoid weird var names and edge cases + // note: this doesn't support :where() and is likely brittle! + const selectors = decl.parent.selector.split(/\s*,\s*/); + selectors.forEach(selector => { + const variableName = getName(selector, decl.prop); + const newDecl = decl.clone({ + prop: variableName + }); + newDecl.raws.before = '\n '; + rule.append(newDecl); + + const selectorNode = selectorMap[selector] = selectorMap[selector] || {}; + selectorNode[decl.prop] = variableName; + }) + } + }); + + container.remove(); + + lastRule = rule; + } + }); + + for (let [selector, props] of Object.entries(selectorMap)) { + const rule = postcss.rule({ + selector + }); + + for (let [prop, value] of Object.entries(props)) { + const decl = postcss.decl({ + prop, + value: `var(${value})` + }); + decl.raws.before = '\n '; + + rule.append(decl); + } + + lastRule.parent.insertAfter(lastRule, rule); + lastRule = rule; + } +} + +module.exports = postcss.plugin('postcss-containerizer', function(options) { + return (root, result) => process(root, options) +}); diff --git a/tools/postcss-splitinator/package.json b/tools/postcss-splitinator/package.json new file mode 100644 index 00000000000..8bc84982933 --- /dev/null +++ b/tools/postcss-splitinator/package.json @@ -0,0 +1,14 @@ +{ + "name": "postcss-splitinator", + "version": "1.0.0-beta.0", + "description": "Turn container queryies into the var hack", + "main": "index.js", + "scripts": { + "test": "ava" + }, + "author": "Larry Davis ", + "license": "BSD-2-Clause", + "dependencies": { + "postcss": "^7.0.32" + } +} diff --git a/tools/postcss-splitinator/test.js b/tools/postcss-splitinator/test.js new file mode 100644 index 00000000000..5dae3296a9d --- /dev/null +++ b/tools/postcss-splitinator/test.js @@ -0,0 +1,33 @@ +const fs = require('fs'); +const test = require('ava'); +const postcss = require('postcss'); +const plugin = require('./index.js'); + +function compare(t, fixtureFilePath, expectedFilePath, options = { + processIdentifier: (identifier) => { + if (identifier === 'express') { + return 'spectrum--express'; + } + return identifier; + } +}){ + return postcss([ plugin(options) ]) + .process( + readFile(`./fixtures/${fixtureFilePath}`), + { from: fixtureFilePath } + ) + .then(result => { + const actual = result.css; + const expected = readFile(`./expected/${expectedFilePath}`); + t.is(actual, expected); + t.is(result.warnings().length, 0); + }); +} + +function readFile(filename) { + return fs.readFileSync(filename, 'utf8'); +} + +test('create basic output', t => { + return compare(t, 'basic.css', 'basic.css'); +}); From a2c63f9b6cb6cad64e625847a0236559fc8fa88b Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 22:31:47 -0700 Subject: [PATCH 21/45] feat: kill the containerizer, we don't need it anymore --- tools/postcss-containerizer/README.md | 71 ----------------- .../postcss-containerizer/expected/basic.css | 14 ---- .../expected/multisystem.css | 17 ----- .../postcss-containerizer/fixtures/basic.css | 19 ----- .../fixtures/duplicatesystem.css | 25 ------ .../fixtures/multisystem.css | 32 -------- tools/postcss-containerizer/index.js | 76 ------------------- tools/postcss-containerizer/package.json | 14 ---- tools/postcss-containerizer/test.js | 34 --------- 9 files changed, 302 deletions(-) delete mode 100644 tools/postcss-containerizer/README.md delete mode 100644 tools/postcss-containerizer/expected/basic.css delete mode 100644 tools/postcss-containerizer/expected/multisystem.css delete mode 100644 tools/postcss-containerizer/fixtures/basic.css delete mode 100644 tools/postcss-containerizer/fixtures/duplicatesystem.css delete mode 100644 tools/postcss-containerizer/fixtures/multisystem.css delete mode 100644 tools/postcss-containerizer/index.js delete mode 100644 tools/postcss-containerizer/package.json delete mode 100644 tools/postcss-containerizer/test.js diff --git a/tools/postcss-containerizer/README.md b/tools/postcss-containerizer/README.md deleted file mode 100644 index 45a3e64960b..00000000000 --- a/tools/postcss-containerizer/README.md +++ /dev/null @@ -1,71 +0,0 @@ -# postcss-containerizer -> Turn container queries into var space hacks - -## Installation - -```sh -npm install postcss-containerizer -postcss -u postcss-containerizer -o dist/index.css src/index.css -``` - -## Usage - -This plugin turns this: - -```css -@container(--system: standard) { - .component { - --background-color: blue; - } -} - -@container(--system: express) { - .component { - --background-color: purple; - } -} -``` - -Into this: - -``` -.component { - --system-spectrum-component-background-color: var(--system-spectrum) blue; - --system-express-component-background-color: var(--system-express) purple; - - --background-color: var( - --system-express-component-background-color, - var(--system-spectrum-component-background-color) - ); -} -``` - -Or should it turn: - -```css -@container(--system: standard) { - .component { - --background-color: blue; - } -} - -@container(--system: express) { - .component { - --background-color: purple; - } -} -``` - -Into this: - -``` -.component { - --system-express-background-color: var(--system-express) purple; - - --background-color: var( - --system-express-background-color, - blue - ); -} -``` - diff --git a/tools/postcss-containerizer/expected/basic.css b/tools/postcss-containerizer/expected/basic.css deleted file mode 100644 index 9e66e79ac6b..00000000000 --- a/tools/postcss-containerizer/expected/basic.css +++ /dev/null @@ -1,14 +0,0 @@ -.component { - --system-spectrum-background-color: var(--system-spectrum) blue; - --system-express-background-color: var(--system-express) purple; - --background-color: var(--system-express-background-color, var(--system-spectrum-background-color)); - --system-spectrum-border-color: var(--system-spectrum) darkblue; - --system-express-border-color: var(--system-express) darkpurple; - --border-color: var(--system-express-border-color, var(--system-spectrum-border-color)) -} - -.component .icon { - --system-spectrum-color: var(--system-spectrum) gray; - --system-express-color: var(--system-express) white; - --color: var(--system-express-color, var(--system-spectrum-color)) -} diff --git a/tools/postcss-containerizer/expected/multisystem.css b/tools/postcss-containerizer/expected/multisystem.css deleted file mode 100644 index f62f34f0f45..00000000000 --- a/tools/postcss-containerizer/expected/multisystem.css +++ /dev/null @@ -1,17 +0,0 @@ -.component { - --system-spectrum-background-color: var(--system-spectrum) blue; - --system-express-background-color: var(--system-express) purple; - --system-next-background-color: var(--system-next) brown; - --background-color: var(--system-next-background-color, var(--system-express-background-color, var(--system-spectrum-background-color))); - --system-spectrum-border-color: var(--system-spectrum) darkblue; - --system-express-border-color: var(--system-express) darkpurple; - --system-next-border-color: var(--system-next) darkbrown; - --border-color: var(--system-next-border-color, var(--system-express-border-color, var(--system-spectrum-border-color))) -} - -.component .icon { - --system-spectrum-color: var(--system-spectrum) gray; - --system-express-color: var(--system-express) white; - --system-next-color: var(--system-next) white; - --color: var(--system-next-color, var(--system-express-color, var(--system-spectrum-color))) -} diff --git a/tools/postcss-containerizer/fixtures/basic.css b/tools/postcss-containerizer/fixtures/basic.css deleted file mode 100644 index 1f38a77bb2a..00000000000 --- a/tools/postcss-containerizer/fixtures/basic.css +++ /dev/null @@ -1,19 +0,0 @@ -@container(--system: spectrum) { - .component { - --background-color: blue; - --border-color: darkblue; - } - .component .icon { - --color: gray; - } -} - -@container(--system: express) { - .component { - --background-color: purple; - --border-color: darkpurple; - } - .component .icon { - --color: white; - } -} diff --git a/tools/postcss-containerizer/fixtures/duplicatesystem.css b/tools/postcss-containerizer/fixtures/duplicatesystem.css deleted file mode 100644 index d855a0c623b..00000000000 --- a/tools/postcss-containerizer/fixtures/duplicatesystem.css +++ /dev/null @@ -1,25 +0,0 @@ -@container(--system: spectrum) { - .component { - --background-color: blue; - --border-color: darkblue; - } -} - -@container(--system: spectrum) { - .component .icon { - --color: gray; - } -} - -@container(--system: express) { - .component { - --background-color: purple; - --border-color: darkpurple; - } -} - -@container(--system: express) { - .component .icon { - --color: white; - } -} diff --git a/tools/postcss-containerizer/fixtures/multisystem.css b/tools/postcss-containerizer/fixtures/multisystem.css deleted file mode 100644 index 7680673f0ff..00000000000 --- a/tools/postcss-containerizer/fixtures/multisystem.css +++ /dev/null @@ -1,32 +0,0 @@ -@container(--system: spectrum) { - .component { - --background-color: blue; - --border-color: darkblue; - } - - .component .icon { - --color: gray; - } -} - -@container(--system: express) { - .component { - --background-color: purple; - --border-color: darkpurple; - } - - .component .icon { - --color: white; - } -} - -@container(--system: next) { - .component { - --background-color: brown; - --border-color: darkbrown; - } - - .component .icon { - --color: white; - } -} diff --git a/tools/postcss-containerizer/index.js b/tools/postcss-containerizer/index.js deleted file mode 100644 index e7e801e5fbc..00000000000 --- a/tools/postcss-containerizer/index.js +++ /dev/null @@ -1,76 +0,0 @@ -const postcss = require('postcss'); - -function process(root) { - const selectorMap = {}; - const containersToRemove = []; - - root.walkAtRules(container => { - if (container.name === 'container') { - const [, identifier, value] = container.params.match(/\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/); - - const identifierKey = `${identifier}-${value}`; - - // Walk all declarations, find their selector, store in map - container.walkDecls(decl => { - const selector = decl.parent.selector; - const selectorNode = selectorMap[selector] = selectorMap[selector] || {}; - const identifierNode = selectorNode[decl.prop] = selectorNode[decl.prop] || {}; - - identifierNode[identifierKey] = decl.value; - }); - - containersToRemove.push(container); - } - }); - - // Process each selector - for (let [selector, props] of Object.entries(selectorMap)) { - // todo: put it back in the right place - const rule = postcss.rule({ - selector - }); - - for (let [prop, values] of Object.entries(props)) { - // Add a declaration for each identifier - const variableList = []; - for (let [identifier, value] of Object.entries(values)) { - const variableName = `--${identifier}-${prop.replace(/^--/, '')}`; - variableList.push(variableName); - const decl = postcss.decl({ - prop: variableName, - value: `var(--${identifier}) ${value}` - }); - - rule.append(decl); - } - - // Add the final declaration - let varString = ''; - variableList.reverse().forEach((variable, i) => { - varString += `var(${variable}`; - if (i !== variableList.length - 1) { - varString += ', '; - } - }); - varString += ')'.repeat(variableList.length); - - const decl = postcss.decl({ - prop, - value: varString - }); - decl.raws.before = '\n '; - - rule.append(decl); - } - - containersToRemove[0].parent.insertBefore(containersToRemove[0], rule); - } - - containersToRemove.forEach(container => container.remove()); -} - -module.exports = postcss.plugin('postcss-containerizer', function() { - return (root, result) => { - process(root); - } -}); diff --git a/tools/postcss-containerizer/package.json b/tools/postcss-containerizer/package.json deleted file mode 100644 index e9b343a1db4..00000000000 --- a/tools/postcss-containerizer/package.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "name": "postcss-containerizer", - "version": "1.0.0-beta.0", - "description": "Turn container queryies into the var hack", - "main": "index.js", - "scripts": { - "test": "ava" - }, - "author": "Larry Davis ", - "license": "BSD-2-Clause", - "dependencies": { - "postcss": "^7.0.32" - } -} diff --git a/tools/postcss-containerizer/test.js b/tools/postcss-containerizer/test.js deleted file mode 100644 index e45dd4d194f..00000000000 --- a/tools/postcss-containerizer/test.js +++ /dev/null @@ -1,34 +0,0 @@ -const fs = require('fs'); -const test = require('ava'); -const postcss = require('postcss'); -const plugin = require('./index.js'); - -function compare(t, fixtureFilePath, expectedFilePath, options = {}){ - return postcss([ plugin(options) ]) - .process( - readFile(`./fixtures/${fixtureFilePath}`), - { from: fixtureFilePath } - ) - .then(result => { - const actual = result.css; - const expected = readFile(`./expected/${expectedFilePath}`); - t.is(actual, expected); - t.is(result.warnings().length, 0); - }); -} - -function readFile(filename) { - return fs.readFileSync(filename, 'utf8'); -} - -test('create basic output for 2 systems', t => { - return compare(t, 'basic.css', 'basic.css'); -}); - -test('create output for 3 systems', t => { - return compare(t, 'multisystem.css', 'multisystem.css'); -}); - -test('work when system container queries appear more than once', t => { - return compare(t, 'duplicatesystem.css', 'basic.css'); -}); From 78bb6a2d7ad5a89a597f3eeab549b111f2d50464 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 22:39:25 -0700 Subject: [PATCH 22/45] feat: make options.getName an option, add docs --- tools/postcss-splitinator/README.md | 10 ++++++++++ tools/postcss-splitinator/index.js | 6 +++--- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/tools/postcss-splitinator/README.md b/tools/postcss-splitinator/README.md index 68bd42f16dd..4bf9a8fd1e2 100644 --- a/tools/postcss-splitinator/README.md +++ b/tools/postcss-splitinator/README.md @@ -8,6 +8,16 @@ npm install postcss-splitinator postcss -u postcss-splitinator -o dist/index.css src/index.css ``` +## Options + +### `options.getName = function(selector, prop)` + +Customize the creation of variable names. By default, as SUIT naming convention is assumed and variable names are created accordingly. + +### `options.processIdentifier = function(identifierValue, identifierName)` + +Customize the selectors that variables are placed in. Passed the value and key of the variable that was passed to the container, i.e. `identifierValue = spectrum` and `identifierName = system` for the example below. By default, `identifierName` is used as-is. + ## Usage This plugin turns this: diff --git a/tools/postcss-splitinator/index.js b/tools/postcss-splitinator/index.js index c71396bf937..0f7604151c5 100644 --- a/tools/postcss-splitinator/index.js +++ b/tools/postcss-splitinator/index.js @@ -23,10 +23,10 @@ function process(root, options) { let lastRule = null; root.walkAtRules(container => { if (container.name === 'container') { - const [, identifier, identifierKey] = container.params.match(/\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/); + const [, identifierName, identifierValue] = container.params.match(/\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/); const rule = postcss.rule({ - selector: `.${(options && typeof options.processIdentifier === 'function') ? options.processIdentifier(identifierKey) : identifierKey}`, + selector: `.${(options && typeof options.processIdentifier === 'function') ? options.processIdentifier(identifierValue, identifierName) : identifierValue}`, source: container.source }); @@ -38,7 +38,7 @@ function process(root, options) { // note: this doesn't support :where() and is likely brittle! const selectors = decl.parent.selector.split(/\s*,\s*/); selectors.forEach(selector => { - const variableName = getName(selector, decl.prop); + const variableName = typeof options.getName === 'function' ? options.getName(selector, decl.prop) : getName(selector, decl.prop); const newDecl = decl.clone({ prop: variableName }); From bd8703540c228175ed18065ec8d954bf41246c09 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 22:50:09 -0700 Subject: [PATCH 23/45] docs: style --- tools/postcss-splitinator/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/postcss-splitinator/README.md b/tools/postcss-splitinator/README.md index 4bf9a8fd1e2..93f4d7539b7 100644 --- a/tools/postcss-splitinator/README.md +++ b/tools/postcss-splitinator/README.md @@ -51,7 +51,7 @@ This plugin turns this: Into this: -``` +```css .spectrum { --system-component-background-color: blue; --system-component-selected-background-color: darkblue; From 9fc6477a782401921f4d22d6a48b73d0aa464d24 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 24 May 2022 22:52:23 -0700 Subject: [PATCH 24/45] fix: name things right --- tools/component-builder-simple/package.json | 2 +- tools/postcss-splitinator/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tools/component-builder-simple/package.json b/tools/component-builder-simple/package.json index cd2593b0d55..152bb808543 100644 --- a/tools/component-builder-simple/package.json +++ b/tools/component-builder-simple/package.json @@ -22,7 +22,7 @@ "gulp-postcss": "^7.0.0", "postcss": "^7.0.36", "postcss-calc": "^6.0.0", - "postcss-containerizer": "^1.0.0-beta", + "postcss-splitinator": "^1.0.0-beta", "postcss-discard-empty": "^4.0.1", "postcss-dropdupedvars": "^1.1.2", "postcss-dropunusedvars": "^1.2.1", diff --git a/tools/postcss-splitinator/index.js b/tools/postcss-splitinator/index.js index 0f7604151c5..16b17ee37ce 100644 --- a/tools/postcss-splitinator/index.js +++ b/tools/postcss-splitinator/index.js @@ -77,6 +77,6 @@ function process(root, options) { } } -module.exports = postcss.plugin('postcss-containerizer', function(options) { +module.exports = postcss.plugin('postcss-splitinator', function(options) { return (root, result) => process(root, options) }); From 227ef5cb4541139e3f03d84cd45a9b8ab9d46b68 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Wed, 25 May 2022 09:10:31 -0700 Subject: [PATCH 25/45] fix: make sure everything is lowercase, correctly handle overrides note: this code needs some work and some tests --- tools/postcss-splitinator/index.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/tools/postcss-splitinator/index.js b/tools/postcss-splitinator/index.js index 16b17ee37ce..20b67eb1104 100644 --- a/tools/postcss-splitinator/index.js +++ b/tools/postcss-splitinator/index.js @@ -14,7 +14,7 @@ function getName(selector, prop) { let selectorParts = selector.replace(/\s+/g, '').replace(/,/g, '').split('.'); - return `--system-` + (`${selectorParts.join('-')}-${prop.substr(2)}`).replace(/-+/g, '-'); + return `--system-` + (`${selectorParts.join('-')}-${prop.substr(2)}`).replace(/-+/g, '-').toLowerCase(); } function process(root, options) { @@ -46,7 +46,22 @@ function process(root, options) { rule.append(newDecl); const selectorNode = selectorMap[selector] = selectorMap[selector] || {}; - selectorNode[decl.prop] = variableName; + + // Check for fallbacks + // todo: use valueparser instead of a regex + const fallbackMatch = decl.value.match(/var\(\s*(.*?)\s*,\s*var\(\s*(.*?)\s*\)\)/); + if (fallbackMatch) { + const [, override, fallback] = fallbackMatch; + + // The final declaration should have the override present + selectorNode[decl.prop] = `var(${override}, var(${variableName}))`; + + // The system-level declaration should only have the fallback + newDecl.value = `var(${fallback})`; + } + else { + selectorNode[decl.prop] = `var(${variableName})`; + } }) } }); @@ -65,7 +80,7 @@ function process(root, options) { for (let [prop, value] of Object.entries(props)) { const decl = postcss.decl({ prop, - value: `var(${value})` + value }); decl.raws.before = '\n '; From 57467aa17133b89e3c961f1cc5aa78c8968bd9e9 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Wed, 25 May 2022 09:29:27 -0700 Subject: [PATCH 26/45] fix: correct check if all defined variables are used --- tools/component-builder-simple/css/index.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/tools/component-builder-simple/css/index.js b/tools/component-builder-simple/css/index.js index 5b9a7a58770..f97b6728d87 100644 --- a/tools/component-builder-simple/css/index.js +++ b/tools/component-builder-simple/css/index.js @@ -93,8 +93,8 @@ function buildCSS() { } let coreTokens = null; -function checkCSS() { - return gulp.src('dist/index.css') +function checkCSS(glob) { + return gulp.src(glob) .pipe(through.obj(async function doBake(file, enc, cb) { // Fetch core tokes once during the build if (coreTokens === null) { @@ -135,8 +135,16 @@ function checkCSS() { })); } -exports.checkCSS = checkCSS; +function checkSourceCSS() { + return checkCSS('index.css'); +} + +function checkBuiltCSS() { + return checkCSS('dist/index.css'); +} + exports.buildCSS = gulp.series( + checkSourceCSS, buildCSS, - checkCSS + checkBuiltCSS ); From 6c7a28f90289c46b256619b5bba8e48ca0f98141 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Wed, 25 May 2022 10:35:56 -0700 Subject: [PATCH 27/45] feat: wip support where --- tools/postcss-splitinator/fixtures/where.css | 23 ++++++++++++++++++++ tools/postcss-splitinator/index.js | 2 ++ 2 files changed, 25 insertions(+) create mode 100644 tools/postcss-splitinator/fixtures/where.css diff --git a/tools/postcss-splitinator/fixtures/where.css b/tools/postcss-splitinator/fixtures/where.css new file mode 100644 index 00000000000..a150bd77fe4 --- /dev/null +++ b/tools/postcss-splitinator/fixtures/where.css @@ -0,0 +1,23 @@ +@container(--system: spectrum) { + :where(.component) { + --background-color: blue; + } + :where(.component.is-selected) { + --background-color: darkblue; + } + :where(.component .icon) { + --color: gray; + } +} + +@container(--system: express) { + :where(.component) { + --background-color: purple; + } + :where(.component.is-selected) { + --background-color: darkpurple; + } + :where(.component .icon) { + --color: white; + } +} diff --git a/tools/postcss-splitinator/index.js b/tools/postcss-splitinator/index.js index 20b67eb1104..ab8831b13fc 100644 --- a/tools/postcss-splitinator/index.js +++ b/tools/postcss-splitinator/index.js @@ -1,6 +1,8 @@ const postcss = require('postcss'); function getName(selector, prop) { + selector = selector.replace(/^:where\((.*?)\)$/, '$1'); + // This regex is designed to pull spectrum-ActionButton out of a selector let baseSelectorMatch = selector.match(/^\.([a-z]+-[\A-Z][^-. ]+)/); if (baseSelectorMatch) { From f97cd97e3ba45eb0484789a916cb204c242867ee Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Wed, 25 May 2022 11:42:59 -0700 Subject: [PATCH 28/45] test: fix tests also add license --- tools/postcss-splitinator/index.js | 14 +++++++++++++- tools/postcss-splitinator/test.js | 12 ++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/tools/postcss-splitinator/index.js b/tools/postcss-splitinator/index.js index ab8831b13fc..4e2f51225ab 100644 --- a/tools/postcss-splitinator/index.js +++ b/tools/postcss-splitinator/index.js @@ -1,3 +1,15 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + const postcss = require('postcss'); function getName(selector, prop) { @@ -16,7 +28,7 @@ function getName(selector, prop) { let selectorParts = selector.replace(/\s+/g, '').replace(/,/g, '').split('.'); - return `--system-` + (`${selectorParts.join('-')}-${prop.substr(2)}`).replace(/-+/g, '-').toLowerCase(); + return '--' + (`system-` + `${selectorParts.join('-')}-${prop.substr(2)}`).replace(/-+/g, '-').toLowerCase(); } function process(root, options) { diff --git a/tools/postcss-splitinator/test.js b/tools/postcss-splitinator/test.js index 5dae3296a9d..04afef235aa 100644 --- a/tools/postcss-splitinator/test.js +++ b/tools/postcss-splitinator/test.js @@ -1,3 +1,15 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + const fs = require('fs'); const test = require('ava'); const postcss = require('postcss'); From 3a817bcbb8a9b7fc9f7ec9c32345fa027150344b Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Wed, 25 May 2022 12:14:07 -0700 Subject: [PATCH 29/45] feat: split things out, combine things document nothing and add tests for nothing, name things badly --- components/actionbutton/index.css | 200 ------------------ components/actionbutton/themes/express.css | 57 +++++ components/actionbutton/themes/spectrum.css | 165 +++++++++++++++ components/tokens/custom.css | 9 - tools/component-builder-simple/css/index.js | 69 +++++- .../css/processors.js | 9 +- tools/component-builder-simple/package.json | 2 + tools/postcss-combininator/README.md | 35 +++ tools/postcss-combininator/expected/basic.css | 4 + tools/postcss-combininator/fixtures/basic.css | 8 + tools/postcss-combininator/index.js | 44 ++++ tools/postcss-combininator/package.json | 14 ++ tools/postcss-combininator/test.js | 45 ++++ tools/postcss-splitinator/index.js | 45 ++-- 14 files changed, 469 insertions(+), 237 deletions(-) create mode 100644 components/actionbutton/themes/express.css create mode 100644 components/actionbutton/themes/spectrum.css create mode 100644 tools/postcss-combininator/README.md create mode 100644 tools/postcss-combininator/expected/basic.css create mode 100644 tools/postcss-combininator/fixtures/basic.css create mode 100644 tools/postcss-combininator/index.js create mode 100644 tools/postcss-combininator/package.json create mode 100644 tools/postcss-combininator/test.js diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 34329b3794c..5966aa2d7b2 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -75,206 +75,6 @@ governing permissions and limitations under the License. --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width)); } -@container (--system: spectrum) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - - --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); - - --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - } - - &.is-selected { - --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - - --spectrum-actionbutton-content-color-default: var(--spectrum-white); - --spectrum-actionbutton-content-color-hover: var(--spectrum-white); - --spectrum-actionbutton-content-color-down: var(--spectrum-white); - --spectrum-actionbutton-content-color-focus: var(--spectrum-white); - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-actionbutton-border-color-disabled: transparent; - - &.spectrum-ActionButton--emphasized { - --spectrum-actionbutton-background-color-default: var(--spectrum-accent-background-color-default); - --spectrum-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-actionbutton-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus); - } - } - - &.spectrum-ActionButton--staticBlack, - &.spectrum-ActionButton--staticWhite { - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - - --spectrum-actionbutton-border-color-disabled: transparent; - } - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500); - - --spectrum-actionbutton-content-color-default: var(--spectrum-black); - --spectrum-actionbutton-content-color-hover: var(--spectrum-black); - --spectrum-actionbutton-content-color-down: var(--spectrum-black); - --spectrum-actionbutton-content-color-focus: var(--spectrum-black); - - --spectrum-actionbutton-focus-ring-color: var(--spectrum-static-black-focus-ring-color); - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - - &.is-selected { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-800); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900); - - --spectrum-actionbutton-border-color-disabled: transparent; - - --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); - --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); - --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); - --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - } - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500); - - --spectrum-actionbutton-content-color-default: var(--spectrum-white); - --spectrum-actionbutton-content-color-hover: var(--spectrum-white); - --spectrum-actionbutton-content-color-down: var(--spectrum-white); - --spectrum-actionbutton-content-color-focus: var(--spectrum-white); - - --spectrum-actionbutton-focus-ring-color: var(--spectrum-static-white-focus-ring-color); - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - - &.is-selected { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); - --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); - --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); - --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-actionbutton-border-color-disabled: transparent; - } - } - } -} - -@container (--system: express) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-actionbutton-border-color-disabled: transparent; - - &.is-selected { - --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-background-color-default); - --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-background-color-down); - --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - } - - &.spectrum-ActionButton--staticBlack, - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - } - } -} - @media (forced-colors: active) { .spectrum-ActionButton { &:after { diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css new file mode 100644 index 00000000000..807332e555f --- /dev/null +++ b/components/actionbutton/themes/express.css @@ -0,0 +1,57 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +@container (--system: express) { + .spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + } + + &.spectrum-ActionButton--staticBlack, + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + } + + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); + } + + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); + } + } +} diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css new file mode 100644 index 00000000000..e12a32ea1ff --- /dev/null +++ b/components/actionbutton/themes/spectrum.css @@ -0,0 +1,165 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +@container (--system: spectrum) { + .spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + + --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: transparent; + } + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-content-color-default: var(--spectrum-white); + --spectrum-actionbutton-content-color-hover: var(--spectrum-white); + --spectrum-actionbutton-content-color-down: var(--spectrum-white); + --spectrum-actionbutton-content-color-focus: var(--spectrum-white); + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + + &.spectrum-ActionButton--emphasized { + --spectrum-actionbutton-background-color-default: var(--spectrum-accent-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus); + } + } + + &.spectrum-ActionButton--staticBlack, + &.spectrum-ActionButton--staticWhite { + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-border-color-disabled: transparent; + } + } + + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); + + --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-black); + --spectrum-actionbutton-content-color-hover: var(--spectrum-black); + --spectrum-actionbutton-content-color-down: var(--spectrum-black); + --spectrum-actionbutton-content-color-focus: var(--spectrum-black); + + --spectrum-actionbutton-focus-ring-color: var(--spectrum-static-black-focus-ring-color); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-actionbutton-border-color-disabled: transparent; + + --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + } + } + + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); + + --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-white); + --spectrum-actionbutton-content-color-hover: var(--spectrum-white); + --spectrum-actionbutton-content-color-down: var(--spectrum-white); + --spectrum-actionbutton-content-color-focus: var(--spectrum-white); + + --spectrum-actionbutton-focus-ring-color: var(--spectrum-static-white-focus-ring-color); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + } + } + } +} diff --git a/components/tokens/custom.css b/components/tokens/custom.css index 73da8445c00..85a15c3d58f 100644 --- a/components/tokens/custom.css +++ b/components/tokens/custom.css @@ -11,20 +11,11 @@ governing permissions and limitations under the License. */ /* This file contains overrides and additions to core tokens */ -:root { - --ON: ; - --OFF: inherit; - --system-spectrum: var(--OFF); - --system-express: var(--OFF); -} - .spectrum { - --system-spectrum: var(--ON); --system: spectrum; } .spectrum--express { - --system-express: var(--ON); --system: express; } diff --git a/tools/component-builder-simple/css/index.js b/tools/component-builder-simple/css/index.js index f97b6728d87..cbdd810ced3 100644 --- a/tools/component-builder-simple/css/index.js +++ b/tools/component-builder-simple/css/index.js @@ -14,10 +14,13 @@ const gulp = require('gulp'); const path = require('path'); const through = require('through2'); const postcss = require('gulp-postcss'); +const rename = require('gulp-rename'); +const concat = require('gulp-concat'); const postcssReal = require('postcss'); -const processors = require('./processors').processors; const fsp = require('fs').promises; const { parse } = require('postcss-values-parser'); +const processorsFunction = require('./processors').getProcessors; +const processors = processorsFunction(); function getTokensUsedInValueNode(node, usedTokens) { usedTokens = usedTokens ?? []; @@ -87,14 +90,61 @@ async function getCoreTokens() { } function buildCSS() { - return gulp.src('index.css') + return gulp.src([ + 'index.css', + 'themes/spectrum.css', // spectrum comes first + 'themes/*.css' + ]) + .pipe(concat('index.css')) .pipe(postcss(processors)) .pipe(gulp.dest('dist/')); } +function buildCSSWithoutThemes() { + return gulp.src([ + 'index.css', + 'themes/spectrum.css', // spectrum comes first + 'themes/*.css' + ]) + .pipe(concat('index-base.css')) + .pipe(postcss(processorsFunction(false, { noFlatVariables: true }))) + .pipe(gulp.dest('dist/')); +} + +function buildCSSThemeIndex() { + return gulp.src([ + 'themes/spectrum.css', // spectrum comes first + 'themes/*.css' + ]) + .pipe(concat('index-theme.css')) + .pipe(postcss(processorsFunction(true, { noSelectors: true }))) + .pipe(gulp.dest('dist/')); +} + +function buildCSSThemes() { + return gulp.src([ + 'themes/*.css' + ]) + .pipe(postcss(processorsFunction(true, { noSelectors: true }))) + .pipe(gulp.dest('dist/themes/')); +} + +/** + Special case for express: it needs Spectrum base vars and needs to override them +*/ +function buildExpressTheme() { + return gulp.src([ + 'dist/index-theme.css' + ]) + .pipe(concat('express.css')) + .pipe(postcss(processorsFunction(true).concat(require('postcss-combininator')))) + .pipe(gulp.dest('dist/themes/')); +} + let coreTokens = null; function checkCSS(glob) { return gulp.src(glob) + .pipe(concat('index-combined.css')) .pipe(through.obj(async function doBake(file, enc, cb) { // Fetch core tokes once during the build if (coreTokens === null) { @@ -136,7 +186,10 @@ function checkCSS(glob) { } function checkSourceCSS() { - return checkCSS('index.css'); + return checkCSS([ + 'themes/*.css', + 'index.css' + ]); } function checkBuiltCSS() { @@ -145,6 +198,14 @@ function checkBuiltCSS() { exports.buildCSS = gulp.series( checkSourceCSS, - buildCSS, + gulp.parallel( + buildCSS, + buildCSSWithoutThemes, + gulp.series( + buildCSSThemes, + buildCSSThemeIndex, + buildExpressTheme + ) + ), checkBuiltCSS ); diff --git a/tools/component-builder-simple/css/processors.js b/tools/component-builder-simple/css/processors.js index a1f709efd05..87f9d066016 100644 --- a/tools/component-builder-simple/css/processors.js +++ b/tools/component-builder-simple/css/processors.js @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -function getProcessors() { +function getProcessors(keepUnusedVars = false, splitinatorOptions = {}) { return [ require('postcss-import'), require('postcss-nested'), @@ -20,14 +20,15 @@ function getProcessors() { return 'spectrum--express'; } return identifier; - } + }, + ...splitinatorOptions }), require('postcss-inherit'), require('./plugins/postcss-transform-logical')(), require('./plugins/postcss-custom-properties-passthrough')(), require('postcss-calc'), require('./plugins/postcss-strip-comments')({ preserveTopdoc: false }), - require('postcss-dropunusedvars'), + !keepUnusedVars && require('postcss-dropunusedvars'), require('postcss-dropdupedvars'), require('postcss-focus-ring'), require('postcss-discard-empty'), @@ -40,7 +41,7 @@ function getProcessors() { 'last 2 iOS versions' ] }) - ]; + ].filter(Boolean); } exports.getProcessors = getProcessors; diff --git a/tools/component-builder-simple/package.json b/tools/component-builder-simple/package.json index 152bb808543..5608143e8d0 100644 --- a/tools/component-builder-simple/package.json +++ b/tools/component-builder-simple/package.json @@ -18,11 +18,13 @@ "autoprefixer": "^6.5.3", "del": "^5.0.0", "gulp": "^4.0.0", + "gulp-concat": "^2.6.1", "gulp-rename": "^1.4.0", "gulp-postcss": "^7.0.0", "postcss": "^7.0.36", "postcss-calc": "^6.0.0", "postcss-splitinator": "^1.0.0-beta", + "postcss-combininator": "^1.0.0-beta", "postcss-discard-empty": "^4.0.1", "postcss-dropdupedvars": "^1.1.2", "postcss-dropunusedvars": "^1.2.1", diff --git a/tools/postcss-combininator/README.md b/tools/postcss-combininator/README.md new file mode 100644 index 00000000000..dfdef9cad85 --- /dev/null +++ b/tools/postcss-combininator/README.md @@ -0,0 +1,35 @@ +# postcss-combininator +> Combines multiple blocks of custom properties + +## Installation + +```sh +npm install postcss-combininator +postcss -u postcss-combininator -o dist/index.css src/index.css +``` + +## Usage + +This plugin turns this: + +```css +.spectrum { + --spectrum-actionbutton-background-color: blue; + --spectrum-actionbutton-border-color: transparent; +} + +.spectrum--express { + --spectrum-actionbutton-background-color: purple; +} +``` + +Into this: + +```css +.spectrum--express { + --spectrum-actionbutton-border-color: transparent; + --spectrum-actionbutton-background-color: purple; +} +``` + +The resulting selector comes from the last rule, and all duplicate properties in the subsequent rules override the previous declarations. diff --git a/tools/postcss-combininator/expected/basic.css b/tools/postcss-combininator/expected/basic.css new file mode 100644 index 00000000000..16132380fa6 --- /dev/null +++ b/tools/postcss-combininator/expected/basic.css @@ -0,0 +1,4 @@ +.spectrum--express { + --spectrum-actionbutton-background-color: purple; + --spectrum-actionbutton-border-color: transparent; +} diff --git a/tools/postcss-combininator/fixtures/basic.css b/tools/postcss-combininator/fixtures/basic.css new file mode 100644 index 00000000000..1cffc87a230 --- /dev/null +++ b/tools/postcss-combininator/fixtures/basic.css @@ -0,0 +1,8 @@ +.spectrum { + --spectrum-actionbutton-background-color: blue; + --spectrum-actionbutton-border-color: transparent; +} + +.spectrum--express { + --spectrum-actionbutton-background-color: purple; +} diff --git a/tools/postcss-combininator/index.js b/tools/postcss-combininator/index.js new file mode 100644 index 00000000000..4cc1ef64f8c --- /dev/null +++ b/tools/postcss-combininator/index.js @@ -0,0 +1,44 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +const postcss = require('postcss'); + +function process(root, options) { + let rules = []; + let declarations = {}; + root.walkRules(rule => { + rules.push(rule); + rule.walkDecls(decl => { + if (decl.prop.startsWith('--')) { + declarations[decl.prop] = decl; + decl.remove(); + } + }); + }); + + let lastRule = rules[rules.length - 1]; + if (lastRule) { + rules.forEach((rule, index) => { + if (index !== rules.length -1) { + rule.remove(); + } + }); + + for (let decl of Object.values(declarations)) { + lastRule.append(decl); + } + } +} + +module.exports = postcss.plugin('postcss-combininator', function(options) { + return (root, result) => process(root, options) +}); diff --git a/tools/postcss-combininator/package.json b/tools/postcss-combininator/package.json new file mode 100644 index 00000000000..c9d185332bc --- /dev/null +++ b/tools/postcss-combininator/package.json @@ -0,0 +1,14 @@ +{ + "name": "postcss-combininator", + "version": "1.0.0-beta.0", + "description": "Combines multiple blocks of custom properties", + "main": "index.js", + "scripts": { + "test": "ava" + }, + "author": "Larry Davis ", + "license": "BSD-2-Clause", + "dependencies": { + "postcss": "^7.0.32" + } +} diff --git a/tools/postcss-combininator/test.js b/tools/postcss-combininator/test.js new file mode 100644 index 00000000000..04afef235aa --- /dev/null +++ b/tools/postcss-combininator/test.js @@ -0,0 +1,45 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +const fs = require('fs'); +const test = require('ava'); +const postcss = require('postcss'); +const plugin = require('./index.js'); + +function compare(t, fixtureFilePath, expectedFilePath, options = { + processIdentifier: (identifier) => { + if (identifier === 'express') { + return 'spectrum--express'; + } + return identifier; + } +}){ + return postcss([ plugin(options) ]) + .process( + readFile(`./fixtures/${fixtureFilePath}`), + { from: fixtureFilePath } + ) + .then(result => { + const actual = result.css; + const expected = readFile(`./expected/${expectedFilePath}`); + t.is(actual, expected); + t.is(result.warnings().length, 0); + }); +} + +function readFile(filename) { + return fs.readFileSync(filename, 'utf8'); +} + +test('create basic output', t => { + return compare(t, 'basic.css', 'basic.css'); +}); diff --git a/tools/postcss-splitinator/index.js b/tools/postcss-splitinator/index.js index 4e2f51225ab..86e3d26acfd 100644 --- a/tools/postcss-splitinator/index.js +++ b/tools/postcss-splitinator/index.js @@ -31,10 +31,11 @@ function getName(selector, prop) { return '--' + (`system-` + `${selectorParts.join('-')}-${prop.substr(2)}`).replace(/-+/g, '-').toLowerCase(); } -function process(root, options) { +function process(root, options = {}) { + options.noFlatVariables = options.noFlatVariables ?? false; + options.noSelectors = options.noSelectors ?? false; const selectorMap = {}; - let lastRule = null; root.walkAtRules(container => { if (container.name === 'container') { const [, identifierName, identifierValue] = container.params.match(/\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/); @@ -44,7 +45,9 @@ function process(root, options) { source: container.source }); - container.parent.insertAfter(container, rule); + if (!options.noFlatVariables) { + container.parent.insertAfter(container, rule); + } container.walkDecls(decl => { if (decl.prop.startsWith('--')) { @@ -57,7 +60,10 @@ function process(root, options) { prop: variableName }); newDecl.raws.before = '\n '; - rule.append(newDecl); + + if (!options.noFlatVariables) { + rule.append(newDecl); + } const selectorNode = selectorMap[selector] = selectorMap[selector] || {}; @@ -81,28 +87,27 @@ function process(root, options) { }); container.remove(); - - lastRule = rule; } }); - for (let [selector, props] of Object.entries(selectorMap)) { - const rule = postcss.rule({ - selector - }); - - for (let [prop, value] of Object.entries(props)) { - const decl = postcss.decl({ - prop, - value + if (!options.noSelectors) { + for (let [selector, props] of Object.entries(selectorMap)) { + const rule = postcss.rule({ + selector }); - decl.raws.before = '\n '; - rule.append(decl); - } + for (let [prop, value] of Object.entries(props)) { + const decl = postcss.decl({ + prop, + value + }); + decl.raws.before = '\n '; - lastRule.parent.insertAfter(lastRule, rule); - lastRule = rule; + rule.append(decl); + } + + root.append(rule); + } } } From 8238e09c1af58edbbb90c59f77b8966ad6d6509a Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Wed, 25 May 2022 12:16:51 -0700 Subject: [PATCH 30/45] docs: add docs for new options shhh, still no tests for these options... --- tools/postcss-splitinator/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/tools/postcss-splitinator/README.md b/tools/postcss-splitinator/README.md index 93f4d7539b7..2fc32e6ac3d 100644 --- a/tools/postcss-splitinator/README.md +++ b/tools/postcss-splitinator/README.md @@ -18,6 +18,14 @@ Customize the creation of variable names. By default, as SUIT naming convention Customize the selectors that variables are placed in. Passed the value and key of the variable that was passed to the container, i.e. `identifierValue = spectrum` and `identifierName = system` for the example below. By default, `identifierName` is used as-is. +### `options.noFlatVariables = false` + +Whether to avoid including flat variables in the output. + +### `options.noSelectors = false` + +Whether to avoid including selectors that use the flat variables in the output. + ## Usage This plugin turns this: From 413fd40039fb310c3252323d24223ede1bc6a46d Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Fri, 27 May 2022 09:22:26 -0700 Subject: [PATCH 31/45] docs: correct example Co-authored-by: Patrick Fulton <360251+pfulton@users.noreply.github.com> --- tools/postcss-splitinator/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/postcss-splitinator/README.md b/tools/postcss-splitinator/README.md index 2fc32e6ac3d..a4499192145 100644 --- a/tools/postcss-splitinator/README.md +++ b/tools/postcss-splitinator/README.md @@ -31,7 +31,7 @@ Whether to avoid including selectors that use the flat variables in the output. This plugin turns this: ```css -@container(--system: standard) { +@container(--system: spectrum) { .component { --background-color: blue; } From 9a9b644d4594447846e315c371c0df447911ae2b Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Fri, 27 May 2022 09:23:31 -0700 Subject: [PATCH 32/45] docs: fix readme example --- tools/postcss-splitinator/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tools/postcss-splitinator/README.md b/tools/postcss-splitinator/README.md index a4499192145..1a41b6a8fb0 100644 --- a/tools/postcss-splitinator/README.md +++ b/tools/postcss-splitinator/README.md @@ -66,8 +66,8 @@ Into this: } .spectrum--express { - --system-component-background-color: blue; - --system-component-selected-background-color: darkblue; + --system-component-background-color: purple; + --system-component-selected-background-color: darkpurple; } .component { From 1a36f68339394bdb3f9d096739adc9fa0e0e2edc Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Fri, 27 May 2022 10:40:39 -0700 Subject: [PATCH 33/45] fix: set path correct when concating things --- tools/component-builder-simple/css/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/tools/component-builder-simple/css/index.js b/tools/component-builder-simple/css/index.js index cbdd810ced3..f368c157adb 100644 --- a/tools/component-builder-simple/css/index.js +++ b/tools/component-builder-simple/css/index.js @@ -96,7 +96,9 @@ function buildCSS() { 'themes/*.css' ]) .pipe(concat('index.css')) - .pipe(postcss(processors)) + .pipe(postcss(processors, { + from: './index.css' // gulp-concat sets the file.path wrong, so override here + })) .pipe(gulp.dest('dist/')); } @@ -107,7 +109,9 @@ function buildCSSWithoutThemes() { 'themes/*.css' ]) .pipe(concat('index-base.css')) - .pipe(postcss(processorsFunction(false, { noFlatVariables: true }))) + .pipe(postcss(processorsFunction(false, { noFlatVariables: true }), { + from: './index.css' // gulp-concat sets the file.path wrong, so override here + })) .pipe(gulp.dest('dist/')); } From f16efdff4ab50d288060c1442c17a1264f9e316d Mon Sep 17 00:00:00 2001 From: Garth Braithwaite Date: Fri, 27 May 2022 12:31:21 -0600 Subject: [PATCH 34/45] chore: release @spectrum-css/actionbutton@2.0.0-beta.1 --- components/actionbutton/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index 2ccac0fd70e..217fb159413 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionbutton", - "version": "1.1.13", + "version": "2.0.0-beta.1", "description": "The Spectrum CSS action button component", "license": "Apache-2.0", "main": "dist/index-vars.css", @@ -29,4 +29,4 @@ "access": "public" }, "homepage": "https://opensource.adobe.com/spectrum-css/" -} \ No newline at end of file +} From f314054eab791e6e2fcc91bd042e58af4d3fd9bd Mon Sep 17 00:00:00 2001 From: Garth Braithwaite Date: Fri, 27 May 2022 13:14:44 -0600 Subject: [PATCH 35/45] chore: release @spectrum-css/actionbutton@2.0.0-beta.2 --- components/actionbutton/package.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index 217fb159413..d35a33e256e 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionbutton", - "version": "2.0.0-beta.1", + "version": "2.0.0-beta.2", "description": "The Spectrum CSS action button component", "license": "Apache-2.0", "main": "dist/index-vars.css", @@ -21,12 +21,13 @@ "devDependencies": { "@spectrum-css/component-builder-simple": "^1.0.0-beta", "@spectrum-css/icon": "^3.0.21", + "@spectrum-css/tokens": "^1.0.0-beta.1", "@spectrum-css/vars": "^8.0.0", - "@spectrum-css/tokens": "^1.0.0-beta", "gulp": "^4.0.0" }, "publishConfig": { "access": "public" }, - "homepage": "https://opensource.adobe.com/spectrum-css/" + "homepage": "https://opensource.adobe.com/spectrum-css/", + "gitHead": "f16efdff4ab50d288060c1442c17a1264f9e316d" } From ed486f97f05ef25d881515178963d462f1189724 Mon Sep 17 00:00:00 2001 From: Garth Braithwaite Date: Fri, 27 May 2022 13:15:27 -0600 Subject: [PATCH 36/45] chore: release @spectrum-css/tokens@1.0.0-beta.1 --- components/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tokens/package.json b/components/tokens/package.json index 60c5fbb234a..fd1f6f38da6 100644 --- a/components/tokens/package.json +++ b/components/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tokens", - "version": "1.0.0-beta.0", + "version": "1.0.0-beta.1", "description": "The Spectrum CSS tokens package", "license": "Apache-2.0", "main": "dist/index.css", From 783fcf98859eb6da9c620028d3ad0c9ebb8ad754 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Fri, 27 May 2022 12:53:37 -0700 Subject: [PATCH 37/45] build: add publish config so lerna doesn't explode --- tools/component-builder-simple/package.json | 3 +++ tools/postcss-combininator/package.json | 3 +++ tools/postcss-splitinator/package.json | 3 +++ 3 files changed, 9 insertions(+) diff --git a/tools/component-builder-simple/package.json b/tools/component-builder-simple/package.json index 5608143e8d0..a1002c5a2f2 100644 --- a/tools/component-builder-simple/package.json +++ b/tools/component-builder-simple/package.json @@ -14,6 +14,9 @@ "peerDependencies": { "@spectrum-css/tokens": "^1.0.0-beta" }, + "publishConfig": { + "access": "public" + }, "dependencies": { "autoprefixer": "^6.5.3", "del": "^5.0.0", diff --git a/tools/postcss-combininator/package.json b/tools/postcss-combininator/package.json index c9d185332bc..f6436939edf 100644 --- a/tools/postcss-combininator/package.json +++ b/tools/postcss-combininator/package.json @@ -8,6 +8,9 @@ }, "author": "Larry Davis ", "license": "BSD-2-Clause", + "publishConfig": { + "access": "public" + }, "dependencies": { "postcss": "^7.0.32" } diff --git a/tools/postcss-splitinator/package.json b/tools/postcss-splitinator/package.json index 8bc84982933..3ea806e199e 100644 --- a/tools/postcss-splitinator/package.json +++ b/tools/postcss-splitinator/package.json @@ -8,6 +8,9 @@ }, "author": "Larry Davis ", "license": "BSD-2-Clause", + "publishConfig": { + "access": "public" + }, "dependencies": { "postcss": "^7.0.32" } From f603e16c3c87e51548fda662c10916512f1a3fce Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 17 May 2022 08:59:33 -0700 Subject: [PATCH 38/45] feat: add core tokens --- README.md | 22 ++- components/tokens/README.md | 26 +++ components/tokens/config.js | 170 +++++++++++++++++ components/tokens/custom.css | 33 ++++ components/tokens/gulpfile.js | 43 +++++ components/tokens/package.json | 29 +++ site/includes/dependencies.pug | 2 + site/resources/js/SpectrumSwitcher.js | 8 + tools/bundle-builder/lib/depUtils.js | 5 + tools/bundle-builder/vars/index.js | 14 +- tools/component-builder/css/lib/varUtils.js | 4 +- tools/component-builder/css/vars.js | 2 +- tools/component-builder/package.json | 3 +- yarn.lock | 195 +++++++++++++++++++- 14 files changed, 546 insertions(+), 10 deletions(-) create mode 100644 components/tokens/README.md create mode 100644 components/tokens/config.js create mode 100644 components/tokens/custom.css create mode 100644 components/tokens/gulpfile.js create mode 100644 components/tokens/package.json diff --git a/README.md b/README.md index 2a1e5ce8ad3..e8e0c7550eb 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,9 @@ If you're targeting modern browsers, start by including the base set of variable + + + @@ -72,13 +75,28 @@ Then, make sure you've included the relevant classes to choose which scale and c ``` -**Note:** If you are importing SVG icon sprite sheets, the `.spectrum--medium`/`.spectrum--large` classes should be added to the `` element so UI icons render in the correct size in IE 11. For browsers that support custom properties, or if you're not using SVG sprite sheets for UI icons and are manually managing icon sizing in your implementation, `.spectrum--medium`/`.spectrum--large` can be added to the `` or other element. +To switch to Express, load vars from `@spectrum-css/expressvars` instead of `@spectrum-css/vars` and add the `.spectrum--express` class to the `` element: + +```html + + + + + + + + + + +``` Then you can use components by copy/pasting their code from [the documentation](http://opensource.adobe.com/spectrum-css/). With the magic of CSS custom properties, you can infinitely nest different color stops and themes, [as illustrated here](https://codepen.io/lazd/pen/axXMRL). -Additionally, you can override variables and customize Spectrum CSS' look and feel by re-defining the custom properties in context, [like so](https://codepen.io/lazd/pen/ROvOPO). See the source in `components/*/index-vars.css` to determine which custom properties you can override. +### Customizing components + +You can override variables and customize Spectrum CSS' look and feel by re-defining the custom properties in context. Look for the **Custom Property API** section in each component to determine which custom properties you can override. See [ActionButton for a complete example](https://opensource.adobe.com/spectrum-css/actionbutton.html#customized). ### Importing UI icons diff --git a/components/tokens/README.md b/components/tokens/README.md new file mode 100644 index 00000000000..23faf9c25ea --- /dev/null +++ b/components/tokens/README.md @@ -0,0 +1,26 @@ +# @spectrum-css/tokens +> Core tokens builder for Spectrum CSS + +This package uses StyleDictionary to build Spectrum core tokens for CSS. + +## Output + +The output is concatenated into a single `dist/index.css` for use in Spectrum CSS. This entire file should be imported, and the relevant classes should be toggled to swap out core tokens. + +On the `` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. To switch to Express, add `.spectrum--express`. + +## Overrides and additions + +Custom overrides and additions to core tokens can be added to `custom.css`. + +Ensure that you correctly scope any added tokens: + +* `.spectrum` - Global, unchanging tokens or tokens specific to the Spectrum flavor +* `.spectrum--express` - Tokens specific to the Express flavor +* `.spectrum--lightest` - Tokens specific to the light color stop (soon to be deprecated) +* `.spectrum--light` - Tokens specific to the light color stop +* `.spectrum--dark` - Tokens specific to the dark color stop +* `.spectrum--darkest` - Tokens specific to the darkest color stop +* `.spectrum--medium` - Tokens specific to the medium (desktop) scale +* `.spectrum--large` - Tokens specific to the large (mobile) scale +* `.spectrum--express.spectrum--*` - Tokens specific to the Express flavor for any of the above color stops and scales diff --git a/components/tokens/config.js b/components/tokens/config.js new file mode 100644 index 00000000000..8258e9ac2e8 --- /dev/null +++ b/components/tokens/config.js @@ -0,0 +1,170 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +const path = require('path'); +const StyleDictionary = require('style-dictionary'); +const CSSSetsFormatter = require('style-dictionary-sets').CSSSetsFormatter; +const NameKebabTransfom = require('style-dictionary-sets').NameKebabTransfom; +const AttributeSetsTransform = require('style-dictionary-sets').AttributeSetsTransform; + +StyleDictionary.registerTransform(NameKebabTransfom); +StyleDictionary.registerTransform(AttributeSetsTransform); +StyleDictionary.registerFormat(CSSSetsFormatter); + +const systemNames = ['express', 'spectrum', 'wireframe']; + +const getSets = (token) => { + return token.path.filter( + (part, index, array) => array[index - 1] == "sets" + ); +} + +const tokenHasSets = (token) => { + return token.path.includes('sets'); +} + +const generateFileConfig = (setName, subSystemName) => { + const sets = [setName, subSystemName]; + + const selectorMap = { + 'desktop': 'medium', + 'mobile': 'large' + }; + + const fileName = selectorMap[setName] ?? setName; + + let selector = `.spectrum--${fileName}`; + if (subSystemName !== 'spectrum') { + selector = `.spectrum--${subSystemName}${selector}`; + } + + return { + destination: `${subSystemName}/${fileName}-vars.css`, + format: CSSSetsFormatter.name, + filter: (token) => { + return ( + tokenHasSets(token) && + getSets(token).includes(subSystemName) && + getSets(token).includes(setName) + ); + }, + options: { + selector, + showFileHeader: false, + outputReferences: true, + sets + }, + } +}; + +const generateGlobalConfig = (subSystemName) => { + const sets = [subSystemName]; + + const selector = subSystemName === 'spectrum' ? '.spectrum' : `.spectrum--${subSystemName}`; + + return { + destination: `${subSystemName}/global-vars.css`, + format: CSSSetsFormatter.name, + filter: (token) => { + return ( + tokenHasSets(token) && + getSets(token).length === 1 && + getSets(token)[0] === subSystemName + ); + }, + options: { + selector, + showFileHeader: false, + outputReferences: true, + sets + }, + } +} + +const generateGlobalSetConfig = (setName) => { + const sets = [setName]; + + const selectorMap = { + 'desktop': 'medium', + 'mobile': 'large' + }; + + const fileName = selectorMap[setName] ?? setName; + + let selectors = [`.spectrum--${fileName}`]; + + // Apply all light colors as lightest for backwards compat + if (setName === 'light') { + selectors.push('.spectrum--lightest'); + } + + return { + destination: `${fileName}-vars.css`, + format: CSSSetsFormatter.name, + filter: (token) => { + return ( + tokenHasSets(token) && + getSets(token).every(set => !systemNames.includes(set)) && + getSets(token).includes(setName) + ); + }, + options: { + selector: selectors.join(', '), + showFileHeader: false, + outputReferences: true, + sets + }, + } +} + +const tokenGlob = path.dirname(require.resolve('@adobe/spectrum-tokens')) + '/src/**/*.json'; +module.exports = { + source: [tokenGlob], + platforms: { + CSS: { + buildPath: 'dist/css/', + transforms: [AttributeSetsTransform.name, NameKebabTransfom.name], + prefix: 'spectrum', + files: [ + { + destination: 'global-vars.css', + format: CSSSetsFormatter.name, + filter: (token) => !tokenHasSets(token), + options: { + showFileHeader: false, + outputReferences: true, + selector: '.spectrum' + }, + }, + generateGlobalSetConfig('desktop'), + generateGlobalSetConfig('mobile'), + generateGlobalSetConfig('light'), + generateGlobalSetConfig('dark'), + generateGlobalSetConfig('darkest'), + + generateGlobalConfig('spectrum'), + generateFileConfig('desktop', 'spectrum'), + generateFileConfig('mobile', 'spectrum'), + generateFileConfig('light', 'spectrum'), + generateFileConfig('dark', 'spectrum'), + generateFileConfig('darkest', 'spectrum'), + + generateGlobalConfig('express'), + generateFileConfig('desktop', 'express'), + generateFileConfig('mobile', 'express'), + generateFileConfig('light', 'express'), + generateFileConfig('dark', 'express'), + generateFileConfig('darkest', 'express'), + ], + }, + }, +}; diff --git a/components/tokens/custom.css b/components/tokens/custom.css new file mode 100644 index 00000000000..f792877800b --- /dev/null +++ b/components/tokens/custom.css @@ -0,0 +1,33 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +/* This file contains overrides and additions to core tokens */ + +.spectrum { + --spectrum-animation-duration-100: 130ms; +} + +.spectrum--medium { + /* edge-to-visual-only is used for icon-only buttons */ + --spectrum-edge-to-visual-only-75: 4px; + --spectrum-edge-to-visual-only-100: 7px; + --spectrum-edge-to-visual-only-200: 10px; + --spectrum-edge-to-visual-only-300: 13px; +} + +.spectrum--large { + /* edge-to-visual-only is used for icon-only buttons */ + --spectrum-edge-to-visual-only-75: 5px; + --spectrum-edge-to-visual-only-100: 9px; + --spectrum-edge-to-visual-only-200: 13px; + --spectrum-edge-to-visual-only-300: 16px; +} diff --git a/components/tokens/gulpfile.js b/components/tokens/gulpfile.js new file mode 100644 index 00000000000..a15560f82e6 --- /dev/null +++ b/components/tokens/gulpfile.js @@ -0,0 +1,43 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +const gulp = require('gulp'); +const concat = require('gulp-concat'); +const del = require('del'); +const StyleDictionary = require('style-dictionary').extend('config.js'); + +function clean() { + return del('dist/*'); +} + +function concatIndex() { + return gulp.src([ + 'dist/css/*.css', + 'dist/css/spectrum/*.css', + 'dist/css/express/*.css', + 'custom.css' + ]) + .pipe(concat('index.css')) + .pipe(gulp.dest('dist/')); +} + +function styleDictionary(cb) { + StyleDictionary.buildAllPlatforms(); + cb(); +} + +exports.clean = clean; +exports.build = exports.buildLite = exports.buildMedium = exports.default = gulp.series( + clean, + styleDictionary, + concatIndex +); diff --git a/components/tokens/package.json b/components/tokens/package.json new file mode 100644 index 00000000000..60c5fbb234a --- /dev/null +++ b/components/tokens/package.json @@ -0,0 +1,29 @@ +{ + "name": "@spectrum-css/tokens", + "version": "1.0.0-beta.0", + "description": "The Spectrum CSS tokens package", + "license": "Apache-2.0", + "main": "dist/index.css", + "scripts": { + "build": "gulp build" + }, + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/tokens" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "devDependencies": { + "gulp": "^4.0.0", + "gulp-concat": "^2.6.1", + "@adobe/spectrum-tokens": "^12.0.0-beta.21", + "style-dictionary": "^3.7.0", + "style-dictionary-sets": "^1.4.1" + }, + "publishConfig": { + "access": "public" + }, + "homepage": "https://opensource.adobe.com/spectrum-css/" +} diff --git a/site/includes/dependencies.pug b/site/includes/dependencies.pug index 0b42559aa52..be8e7a4d1fb 100644 --- a/site/includes/dependencies.pug +++ b/site/includes/dependencies.pug @@ -14,6 +14,8 @@ link(rel='stylesheet', type='text/css', href='../components/vars/spectrum-light. link(rel='stylesheet', type='text/css', href='../components/vars/spectrum-medium.css') link(rel='stylesheet', type='text/css', href='../components/vars/spectrum-large.css') +link(rel='stylesheet', type='text/css', href='../components/tokens/index.css') + each dep in dependencyOrder.filter((dep) => dep != 'vars' ) link(rel='stylesheet', type='text/css', href='../components/' + dep + '/index-vars.css', data-dependency=dep ) diff --git a/site/resources/js/SpectrumSwitcher.js b/site/resources/js/SpectrumSwitcher.js index 4ec3705c4cb..4a5c48eedc5 100644 --- a/site/resources/js/SpectrumSwitcher.js +++ b/site/resources/js/SpectrumSwitcher.js @@ -145,6 +145,14 @@ Object.defineProperty(SpectrumSwitcher.prototype, 'varsVersion', { sheet.setAttribute('href', sheet.href.replaceAll(expressName, defaultName)); } }); + + if (varsVersion === 'express') { + document.documentElement.classList.add('spectrum--express'); + } + else { + document.documentElement.classList.remove('spectrum--express'); + } + this._varsVersion = varsVersion; }, get: function() { diff --git a/tools/bundle-builder/lib/depUtils.js b/tools/bundle-builder/lib/depUtils.js index 6cd17c2bf42..e4a2a2553e6 100644 --- a/tools/bundle-builder/lib/depUtils.js +++ b/tools/bundle-builder/lib/depUtils.js @@ -96,6 +96,11 @@ async function getFolderDependencyOrder(packagesDir) { // Nobody relies on it, so it gets clipped, weird solution.push('@spectrum-css/expressvars'); + // Build tokens first + // This is because not every package relies on tokens, but the builder needs tokens to bake vars + solution = solution.filter(p => p !== '@spectrum-css/tokens'); + solution.unshift('@spectrum-css/tokens'); + return solution; } diff --git a/tools/bundle-builder/vars/index.js b/tools/bundle-builder/vars/index.js index 3bb570d5ab8..4a33062e1de 100644 --- a/tools/bundle-builder/vars/index.js +++ b/tools/bundle-builder/vars/index.js @@ -48,7 +48,8 @@ function getAllVars() { `${dirs.components}/vars/css/themes/*.css`, `${dirs.components}/vars/css/scales/*.css`, `${dirs.components}/vars/css/components/*.css`, - `${dirs.components}/vars/css/globals/*.css` + `${dirs.components}/vars/css/globals/*.css`, + `${dirs.components}/tokens/dist/index.css` ]) .pipe(concat('everything.css')) .pipe(through.obj(function getAllVars(file, enc, cb) { @@ -157,12 +158,19 @@ const expressVarDir = path.join(dirs.components, 'expressvars', 'dist'); function copyExpressVars() { return gulp.src(path.join(expressVarDir, 'spectrum-*.css')) .pipe(gulp.dest('dist/expressvars/')) - } +} + +const coreTokensDir = path.join(dirs.components, 'tokens', 'dist'); +function copyCoreTokens() { + return gulp.src(path.join(varDir, '**/*.css')) + .pipe(gulp.dest('dist/tokens/')) +} exports.buildUnique = buildUnique; exports.copyVars = gulp.parallel( buildUnique, copyVars, - copyExpressVars + copyExpressVars, + copyCoreTokens ); diff --git a/tools/component-builder/css/lib/varUtils.js b/tools/component-builder/css/lib/varUtils.js index c508e3ddf84..81e135391fc 100644 --- a/tools/component-builder/css/lib/varUtils.js +++ b/tools/component-builder/css/lib/varUtils.js @@ -125,6 +125,7 @@ function resolveValue(value, vars) { } const varDir = path.join(path.dirname(require.resolve('@spectrum-css/vars')), '..'); +const coreTokensFile = require.resolve('@spectrum-css/tokens'); async function readDNAVariables(file) { let css = await fsp.readFile(path.join(varDir, 'css', file)); @@ -154,7 +155,8 @@ function getAllVars() { `${varDir}/css/scales/*.css`, `${varDir}/css/components/*.css`, `${varDir}/css/globals/*.css`, - `${varDir}/custom.css` + `${varDir}/custom.css`, + coreTokensFile ]) .pipe(concat('everything.css')) .pipe(through.obj(function getAllVars(file, enc, cb) { diff --git a/tools/component-builder/css/vars.js b/tools/component-builder/css/vars.js index 2afdcfea5ff..937c2f37898 100644 --- a/tools/component-builder/css/vars.js +++ b/tools/component-builder/css/vars.js @@ -60,7 +60,7 @@ function bakeVars() { if (varName.indexOf('spectrum-global') !== -1) { logger.warn(`⚠️ ${pkg.name} directly uses global variable ${varName}`); } - else if (!allVars[varName]) { + else if (!allVars[varName] && !varName.startsWith('--custom') && !varName.startsWith('--highcontrast')) { if (componentVars.indexOf(varName) === -1) { errors.push(`${pkg.name} uses undefined variable ${varName}`); } diff --git a/tools/component-builder/package.json b/tools/component-builder/package.json index 330ce0c3314..86e5502cf5f 100644 --- a/tools/component-builder/package.json +++ b/tools/component-builder/package.json @@ -12,7 +12,8 @@ }, "license": "Apache-2.0", "peerDependencies": { - "@spectrum-css/vars": "^8.0.0" + "@spectrum-css/vars": "^8.0.0", + "@spectrum-css/tokens": "^1.0.0-beta" }, "dependencies": { "autoprefixer": "^6.5.3", diff --git a/yarn.lock b/yarn.lock index 4dec0395343..3d33e5f4325 100644 --- a/yarn.lock +++ b/yarn.lock @@ -22,6 +22,11 @@ resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens-deprecated/-/spectrum-tokens-deprecated-11.8.0.tgz#7edf6f7b7e3c22581e0732c8de97fa0a68ed66b9" integrity sha512-LW2SA/8VhW868tEcgIcugx7xdtgFG3KiUoEz+4s2nHTdmKj0h2A9pnTNplVTNAMq2uPSfp6wKKvQNNnMSIXqCg== +"@adobe/spectrum-tokens@^12.0.0-beta.21": + version "12.0.0-beta.21" + resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-12.0.0-beta.21.tgz#0b0257c14b25c4007ca4f14e096c3559e78b2df1" + integrity sha512-72A8/Wf9YlEtpGYYSc1GI1Uu4Nc6ld/o2t1VTGk+6FbArT8LteDVkjr9r1+UROfUEiOmHwOApGsxysKUpM5M8w== + "@babel/code-frame@^7.0.0": version "7.15.8" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.15.8.tgz#45990c47adadb00c03677baa89221f7cc23d2503" @@ -2548,6 +2553,14 @@ callsites@^3.0.0, callsites@^3.1.0: resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== +camel-case@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a" + integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw== + dependencies: + pascal-case "^3.1.2" + tslib "^2.0.3" + camelcase-css@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5" @@ -2601,6 +2614,15 @@ caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001269.tgz#c6f7b6db8cfe1835017716a6f5204239e0b01eb8" integrity sha512-svC8H/ioT3OcryC1qrO/EHP2opBLiQf8jIJsqIJWS2Qqt1uDO0c4V+Iv7tcpVYbPIx4rzM8AzsXUKKkpZFrEJA== +capital-case@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669" + integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + upper-case-first "^2.0.2" + caseless@~0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" @@ -2634,7 +2656,7 @@ chalk@^1.1.3: strip-ansi "^3.0.0" supports-color "^2.0.0" -chalk@^4.1.0: +chalk@^4.0.0, chalk@^4.1.0: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== @@ -2642,6 +2664,24 @@ chalk@^4.1.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +change-case@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12" + integrity sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A== + dependencies: + camel-case "^4.1.2" + capital-case "^1.0.4" + constant-case "^3.0.4" + dot-case "^3.0.4" + header-case "^2.0.4" + no-case "^3.0.4" + param-case "^3.0.4" + pascal-case "^3.1.2" + path-case "^3.0.4" + sentence-case "^3.0.4" + snake-case "^3.0.4" + tslib "^2.0.3" + character-parser@^2.1.1, character-parser@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/character-parser/-/character-parser-2.2.0.tgz#c7ce28f36d4bcd9744e5ffc2c5fcde1c73261fc0" @@ -3017,6 +3057,11 @@ commander@^2.18.0, commander@^2.2.0: resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== +commander@^8.3.0: + version "8.3.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66" + integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww== + common-path-prefix@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-3.0.0.tgz#7d007a7e07c58c4b4d5f433131a19141b29f11e0" @@ -3149,6 +3194,15 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0: resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e" integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4= +constant-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1" + integrity sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + upper-case "^2.0.2" + constantinople@^3.0.1, constantinople@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-3.1.2.tgz#d45ed724f57d3d10500017a7d3a889c1381ae647" @@ -3676,6 +3730,11 @@ deep-extend@^0.6.0: resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac" integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA== +deepmerge@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" + integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== + default-compare@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f" @@ -3929,6 +3988,14 @@ domutils@^2.5.2, domutils@^2.6.0, domutils@^2.7.0: domelementtype "^2.2.0" domhandler "^4.2.0" +dot-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751" + integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + dot-prop@^3.0.0, dot-prop@^5.1.0, dot-prop@^5.2.0, dot-prop@^6.0.1: version "5.3.0" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88" @@ -4733,6 +4800,15 @@ fs-extra@3.0.1: jsonfile "^3.0.0" universalify "^0.1.0" +fs-extra@^10.0.0: + version "10.1.0" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf" + integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ== + dependencies: + graceful-fs "^4.2.0" + jsonfile "^6.0.1" + universalify "^2.0.0" + fs-extra@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" @@ -5008,7 +5084,7 @@ glob-watcher@^5.0.3: normalize-path "^3.0.0" object.defaults "^1.1.0" -glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: +glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0: version "7.2.0" resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023" integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q== @@ -5434,6 +5510,14 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +header-case@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063" + integrity sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q== + dependencies: + capital-case "^1.0.4" + tslib "^2.0.3" + homedir-polyfill@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8" @@ -6371,6 +6455,16 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1: resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus= +json5@^2.2.0: + version "2.2.1" + resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c" + integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA== + +jsonc-parser@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.0.0.tgz#abdd785701c7e7eaca8a9ec8cf070ca51a745a22" + integrity sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA== + jsonfile@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66" @@ -6807,6 +6901,13 @@ loud-rejection@^1.0.0: currently-unhandled "^0.4.1" signal-exit "^3.0.0" +lower-case@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28" + integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg== + dependencies: + tslib "^2.0.3" + lowercase-keys@^1.0.0, lowercase-keys@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f" @@ -7383,6 +7484,14 @@ nice-try@^1.0.4: resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ== +no-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d" + integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg== + dependencies: + lower-case "^2.0.2" + tslib "^2.0.3" + node-fetch@^2.6.1: version "2.6.7" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad" @@ -8021,6 +8130,14 @@ pako@^1.0.5: resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf" integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw== +param-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5" + integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A== + dependencies: + dot-case "^3.0.4" + tslib "^2.0.3" + parent-module@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2" @@ -8147,11 +8264,27 @@ parseurl@~1.3.2, parseurl@~1.3.3: resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4" integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ== +pascal-case@^3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb" + integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + pascalcase@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14" integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ= +path-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f" + integrity sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg== + dependencies: + dot-case "^3.0.4" + tslib "^2.0.3" + path-dirname@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0" @@ -9693,6 +9826,15 @@ send@0.17.1: range-parser "~1.2.1" statuses "~1.5.0" +sentence-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f" + integrity sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + upper-case-first "^2.0.2" + serialize-error@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-7.0.1.tgz#f1360b0447f61ffb483ec4157c737fab7d778e18" @@ -9837,6 +9979,14 @@ smart-buffer@^4.1.0: resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae" integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg== +snake-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c" + integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg== + dependencies: + dot-case "^3.0.4" + tslib "^2.0.3" + snapdragon-node@^2.0.1: version "2.1.1" resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b" @@ -10304,6 +10454,28 @@ strong-log-transformer@^2.1.0: minimist "^1.2.0" through "^2.3.4" +style-dictionary-sets@^1.4.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/style-dictionary-sets/-/style-dictionary-sets-1.4.1.tgz#d8c50179879b706e8b84d7707e4b0206acd27d4f" + integrity sha512-9t3E2YEE7kftvVAAnTP1MDQfBj6s2gU7Ox8mEsiQzXXkIOSm1qssthpMWjZ1Gv3cWSzyrAsBiiwnVgt6dM7OxA== + dependencies: + deepmerge "^4.2.2" + +style-dictionary@^3.7.0: + version "3.7.0" + resolved "https://registry.yarnpkg.com/style-dictionary/-/style-dictionary-3.7.0.tgz#02f4b17232cbb1142a3fdc09a17dfb08aafde3b0" + integrity sha512-BL4AQS5kNDBXbFHWJhlCve6+ojnHgHkiwhf2nNByU698elXWdyK5b27OprphT4q0/tJ52zB+lodhqxIxbNOajQ== + dependencies: + chalk "^4.0.0" + change-case "^4.1.2" + commander "^8.3.0" + fs-extra "^10.0.0" + glob "^7.2.0" + json5 "^2.2.0" + jsonc-parser "^3.0.0" + lodash "^4.17.15" + tinycolor2 "^1.4.1" + sugarss@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d" @@ -10686,6 +10858,11 @@ tslib@^1.9.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== +tslib@^2.0.3: + version "2.4.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" + integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== + tslib@^2.2.0: version "2.3.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01" @@ -10964,6 +11141,20 @@ update-notifier@^5.0.1: semver-diff "^3.1.1" xdg-basedir "^4.0.0" +upper-case-first@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324" + integrity sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg== + dependencies: + tslib "^2.0.3" + +upper-case@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-2.0.2.tgz#d89810823faab1df1549b7d97a76f8662bae6f7a" + integrity sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg== + dependencies: + tslib "^2.0.3" + uri-js@^4.2.2: version "4.4.1" resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e" From e6337d68538a68ad9394649e82d6abbedd158c97 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Tue, 17 May 2022 09:01:09 -0700 Subject: [PATCH 39/45] feat!: implement ActionButton core tokens (#1430) BREAKING CHANGE: .spectrum-ActionButton-icon is now required on icons BREAKING CHANGE: .spectrum--express must be added to support Express ActionButton --- .../actionbutton/actionbutton-generated.css | 492 ------------------ components/actionbutton/index.css | 471 +++++++++++++---- .../actionbutton/metadata/actionbutton.yml | 299 +++++++---- components/actionbutton/package.json | 1 + components/actionbutton/skin.css | 404 -------------- 5 files changed, 545 insertions(+), 1122 deletions(-) delete mode 100644 components/actionbutton/actionbutton-generated.css delete mode 100644 components/actionbutton/skin.css diff --git a/components/actionbutton/actionbutton-generated.css b/components/actionbutton/actionbutton-generated.css deleted file mode 100644 index c591eeef761..00000000000 --- a/components/actionbutton/actionbutton-generated.css +++ /dev/null @@ -1,492 +0,0 @@ -/* -Copyright 2021 Adobe. All rights reserved. -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 - -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. -*/ - -/* begin generated CSS for actionbutton */ -.spectrum-ActionButton { - &.spectrum-ActionButton--staticBlack { - &:not(.spectrum-ActionButton--quiet) { - &:disabled { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-disabled); - - &.is-selected { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected) - } - - &:not(.is-selected) { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-disabled) - } - } - - &:not(:disabled) { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-default); - - &:hover { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-hover) - } - - &:active { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-down) - } - - &:focus-visible { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-key-focus) - } - - &.is-keyboardFocused { - border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-key-focus) - } - - &:not(.is-selected) { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-default); - - &:hover { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-hover) - } - - &:active { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-down) - } - - &:focus-visible { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-key-focus) - } - - &.is-keyboardFocused { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-key-focus) - } - } - } - } - - &.spectrum-ActionButton--quiet { - &:disabled { - border-color: transparent; - - &:not(.is-selected) { - background-color: transparent - } - } - - &:not(:disabled) { - border-color: transparent; - - &:not(.is-selected) { - background-color: var(--spectrum-alias-component-background-color-quiet-default); - - &:hover { - background-color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-25)) - } - - &:active { - background-color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - - &:focus-visible { - background-color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-25)) - } - - &.is-keyboardFocused { - background-color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-25)) - } - } - } - } - - &:disabled { - &.is-selected { - background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected); - - .spectrum-ActionButton-holdIcon { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-ActionButton-label { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-Icon { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - } - - .spectrum-ActionButton-holdIcon { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-ActionButton-label { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-Icon { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40)) - } - } - - &.is-selected { - &:not(:disabled) { - background-color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-90)); - - &:hover { - background-color: var(--spectrum-global-color-static-black) - } - - &:active { - background-color: var(--spectrum-global-color-static-black) - } - - &:focus-visible { - background-color: var(--spectrum-global-color-static-black) - } - - &.is-keyboardFocused { - background-color: var(--spectrum-global-color-static-black) - } - - .spectrum-ActionButton-holdIcon { - color: inherit - } - - .spectrum-ActionButton-label { - color: inherit - } - - .spectrum-Icon { - color: inherit - } - } - } - - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-ActionButton-static-black-color) - } - - &:not(:disabled) { - &:not(.is-selected) { - .spectrum-ActionButton-holdIcon { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-90)) - } - - &:hover { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-black) - } - } - - &:active { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-black) - } - } - - &:focus-visible { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-black) - } - } - - &.is-keyboardFocused { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-black) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-black) - } - } - - .spectrum-ActionButton-label { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-90)) - } - - .spectrum-Icon { - color: rgba(var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-90)) - } - } - } - - .spectrum-ActionButton-label { - color: var(--spectrum-ActionButton-static-black-color) - } - - .spectrum-Icon { - color: var(--spectrum-ActionButton-static-black-color) - } - } - - &.spectrum-ActionButton--staticWhite { - &:not(.spectrum-ActionButton--quiet) { - &:disabled { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-disabled); - - &.is-selected { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected) - } - - &:not(.is-selected) { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-disabled) - } - } - - &:not(:disabled) { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-default); - - &:hover { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-hover) - } - - &:active { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-down) - } - - &:focus-visible { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-key-focus) - } - - &.is-keyboardFocused { - border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-key-focus) - } - - &:not(.is-selected) { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-default); - - &:hover { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-hover) - } - - &:active { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-down) - } - - &:focus-visible { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-key-focus) - } - - &.is-keyboardFocused { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-key-focus) - } - } - } - } - - &.spectrum-ActionButton--quiet { - &:disabled { - border-color: transparent; - - &:not(.is-selected) { - background-color: transparent - } - } - - &:not(:disabled) { - border-color: transparent; - - &:not(.is-selected) { - background-color: var(--spectrum-alias-component-background-color-quiet-default); - - &:hover { - background-color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-25)) - } - - &:active { - background-color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - - &:focus-visible { - background-color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-25)) - } - - &.is-keyboardFocused { - background-color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-25)) - } - } - } - } - - &:disabled { - &.is-selected { - background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected); - - .spectrum-ActionButton-holdIcon { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-ActionButton-label { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-Icon { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - } - - .spectrum-ActionButton-holdIcon { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-ActionButton-label { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - - .spectrum-Icon { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40)) - } - } - - &.is-selected { - &:not(:disabled) { - background-color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-90)); - - &:hover { - background-color: var(--spectrum-global-color-static-white) - } - - &:active { - background-color: var(--spectrum-global-color-static-white) - } - - &:focus-visible { - background-color: var(--spectrum-global-color-static-white) - } - - &.is-keyboardFocused { - background-color: var(--spectrum-global-color-static-white) - } - - .spectrum-ActionButton-holdIcon { - color: inherit - } - - .spectrum-ActionButton-label { - color: inherit - } - - .spectrum-Icon { - color: inherit - } - } - } - - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-ActionButton-static-white-color) - } - - &:not(:disabled) { - &:not(.is-selected) { - .spectrum-ActionButton-holdIcon { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-90)) - } - - &:hover { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-white) - } - } - - &:active { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-white) - } - } - - &:focus-visible { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-white) - } - } - - &.is-keyboardFocused { - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-ActionButton-label { - color: var(--spectrum-global-color-static-white) - } - - .spectrum-Icon { - color: var(--spectrum-global-color-static-white) - } - } - - .spectrum-ActionButton-label { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-90)) - } - - .spectrum-Icon { - color: rgba(var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-90)) - } - } - } - - .spectrum-ActionButton-label { - color: var(--spectrum-ActionButton-static-white-color) - } - - .spectrum-Icon { - color: var(--spectrum-ActionButton-static-white-color) - } - } -} - -/* end generated CSS for actionbutton */ diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 5bee87f2a3f..c30e69f9467 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -11,183 +11,426 @@ governing permissions and limitations under the License. */ @import "../commons/basebutton.css"; -@import "../vars/css/components/spectrum-actionbutton.css"; -@import "./actionbutton-generated.css"; -.spectrum-ActionButton--sizeS { - @remapvars { - find: --spectrum-actionbutton-s-; - replace: --spectrum-actionbutton-; - } - - /* todo: remove hardcoded values when we update DNA */ - --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-25); - --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-25); +.spectrum-ActionButton { + --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100); + --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); + + --spectrum-actionbutton-focus-ring-gap: var(--spectrum-focus-ring-gap); + --spectrum-actionbutton-focus-ring-thickness: var(--spectrum-focus-ring-thickness); + --spectrum-actionbutton-focus-ring-color: var(--spectrum-focus-ring-color); + --spectrum-actionbutton-focus-ring-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap)); +} - /* hack to fix the incorrect min-width */ - --spectrum-actionbutton-textonly-min-width: var(--spectrum-global-dimension-size-300); +.spectrum-ActionButton--sizeS { + --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-75); + --spectrum-actionbutton-height: var(--spectrum-component-height-75); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-75); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-75) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-75) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeM { - @remapvars { - find: --spectrum-actionbutton-m-; - replace: --spectrum-actionbutton-; - } - - /* todo: remove hardcoded values when we update DNA */ - --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-40); - --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-40); + --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-100); + --spectrum-actionbutton-height: var(--spectrum-component-height-100); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-100) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-100) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeL { - @remapvars { - find: --spectrum-actionbutton-l-; - replace: --spectrum-actionbutton-; - } - - /* todo: remove hardcoded values when we update DNA */ - --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-50); - --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-50); + --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-200); + --spectrum-actionbutton-height: var(--spectrum-component-height-200); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-200); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-200) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-200) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeXL { - @remapvars { - find: --spectrum-actionbutton-xl-; - replace: --spectrum-actionbutton-; - } + --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-300); + --spectrum-actionbutton-height: var(--spectrum-component-height-300); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-300); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-300) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-300) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width)); +} + +.spectrum { + .spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + + --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: transparent; + } + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-content-color-default: var(--spectrum-white); + --spectrum-actionbutton-content-color-hover: var(--spectrum-white); + --spectrum-actionbutton-content-color-down: var(--spectrum-white); + --spectrum-actionbutton-content-color-focus: var(--spectrum-white); + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + + &.spectrum-ActionButton--emphasized { + --spectrum-actionbutton-background-color-default: var(--spectrum-accent-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus); + } + } + + &.spectrum-ActionButton--staticBlack, + &.spectrum-ActionButton--staticWhite { + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-border-color-disabled: transparent; + } + } + + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); + + --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-black); + --spectrum-actionbutton-content-color-hover: var(--spectrum-black); + --spectrum-actionbutton-content-color-down: var(--spectrum-black); + --spectrum-actionbutton-content-color-focus: var(--spectrum-black); - /* todo: remove hardcoded values when we update DNA */ - --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-65); - --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-65); + --spectrum-actionbutton-focus-ring-color: var(--spectrum-static-black-focus-ring-color); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-actionbutton-border-color-disabled: transparent; + + --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + } + } + + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); + + --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-white); + --spectrum-actionbutton-content-color-hover: var(--spectrum-white); + --spectrum-actionbutton-content-color-down: var(--spectrum-white); + --spectrum-actionbutton-content-color-focus: var(--spectrum-white); + + --spectrum-actionbutton-focus-ring-color: var(--spectrum-static-white-focus-ring-color); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + } + } + } } -.spectrum-ActionButton {/* --spectrum-actionbutton-textonly-padding-left 12px */ /* --spectrum-actionbutton-textonly-border-size 1px */ - /* Adjustments for inset/outset padding in DNA */ - --spectrum-actionbutton-padding-left-adjusted: calc(var(--spectrum-actionbutton-texticon-padding-left) - var(--spectrum-actionbutton-texticon-border-size)); - --spectrum-actionbutton-padding-right-adjusted: calc(var(--spectrum-actionbutton-texticon-padding-right) - var(--spectrum-actionbutton-texticon-border-size)); - --spectrum-actionbutton-textonly-padding-left-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-left) - var(--spectrum-actionbutton-textonly-border-size)); - --spectrum-actionbutton-textonly-padding-right-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-right) - var(--spectrum-actionbutton-textonly-border-size)); - --spectrum-actionbutton-icononly-padding-left-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-left) - var(--spectrum-actionbutton-icononly-border-size)); - --spectrum-actionbutton-icononly-padding-right-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-right) - var(--spectrum-actionbutton-icononly-border-size)); - --spectrum-actionbutton-focus-ring-border-radius-adjusted: calc(var(--spectrum-actionbutton-quiet-textonly-border-radius) + var(--spectrum-actionbutton-focus-ring-gap)); +.spectrum--express { + .spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + + &.is-selected { + --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + } + + &.spectrum-ActionButton--staticBlack, + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + } + + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); + } + + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); + } + } } -a.spectrum-ActionButton { - @inherit: %spectrum-AnchorButton; +@media (forced-colors: active) { + .spectrum-ActionButton { + &:after { + /* make sure focus-ring renders */ + forced-color-adjust: none; + } + + /* force a more visible focus-ring color */ + --highcontrast-actionbutton-focus-ring-color: ButtonText; + + &.is-selected { + --highcontrast-actionbutton-background-color-default: Highlight; + --highcontrast-actionbutton-background-color-hover: Highlight; + --highcontrast-actionbutton-background-color-focus: Highlight; + --highcontrast-actionbutton-background-color-down: Highlight; + --highcontrast-actionbutton-background-color-disabled: ButtonFace; + + --highcontrast-actionbutton-border-color-default: HighlightText; + --highcontrast-actionbutton-border-color-hover: HighlightText; + --highcontrast-actionbutton-border-color-focus: HighlightText; + --highcontrast-actionbutton-border-color-down: HighlightText; + --highcontrast-actionbutton-border-color-disabled: GrayText; + + --highcontrast-actionbutton-content-color-default: HighlightText; + --highcontrast-actionbutton-content-color-hover: HighlightText; + --highcontrast-actionbutton-content-color-focus: HighlightText; + --highcontrast-actionbutton-content-color-down: HighlightText; + --highcontrast-actionbutton-content-color-disabled: GrayText; + + .spectrum-ActionButton-icon, + .spectrum-ActionButton-hold, + .spectrum-ActionButton-label { + /* ensure custom text colors from above get applied */ + /* it seems like this shouldn't have to be done, but colors are wrong without it */ + forced-color-adjust: none; + } + } + } } .spectrum-ActionButton { @inherit: %spectrum-BaseButton; position: relative; - block-size: var(--spectrum-actionbutton-textonly-height); - min-inline-size: var(--spectrum-actionbutton-textonly-min-width); + min-inline-size: var(--custom-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); + height: var(--custom-actionbutton-height, var(--spectrum-actionbutton-height)); + + border-radius: var(--custom-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius)); + border-width: var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width)); /* Start with text-only padding */ - padding-inline: var(--spectrum-actionbutton-textonly-padding-left-adjusted) var(--spectrum-actionbutton-textonly-padding-right-adjusted); + padding-inline-start: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); + padding-inline-end: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); - border-width: var(--spectrum-actionbutton-textonly-border-size); - border-radius: var(--spectrum-actionbutton-textonly-border-radius); + background-color: var(--highcontrast-actionbutton-background-color-default, var(--custom-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); + border-color: var(--highcontrast-actionbutton-border-color-default, var(--custom-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); + color: var(--highcontrast-actionbutton-content-color-default, var(--custom-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default))); - font-size: var(--spectrum-actionbutton-textonly-text-size); - font-weight: var(--spectrum-actionbutton-textonly-text-font-weight); - line-height: var(--spectrum-actionbutton-textonly-text-line-height); + &:hover { + background-color: var(--highcontrast-actionbutton-background-color-hover, var(--custom-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover))); + border-color: var(--highcontrast-actionbutton-border-color-hover, var(--custom-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover))); + color: var(--highcontrast-actionbutton-content-color-hover, var(--custom-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover))); + } - /* Let static variants inherit their color */ - color: inherit; + &:focus-ring { + background-color: var(--highcontrast-actionbutton-background-color-focus, var(--custom-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus))); + border-color: var(--highcontrast-actionbutton-border-color-focus, var(--custom-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus))); + color: var(--highcontrast-actionbutton-content-color-focus, var(--custom-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus))); + } - .spectrum-Icon { - @inherit: %spectrum-ButtonIcon; + &:active { + background-color: var(--highcontrast-actionbutton-background-color-down, var(--custom-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))); + border-color: var(--highcontrast-actionbutton-border-color-down, var(--custom-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down))); + color: var(--highcontrast-actionbutton-content-color-down, var(--custom-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))); + } - /* Scoot over, assuming we have both icon and text */ - margin-inline-start: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))); + &:disabled, + &.is-disabled { + background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--custom-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); + border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--custom-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled))); + color: var(--highcontrast-actionbutton-content-color-disabled, var(--custom-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))); } +} - .spectrum-Icon + .spectrum-ActionButton-label { +a.spectrum-ActionButton { + @inherit: %spectrum-AnchorButton; +} + +.spectrum-ActionButton-icon { + width: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + height: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + + color: inherit; + + & + .spectrum-ActionButton-label { /* Have gap on on the left */ - padding-inline-start: var(--spectrum-actionbutton-texticon-icon-gap); + padding-inline-start: var(--custom-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)); - /* - Have no padding on the right (it's built into the element) - This will fail if --spectrum-actionbutton-textonly-padding-right !== --spectrum-actionbutton-padding-right - */ + /* Have no padding on the right (it's built into the element) */ padding-inline-end: 0; } - .spectrum-ActionButton-hold + .spectrum-Icon, - .spectrum-Icon:only-child { - /* Use icon-only padding, subtracted from the default text-only padding */ - margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-icononly-padding-left-adjusted))); - margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-right-adjusted) - var(--spectrum-actionbutton-icononly-padding-right-adjusted))); - } + padding-inline-start: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)))); +} + +.spectrum-ActionButton-hold + .spectrum-ActionButton-icon, +.spectrum-ActionButton-icon:only-child { + /* Use icon-only padding, subtracted from the default text-only padding */ + margin-inline-start: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)))); + margin-inline-end: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)))); } .spectrum-ActionButton-label { @inherit: %spectrum-ButtonLabel; + font-size: var(--custom-actionbutton-font-size, var(--spectrum-actionbutton-font-size)); white-space: nowrap; - overflow: hidden; + color: inherit; + text-overflow: ellipsis; + overflow: hidden; } .spectrum-ActionButton-hold { position: absolute; - inset-inline-end: var(--spectrum-actionbutton-textonly-hold-icon-padding-right); - inset-block-end: var(--spectrum-actionbutton-textonly-hold-icon-padding-bottom); - - transform: logical rotate(0deg); -} + inset-inline-end: calc(var(--custom-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); + inset-block-end: calc(var(--custom-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); -.spectrum-ActionButton--quiet { - border-width: var(--spectrum-actionbutton-quiet-textonly-border-size); - border-radius: var(--spectrum-actionbutton-quiet-textonly-border-radius); + color: inherit; - font-size: var(--spectrum-actionbutton-quiet-textonly-text-size); - font-weight: var(--spectrum-actionbutton-quiet-textonly-text-font-weight); + transform: logical rotate(0deg); } /* special cases for focus-ring */ .spectrum-ActionButton { - --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap); - --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size); - --spectrum-actionbutton-focus-ring-color: var(--spectrum-actionbutton-m-textonly-focus-ring-border-color-key-focus); - - transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out; + transition: border-color var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; &:after { + position: absolute; + inset: 0; + + margin: calc((var(--custom-actionbutton-focus-ring-gap, var(--spectrum-actionbutton-focus-ring-gap)) + var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))) * -1); + + border-radius: var(--custom-actionbutton-focus-ring-border-radius, var(--spectrum-actionbutton-focus-ring-border-radius)); + + transition: box-shadow var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; + pointer-events: none; content: ''; - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - margin: calc((var(--spectrum-actionbutton-focus-ring-gap) + var(--spectrum-actionbutton-textonly-border-size)) * -1); - border-radius: var(--spectrum-actionbutton-focus-ring-border-radius-adjusted); - transition: box-shadow var(--spectrum-global-animation-duration-100) ease-in-out; } &:focus-ring { - /* kill the default ring */ box-shadow: none !important; &:after { - box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-ring-size) var(--spectrum-actionbutton-focus-ring-color); + box-shadow: 0 0 0 var(--custom-actionbutton-focus-ring-thickness, var(--spectrum-actionbutton-focus-ring-thickness)) var(--highcontrast-actionbutton-focus-ring-color, var(--custom-actionbutton-focus-ring-color, var(--spectrum-actionbutton-focus-ring-color))); } } } - -.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-focus-ring-color: var(--spectrum-global-color-static-white); -} - -.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-focus-ring-color: var(--spectrum-global-color-static-black); -} - -.spectrum-ActionButton--emphasized.is-selected, -.spectrum-ActionButton--staticWhite, -.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap-emphasized); - --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size-emphasized); -} diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml index 75a07a21325..731cb619cdf 100644 --- a/components/actionbutton/metadata/actionbutton.yml +++ b/components/actionbutton/metadata/actionbutton.yml @@ -5,9 +5,47 @@ description: | - For Action Buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup - If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element. - If the hold icon is used, ensure that the element with the `.spectrum-ActionButton-hold` class comes before the `.spectrum-Icon` element. + - When using `.spectrum-ActionButton--staticWhite` or `.spectrum-ActionButton--staticblack`, use the `--custom-actionbutton-static-content-color` custom property to set the text color when selected. sections: + - name: Custom Properties API + description: | + Define a subset of the following properties on your own class, such as `.custom-ActionButton`, to customize ActionButton. + + These properties override all API options, but can be layered on top of them. + + | Custom property | + | ------------------------------------------------- | + | `--custom-actionbutton-background-color-default` | + | `--custom-actionbutton-background-color-hover` | + | `--custom-actionbutton-background-color-down` | + | `--custom-actionbutton-background-color-focus` | + | `--custom-actionbutton-background-color-disabled` | + | `--custom-actionbutton-border-color-default` | + | `--custom-actionbutton-border-color-hover` | + | `--custom-actionbutton-border-color-down` | + | `--custom-actionbutton-border-color-focus` | + | `--custom-actionbutton-border-color-disabled` | + | `--custom-actionbutton-content-color-default` | + | `--custom-actionbutton-content-color-hover` | + | `--custom-actionbutton-content-color-down` | + | `--custom-actionbutton-content-color-focus` | + | `--custom-actionbutton-content-color-disabled` | + | `--custom-actionbutton-focus-ring-color` | + | `--custom-actionbutton-static-content-color` | + | `--custom-actionbutton-min-width` | + | `--custom-actionbutton-height` | + | `--custom-actionbutton-icon-size` | + | `--custom-actionbutton-font-size` | + | `--custom-actionbutton-text-to-visual` | + | `--custom-actionbutton-edge-to-hold-icon` | + | `--custom-actionbutton-edge-to-visual` | + | `--custom-actionbutton-edge-to-text` | + | `--custom-actionbutton-edge-to-visual-only` | - name: Migration Guide description: | + ### Action Button now required a class on its icon + The `.spectrum-ActionButton-icon` class is now required on the icon. + ### T-shirt sizing Action Button now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-ActionButton--size*` class. @@ -52,14 +90,14 @@ examples: @@ -68,7 +106,7 @@ examples: - Edit @@ -99,7 +137,7 @@ examples: - Edit @@ -131,7 +169,7 @@ examples: - Edit @@ -163,7 +201,7 @@ examples: - Edit @@ -200,7 +238,7 @@ examples: - Edit @@ -231,7 +269,7 @@ examples: - Edit @@ -262,7 +300,7 @@ examples: - Edit @@ -293,7 +331,7 @@ examples: - Edit @@ -331,7 +369,7 @@ examples: - Edit @@ -362,7 +400,7 @@ examples: - Edit @@ -393,7 +431,7 @@ examples: - Edit @@ -424,7 +462,7 @@ examples: - Edit @@ -462,7 +500,7 @@ examples: - Edit @@ -493,7 +531,7 @@ examples: - Edit @@ -524,7 +562,7 @@ examples: - Edit @@ -555,7 +593,7 @@ examples: - Edit @@ -592,7 +630,7 @@ examples: - Edit @@ -623,7 +661,7 @@ examples: - Edit @@ -654,7 +692,7 @@ examples: - Edit @@ -685,7 +723,7 @@ examples: -
+

Default

@@ -707,14 +745,14 @@ examples: @@ -723,7 +761,7 @@ examples: - Edit @@ -754,7 +792,7 @@ examples: - Edit @@ -785,7 +823,7 @@ examples: - Edit @@ -816,7 +854,7 @@ examples: -
+

Default

@@ -839,14 +877,14 @@ examples: @@ -855,7 +893,7 @@ examples: - Edit @@ -886,7 +924,7 @@ examples: - Edit @@ -917,7 +955,7 @@ examples: - Edit @@ -948,7 +986,7 @@ examples: -
+

Default

@@ -972,14 +1010,14 @@ examples: @@ -988,7 +1026,7 @@ examples: - Edit @@ -1019,7 +1057,7 @@ examples: - Edit @@ -1050,7 +1088,7 @@ examples: - Edit @@ -1081,7 +1119,7 @@ examples: -
+

Default

@@ -1104,14 +1142,14 @@ examples: @@ -1120,7 +1158,7 @@ examples: - Edit @@ -1151,7 +1189,7 @@ examples: - Edit @@ -1182,7 +1220,7 @@ examples: - Edit @@ -1213,7 +1251,7 @@ examples: -
+ + - id: actionbutton-api + name: Customized + markup: | + + + diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index 9e4ad75c0c4..38ca982f0b9 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -22,6 +22,7 @@ "@spectrum-css/component-builder": "^3.1.2", "@spectrum-css/icon": "^3.0.22", "@spectrum-css/vars": "^8.0.0", + "@spectrum-css/tokens": "^1.0.0-beta", "gulp": "^4.0.0" }, "publishConfig": { diff --git a/components/actionbutton/skin.css b/components/actionbutton/skin.css deleted file mode 100644 index 83a1fb36c35..00000000000 --- a/components/actionbutton/skin.css +++ /dev/null @@ -1,404 +0,0 @@ -/* -Copyright 2019 Adobe. All rights reserved. -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 - -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. -*/ - -.spectrum-ActionButton { - /* Overridden because of the way we draw focus rings */ - --spectrum-actionbutton-m-quiet-textonly-border-size-key-focus: 1px; -} - -.spectrum-ActionButton { - background-color: var(--spectrum-actionbutton-m-textonly-background-color); - border-color: var(--spectrum-actionbutton-m-textonly-border-color); - color: var(--spectrum-actionbutton-m-textonly-text-color); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color); - } - - .spectrum-ActionButton-hold { - color: var(--spectrum-actionbutton-m-textonly-hold-icon-color); - } - - &:hover { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-hover); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-hover); - color: var(--spectrum-actionbutton-m-textonly-text-color-hover); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-hover); - } - - .spectrum-ActionButton-hold { - color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-hover); - } - } - - &:focus-ring { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-key-focus); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-key-focus); - color: var(--spectrum-actionbutton-m-textonly-text-color-key-focus); - - &:active { - border-color: var(--spectrum-actionbutton-m-textonly-border-color-key-focus); - } - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-key-focus); - } - - .spectrum-ActionButton-hold { - color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-key-focus); - } - } - - &:active { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-down); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-down); - color: var(--spectrum-actionbutton-m-textonly-text-color-down); - - .spectrum-ActionButton-hold { - color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-down); - } - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-disabled); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-disabled); - color: var(--spectrum-actionbutton-m-textonly-text-color-disabled); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-disabled); - } - - .spectrum-ActionButton-hold { - color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-disabled); - } - } - - &.is-selected { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected); - color: var(--spectrum-actionbutton-m-textonly-text-color-selected); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-selected); - } - - &:focus-ring { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-key-focus); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-key-focus); - color: var(--spectrum-actionbutton-m-textonly-text-color-selected-key-focus); - - &:active { - border-color: var(--spectrum-actionbutton-m-textonly-border-color-key-focus); - } - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-key-focus); - } - } - - &:hover { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-hover); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-hover); - color: var(--spectrum-actionbutton-m-textonly-text-color-selected-hover); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-hover); - } - } - - &:active { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-down); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-down); - color: var(--spectrum-actionbutton-m-textonly-text-color-selected-down); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-down); - } - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-disabled); - border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-disabled); - color: var(--spectrum-actionbutton-m-textonly-text-color-selected-disabled); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-disabled); - } - } - } -} - -.spectrum-ActionButton--emphasized { - &.spectrum-ActionButton--quiet.is-selected, - &.is-selected { - background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected); - border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected); - color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected); - } - - &:focus-ring { - background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-key-focus); - border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-key-focus); - color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-key-focus); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-key-focus); - } - } - - &:hover { - background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover); - border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover); - color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-hover); - } - } - - &.is-active { - background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down); - border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down); - color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-down); - } - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-disabled); - border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-disabled); - color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-disabled); - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-disabled); - } - } - } -} - -.spectrum-ActionButton--quiet { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color); - - &:hover { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-hover); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-hover); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-hover); - } - - &:focus-ring { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-key-focus); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-key-focus); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-key-focus); - } - - &:active { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-down); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-down); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-down); - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-disabled); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-disabled); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-disabled); - } - - &.is-selected { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected); - - &:focus-ring { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-key-focus); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-key-focus); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-key-focus); - } - - &:hover { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-hover); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-hover); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-hover); - } - - &:active { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-down); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-down); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-down); - } - - &:disabled, - &.is-disabled { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled); - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled); - } - } -} - -.spectrum-ActionButton--staticBlack, -.spectrum-ActionButton--staticWhite { - /* required to make rgba() work with vars */ - --spectrum-global-color-static-black-rgb: 0, 0, 0; - --spectrum-global-color-static-white-rgb: 255, 255, 255; - --spectrum-ActionButton-static-black-color: var(--spectrum-global-color-static-black); - --spectrum-ActionButton-static-white-color: var(--spectrum-global-color-static-white); - - &.is-selected { - /* let selected styles get their color from parent elements */ - color: inherit !important; - } -} - -@media (forced-colors: active) { - .spectrum-ActionButton { - &:after { - forced-color-adjust: none; - } - &.is-selected { - &:not(.is-disabled) { - .spectrum-ActionButton-label { - forced-color-adjust: none; - } - } - } - &.spectrum-ActionButton--staticBlack, - &.spectrum-ActionButton--staticWhite { - &.is-selected { - &:not(:disabled, .is-disabled) { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected); - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected); - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected); - } - .spectrum-ActionButton-label { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected) ! important; - } - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected) ! important; - } - &:hover, - &:active, - &:focus-visible, - &.is-keyboardFocused { - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected); - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected); - } - - .spectrum-ActionButton-label { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected); - } - - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected); - } - } - } - &:disabled, - &.is-disabled { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled); - background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled); - border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled); - .spectrum-ActionButton-holdIcon { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled); - } - .spectrum-ActionButton-label { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled); - } - .spectrum-Icon { - color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled); - } - } - } - } - --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap-emphasized); - --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size-emphasized); - --spectrum-actionbutton-focus-ring-color: ButtonText; - - --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected: HighlightText; - --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-down: HighlightText; - --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-background-color-selected: Highlight; - --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-disabled: ButtonFace; - --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down: Highlight; - --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover: Highlight; - --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-key-focus: Highlight; - --spectrum-actionbutton-m-emphasized-textonly-border-color-selected: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-hold-icon-color-selected: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-down: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-hover: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-selected: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-background-color-selected: Highlight; - --spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled: ButtonFace; - --spectrum-actionbutton-m-quiet-textonly-background-color-selected-down: Highlight; - --spectrum-actionbutton-m-quiet-textonly-background-color-selected-hover: Highlight; - --spectrum-actionbutton-m-quiet-textonly-background-color-selected-key-focus: Highlight; - --spectrum-actionbutton-m-quiet-textonly-border-color: ButtonFace; - --spectrum-actionbutton-m-quiet-textonly-border-color-down: Highlight; - --spectrum-actionbutton-m-quiet-textonly-border-color-hover: Highlight; - --spectrum-actionbutton-m-quiet-textonly-border-color-selected: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-quiet-textonly-border-color-selected-down: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-border-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-border-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-text-color-selected: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-quiet-textonly-text-color-selected-down: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-text-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-quiet-textonly-text-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-texticon-icon-color-selected: HighlightText; - --spectrum-actionbutton-m-texticon-icon-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-texticon-icon-color-selected-down: HighlightText; - --spectrum-actionbutton-m-texticon-icon-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-texticon-icon-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-textonly-background-color-selected: Highlight; - --spectrum-actionbutton-m-textonly-background-color-selected-disabled: ButtonFace; - --spectrum-actionbutton-m-textonly-background-color-selected-down: Highlight; - --spectrum-actionbutton-m-textonly-background-color-selected-hover: Highlight; - --spectrum-actionbutton-m-textonly-background-color-selected-key-focus: Highlight; - --spectrum-actionbutton-m-textonly-border-color-selected: HighlightText; - --spectrum-actionbutton-m-textonly-border-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-textonly-border-color-selected-down: HighlightText; - --spectrum-actionbutton-m-textonly-border-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-textonly-border-color-selected-key-focus: HighlightText; - --spectrum-actionbutton-m-textonly-text-color-selected: HighlightText; - --spectrum-actionbutton-m-textonly-text-color-selected-disabled: GrayText; - --spectrum-actionbutton-m-textonly-text-color-selected-down: HighlightText; - --spectrum-actionbutton-m-textonly-text-color-selected-hover: HighlightText; - --spectrum-actionbutton-m-textonly-text-color-selected-key-focus: HighlightText; - } -} From 15e33cf82422927a88ab1b505c8263de48ac62fa Mon Sep 17 00:00:00 2001 From: Garth Braithwaite Date: Tue, 17 May 2022 15:10:57 -0600 Subject: [PATCH 40/45] chore: update version for beta release --- components/actionbutton/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index 38ca982f0b9..ec3b6e43084 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionbutton", - "version": "1.1.14", + "version": "2.0.0-beta.0", "description": "The Spectrum CSS action button component", "license": "Apache-2.0", "main": "dist/index-vars.css", @@ -29,4 +29,4 @@ "access": "public" }, "homepage": "https://opensource.adobe.com/spectrum-css/" -} \ No newline at end of file +} From 86d7fb3b3dee5f7e3156486e142524818745a8da Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Fri, 10 Jun 2022 11:33:24 -0400 Subject: [PATCH 41/45] feat: prefer separate custom-* files for overrides --- .../custom-express/custom-large-vars.css | 17 +++++++++++++++ .../custom-express/custom-medium-vars.css | 17 +++++++++++++++ .../tokens/custom-express/custom-vars.css | 17 +++++++++++++++ .../custom-spectrum/custom-large-vars.css | 21 +++++++++++++++++++ .../custom-medium-vars.css} | 12 ----------- .../tokens/custom-spectrum/custom-vars.css | 17 +++++++++++++++ components/tokens/gulpfile.js | 12 +++++++++-- 7 files changed, 99 insertions(+), 14 deletions(-) create mode 100644 components/tokens/custom-express/custom-large-vars.css create mode 100644 components/tokens/custom-express/custom-medium-vars.css create mode 100644 components/tokens/custom-express/custom-vars.css create mode 100644 components/tokens/custom-spectrum/custom-large-vars.css rename components/tokens/{custom.css => custom-spectrum/custom-medium-vars.css} (74%) create mode 100644 components/tokens/custom-spectrum/custom-vars.css diff --git a/components/tokens/custom-express/custom-large-vars.css b/components/tokens/custom-express/custom-large-vars.css new file mode 100644 index 00000000000..8ab824cbe90 --- /dev/null +++ b/components/tokens/custom-express/custom-large-vars.css @@ -0,0 +1,17 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +/* This file contains overrides and additions to core tokens */ + +.spectrum--express.spectrum--large { + /* */ +} diff --git a/components/tokens/custom-express/custom-medium-vars.css b/components/tokens/custom-express/custom-medium-vars.css new file mode 100644 index 00000000000..68638c7b8cb --- /dev/null +++ b/components/tokens/custom-express/custom-medium-vars.css @@ -0,0 +1,17 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +/* This file contains overrides and additions to core tokens */ + +.spectrum--express.spectrum--medium { + /* */ +} diff --git a/components/tokens/custom-express/custom-vars.css b/components/tokens/custom-express/custom-vars.css new file mode 100644 index 00000000000..965e1aaaebb --- /dev/null +++ b/components/tokens/custom-express/custom-vars.css @@ -0,0 +1,17 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +/* This file contains overrides and additions to core tokens */ + +.spectrum--express { + /* */ +} diff --git a/components/tokens/custom-spectrum/custom-large-vars.css b/components/tokens/custom-spectrum/custom-large-vars.css new file mode 100644 index 00000000000..21a9825b923 --- /dev/null +++ b/components/tokens/custom-spectrum/custom-large-vars.css @@ -0,0 +1,21 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +/* This file contains overrides and additions to core tokens */ + +.spectrum--large { + /* edge-to-visual-only is used for icon-only buttons */ + --spectrum-edge-to-visual-only-75: 5px; + --spectrum-edge-to-visual-only-100: 9px; + --spectrum-edge-to-visual-only-200: 13px; + --spectrum-edge-to-visual-only-300: 16px; +} diff --git a/components/tokens/custom.css b/components/tokens/custom-spectrum/custom-medium-vars.css similarity index 74% rename from components/tokens/custom.css rename to components/tokens/custom-spectrum/custom-medium-vars.css index f792877800b..d1fcf86d0ad 100644 --- a/components/tokens/custom.css +++ b/components/tokens/custom-spectrum/custom-medium-vars.css @@ -12,10 +12,6 @@ governing permissions and limitations under the License. /* This file contains overrides and additions to core tokens */ -.spectrum { - --spectrum-animation-duration-100: 130ms; -} - .spectrum--medium { /* edge-to-visual-only is used for icon-only buttons */ --spectrum-edge-to-visual-only-75: 4px; @@ -23,11 +19,3 @@ governing permissions and limitations under the License. --spectrum-edge-to-visual-only-200: 10px; --spectrum-edge-to-visual-only-300: 13px; } - -.spectrum--large { - /* edge-to-visual-only is used for icon-only buttons */ - --spectrum-edge-to-visual-only-75: 5px; - --spectrum-edge-to-visual-only-100: 9px; - --spectrum-edge-to-visual-only-200: 13px; - --spectrum-edge-to-visual-only-300: 16px; -} diff --git a/components/tokens/custom-spectrum/custom-vars.css b/components/tokens/custom-spectrum/custom-vars.css new file mode 100644 index 00000000000..141a71ffd91 --- /dev/null +++ b/components/tokens/custom-spectrum/custom-vars.css @@ -0,0 +1,17 @@ +/* +Copyright 2022 Adobe. All rights reserved. +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 + +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. +*/ + +/* This file contains overrides and additions to core tokens */ + +.spectrum { + --spectrum-animation-duration-100: 130ms; +} diff --git a/components/tokens/gulpfile.js b/components/tokens/gulpfile.js index a15560f82e6..d1356d03f49 100644 --- a/components/tokens/gulpfile.js +++ b/components/tokens/gulpfile.js @@ -24,12 +24,19 @@ function concatIndex() { 'dist/css/*.css', 'dist/css/spectrum/*.css', 'dist/css/express/*.css', - 'custom.css' + 'custom-spectrum/*.css', + 'custom-express/*.css' ]) .pipe(concat('index.css')) .pipe(gulp.dest('dist/')); } +function buildCustoms() { + buildCustomSpectrum = () => gulp.src('custom-spectrum/*.css').pipe(gulp.dest('dist/css/spectrum/')); + buildCustomExpress = () => gulp.src('custom-express/*.css').pipe(gulp.dest('dist/css/express')); + return buildCustomSpectrum() && buildCustomExpress(); +} + function styleDictionary(cb) { StyleDictionary.buildAllPlatforms(); cb(); @@ -39,5 +46,6 @@ exports.clean = clean; exports.build = exports.buildLite = exports.buildMedium = exports.default = gulp.series( clean, styleDictionary, - concatIndex + concatIndex, + buildCustoms ); From 640361d11e66cd9b25dc85e5ab962e7510527626 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Fri, 10 Jun 2022 14:38:55 -0400 Subject: [PATCH 42/45] chore: release updated tokens and actionbutton beta --- components/actionbutton/package.json | 4 ++-- components/tokens/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index ec3b6e43084..e50dacb4173 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionbutton", - "version": "2.0.0-beta.0", + "version": "2.0.0-beta.3", "description": "The Spectrum CSS action button component", "license": "Apache-2.0", "main": "dist/index-vars.css", @@ -22,7 +22,7 @@ "@spectrum-css/component-builder": "^3.1.2", "@spectrum-css/icon": "^3.0.22", "@spectrum-css/vars": "^8.0.0", - "@spectrum-css/tokens": "^1.0.0-beta", + "@spectrum-css/tokens": "^1.0.0-beta.2", "gulp": "^4.0.0" }, "publishConfig": { diff --git a/components/tokens/package.json b/components/tokens/package.json index 60c5fbb234a..0ce740ff0fa 100644 --- a/components/tokens/package.json +++ b/components/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tokens", - "version": "1.0.0-beta.0", + "version": "1.0.0-beta.2", "description": "The Spectrum CSS tokens package", "license": "Apache-2.0", "main": "dist/index.css", From b7a993b02cc109c12cc65e6effdcc59e74641cba Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Wed, 15 Jun 2022 16:30:50 -0400 Subject: [PATCH 43/45] refactor: prefer `--mod-` over `--custom-` for public API --- README.md | 4 +- components/actionbutton/index.css | 86 +++++++------- .../actionbutton/metadata/actionbutton.yml | 108 +++++++++--------- components/tokens/README.md | 2 +- tools/component-builder/css/vars.js | 2 +- tools/postcss-varfallback/README.md | 2 +- tools/postcss-varfallback/fixtures/basic.css | 2 +- .../fixtures/functions.css | 2 +- tools/postcss-varfallback/fixtures/nested.css | 2 +- yarn.lock | 5 + 10 files changed, 110 insertions(+), 105 deletions(-) diff --git a/README.md b/README.md index e8e0c7550eb..e03779da487 100644 --- a/README.md +++ b/README.md @@ -94,9 +94,9 @@ Then you can use components by copy/pasting their code from [the documentation]( With the magic of CSS custom properties, you can infinitely nest different color stops and themes, [as illustrated here](https://codepen.io/lazd/pen/axXMRL). -### Customizing components +### Modifying components -You can override variables and customize Spectrum CSS' look and feel by re-defining the custom properties in context. Look for the **Custom Property API** section in each component to determine which custom properties you can override. See [ActionButton for a complete example](https://opensource.adobe.com/spectrum-css/actionbutton.html#customized). +You can override variables and modify Spectrum CSS' look and feel by re-defining the custom properties in context. Look for the **Custom Property API** section in each component to determine which custom properties you can override. See [ActionButton for a complete example](https://opensource.adobe.com/spectrum-css/actionbutton.html#modified). ### Importing UI icons diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index c30e69f9467..596da49033e 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -180,10 +180,10 @@ governing permissions and limitations under the License. --spectrum-actionbutton-border-color-disabled: transparent; - --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); - --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); - --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); - --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); + --spectrum-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); } @@ -217,10 +217,10 @@ governing permissions and limitations under the License. --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900); --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900); - --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); - --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); - --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); - --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); --spectrum-actionbutton-border-color-disabled: transparent; @@ -319,43 +319,43 @@ governing permissions and limitations under the License. @inherit: %spectrum-BaseButton; position: relative; - min-inline-size: var(--custom-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); - height: var(--custom-actionbutton-height, var(--spectrum-actionbutton-height)); + min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); + height: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height)); - border-radius: var(--custom-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius)); - border-width: var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width)); + border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius)); + border-width: var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width)); /* Start with text-only padding */ - padding-inline-start: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); - padding-inline-end: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); + padding-inline-start: var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); + padding-inline-end: var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); - background-color: var(--highcontrast-actionbutton-background-color-default, var(--custom-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); - border-color: var(--highcontrast-actionbutton-border-color-default, var(--custom-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); - color: var(--highcontrast-actionbutton-content-color-default, var(--custom-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default))); + background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); + border-color: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); + color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default))); &:hover { - background-color: var(--highcontrast-actionbutton-background-color-hover, var(--custom-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover))); - border-color: var(--highcontrast-actionbutton-border-color-hover, var(--custom-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover))); - color: var(--highcontrast-actionbutton-content-color-hover, var(--custom-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover))); + background-color: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover))); + border-color: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover))); + color: var(--highcontrast-actionbutton-content-color-hover, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover))); } &:focus-ring { - background-color: var(--highcontrast-actionbutton-background-color-focus, var(--custom-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus))); - border-color: var(--highcontrast-actionbutton-border-color-focus, var(--custom-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus))); - color: var(--highcontrast-actionbutton-content-color-focus, var(--custom-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus))); + background-color: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus))); + border-color: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus))); + color: var(--highcontrast-actionbutton-content-color-focus, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus))); } &:active { - background-color: var(--highcontrast-actionbutton-background-color-down, var(--custom-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))); - border-color: var(--highcontrast-actionbutton-border-color-down, var(--custom-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down))); - color: var(--highcontrast-actionbutton-content-color-down, var(--custom-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))); + background-color: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))); + border-color: var(--highcontrast-actionbutton-border-color-down, var(--mod-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down))); + color: var(--highcontrast-actionbutton-content-color-down, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))); } &:disabled, &.is-disabled { - background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--custom-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); - border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--custom-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled))); - color: var(--highcontrast-actionbutton-content-color-disabled, var(--custom-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))); + background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); + border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled))); + color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))); } } @@ -364,33 +364,33 @@ a.spectrum-ActionButton { } .spectrum-ActionButton-icon { - width: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); - height: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + width: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + height: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); color: inherit; & + .spectrum-ActionButton-label { /* Have gap on on the left */ - padding-inline-start: var(--custom-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)); + padding-inline-start: var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)); /* Have no padding on the right (it's built into the element) */ padding-inline-end: 0; } - padding-inline-start: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)))); + padding-inline-start: calc(-1 * (var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)))); } .spectrum-ActionButton-hold + .spectrum-ActionButton-icon, .spectrum-ActionButton-icon:only-child { /* Use icon-only padding, subtracted from the default text-only padding */ - margin-inline-start: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)))); - margin-inline-end: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)))); + margin-inline-start: calc(-1 * (var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)))); + margin-inline-end: calc(-1 * (var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)))); } .spectrum-ActionButton-label { @inherit: %spectrum-ButtonLabel; - font-size: var(--custom-actionbutton-font-size, var(--spectrum-actionbutton-font-size)); + font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size)); white-space: nowrap; color: inherit; @@ -400,8 +400,8 @@ a.spectrum-ActionButton { .spectrum-ActionButton-hold { position: absolute; - inset-inline-end: calc(var(--custom-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); - inset-block-end: calc(var(--custom-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); + inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); + inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); color: inherit; @@ -410,17 +410,17 @@ a.spectrum-ActionButton { /* special cases for focus-ring */ .spectrum-ActionButton { - transition: border-color var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; + transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; &:after { position: absolute; inset: 0; - margin: calc((var(--custom-actionbutton-focus-ring-gap, var(--spectrum-actionbutton-focus-ring-gap)) + var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))) * -1); + margin: calc((var(--mod-actionbutton-focus-ring-gap, var(--spectrum-actionbutton-focus-ring-gap)) + var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))) * -1); - border-radius: var(--custom-actionbutton-focus-ring-border-radius, var(--spectrum-actionbutton-focus-ring-border-radius)); + border-radius: var(--mod-actionbutton-focus-ring-border-radius, var(--spectrum-actionbutton-focus-ring-border-radius)); - transition: box-shadow var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; + transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; pointer-events: none; content: ''; @@ -430,7 +430,7 @@ a.spectrum-ActionButton { box-shadow: none !important; &:after { - box-shadow: 0 0 0 var(--custom-actionbutton-focus-ring-thickness, var(--spectrum-actionbutton-focus-ring-thickness)) var(--highcontrast-actionbutton-focus-ring-color, var(--custom-actionbutton-focus-ring-color, var(--spectrum-actionbutton-focus-ring-color))); + box-shadow: 0 0 0 var(--mod-actionbutton-focus-ring-thickness, var(--spectrum-actionbutton-focus-ring-thickness)) var(--highcontrast-actionbutton-focus-ring-color, var(--mod-actionbutton-focus-ring-color, var(--spectrum-actionbutton-focus-ring-color))); } } } diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml index 731cb619cdf..de154d60cfb 100644 --- a/components/actionbutton/metadata/actionbutton.yml +++ b/components/actionbutton/metadata/actionbutton.yml @@ -5,45 +5,45 @@ description: | - For Action Buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup - If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element. - If the hold icon is used, ensure that the element with the `.spectrum-ActionButton-hold` class comes before the `.spectrum-Icon` element. - - When using `.spectrum-ActionButton--staticWhite` or `.spectrum-ActionButton--staticblack`, use the `--custom-actionbutton-static-content-color` custom property to set the text color when selected. + - When using `.spectrum-ActionButton--staticWhite` or `.spectrum-ActionButton--staticblack`, use the `--mod-actionbutton-static-content-color` custom property to set the text color when selected. sections: - name: Custom Properties API description: | - Define a subset of the following properties on your own class, such as `.custom-ActionButton`, to customize ActionButton. + Define a subset of the following properties on your own class, such as `.mod-ActionButton`, to modify ActionButton. These properties override all API options, but can be layered on top of them. | Custom property | | ------------------------------------------------- | - | `--custom-actionbutton-background-color-default` | - | `--custom-actionbutton-background-color-hover` | - | `--custom-actionbutton-background-color-down` | - | `--custom-actionbutton-background-color-focus` | - | `--custom-actionbutton-background-color-disabled` | - | `--custom-actionbutton-border-color-default` | - | `--custom-actionbutton-border-color-hover` | - | `--custom-actionbutton-border-color-down` | - | `--custom-actionbutton-border-color-focus` | - | `--custom-actionbutton-border-color-disabled` | - | `--custom-actionbutton-content-color-default` | - | `--custom-actionbutton-content-color-hover` | - | `--custom-actionbutton-content-color-down` | - | `--custom-actionbutton-content-color-focus` | - | `--custom-actionbutton-content-color-disabled` | - | `--custom-actionbutton-focus-ring-color` | - | `--custom-actionbutton-static-content-color` | - | `--custom-actionbutton-min-width` | - | `--custom-actionbutton-height` | - | `--custom-actionbutton-icon-size` | - | `--custom-actionbutton-font-size` | - | `--custom-actionbutton-text-to-visual` | - | `--custom-actionbutton-edge-to-hold-icon` | - | `--custom-actionbutton-edge-to-visual` | - | `--custom-actionbutton-edge-to-text` | - | `--custom-actionbutton-edge-to-visual-only` | + | `--mod-actionbutton-background-color-default` | + | `--mod-actionbutton-background-color-hover` | + | `--mod-actionbutton-background-color-down` | + | `--mod-actionbutton-background-color-focus` | + | `--mod-actionbutton-background-color-disabled` | + | `--mod-actionbutton-border-color-default` | + | `--mod-actionbutton-border-color-hover` | + | `--mod-actionbutton-border-color-down` | + | `--mod-actionbutton-border-color-focus` | + | `--mod-actionbutton-border-color-disabled` | + | `--mod-actionbutton-content-color-default` | + | `--mod-actionbutton-content-color-hover` | + | `--mod-actionbutton-content-color-down` | + | `--mod-actionbutton-content-color-focus` | + | `--mod-actionbutton-content-color-disabled` | + | `--mod-actionbutton-focus-ring-color` | + | `--mod-actionbutton-static-content-color` | + | `--mod-actionbutton-min-width` | + | `--mod-actionbutton-height` | + | `--mod-actionbutton-icon-size` | + | `--mod-actionbutton-font-size` | + | `--mod-actionbutton-text-to-visual` | + | `--mod-actionbutton-edge-to-hold-icon` | + | `--mod-actionbutton-edge-to-visual` | + | `--mod-actionbutton-edge-to-text` | + | `--mod-actionbutton-edge-to-visual-only` | - name: Migration Guide description: | - ### Action Button now required a class on its icon + ### Action Button now requires a class on its icon The `.spectrum-ActionButton-icon` class is now required on the icon. ### T-shirt sizing @@ -734,7 +734,7 @@ examples: - id: actionbutton-staticwhite name: Static White markup: | -
+

Default

@@ -866,7 +866,7 @@ examples: - id: actionbutton-staticblack name: Static Black markup: | -
+

Default

@@ -999,7 +999,7 @@ examples: - id: actionbutton-staticwhite-quiet name: Static White (quiet) markup: | -
+

Default

@@ -1131,7 +1131,7 @@ examples: - id: actionbutton-staticblack-quiet name: Static Black (quiet) markup: | -
+

Default

@@ -1260,37 +1260,37 @@ examples:
- - id: actionbutton-api - name: Customized + - id: actionbutton-modified + name: Modified markup: | -