@carbon/styles 1.1.0 → 1.3.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.
- package/package.json +10 -10
- package/scss/__tests__/__snapshots__/config-test.js.snap +1 -0
- package/scss/__tests__/__snapshots__/type-test.js.snap +12080 -0
- package/scss/__tests__/type-test.js +37 -0
- package/scss/_config.scss +7 -0
- package/scss/_layer.scss +6 -92
- package/scss/_reset.scss +6 -0
- package/scss/_theme.scss +36 -29
- package/scss/_zone.scss +62 -1
- package/scss/components/breadcrumb/_css.scss +10 -0
- package/scss/components/breadcrumb/_index.scss +2 -3
- package/scss/components/progress-bar/_progress-bar.scss +55 -3
- package/scss/components/search/_search.scss +0 -5
- package/scss/components/tile/_tile.scss +5 -1
- package/scss/layer/_layer-sets.scss +84 -0
- package/scss/layer/_layer-tokens.scss +20 -0
- package/scss/theme/_theme.scss +40 -0
- package/scss/type/_index.scss +9 -0
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
12
|
const { SassRenderer } = require('@carbon/test-utils/scss');
|
|
13
|
+
const css = require('css');
|
|
13
14
|
|
|
14
15
|
const { render } = SassRenderer.create(__dirname);
|
|
15
16
|
|
|
@@ -27,6 +28,7 @@ describe('@carbon/styles/scss/type', () => {
|
|
|
27
28
|
type-style: meta.mixin-exists('type-style', 'type'),
|
|
28
29
|
font-family: meta.mixin-exists('font-family', 'type'),
|
|
29
30
|
default-type: meta.mixin-exists('default-type', 'type'),
|
|
31
|
+
type-classes: meta.mixin-exists('type-classes', 'type'),
|
|
30
32
|
),
|
|
31
33
|
));
|
|
32
34
|
`);
|
|
@@ -37,6 +39,7 @@ describe('@carbon/styles/scss/type', () => {
|
|
|
37
39
|
'type-style': true,
|
|
38
40
|
'font-family': true,
|
|
39
41
|
'default-type': true,
|
|
42
|
+
'type-classes': true,
|
|
40
43
|
});
|
|
41
44
|
expect(api.variables).toMatchInlineSnapshot(`
|
|
42
45
|
Array [
|
|
@@ -74,4 +77,38 @@ describe('@carbon/styles/scss/type', () => {
|
|
|
74
77
|
]
|
|
75
78
|
`);
|
|
76
79
|
});
|
|
80
|
+
|
|
81
|
+
test('prefix', async () => {
|
|
82
|
+
const { result } = await render(`
|
|
83
|
+
@use '../config' with (
|
|
84
|
+
$prefix: 'custom',
|
|
85
|
+
);
|
|
86
|
+
@use '../type';
|
|
87
|
+
|
|
88
|
+
.my-selector {
|
|
89
|
+
@include type.type-style('label-01');
|
|
90
|
+
}
|
|
91
|
+
`);
|
|
92
|
+
const { stylesheet } = css.parse(result.css.toString());
|
|
93
|
+
const [rule] = stylesheet.rules;
|
|
94
|
+
for (const declaration of rule.declarations) {
|
|
95
|
+
expect(declaration.value).toEqual(
|
|
96
|
+
expect.stringContaining('var(--custom-')
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
test('type-classes mixin', async () => {
|
|
102
|
+
const { result } = await render(`
|
|
103
|
+
@use '../type';
|
|
104
|
+
|
|
105
|
+
@include type.type-classes();
|
|
106
|
+
|
|
107
|
+
.my-selector {
|
|
108
|
+
@include type.type-style('label-01');
|
|
109
|
+
}
|
|
110
|
+
`);
|
|
111
|
+
const { stylesheet } = css.parse(result.css.toString());
|
|
112
|
+
expect(stylesheet).toMatchSnapshot();
|
|
113
|
+
});
|
|
77
114
|
});
|
package/scss/_config.scss
CHANGED
|
@@ -5,6 +5,13 @@
|
|
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
|
6
6
|
//
|
|
7
7
|
|
|
8
|
+
/// Specify whether default styles should be emitted for the <body> element,
|
|
9
|
+
/// specifically background and text color
|
|
10
|
+
/// @access public
|
|
11
|
+
/// @type Bool
|
|
12
|
+
/// @group config
|
|
13
|
+
$css--body: true !default;
|
|
14
|
+
|
|
8
15
|
/// If true, includes font face mixins from scss/fonts
|
|
9
16
|
/// @access public
|
|
10
17
|
/// @type Bool
|
package/scss/_layer.scss
CHANGED
|
@@ -5,108 +5,22 @@
|
|
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
|
6
6
|
//
|
|
7
7
|
|
|
8
|
-
@
|
|
9
|
-
@use 'sass:map';
|
|
8
|
+
@forward './layer/layer-sets';
|
|
10
9
|
@use './config' as *;
|
|
11
|
-
@use './
|
|
12
|
-
@use './utilities/custom-property';
|
|
13
|
-
|
|
14
|
-
$-default-layer-sets: (
|
|
15
|
-
layer: (
|
|
16
|
-
theme.$layer-01,
|
|
17
|
-
theme.$layer-02,
|
|
18
|
-
theme.$layer-03,
|
|
19
|
-
),
|
|
20
|
-
layer-active: (
|
|
21
|
-
theme.$layer-active-01,
|
|
22
|
-
theme.$layer-active-02,
|
|
23
|
-
theme.$layer-active-03,
|
|
24
|
-
),
|
|
25
|
-
layer-hover: (
|
|
26
|
-
theme.$layer-hover-01,
|
|
27
|
-
theme.$layer-hover-02,
|
|
28
|
-
theme.$layer-hover-03,
|
|
29
|
-
),
|
|
30
|
-
layer-selected: (
|
|
31
|
-
theme.$layer-selected-01,
|
|
32
|
-
theme.$layer-selected-02,
|
|
33
|
-
theme.$layer-selected-03,
|
|
34
|
-
),
|
|
35
|
-
layer-selected-hover: (
|
|
36
|
-
theme.$layer-selected-hover-01,
|
|
37
|
-
theme.$layer-selected-hover-02,
|
|
38
|
-
theme.$layer-selected-hover-03,
|
|
39
|
-
),
|
|
40
|
-
layer-accent: (
|
|
41
|
-
theme.$layer-accent-01,
|
|
42
|
-
theme.$layer-accent-02,
|
|
43
|
-
theme.$layer-accent-03,
|
|
44
|
-
),
|
|
45
|
-
layer-accent-hover: (
|
|
46
|
-
theme.$layer-accent-hover-01,
|
|
47
|
-
theme.$layer-accent-hover-02,
|
|
48
|
-
theme.$layer-accent-hover-03,
|
|
49
|
-
),
|
|
50
|
-
layer-accent-active: (
|
|
51
|
-
theme.$layer-accent-active-01,
|
|
52
|
-
theme.$layer-accent-active-02,
|
|
53
|
-
theme.$layer-accent-active-03,
|
|
54
|
-
),
|
|
55
|
-
field: (
|
|
56
|
-
theme.$field-01,
|
|
57
|
-
theme.$field-02,
|
|
58
|
-
theme.$field-03,
|
|
59
|
-
),
|
|
60
|
-
field-hover: (
|
|
61
|
-
theme.$field-hover-01,
|
|
62
|
-
theme.$field-hover-02,
|
|
63
|
-
theme.$field-hover-03,
|
|
64
|
-
),
|
|
65
|
-
border-subtle: (
|
|
66
|
-
theme.$border-subtle-01,
|
|
67
|
-
theme.$border-subtle-02,
|
|
68
|
-
theme.$border-subtle-03,
|
|
69
|
-
),
|
|
70
|
-
border-subtle-selected: (
|
|
71
|
-
theme.$border-subtle-selected-01,
|
|
72
|
-
theme.$border-subtle-selected-02,
|
|
73
|
-
theme.$border-subtle-selected-03,
|
|
74
|
-
),
|
|
75
|
-
border-strong: (
|
|
76
|
-
theme.$border-strong-01,
|
|
77
|
-
theme.$border-strong-02,
|
|
78
|
-
theme.$border-strong-03,
|
|
79
|
-
),
|
|
80
|
-
);
|
|
81
|
-
|
|
82
|
-
/// Define a map of layer sets, each set should have values for each layer in
|
|
83
|
-
/// the application. The key of this map is used for the CSS Custom Property
|
|
84
|
-
/// name whose value is updated as more layers are added.
|
|
85
|
-
/// @type {Map}
|
|
86
|
-
$layer-sets: () !default;
|
|
87
|
-
$layer-sets: map.deep-merge($-default-layer-sets, $layer-sets);
|
|
88
|
-
|
|
89
|
-
/// Emit the layer tokens defined in $layer-sets for the given $level
|
|
90
|
-
/// @param {Number} $level
|
|
91
|
-
@mixin -emit-layer-tokens($level) {
|
|
92
|
-
@each $key, $layer-set in $layer-sets {
|
|
93
|
-
$value: list.nth($layer-set, $level);
|
|
94
|
-
@include custom-property.declaration($key, $value);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
10
|
+
@use './layer/layer-tokens';
|
|
97
11
|
|
|
98
12
|
:root {
|
|
99
|
-
@include -emit-layer-tokens(1);
|
|
13
|
+
@include layer-tokens.emit-layer-tokens(1);
|
|
100
14
|
}
|
|
101
15
|
|
|
102
16
|
.#{$prefix}--layer-one {
|
|
103
|
-
@include -emit-layer-tokens(1);
|
|
17
|
+
@include layer-tokens.emit-layer-tokens(1);
|
|
104
18
|
}
|
|
105
19
|
|
|
106
20
|
.#{$prefix}--layer-two {
|
|
107
|
-
@include -emit-layer-tokens(2);
|
|
21
|
+
@include layer-tokens.emit-layer-tokens(2);
|
|
108
22
|
}
|
|
109
23
|
|
|
110
24
|
.#{$prefix}--layer-three {
|
|
111
|
-
@include -emit-layer-tokens(3);
|
|
25
|
+
@include layer-tokens.emit-layer-tokens(3);
|
|
112
26
|
}
|
package/scss/_reset.scss
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
@use 'config';
|
|
9
9
|
@use 'type' as type;
|
|
10
|
+
@use './utilities/custom-property';
|
|
10
11
|
|
|
11
12
|
@mixin reset {
|
|
12
13
|
/// http://meyerweb.com/eric/tools/css/reset/
|
|
@@ -118,6 +119,11 @@
|
|
|
118
119
|
}
|
|
119
120
|
|
|
120
121
|
body {
|
|
122
|
+
@if config.$css--body == true {
|
|
123
|
+
background-color: custom-property.get-var('background', #ffffff);
|
|
124
|
+
color: custom-property.get-var('text-primary', #161616);
|
|
125
|
+
}
|
|
126
|
+
|
|
121
127
|
line-height: 1;
|
|
122
128
|
}
|
|
123
129
|
|
package/scss/_theme.scss
CHANGED
|
@@ -5,34 +5,41 @@
|
|
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
|
6
6
|
//
|
|
7
7
|
|
|
8
|
-
@
|
|
9
|
-
@use '
|
|
10
|
-
|
|
11
|
-
);
|
|
12
|
-
@use './compat/themes' as compat;
|
|
13
|
-
@use './themes';
|
|
8
|
+
@forward './theme/theme' hide theme;
|
|
9
|
+
@use './theme/theme';
|
|
10
|
+
@use './layer/layer-tokens';
|
|
14
11
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
);
|
|
19
|
-
@forward '@carbon/themes/scss/tokens';
|
|
20
|
-
@use '@carbon/themes/scss/tokens';
|
|
21
|
-
@use './utilities/custom-property';
|
|
12
|
+
/// Include the CSS Custom Properties for the active theme or a given theme on
|
|
13
|
+
/// a selector
|
|
14
|
+
@mixin theme($args...) {
|
|
15
|
+
@include theme.theme($args...);
|
|
22
16
|
|
|
23
|
-
//
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
17
|
+
// Note: we need to re-emit the contextual layer tokens as part of the theme
|
|
18
|
+
// mixin. Otherwise, the layer tokens are defined at the :root level and will
|
|
19
|
+
// not pick up the theme-specific, or zone-specific, value from the first
|
|
20
|
+
// layer.
|
|
21
|
+
//
|
|
22
|
+
// For example, in this situation:
|
|
23
|
+
//
|
|
24
|
+
// ```
|
|
25
|
+
// :root {
|
|
26
|
+
// --layer-one: #000000;
|
|
27
|
+
// --layer: var(--layer-one);
|
|
28
|
+
// }
|
|
29
|
+
// ```
|
|
30
|
+
//
|
|
31
|
+
// This will always evaluate to the value of `--layer-one` at the `:root`
|
|
32
|
+
// selector, even if `--layer-one` is redefined layer on in the cascade.
|
|
33
|
+
//
|
|
34
|
+
// ```
|
|
35
|
+
// .zone {
|
|
36
|
+
// --layer-one: #ffffff;
|
|
37
|
+
// }
|
|
38
|
+
// ```
|
|
39
|
+
//
|
|
40
|
+
// Even though you would expect `--layer` to be redefined, it will keep the
|
|
41
|
+
// value defined at the `:root` level.
|
|
42
|
+
//
|
|
43
|
+
// @see https://github.com/carbon-design-system/carbon/issues/11138
|
|
44
|
+
@include layer-tokens.emit-layer-tokens(1);
|
|
45
|
+
}
|
package/scss/_zone.scss
CHANGED
|
@@ -11,8 +11,12 @@
|
|
|
11
11
|
@use './themes';
|
|
12
12
|
@use './theme';
|
|
13
13
|
// Inline themes depend on layer styles to property reset the layer level
|
|
14
|
-
@use './layer';
|
|
14
|
+
@use './layer/layer-tokens';
|
|
15
|
+
@use './utilities/component-tokens';
|
|
15
16
|
@use './utilities/custom-property';
|
|
17
|
+
@use './components/button/tokens' as button;
|
|
18
|
+
@use './components/notification/tokens' as notification;
|
|
19
|
+
@use './components/tag/tokens' as tag;
|
|
16
20
|
|
|
17
21
|
/// Specify a Map of zones where the key will be used as part of the selector
|
|
18
22
|
/// and the value will be a map used to emit CSS Custom Properties for all color
|
|
@@ -24,6 +28,12 @@ $zones: (
|
|
|
24
28
|
g100: themes.$g100,
|
|
25
29
|
) !default;
|
|
26
30
|
|
|
31
|
+
$-components: (
|
|
32
|
+
button.$button-tokens,
|
|
33
|
+
notification.$notification-tokens,
|
|
34
|
+
tag.$tag-tokens
|
|
35
|
+
);
|
|
36
|
+
|
|
27
37
|
@each $name, $theme in $zones {
|
|
28
38
|
.#{config.$prefix}--#{'' + $name} {
|
|
29
39
|
@each $key, $value in $theme {
|
|
@@ -31,5 +41,56 @@ $zones: (
|
|
|
31
41
|
@include custom-property.declaration($key, $value);
|
|
32
42
|
}
|
|
33
43
|
}
|
|
44
|
+
|
|
45
|
+
// Note: we need to re-emit the contextual layer tokens as part of the theme
|
|
46
|
+
// mixin. Otherwise, the layer tokens are defined at the :root level and will
|
|
47
|
+
// not pick up the theme-specific, or zone-specific, value from the first
|
|
48
|
+
// layer.
|
|
49
|
+
//
|
|
50
|
+
// For example, in this situation:
|
|
51
|
+
//
|
|
52
|
+
// ```
|
|
53
|
+
// :root {
|
|
54
|
+
// --layer-one: #000000;
|
|
55
|
+
// --layer: var(--layer-one);
|
|
56
|
+
// }
|
|
57
|
+
// ```
|
|
58
|
+
//
|
|
59
|
+
// This will always evaluate to the value of `--layer-one` at the `:root`
|
|
60
|
+
// selector, even if `--layer-one` is redefined layer on in the cascade.
|
|
61
|
+
//
|
|
62
|
+
// ```
|
|
63
|
+
// .zone {
|
|
64
|
+
// --layer-one: #ffffff;
|
|
65
|
+
// }
|
|
66
|
+
// ```
|
|
67
|
+
//
|
|
68
|
+
// Even though you would expect `--layer` to be redefined, it will keep the
|
|
69
|
+
// value defined at the `:root` level.
|
|
70
|
+
//
|
|
71
|
+
// @see https://github.com/carbon-design-system/carbon/issues/11138
|
|
72
|
+
@include layer-tokens.emit-layer-tokens(1);
|
|
73
|
+
|
|
74
|
+
@each $group in $-components {
|
|
75
|
+
@each $key, $value in $group {
|
|
76
|
+
@if meta.type-of($value) == map {
|
|
77
|
+
$fallback: map.get($value, fallback);
|
|
78
|
+
$theme-values: map.get($value, values);
|
|
79
|
+
|
|
80
|
+
@each $theme-value in $theme-values {
|
|
81
|
+
$theme: map.get($theme-value, theme);
|
|
82
|
+
$value: map.get($theme-value, value);
|
|
83
|
+
@if theme.matches($theme, theme.$theme) and
|
|
84
|
+
meta.type-of($value) ==
|
|
85
|
+
color
|
|
86
|
+
{
|
|
87
|
+
@include custom-property.declaration($key, $value);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
} @else if meta.type-of($value) == color {
|
|
91
|
+
@include custom-property.declaration($key, $value);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
34
95
|
}
|
|
35
96
|
}
|
|
@@ -20,14 +20,23 @@
|
|
|
20
20
|
.#{$prefix}--progress-bar__label {
|
|
21
21
|
@include type-style('body-compact-01');
|
|
22
22
|
|
|
23
|
-
display:
|
|
23
|
+
display: flex;
|
|
24
|
+
min-width: rem(48px);
|
|
25
|
+
justify-content: space-between;
|
|
24
26
|
margin-bottom: $spacing-03;
|
|
25
27
|
color: $text-primary;
|
|
26
28
|
}
|
|
27
29
|
|
|
30
|
+
.#{$prefix}--progress-bar__label-text {
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
text-overflow: ellipsis;
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
}
|
|
35
|
+
|
|
28
36
|
.#{$prefix}--progress-bar__track {
|
|
29
37
|
position: relative;
|
|
30
38
|
width: 100%;
|
|
39
|
+
min-width: rem(48px);
|
|
31
40
|
height: rem(8px);
|
|
32
41
|
background-color: $layer;
|
|
33
42
|
}
|
|
@@ -44,7 +53,8 @@
|
|
|
44
53
|
display: block;
|
|
45
54
|
width: 100%;
|
|
46
55
|
height: 100%;
|
|
47
|
-
background-color:
|
|
56
|
+
background-color: currentColor;
|
|
57
|
+
color: $interactive;
|
|
48
58
|
transform: scaleX(0);
|
|
49
59
|
transform-origin: 0 center #{'/*rtl:100% center*/'};
|
|
50
60
|
transition: transform $duration-fast-02 motion(standard, productive);
|
|
@@ -74,10 +84,47 @@
|
|
|
74
84
|
.#{$prefix}--progress-bar__helper-text {
|
|
75
85
|
@include type-style('helper-text-01');
|
|
76
86
|
|
|
77
|
-
margin-top: $spacing-
|
|
87
|
+
margin-top: $spacing-03;
|
|
78
88
|
color: $text-secondary;
|
|
79
89
|
}
|
|
80
90
|
|
|
91
|
+
.#{$prefix}--progress-bar__status-icon {
|
|
92
|
+
flex-shrink: 0;
|
|
93
|
+
margin-left: $spacing-05;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.#{$prefix}--progress-bar--finished .#{$prefix}--progress-bar__bar,
|
|
97
|
+
.#{$prefix}--progress-bar--finished .#{$prefix}--progress-bar__status-icon {
|
|
98
|
+
color: $support-success;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.#{$prefix}--progress-bar--error .#{$prefix}--progress-bar__bar,
|
|
102
|
+
.#{$prefix}--progress-bar--error .#{$prefix}--progress-bar__status-icon,
|
|
103
|
+
.#{$prefix}--progress-bar--error .#{$prefix}--progress-bar__helper-text {
|
|
104
|
+
color: $support-error;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.#{$prefix}--progress-bar--finished .#{$prefix}--progress-bar__bar,
|
|
108
|
+
.#{$prefix}--progress-bar--error .#{$prefix}--progress-bar__bar {
|
|
109
|
+
transform: scaleX(1);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.#{$prefix}--progress-bar--finished.#{$prefix}--progress-bar--inline
|
|
113
|
+
.#{$prefix}--progress-bar__track,
|
|
114
|
+
.#{$prefix}--progress-bar--error.#{$prefix}--progress-bar--inline
|
|
115
|
+
.#{$prefix}--progress-bar__track {
|
|
116
|
+
@include visually-hidden;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.#{$prefix}--progress-bar--finished.#{$prefix}--progress-bar--inline
|
|
120
|
+
.#{$prefix}--progress-bar__label,
|
|
121
|
+
.#{$prefix}--progress-bar--error.#{$prefix}--progress-bar--inline
|
|
122
|
+
.#{$prefix}--progress-bar__label {
|
|
123
|
+
flex-shrink: 1;
|
|
124
|
+
justify-content: flex-start;
|
|
125
|
+
margin-right: 0;
|
|
126
|
+
}
|
|
127
|
+
|
|
81
128
|
@keyframes progress-bar-indeterminate {
|
|
82
129
|
0% {
|
|
83
130
|
background-position-x: 25%;
|
|
@@ -100,6 +147,11 @@
|
|
|
100
147
|
margin-inline-end: $spacing-05;
|
|
101
148
|
}
|
|
102
149
|
|
|
150
|
+
.#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__track {
|
|
151
|
+
flex-basis: 0;
|
|
152
|
+
flex-grow: 1;
|
|
153
|
+
}
|
|
154
|
+
|
|
103
155
|
.#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__helper-text {
|
|
104
156
|
@include visually-hidden;
|
|
105
157
|
}
|
|
@@ -112,11 +112,6 @@
|
|
|
112
112
|
left: rem(12px);
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
-
.#{$prefix}--search--md:not(.#{$prefix}--toolbar-search-container-active)
|
|
116
|
-
.#{$prefix}--search-magnifier-icon {
|
|
117
|
-
left: 0;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
115
|
// Large styles
|
|
121
116
|
.#{$prefix}--search--lg .#{$prefix}--search-input,
|
|
122
117
|
.#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
|
|
@@ -34,6 +34,8 @@
|
|
|
34
34
|
outline: 2px solid transparent;
|
|
35
35
|
outline-offset: -2px;
|
|
36
36
|
|
|
37
|
+
@include type-style('body-compact-01');
|
|
38
|
+
|
|
37
39
|
&:focus {
|
|
38
40
|
@include focus-outline('outline');
|
|
39
41
|
}
|
|
@@ -56,7 +58,6 @@
|
|
|
56
58
|
|
|
57
59
|
.#{$prefix}--tile--clickable {
|
|
58
60
|
@include reset;
|
|
59
|
-
@include type-style('body-compact-01');
|
|
60
61
|
|
|
61
62
|
color: $text-primary;
|
|
62
63
|
text-decoration: none;
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
.#{$prefix}--tile--clickable.#{$prefix}--link--disabled,
|
|
91
92
|
.#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled {
|
|
92
93
|
display: block;
|
|
94
|
+
padding: $spacing-05;
|
|
93
95
|
background-color: $layer;
|
|
94
96
|
color: $text-disabled;
|
|
95
97
|
}
|
|
@@ -186,6 +188,8 @@
|
|
|
186
188
|
text-align: left;
|
|
187
189
|
transition: max-height $duration-moderate-01 motion(standard, productive);
|
|
188
190
|
|
|
191
|
+
@include type-style('body-compact-01');
|
|
192
|
+
|
|
189
193
|
&:hover {
|
|
190
194
|
background: $layer-hover;
|
|
191
195
|
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2021
|
|
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 'sass:map';
|
|
9
|
+
@use '../theme/theme';
|
|
10
|
+
|
|
11
|
+
$-default-layer-sets: (
|
|
12
|
+
layer: (
|
|
13
|
+
theme.$layer-01,
|
|
14
|
+
theme.$layer-02,
|
|
15
|
+
theme.$layer-03,
|
|
16
|
+
),
|
|
17
|
+
layer-active: (
|
|
18
|
+
theme.$layer-active-01,
|
|
19
|
+
theme.$layer-active-02,
|
|
20
|
+
theme.$layer-active-03,
|
|
21
|
+
),
|
|
22
|
+
layer-hover: (
|
|
23
|
+
theme.$layer-hover-01,
|
|
24
|
+
theme.$layer-hover-02,
|
|
25
|
+
theme.$layer-hover-03,
|
|
26
|
+
),
|
|
27
|
+
layer-selected: (
|
|
28
|
+
theme.$layer-selected-01,
|
|
29
|
+
theme.$layer-selected-02,
|
|
30
|
+
theme.$layer-selected-03,
|
|
31
|
+
),
|
|
32
|
+
layer-selected-hover: (
|
|
33
|
+
theme.$layer-selected-hover-01,
|
|
34
|
+
theme.$layer-selected-hover-02,
|
|
35
|
+
theme.$layer-selected-hover-03,
|
|
36
|
+
),
|
|
37
|
+
layer-accent: (
|
|
38
|
+
theme.$layer-accent-01,
|
|
39
|
+
theme.$layer-accent-02,
|
|
40
|
+
theme.$layer-accent-03,
|
|
41
|
+
),
|
|
42
|
+
layer-accent-hover: (
|
|
43
|
+
theme.$layer-accent-hover-01,
|
|
44
|
+
theme.$layer-accent-hover-02,
|
|
45
|
+
theme.$layer-accent-hover-03,
|
|
46
|
+
),
|
|
47
|
+
layer-accent-active: (
|
|
48
|
+
theme.$layer-accent-active-01,
|
|
49
|
+
theme.$layer-accent-active-02,
|
|
50
|
+
theme.$layer-accent-active-03,
|
|
51
|
+
),
|
|
52
|
+
field: (
|
|
53
|
+
theme.$field-01,
|
|
54
|
+
theme.$field-02,
|
|
55
|
+
theme.$field-03,
|
|
56
|
+
),
|
|
57
|
+
field-hover: (
|
|
58
|
+
theme.$field-hover-01,
|
|
59
|
+
theme.$field-hover-02,
|
|
60
|
+
theme.$field-hover-03,
|
|
61
|
+
),
|
|
62
|
+
border-subtle: (
|
|
63
|
+
theme.$border-subtle-01,
|
|
64
|
+
theme.$border-subtle-02,
|
|
65
|
+
theme.$border-subtle-03,
|
|
66
|
+
),
|
|
67
|
+
border-subtle-selected: (
|
|
68
|
+
theme.$border-subtle-selected-01,
|
|
69
|
+
theme.$border-subtle-selected-02,
|
|
70
|
+
theme.$border-subtle-selected-03,
|
|
71
|
+
),
|
|
72
|
+
border-strong: (
|
|
73
|
+
theme.$border-strong-01,
|
|
74
|
+
theme.$border-strong-02,
|
|
75
|
+
theme.$border-strong-03,
|
|
76
|
+
),
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
/// Define a map of layer sets, each set should have values for each layer in
|
|
80
|
+
/// the application. The key of this map is used for the CSS Custom Property
|
|
81
|
+
/// name whose value is updated as more layers are added.
|
|
82
|
+
/// @type {Map}
|
|
83
|
+
$layer-sets: () !default;
|
|
84
|
+
$layer-sets: map.deep-merge($-default-layer-sets, $layer-sets);
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2021
|
|
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 'sass:list';
|
|
9
|
+
@use '../config' as *;
|
|
10
|
+
@use '../utilities/custom-property';
|
|
11
|
+
@use './layer-sets' as *;
|
|
12
|
+
|
|
13
|
+
/// Emit the layer tokens defined in $layer-sets for the given $level
|
|
14
|
+
/// @param {Number} $level
|
|
15
|
+
@mixin emit-layer-tokens($level) {
|
|
16
|
+
@each $key, $layer-set in $layer-sets {
|
|
17
|
+
$value: list.nth($layer-set, $level);
|
|
18
|
+
@include custom-property.declaration($key, $value);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2018, 2018
|
|
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 '../config' as *;
|
|
9
|
+
@use '@carbon/themes/scss/config' with (
|
|
10
|
+
$prefix: $prefix,
|
|
11
|
+
);
|
|
12
|
+
@use '../compat/themes' as compat;
|
|
13
|
+
@use '../themes';
|
|
14
|
+
|
|
15
|
+
@forward '@carbon/themes/scss/theme' with (
|
|
16
|
+
$fallback: themes.$white !default,
|
|
17
|
+
$theme: compat.$white !default,
|
|
18
|
+
);
|
|
19
|
+
@forward '@carbon/themes/scss/tokens';
|
|
20
|
+
|
|
21
|
+
@use '@carbon/themes/scss/tokens';
|
|
22
|
+
@use '@carbon/themes/scss/theme';
|
|
23
|
+
@use '../utilities/custom-property';
|
|
24
|
+
|
|
25
|
+
// Layer sets
|
|
26
|
+
$layer: custom-property.get-var('layer');
|
|
27
|
+
$layer-active: custom-property.get-var('layer-active');
|
|
28
|
+
$layer-hover: custom-property.get-var('layer-hover');
|
|
29
|
+
$layer-selected: custom-property.get-var('layer-selected');
|
|
30
|
+
$layer-selected-hover: custom-property.get-var('layer-selected-hover');
|
|
31
|
+
$layer-accent: custom-property.get-var('layer-accent');
|
|
32
|
+
$layer-accent-hover: custom-property.get-var('layer-accent-hover');
|
|
33
|
+
$layer-accent-active: custom-property.get-var('layer-accent-active');
|
|
34
|
+
|
|
35
|
+
$field: custom-property.get-var('field');
|
|
36
|
+
$field-hover: custom-property.get-var('field-hover');
|
|
37
|
+
|
|
38
|
+
$border-subtle: custom-property.get-var('border-subtle');
|
|
39
|
+
$border-subtle-selected: custom-property.get-var('border-subtle-selected');
|
|
40
|
+
$border-strong: custom-property.get-var('border-strong');
|