@carbon/styles 1.2.0-rc.0 → 1.3.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 +16 -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 +30 -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/tile/_tile.scss +1 -0
- package/scss/layer/_layer-sets.scss +84 -0
- package/scss/layer/_layer-tokens.scss +20 -0
- package/scss/theme/_theme.scss +40 -0
|
@@ -28,6 +28,7 @@ describe('@carbon/styles/scss/type', () => {
|
|
|
28
28
|
type-style: meta.mixin-exists('type-style', 'type'),
|
|
29
29
|
font-family: meta.mixin-exists('font-family', 'type'),
|
|
30
30
|
default-type: meta.mixin-exists('default-type', 'type'),
|
|
31
|
+
type-classes: meta.mixin-exists('type-classes', 'type'),
|
|
31
32
|
),
|
|
32
33
|
));
|
|
33
34
|
`);
|
|
@@ -38,6 +39,7 @@ describe('@carbon/styles/scss/type', () => {
|
|
|
38
39
|
'type-style': true,
|
|
39
40
|
'font-family': true,
|
|
40
41
|
'default-type': true,
|
|
42
|
+
'type-classes': true,
|
|
41
43
|
});
|
|
42
44
|
expect(api.variables).toMatchInlineSnapshot(`
|
|
43
45
|
Array [
|
|
@@ -95,4 +97,18 @@ describe('@carbon/styles/scss/type', () => {
|
|
|
95
97
|
);
|
|
96
98
|
}
|
|
97
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
|
+
});
|
|
98
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,7 +11,7 @@
|
|
|
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
15
|
@use './utilities/component-tokens';
|
|
16
16
|
@use './utilities/custom-property';
|
|
17
17
|
@use './components/button/tokens' as button;
|
|
@@ -42,6 +42,35 @@ $-components: (
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
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
|
+
|
|
45
74
|
@each $group in $-components {
|
|
46
75
|
@each $key, $value in $group {
|
|
47
76
|
@if meta.type-of($value) == map {
|
|
@@ -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
|
}
|
|
@@ -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');
|