diff --git a/package.json b/package.json index 61fbab6ac1..791d8f4dad 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/packages/angular/package.json b/packages/angular/package.json index 4f7edccd1e..28370c98fc 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -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": { @@ -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", @@ -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" diff --git a/packages/angular/src/stories/angular.stories.mdx b/packages/angular/src/stories/angular.stories.mdx index f96ee6fc3a..2ec3bb4666 100644 --- a/packages/angular/src/stories/angular.stories.mdx +++ b/packages/angular/src/stories/angular.stories.mdx @@ -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 @@ -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({ diff --git a/packages/core/README.md b/packages/core/README.md index 4c52b3f693..86a97d483c 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -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 diff --git a/packages/core/package.json b/packages/core/package.json index 8b5be77d54..0b50b96d6a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -81,7 +81,7 @@ "@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", @@ -89,7 +89,7 @@ "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", @@ -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", @@ -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" diff --git a/packages/core/scss/_chart-holder.scss b/packages/core/scss/_chart-holder.scss index 71f3e2fea7..1185656b53 100644 --- a/packages/core/scss/_chart-holder.scss +++ b/packages/core/scss/_chart-holder.scss @@ -1,7 +1,8 @@ -@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%; @@ -9,39 +10,39 @@ &.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; diff --git a/packages/core/scss/_chart-wrapper.scss b/packages/core/scss/_chart-wrapper.scss new file mode 100644 index 0000000000..89bec98afd --- /dev/null +++ b/packages/core/scss/_chart-wrapper.scss @@ -0,0 +1,6 @@ +@use 'globals'; + +.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper { + overflow: visible; + font-family: var(--#{globals.$prefix}-charts-font-family-condensed); +} \ No newline at end of file diff --git a/packages/core/scss/_color-palette.scss b/packages/core/scss/_color-palette.scss index 2669f5bd87..2ba03e9dea 100644 --- a/packages/core/scss/_color-palette.scss +++ b/packages/core/scss/_color-palette.scss @@ -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: ( diff --git a/packages/core/scss/_colors.scss b/packages/core/scss/_colors.scss index 7dcd8673b6..a6e400ccfd 100644 --- a/packages/core/scss/_colors.scss +++ b/packages/core/scss/_colors.scss @@ -1,10 +1,11 @@ @use 'sass:color'; @use 'sass:map'; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/theme' as *; - -@import 'color-palette'; +// Prefix of these used below for traceability +@use 'globals'; +@use 'transition'; +@use 'tokens'; +@use 'color-palette' as palette; @function generateCSSCustomProperty($token, $fallback) { @return var(--cds-charts-#{$token}, $fallback); @@ -12,15 +13,15 @@ @function getThemeColors($theme_type) { @if $theme_type == 'dark' { - @return color-property(null, $dark-theme-colors); + @return color-property(null, palette.$dark-theme-colors); } @else { - @return color-property(null, $white-theme-colors); + @return color-property(null, palette.$white-theme-colors); } } @function getGradientColors() { - $monochrome: color-property(null, $monochrome-quantize-colors); - $divergent: color-property(null, $divergent-quantize-colors); + $monochrome: color-property(null, palette.$monochrome-quantize-colors); + $divergent: color-property(null, palette.$divergent-quantize-colors); @return map-merge($monochrome, $divergent); } @@ -43,7 +44,7 @@ } $color-map-light: map-merge(getThemeColors('light'), getGradientColors()); -.#{$prefix}--chart-holder { +.#{globals.$prefix}--chart-holder { @each $token, $color in $color-map-light { --cds-charts-#{$token}: #{$color}; --cds-charts-#{$token}-hovered: #{darken($color, 7%)}; @@ -51,8 +52,8 @@ $color-map-light: map-merge(getThemeColors('light'), getGradientColors()); } $color-map-dark: map-merge(getThemeColors('dark'), getGradientColors()); -.#{$prefix}--chart-holder[data-carbon-theme='g90'], -.#{$prefix}--chart-holder[data-carbon-theme='g100'] { +.#{globals.$prefix}--chart-holder[data-carbon-theme='g90'], +.#{globals.$prefix}--chart-holder[data-carbon-theme='g100'] { @each $token, $color in $color-map-dark { --cds-charts-#{$token}: #{$color}; --cds-charts-#{$token}-hovered: #{darken($color, 7%)}; @@ -60,14 +61,14 @@ $color-map-dark: map-merge(getThemeColors('dark'), getGradientColors()); } $color-map: map-merge(getThemeColors('light'), getGradientColors()); -.#{$prefix}--#{$charts-prefix}--chart-wrapper { +.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper { @each $token, $color in $color-map { .fill-#{$token} { fill: generateCSSCustomProperty($token, $color); &.hovered { fill: generateCSSCustomProperty(#{$token}-hovered, $color); - @include default_transition; + @include transition.default_transition; } } @@ -76,7 +77,7 @@ $color-map: map-merge(getThemeColors('light'), getGradientColors()); &.hovered { background-color: generateCSSCustomProperty(#{$token}-hovered, $color); - @include default_transition; + @include transition.default_transition; } } @@ -90,7 +91,7 @@ $color-map: map-merge(getThemeColors('light'), getGradientColors()); } } -.#{$prefix}--#{$charts-prefix}--tooltip { +.#{globals.$prefix}--#{globals.$charts-prefix}--tooltip { $color-map: getThemeColors('light'); @each $token, $color in $color-map { @@ -100,31 +101,31 @@ $color-map: map-merge(getThemeColors('light'), getGradientColors()); } } -.#{$prefix}--#{$charts-prefix}--legend { +.#{globals.$prefix}--#{globals.$charts-prefix}--legend { .additional > .icon { .area-1 { - fill: $zone-fill-01; - stroke: $zone-stroke-01; + fill: tokens.$zone-fill-01; + stroke: tokens.$zone-stroke-01; } .area-2 { - fill: $zone-fill-02; - stroke: $zone-stroke-02; + fill: tokens.$zone-fill-02; + stroke: tokens.$zone-stroke-02; } .area-3 { - fill: $zone-fill-03; - stroke: $zone-stroke-03; + fill: tokens.$zone-fill-03; + stroke: tokens.$zone-stroke-03; } .quartile { &-wrapper { - fill: $zone-fill-02; - stroke: $zone-stroke-01; + fill: tokens.$zone-fill-02; + stroke: tokens.$zone-stroke-01; } &-line { - fill: $layer-inverse-absolute; + fill: tokens.$layer-inverse-absolute; } } } diff --git a/packages/core/scss/_globals.scss b/packages/core/scss/_globals.scss new file mode 100644 index 0000000000..c7dc73a161 --- /dev/null +++ b/packages/core/scss/_globals.scss @@ -0,0 +1,8 @@ +@use '@carbon/type/scss/font-family' as font; +$prefix: 'cds'; // Carbon Design System +$charts-prefix: 'cc'; // Carbon Charts + +// Sets CSS custom property associated with chart wrapper, +// tooltips and the Tabular representation in the modal +$font-family: font.font-family('sans'); +$font-family-condensed: font.font-family('sans-condensed'); diff --git a/packages/core/scss/_tokens.scss b/packages/core/scss/_tokens.scss index d54d5608c3..1f0b412732 100644 --- a/packages/core/scss/_tokens.scss +++ b/packages/core/scss/_tokens.scss @@ -1,7 +1,7 @@ @use 'sass:map'; @use '@carbon/styles/scss/themes'; +@use '@carbon/colors'; @use '@carbon/styles/scss/utilities/component-tokens'; -@use '@carbon/colors' as *; // THEMES $color-scheme: ( @@ -28,15 +28,15 @@ $color-scheme: ( // ELEMENTS $alert-stroke: ( - fallback: $yellow-50, + fallback: colors.$yellow-50, values: ( ( theme: themes.$white, - value: $yellow-50 + value: colors.$yellow-50 ), ( theme: themes.$g10, - value: $yellow-50 + value: colors.$yellow-50 ), ( theme: themes.$g90, @@ -50,45 +50,45 @@ $alert-stroke: ( ) !default; $layer-01-absolute: ( - fallback: $white-0, + fallback: colors.$white-0, values: ( ( theme: themes.$white, - value: $white-0 + value: colors.$white-0 ), ( theme: themes.$g10, - value: $white-0 + value: colors.$white-0 ), ( theme: themes.$g90, - value: $black-100 + value: colors.$black-100 ), ( theme: themes.$g100, - value: $black-100 + value: colors.$black-100 ) ) ) !default; $layer-inverse-absolute: ( - fallback: $black-100, + fallback: colors.$black-100, values: ( ( theme: themes.$white, - value: $black-100 + value: colors.$black-100 ), ( theme: themes.$g10, - value: $black-100 + value: colors.$black-100 ), ( theme: themes.$g90, - value: $white-0 + value: colors.$white-0 ), ( theme: themes.$g100, - value: $white-0 + value: colors.$white-0 ) ) ) !default; @@ -129,7 +129,7 @@ $grid-bg: ( ), ( theme: themes.$g90, - value: $gray-100 + value: colors.$gray-100 ), ( theme: themes.$g100, @@ -140,23 +140,23 @@ $grid-bg: ( // METER $meter-range-indicator: ( - fallback: $gray-40, + fallback: colors.$gray-40, values: ( ( theme: themes.$white, - value: $gray-40 + value: colors.$gray-40 ), ( theme: themes.$g10, - value: $gray-40 + value: colors.$gray-40 ), ( theme: themes.$g90, - value: $gray-60 + value: colors.$gray-60 ), ( theme: themes.$g100, - value: $gray-60 + value: colors.$gray-60 ) ) ) !default; @@ -209,130 +209,130 @@ $tooltip-line-border: ( // ZONES $zone-fill-01: ( - fallback: $gray-10, + fallback: colors.$gray-10, values: ( ( theme: themes.$white, - value: $gray-10 + value: colors.$gray-10 ), ( theme: themes.$g10, - value: $gray-10 + value: colors.$gray-10 ), ( theme: themes.$g90, - value: $gray-90 + value: colors.$gray-90 ), ( theme: themes.$g100, - value: $gray-90 + value: colors.$gray-90 ) ) ) !default; $zone-stroke-01: ( - fallback: $gray-50, + fallback: colors.$gray-50, values: ( ( theme: themes.$white, - value: $gray-50 + value: colors.$gray-50 ), ( theme: themes.$g10, - value: $gray-50 + value: colors.$gray-50 ), ( theme: themes.$g90, - value: $gray-60 + value: colors.$gray-60 ), ( theme: themes.$g100, - value: $gray-60 + value: colors.$gray-60 ) ) ) !default; $zone-fill-02: ( - fallback: $gray-20, + fallback: colors.$gray-20, values: ( ( theme: themes.$white, - value: $gray-20 + value: colors.$gray-20 ), ( theme: themes.$g10, - value: $gray-20 + value: colors.$gray-20 ), ( theme: themes.$g90, - value: $gray-80 + value: colors.$gray-80 ), ( theme: themes.$g100, - value: $gray-80 + value: colors.$gray-80 ) ) ) !default; $zone-stroke-02: ( - fallback: $gray-50, + fallback: colors.$gray-50, values: ( ( theme: themes.$white, - value: $gray-50 + value: colors.$gray-50 ), ( theme: themes.$g10, - value: $gray-50 + value: colors.$gray-50 ), ( theme: themes.$g90, - value: $gray-60 + value: colors.$gray-60 ), ( theme: themes.$g100, - value: $gray-60 + value: colors.$gray-60 ) ) ) !default; $zone-fill-03: ( - fallback: $gray-30, + fallback: colors.$gray-30, values: ( ( theme: themes.$white, - value: $gray-30 + value: colors.$gray-30 ), ( theme: themes.$g10, - value: $gray-30 + value: colors.$gray-30 ), ( theme: themes.$g90, - value: $gray-70 + value: colors.$gray-70 ), ( theme: themes.$g100, - value: $gray-70 + value: colors.$gray-70 ) ) ) !default; $zone-stroke-03: ( - fallback: $gray-50, + fallback: colors.$gray-50, values: ( ( theme: themes.$white, - value: $gray-50 + value: colors.$gray-50 ), ( theme: themes.$g10, - value: $gray-50 + value: colors.$gray-50 ), ( theme: themes.$g90, - value: $gray-60 + value: colors.$gray-60 ), ( theme: themes.$g100, - value: $gray-60 + value: colors.$gray-60 ) ) ) !default; diff --git a/packages/core/scss/_transition.scss b/packages/core/scss/_transition.scss new file mode 100644 index 0000000000..7dcd928a46 --- /dev/null +++ b/packages/core/scss/_transition.scss @@ -0,0 +1,4 @@ +// Used by ./colors and ./components/tree +@mixin default_transition { + transition: all 0.1s ease-out; +} diff --git a/packages/core/scss/_type.scss b/packages/core/scss/_type.scss index 1b479865ab..f6aba4746d 100644 --- a/packages/core/scss/_type.scss +++ b/packages/core/scss/_type.scss @@ -1,14 +1,14 @@ -@use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/layout' as *; +@use '@carbon/styles/scss/theme'; +@use '@carbon/layout'; +@use 'globals'; -.#{$prefix}--#{$charts-prefix}--chart-wrapper { - // Set CSS custom properties using font-family mixin then reuse them - --#{$prefix}-charts-font-family: #{font-family('sans')}; - --#{$prefix}-charts-font-family-condensed: #{font-family('sans-condensed')}; - - font-family: var(--#{$prefix}-charts-font-family-condensed); +.#{globals.$prefix}--chart-holder { + --#{globals.$prefix}-charts-font-family: #{globals.$font-family}; + --#{globals.$prefix}-charts-font-family-condensed: #{globals.$font-family-condensed}; + font-family: var(--#{globals.$prefix}-charts-font-family); +} +.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper { p { padding: 0; margin: 0; @@ -16,7 +16,7 @@ // TODO-V11 // font-weight: font-weight('regular'); font-weight: 400; - color: $text-secondary; + color: theme.$text-secondary; } text { @@ -24,11 +24,11 @@ // TODO-V11 // font-weight: font-weight('regular'); font-weight: 400; - fill: $text-secondary; + fill: theme.$text-secondary; } g.gauge-numbers text.gauge-value-number { - font-family: var(--#{$prefix}-charts-font-family); + font-family: var(--#{globals.$prefix}-charts-font-family); // TODO-V11 // font-weight: font-weight('light'); font-weight: 300; @@ -36,8 +36,8 @@ text.meter-title, text.percent-value { - font-size: $base-font-size; - font-family: var(--#{$prefix}-charts-font-family); + font-size: layout.$base-font-size; + font-family: var(--#{globals.$prefix}-charts-font-family); } text.meter-title { diff --git a/packages/core/scss/components/_axis.scss b/packages/core/scss/components/_axis.scss index 5f9a93a90d..8dd00aa256 100644 --- a/packages/core/scss/components/_axis.scss +++ b/packages/core/scss/components/_axis.scss @@ -1,7 +1,8 @@ -@use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/theme' as *; +@use '../globals'; +@use '@carbon/styles/scss/theme'; -.#{$prefix}--#{$charts-prefix}--axes { +.#{globals.$prefix}--#{globals.$charts-prefix}--axes { + font-family: var(--#{globals.$prefix}-charts-font-family-condensed); overflow: visible; g.axis { @@ -18,19 +19,19 @@ g.tick-hover:hover, g.tick-hover:focus { rect.axis-holder { - fill: $layer-selected-inverse; - stroke: $layer-selected-inverse; + fill: theme.$layer-selected-inverse; + stroke: theme.$layer-selected-inverse; stroke-width: 2px; } text { - fill: $layer-selected; + fill: theme.$layer-selected; } } g.tick text { - fill: $text-secondary; - font-family: var(--#{$prefix}-charts-font-family-condensed); + fill: theme.$text-secondary; + font-family: var(--#{globals.$prefix}-charts-font-family-condensed); } g.tick line { @@ -38,15 +39,15 @@ } path.domain { - stroke: $border-strong-01; + stroke: theme.$border-strong-01; } .axis-title { - font-family: var(--#{$prefix}-charts-font-family); + font-family: var(--#{globals.$prefix}-charts-font-family); // TODO-V11 // font-weight: font-weight('semibold'); font-weight: 600; - fill: $text-primary; + fill: theme.$text-primary; } } } diff --git a/packages/core/scss/components/_callouts.scss b/packages/core/scss/components/_callouts.scss index 13a53366c8..3eb12b722c 100644 --- a/packages/core/scss/components/_callouts.scss +++ b/packages/core/scss/components/_callouts.scss @@ -1,5 +1,6 @@ -@use '@carbon/styles/scss/theme' as *; +@use '../globals'; +@use '@carbon/styles/scss/theme'; -.#{$prefix}--#{$charts-prefix}--chart-wrapper g.callouts { - stroke: $text-secondary; +.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper g.callouts { + stroke: theme.$text-secondary; } diff --git a/packages/core/scss/components/_color-legend.scss b/packages/core/scss/components/_color-legend.scss index 64352836af..a3e314ebd9 100644 --- a/packages/core/scss/components/_color-legend.scss +++ b/packages/core/scss/components/_color-legend.scss @@ -1,11 +1,11 @@ -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/theme'; +@use '../globals'; +@use '../tokens'; -svg.#{$prefix}--#{$charts-prefix}--color-legend { +svg.#{globals.$prefix}--#{globals.$charts-prefix}--color-legend { display: flex; user-select: none; g.legend-title text { - fill: $layer-inverse-absolute; + fill: tokens.$layer-inverse-absolute; } } diff --git a/packages/core/scss/components/_edge.scss b/packages/core/scss/components/_edge.scss deleted file mode 100644 index d531d0e0c6..0000000000 --- a/packages/core/scss/components/_edge.scss +++ /dev/null @@ -1,65 +0,0 @@ -@import '@carbon/themes/scss/tokens'; -@import '@carbon/layout/scss/spacing'; -@import '@carbon/import-once/scss/index'; - -@include exports('cc-edge') { - .#{$prefix}--#{$charts-prefix}--edge { - fill: transparent; - } - - .#{$prefix}--#{$charts-prefix}--edge__container { - stroke-width: $spacing-06; - stroke: transparent; - stroke-dasharray: none; - } - - .#{$prefix}--#{$charts-prefix}--edge__inner { - stroke-width: 0.0625rem; - stroke: $border-inverse; - } - - .#{$prefix}--#{$charts-prefix}--edge__outer { - stroke-width: 0.15625rem; - stroke: transparent; - } - - .#{$prefix}--#{$charts-prefix}--edge:hover { - .#{$prefix}--#{$charts-prefix}--edge__inner { - stroke-width: 0.15625rem; - } - } - - .#{$prefix}--#{$charts-prefix}--edge--dash-sm { - stroke-dasharray: mini-units(0.25) mini-units(0.5); - } - - .#{$prefix}--#{$charts-prefix}--edge--dash-md { - stroke-dasharray: mini-units(0.5) mini-units(0.5); - } - - .#{$prefix}--#{$charts-prefix}--edge--dash-lg { - stroke-dasharray: mini-units(1) mini-units(0.5); - } - - .#{$prefix}--#{$charts-prefix}--edge--dash-xl { - stroke-dasharray: mini-units(2) mini-units(0.5); - } - - .#{$prefix}--#{$charts-prefix}--edge--tunnel { - .#{$prefix}--#{$charts-prefix}--edge__outer { - stroke: $layer-accent-01; - stroke-width: mini-units(0.75); - } - } - - .#{$prefix}--#{$charts-prefix}--edge--double { - .#{$prefix}--#{$charts-prefix}--edge__inner { - stroke: $background; - } - - .#{$prefix}--#{$charts-prefix}--edge__outer { - stroke: $border-inverse; - stroke-width: mini-units(0.5625); - } - } -} diff --git a/packages/core/scss/components/_grid-brush.scss b/packages/core/scss/components/_grid-brush.scss index a65511acae..3967364800 100644 --- a/packages/core/scss/components/_grid-brush.scss +++ b/packages/core/scss/components/_grid-brush.scss @@ -1,6 +1,8 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '@carbon/styles/scss/components/button'; +@use '../globals'; -.#{$prefix}--#{$charts-prefix}--grid-brush { +.#{globals.$prefix}--#{globals.$charts-prefix}--grid-brush { // disable default d3 brush selection g.grid-brush { rect.selection { @@ -11,10 +13,10 @@ } } -.#{$prefix}--#{$charts-prefix}--grid-brush { +.#{globals.$prefix}--#{globals.$charts-prefix}--grid-brush { rect.frontSelection { - fill: $layer-accent-01; + fill: theme.$layer-accent-01; fill-opacity: 0.3; - stroke: $button-tertiary; + stroke: button.$button-tertiary; } } diff --git a/packages/core/scss/components/_grid.scss b/packages/core/scss/components/_grid.scss index 97c13616b0..fbf9e3d9e3 100644 --- a/packages/core/scss/components/_grid.scss +++ b/packages/core/scss/components/_grid.scss @@ -1,17 +1,18 @@ -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '../globals'; +@use '../tokens'; -.#{$prefix}--#{$charts-prefix}--grid { +.#{globals.$prefix}--#{globals.$charts-prefix}--grid { rect.chart-grid-backdrop { - fill: $grid-bg; + fill: tokens.$grid-bg; } rect.chart-grid-backdrop.stroked { - stroke: $layer-accent-01; + stroke: theme.$layer-accent-01; } rect.stroke { - stroke: $layer-accent-01; + stroke: theme.$layer-accent-01; } g.x.grid g.tick, @@ -19,12 +20,12 @@ line { pointer-events: none; stroke-width: 1px; - stroke: $layer-accent-01; + stroke: theme.$layer-accent-01; } &.active line { stroke-dasharray: 2px; - stroke: $focus; + stroke: theme.$focus; } } } diff --git a/packages/core/scss/components/_highlights.scss b/packages/core/scss/components/_highlights.scss index cd9e0635f8..7f692643b2 100644 --- a/packages/core/scss/components/_highlights.scss +++ b/packages/core/scss/components/_highlights.scss @@ -1,7 +1,10 @@ -.#{$prefix}--#{$charts-prefix}--highlight { +@use '../globals'; +@use '@carbon/colors'; + +.#{globals.$prefix}--#{globals.$charts-prefix}--highlight { rect.highlight-bar { pointer-events: none; - fill: $magenta-50; - stroke: $magenta-50; + fill: colors.$magenta-50; + stroke: colors.$magenta-50; } } diff --git a/packages/core/scss/components/_layout.scss b/packages/core/scss/components/_layout.scss index 2406cbe8b4..9663d1fc6c 100644 --- a/packages/core/scss/components/_layout.scss +++ b/packages/core/scss/components/_layout.scss @@ -1,4 +1,6 @@ -.#{$prefix}--#{$charts-prefix}--layout { +@use '../globals'; + +.#{globals.$prefix}--#{globals.$charts-prefix}--layout { &-row { display: flex; flex-direction: row; @@ -24,11 +26,11 @@ } } -.#{$prefix}--#{$charts-prefix}--chart-wrapper .layout-child { +.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper .layout-child { overflow: visible; } -.#{$prefix}--#{$charts-prefix}--chart-wrapper svg.layout-svg-wrapper { +.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper svg.layout-svg-wrapper { height: inherit; width: inherit; overflow: visible; diff --git a/packages/core/scss/components/_legend.scss b/packages/core/scss/components/_legend.scss index 068196259b..d921513ede 100644 --- a/packages/core/scss/components/_legend.scss +++ b/packages/core/scss/components/_legend.scss @@ -1,6 +1,9 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '@carbon/colors'; +@use '../globals'; -div.#{$prefix}--#{$charts-prefix}--legend { +div.#{globals.$prefix}--#{globals.$charts-prefix}--legend { + font-family: var(--#{globals.$prefix}-charts-font-family-condensed); display: flex; user-select: none; -webkit-flex-wrap: wrap; @@ -21,7 +24,7 @@ div.#{$prefix}--#{$charts-prefix}--legend { height: 13px; margin-right: 4px; border-radius: 2px; - border: solid 1px $background; + border: solid 1px theme.$background; box-shadow: 0 0 0 2px transparent; @media (forced-colors: active) { @@ -29,15 +32,15 @@ div.#{$prefix}--#{$charts-prefix}--legend { } &:not(.active) { - border-color: $text-secondary; - background: $background; + border-color: theme.$text-secondary; + background: theme.$background; } svg { display: none; vertical-align: text-top; - fill: $background; - stroke: $background; + fill: theme.$background; + stroke: theme.$background; } } @@ -49,7 +52,7 @@ div.#{$prefix}--#{$charts-prefix}--legend { p { font-size: 12px; - fill: $text-secondary; + fill: theme.$text-secondary; line-height: 1rem; } } @@ -86,11 +89,11 @@ div.#{$prefix}--#{$charts-prefix}--legend { cursor: pointer; div.checkbox { - border: solid 1px $background; - box-shadow: 0 0 0 2px $blue-60; + border: solid 1px theme.$background; + box-shadow: 0 0 0 2px colors.$blue-60; &:not(.active) { - border-color: $text-secondary; + border-color: theme.$text-secondary; } } } diff --git a/packages/core/scss/components/_marker.scss b/packages/core/scss/components/_marker.scss deleted file mode 100644 index 7da0e33c93..0000000000 --- a/packages/core/scss/components/_marker.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import '@carbon/import-once/scss/index'; - -@include exports('cc-marker') { - .#{$prefix}--#{$charts-prefix}--marker { - fill: $border-inverse; - } -} diff --git a/packages/core/scss/components/_meter-title.scss b/packages/core/scss/components/_meter-title.scss index 031dec0882..67a940f528 100644 --- a/packages/core/scss/components/_meter-title.scss +++ b/packages/core/scss/components/_meter-title.scss @@ -1,37 +1,39 @@ -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/colors'; +@use '@carbon/styles/scss/theme'; +@use '../globals'; +@use '../tokens'; -.#{$prefix}--#{$charts-prefix}--meter-title { +.#{globals.$prefix}--#{globals.$charts-prefix}--meter-title { overflow: visible; text.meter-title, text.proportional-meter-title, text.proportional-meter-total, text.percent-value { - fill: $text-primary; + fill: theme.$text-primary; } g.status-indicator { &.status--danger circle.status { - fill: $support-error; + fill: theme.$support-error; } &.status--warning { circle.status { - fill: $support-warning; + fill: theme.$support-warning; } path.innerFill { - fill: $black-100; + fill: colors.$black-100; } } &.status--success circle.status { - fill: $support-success; + fill: theme.$support-success; } path.innerFill { - fill: $layer-01-absolute; + fill: tokens.$layer-01-absolute; } } } diff --git a/packages/core/scss/components/_modal.scss b/packages/core/scss/components/_modal.scss index 68da05ad47..1271e8637f 100644 --- a/packages/core/scss/components/_modal.scss +++ b/packages/core/scss/components/_modal.scss @@ -1,14 +1,17 @@ -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/theme'; - -.#{$prefix}--chart-holder { - .#{$prefix}--modal { +@use '@carbon/styles/scss/components/modal'; +@use '@carbon/styles/scss/components/data-table'; +@use '@carbon/styles/scss/components/button'; +@use '../globals'; +@use '../tokens'; + +.#{globals.$prefix}--chart-holder { + .#{globals.$prefix}--modal { &.is-visible { z-index: 99999; } - .#{$prefix}--modal-container { - .#{$prefix}--modal-header { + .#{globals.$prefix}--modal-container { + .#{globals.$prefix}--modal-header { &__label { margin-top: 0; margin-bottom: 0; @@ -20,10 +23,10 @@ } } - .#{$prefix}--modal-content { + .#{globals.$prefix}--modal-content { padding: 0; margin-bottom: 0; - color-scheme: $color-scheme; + color-scheme: tokens.$color-scheme; table { position: relative; @@ -36,10 +39,10 @@ } } - .#{$prefix}--modal-footer { + .#{globals.$prefix}--modal-footer { background-color: transparent; - .#{$prefix}--#{$charts-prefix}-modal-footer-spacer { + .#{globals.$prefix}--#{globals.$charts-prefix}-modal-footer-spacer { width: 50%; } } diff --git a/packages/core/scss/components/_ruler.scss b/packages/core/scss/components/_ruler.scss index 65152cc8e9..98536ae143 100644 --- a/packages/core/scss/components/_ruler.scss +++ b/packages/core/scss/components/_ruler.scss @@ -1,7 +1,10 @@ -.#{$prefix}--#{$charts-prefix}--ruler, -.#{$prefix}--#{$charts-prefix}--ruler-binned { +@use '../globals'; +@use '../tokens'; + +.#{globals.$prefix}--#{globals.$charts-prefix}--ruler, +.#{globals.$prefix}--#{globals.$charts-prefix}--ruler-binned { line.ruler-line { - stroke: $layer-inverse-absolute; + stroke: tokens.$layer-inverse-absolute; stroke-width: 1px; stroke-dasharray: 2; pointer-events: none; diff --git a/packages/core/scss/components/_skeleton-lines.scss b/packages/core/scss/components/_skeleton-lines.scss index 8b758c76c6..b381483376 100644 --- a/packages/core/scss/components/_skeleton-lines.scss +++ b/packages/core/scss/components/_skeleton-lines.scss @@ -1,14 +1,17 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '@carbon/colors'; +@use '../globals'; +@use '../tokens'; -$lines-bg-color: $layer-accent-01; -$lines-shimmer-color: $white-0; +$lines-bg-color: theme.$layer-accent-01; +$lines-shimmer-color: colors.$white-0; $areas-bg-color: rgba(127, 127, 127, 0.1); -$areas-shimmer-color: rgba($white-0, 0.15); +$areas-shimmer-color: rgba(colors.$white-0, 0.15); -.#{$prefix}--#{$charts-prefix}--skeleton-lines { +.#{globals.$prefix}--#{globals.$charts-prefix}--skeleton-lines { // lines rect.chart-skeleton-backdrop { - fill: $grid-bg; + fill: tokens.$grid-bg; } .shimmer-effect-lines { diff --git a/packages/core/scss/components/_skeleton.scss b/packages/core/scss/components/_skeleton.scss index 9b9709ae30..a86bfb4b6b 100644 --- a/packages/core/scss/components/_skeleton.scss +++ b/packages/core/scss/components/_skeleton.scss @@ -1,14 +1,17 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '@carbon/colors'; +@use '../globals'; +@use '../tokens'; -$lines-bg-color: $layer-accent-01; -$lines-shimmer-color: $white-0; +$lines-bg-color: theme.$layer-accent-01; +$lines-shimmer-color: colors.$white-0; $areas-bg-color: rgba(127, 127, 127, 0.1); -$areas-shimmer-color: rgba($white-0, 0.15); +$areas-shimmer-color: rgba(colors.$white-0, 0.15); -.#{$prefix}--#{$charts-prefix}--skeleton { +.#{globals.$prefix}--#{globals.$charts-prefix}--skeleton { // lines rect.chart-skeleton-backdrop { - fill: $grid-bg; + fill: tokens.$grid-bg; } .shimmer-effect-lines { diff --git a/packages/core/scss/components/_threshold.scss b/packages/core/scss/components/_threshold.scss index de9a8d59b6..1ca1fc573b 100644 --- a/packages/core/scss/components/_threshold.scss +++ b/packages/core/scss/components/_threshold.scss @@ -1,10 +1,11 @@ -@use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/motion'; +@use '@carbon/styles/scss/theme'; +@use '@carbon/colors'; +@use '../globals'; -.#{$prefix}--#{$charts-prefix}--threshold { +.#{globals.$prefix}--#{globals.$charts-prefix}--threshold { line.threshold-line { - stroke: $red-50; + stroke: colors.$red-50; stroke-width: 1; stroke-dasharray: 4; cursor: pointer; @@ -27,19 +28,19 @@ } } -.#{$prefix}--#{$charts-prefix}--threshold--label { - background-color: $red-50; +.#{globals.$prefix}--#{globals.$charts-prefix}--threshold--label { + background-color: colors.$red-50; pointer-events: none; transition: opacity 0.1s; - @include motion(standard, expressive); + @include motion.motion(standard, expressive); display: inline; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2); position: absolute; word-wrap: break-word; z-index: 1059; - font-family: var(--#{$prefix}-charts-font-family-condensed); + font-family: var(--#{globals.$prefix}-charts-font-family-condensed); - color: $text-primary; + color: theme.$text-primary; line-height: 16px; font-size: 12px; padding: 4px; @@ -48,6 +49,6 @@ &.hidden { opacity: 0; transition: opacity 0.1s; - @include motion(standard, expressive); + @include motion.motion(standard, expressive); } } diff --git a/packages/core/scss/components/_title.scss b/packages/core/scss/components/_title.scss index 6dad39f01a..6def4ccf16 100644 --- a/packages/core/scss/components/_title.scss +++ b/packages/core/scss/components/_title.scss @@ -1,11 +1,11 @@ -@use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '../globals'; -.#{$prefix}--#{$charts-prefix}--title { +.#{globals.$prefix}--#{globals.$charts-prefix}--title { p.title { - color: $text-primary; + color: theme.$text-primary; font-size: 16px; - font-family: var(--#{$prefix}-charts-font-family); + font-family: var(--#{globals.$prefix}-charts-font-family); // TODO-V11 // font-weight: font-weight('semibold'); font-weight: 600; diff --git a/packages/core/scss/components/_toolbar.scss b/packages/core/scss/components/_toolbar.scss index 643e25c1ce..ccd4fc9ee4 100644 --- a/packages/core/scss/components/_toolbar.scss +++ b/packages/core/scss/components/_toolbar.scss @@ -1,15 +1,15 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '@carbon/styles/scss/components/overflow-menu'; +@use '../globals'; -$css--reset: false; - -.#{$prefix}--chart-holder { +.#{globals.$prefix}--chart-holder { .cds--overflow-menu, .cds--overflow-menu__trigger { width: 2rem; height: 2rem; } - .#{$prefix}--#{$charts-prefix}--toolbar { + .#{globals.$prefix}--#{globals.$charts-prefix}--toolbar { display: flex; div.toolbar-control { @@ -29,7 +29,7 @@ $css--reset: false; } svg { - fill: $icon-on-color-disabled; + fill: theme.$icon-on-color-disabled; } } } diff --git a/packages/core/scss/components/_tooltip.scss b/packages/core/scss/components/_tooltip.scss index ec730b4e75..fe75869fcc 100644 --- a/packages/core/scss/components/_tooltip.scss +++ b/packages/core/scss/components/_tooltip.scss @@ -1,29 +1,30 @@ -@use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/motion'; +@use '@carbon/styles/scss/theme'; +@use '../globals'; +@use '../tokens'; -.#{$prefix}--#{$charts-prefix}--tooltip { - background-color: $layer-02; +.#{globals.$prefix}--#{globals.$charts-prefix}--tooltip { + background-color: theme.$layer-02; pointer-events: none; - @include motion(standard, expressive); + @include motion.motion(standard, expressive); display: inline; visibility: visible; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2); position: absolute; word-wrap: break-word; z-index: 1059; - font-family: var(--#{$prefix}-charts-font-family-condensed); + font-family: var(--#{globals.$prefix}-charts-font-family-condensed); transition: visibility 0s linear 0.1s, opacity 0.1s; &.hidden { opacity: 0; visibility: hidden; transition: visibility 0s linear 0s, opacity 0.1s; - @include motion(standard, expressive); + @include motion.motion(standard, expressive); } .content-box { - color: $text-primary; + color: theme.$text-primary; .title-tooltip { width: auto; @@ -62,7 +63,7 @@ vertical-align: top; padding-left: 4px; width: auto; - fill: $layer-inverse-absolute; + fill: tokens.$layer-inverse-absolute; } } @@ -102,7 +103,7 @@ position: relative; &:not(:last-child) { - border-bottom: 1px solid $tooltip-line-border; + border-bottom: 1px solid tokens.$tooltip-line-border; } } } diff --git a/packages/core/scss/components/_zero-line.scss b/packages/core/scss/components/_zero-line.scss index c48f8c6ce1..d0bde15d3a 100644 --- a/packages/core/scss/components/_zero-line.scss +++ b/packages/core/scss/components/_zero-line.scss @@ -1,5 +1,6 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '../globals'; -.#{$prefix}--#{$charts-prefix}--zero-line line.domain { - stroke: $border-strong-01; +.#{globals.$prefix}--#{globals.$charts-prefix}--zero-line line.domain { + stroke: theme.$border-strong-01; } diff --git a/packages/core/scss/components/_zoom-bar.scss b/packages/core/scss/components/_zoom-bar.scss index ef0985654e..d61ef0fdae 100644 --- a/packages/core/scss/components/_zoom-bar.scss +++ b/packages/core/scss/components/_zoom-bar.scss @@ -1,42 +1,44 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '@carbon/colors'; +@use '../globals'; -.#{$prefix}--#{$charts-prefix}--zoom-bar { +.#{globals.$prefix}--#{globals.$charts-prefix}--zoom-bar { rect.zoom-bg { - fill: $background; - stroke: $layer-01; + fill: theme.$background; + stroke: theme.$layer-01; } rect.zoom-slider-bg { - fill: $layer-01; + fill: theme.$layer-01; } rect.zoom-slider-selected-area { - fill: $icon-secondary; + fill: theme.$icon-secondary; } path.zoom-bg-baseline { - stroke: $border-strong-01; + stroke: theme.$border-strong-01; stroke-width: 2; } path.zoom-graph-area { - fill: $layer-accent-01; - stroke: $border-strong-01; + fill: theme.$layer-accent-01; + stroke: theme.$border-strong-01; stroke-width: 1; } path.zoom-graph-area-unselected { - fill: $layer-01; + fill: theme.$layer-01; stroke: none; } g.zoom-bar-brush { rect.handle { - fill: $icon-secondary; + fill: theme.$icon-secondary; } rect.handle-bar { - fill: $layer-02; + fill: theme.$layer-02; } // clear d3.brush selection style @@ -47,7 +49,7 @@ } rect[class^='highlight-'] { - fill: $magenta-50; - stroke: $magenta-50; + fill: colors.$magenta-50; + stroke: colors.$magenta-50; } } diff --git a/packages/core/scss/components/diagrams/_card-node.scss b/packages/core/scss/components/diagrams/_card-node.scss index cbaa3c5958..55fab5eaf4 100644 --- a/packages/core/scss/components/diagrams/_card-node.scss +++ b/packages/core/scss/components/diagrams/_card-node.scss @@ -1,7 +1,9 @@ -@use '@carbon/styles/scss/utilities/focus-outline' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/utilities/focus-outline' as focus; +@use '@carbon/styles/scss/spacing'; +@use '@carbon/styles/scss/type'; +@use '@carbon/styles/scss/theme'; +@use '../../globals'; +@use '../../tokens'; @mixin stacked-card-node { content: ''; @@ -9,89 +11,87 @@ width: 100%; position: absolute; z-index: 0; - border-top: 0.125rem solid $layer-accent-01; - border-right: 0.125rem solid $layer-accent-01; + border-top: 0.125rem solid theme.$layer-accent-01; + border-right: 0.125rem solid theme.$layer-accent-01; pointer-events: none; } -@include exports('cc-card-node') { - .#{$prefix}--#{$charts-prefix}--card-node { - display: flex; - position: relative; - background-color: $layer-01; - z-index: 1; - box-sizing: border-box; - font-family: var(--#{$prefix}-charts-font-family); - width: 100%; - height: 100%; - padding: $spacing-05 $spacing-03; - border-left: 0.25rem solid $border-inverse; - } - - .#{$prefix}--#{$charts-prefix}--card-node--a, - .#{$prefix}--#{$charts-prefix}--card-node--button { - border-top: none; - border-right: none; - border-bottom: none; - color: inherit; - text-decoration: none; - cursor: pointer; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node { + display: flex; + position: relative; + background-color: theme.$layer-01; + z-index: 1; + box-sizing: border-box; + font-family: var(--#{globals.$prefix}-charts-font-family); + width: 100%; + height: 100%; + padding: spacing.$spacing-05 spacing.$spacing-03; + border-left: 0.25rem solid theme.$border-inverse; +} - .#{$prefix}--#{$charts-prefix}--card-node--button { - font-family: var(--#{$prefix}-charts-font-family); - text-align: left; - width: 100%; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--a, +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--button { + border-top: none; + border-right: none; + border-bottom: none; + color: inherit; + text-decoration: none; + cursor: pointer; +} - .#{$prefix}--#{$charts-prefix}--card-node--a:focus, - .#{$prefix}--#{$charts-prefix}--card-node--a:hover, - .#{$prefix}--#{$charts-prefix}--card-node--button:focus, - .#{$prefix}--#{$charts-prefix}--card-node--button:hover { - background-color: $network-diagrams-background-hover; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--button { + font-family: var(--#{globals.$prefix}-charts-font-family); + text-align: left; + width: 100%; +} - .#{$prefix}--#{$charts-prefix}--card-node--a:focus, - .#{$prefix}--#{$charts-prefix}--card-node--button:focus { - @include focus-outline($type: outline); - } +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--a:focus, +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--a:hover, +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--button:focus, +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--button:hover { + background-color: tokens.$network-diagrams-background-hover; +} - .#{$prefix}--#{$charts-prefix}--card-node--stacked { - &::before { - @include stacked-card-node(); - left: 0.3125rem; - bottom: 0.3125rem; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--a:focus, +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--button:focus { + @include focus.focus-outline($type: outline); +} - &::after { - @include stacked-card-node(); - left: 0.6875rem; - bottom: 0.6875rem; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--stacked { + &::before { + @include stacked-card-node(); + left: 0.3125rem; + bottom: 0.3125rem; } - .#{$prefix}--#{$charts-prefix}--card-node__column { - padding: 0 $spacing-03; + &::after { + @include stacked-card-node(); + left: 0.6875rem; + bottom: 0.6875rem; } +} - .#{$prefix}--#{$charts-prefix}--card-node__column--farside { - margin-left: auto; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node__column { + padding: 0 spacing.$spacing-03; +} - .#{$prefix}--#{$charts-prefix}--card-node__title { - @include type-style($name: productive-heading-01); - margin: 0; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node__column--farside { + margin-left: auto; +} - .#{$prefix}--#{$charts-prefix}--card-node__subtitle { - @include type-style($name: body-short-01); - margin: 0; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node__title { + @include type.type-style($name: productive-heading-01); + margin: 0; +} - .#{$prefix}--#{$charts-prefix}--card-node__label { - display: block; - @include type-style($name: label-01); - color: $text-secondary; - padding-top: $spacing-06; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node__subtitle { + @include type.type-style($name: body-short-01); + margin: 0; +} + +.#{globals.$prefix}--#{globals.$charts-prefix}--card-node__label { + display: block; + @include type.type-style($name: label-01); + color: theme.$text-secondary; + padding-top: spacing.$spacing-06; } diff --git a/packages/core/scss/components/diagrams/_edge.scss b/packages/core/scss/components/diagrams/_edge.scss index d01449d24d..2dd4a9a9e4 100644 --- a/packages/core/scss/components/diagrams/_edge.scss +++ b/packages/core/scss/components/diagrams/_edge.scss @@ -1,66 +1,63 @@ -@use '@carbon/styles/scss/utilities/focus-outline' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/spacing'; +@use '@carbon/styles/scss/theme'; +@use '../../globals'; -@include exports('cc-edge') { - .#{$prefix}--#{$charts-prefix}--edge { - fill: transparent; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--edge { + fill: transparent; +} - .#{$prefix}--#{$charts-prefix}--edge__container { - stroke-width: $spacing-06; - stroke: transparent; - stroke-dasharray: none; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--edge__container { + stroke-width: spacing.$spacing-06; + stroke: transparent; + stroke-dasharray: none; +} - .#{$prefix}--#{$charts-prefix}--edge__inner { - stroke-width: 0.0625rem; - stroke: $border-strong-01; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--edge__inner { + stroke-width: 0.0625rem; + stroke: theme.$border-strong-01; +} + +.#{globals.$prefix}--#{globals.$charts-prefix}--edge__outer { + stroke-width: 0.15625rem; + stroke: transparent; +} - .#{$prefix}--#{$charts-prefix}--edge__outer { +.#{globals.$prefix}--#{globals.$charts-prefix}--edge:hover { + .#{globals.$prefix}--#{globals.$charts-prefix}--edge__inner { stroke-width: 0.15625rem; - stroke: transparent; } +} - .#{$prefix}--#{$charts-prefix}--edge:hover { - .#{$prefix}--#{$charts-prefix}--edge__inner { - stroke-width: 0.15625rem; - } - } +.#{globals.$prefix}--#{globals.$charts-prefix}--edge--dash-sm { + stroke-dasharray: 2 4; +} - .#{$prefix}--#{$charts-prefix}--edge--dash-sm { - stroke-dasharray: 2 4; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--edge--dash-md { + stroke-dasharray: 4 4; +} - .#{$prefix}--#{$charts-prefix}--edge--dash-md { - stroke-dasharray: 4 4; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--edge--dash-lg { + stroke-dasharray: 8 4; +} - .#{$prefix}--#{$charts-prefix}--edge--dash-lg { - stroke-dasharray: 8 4; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--edge--dash-xl { + stroke-dasharray: 16 4; +} - .#{$prefix}--#{$charts-prefix}--edge--dash-xl { - stroke-dasharray: 16 4; +.#{globals.$prefix}--#{globals.$charts-prefix}--edge--tunnel { + .#{globals.$prefix}--#{globals.$charts-prefix}--edge__outer { + stroke: theme.$layer-accent-01; + stroke-width: 0.375rem; } +} - .#{$prefix}--#{$charts-prefix}--edge--tunnel { - .#{$prefix}--#{$charts-prefix}--edge__outer { - stroke: $layer-accent-01; - stroke-width: 0.375rem; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--edge--double { + .#{globals.$prefix}--#{globals.$charts-prefix}--edge__inner { + stroke: theme.$background; } - .#{$prefix}--#{$charts-prefix}--edge--double { - .#{$prefix}--#{$charts-prefix}--edge__inner { - stroke: $background; - } - - .#{$prefix}--#{$charts-prefix}--edge__outer { - stroke: $border-inverse; - stroke-width: 0.28125rem; - } + .#{globals.$prefix}--#{globals.$charts-prefix}--edge__outer { + stroke: theme.$border-inverse; + stroke-width: 0.28125rem; } } diff --git a/packages/core/scss/components/diagrams/_marker.scss b/packages/core/scss/components/diagrams/_marker.scss index b8088eb974..0602c5290c 100644 --- a/packages/core/scss/components/diagrams/_marker.scss +++ b/packages/core/scss/components/diagrams/_marker.scss @@ -1,7 +1,6 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '../../globals'; -@include exports('cc-marker') { - .#{$prefix}--#{$charts-prefix}--marker { - fill: $border-inverse; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--marker { + fill: theme.$border-inverse; } diff --git a/packages/core/scss/components/diagrams/_shape-node.scss b/packages/core/scss/components/diagrams/_shape-node.scss index 5ddc06f0e5..3f4d23b68d 100644 --- a/packages/core/scss/components/diagrams/_shape-node.scss +++ b/packages/core/scss/components/diagrams/_shape-node.scss @@ -1,89 +1,88 @@ -@use '@carbon/styles/scss/utilities/focus-outline' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/spacing'; +@use '@carbon/styles/scss/type'; +@use '@carbon/styles/scss/theme'; +@use '../../globals'; +@use '../../tokens'; -@include exports('cc-shape-node') { - .#{$prefix}--#{$charts-prefix}--shape-node { - display: flex; - justify-content: center; - align-items: center; - background-color: $layer-01; - box-sizing: border-box; - font-family: var(--#{$prefix}-charts-font-family); - width: 100%; - height: 100%; - position: relative; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node { + display: flex; + justify-content: center; + align-items: center; + background-color: theme.$layer-01; + box-sizing: border-box; + font-family: var(--#{globals.$prefix}-charts-font-family); + width: 100%; + height: 100%; + position: relative; +} - .#{$prefix}--#{$charts-prefix}--shape-node--circle { - border-radius: 100%; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--circle { + border-radius: 100%; +} - .#{$prefix}--#{$charts-prefix}--shape-node--square { - border-radius: 0; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--square { + border-radius: 0; +} - .#{$prefix}--#{$charts-prefix}--shape-node--rounded-square { - border-radius: 0.5rem; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--rounded-square { + border-radius: 0.5rem; +} - .#{$prefix}--#{$charts-prefix}--shape-node--a, - .#{$prefix}--#{$charts-prefix}--shape-node--button { - border: none; - color: inherit; - text-decoration: none; - cursor: pointer; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--a, +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--button { + border: none; + color: inherit; + text-decoration: none; + cursor: pointer; +} - .#{$prefix}--#{$charts-prefix}--shape-node--button { - font-family: var(--#{$prefix}-charts-font-family); - text-align: left; - width: 100%; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--button { + font-family: var(--#{globals.$prefix}-charts-font-family); + text-align: left; + width: 100%; +} - .#{$prefix}--#{$charts-prefix}--shape-node--a:focus, - .#{$prefix}--#{$charts-prefix}--shape-node--a:hover, - .#{$prefix}--#{$charts-prefix}--shape-node--button:focus, - .#{$prefix}--#{$charts-prefix}--shape-node--button:hover { - background-color: $network-diagrams-background-hover; +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--a:focus, +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--a:hover, +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--button:focus, +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--button:hover { + background-color: tokens.$network-diagrams-background-hover; - .#{$prefix}--#{$charts-prefix}--shape-node__title, - .#{$prefix}--#{$charts-prefix}--shape-node__subtitle { - // TODO-V11 - // font-weight: font-weight('semibold'); - font-weight: 600; - } + .#{globals.$prefix}--#{globals.$charts-prefix}--shape-node__title, + .#{globals.$prefix}--#{globals.$charts-prefix}--shape-node__subtitle { + // TODO-V11 + // font-weight: font-weight('semibold'); + font-weight: 600; } +} - .#{$prefix}--#{$charts-prefix}--shape-node--a:focus, - .#{$prefix}--#{$charts-prefix}--shape-node--button:focus { - &:focus { - outline: none; - box-shadow: 0 0 0 2px $focus; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--a:focus, +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--button:focus { + &:focus { + outline: none; + box-shadow: 0 0 0 2px theme.$focus; } +} - .#{$prefix}--#{$charts-prefix}--shape-node__body { - position: absolute; - top: calc(100% + #{$spacing-01}); - text-align: center; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node__body { + position: absolute; + top: calc(100% + #{spacing.$spacing-01}); + text-align: center; +} - .#{$prefix}--#{$charts-prefix}--shape-node__subtitle { - padding-bottom: $spacing-01; - @include type-style($name: body-short-01); - color: $text-primary; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node__subtitle { + padding-bottom: spacing.$spacing-01; + @include type.type-style($name: body-short-01); + color: theme.$text-primary; +} - .#{$prefix}--#{$charts-prefix}--shape-node__icon { - display: flex; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node__icon { + display: flex; +} - .#{$prefix}--#{$charts-prefix}--shape-node__title { - @include type-style($name: body-short-01); - color: $text-primary; - padding-top: $spacing-01; - margin-bottom: 1px; - } +.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node__title { + @include type.type-style($name: body-short-01); + color: theme.$text-primary; + padding-top: spacing.$spacing-01; + margin-bottom: 1px; } diff --git a/packages/core/scss/components/diagrams/index.scss b/packages/core/scss/components/diagrams/index.scss index 93a32e3bf2..93f20baf3d 100644 --- a/packages/core/scss/components/diagrams/index.scss +++ b/packages/core/scss/components/diagrams/index.scss @@ -1,4 +1,4 @@ -@import './card-node'; -@import './shape-node'; -@import './edge'; -@import './marker'; +@use 'card-node'; +@use 'shape-node'; +@use 'edge'; +@use 'marker'; diff --git a/packages/core/scss/components/index.scss b/packages/core/scss/components/index.scss index dd6e53ac7e..0337561f24 100644 --- a/packages/core/scss/components/index.scss +++ b/packages/core/scss/components/index.scss @@ -1,20 +1,20 @@ -@import './axis'; -@import './callouts'; -@import './grid-brush'; -@import './grid'; -@import './ruler'; -@import './skeleton'; -@import './skeleton-lines'; -@import './zero-line'; -@import './layout'; -@import './legend'; -@import './modal'; -@import './title'; -@import './meter-title'; -@import './toolbar'; -@import './tooltip'; -@import './threshold'; -@import './zoom-bar'; -@import './highlights'; -@import './diagrams/index.scss'; -@import './color-legend'; +@use 'axis'; +@use 'callouts'; +@use 'color-legend'; +@use 'diagrams'; +@use 'grid'; +@use 'grid-brush'; +@use 'highlights'; +@use 'layout'; +@use 'legend'; +@use 'meter-title'; +@use 'modal'; +@use 'ruler'; +@use 'skeleton'; +@use 'skeleton-lines'; +@use 'threshold'; +@use 'title'; +@use 'toolbar'; +@use 'tooltip'; +@use 'zero-line'; +@use 'zoom-bar'; diff --git a/packages/core/scss/demos.scss b/packages/core/scss/demos.scss index 9b5394faa0..a3ca1af830 100644 --- a/packages/core/scss/demos.scss +++ b/packages/core/scss/demos.scss @@ -33,6 +33,7 @@ $css--reset: false; // Do not include reset CSS .#{$prefix}--#{$charts-prefix}--chart-wrapper { overflow: visible; + font-family: var(--#{$prefix}-charts-font-family-condensed); } html { diff --git a/packages/core/scss/graphs/_alluvial.scss b/packages/core/scss/graphs/_alluvial.scss index 826f27cb43..b620e0afe1 100644 --- a/packages/core/scss/graphs/_alluvial.scss +++ b/packages/core/scss/graphs/_alluvial.scss @@ -1,17 +1,18 @@ -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '../globals'; +@use '../tokens'; -.#{$prefix}--#{$charts-prefix}--alluvial { +.#{globals.$prefix}--#{globals.$charts-prefix}--alluvial { rect.node, rect.node-text-bg { - fill: $layer-inverse-absolute; + fill: tokens.$layer-inverse-absolute; } text.node-text { - fill: $layer-01-absolute; + fill: tokens.$layer-01-absolute; } polygon.arrow-down { - fill: $layer-01; + fill: theme.$layer-01; } } diff --git a/packages/core/scss/graphs/_area.scss b/packages/core/scss/graphs/_area.scss index 1ea944021e..40adf6a601 100644 --- a/packages/core/scss/graphs/_area.scss +++ b/packages/core/scss/graphs/_area.scss @@ -1,4 +1,6 @@ -.#{$prefix}--#{$charts-prefix}--area path.area, -.#{$prefix}--#{$charts-prefix}--area-stacked path.area { +@use '../globals'; + +.#{globals.$prefix}--#{globals.$charts-prefix}--area path.area, +.#{globals.$prefix}--#{globals.$charts-prefix}--area-stacked path.area { pointer-events: none; } diff --git a/packages/core/scss/graphs/_bubble.scss b/packages/core/scss/graphs/_bubble.scss index 6f64bd0de9..499d216c98 100644 --- a/packages/core/scss/graphs/_bubble.scss +++ b/packages/core/scss/graphs/_bubble.scss @@ -1,15 +1,16 @@ -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/motion'; +@use '@carbon/styles/scss/theme'; +@use '../globals'; -.#{$prefix}--#{$charts-prefix}--bubble { +.#{globals.$prefix}--#{globals.$charts-prefix}--bubble { circle.dot.hovered { fill-opacity: 1; transition: all 0.1s; - @include motion(standard, expressive); + @include motion.motion(standard, expressive); } circle.dot.unfilled { - fill: $layer-01; + fill: theme.$layer-01; } g.lines path.line { diff --git a/packages/core/scss/graphs/_bullet.scss b/packages/core/scss/graphs/_bullet.scss index 294dc235d5..c011717d67 100644 --- a/packages/core/scss/graphs/_bullet.scss +++ b/packages/core/scss/graphs/_bullet.scss @@ -1,25 +1,23 @@ -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/theme'; +@use '../globals'; +@use '../tokens'; -@use '@carbon/styles/scss/motion' as *; - -.#{$prefix}--#{$charts-prefix}--bullet { +.#{globals.$prefix}--#{globals.$charts-prefix}--bullet { path.range-box { pointer-events: none; &.order-1 { - fill: $zone-fill-01; - stroke: $zone-stroke-01; + fill: tokens.$zone-fill-01; + stroke: tokens.$zone-stroke-01; } &.order-2 { - fill: $zone-fill-02; - stroke: $zone-stroke-02; + fill: tokens.$zone-fill-02; + stroke: tokens.$zone-stroke-02; } &.order-3 { - fill: $zone-fill-03; - stroke: $zone-stroke-03; + fill: tokens.$zone-fill-03; + stroke: tokens.$zone-stroke-03; } } @@ -27,10 +25,10 @@ path.quartile { pointer-events: none; stroke-width: 1.5px; - stroke: $layer-inverse-absolute; + stroke: tokens.$layer-inverse-absolute; } path.quartile.over-bar { - stroke: $layer-01-absolute; + stroke: tokens.$layer-01-absolute; } } diff --git a/packages/core/scss/graphs/_choropleth.scss b/packages/core/scss/graphs/_choropleth.scss index c64ae96c60..976614a870 100644 --- a/packages/core/scss/graphs/_choropleth.scss +++ b/packages/core/scss/graphs/_choropleth.scss @@ -1,18 +1,18 @@ -@use "@carbon/styles/scss/themes"; -@use "@carbon/styles/scss/theme" as *; +@use "@carbon/styles/scss/theme"; +@use '../globals'; -.#{$prefix}--#{$charts-prefix}--choropleth { +.#{globals.$prefix}--#{globals.$charts-prefix}--choropleth { path.border { - stroke: $border-subtle-selected-01; + stroke: theme.$border-subtle-selected-01; } g.missing-data path { - stroke: $border-subtle-selected-01; - fill: $background; + stroke: theme.$border-subtle-selected-01; + fill: theme.$background; } pattern path.pattern-fill { - stroke: $border-strong-01; + stroke: theme.$border-strong-01; stroke-width: 0.5px; } } diff --git a/packages/core/scss/graphs/_circle-pack.scss b/packages/core/scss/graphs/_circle-pack.scss index a63771cf4a..a5942f6ce5 100644 --- a/packages/core/scss/graphs/_circle-pack.scss +++ b/packages/core/scss/graphs/_circle-pack.scss @@ -1,6 +1,7 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '../globals'; -.#{$prefix}--#{$charts-prefix}--circle-pack { +.#{globals.$prefix}--#{globals.$charts-prefix}--circle-pack { circle.node { stroke-width: 1.5px; @@ -9,9 +10,9 @@ } &.non-focal { - fill: $icon-disabled; + fill: theme.$icon-disabled; fill-opacity: 30%; - stroke: $icon-disabled; + stroke: theme.$icon-disabled; } &.clickable { @@ -20,9 +21,9 @@ } } -.#{$prefix}--#{$charts-prefix}--chart-wrapper.zoomed-in { +.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper.zoomed-in { cursor: zoom-out; - .#{$prefix}--#{$charts-prefix}--circle-pack { + .#{globals.$prefix}--#{globals.$charts-prefix}--circle-pack { circle.node { &.hovered-child { stroke: 1.5px solid initial; diff --git a/packages/core/scss/graphs/_donut.scss b/packages/core/scss/graphs/_donut.scss index 757d2ecc20..646653c7f4 100644 --- a/packages/core/scss/graphs/_donut.scss +++ b/packages/core/scss/graphs/_donut.scss @@ -1,3 +1,5 @@ -.#{$prefix}--#{$charts-prefix}--donut { +@use '../globals'; + +.#{globals.$prefix}--#{globals.$charts-prefix}--donut { overflow: visible; } diff --git a/packages/core/scss/graphs/_gauge.scss b/packages/core/scss/graphs/_gauge.scss index 9c81a6bc3a..79257c15a9 100644 --- a/packages/core/scss/graphs/_gauge.scss +++ b/packages/core/scss/graphs/_gauge.scss @@ -1,23 +1,24 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '../globals'; -.#{$prefix}--#{$charts-prefix}--gauge { +.#{globals.$prefix}--#{globals.$charts-prefix}--gauge { overflow: visible; path.arc-background { - fill: $layer-01; + fill: theme.$layer-01; } .gauge-delta-arrow { &.status--danger { - fill: $support-error; + fill: theme.$support-error; } &.status--warning { - fill: $support-warning; + fill: theme.$support-warning; } &.status--success { - fill: $support-success; + fill: theme.$support-success; } } } diff --git a/packages/core/scss/graphs/_heatmap.scss b/packages/core/scss/graphs/_heatmap.scss index 7cbc377a3d..1bc4a63d8d 100644 --- a/packages/core/scss/graphs/_heatmap.scss +++ b/packages/core/scss/graphs/_heatmap.scss @@ -1,7 +1,7 @@ -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '../globals'; -.#{$prefix}--#{$charts-prefix}--heatmap { +.#{globals.$prefix}--#{globals.$charts-prefix}--heatmap { g.highlighter-hidden { visibility: hidden; } @@ -28,7 +28,7 @@ } rect.pattern-fill { - fill: $border-strong-01; + fill: theme.$border-strong-01; } g.shadows { @@ -51,10 +51,10 @@ rect.heat { stroke-width: 0px; - stroke: $background; + stroke: theme.$background; } rect.null-state { - fill: $icon-inverse; + fill: theme.$icon-inverse; } } diff --git a/packages/core/scss/graphs/_line.scss b/packages/core/scss/graphs/_line.scss index 5e56a54add..af1bc489a0 100644 --- a/packages/core/scss/graphs/_line.scss +++ b/packages/core/scss/graphs/_line.scss @@ -1,9 +1,11 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '@carbon/colors'; +@use '../globals'; -$lines-bg-color: $layer-accent-01; -$lines-shimmer-color: $white-0; +$lines-bg-color: theme.$layer-accent-01; +$lines-shimmer-color: colors.$white-0; -.#{$prefix}--#{$charts-prefix}--line { +.#{globals.$prefix}--#{globals.$charts-prefix}--line { path.line { pointer-events: none; fill: none; diff --git a/packages/core/scss/graphs/_lollipop.scss b/packages/core/scss/graphs/_lollipop.scss index 26b44a9be2..341d10a6e7 100644 --- a/packages/core/scss/graphs/_lollipop.scss +++ b/packages/core/scss/graphs/_lollipop.scss @@ -1,4 +1,6 @@ -.#{$prefix}--#{$charts-prefix}--lollipop { +@use '../globals'; + +.#{globals.$prefix}--#{globals.$charts-prefix}--lollipop { line.line { pointer-events: none; } diff --git a/packages/core/scss/graphs/_meter.scss b/packages/core/scss/graphs/_meter.scss index 8b8c6ca93c..ecce65c5ad 100644 --- a/packages/core/scss/graphs/_meter.scss +++ b/packages/core/scss/graphs/_meter.scss @@ -1,34 +1,35 @@ -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '../globals'; +@use '../tokens'; -.#{$prefix}--#{$charts-prefix}--meter { +.#{globals.$prefix}--#{globals.$charts-prefix}--meter { rect.container { - fill: $layer-01; + fill: theme.$layer-01; } line.rangeIndicator { - stroke: $meter-range-indicator; + stroke: tokens.$meter-range-indicator; stroke-width: 1px; } rect.value { &.status--danger { - fill: $support-error; + fill: theme.$support-error; } &.status--warning { - fill: $support-warning; + fill: theme.$support-warning; stroke-width: 1px; - stroke: $alert-stroke; + stroke: tokens.$alert-stroke; } &.status--success { - fill: $support-success; + fill: theme.$support-success; } } line.peak { - stroke: $border-inverse; + stroke: theme.$border-inverse; stroke-width: 2px; } } diff --git a/packages/core/scss/graphs/_pie.scss b/packages/core/scss/graphs/_pie.scss index b1b90505ad..71d64e66f3 100644 --- a/packages/core/scss/graphs/_pie.scss +++ b/packages/core/scss/graphs/_pie.scss @@ -1,3 +1,5 @@ -.#{$prefix}--#{$charts-prefix}--pie { +@use '../globals'; + +.#{globals.$prefix}--#{globals.$charts-prefix}--pie { overflow: visible; } diff --git a/packages/core/scss/graphs/_radar.scss b/packages/core/scss/graphs/_radar.scss index 39682cee80..bc89d5762f 100644 --- a/packages/core/scss/graphs/_radar.scss +++ b/packages/core/scss/graphs/_radar.scss @@ -1,7 +1,8 @@ -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '../globals'; +@use '../tokens'; -.#{$prefix}--#{$charts-prefix}--radar { +.#{globals.$prefix}--#{globals.$charts-prefix}--radar { .blobs path { stroke-width: 1.5px; } @@ -9,10 +10,10 @@ .y-axes path, .x-axes line { stroke-width: 1px; - stroke: $layer-accent-01; + stroke: theme.$layer-accent-01; } .x-axes line.hovered { - stroke: $layer-inverse-absolute; + stroke: tokens.$layer-inverse-absolute; } } diff --git a/packages/core/scss/graphs/_scatter-stacked.scss b/packages/core/scss/graphs/_scatter-stacked.scss index 3447301d73..7a0828b0b5 100644 --- a/packages/core/scss/graphs/_scatter-stacked.scss +++ b/packages/core/scss/graphs/_scatter-stacked.scss @@ -1,8 +1,9 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '../globals'; -.#{$prefix}--#{$charts-prefix}--scatter-stacked { +.#{globals.$prefix}--#{globals.$charts-prefix}--scatter-stacked { circle.dot.unfilled { - fill: $layer-01; + fill: theme.$layer-01; stroke-width: 1.5; } diff --git a/packages/core/scss/graphs/_scatter.scss b/packages/core/scss/graphs/_scatter.scss index 1582c3448c..df63a3b102 100644 --- a/packages/core/scss/graphs/_scatter.scss +++ b/packages/core/scss/graphs/_scatter.scss @@ -1,15 +1,16 @@ -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/motion' as motion; +@use '@carbon/styles/scss/theme'; +@use '../globals'; -.#{$prefix}--#{$charts-prefix}--scatter { +.#{globals.$prefix}--#{globals.$charts-prefix}--scatter { circle.dot.hovered { fill-opacity: 1; transition: all 0.1s; - @include motion(standard, expressive); + @include motion.motion(standard, expressive); } circle.dot.unfilled { - fill: $layer-01; + fill: theme.$layer-01; stroke-width: 1.5; } diff --git a/packages/core/scss/graphs/_tree.scss b/packages/core/scss/graphs/_tree.scss index 3734422fff..78bda26ed0 100644 --- a/packages/core/scss/graphs/_tree.scss +++ b/packages/core/scss/graphs/_tree.scss @@ -1,9 +1,11 @@ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; +@use '../globals'; +@use '../transition'; -.#{$prefix}--#{$charts-prefix}--chart-wrapper .#{$prefix}--#{$charts-prefix}--tree { +.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper .#{globals.$prefix}--#{globals.$charts-prefix}--tree { g.links { fill: none; - stroke: $border-strong-01; + stroke: theme.$border-strong-01; stroke-opacity: 0.4; stroke-width: 1.5; } @@ -19,27 +21,27 @@ } circle { - fill: $text-primary; - @include default_transition; + fill: theme.$text-primary; + @include transition.default_transition; } } } circle { &.parent { - fill: $text-secondary; + fill: theme.$text-secondary; } &.child { - fill: $border-strong-01; + fill: theme.$border-strong-01; } } text { - fill: $text-primary; + fill: theme.$text-primary; &.text-stroke { - stroke: $text-inverse; + stroke: theme.$text-inverse; stroke-width: 2px; } } diff --git a/packages/core/scss/graphs/_treemap.scss b/packages/core/scss/graphs/_treemap.scss index e8655c4b76..e570b6182b 100644 --- a/packages/core/scss/graphs/_treemap.scss +++ b/packages/core/scss/graphs/_treemap.scss @@ -1,4 +1,6 @@ -.#{$prefix}--#{$charts-prefix}--treemap { +@use '../globals'; + +.#{globals.$prefix}--#{globals.$charts-prefix}--treemap { text { pointer-events: none; } diff --git a/packages/core/scss/graphs/_wordcloud.scss b/packages/core/scss/graphs/_wordcloud.scss index 3823b95fdf..f7de4a6031 100644 --- a/packages/core/scss/graphs/_wordcloud.scss +++ b/packages/core/scss/graphs/_wordcloud.scss @@ -1,4 +1,6 @@ -.#{$prefix}--#{$charts-prefix}--wordcloud { +@use '../globals'; + +.#{globals.$prefix}--#{globals.$charts-prefix}--wordcloud { text.word { &.light { // TODO-V11 diff --git a/packages/core/scss/graphs/index.scss b/packages/core/scss/graphs/index.scss index 95a4afa3e1..b85663535e 100644 --- a/packages/core/scss/graphs/index.scss +++ b/packages/core/scss/graphs/index.scss @@ -1,19 +1,19 @@ -@import './area'; -@import './bubble'; -@import './bullet'; -@import './donut'; -@import './line'; -@import './scatter'; -@import './meter'; -@import './scatter-stacked'; -@import './radar'; -@import './tree'; -@import './treemap'; -@import './gauge'; -@import './pie'; -@import './lollipop'; -@import './circle-pack'; -@import './wordcloud'; -@import './alluvial'; -@import './heatmap'; -@import './choropleth'; +@use 'alluvial'; +@use 'area'; +@use 'bubble'; +@use 'bullet'; +@use 'choropleth'; +@use 'circle-pack'; +@use 'donut'; +@use 'gauge'; +@use 'heatmap'; +@use 'line'; +@use 'lollipop'; +@use 'meter'; +@use 'pie'; +@use 'radar'; +@use 'scatter'; +@use 'scatter-stacked'; +@use 'tree'; +@use 'treemap'; +@use 'wordcloud'; diff --git a/packages/core/scss/index.scss b/packages/core/scss/index.scss index 939a77aa1f..7e14452987 100644 --- a/packages/core/scss/index.scss +++ b/packages/core/scss/index.scss @@ -1,31 +1,10 @@ -$charts-prefix: 'cc'; - -// Variables picked up by @carbon/styles/scss/config in imports -$prefix: 'cds'; // Default value -$css--body: false; // Do not emit styles for body element -$css--default-type: false; // Do not include default type -$css--font-face: false; // Do not include font face mixins from scss/fonts -$css--reset: false; // Do not include reset CSS - -// Custom charting tokens -@use '@carbon/styles/scss/theme' as theme; -@import 'tokens'; -@include theme.add-component-tokens($custom-charting-tokens); -@import '@carbon/styles/scss/components/button/tokens'; - -@mixin default_transition { // used by ./colors - transition: all 0.1s ease-out; -} -@import '@carbon/colors'; -@import 'colors'; // mixins, color palette, color maps, tooltip and legend color settings - -@import '@carbon/import-once/scss'; // exports mixin -@import 'components'; // use exports mixin to ensure component modules only loaded once - -@import 'graphs'; // chart-specific -@import 'type'; // font size, fill, color, weight (but not family) -@import 'chart-holder'; // container settings - -.#{$prefix}--#{$charts-prefix}--chart-wrapper { - overflow: visible; -} +@use 'colors'; +@use 'tokens'; +@use 'components'; +@use 'graphs'; +@use 'type'; +@use 'chart-holder'; +@use 'chart-wrapper'; + +@use '@carbon/styles/scss/theme'; +@include theme.add-component-tokens(tokens.$custom-charting-tokens); diff --git a/packages/core/src/demo/utils/package-versions.ts b/packages/core/src/demo/utils/package-versions.ts index b692762bea..e26ba7c2a1 100644 --- a/packages/core/src/demo/utils/package-versions.ts +++ b/packages/core/src/demo/utils/package-versions.ts @@ -6,14 +6,12 @@ import vue from '@/../../vue/package.json' export const version = { carbonCharts: core.version as string, - carbonStyles: core.devDependencies['@carbon/styles'] as string, d3: core.dependencies['d3'] as string, d3Cloud: core.dependencies['d3-cloud'] as string, d3Sankey: core.dependencies['d3-sankey'] as string, angular: angular.dependencies['@angular/core'] as string, react: react.dependencies['react'] as string, rxjs: angular.dependencies['rxjs'] as string, - sass: core.devDependencies['sass'] as string, svelteVite: '^2.4.2' as string, svelteTsConfig: '^5.0.0' as string, svelte: svelte.devDependencies['svelte'] as string, diff --git a/packages/core/src/demo/utils/stackblitz/angular.ts b/packages/core/src/demo/utils/stackblitz/angular.ts index 4fbe926afa..a5f4a17883 100644 --- a/packages/core/src/demo/utils/stackblitz/angular.ts +++ b/packages/core/src/demo/utils/stackblitz/angular.ts @@ -12,12 +12,10 @@ export function buildAngularExample(demo: Demo): Project { '@angular/platform-browser': version.angular, '@carbon/charts': version.carbonCharts, '@carbon/charts-angular': version.carbonCharts, - '@carbon/styles': version.carbonStyles, d3: version.d3, 'd3-cloud': version.d3Cloud, 'd3-sankey': version.d3Sankey, rxjs: version.rxjs, - sass: version.sass, tslib: version.tslib, 'zone.js': version.zoneJs } @@ -69,9 +67,8 @@ export class App { bootstrapApplication(App) ` - const stylesCss = `@import '@carbon/styles/css/styles.css'; -@import '@carbon/charts/styles.css'; -` + const stylesCss = `@import '@carbon/charts/styles.css'; + ` const angularJson = `{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", diff --git a/packages/core/src/demo/utils/stackblitz/react.ts b/packages/core/src/demo/utils/stackblitz/react.ts index afef6afd7f..41bd9cd435 100644 --- a/packages/core/src/demo/utils/stackblitz/react.ts +++ b/packages/core/src/demo/utils/stackblitz/react.ts @@ -7,13 +7,11 @@ export function buildReactExample(demo: Demo): Project { const dependencies: Record = { '@carbon/charts-react': version.carbonCharts, - '@carbon/styles': version.carbonStyles, d3: version.d3, 'd3-cloud': version.d3Cloud, 'd3-sankey': version.d3Sankey, 'react': version.react, - 'react-dom': version.react, - 'sass': version.sass + 'react-dom': version.react } const indexHtml = @@ -48,8 +46,6 @@ import ReactDOM from 'react-dom/client' import { ${demo.chartType.vanilla} } from '@carbon/charts-react' import data from './data.js' import options from './options.js' - -import '@carbon/styles/css/styles.css' import '@carbon/charts-react/styles.css' class App extends React.Component { diff --git a/packages/core/src/demo/utils/stackblitz/svelte.ts b/packages/core/src/demo/utils/stackblitz/svelte.ts index 35be07d4a1..b32d8c83bf 100644 --- a/packages/core/src/demo/utils/stackblitz/svelte.ts +++ b/packages/core/src/demo/utils/stackblitz/svelte.ts @@ -7,7 +7,6 @@ export function buildSvelteExample(demo: Demo): Project { const devDependencies: Record = { '@carbon/charts-svelte': version.carbonCharts, - '@carbon/styles': version.carbonStyles, '@sveltejs/vite-plugin-svelte': version.svelteVite, '@tsconfig/svelte': version.svelteTsConfig, d3: version.d3, @@ -36,7 +35,6 @@ export function buildSvelteExample(demo: Demo): Project { const appSvelte = `