@carbon/themes 12.0.0-alpha.1 → 12.0.0-alpha.2

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 (75) hide show
  1. package/es/index.js +5572 -0
  2. package/lib/__tests__/themes-test.d.ts +1 -0
  3. package/lib/__tests__/tools-test.d.ts +1 -0
  4. package/lib/tokens/__tests__/Token-test.d.ts +1 -0
  5. package/lib/tokens/__tests__/TokenFormat-test.d.ts +1 -0
  6. package/lib/tokens/__tests__/TokenGroup-test.d.ts +1 -0
  7. package/lib/tokens/__tests__/TokenSet-test.d.ts +1 -0
  8. package/lib/tokens/__tests__/metadata-test.d.ts +1 -0
  9. package/lib/tokens/__tests__/v11-test.d.ts +1 -0
  10. package/lib/v10/__tests__/themes-test.d.ts +1 -0
  11. package/lib/v10/__tests__/tokens-test.d.ts +1 -0
  12. package/package.json +12 -4
  13. package/umd/index.js +6322 -0
  14. package/docs/sass.md +0 -189
  15. package/js/generated/component-tokens/button.d.ts +0 -98
  16. package/js/generated/component-tokens/button.js +0 -98
  17. package/js/generated/component-tokens/content-switcher.d.ts +0 -25
  18. package/js/generated/component-tokens/content-switcher.js +0 -25
  19. package/js/generated/component-tokens/notification.d.ts +0 -65
  20. package/js/generated/component-tokens/notification.js +0 -65
  21. package/js/generated/component-tokens/status.d.ts +0 -63
  22. package/js/generated/component-tokens/status.js +0 -63
  23. package/js/generated/component-tokens/tag.d.ts +0 -247
  24. package/js/generated/component-tokens/tag.js +0 -247
  25. package/js/generated/themes/g10.d.ts +0 -242
  26. package/js/generated/themes/g10.js +0 -242
  27. package/js/generated/themes/g100.d.ts +0 -242
  28. package/js/generated/themes/g100.js +0 -242
  29. package/js/generated/themes/g90.d.ts +0 -242
  30. package/js/generated/themes/g90.js +0 -242
  31. package/js/generated/themes/white.d.ts +0 -242
  32. package/js/generated/themes/white.js +0 -242
  33. package/src/dtcg/README.md +0 -336
  34. package/src/dtcg/color-palette.json +0 -4424
  35. package/src/dtcg/components/button.json +0 -193
  36. package/src/dtcg/components/content-switcher.json +0 -60
  37. package/src/dtcg/components/notification.json +0 -130
  38. package/src/dtcg/components/status.json +0 -122
  39. package/src/dtcg/components/tag.json +0 -486
  40. package/src/dtcg/themes.json +0 -3356
  41. package/src/index.ts +0 -129
  42. package/src/tokens/Token.ts +0 -41
  43. package/src/tokens/TokenFormat.ts +0 -93
  44. package/src/tokens/TokenGroup.ts +0 -185
  45. package/src/tokens/TokenSet.ts +0 -91
  46. package/src/tokens/components.ts +0 -120
  47. package/src/tokens/index.ts +0 -59
  48. package/src/tokens/layout.ts +0 -39
  49. package/src/tokens/type.ts +0 -49
  50. package/src/tokens/types.ts +0 -28
  51. package/src/tokens/v10.ts +0 -188
  52. package/src/tokens/v11TokenGroup.ts +0 -546
  53. package/src/tokens/v11TokenSet.ts +0 -93
  54. package/src/tools.ts +0 -69
  55. package/src/v10/g10.ts +0 -349
  56. package/src/v10/g100.ts +0 -348
  57. package/src/v10/g90.ts +0 -350
  58. package/src/v10/index.ts +0 -22
  59. package/src/v10/metadata.yml +0 -217
  60. package/src/v10/tokens.ts +0 -397
  61. package/src/v10/white.ts +0 -352
  62. package/style-dictionary/formats/js-component-tokens.js +0 -128
  63. package/style-dictionary/formats/js-themes.js +0 -84
  64. package/style-dictionary/formats/scss-component-tokens.js +0 -149
  65. package/style-dictionary/formats/scss-themes.js +0 -127
  66. package/style-dictionary/formats/scss-tokens.js +0 -91
  67. package/style-dictionary/preprocessors/component-tokens.js +0 -172
  68. package/style-dictionary/preprocessors/dual-role.js +0 -157
  69. package/style-dictionary/preprocessors/theme-metadata.js +0 -46
  70. package/style-dictionary/sd.config.js +0 -449
  71. package/style-dictionary/transforms/alpha-modifier.js +0 -68
  72. package/style-dictionary/transforms/color-flatten.js +0 -79
  73. package/test-dtcg.scss +0 -28
  74. package/tsconfig.json +0 -8
  75. package/tsconfig.types.json +0 -10
package/docs/sass.md DELETED
@@ -1,189 +0,0 @@
1
- # `@carbon/themes`
2
-
3
- > Sass documentation for `@carbon/themes`
4
-
5
- ## Usage
6
-
7
- There are several entrypoints that you can use with `@carbon/themes`, including:
8
-
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 |
18
-
19
- _Note: the white, g10, g90, and g100 themes are only available in the
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)._
22
-
23
- You can bring in `@carbon/themes` by using `@use`:
24
-
25
- ```scss
26
- @use '@carbon/themes';
27
-
28
- .my-component {
29
- // Use tokens from the theme, this will map to a CSS Custom Property
30
- color: themes.$token-01;
31
- }
32
-
33
- :root {
34
- // Emit CSS Custom Properties for the current theme
35
- @include themes.theme();
36
- }
37
-
38
- // Get the value of a specific token
39
- $custom-variable: rgba(themes.get('token-01'), 0.25);
40
- ```
41
-
42
- You can configure the current theme with the `$theme` option:
43
-
44
- ```scss
45
- @use '@carbon/themes/scss/themes' as *;
46
- @use '@carbon/themes' with (
47
- $theme: $g100
48
- );
49
- ```
50
-
51
- You can also extend the theme with your own custom tokens:
52
-
53
- ```scss
54
- @use '@carbon/themes/scss/themes';
55
- @use '@carbon/themes' with (
56
- $fallback: themes.$g100,
57
- $theme: (
58
- token-01: #000000,
59
- )
60
- );
61
- ```
62
-
63
- ## API
64
-
65
- | Import | Export | Description | !default |
66
- | :--------------------------- | :--------------------------- | :------------------------------------------------------------------------------------ | :------- |
67
- | `@carbon/themes/scss/themes` | | | |
68
- | | `$white` | | ✅ |
69
- | | `$g10` | | ✅ |
70
- | | `$g90` | | ✅ |
71
- | | `$g100` | | ✅ |
72
- | `@carbon/themes` | | The default entrypoint which re-exports values from all other modules in this package | |
73
- | | `$fallback` | | ✅ |
74
- | | `$theme` | | ✅ |
75
- | | `$background` | | ✅ |
76
- | | `$background-active` | | ✅ |
77
- | | `$background-selected` | | ✅ |
78
- | | `$background-selected-hover` | | ✅ |
79
- | | `$background-hover` | | ✅ |
80
- | | `$background-brand` | | ✅ |
81
- | | `$background-inverse` | | ✅ |
82
- | | `$background-inverse-hover` | | ✅ |
83
- | | `$layer-01` | | ✅ |
84
- | | `$layer-active-01` | | ✅ |
85
- | | `$layer-hover-01` | | ✅ |
86
- | | `$layer-selected-01` | | ✅ |
87
- | | `$layer-selected-hover-01` | | ✅ |
88
- | | `$layer-02` | | ✅ |
89
- | | `$layer-active-02` | | ✅ |
90
- | | `$layer-hover-02` | | ✅ |
91
- | | `$layer-selected-02` | | ✅ |
92
- | | `$layer-selected-hover-02` | | ✅ |
93
- | | `$layer-03` | | ✅ |
94
- | | `$layer-active-03` | | ✅ |
95
- | | `$layer-hover-03` | | ✅ |
96
- | | `$layer-selected-03` | | ✅ |
97
- | | `$layer-selected-hover-03` | | ✅ |
98
- | | `$layer-selected-inverse` | | ✅ |
99
- | | `$layer-selected-disabled` | | ✅ |
100
- | | `$layer-accent-01` | | ✅ |
101
- | | `$layer-accent-active-01` | | ✅ |
102
- | | `$layer-accent-hover-01` | | ✅ |
103
- | | `$layer-accent-02` | | ✅ |
104
- | | `$layer-accent-active-02` | | ✅ |
105
- | | `$layer-accent-hover-02` | | ✅ |
106
- | | `$layer-accent-03` | | ✅ |
107
- | | `$layer-accent-active-03` | | ✅ |
108
- | | `$layer-accent-hover-03` | | ✅ |
109
- | | `$field-01` | | ✅ |
110
- | | `$field-hover-01` | | ✅ |
111
- | | `$field-02` | | ✅ |
112
- | | `$field-hover-02` | | ✅ |
113
- | | `$field-03` | | ✅ |
114
- | | `$field-hover-03` | | ✅ |
115
- | | `$interactive` | | ✅ |
116
- | | `$border-subtle-00` | | ✅ |
117
- | | `$border-subtle-01` | | ✅ |
118
- | | `$border-subtle-selected-01` | | ✅ |
119
- | | `$border-subtle-02` | | ✅ |
120
- | | `$border-subtle-selected-02` | | ✅ |
121
- | | `$border-subtle-03` | | ✅ |
122
- | | `$border-subtle-selected-03` | | ✅ |
123
- | | `$border-strong-01` | | ✅ |
124
- | | `$border-strong-02` | | ✅ |
125
- | | `$border-strong-03` | | ✅ |
126
- | | `$border-inverse` | | ✅ |
127
- | | `$border-interactive` | | ✅ |
128
- | | `$border-disabled` | | ✅ |
129
- | | `$text-primary` | | ✅ |
130
- | | `$text-secondary` | | ✅ |
131
- | | `$text-placeholder` | | ✅ |
132
- | | `$text-helper` | | ✅ |
133
- | | `$text-error` | | ✅ |
134
- | | `$text-inverse` | | ✅ |
135
- | | `$text-on-color` | | ✅ |
136
- | | `$text-on-color-disabled` | | ✅ |
137
- | | `$text-disabled` | | ✅ |
138
- | | `$link-primary` | | ✅ |
139
- | | `$link-primary-hover` | | ✅ |
140
- | | `$link-secondary` | | ✅ |
141
- | | `$link-inverse` | | ✅ |
142
- | | `$link-visited` | | ✅ |
143
- | | `$icon-primary` | | ✅ |
144
- | | `$icon-secondary` | | ✅ |
145
- | | `$icon-inverse` | | ✅ |
146
- | | `$icon-on-color` | | ✅ |
147
- | | `$icon-on-color-disabled` | | ✅ |
148
- | | `$icon-disabled` | | ✅ |
149
- | | `$support-error` | | ✅ |
150
- | | `$support-success` | | ✅ |
151
- | | `$support-warning` | | ✅ |
152
- | | `$support-info` | | ✅ |
153
- | | `$support-error-inverse` | | ✅ |
154
- | | `$support-success-inverse` | | ✅ |
155
- | | `$support-warning-inverse` | | ✅ |
156
- | | `$support-info-inverse` | | ✅ |
157
- | | `$support-caution-major` | | ✅ |
158
- | | `$support-caution-minor` | | ✅ |
159
- | | `$support-caution-undefined` | | ✅ |
160
- | | `$highlight` | | ✅ |
161
- | | `$overlay` | | ✅ |
162
- | | `$toggle-off` | | ✅ |
163
- | | `$shadow` | | ✅ |
164
- | | `$focus` | | ✅ |
165
- | | `$focus-inset` | | ✅ |
166
- | | `$focus-inverse` | | ✅ |
167
- | | `$skeleton-background` | | ✅ |
168
- | | `$skeleton-element` | | ✅ |
169
-
170
- ### Configuration
171
-
172
- ## FAQ
173
-
174
- ### Why are the themes not exported in `@carbon/themes`?
175
-
176
- In order to support `@use '@carbon/themes' with` in Sass Modules, unfortunately
177
- we cannot re-export the themes available in `scss/modules/themes`. If we
178
- implemented the entrypoint at `@carbon/themes` to re-export that module, then
179
- Sass would not compile when doing the following:
180
-
181
- ```scss
182
- @use '@carbon/themes/scss/modules/themes';
183
- @use '@carbon/themes' with (
184
- $theme: themes.$g100
185
- );
186
- ```
187
-
188
- This is because the `scss/modules/themes` file will have been initialized twice
189
- which is not allowed in the Sass Module system.
package/js/generated/component-tokens/button.d.ts DELETED
@@ -1,98 +0,0 @@
1
- // Code generated by @carbon/themes. DO NOT EDIT.
2
- //
3
- // Copyright IBM Corp. 2018, 2025
4
- //
5
- // This source code is licensed under the Apache-2.0 license found in the
6
- // LICENSE file in the root directory of this source tree.
7
-
8
- export declare const buttonDangerActive: {
9
- whiteTheme: string;
10
- g10: string;
11
- g90: string;
12
- g100: string;
13
- };
14
- export declare const buttonDangerHover: {
15
- whiteTheme: string;
16
- g10: string;
17
- g90: string;
18
- g100: string;
19
- };
20
- export declare const buttonDangerPrimary: {
21
- whiteTheme: string;
22
- g10: string;
23
- g90: string;
24
- g100: string;
25
- };
26
- export declare const buttonDangerSecondary: {
27
- whiteTheme: string;
28
- g10: string;
29
- g90: string;
30
- g100: string;
31
- };
32
- export declare const buttonDisabled: {
33
- whiteTheme: string;
34
- g10: string;
35
- g90: string;
36
- g100: string;
37
- };
38
- export declare const buttonPrimary: {
39
- whiteTheme: string;
40
- g10: string;
41
- g90: string;
42
- g100: string;
43
- };
44
- export declare const buttonPrimaryActive: {
45
- whiteTheme: string;
46
- g10: string;
47
- g90: string;
48
- g100: string;
49
- };
50
- export declare const buttonPrimaryHover: {
51
- whiteTheme: string;
52
- g10: string;
53
- g90: string;
54
- g100: string;
55
- };
56
- export declare const buttonSecondary: {
57
- whiteTheme: string;
58
- g10: string;
59
- g90: string;
60
- g100: string;
61
- };
62
- export declare const buttonSecondaryActive: {
63
- whiteTheme: string;
64
- g10: string;
65
- g90: string;
66
- g100: string;
67
- };
68
- export declare const buttonSecondaryHover: {
69
- whiteTheme: string;
70
- g10: string;
71
- g90: string;
72
- g100: string;
73
- };
74
- export declare const buttonSeparator: {
75
- fallback: string;
76
- whiteTheme: string;
77
- g10: string;
78
- g90: string;
79
- g100: string;
80
- };
81
- export declare const buttonTertiary: {
82
- whiteTheme: string;
83
- g10: string;
84
- g90: string;
85
- g100: string;
86
- };
87
- export declare const buttonTertiaryActive: {
88
- whiteTheme: string;
89
- g10: string;
90
- g90: string;
91
- g100: string;
92
- };
93
- export declare const buttonTertiaryHover: {
94
- whiteTheme: string;
95
- g10: string;
96
- g90: string;
97
- g100: string;
98
- };
package/js/generated/component-tokens/button.js DELETED
@@ -1,98 +0,0 @@
1
- // Code generated by @carbon/themes. DO NOT EDIT.
2
- //
3
- // Copyright IBM Corp. 2018, 2025
4
- //
5
- // This source code is licensed under the Apache-2.0 license found in the
6
- // LICENSE file in the root directory of this source tree.
7
-
8
- export const buttonDangerActive = {
9
- whiteTheme: '#750e13',
10
- g10: '#750e13',
11
- g90: '#750e13',
12
- g100: '#750e13',
13
- };
14
- export const buttonDangerHover = {
15
- whiteTheme: '#b81921',
16
- g10: '#b81921',
17
- g90: '#b81921',
18
- g100: '#b81921',
19
- };
20
- export const buttonDangerPrimary = {
21
- whiteTheme: '#da1e28',
22
- g10: '#da1e28',
23
- g90: '#da1e28',
24
- g100: '#da1e28',
25
- };
26
- export const buttonDangerSecondary = {
27
- whiteTheme: '#da1e28',
28
- g10: '#da1e28',
29
- g90: '#ff8389',
30
- g100: '#fa4d56',
31
- };
32
- export const buttonDisabled = {
33
- whiteTheme: '#c6c6c6',
34
- g10: '#c6c6c6',
35
- g90: 'rgba(141, 141, 141, 0.3)',
36
- g100: 'rgba(141, 141, 141, 0.3)',
37
- };
38
- export const buttonPrimary = {
39
- whiteTheme: '#0f62fe',
40
- g10: '#0f62fe',
41
- g90: '#0f62fe',
42
- g100: '#0f62fe',
43
- };
44
- export const buttonPrimaryActive = {
45
- whiteTheme: '#002d9c',
46
- g10: '#002d9c',
47
- g90: '#002d9c',
48
- g100: '#002d9c',
49
- };
50
- export const buttonPrimaryHover = {
51
- whiteTheme: '#0050e6',
52
- g10: '#0050e6',
53
- g90: '#0050e6',
54
- g100: '#0050e6',
55
- };
56
- export const buttonSecondary = {
57
- whiteTheme: '#393939',
58
- g10: '#393939',
59
- g90: '#6f6f6f',
60
- g100: '#6f6f6f',
61
- };
62
- export const buttonSecondaryActive = {
63
- whiteTheme: '#6f6f6f',
64
- g10: '#6f6f6f',
65
- g90: '#393939',
66
- g100: '#393939',
67
- };
68
- export const buttonSecondaryHover = {
69
- whiteTheme: '#474747',
70
- g10: '#474747',
71
- g90: '#5e5e5e',
72
- g100: '#5e5e5e',
73
- };
74
- export const buttonSeparator = {
75
- fallback: '#e0e0e0',
76
- whiteTheme: '#e0e0e0',
77
- g10: '#e0e0e0',
78
- g90: '#161616',
79
- g100: '#161616',
80
- };
81
- export const buttonTertiary = {
82
- whiteTheme: '#0f62fe',
83
- g10: '#0f62fe',
84
- g90: '#ffffff',
85
- g100: '#ffffff',
86
- };
87
- export const buttonTertiaryActive = {
88
- whiteTheme: '#002d9c',
89
- g10: '#002d9c',
90
- g90: '#c6c6c6',
91
- g100: '#c6c6c6',
92
- };
93
- export const buttonTertiaryHover = {
94
- whiteTheme: '#0050e6',
95
- g10: '#0050e6',
96
- g90: '#f4f4f4',
97
- g100: '#f4f4f4',
98
- };
package/js/generated/component-tokens/content-switcher.d.ts DELETED
@@ -1,25 +0,0 @@
1
- // Code generated by @carbon/themes. DO NOT EDIT.
2
- //
3
- // Copyright IBM Corp. 2018, 2025
4
- //
5
- // This source code is licensed under the Apache-2.0 license found in the
6
- // LICENSE file in the root directory of this source tree.
7
-
8
- export declare const contentSwitcherBackground: {
9
- whiteTheme: string;
10
- g10: string;
11
- g90: string;
12
- g100: string;
13
- };
14
- export declare const contentSwitcherBackgroundHover: {
15
- whiteTheme: string;
16
- g10: string;
17
- g90: string;
18
- g100: string;
19
- };
20
- export declare const contentSwitcherSelected: {
21
- whiteTheme: string;
22
- g10: string;
23
- g90: string;
24
- g100: string;
25
- };
package/js/generated/component-tokens/content-switcher.js DELETED
@@ -1,25 +0,0 @@
1
- // Code generated by @carbon/themes. DO NOT EDIT.
2
- //
3
- // Copyright IBM Corp. 2018, 2025
4
- //
5
- // This source code is licensed under the Apache-2.0 license found in the
6
- // LICENSE file in the root directory of this source tree.
7
-
8
- export const contentSwitcherBackground = {
9
- whiteTheme: '#e0e0e0',
10
- g10: '#e0e0e0',
11
- g90: 'rgba(0, 0, 0, 0)',
12
- g100: 'rgba(0, 0, 0, 0)',
13
- };
14
- export const contentSwitcherBackgroundHover = {
15
- whiteTheme: '#d1d1d1',
16
- g10: '#d1d1d1',
17
- g90: 'rgba(141, 141, 141, 0.12)',
18
- g100: 'rgba(141, 141, 141, 0.12)',
19
- };
20
- export const contentSwitcherSelected = {
21
- whiteTheme: '#ffffff',
22
- g10: '#ffffff',
23
- g90: 'rgba(141, 141, 141, 0.24)',
24
- g100: 'rgba(141, 141, 141, 0.24)',
25
- };
package/js/generated/component-tokens/notification.d.ts DELETED
@@ -1,65 +0,0 @@
1
- // Code generated by @carbon/themes. DO NOT EDIT.
2
- //
3
- // Copyright IBM Corp. 2018, 2025
4
- //
5
- // This source code is licensed under the Apache-2.0 license found in the
6
- // LICENSE file in the root directory of this source tree.
7
-
8
- export declare const notificationActionHover: {
9
- whiteTheme: string;
10
- g10: string;
11
- };
12
- export declare const notificationActionTertiaryInverse: {
13
- whiteTheme: string;
14
- g10: string;
15
- g90: string;
16
- g100: string;
17
- };
18
- export declare const notificationActionTertiaryInverseActive: {
19
- whiteTheme: string;
20
- g10: string;
21
- g90: string;
22
- g100: string;
23
- };
24
- export declare const notificationActionTertiaryInverseHover: {
25
- whiteTheme: string;
26
- g10: string;
27
- g90: string;
28
- g100: string;
29
- };
30
- export declare const notificationActionTertiaryInverseText: {
31
- whiteTheme: string;
32
- g10: string;
33
- g90: string;
34
- g100: string;
35
- };
36
- export declare const notificationActionTertiaryInverseTextOnColorDisabled: {
37
- whiteTheme: string;
38
- g10: string;
39
- g90: string;
40
- g100: string;
41
- };
42
- export declare const notificationBackgroundError: {
43
- whiteTheme: string;
44
- g10: string;
45
- g90: string;
46
- g100: string;
47
- };
48
- export declare const notificationBackgroundInfo: {
49
- whiteTheme: string;
50
- g10: string;
51
- g90: string;
52
- g100: string;
53
- };
54
- export declare const notificationBackgroundSuccess: {
55
- whiteTheme: string;
56
- g10: string;
57
- g90: string;
58
- g100: string;
59
- };
60
- export declare const notificationBackgroundWarning: {
61
- whiteTheme: string;
62
- g10: string;
63
- g90: string;
64
- g100: string;
65
- };
package/js/generated/component-tokens/notification.js DELETED
@@ -1,65 +0,0 @@
1
- // Code generated by @carbon/themes. DO NOT EDIT.
2
- //
3
- // Copyright IBM Corp. 2018, 2025
4
- //
5
- // This source code is licensed under the Apache-2.0 license found in the
6
- // LICENSE file in the root directory of this source tree.
7
-
8
- export const notificationActionHover = {
9
- whiteTheme: '#ffffff',
10
- g10: '#ffffff',
11
- };
12
- export const notificationActionTertiaryInverse = {
13
- whiteTheme: '#ffffff',
14
- g10: '#ffffff',
15
- g90: '#0f62fe',
16
- g100: '#0f62fe',
17
- };
18
- export const notificationActionTertiaryInverseActive = {
19
- whiteTheme: '#c6c6c6',
20
- g10: '#c6c6c6',
21
- g90: '#002d9c',
22
- g100: '#002d9c',
23
- };
24
- export const notificationActionTertiaryInverseHover = {
25
- whiteTheme: '#f4f4f4',
26
- g10: '#f4f4f4',
27
- g90: '#0050e6',
28
- g100: '#0050e6',
29
- };
30
- export const notificationActionTertiaryInverseText = {
31
- whiteTheme: '#161616',
32
- g10: '#161616',
33
- g90: '#ffffff',
34
- g100: '#ffffff',
35
- };
36
- export const notificationActionTertiaryInverseTextOnColorDisabled = {
37
- whiteTheme: 'rgba(255, 255, 255, 0.25)',
38
- g10: 'rgba(255, 255, 255, 0.25)',
39
- g90: '#8d8d8d',
40
- g100: '#8d8d8d',
41
- };
42
- export const notificationBackgroundError = {
43
- whiteTheme: '#fff1f1',
44
- g10: '#fff1f1',
45
- g90: '#393939',
46
- g100: '#262626',
47
- };
48
- export const notificationBackgroundInfo = {
49
- whiteTheme: '#edf5ff',
50
- g10: '#edf5ff',
51
- g90: '#393939',
52
- g100: '#262626',
53
- };
54
- export const notificationBackgroundSuccess = {
55
- whiteTheme: '#defbe6',
56
- g10: '#defbe6',
57
- g90: '#393939',
58
- g100: '#262626',
59
- };
60
- export const notificationBackgroundWarning = {
61
- whiteTheme: '#fcf4d6',
62
- g10: '#fcf4d6',
63
- g90: '#393939',
64
- g100: '#262626',
65
- };
package/js/generated/component-tokens/status.d.ts DELETED
@@ -1,63 +0,0 @@
1
- // Code generated by @carbon/themes. DO NOT EDIT.
2
- //
3
- // Copyright IBM Corp. 2018, 2025
4
- //
5
- // This source code is licensed under the Apache-2.0 license found in the
6
- // LICENSE file in the root directory of this source tree.
7
-
8
- export declare const statusAccessibilityBackground: {
9
- whiteTheme: string;
10
- g10: string;
11
- g90: string;
12
- g100: string;
13
- };
14
- export declare const statusBlue: {
15
- whiteTheme: string;
16
- g10: string;
17
- g90: string;
18
- g100: string;
19
- };
20
- export declare const statusGray: {
21
- whiteTheme: string;
22
- g10: string;
23
- g90: string;
24
- g100: string;
25
- };
26
- export declare const statusGreen: {
27
- whiteTheme: string;
28
- g10: string;
29
- g90: string;
30
- g100: string;
31
- };
32
- export declare const statusOrange: {
33
- whiteTheme: string;
34
- g10: string;
35
- g90: string;
36
- g100: string;
37
- };
38
- export declare const statusOrangeOutline: {
39
- whiteTheme: string;
40
- g10: string;
41
- };
42
- export declare const statusPurple: {
43
- whiteTheme: string;
44
- g10: string;
45
- g90: string;
46
- g100: string;
47
- };
48
- export declare const statusRed: {
49
- whiteTheme: string;
50
- g10: string;
51
- g90: string;
52
- g100: string;
53
- };
54
- export declare const statusYellow: {
55
- whiteTheme: string;
56
- g10: string;
57
- g90: string;
58
- g100: string;
59
- };
60
- export declare const statusYellowOutline: {
61
- whiteTheme: string;
62
- g10: string;
63
- };