feat(styles): process, deliver, document the "large" scale

package.json

@@ -45,7 +45,7 @@
         "lint": "yarn lint:js && yarn lint:ts && yarn lint:css",
         "lint:js": "eslint -f pretty 'tasks/**/*.js' && eslint -f pretty 'scripts/**/*.js'",
         "lint:ts": "eslint -f pretty 'packages/**/*.ts'",
-        "lint:css": "stylelint 'packages/**/*.css' 'styles/**/*.css'",
+        "lint:css": "stylelint 'packages/**/*.css'",
         "prelerna-publish": "yarn get-ready && yarn build",
         "lerna-publish": "lerna publish --message 'chore: release new versions'",
         "test": "yarn test:build && karma start --coverage",

packages/styles/README.md

@@ -24,12 +24,30 @@ This file brings together the globals variables and font settings with the "Ligh
 
 This file brings together the globals variables and font settings with the "Lightest" color set and "Medium" scale system specification.
 
+```
+@import '@spectrum-web-components/styles/all-large-dark.css';
+```
+
+This file brings together the globals variables and font settings with the "Dark" color set and "Large" scale system specification.
+
+```
+@import '@spectrum-web-components/styles/all-large-light.css';
+```
+
+This file brings together the globals variables and font settings with the "Light" color set and "Large" scale system specification.
+
+```
+@import '@spectrum-web-components/styles/all-large-lightest.css';
+```
+
+This file brings together the globals variables and font settings with the "Lightest" color set and "Large" scale system specification.
+
 ## Color Sets
 
 ### Dark
 
 ```
-@import '@spectrum-web-components/styles/theme-drk.css';
+@import '@spectrum-web-components/styles/theme-dark.css';
 ```
 
 This file provides only the variables needed to power a color pallet featuring colors found in the "Dark" theme.
@@ -54,8 +72,16 @@ This file provides only the variables needed to power a color pallet featuring c
 
 ### Medium
 
-At current, Spectrum Web Components only provides the "Medium" scale system as available via:
-
 ```
 @import '@spectrum-web-components/styles/scale-medium.css';
 ```
+
+This file provides only the variables needed to power the "Medium" scale system specification.
+
+### Large
+
+```
+@import '@spectrum-web-components/styles/scale-large.css';
+```
+
+This file provides only the variables needed to power the "Large" scale system specification.

packages/styles/all-large-dark.css

@@ -0,0 +1,16 @@
+/*
+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.
+*/
+
+@import 'core-global.css';
+@import 'fonts.css';
+@import 'theme-dark.css';
+@import 'scale-large.css';

packages/styles/all-large-light.css

@@ -0,0 +1,16 @@
+/*
+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.
+*/
+
+@import 'core-global.css';
+@import 'fonts.css';
+@import 'theme-light.css';
+@import 'scale-large.css';

packages/styles/all-large-lightest.css

@@ -0,0 +1,16 @@
+/*
+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.
+*/
+
+@import 'core-global.css';
+@import 'fonts.css';
+@import 'theme-lightest.css';
+@import 'scale-large.css';

packages/styles/scale-large.css

@@ -0,0 +1,99 @@
+/*
+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.
+*/
+
+:root,
+:host {
+    --spectrum-global-dimension-scale-factor: 1.25;
+    --spectrum-global-dimension-size-40: 4px;
+    --spectrum-actionbutton-touch-hit-x: 4px;
+    --spectrum-dropdown-quiet-touch-hit-y: 4px;
+    --spectrum-selectlist-option-icon-margin-top: 4px;
+    --spectrum-global-dimension-size-50: 5px;
+    --spectrum-global-dimension-size-65: 6px;
+    --spectrum-global-dimension-size-75: 8px;
+    --spectrum-colorhandle-loupe-margin: 8px;
+    --spectrum-radio-margin-bottom: 8px;
+    --spectrum-global-dimension-size-85: 9px;
+    --spectrum-colorslider-touch-hit-y: 9px;
+    --spectrum-global-dimension-size-100: 10px;
+    --spectrum-icon-skip-left-width: 10px;
+    --spectrum-global-dimension-size-115: 11px;
+    --spectrum-global-dimension-size-125: 13px;
+    --spectrum-global-dimension-font-size-50: 13px;
+    --spectrum-global-dimension-size-130: 14px;
+    --spectrum-slider-handle-touch-hit-x: 14px;
+    --spectrum-global-dimension-size-150: 15px;
+    --spectrum-dialog-content-text-size: 15px;
+    --spectrum-global-dimension-size-160: 16px;
+    --spectrum-icon-checkmark-medium-width: 16px;
+    --spectrum-selectlist-option-icon-padding-y: 16px;
+    --spectrum-global-dimension-size-175: 18px;
+    --spectrum-global-dimension-font-size-150: 18px;
+    --spectrum-global-dimension-size-200: 20px;
+    --spectrum-fieldbutton-quiet-min-width: 20px;
+    --spectrum-global-dimension-size-225: 22px;
+    --spectrum-alias-heading3-margin-top: 22px;
+    --spectrum-global-dimension-size-250: 25px;
+    --spectrum-tabs-baseline: 25px;
+    --spectrum-global-dimension-size-300: 30px;
+    --spectrum-global-dimension-size-350: 35px;
+    --spectrum-global-dimension-size-400: 40px;
+    --spectrum-dialog-content-margin-bottom: 40px;
+    --spectrum-global-dimension-size-450: 45px;
+    --spectrum-global-dimension-size-500: 50px;
+    --spectrum-global-dimension-size-550: 56px;
+    --spectrum-global-dimension-size-600: 60px;
+    --spectrum-global-dimension-size-700: 70px;
+    --spectrum-global-dimension-size-800: 80px;
+    --spectrum-global-dimension-size-900: 112px;
+    --spectrum-global-dimension-size-1000: 100px;
+    --spectrum-global-dimension-size-1200: 120px;
+    --spectrum-global-dimension-size-1600: 160px;
+    --spectrum-global-dimension-size-1700: 212px;
+    --spectrum-global-dimension-size-2400: 240px;
+    --spectrum-global-dimension-size-3000: 300px;
+    --spectrum-global-dimension-size-3400: 340px;
+    --spectrum-global-dimension-size-3600: 360px;
+    --spectrum-global-dimension-size-4600: 460px;
+    --spectrum-global-dimension-size-5000: 500px;
+    --spectrum-global-dimension-size-6000: 600px;
+    --spectrum-global-dimension-font-size-25: 12px;
+    --spectrum-checkbox-text-gap-key-focus: 12px;
+    --spectrum-global-dimension-font-size-100: 17px;
+    --spectrum-global-dimension-font-size-200: 19px;
+    --spectrum-dialog-title-text-size: 19px;
+    --spectrum-global-dimension-font-size-400: 24px;
+    --spectrum-alias-heading3-text-size: 24px;
+    --spectrum-dialog-padding: 24px;
+    --spectrum-global-dimension-font-size-500: 27px;
+    --spectrum-alias-heading2-margin-top: 27px;
+    --spectrum-global-dimension-font-size-600: 31px;
+    --spectrum-alias-heading2-text-size: 31px;
+    --spectrum-global-dimension-font-size-700: 34px;
+    --spectrum-alias-heading1-margin-top: 34px;
+    --spectrum-global-dimension-font-size-800: 39px;
+    --spectrum-alias-heading-display2-margin-top: 39px;
+    --spectrum-global-dimension-font-size-900: 44px;
+    --spectrum-alias-heading-display1-margin-top: 44px;
+    --spectrum-global-dimension-font-size-1000: 49px;
+    --spectrum-alias-heading-display1-text-size: 49px;
+    --spectrum-global-dimension-font-size-1100: 55px;
+    --spectrum-barloader-small-border-radius: 3px;
+    --spectrum-pagination-page-button-line-height: 32px;
+    --spectrum-button-cta-min-width: 90px;
+    --spectrum-selectlist-option-height: 48px;
+    --spectrum-colorwheel-min-size: 208px;
+    --spectrum-dialog-max-width: 400px;
+    --spectrum-switch-track-width: 36px;
+    --spectrum-tabs-compact-margin-left: -11px;
+    --spectrum-tooltip-content-max-width: 126px;
+}

scripts/spectrum-vars.js

@@ -68,10 +68,7 @@ const themes = [
     'dark',
     /*'darkest', 'lightest', 'middark', 'midlight'*/
 ];
-const scales = [
-    'medium',
-    /* 'large' */
-];
+const scales = ['medium', 'large'];
 const cores = ['global'];
 const processes = [];