@carbon/styles 1.41.2 → 1.42.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.
- package/css/styles.css +20 -0
- package/css/styles.min.css +1 -1
- package/package.json +8 -8
- package/scss/__tests__/theme-test.js +3 -0
- package/scss/components/loading/_loading.scss +3 -0
- package/scss/components/slug/_slug.scss +9 -0
- package/scss/utilities/_ai-gradient.scss +42 -0
- package/scss/utilities/_index.scss +1 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/styles",
|
|
3
3
|
"description": "Styles for the Carbon Design System",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.42.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -38,13 +38,13 @@
|
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@carbon/colors": "^11.20.
|
|
41
|
+
"@carbon/colors": "^11.20.0",
|
|
42
42
|
"@carbon/feature-flags": "^0.16.0",
|
|
43
|
-
"@carbon/grid": "^11.21.
|
|
44
|
-
"@carbon/layout": "^11.20.
|
|
45
|
-
"@carbon/motion": "^11.16.
|
|
46
|
-
"@carbon/themes": "^11.
|
|
47
|
-
"@carbon/type": "^11.25.
|
|
43
|
+
"@carbon/grid": "^11.21.0",
|
|
44
|
+
"@carbon/layout": "^11.20.0",
|
|
45
|
+
"@carbon/motion": "^11.16.0",
|
|
46
|
+
"@carbon/themes": "^11.27.0",
|
|
47
|
+
"@carbon/type": "^11.25.0",
|
|
48
48
|
"@ibm/plex": "6.0.0-next.6"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"scss/**/*.css",
|
|
66
66
|
"css/**/*.css"
|
|
67
67
|
],
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "7e1982e232895b6223b88bca246f754ecd2609ac"
|
|
69
69
|
}
|
|
@@ -136,6 +136,9 @@ describe('@carbon/styles/scss/theme', () => {
|
|
|
136
136
|
"slug-callout-gradient-bottom",
|
|
137
137
|
"slug-callout-aura-start",
|
|
138
138
|
"slug-callout-aura-end",
|
|
139
|
+
"ai-gradient-start-01",
|
|
140
|
+
"ai-gradient-start-02",
|
|
141
|
+
"ai-gradient-end",
|
|
139
142
|
"highlight",
|
|
140
143
|
"overlay",
|
|
141
144
|
"toggle-off",
|
|
@@ -108,6 +108,15 @@ $sizes: (
|
|
|
108
108
|
transition: opacity $duration-fast-01 motion(entrance, productive);
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
+
.#{$prefix}--slug__button.#{$prefix}--slug__button--mini::after,
|
|
112
|
+
.#{$prefix}--slug__button.#{$prefix}--slug__button--2xs::after {
|
|
113
|
+
position: absolute;
|
|
114
|
+
block-size: convert.to-rem(24px);
|
|
115
|
+
content: '';
|
|
116
|
+
inline-size: convert.to-rem(24px);
|
|
117
|
+
opacity: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
111
120
|
.#{$prefix}--slug__button:hover::before {
|
|
112
121
|
opacity: 1;
|
|
113
122
|
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2023
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
@use '../theme';
|
|
9
|
+
|
|
10
|
+
/// Experimental - name and structure subject to change. Use at your own risk!
|
|
11
|
+
/// Adds AI gradient styles to a component
|
|
12
|
+
/// @access public
|
|
13
|
+
/// @param {String} $direction - Direction of gradient from: `left`, `right`, `top`, and `bottom`
|
|
14
|
+
/// @param {Number} $width - Percentage width of gradient with regards to parent component
|
|
15
|
+
/// @example @include focus-outline('outline');
|
|
16
|
+
/// @group utilities
|
|
17
|
+
|
|
18
|
+
@mixin ai-gradient($direction: 'right', $width: 50%) {
|
|
19
|
+
$deg: 0;
|
|
20
|
+
@if $direction == 'bottom' {
|
|
21
|
+
$deg: 0deg;
|
|
22
|
+
} @else if $direction == 'left' {
|
|
23
|
+
$deg: 90deg;
|
|
24
|
+
} @else if $direction == 'top' {
|
|
25
|
+
$deg: 180deg;
|
|
26
|
+
} @else if $direction == 'right' {
|
|
27
|
+
$deg: 270deg;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
background-image: linear-gradient(
|
|
31
|
+
$deg,
|
|
32
|
+
theme.$ai-gradient-start-01 0%,
|
|
33
|
+
theme.$ai-gradient-end $width,
|
|
34
|
+
transparent 100%
|
|
35
|
+
),
|
|
36
|
+
linear-gradient(
|
|
37
|
+
$deg,
|
|
38
|
+
theme.$ai-gradient-start-02 0%,
|
|
39
|
+
theme.$ai-gradient-end $width,
|
|
40
|
+
transparent 100%
|
|
41
|
+
);
|
|
42
|
+
}
|