@swisspost/design-system-styles 8.4.0 → 8.6.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/_svg-icon-map.scss +4 -0
- package/components/chip.css +1 -1
- package/components/chip.scss +6 -6
- package/index.css +1 -1
- package/intranet.css +1 -1
- package/package.json +3 -3
- package/post-external.css +1 -1
- package/post-internal.css +1 -1
- package/tokens/temp/channel.scss +1 -1
- package/tokens/temp/components.scss +1 -1
- package/tokens/temp/core.scss +1 -1
- package/tokens/temp/device.scss +1 -1
- package/tokens/temp/index.scss +1 -1
- package/tokens/temp/mode.scss +1 -1
- package/tokens/temp/theme.scss +1 -1
package/_svg-icon-map.scss
CHANGED
|
@@ -559,6 +559,10 @@ $svg-icon-map: (
|
|
|
559
559
|
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.6 24h-9.7v-1.5c4-3.5 7.8-7.6 7.8-10.3 0-4.2-6.3-2.4-6.9-2l-.3-1.4c.6-.3 8.8-3.1 8.8 3.4 0 3.8-7.3 10.1-7.8 10.4h8.1z'/%3E%3C/svg%3E",
|
|
560
560
|
'3000':
|
|
561
561
|
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M17.4 8.2V24h-1.6V9.9c-.2.2-.5.5-.9.8-.3.3-.7.6-1 .9l-.9.8-.8-1L16 8.2z'/%3E%3C/svg%3E",
|
|
562
|
+
'2633':
|
|
563
|
+
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.35 2.67c3.18 0 8.44 2.49 11.16 4.25 2.45 1.59 6.62 5.07 7.82 7.51.69 1.4.33 2.27-1.03 4-3.65 4.68-10.88 9.13-16.44 10.14-.62.11-1.11.17-1.5.17-.86 0-1.43-.1-2.22-2.06C4.77 20.8 5.01 11.67 6.6 6.23c.88-3.01 1.71-3.46 2.02-3.51.22-.04.47-.06.74-.06m-.01-1.33c-.34 0-.66.02-.96.07-1.74.29-2.64 2.96-3.08 4.45-1.77 6.04-1.79 15.43.59 21.32.85 2.12 1.76 2.89 3.46 2.89.5 0 1.08-.07 1.74-.19 6.01-1.09 13.51-5.84 17.26-10.63 1.36-1.75 2.25-3.22 1.17-5.41-1.34-2.72-5.74-6.38-8.29-8.04-2.7-1.75-8.27-4.46-11.88-4.46Z'/%3E%3C/svg%3E",
|
|
564
|
+
'2632':
|
|
565
|
+
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16s7.16 16 16 16 16-7.16 16-16S24.84 0 16 0m0 30.67C7.91 30.67 1.33 24.09 1.33 16S7.91 1.33 16 1.33 30.67 7.91 30.67 16 24.09 30.67 16 30.67M9.18 10.66c-3.35 3.35-3.35 8.81 0 12.16 1.68 1.68 3.88 2.51 6.08 2.51s4.4-.84 6.08-2.51a8.7 8.7 0 0 0 2.21-3.81L24.3 7.7l-11.24.73a8.6 8.6 0 0 0-3.88 2.23m13.68-1.53-.64 9.65a7.16 7.16 0 0 1-1.83 3.09c-1.37 1.37-3.19 2.12-5.14 2.12s-3.77-.75-5.14-2.12c-2.83-2.83-2.83-7.44 0-10.27.87-.87 1.96-1.51 3.16-1.85l9.58-.62Zm-7.6 10.83a3.2 3.2 0 0 0 2.28-.94 3.223 3.223 0 0 0 0-4.56c-.63-.63-1.45-.94-2.28-.94s-1.65.31-2.28.94a3.223 3.223 0 0 0 0 4.56 3.2 3.2 0 0 0 2.28.94m-1.34-4.56c.36-.36.83-.55 1.34-.55s.98.2 1.34.55c.36.36.55.83.55 1.34s-.2.98-.55 1.34c-.36.36-.83.55-1.34.55s-.98-.2-1.34-.55-.55-.83-.55-1.34.2-.98.55-1.34'/%3E%3C/svg%3E",
|
|
562
566
|
'2631':
|
|
563
567
|
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.99 24.54h-4.07v-4.82h4.07v-1.34h-7.76c-.37.5-.79.94-1.25 1.34h3.56v4.82h-6.28V21.3c-.44.16-.88.28-1.33.36v2.88h-6.32v-4.03a8 8 0 0 1-1.19-.92c-.04-.04-.08-.07-.12-.1-.36-.35-.69-.72-.98-1.11H.02v1.34h3.54v4.82H.01v7.49H32v-7.49zM4.95 19.72h6.32v4.82H4.95zm2.73 10.97H1.35v-4.82h6.33zm7.66 0H9.01v-4.82h6.33zm7.66 0h-6.33v-4.82H23zm7.67 0h-6.33v-4.82h6.33zM17.42 20.46c3.63 0 7.28-2.75 7.28-7.84-.01-2.46-.77-4.67-2.16-6.82 0 2.54-1.49 3.67-2.54 3.67C21.06 1.93 15.62.1 15.62.1c0 5.5-5.8 6.41-5.8 13.04 0 1.39 1.17 7.33 7.6 7.33Zm-2.36-3.77c.23.08.47.11.71.11h1.33v-1.34c0-.68.12-1.22.29-1.64.25.35.53.64.77.9.64.67 1.05 1.11 1.05 2.17 0 .02-.09 2.02-2.15 2.02-.96 0-1.99-.7-2-2.23Zm-1.11-9.88c1.05-1.25 2.19-2.63 2.72-4.52 1.18 1.05 2.55 3.13 2.02 6.99l-.21 1.52h1.53c1.02 0 2.05-.53 2.8-1.51.38 1.09.56 2.19.57 3.33 0 2.93-1.42 4.88-3.26 5.83.33-.65.44-1.28.44-1.55 0-3.03-2.66-3.08-2.66-5.6 0 0-2.12.98-2.12 4.17-.8 0-1.05-.98-1.05-1.93-.63.99-.99 2-.99 3.13 0 .6.11 1.12.31 1.58-2.66-1.66-2.88-5.07-2.88-5.11 0-2.98 1.36-4.6 2.79-6.32Z'/%3E%3C/svg%3E",
|
|
564
568
|
'2630':
|
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:18.5rem;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;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}.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%;left:1rem;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}.chip-filter-label{border-radius:50rem;display:inline-flex;align-items:center;height:2.5rem;max-width:18.5rem;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{color:#000;background-color:#ccc;border-color:rgba(0,0,0,0);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;border-color:rgba(0,0,0,0)}.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:
|
|
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:18.5rem;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;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}.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%;left:1rem;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}.chip-filter{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.chip-filter:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:50rem;width:-moz-fit-content;width:fit-content}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.chip-filter:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:50rem;width:-moz-fit-content;width:fit-content}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.chip-filter-label{border-radius:50rem;display:inline-flex;align-items:center;height:2.5rem;max-width:18.5rem;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{color:#000;background-color:#ccc;border-color:rgba(0,0,0,0);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;border-color:rgba(0,0,0,0)}.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: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}.chip-sm.chip-dismissible::before,.chip-sm.chip-dismissible::after{height:1rem;width:1rem}.chip-sm.chip-dismissible::after{left:.75rem}.chip-sm.chip-filter>.chip-filter-label{height:2rem;font-size:.875rem;gap:.375rem;padding-inline:.75rem}
|
package/components/chip.scss
CHANGED
|
@@ -48,6 +48,12 @@
|
|
|
48
48
|
.chip-filter {
|
|
49
49
|
display: inline-block;
|
|
50
50
|
|
|
51
|
+
@include utilities.focus-style() {
|
|
52
|
+
border-radius: chip.$chip-border-radius;
|
|
53
|
+
width: -moz-fit-content;
|
|
54
|
+
width: fit-content;
|
|
55
|
+
}
|
|
56
|
+
|
|
51
57
|
&-label {
|
|
52
58
|
@include chip-mx.chip-styles();
|
|
53
59
|
cursor: pointer;
|
|
@@ -103,12 +109,6 @@
|
|
|
103
109
|
text-decoration-color: initial;
|
|
104
110
|
}
|
|
105
111
|
}
|
|
106
|
-
|
|
107
|
-
@include utilities.focus-style('+ .chip-filter-label') {
|
|
108
|
-
> .chip-text {
|
|
109
|
-
text-decoration-color: transparent;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
114
|
|