@carbon/themes 10.47.0 → 10.49.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 (11) hide show
  1. package/es/index.js +9 -21
  2. package/lib/index.js +106 -308
  3. package/package.json +11 -11
  4. package/scss/compat/generated/_themes.scss +192 -192
  5. package/scss/modules/generated/_themes.scss +292 -292
  6. package/src/next/g10.js +4 -4
  7. package/src/next/g100.js +6 -6
  8. package/src/next/g90.js +6 -6
  9. package/src/next/white.js +4 -4
  10. package/src/tools.js +12 -0
  11. package/umd/index.js +108 -310
package/src/next/g10.js CHANGED
@@ -39,7 +39,7 @@ import {
39
39
  white,
40
40
  whiteHover,
41
41
  } from '@carbon/colors';
42
- import { adjustLightness } from '../tools';
42
+ import { adjustLightness, adjustAlpha } from '../tools';
43
43
 
44
44
  // Background
45
45
  export const background = gray10;
@@ -137,18 +137,18 @@ export const borderInverse = gray100;
137
137
  export const borderInteractive = blue60;
138
138
 
139
139
  // border
140
- export const borderDisabled = white;
140
+ export const borderDisabled = gray30;
141
141
 
142
142
  // Text
143
143
  export const textPrimary = gray100;
144
144
  export const textSecondary = gray70;
145
- export const textPlaceholder = gray40;
145
+ export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
146
146
  export const textHelper = gray60;
147
147
  export const textError = red60;
148
148
  export const textInverse = white;
149
149
  export const textOnColor = white;
150
150
  export const textOnColorDisabled = gray50;
151
- export const textDisabled = gray30;
151
+ export const textDisabled = adjustAlpha(textPrimary, 0.25);
152
152
 
153
153
  // Link
154
154
  export const linkPrimary = blue60;
package/src/next/g100.js CHANGED
@@ -46,7 +46,7 @@ import {
46
46
  // Tools
47
47
  rgba,
48
48
  } from '@carbon/colors';
49
- import { adjustLightness } from '../tools';
49
+ import { adjustLightness, adjustAlpha } from '../tools';
50
50
 
51
51
  // Background
52
52
  export const background = gray100;
@@ -144,18 +144,18 @@ export const borderInverse = gray10;
144
144
  export const borderInteractive = blue50;
145
145
 
146
146
  // border
147
- export const borderDisabled = gray90;
147
+ export const borderDisabled = adjustAlpha(gray50, 0.5);
148
148
 
149
149
  // Text
150
150
  export const textPrimary = gray10;
151
151
  export const textSecondary = gray30;
152
- export const textPlaceholder = gray60;
152
+ export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
153
153
  export const textHelper = gray40;
154
154
  export const textError = red30;
155
155
  export const textInverse = gray100;
156
156
  export const textOnColor = white;
157
- export const textOnColorDisabled = gray40;
158
- export const textDisabled = gray70;
157
+ export const textOnColorDisabled = adjustAlpha(textOnColor, 0.25);
158
+ export const textDisabled = adjustAlpha(textPrimary, 0.25);
159
159
 
160
160
  // Link
161
161
  export const linkPrimary = blue40;
@@ -169,7 +169,7 @@ export const iconPrimary = gray10;
169
169
  export const iconSecondary = gray30;
170
170
  export const iconInverse = gray100;
171
171
  export const iconOnColor = white;
172
- export const iconOnColorDisabled = gray40;
172
+ export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
173
173
  export const iconDisabled = gray70;
174
174
 
175
175
  // Support
package/src/next/g90.js CHANGED
@@ -45,7 +45,7 @@ import {
45
45
  // Tools
46
46
  rgba,
47
47
  } from '@carbon/colors';
48
- import { adjustLightness } from '../tools';
48
+ import { adjustLightness, adjustAlpha } from '../tools';
49
49
 
50
50
  // Background
51
51
  export const background = gray90;
@@ -143,18 +143,18 @@ export const borderInverse = gray10;
143
143
  export const borderInteractive = blue50;
144
144
 
145
145
  // border
146
- export const borderDisabled = gray80;
146
+ export const borderDisabled = adjustAlpha(gray50, 0.5);
147
147
 
148
148
  // Text
149
149
  export const textPrimary = gray10;
150
150
  export const textSecondary = gray30;
151
- export const textPlaceholder = gray50;
151
+ export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
152
152
  export const textHelper = gray30;
153
153
  export const textError = red30;
154
154
  export const textInverse = gray100;
155
155
  export const textOnColor = white;
156
- export const textOnColorDisabled = gray40;
157
- export const textDisabled = gray60;
156
+ export const textOnColorDisabled = adjustAlpha(textOnColor, 0.25);
157
+ export const textDisabled = adjustAlpha(textPrimary, 0.25);
158
158
 
159
159
  // Link
160
160
  export const linkPrimary = blue40;
@@ -168,7 +168,7 @@ export const iconPrimary = gray10;
168
168
  export const iconSecondary = gray30;
169
169
  export const iconInverse = gray100;
170
170
  export const iconOnColor = white;
171
- export const iconOnColorDisabled = gray40;
171
+ export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
172
172
  export const iconDisabled = gray60;
173
173
 
174
174
  // Support
package/src/next/white.js CHANGED
@@ -38,7 +38,7 @@ import {
38
38
  white,
39
39
  whiteHover,
40
40
  } from '@carbon/colors';
41
- import { adjustLightness } from '../tools';
41
+ import { adjustLightness, adjustAlpha } from '../tools';
42
42
 
43
43
  // Background
44
44
  export const background = white;
@@ -136,18 +136,18 @@ export const borderInverse = gray100;
136
136
  export const borderInteractive = blue60;
137
137
 
138
138
  // border
139
- export const borderDisabled = gray10;
139
+ export const borderDisabled = gray30;
140
140
 
141
141
  // Text
142
142
  export const textPrimary = gray100;
143
143
  export const textSecondary = gray70;
144
- export const textPlaceholder = gray40;
144
+ export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
145
145
  export const textHelper = gray60;
146
146
  export const textError = red60;
147
147
  export const textInverse = white;
148
148
  export const textOnColor = white;
149
149
  export const textOnColorDisabled = gray50;
150
- export const textDisabled = gray30;
150
+ export const textDisabled = adjustAlpha(textPrimary, 0.25);
151
151
 
152
152
  // Link
153
153
  export const linkPrimary = blue60;
package/src/tools.js CHANGED
@@ -23,3 +23,15 @@ export function adjustLightness(token, shift) {
23
23
  .hex()
24
24
  .toLowerCase();
25
25
  }
26
+
27
+ /**
28
+ * Adjust a given token's alpha by a specified amount
29
+ * Example: token = rgba(10, 10, 10, 1.0);
30
+ * adjustAlpha(token, 0.3) === rgba(10, 10, 10, 0.3);
31
+ * @param {string} token
32
+ * @param {float} alpha
33
+ * @returns {string}
34
+ */
35
+ export function adjustAlpha(token, alpha) {
36
+ return Color(token).rgb().alpha(alpha).string();
37
+ }