@carbon/themes 11.0.0-rc.0 → 11.1.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/docs/sass.md +13 -17
  2. package/es/index.js +3 -3
  3. package/lib/index.js +2 -2
  4. package/package.json +7 -8
  5. package/scss/generated/_themes.scss +2 -2
  6. package/src/g10.js +2 -2
  7. package/src/white.js +2 -2
  8. package/umd/index.js +2 -2
package/docs/sass.md CHANGED
@@ -2,27 +2,23 @@
2
2
 
3
3
  > Sass documentation for `@carbon/themes`
4
4
 
5
- _Note: this documentation is used with the next version of `@carbon/themes`
6
- which uses Sass Modules. It will not work in the current stable version of this
7
- package_
8
-
9
5
  ## Usage
10
6
 
11
7
  There are several entrypoints that you can use with `@carbon/themes`, including:
12
8
 
13
- | Filename | Description |
14
- | -------------------------------------------- | ------------------------------------------------------ |
15
- | `@use '@carbon/themes';` | Package entrypoint |
16
- | `@use '@carbon/themes/scss/modules/config';` | Specify config options for the package |
17
- | `@use '@carbon/themes/scss/modules/themes';` | Theme definitions for white, g10, g90, and g100 |
18
- | `@use '@carbon/themes/scss/modules/theme';` | Set the current theme, get token values from the theme |
19
- | `@use '@carbon/themes/scss/modules/tokens';` | Access theme tokens |
20
- | `@use '@carbon/themes/scss/compat/themes';` | v10 Theme definitions for white, g10, g90, and g100 |
21
- | `@use '@carbon/themes/scss/compat/tokens';` | v10 theme tokens |
9
+ | Filename | Description |
10
+ | ------------------------------------------- | ------------------------------------------------------ |
11
+ | `@use '@carbon/themes';` | Package entrypoint |
12
+ | `@use '@carbon/themes/scss/config';` | Specify config options for the package |
13
+ | `@use '@carbon/themes/scss/themes';` | Theme definitions for white, g10, g90, and g100 |
14
+ | `@use '@carbon/themes/scss/theme';` | Set the current theme, get token values from the theme |
15
+ | `@use '@carbon/themes/scss/tokens';` | Access theme tokens |
16
+ | `@use '@carbon/themes/scss/compat/themes';` | v10 Theme definitions for white, g10, g90, and g100 |
17
+ | `@use '@carbon/themes/scss/compat/tokens';` | v10 theme tokens |
22
18
 
23
19
  _Note: the white, g10, g90, and g100 themes are only available in the
24
- `scss/modules/themes` file and are not re-exported in `@carbon/themes`. To learn
25
- more, checkout our [FAQ](#why-are-the-themes-not-exported-in-carbonthemes)._
20
+ `scss/themes` file and are not re-exported in `@carbon/themes`. To learn more,
21
+ checkout our [FAQ](#why-are-the-themes-not-exported-in-carbonthemes)._
26
22
 
27
23
  You can bring in `@carbon/themes` by using `@use`:
28
24
 
@@ -46,7 +42,7 @@ $custom-variable: rgba(themes.get('token-01'), 0.25);
46
42
  You can configure the current theme with the `$theme` option:
47
43
 
48
44
  ```scss
49
- @use '@carbon/themes/scss/modules/themes';
45
+ @use '@carbon/themes/scss/themes';
50
46
  @use '@carbon/themes' with (
51
47
  $theme: themes.$g100,
52
48
  );
@@ -55,7 +51,7 @@ You can configure the current theme with the `$theme` option:
55
51
  You can also extend the theme with your own custom tokens:
56
52
 
57
53
  ```scss
58
- @use '@carbon/themes/scss/modules/themes';
54
+ @use '@carbon/themes/scss/themes';
59
55
  @use '@carbon/themes' with (
60
56
  $fallback: themes.$g100,
61
57
  $theme: (
package/es/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { white as white$2, gray80, blue60, gray50, gray80Hover, gray10, gray30, gray10Hover, gray20, gray20Hover, whiteHover, gray100, gray40, gray70, gray60, red60, blue70, blue40, purple60, blue30, green50, yellow30, red50, green40, blue50, orange40, blue20, gray90, gray70Hover, gray60Hover, gray50Hover, red30, purple40, red40, purple50, gray90Hover, rgba, black, blue80, green60, red80 } from '@carbon/colors';
1
+ import { white as white$2, gray80, blue60, gray50, gray80Hover, gray10, gray30, gray10Hover, gray20, gray20Hover, whiteHover, gray100, gray40, gray70, gray60, red60, blue70, blue40, purple60, blue30, green60, yellow30, red50, green40, blue50, orange40, blue20, gray90, gray70Hover, gray60Hover, gray50Hover, red30, purple40, red40, green50, purple50, gray90Hover, rgba, black, blue80, red80 } from '@carbon/colors';
2
2
  import Color from 'color';
3
3
  import { caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04, legal01, legal02, bodyCompact01, bodyCompact02, body01, body02, headingCompact01, headingCompact02, heading03, heading04, heading05, heading06, heading07, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04, unstable_tokens } from '@carbon/type';
4
4
  export { bodyLong01, bodyLong02, bodyShort01, bodyShort02, caption01, caption02, code01, code02, display01, display02, display03, display04, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, heading01, heading02, helperText01, helperText02, label01, label02, productiveHeading01, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, quotation01, quotation02 } from '@carbon/type';
@@ -183,7 +183,7 @@ var iconOnColorDisabled$7 = gray50;
183
183
  var iconDisabled$7 = adjustAlpha(iconPrimary$7, 0.25); // Support
184
184
 
185
185
  var supportError$7 = red60;
186
- var supportSuccess$7 = green50;
186
+ var supportSuccess$7 = green60;
187
187
  var supportWarning$7 = yellow30;
188
188
  var supportInfo$7 = blue70;
189
189
  var supportErrorInverse$7 = red50;
@@ -479,7 +479,7 @@ var iconOnColorDisabled$6 = gray50;
479
479
  var iconDisabled$6 = adjustAlpha(iconPrimary$6, 0.25); // Support
480
480
 
481
481
  var supportError$6 = red60;
482
- var supportSuccess$6 = green50;
482
+ var supportSuccess$6 = green60;
483
483
  var supportWarning$6 = yellow30;
484
484
  var supportInfo$6 = blue70;
485
485
  var supportErrorInverse$6 = red50;
package/lib/index.js CHANGED
@@ -189,7 +189,7 @@ var iconOnColorDisabled$7 = colors$1.gray50;
189
189
  var iconDisabled$7 = adjustAlpha(iconPrimary$7, 0.25); // Support
190
190
 
191
191
  var supportError$7 = colors$1.red60;
192
- var supportSuccess$7 = colors$1.green50;
192
+ var supportSuccess$7 = colors$1.green60;
193
193
  var supportWarning$7 = colors$1.yellow30;
194
194
  var supportInfo$7 = colors$1.blue70;
195
195
  var supportErrorInverse$7 = colors$1.red50;
@@ -485,7 +485,7 @@ var iconOnColorDisabled$6 = colors$1.gray50;
485
485
  var iconDisabled$6 = adjustAlpha(iconPrimary$6, 0.25); // Support
486
486
 
487
487
  var supportError$6 = colors$1.red60;
488
- var supportSuccess$6 = colors$1.green50;
488
+ var supportSuccess$6 = colors$1.green60;
489
489
  var supportWarning$6 = colors$1.yellow30;
490
490
  var supportInfo$6 = colors$1.blue70;
491
491
  var supportErrorInverse$6 = colors$1.red50;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/themes",
3
3
  "description": "Themes for applying color in the Carbon Design System",
4
- "version": "11.0.0-rc.0",
4
+ "version": "11.1.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -29,25 +29,24 @@
29
29
  "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && babel-node --presets '@babel/preset-env' tasks/build.js && carbon-cli check \"scss/*.scss\""
30
30
  },
31
31
  "dependencies": {
32
- "@carbon/colors": "^11.0.0-rc.0",
33
- "@carbon/layout": "^11.0.0-rc.0",
34
- "@carbon/type": "^11.0.0-rc.0",
32
+ "@carbon/colors": "^11.1.0-rc.0",
33
+ "@carbon/layout": "^11.1.0-rc.0",
34
+ "@carbon/type": "^11.1.0-rc.0",
35
35
  "color": "^3.1.2"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@babel/node": "^7.16.7",
39
39
  "@babel/preset-env": "^7.16.7",
40
- "@carbon/cli": "^11.0.0-rc.0",
40
+ "@carbon/cli": "^11.0.0",
41
41
  "@carbon/cli-reporter": "^10.5.0",
42
42
  "@carbon/scss-generator": "^10.13.0",
43
- "@carbon/test-utils": "^10.22.0-rc.0",
43
+ "@carbon/test-utils": "^10.23.0-rc.0",
44
44
  "change-case": "^4.1.1",
45
45
  "core-js": "^3.16.0",
46
46
  "fs-extra": "^10.0.0",
47
47
  "js-yaml": "^3.13.0",
48
- "node-sass": "^7.0.1",
49
48
  "rimraf": "^3.0.0"
50
49
  },
51
50
  "sideEffects": false,
52
- "gitHead": "e4894776a4996c10bfc8f9a724532a25966aa622"
51
+ "gitHead": "8487e08b549acfed947b37fccd37ed38fe9b5aa6"
53
52
  }
package/scss/generated/_themes.scss CHANGED
@@ -94,7 +94,7 @@ $white: (
94
94
  support-error-inverse: #fa4d56,
95
95
  support-info: #0043ce,
96
96
  support-info-inverse: #4589ff,
97
- support-success: #24a148,
97
+ support-success: #198038,
98
98
  support-success-inverse: #42be65,
99
99
  support-warning: #f1c21b,
100
100
  support-warning-inverse: #f1c21b,
@@ -199,7 +199,7 @@ $g10: (
199
199
  support-error-inverse: #fa4d56,
200
200
  support-info: #0043ce,
201
201
  support-info-inverse: #4589ff,
202
- support-success: #24a148,
202
+ support-success: #198038,
203
203
  support-success-inverse: #42be65,
204
204
  support-warning: #f1c21b,
205
205
  support-warning-inverse: #f1c21b,
package/src/g10.js CHANGED
@@ -30,7 +30,7 @@ import {
30
30
  // Support
31
31
  blue50,
32
32
  green40,
33
- green50,
33
+ green60,
34
34
  yellow30,
35
35
  orange40,
36
36
  red50,
@@ -167,7 +167,7 @@ export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
167
167
 
168
168
  // Support
169
169
  export const supportError = red60;
170
- export const supportSuccess = green50;
170
+ export const supportSuccess = green60;
171
171
  export const supportWarning = yellow30;
172
172
  export const supportInfo = blue70;
173
173
  export const supportErrorInverse = red50;
package/src/white.js CHANGED
@@ -28,7 +28,7 @@ import {
28
28
  // Support
29
29
  blue50,
30
30
  green40,
31
- green50,
31
+ green60,
32
32
  yellow30,
33
33
  orange40,
34
34
  red50,
@@ -167,7 +167,7 @@ export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
167
167
 
168
168
  // Support
169
169
  export const supportError = red60;
170
- export const supportSuccess = green50;
170
+ export const supportSuccess = green60;
171
171
  export const supportWarning = yellow30;
172
172
  export const supportInfo = blue70;
173
173
  export const supportErrorInverse = red50;
package/umd/index.js CHANGED
@@ -186,7 +186,7 @@
186
186
  var iconDisabled$7 = adjustAlpha(iconPrimary$7, 0.25); // Support
187
187
 
188
188
  var supportError$7 = colors$1.red60;
189
- var supportSuccess$7 = colors$1.green50;
189
+ var supportSuccess$7 = colors$1.green60;
190
190
  var supportWarning$7 = colors$1.yellow30;
191
191
  var supportInfo$7 = colors$1.blue70;
192
192
  var supportErrorInverse$7 = colors$1.red50;
@@ -482,7 +482,7 @@
482
482
  var iconDisabled$6 = adjustAlpha(iconPrimary$6, 0.25); // Support
483
483
 
484
484
  var supportError$6 = colors$1.red60;
485
- var supportSuccess$6 = colors$1.green50;
485
+ var supportSuccess$6 = colors$1.green60;
486
486
  var supportWarning$6 = colors$1.yellow30;
487
487
  var supportInfo$6 = colors$1.blue70;
488
488
  var supportErrorInverse$6 = colors$1.red50;