diff --git a/package.json b/package.json index 1b2d7c5479..b2402e5cbb 100644 --- a/package.json +++ b/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", diff --git a/packages/styles/README.md b/packages/styles/README.md index 647e18fc5a..cf01994d6a 100644 --- a/packages/styles/README.md +++ b/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. diff --git a/packages/styles/all-large-dark.css b/packages/styles/all-large-dark.css new file mode 100755 index 0000000000..76ee5f0151 --- /dev/null +++ b/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'; diff --git a/packages/styles/all-large-light.css b/packages/styles/all-large-light.css new file mode 100755 index 0000000000..62f18d6643 --- /dev/null +++ b/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'; diff --git a/packages/styles/all-large-lightest.css b/packages/styles/all-large-lightest.css new file mode 100755 index 0000000000..707e8a23be --- /dev/null +++ b/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'; diff --git a/packages/styles/scale-large.css b/packages/styles/scale-large.css new file mode 100644 index 0000000000..59d28d9c14 --- /dev/null +++ b/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; +} diff --git a/scripts/spectrum-vars.js b/scripts/spectrum-vars.js index a04819d0f3..fbc1ca1e25 100755 --- a/scripts/spectrum-vars.js +++ b/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 = [];