From 1551b0442c3e195e8af7889d2020456a3a068e79 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 23 Feb 2021 10:29:01 -0600 Subject: [PATCH] feat(project): add styles experiment (#7854) * feat(project): add styles experiment * docs(migration): add initial migration docs for components * chore(grid): sync readme updates Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- docs/migration/11.x-carbon-components.md | 65 +++++++++++++++++++++ packages/layout/index.scss | 1 - packages/styles/.npmignore | 4 ++ packages/styles/__tests__/styles-test.js | 22 +++++++ packages/styles/index.scss | 19 ++++++ packages/styles/package.json | 30 ++++++++++ packages/styles/scss/_colors.scss | 8 +++ packages/styles/scss/_config.scss | 8 +++ packages/styles/scss/_grid.scss | 8 +++ packages/styles/scss/_motion.scss | 8 +++ packages/styles/scss/_reset.scss | 6 ++ packages/styles/scss/_themes.scss | 8 +++ packages/styles/scss/_type.scss | 8 +++ packages/styles/scss/components/_index.scss | 6 ++ yarn.lock | 28 ++++++--- 15 files changed, 221 insertions(+), 8 deletions(-) create mode 100644 docs/migration/11.x-carbon-components.md create mode 100644 packages/styles/.npmignore create mode 100644 packages/styles/__tests__/styles-test.js create mode 100644 packages/styles/index.scss create mode 100644 packages/styles/package.json create mode 100644 packages/styles/scss/_colors.scss create mode 100644 packages/styles/scss/_config.scss create mode 100644 packages/styles/scss/_grid.scss create mode 100644 packages/styles/scss/_motion.scss create mode 100644 packages/styles/scss/_reset.scss create mode 100644 packages/styles/scss/_themes.scss create mode 100644 packages/styles/scss/_type.scss create mode 100644 packages/styles/scss/components/_index.scss diff --git a/docs/migration/11.x-carbon-components.md b/docs/migration/11.x-carbon-components.md new file mode 100644 index 000000000000..fa87de0ac179 --- /dev/null +++ b/docs/migration/11.x-carbon-components.md @@ -0,0 +1,65 @@ +# `carbon-components` + +**Note: everything in this file is a work-in-progress and will be changed.** + +## Overview + +- Carbon now uses [Dart Sass](https://npmjs.com/package/sass) along with Sass + Modules +- File paths have been renamed to provide shorter paths and more intuitive ways + to get access to common variables, mixins, functions, and more. +- Prefixed variables, functions, and mixins have been renamed as part of our + migration to Sass Modules + +## Files + +| Filename | v11 | +| --------------------------------------------------------------- | --------------------------------------- | +| `scss/globals` | | +| `scss/globals/fonts/*` | Removed | +| `scss/globals/grid/_grid.scss` | `scss/_grid.scss` | +| `scss/globals/scss` | `scss` | +| `scss/globals/scss/vendor/*` | Removed | +| `scss/globals/scss/_colors.scss` | `scss/_colors.scss` | +| `scss/globals/scss/_component-tokens.scss` | | +| `scss/globals/scss/_css--body.scss` | | +| `scss/globals/scss/_css--font-face.scss` | | +| `scss/globals/scss/_css--helpers.scss` | | +| `scss/globals/scss/_css--reset.scss` | | +| `scss/globals/scss/_deprecate.scss` | | +| `scss/globals/scss/_feature-flags.scss` | | +| `scss/globals/scss/_functions.scss` | | +| `scss/globals/scss/_helper-classes.scss` | | +| `scss/globals/scss/_helper-mixins.scss` | | +| `scss/globals/scss/_import-once.scss` | | +| `scss/globals/scss/_keyframes.scss` | | +| `scss/globals/scss/_layer.scss` | | +| `scss/globals/scss/_layout.scss` | | +| `scss/globals/scss/_mixins.scss` | | +| [`scss/globals/scss/_motion.scss`](#scssglobalsscss_motionscss) | `scss/_motion.scss` | +| `scss/globals/scss/_spacing.scss` | | +| `scss/globals/scss/_theme-tokens.scss` | | +| `scss/globals/scss/_theme.scss` | | +| `scss/globals/scss/_tooltip.scss` | | +| `scss/globals/scss/_typography.scss` | | +| `scss/globals/scss/_vars.scss` | | +| `scss/globals/scss/styles.scss` | `/index.scss`, require package directly | +| `scss/components` | | + +### `scss/globals/scss/_motion.scss` + +| v10 | v11 | +| :------------------------- | :-- | +| `$carbon--ease-in` | | +| `$carbon--ease-out` | | +| `$carbon--standard-easing` | | +| `$transition--base` | | +| `$transition--expansion` | | +| `$duration--fast-01` | | +| `$duration--fast-02` | | +| `$duration--moderate-01` | | +| `$duration--moderate-02` | | +| `$duration--slow-01` | | +| `$duration--slow-02` | | +| `@function motion` | | +| `@mixin motion` | | diff --git a/packages/layout/index.scss b/packages/layout/index.scss index aba783cac8b9..27d9d7791612 100644 --- a/packages/layout/index.scss +++ b/packages/layout/index.scss @@ -5,7 +5,6 @@ // LICENSE file in the root directory of this source tree. // -@forward 'scss/modules/breakpoint'; @forward 'scss/modules/convert'; @forward 'scss/modules/spacing'; // TODO: should these be public? diff --git a/packages/styles/.npmignore b/packages/styles/.npmignore new file mode 100644 index 000000000000..81ba1598b971 --- /dev/null +++ b/packages/styles/.npmignore @@ -0,0 +1,4 @@ +**/__mocks__/** +**/__tests__/** +**/examples/** +**/tasks/** \ No newline at end of file diff --git a/packages/styles/__tests__/styles-test.js b/packages/styles/__tests__/styles-test.js new file mode 100644 index 000000000000..26d61c31e88f --- /dev/null +++ b/packages/styles/__tests__/styles-test.js @@ -0,0 +1,22 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('@carbon/styles', () => { + test('Public API', async () => { + await render(` + @use '../index.scss' as styles; + `); + }); +}); diff --git a/packages/styles/index.scss b/packages/styles/index.scss new file mode 100644 index 000000000000..9b47db370c2a --- /dev/null +++ b/packages/styles/index.scss @@ -0,0 +1,19 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'scss/config' with ( + $prefix: 'bx' !default, +); +@forward '@carbon/colors'; +@forward '@carbon/grid' hide $prefix; +@forward '@carbon/layout' hide map-deep-get, key-by-index, last-map-item; +@forward '@carbon/motion'; +@forward '@carbon/themes' hide $white; +@forward '@carbon/type' hide $prefix; + +@use 'scss/reset'; +@use 'scss/components'; diff --git a/packages/styles/package.json b/packages/styles/package.json new file mode 100644 index 000000000000..91277fce6b94 --- /dev/null +++ b/packages/styles/package.json @@ -0,0 +1,30 @@ +{ + "name": "@carbon/styles", + "private": true, + "version": "0.0.0", + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "https://github.com/carbon-design-system/carbon.git", + "directory": "packages/styles" + }, + "bugs": "https://github.com/carbon-design-system/carbon/issues", + "keywords": [ + "ibm", + "carbon", + "carbon-design-system", + "components", + "react" + ], + "dependencies": { + "@carbon/colors": "10.21.0", + "@carbon/grid": "10.21.0", + "@carbon/layout": "10.19.0", + "@carbon/motion": "10.14.0", + "@carbon/themes": "10.28.0", + "@carbon/type": "10.22.0" + }, + "devDependencies": { + "@carbon/test-utils": "10.15.0" + } +} diff --git a/packages/styles/scss/_colors.scss b/packages/styles/scss/_colors.scss new file mode 100644 index 000000000000..69b65d4625db --- /dev/null +++ b/packages/styles/scss/_colors.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/colors'; diff --git a/packages/styles/scss/_config.scss b/packages/styles/scss/_config.scss new file mode 100644 index 000000000000..49c713944099 --- /dev/null +++ b/packages/styles/scss/_config.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +$prefix: 'bx' !default; diff --git a/packages/styles/scss/_grid.scss b/packages/styles/scss/_grid.scss new file mode 100644 index 000000000000..1c57d978a67a --- /dev/null +++ b/packages/styles/scss/_grid.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/grid'; diff --git a/packages/styles/scss/_motion.scss b/packages/styles/scss/_motion.scss new file mode 100644 index 000000000000..5068c928167c --- /dev/null +++ b/packages/styles/scss/_motion.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/motion'; diff --git a/packages/styles/scss/_reset.scss b/packages/styles/scss/_reset.scss new file mode 100644 index 000000000000..88c46d83cb9a --- /dev/null +++ b/packages/styles/scss/_reset.scss @@ -0,0 +1,6 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// diff --git a/packages/styles/scss/_themes.scss b/packages/styles/scss/_themes.scss new file mode 100644 index 000000000000..da234f35a3b2 --- /dev/null +++ b/packages/styles/scss/_themes.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/themes'; diff --git a/packages/styles/scss/_type.scss b/packages/styles/scss/_type.scss new file mode 100644 index 000000000000..7da424b71300 --- /dev/null +++ b/packages/styles/scss/_type.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/type'; diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss new file mode 100644 index 000000000000..88c46d83cb9a --- /dev/null +++ b/packages/styles/scss/components/_index.scss @@ -0,0 +1,6 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// diff --git a/yarn.lock b/yarn.lock index ab09001e30e2..a537ff87c7c2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1640,7 +1640,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/colors@^10.21.0, @carbon/colors@workspace:packages/colors": +"@carbon/colors@10.21.0, @carbon/colors@^10.21.0, @carbon/colors@workspace:packages/colors": version: 0.0.0-use.local resolution: "@carbon/colors@workspace:packages/colors" dependencies: @@ -1691,7 +1691,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/grid@^10.21.0, @carbon/grid@workspace:packages/grid": +"@carbon/grid@10.21.0, @carbon/grid@^10.21.0, @carbon/grid@workspace:packages/grid": version: 0.0.0-use.local resolution: "@carbon/grid@workspace:packages/grid" dependencies: @@ -1814,7 +1814,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/layout@^10.19.0, @carbon/layout@workspace:packages/layout": +"@carbon/layout@10.19.0, @carbon/layout@^10.19.0, @carbon/layout@workspace:packages/layout": version: 0.0.0-use.local resolution: "@carbon/layout@workspace:packages/layout" dependencies: @@ -1827,7 +1827,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/motion@^10.14.0, @carbon/motion@workspace:packages/motion": +"@carbon/motion@10.14.0, @carbon/motion@^10.14.0, @carbon/motion@workspace:packages/motion": version: 0.0.0-use.local resolution: "@carbon/motion@workspace:packages/motion" dependencies: @@ -1885,6 +1885,20 @@ __metadata: languageName: unknown linkType: soft +"@carbon/styles@workspace:packages/styles": + version: 0.0.0-use.local + resolution: "@carbon/styles@workspace:packages/styles" + dependencies: + "@carbon/colors": 10.21.0 + "@carbon/grid": 10.21.0 + "@carbon/layout": 10.19.0 + "@carbon/motion": 10.14.0 + "@carbon/test-utils": 10.15.0 + "@carbon/themes": 10.28.0 + "@carbon/type": 10.22.0 + languageName: unknown + linkType: soft + "@carbon/telemetry@npm:0.0.0-alpha.6": version: 0.0.0-alpha.6 resolution: "@carbon/telemetry@npm:0.0.0-alpha.6" @@ -1905,7 +1919,7 @@ __metadata: languageName: node linkType: hard -"@carbon/test-utils@^10.15.0, @carbon/test-utils@workspace:packages/test-utils": +"@carbon/test-utils@10.15.0, @carbon/test-utils@^10.15.0, @carbon/test-utils@workspace:packages/test-utils": version: 0.0.0-use.local resolution: "@carbon/test-utils@workspace:packages/test-utils" dependencies: @@ -1922,7 +1936,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/themes@^10.28.0, @carbon/themes@workspace:packages/themes": +"@carbon/themes@10.28.0, @carbon/themes@^10.28.0, @carbon/themes@workspace:packages/themes": version: 0.0.0-use.local resolution: "@carbon/themes@workspace:packages/themes" dependencies: @@ -1943,7 +1957,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/type@^10.22.0, @carbon/type@workspace:packages/type": +"@carbon/type@10.22.0, @carbon/type@^10.22.0, @carbon/type@workspace:packages/type": version: 0.0.0-use.local resolution: "@carbon/type@workspace:packages/type" dependencies: