Skip to content

Commit

Permalink
feat(scss): Optimized SCSS to remove need to separately load @carbon/…
Browse files Browse the repository at this point in the history 
…styles (#1652)

* chore(scss): Update SCSS to use non-deprecated calls, use namespaces, optimize use of globals

* chore(docs): Updated to remove references to @carbon/styles needing to be individually loaded

* chore(demo): Removed @carbon/styles and sass dependencies from StackBlitz demos

* chore(app): bump storybook, prettier

* chore(docs): Updates to remove @carbon/styles references

* chore(app): bump storybook, angular

* fix(svelte): missing exports needed for docs

* chore(app): bump storybook, tslib, carbon-components, sass, publint with semver

* chore(app): bump angular, @typescript*, publint

* chore(app): bump angular, concurrently, carbon-components, @types, sveltekit

* fix(scss): default font is sans for holder but should be sans condensed for wrapper
  • Loading branch information
@nstuyvesant
nstuyvesant committed Sep 5, 2023
1 parent 6b44c05 commit d970944
Show file tree
Hide file tree
Showing 84 changed files with 2,324 additions and 2,131 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"husky": "^8.0.3",
"lerna": "^7.1.5",
"pinst": "^3.0.0",
"prettier": "^3.0.1",
"prettier": "^3.0.2",
"prettier-config-carbon": "^0.11.0"
},
"husky": {
Expand Down
56 changes: 28 additions & 28 deletions packages/angular/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
"version": "1.11.21",
"description": "Carbon Charts component library for Angular",
"exports": {
"./styles.min.css": "./dist/styles.min.css",
"./styles.css": "./dist/styles.css"
"./styles.min.css": "./styles.min.css",
"./styles.css": "./styles.css"
},
"sideEffects": false,
"scripts": {
Expand Down Expand Up @@ -35,40 +35,40 @@
"dependencies": {
"@carbon/charts": "workspace:*",
"@carbon/telemetry": "~0.1.0",
"tslib": "^2.6.1"
"tslib": "^2.6.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.0",
"@angular-eslint/builder": "^16.1.0",
"@angular-eslint/eslint-plugin": "^16.1.0",
"@angular-eslint/eslint-plugin-template": "^16.1.0",
"@angular-eslint/schematics": "^16.1.0",
"@angular-eslint/template-parser": "^16.1.0",
"@angular/animations": "^16.2.0",
"@angular-eslint/builder": "^16.1.1",
"@angular-eslint/eslint-plugin": "^16.1.1",
"@angular-eslint/eslint-plugin-template": "^16.1.1",
"@angular-eslint/schematics": "^16.1.1",
"@angular-eslint/template-parser": "^16.1.1",
"@angular/animations": "^16.2.2",
"@angular/cli": "^16.2.0",
"@angular/common": "^16.2.0",
"@angular/compiler": "^16.2.0",
"@angular/compiler-cli": "^16.2.0",
"@angular/core": "^16.2.0",
"@angular/forms": "^16.2.0",
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/common": "^16.2.2",
"@angular/compiler": "^16.2.2",
"@angular/compiler-cli": "^16.2.2",
"@angular/core": "^16.2.2",
"@angular/forms": "^16.2.2",
"@angular/platform-browser": "^16.2.2",
"@angular/platform-browser-dynamic": "^16.2.2",
"@babel/core": "^7.22.10",
"@carbon/icon-helpers": "^10.44.0",
"@carbon/icons": "^11.24.0",
"@carbon/icons": "^11.25.0",
"@stackblitz/sdk": "^1.9.0",
"@storybook/addon-essentials": "^7.2.3",
"@storybook/addon-interactions": "^7.2.3",
"@storybook/addon-links": "^7.2.3",
"@storybook/angular": "^7.2.3",
"@storybook/blocks": "^7.2.3",
"@storybook/manager-api": "^7.2.3",
"@storybook/addon-essentials": "^7.3.2",
"@storybook/addon-interactions": "^7.3.2",
"@storybook/addon-links": "^7.3.2",
"@storybook/angular": "^7.3.2",
"@storybook/blocks": "^7.3.2",
"@storybook/manager-api": "^7.3.2",
"@storybook/testing-library": "^0.2.0",
"@storybook/theming": "^7.2.3",
"@storybook/theming": "^7.3.2",
"@types/carbon__icon-helpers": "^10.7.2",
"@typescript-eslint/eslint-plugin": "^6.3.0",
"@typescript-eslint/parser": "^6.3.0",
"concurrently": "^8.2.0",
"@typescript-eslint/eslint-plugin": "^6.4.1",
"@typescript-eslint/parser": "^6.4.1",
"concurrently": "^8.2.1",
"d3": "^7.8.5",
"d3-cloud": "^1.2.7",
"d3-sankey": "^0.12.3",
Expand All @@ -82,7 +82,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rxjs": "~7.8.1",
"storybook": "^7.2.3",
"storybook": "^7.3.2",
"style-loader": "^3.3.3",
"typescript": "~5.1.6",
"zone.js": "~0.13.1"
Expand Down
6 changes: 2 additions & 4 deletions packages/angular/src/stories/angular.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ in prototype and production work.

**with yarn (preferred):**
```bash
yarn add @carbon/charts-angular @carbon/styles d3
yarn add @carbon/charts-angular d3 d3-cloud d3-sankey
```

**with npm:**
```bash
npm install --save @carbon/charts-angular @carbon/styles d3
npm install --save @carbon/charts-angular d3 d3-cloud d3-sankey
```

## Getting started
Expand Down Expand Up @@ -61,8 +61,6 @@ export class AppModule {}
###### app.component.ts
```ts
import { Component } from '@angular/core'

import '@carbon/styles/css/styles.css' // may affect global styles
import '@carbon/charts-angular/styles.css'

@Component({
Expand Down
6 changes: 3 additions & 3 deletions packages/core/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@

Carbon Charts is a component library for vanilla JavaScript. Chart visualizations are based on D3.js, a peer dependency.

The required styles should be imported from `@carbon/charts/styles.css` and `@carbon/styles/css/styles.css`. Additional documentation is provided in the Storybook demos.
The required styles should be imported from `@carbon/charts/styles.css`. Additional documentation is provided in the Storybook demos.

## Getting started

Run the following command using [npm](https://www.npmjs.com/):

```bash
npm install -S @carbon/charts @carbon/styles d3 d3-cloud d3-sankey
npm install -S @carbon/charts d3 d3-cloud d3-sankey
```

If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:

```bash
yarn add @carbon/charts @carbon/styles d3 d3-cloud d3-sankey
yarn add @carbon/charts d3 d3-cloud d3-sankey
```

## Step-by-step instructions
Expand Down
38 changes: 19 additions & 19 deletions packages/core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,15 +81,15 @@
"@carbon/colors": "^11.19.0",
"@carbon/telemetry": "~0.1.0",
"@carbon/utils-position": "^1.1.4",
"carbon-components": "^10.58.8",
"carbon-components": "^10.58.10",
"d3": "^7.8.5",
"d3-cloud": "^1.2.7",
"d3-sankey": "^0.12.3",
"date-fns": "^2.30.0",
"html-to-image": "^1.11.11",
"lodash-es": "^4.17.21",
"topojson-client": "^3.1.0",
"tslib": "^2.6.1"
"tslib": "^2.6.2"
},
"peerDependencies": {
"d3": "^7.0.0",
Expand All @@ -107,29 +107,29 @@
"devDependencies": {
"@babel/core": "^7.22.10",
"@carbon/import-once": "^10.7.0",
"@carbon/layout": "^11.18.0",
"@carbon/styles": "^1.35.0",
"@carbon/themes": "^11.23.0",
"@carbon/layout": "^11.19.0",
"@carbon/styles": "^1.36.0",
"@carbon/themes": "^11.24.0",
"@rollup/plugin-replace": "^5.0.2",
"@rushstack/eslint-patch": "^1.3.3",
"@stackblitz/sdk": "^1.9.0",
"@storybook/addon-essentials": "^7.2.3",
"@storybook/addon-interactions": "^7.2.3",
"@storybook/addon-links": "^7.2.3",
"@storybook/blocks": "^7.2.3",
"@storybook/html": "^7.2.3",
"@storybook/html-vite": "^7.2.3",
"@storybook/manager-api": "^7.2.3",
"@storybook/addon-essentials": "^7.3.2",
"@storybook/addon-interactions": "^7.3.2",
"@storybook/addon-links": "^7.3.2",
"@storybook/blocks": "^7.3.2",
"@storybook/html": "^7.3.2",
"@storybook/html-vite": "^7.3.2",
"@storybook/manager-api": "^7.3.2",
"@storybook/testing-library": "^0.2.0",
"@storybook/theming": "^7.2.3",
"@storybook/theming": "^7.3.2",
"@types/d3": "^7.4.0",
"@types/d3-cloud": "^1.2.5",
"@types/d3-sankey": "^0.12.1",
"@types/lodash-es": "^4.17.8",
"@types/topojson": "^3.2.3",
"@typescript-eslint/eslint-plugin": "^6.3.0",
"@typescript-eslint/parser": "^6.3.0",
"concurrently": "^8.2.0",
"@typescript-eslint/eslint-plugin": "^6.4.1",
"@typescript-eslint/parser": "^6.4.1",
"concurrently": "^8.2.1",
"downlevel-dts": "^0.11.0",
"eslint": "^8.47.0",
"eslint-config-prettier": "^9.0.0",
Expand All @@ -138,13 +138,13 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"resize-observer-polyfill": "^1.5.1",
"sass": "~1.64.2",
"storybook": "^7.2.3",
"sass": "^1.66.1",
"storybook": "^7.3.2",
"typedoc": "^0.24.8",
"typescript": "^5.1.6",
"vite": "^4.4.9",
"vite-plugin-dts": "^3.5.2",
"vitest": "^0.34.1"
"vitest": "^0.34.2"
},
"publishConfig": {
"access": "public"
Expand Down
35 changes: 18 additions & 17 deletions packages/core/scss/_chart-holder.scss
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,48 @@
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/theme';
@use '@carbon/styles/scss/themes';
@use 'globals';

.#{$prefix}--chart-holder {
.#{globals.$prefix}--chart-holder {
position: relative;
display: block;
width: 100%;
height: 100%;

&.filled,
&.fullscreen {
background-color: $background;
background-color: theme.$background;

.#{$prefix}--#{$charts-prefix}--chart-wrapper {
background-color: $background;
.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper {
background-color: theme.$background;
}
}

// May not be needed any longer
.DONT_STYLE_ME_css_styles_verifier {
overflow: hidden;
opacity: 0;
}
}

.#{$prefix}--chart-holder {
@include theme(themes.$white);
.#{globals.$prefix}--chart-holder {
@include theme.theme(themes.$white);
}

.#{$prefix}--chart-holder[data-carbon-theme='g10'] {
@include theme(themes.$g10);
.#{globals.$prefix}--chart-holder[data-carbon-theme='g10'] {
@include theme.theme(themes.$g10);
}

.#{$prefix}--chart-holder[data-carbon-theme='g90'] {
@include theme(themes.$g90);
.#{globals.$prefix}--chart-holder[data-carbon-theme='g90'] {
@include theme.theme(themes.$g90);
}

.#{$prefix}--chart-holder[data-carbon-theme='g100'] {
@include theme(themes.$g100);
.#{globals.$prefix}--chart-holder[data-carbon-theme='g100'] {
@include theme.theme(themes.$g100);
}

.#{$prefix}--chart-holder.fullscreen,
.#{$prefix}--chart-holder:-webkit-full-screen {
/* !important is used here to get closer to
a truly fullscreen experience */
.#{globals.$prefix}--chart-holder.fullscreen,
.#{globals.$prefix}--chart-holder:-webkit-full-screen {
// important used to ensure full-screen experience
width: 100% !important;
height: 100% !important;
max-width: unset !important;
Expand Down
6 changes: 6 additions & 0 deletions packages/core/scss/_chart-wrapper.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@use 'globals';

.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper {
overflow: visible;
font-family: var(--#{globals.$prefix}-charts-font-family-condensed);
}
4 changes: 2 additions & 2 deletions packages/core/scss/_color-palette.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use 'sass:map';
@use '@carbon/styles/scss/colors';
@use '@carbon/colors';

@function getColorValue($color, $scale) {
@return map.get($colors, $color, $scale);
@return map.get(colors.$colors, $color, $scale);
}

$white-theme-colors: (
Expand Down

0 comments on commit d970944

Please sign in to comment.