@swisspost/design-system-styles 8.2.1 → 9.0.0-next.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/components/chip.css +1 -1
- package/components/chip.scss +13 -7
- package/functions/_index.scss +1 -0
- package/functions/_sizing.scss +0 -19
- package/functions/_tokens.scss +74 -0
- package/index.css +1 -1
- package/intranet.css +1 -1
- package/package.json +8 -8
- package/post-external.css +2 -2
- package/post-internal.css +2 -2
- package/post-tokens-external.css +1 -1
- package/post-tokens-internal.css +1 -1
- package/tokens/_components.scss +1 -0
- package/tokens/_elements.scss +1 -0
- package/tokens/_post-theme.scss +1 -1
- package/tokens/_utilities.scss +1 -0
- package/tokens/temp/channel.scss +3 -3
- package/tokens/temp/components.scss +572 -82
- package/tokens/temp/core.scss +64 -4
- package/tokens/temp/device.scss +376 -193
- package/tokens/temp/elements.scss +53 -0
- package/tokens/temp/index.scss +3 -1
- package/tokens/temp/mode.scss +287 -169
- package/tokens/temp/theme.scss +3 -3
- package/tokens/temp/utilities.scss +89 -0
- package/variables/_type.scss +0 -33
- package/variables/components/_accordion.scss +3 -6
- package/variables/components/_chip.scss +8 -1
- package/variables/components/_close.scss +2 -4
- package/variables/components/_datatable.scss +0 -10
- package/variables/components/_form-check.scss +1 -41
- package/variables/components/_form-select.scss +4 -8
- package/variables/components/_form-validation.scss +6 -12
- package/variables/components/_stepper.scss +2 -11
package/components/chip.css
CHANGED
|
@@ -26,4 +26,4 @@
|
|
|
26
26
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
27
27
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
28
28
|
* THE SOFTWARE.
|
|
29
|
-
*/.chip-sm.chip-filter>.chip-filter-label>.badge{--post-badge-height: 1rem;--post-badge-padding-x: 0.25rem;font-size:10px}.chip-dismissible{border-radius:50rem;display:inline-flex;align-items:center;height:2.5rem;max-width:
|
|
29
|
+
*/.chip-sm.chip-filter>.chip-filter-label>.badge{--post-badge-height: 1rem;--post-badge-padding-x: 0.25rem;font-size:10px}.chip-dismissible{border-radius:50rem;display:inline-flex;align-items:center;height:2.5rem;max-width:100%;padding-inline:1rem;border:2px solid #666;gap:.5rem;line-height:1.5;font-size:1rem;font-weight:400;color:#333;background-color:#fff;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);position:relative;padding-inline-start:.5rem;gap:.5rem;outline:none}.chip-dismissible>.chip-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.chip-dismissible::before,.chip-dismissible::after{content:"";display:inline-block;flex:0 0 auto;height:1.5rem;width:1.5rem;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-dismissible::before{border-radius:50%}.chip-dismissible:hover::before{background-color:#ccc;border:1px solid #666}.chip-dismissible::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;top:50%;transform:translateY(-50%)}.chip-dismissible::before{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.chip-dismissible:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-style:solid !important;background-color:#ccc}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-dismissible:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.chip-dismissible:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-style:solid !important;background-color:#ccc}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-dismissible:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-color:Highlight !important}}}.chip-dismissible:disabled{pointer-events:none;color:var(--post-gray-60);border-color:var(--post-gray-40);border-style:dashed;background-clip:padding-box;text-decoration:line-through}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-dismissible:disabled{color:GrayText;border-color:GrayText}}.chip-filter{display:inline-block;max-width:100%}.chip-filter-label{border-radius:50rem;display:inline-flex;align-items:center;height:2.5rem;max-width:100%;padding-inline:1rem;border:2px solid #666;gap:.5rem;line-height:1.5;font-size:1rem;font-weight:400;color:#333;background-color:#fff;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer}.chip-filter-label>.chip-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.chip-filter-label>.badge{box-sizing:border-box;min-width:var(--post-badge-height);padding-inline:calc(var(--post-badge-padding-x)*.75);color:#000;background-color:#ccc;border:2px solid #666;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-filter-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.chip-filter-input:checked+.chip-filter-label{color:#000;background-color:#fc0}.chip-filter-input:checked+.chip-filter-label>.badge{background-color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked+.chip-filter-label{border-color:Highlight}}.chip-filter-input:checked:disabled+.chip-filter-label{background-color:#f4f3f1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked:disabled+.chip-filter-label>.chip-text{text-decoration:underline}}.chip-filter-input:checked:not(:disabled)+.chip-filter-label>.chip-text{text-decoration:underline;transition:-webkit-text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-filter-input:checked:not(:disabled)+.chip-filter-label:hover>.chip-text{text-decoration-color:rgba(0,0,0,0)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked:not(:disabled)+.chip-filter-label:hover>.chip-text{text-decoration-color:initial}}.chip-filter-input:checked:not(:disabled)+.chip-filter-label{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.chip-filter-input:checked:not(:disabled):is(:focus-visible,:has(:focus-visible),.pretend-focus)+.chip-filter-label{outline-style:solid !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked:not(:disabled):is(:focus-visible,:has(:focus-visible),.pretend-focus)+.chip-filter-label{outline-color:Highlight !important}}.chip-filter-input:checked:not(:disabled):is(:focus-visible,:has(:focus-visible),.pretend-focus)+.chip-filter-label>.chip-text{text-decoration-color:rgba(0,0,0,0)}@supports not selector(:has(:focus-visible)){.chip-filter-input:checked:not(:disabled):is(:focus-visible,:focus-within,.pretend-focus)+.chip-filter-label{outline-style:solid !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked:not(:disabled):is(:focus-visible,:focus-within,.pretend-focus)+.chip-filter-label{outline-color:Highlight !important}}.chip-filter-input:checked:not(:disabled):is(:focus-visible,:focus-within,.pretend-focus)+.chip-filter-label>.chip-text{text-decoration-color:rgba(0,0,0,0)}}.chip-filter-input:not(:checked)+.chip-filter-label:hover{color:#000;background-color:#ccc}.chip-filter-input:not(:checked)+.chip-filter-label:hover>.badge{background-color:#fff}.chip-filter-input:disabled+.chip-filter-label{pointer-events:none;color:var(--post-gray-60);border-color:var(--post-gray-40);border-style:dashed;background-clip:padding-box;text-decoration:line-through;background-color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:disabled+.chip-filter-label>.badge{color:GrayText;border-color:GrayText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:disabled+.chip-filter-label{color:GrayText;border-color:GrayText}}.chip-sm.chip-dismissible{height:2rem;font-size:.875rem;gap:.375rem;padding-inline:.75rem;padding-inline-start:.5rem;gap:.375rem}.chip-sm.chip-dismissible::before,.chip-sm.chip-dismissible::after{height:1rem;width:1rem}.chip-sm.chip-filter>.chip-filter-label{height:2rem;font-size:.875rem;gap:.375rem;padding-inline:.75rem}.chip-sm.chip-filter>.chip-filter-label>.badge{line-height:1;border-width:1px;padding-inline:calc(var(--post-badge-padding-x)*1.2)}
|
package/components/chip.scss
CHANGED
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
.chip-dismissible {
|
|
10
10
|
@include chip-mx.chip-styles();
|
|
11
11
|
position: relative;
|
|
12
|
+
padding-inline-start: chip.$chip-dismissable-padding-start;
|
|
13
|
+
gap: chip.$chip-gap;
|
|
12
14
|
|
|
13
15
|
&::before,
|
|
14
16
|
&::after {
|
|
@@ -26,13 +28,13 @@
|
|
|
26
28
|
|
|
27
29
|
&:hover::before {
|
|
28
30
|
background-color: chip.$chip-hover-bg;
|
|
31
|
+
border: chip.$chip-close-button-border;
|
|
29
32
|
}
|
|
30
33
|
|
|
31
34
|
&::after {
|
|
32
35
|
@include icons-mx.icon(chip.$chip-close-button-icon);
|
|
33
36
|
position: absolute;
|
|
34
37
|
top: 50%;
|
|
35
|
-
left: chip.$chip-padding-x;
|
|
36
38
|
transform: translateY(-50%);
|
|
37
39
|
}
|
|
38
40
|
|
|
@@ -47,15 +49,19 @@
|
|
|
47
49
|
|
|
48
50
|
.chip-filter {
|
|
49
51
|
display: inline-block;
|
|
52
|
+
max-width: 100%;
|
|
50
53
|
|
|
51
54
|
&-label {
|
|
52
55
|
@include chip-mx.chip-styles();
|
|
53
56
|
cursor: pointer;
|
|
54
57
|
|
|
55
58
|
> .badge {
|
|
59
|
+
box-sizing: border-box;
|
|
60
|
+
min-width: var(--post-badge-height);
|
|
61
|
+
padding-inline: calc(var(--post-badge-padding-x) * 0.75);
|
|
56
62
|
color: chip.$chip-hover-color;
|
|
57
63
|
background-color: chip.$chip-hover-bg;
|
|
58
|
-
border-color
|
|
64
|
+
border: chip.$chip-border-width solid chip.$chip-border-color;
|
|
59
65
|
transition: chip.$chip-transition;
|
|
60
66
|
}
|
|
61
67
|
}
|
|
@@ -67,7 +73,6 @@
|
|
|
67
73
|
+ .chip-filter-label {
|
|
68
74
|
color: chip.$chip-active-color;
|
|
69
75
|
background-color: chip.$chip-active-bg;
|
|
70
|
-
border-color: transparent;
|
|
71
76
|
|
|
72
77
|
> .badge {
|
|
73
78
|
background-color: chip.$chip-bg;
|
|
@@ -137,16 +142,14 @@
|
|
|
137
142
|
.chip-sm {
|
|
138
143
|
&.chip-dismissible {
|
|
139
144
|
@include chip-mx.chip-styles-sm();
|
|
145
|
+
padding-inline-start: chip.$chip-dismissable-padding-start;
|
|
146
|
+
gap: chip.$chip-gap-sm;
|
|
140
147
|
|
|
141
148
|
&::before,
|
|
142
149
|
&::after {
|
|
143
150
|
height: chip.$chip-close-button-height-sm;
|
|
144
151
|
width: chip.$chip-close-button-height-sm;
|
|
145
152
|
}
|
|
146
|
-
|
|
147
|
-
&::after {
|
|
148
|
-
left: chip.$chip-padding-x-sm;
|
|
149
|
-
}
|
|
150
153
|
}
|
|
151
154
|
|
|
152
155
|
&.chip-filter > .chip-filter-label {
|
|
@@ -154,6 +157,9 @@
|
|
|
154
157
|
|
|
155
158
|
> .badge {
|
|
156
159
|
@extend %badge-sm;
|
|
160
|
+
line-height: chip.$chip-badge-line-height;
|
|
161
|
+
border-width: chip.$chip-badge-border-width;
|
|
162
|
+
padding-inline: calc(var(--post-badge-padding-x) * 1.2);
|
|
157
163
|
}
|
|
158
164
|
}
|
|
159
165
|
}
|
package/functions/_index.scss
CHANGED
package/functions/_sizing.scss
CHANGED
|
@@ -31,25 +31,6 @@
|
|
|
31
31
|
@return (strip-unit($val) + 0px);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
// Hardcoded numbers come directly from design (new CI/CD)
|
|
35
|
-
// line-height always depends on font-size
|
|
36
|
-
// Deprecated
|
|
37
|
-
@function line-height-calc($val) {
|
|
38
|
-
@if $val < px-to-rem(17) {
|
|
39
|
-
@return 1.5;
|
|
40
|
-
} @else if $val < px-to-rem(21) {
|
|
41
|
-
@return 1.4;
|
|
42
|
-
} @else if $val < px-to-rem(25) {
|
|
43
|
-
@return 1.3;
|
|
44
|
-
} @else if $val < px-to-rem(33) {
|
|
45
|
-
@return 1.2;
|
|
46
|
-
} @else if $val < px-to-rem(49) {
|
|
47
|
-
@return 1.1;
|
|
48
|
-
} @else {
|
|
49
|
-
@return 1;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
34
|
@function calculate-inner-height(
|
|
54
35
|
$font-size,
|
|
55
36
|
$line-height,
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
@use 'sass:meta';
|
|
2
|
+
@use 'sass:map';
|
|
3
|
+
@use 'sass:string';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @function get($prefix, $key-name)
|
|
7
|
+
* Gets a token-key, normalizes and resolves it with the $default-map.
|
|
8
|
+
*
|
|
9
|
+
* @param {string} $prefix - The token map name.
|
|
10
|
+
* @param {string} $key-name - The token key name.
|
|
11
|
+
* @param {map} $map - The map to get the token key from.
|
|
12
|
+
*
|
|
13
|
+
* @returns {any} $value of $normalized-prefix[$normalized-key-name]
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* @use '../tokens/components' as components;
|
|
17
|
+
* @use '../functions/tokens' as tokens;
|
|
18
|
+
*
|
|
19
|
+
* // set the default map to use or always use the third function parameter to specify a different map.
|
|
20
|
+
* tokens.$default-map: components.$post-body;
|
|
21
|
+
*
|
|
22
|
+
* // lets say you have two keys: 'post-selector-font-family' and 'post-selector-font-size' in the same map.
|
|
23
|
+
* // then use it like so:
|
|
24
|
+
*
|
|
25
|
+
* selector {
|
|
26
|
+
* font-family: tokens.get('post-selector', 'font-family');
|
|
27
|
+
* font-family: tokens.get('selector', 'font-family');
|
|
28
|
+
*
|
|
29
|
+
* font-family: tokens.get('selector-font', 'family');
|
|
30
|
+
* font-size: tokens.get('selector-font', 'size');
|
|
31
|
+
*
|
|
32
|
+
* font-family: tokens.get('selector', 'font-family', $my-custom-map); // use a different map than the default one
|
|
33
|
+
* }
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
$_namespace: 'post';
|
|
37
|
+
$default-map: null !default;
|
|
38
|
+
|
|
39
|
+
@function get($prefix, $key-name, $map: $default-map) {
|
|
40
|
+
$key-name: normalize-key-name($prefix, $key-name);
|
|
41
|
+
|
|
42
|
+
@if not map.has-key($map, $key-name) {
|
|
43
|
+
@error 'No such key "#{$key-name}" in given map! Available keys are: #{meta.inspect(map.keys($map))}.';
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@return map.get($map, $key-name);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@function normalize-key-name($original-prefix, $key-name) {
|
|
50
|
+
$namespaced-prefix: normalize-prefix($original-prefix);
|
|
51
|
+
$prefix: string.slice($namespaced-prefix, string.length('#{$_namespace}-') + 1);
|
|
52
|
+
$key-contains-namespace: string.index($key-name, '#{$_namespace}-') == 1;
|
|
53
|
+
$key-contains-prefix: string.index($key-name, '#{$prefix}-') == 1;
|
|
54
|
+
|
|
55
|
+
@if not $key-contains-namespace {
|
|
56
|
+
@if not $key-contains-prefix {
|
|
57
|
+
$key-name: '#{$namespaced-prefix}-#{$key-name}';
|
|
58
|
+
} @else {
|
|
59
|
+
$key-name: '#{$_namespace}-#{$key-name}';
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@return $key-name;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@function normalize-prefix($prefix) {
|
|
67
|
+
$prefix-contains-namespace: string.index($prefix, '#{$_namespace}-') == 1;
|
|
68
|
+
|
|
69
|
+
@if not $prefix-contains-namespace {
|
|
70
|
+
$prefix: '#{$_namespace}-#{$prefix}';
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@return $prefix;
|
|
74
|
+
}
|