@carbon/themes 10.50.0 → 10.52.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 (9) hide show
  1. package/docs/sass.md +110 -15
  2. package/package.json +6 -6
  3. package/scss/modules/generated/_themes.scss +8 -0
  4. package/scss/modules/generated/_tokens.scss +8 -2
  5. package/src/next/g10.js +3 -0
  6. package/src/next/g100.js +2 -0
  7. package/src/next/g90.js +2 -0
  8. package/src/next/tokens/v11TokenGroup.js +3 -1
  9. package/src/next/white.js +3 -0
package/docs/sass.md CHANGED
@@ -1,21 +1,11 @@
1
1
  # `@carbon/themes`
2
2
 
3
+ > Sass documentation for `@carbon/themes`
4
+
3
5
  _Note: this documentation is used with the next version of `@carbon/themes`
4
6
  which uses Sass Modules. It will not work in the current stable version of this
5
7
  package_
6
8
 
7
- <!-- prettier-ignore-start -->
8
- <!-- START doctoc generated TOC please keep comment here to allow auto update -->
9
- <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
10
- ## Table of Contents
11
-
12
- - [Usage](#usage)
13
- - [FAQ](#faq)
14
- - [Why are the themes not exported in `@carbon/themes`?](#why-are-the-themes-not-exported-in-carbonthemes)
15
-
16
- <!-- END doctoc generated TOC please keep comment here to allow auto update -->
17
- <!-- prettier-ignore-end -->
18
-
19
9
  ## Usage
20
10
 
21
11
  There are several entrypoints that you can use with `@carbon/themes`, including:
@@ -74,9 +64,114 @@ You can also extend the theme with your own custom tokens:
74
64
  );
75
65
  ```
76
66
 
77
- ## Tokens
78
-
79
- TODO
67
+ ## API
68
+
69
+ | Import | Export | Description | !default |
70
+ | :--------------------------- | :--------------------------- | :------------------------------------------------------------------------------------ | :------- |
71
+ | `@carbon/themes/scss/themes` | | | |
72
+ | | `$white` | | ✅ |
73
+ | | `$g10` | | ✅ |
74
+ | | `$g90` | | ✅ |
75
+ | | `$g100` | | ✅ |
76
+ | `@carbon/themes` | | The default entrypoint which re-exports values from all other modules in this package | |
77
+ | | `$fallback` | | ✅ |
78
+ | | `$theme` | | ✅ |
79
+ | | `$background` | | ✅ |
80
+ | | `$background-active` | | ✅ |
81
+ | | `$background-selected` | | ✅ |
82
+ | | `$background-selected-hover` | | ✅ |
83
+ | | `$background-hover` | | ✅ |
84
+ | | `$background-brand` | | ✅ |
85
+ | | `$background-inverse` | | ✅ |
86
+ | | `$background-inverse-hover` | | ✅ |
87
+ | | `$layer-01` | | ✅ |
88
+ | | `$layer-active-01` | | ✅ |
89
+ | | `$layer-hover-01` | | ✅ |
90
+ | | `$layer-selected-01` | | ✅ |
91
+ | | `$layer-selected-hover-01` | | ✅ |
92
+ | | `$layer-02` | | ✅ |
93
+ | | `$layer-active-02` | | ✅ |
94
+ | | `$layer-hover-02` | | ✅ |
95
+ | | `$layer-selected-02` | | ✅ |
96
+ | | `$layer-selected-hover-02` | | ✅ |
97
+ | | `$layer-03` | | ✅ |
98
+ | | `$layer-active-03` | | ✅ |
99
+ | | `$layer-hover-03` | | ✅ |
100
+ | | `$layer-selected-03` | | ✅ |
101
+ | | `$layer-selected-hover-03` | | ✅ |
102
+ | | `$layer-selected-inverse` | | ✅ |
103
+ | | `$layer-selected-disabled` | | ✅ |
104
+ | | `$layer-accent-01` | | ✅ |
105
+ | | `$layer-accent-active-01` | | ✅ |
106
+ | | `$layer-accent-hover-01` | | ✅ |
107
+ | | `$layer-accent-02` | | ✅ |
108
+ | | `$layer-accent-active-02` | | ✅ |
109
+ | | `$layer-accent-hover-02` | | ✅ |
110
+ | | `$layer-accent-03` | | ✅ |
111
+ | | `$layer-accent-active-03` | | ✅ |
112
+ | | `$layer-accent-hover-03` | | ✅ |
113
+ | | `$field-01` | | ✅ |
114
+ | | `$field-hover-01` | | ✅ |
115
+ | | `$field-02` | | ✅ |
116
+ | | `$field-hover-02` | | ✅ |
117
+ | | `$field-03` | | ✅ |
118
+ | | `$field-hover-03` | | ✅ |
119
+ | | `$interactive` | | ✅ |
120
+ | | `$border-subtle-00` | | ✅ |
121
+ | | `$border-subtle-01` | | ✅ |
122
+ | | `$border-subtle-selected-01` | | ✅ |
123
+ | | `$border-subtle-02` | | ✅ |
124
+ | | `$border-subtle-selected-02` | | ✅ |
125
+ | | `$border-subtle-03` | | ✅ |
126
+ | | `$border-subtle-selected-03` | | ✅ |
127
+ | | `$border-strong-01` | | ✅ |
128
+ | | `$border-strong-02` | | ✅ |
129
+ | | `$border-strong-03` | | ✅ |
130
+ | | `$border-inverse` | | ✅ |
131
+ | | `$border-interactive` | | ✅ |
132
+ | | `$border-disabled` | | ✅ |
133
+ | | `$text-primary` | | ✅ |
134
+ | | `$text-secondary` | | ✅ |
135
+ | | `$text-placeholder` | | ✅ |
136
+ | | `$text-helper` | | ✅ |
137
+ | | `$text-error` | | ✅ |
138
+ | | `$text-inverse` | | ✅ |
139
+ | | `$text-on-color` | | ✅ |
140
+ | | `$text-on-color-disabled` | | ✅ |
141
+ | | `$text-disabled` | | ✅ |
142
+ | | `$link-primary` | | ✅ |
143
+ | | `$link-primary-hover` | | ✅ |
144
+ | | `$link-secondary` | | ✅ |
145
+ | | `$link-inverse` | | ✅ |
146
+ | | `$link-visited` | | ✅ |
147
+ | | `$icon-primary` | | ✅ |
148
+ | | `$icon-secondary` | | ✅ |
149
+ | | `$icon-inverse` | | ✅ |
150
+ | | `$icon-on-color` | | ✅ |
151
+ | | `$icon-on-color-disabled` | | ✅ |
152
+ | | `$icon-disabled` | | ✅ |
153
+ | | `$support-error` | | ✅ |
154
+ | | `$support-success` | | ✅ |
155
+ | | `$support-warning` | | ✅ |
156
+ | | `$support-info` | | ✅ |
157
+ | | `$support-error-inverse` | | ✅ |
158
+ | | `$support-success-inverse` | | ✅ |
159
+ | | `$support-warning-inverse` | | ✅ |
160
+ | | `$support-info-inverse` | | ✅ |
161
+ | | `$support-caution-major` | | ✅ |
162
+ | | `$support-caution-minor` | | ✅ |
163
+ | | `$support-caution-undefined` | | ✅ |
164
+ | | `$highlight` | | ✅ |
165
+ | | `$overlay` | | ✅ |
166
+ | | `$toggle-off` | | ✅ |
167
+ | | `$shadow` | | ✅ |
168
+ | | `$focus` | | ✅ |
169
+ | | `$focus-inset` | | ✅ |
170
+ | | `$focus-inverse` | | ✅ |
171
+ | | `$skeleton-background` | | ✅ |
172
+ | | `$skeleton-element` | | ✅ |
173
+
174
+ ### Configuration
80
175
 
81
176
  ## FAQ
82
177
 
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": "10.50.0",
4
+ "version": "10.52.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -29,15 +29,15 @@
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": "^10.35.0",
33
- "@carbon/layout": "^10.35.0",
34
- "@carbon/type": "^10.40.0",
32
+ "@carbon/colors": "^10.37.0-rc.0",
33
+ "@carbon/layout": "^10.37.0-rc.0",
34
+ "@carbon/type": "^10.42.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": "^10.32.0",
40
+ "@carbon/cli": "^10.34.0-rc.0",
41
41
  "@carbon/cli-reporter": "^10.5.0",
42
42
  "@carbon/scss-generator": "^10.13.0",
43
43
  "@carbon/test-utils": "^10.21.0",
@@ -49,5 +49,5 @@
49
49
  "rimraf": "^3.0.0"
50
50
  },
51
51
  "sideEffects": false,
52
- "gitHead": "e76c42ab78cbee043db643597b7b5d79bd387c9b"
52
+ "gitHead": "e41618f5aaa9a10ce93edd844f1a280dc29eaf50"
53
53
  }
package/scss/modules/generated/_themes.scss CHANGED
@@ -77,6 +77,8 @@ $white: (
77
77
  layer-selected-hover-03: #d1d1d1,
78
78
  layer-selected-inverse: #161616,
79
79
  link-inverse: #78a9ff,
80
+ link-inverse-active: #f4f4f4,
81
+ link-inverse-hover: #a6c8ff,
80
82
  link-primary: #0f62fe,
81
83
  link-primary-hover: #0043ce,
82
84
  link-secondary: #0043ce,
@@ -180,6 +182,8 @@ $g10: (
180
182
  layer-selected-hover-03: #d1d1d1,
181
183
  layer-selected-inverse: #161616,
182
184
  link-inverse: #78a9ff,
185
+ link-inverse-active: #f4f4f4,
186
+ link-inverse-hover: #a6c8ff,
183
187
  link-primary: #0f62fe,
184
188
  link-primary-hover: #0043ce,
185
189
  link-secondary: #0043ce,
@@ -283,6 +287,8 @@ $g90: (
283
287
  layer-selected-hover-03: #7a7a7a,
284
288
  layer-selected-inverse: #f4f4f4,
285
289
  link-inverse: #0f62fe,
290
+ link-inverse-active: #161616,
291
+ link-inverse-hover: #0043ce,
286
292
  link-primary: #78a9ff,
287
293
  link-primary-hover: #a6c8ff,
288
294
  link-secondary: #a6c8ff,
@@ -386,6 +392,8 @@ $g100: (
386
392
  layer-selected-hover-03: #5e5e5e,
387
393
  layer-selected-inverse: #f4f4f4,
388
394
  link-inverse: #0f62fe,
395
+ link-inverse-active: #161616,
396
+ link-inverse-hover: #0043ce,
389
397
  link-primary: #78a9ff,
390
398
  link-primary-hover: #a6c8ff,
391
399
  link-secondary: #a6c8ff,
package/scss/modules/generated/_tokens.scss CHANGED
@@ -217,11 +217,17 @@ $link-primary-hover: _get('link-primary-hover') !default;
217
217
  /// The CSS Custom Property for the `link-secondary` token
218
218
  $link-secondary: _get('link-secondary') !default;
219
219
 
220
+ /// The CSS Custom Property for the `link-visited` token
221
+ $link-visited: _get('link-visited') !default;
222
+
220
223
  /// The CSS Custom Property for the `link-inverse` token
221
224
  $link-inverse: _get('link-inverse') !default;
222
225
 
223
- /// The CSS Custom Property for the `link-visited` token
224
- $link-visited: _get('link-visited') !default;
226
+ /// The CSS Custom Property for the `link-inverse-active` token
227
+ $link-inverse-active: _get('link-inverse-active') !default;
228
+
229
+ /// The CSS Custom Property for the `link-inverse-hover` token
230
+ $link-inverse-hover: _get('link-inverse-hover') !default;
225
231
 
226
232
  /// The CSS Custom Property for the `icon-primary` token
227
233
  $icon-primary: _get('icon-primary') !default;
package/src/next/g10.js CHANGED
@@ -8,6 +8,7 @@
8
8
  import {
9
9
  // Blue
10
10
  blue20,
11
+ blue30,
11
12
  blue40,
12
13
  blue60,
13
14
  blue70,
@@ -153,6 +154,8 @@ export const linkPrimaryHover = blue70;
153
154
  export const linkSecondary = blue70;
154
155
  export const linkInverse = blue40;
155
156
  export const linkVisited = purple60;
157
+ export const linkInverseActive = gray10;
158
+ export const linkInverseHover = blue30;
156
159
 
157
160
  // Icon
158
161
  export const iconPrimary = gray100;
package/src/next/g100.js CHANGED
@@ -162,6 +162,8 @@ export const linkPrimaryHover = blue30;
162
162
  export const linkSecondary = blue30;
163
163
  export const linkInverse = blue60;
164
164
  export const linkVisited = purple40;
165
+ export const linkInverseActive = gray100;
166
+ export const linkInverseHover = blue70;
165
167
 
166
168
  // Icon
167
169
  export const iconPrimary = gray10;
package/src/next/g90.js CHANGED
@@ -161,6 +161,8 @@ export const linkPrimaryHover = blue30;
161
161
  export const linkSecondary = blue30;
162
162
  export const linkInverse = blue60;
163
163
  export const linkVisited = purple40;
164
+ export const linkInverseActive = gray100;
165
+ export const linkInverseHover = blue70;
164
166
 
165
167
  // Icon
166
168
  export const iconPrimary = gray10;
package/src/next/tokens/v11TokenGroup.js CHANGED
@@ -253,11 +253,13 @@ export const link = TokenGroup.create({
253
253
  name: 'link-primary-hover',
254
254
  },
255
255
  'link-secondary',
256
- 'link-inverse',
257
256
  {
258
257
  state: 'visited',
259
258
  name: 'link-visited',
260
259
  },
260
+ 'link-inverse',
261
+ 'link-inverse-active',
262
+ 'link-inverse-hover',
261
263
  ],
262
264
  });
263
265
 
package/src/next/white.js CHANGED
@@ -8,6 +8,7 @@
8
8
  import {
9
9
  // Blue
10
10
  blue20,
11
+ blue30,
11
12
  blue40,
12
13
  blue60,
13
14
  blue70,
@@ -153,6 +154,8 @@ export const linkPrimaryHover = blue70;
153
154
  export const linkSecondary = blue70;
154
155
  export const linkInverse = blue40;
155
156
  export const linkVisited = purple60;
157
+ export const linkInverseActive = gray10;
158
+ export const linkInverseHover = blue30;
156
159
 
157
160
  // Icon
158
161
  export const iconPrimary = gray100;