Skip to content

Commit

Permalink
feat(project): add styles experiment (#7854)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
joshblack and kodiakhq[bot] authored Feb 23, 2021
1 parent 1a721cc commit 1551b04
Show file tree
Hide file tree
Showing 15 changed files with 221 additions and 8 deletions.
65 changes: 65 additions & 0 deletions docs/migration/11.x-carbon-components.md
Original file line number Diff line number Diff line change
@@ -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` | |
1 change: 0 additions & 1 deletion packages/layout/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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?
Expand Down
4 changes: 4 additions & 0 deletions packages/styles/.npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
**/__mocks__/**
**/__tests__/**
**/examples/**
**/tasks/**
22 changes: 22 additions & 0 deletions packages/styles/__tests__/styles-test.js
Original file line number Diff line number Diff line change
@@ -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;
`);
});
});
19 changes: 19 additions & 0 deletions packages/styles/index.scss
Original file line number Diff line number Diff line change
@@ -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';
30 changes: 30 additions & 0 deletions packages/styles/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
8 changes: 8 additions & 0 deletions packages/styles/scss/_colors.scss
Original file line number Diff line number Diff line change
@@ -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';
8 changes: 8 additions & 0 deletions packages/styles/scss/_config.scss
Original file line number Diff line number Diff line change
@@ -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;
8 changes: 8 additions & 0 deletions packages/styles/scss/_grid.scss
Original file line number Diff line number Diff line change
@@ -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';
8 changes: 8 additions & 0 deletions packages/styles/scss/_motion.scss
Original file line number Diff line number Diff line change
@@ -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';
6 changes: 6 additions & 0 deletions packages/styles/scss/_reset.scss
Original file line number Diff line number Diff line change
@@ -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.
//
8 changes: 8 additions & 0 deletions packages/styles/scss/_themes.scss
Original file line number Diff line number Diff line change
@@ -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';
8 changes: 8 additions & 0 deletions packages/styles/scss/_type.scss
Original file line number Diff line number Diff line change
@@ -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';
6 changes: 6 additions & 0 deletions packages/styles/scss/components/_index.scss
Original file line number Diff line number Diff line change
@@ -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.
//
28 changes: 21 additions & 7 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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:
Expand All @@ -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:
Expand Down Expand Up @@ -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"
Expand All @@ -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:
Expand All @@ -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:
Expand All @@ -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:
Expand Down

0 comments on commit 1551b04

Please sign in to comment.