@swisspost/design-system-styles 9.0.3 → 9.2.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.
@@ -0,0 +1,150 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Mon, 15 Sep 2025 10:53:04 GMT
5
+
6
+ $post-interactives: (
7
+ post-comp-interactive-color-primary-bg-enabled: var(--post-sem-color-interactive-primary-enabled-bg),
8
+ post-comp-interactive-color-primary-fg-enabled: var(--post-sem-color-interactive-primary-enabled-fg1),
9
+ post-comp-interactive-color-primary-bg-hover: var(--post-sem-color-interactive-primary-hover-bg),
10
+ post-comp-interactive-color-primary-fg-hover: var(--post-sem-color-interactive-primary-hover-fg1),
11
+ post-comp-interactive-color-primary-bg-disabled: var(--post-sem-color-interactive-primary-disabled-bg),
12
+ post-comp-interactive-color-primary-fg-disabled: var(--post-sem-color-interactive-primary-disabled-fg1),
13
+ post-comp-interactive-color-primary-bg-selected: var(--post-sem-color-interactive-primary-selected-bg),
14
+ post-comp-interactive-color-primary-fg-selected: var(--post-sem-color-interactive-primary-selected-fg1),
15
+ post-comp-interactive-color-primary-fg-help: var(--post-sem-color-interactive-primary-enabled-fg2),
16
+ post-comp-interactive-color-primary-stroke-enabled: var(--post-sem-color-interactive-primary-enabled-stroke),
17
+ post-comp-interactive-color-primary-stroke-hover: var(--post-sem-color-interactive-primary-hover-stroke),
18
+ post-comp-interactive-color-primary-stroke-disabled: var(--post-sem-color-interactive-primary-disabled-stroke),
19
+ post-comp-interactive-color-primary-stroke-selected: var(--post-sem-color-interactive-primary-selected-stroke),
20
+ post-comp-interactive-color-primary-handle-fg-enabled: var(--post-sem-color-interactive-primary-enabled-fg-handle),
21
+ post-comp-interactive-color-primary-handle-bg-enabled: var(--post-sem-color-interactive-primary-enabled-bg-handle),
22
+ post-comp-interactive-color-primary-handle-fg-selected: var(--post-sem-color-interactive-primary-selected-fg-handle),
23
+ post-comp-interactive-color-primary-handle-bg-selected: var(--post-sem-color-interactive-primary-selected-bg-handle),
24
+ post-comp-interactive-color-primary-handle-fg-hover: var(--post-sem-color-interactive-primary-enabled-fg-handle),
25
+ post-comp-interactive-color-primary-handle-bg-hover: var(--post-sem-color-interactive-primary-hover-bg-handle),
26
+ post-comp-interactive-color-primary-handle-fg-disabled: var(--post-sem-color-interactive-primary-disabled-fg-handle),
27
+ post-comp-interactive-color-primary-handle-bg-disabled: var(--post-sem-color-interactive-primary-disabled-bg-handle),
28
+ post-comp-interactive-color-primary-handle-stroke-disabled: var(--post-sem-color-interactive-primary-disabled-stroke-handle),
29
+ post-comp-interactive-color-signal-error: var(--post-sem-color-signal-error-dark),
30
+ post-comp-interactive-color-signal-success: var(--post-sem-color-signal-success-dark),
31
+ post-comp-interactive-color-focus-stroke: var(--post-sem-color-interactive-focus-stroke),
32
+ post-comp-interactive-color-focus-stroke-inverted: var(--post-sem-color-interactive-focus-stroke-inverted),
33
+ post-comp-interactive-spacing-gap-block-1: var(--post-sem-spacing-interactive-gap-block-1),
34
+ post-comp-interactive-spacing-gap-block-2: var(--post-sem-spacing-interactive-gap-block-2),
35
+ post-comp-interactive-spacing-gap-inline-1: var(--post-sem-spacing-interactive-gap-inline-1),
36
+ post-comp-interactive-spacing-gap-inline-switch: var(--post-sem-spacing-interactive-gap-inline-3),
37
+ post-comp-interactive-spacing-padding-block-icon-inner: var(--post-sem-spacing-interactive-padding-1),
38
+ post-comp-interactive-spacing-padding-inline-icon-inner: var(--post-sem-spacing-interactive-padding-1),
39
+ post-comp-interactive-textfields-spacing-padding-inline-text-start: var(--post-sem-spacing-interactive-padding-inline-1),
40
+ post-comp-interactive-textfields-spacing-padding-inline-text-end: var(--post-sem-spacing-interactive-padding-3),
41
+ post-comp-interactive-textfields-spacing-padding-inline-text-assist: var(--post-sem-spacing-interactive-padding-2),
42
+ post-comp-interactive-textfields-spacing-padding-block-text1: var(--post-sem-spacing-interactive-padding-block-1),
43
+ post-comp-interactive-textfields-spacing-padding-block-text2: var(--post-sem-spacing-interactive-padding-block-3),
44
+ post-comp-interactive-textfields-spacing-padding-block-text3: var(--post-sem-spacing-interactive-padding-block-4),
45
+ post-comp-interactive-textfields-spacing-padding-block-text-assist: var(--post-sem-spacing-interactive-padding-block-5),
46
+ post-comp-interactive-textfields-spacing-padding-block-text4: var(--post-sem-spacing-interactive-padding-3),
47
+ post-comp-interactive-textfields-spacing-padding-block-textarea-top: var(--post-sem-spacing-interactive-padding-block-9),
48
+ post-comp-interactive-textfields-spacing-gap-inline-1: var(--post-sem-spacing-interactive-gap-inline-2),
49
+ post-comp-interactive-textfields-spacing-gap-inline-2: var(--post-sem-spacing-interactive-gap-inline-4),
50
+ post-comp-interactive-sizing-icon-width-inner: var(--post-sem-sizing-interactive-icon-width),
51
+ post-comp-interactive-sizing-icon-height-inner: var(--post-sem-sizing-interactive-icon-height),
52
+ post-comp-interactive-clickable-spacing-padding-inline-text-start: var(--post-sem-spacing-interactive-padding-inline-2),
53
+ post-comp-interactive-clickable-spacing-padding-block-text: var(--post-sem-spacing-interactive-padding-block-6),
54
+ post-comp-interactive-switch-spacing-padding-block-text: var(--post-sem-spacing-interactive-padding-block-7),
55
+ post-comp-interactive-switch-spacing-padding-block-group-bottom: var(--post-sem-spacing-interactive-padding-block-8),
56
+ post-comp-interactive-button-primary-color-fg-enabled: var(--post-sem-color-interactive-button-primary-enabled-fg),
57
+ post-comp-interactive-button-primary-color-bg-enabled: var(--post-sem-color-interactive-button-primary-enabled-bg),
58
+ post-comp-interactive-button-primary-color-stroke-enabled: var(--post-sem-color-interactive-button-primary-enabled-stroke),
59
+ post-comp-interactive-button-primary-color-fg-hover: var(--post-sem-color-interactive-button-primary-hover-fg),
60
+ post-comp-interactive-button-primary-color-bg-hover: var(--post-sem-color-interactive-button-primary-hover-bg),
61
+ post-comp-interactive-button-primary-color-stroke-hover: var(--post-sem-color-interactive-button-primary-hover-stroke),
62
+ post-comp-interactive-button-primary-color-fg-disabled: var(--post-sem-color-interactive-button-primary-disabled-fg),
63
+ post-comp-interactive-button-primary-color-bg-disabled: var(--post-sem-color-interactive-button-primary-disabled-bg),
64
+ post-comp-interactive-button-primary-color-stroke-disabled: var(--post-sem-color-interactive-button-primary-disabled-stroke),
65
+ post-comp-interactive-button-secondary-color-fg-enabled: var(--post-sem-color-interactive-button-secondary-enabled-fg),
66
+ post-comp-interactive-button-secondary-color-bg-enabled: var(--post-sem-color-interactive-button-secondary-enabled-bg),
67
+ post-comp-interactive-button-secondary-color-stroke-enabled: var(--post-sem-color-interactive-button-secondary-enabled-stroke),
68
+ post-comp-interactive-button-secondary-color-fg-hover: var(--post-sem-color-interactive-button-secondary-hover-fg),
69
+ post-comp-interactive-button-secondary-color-bg-hover: var(--post-sem-color-interactive-button-secondary-hover-bg),
70
+ post-comp-interactive-button-secondary-color-stroke-hover: var(--post-sem-color-interactive-button-secondary-hover-stroke),
71
+ post-comp-interactive-button-secondary-color-fg-disabled: var(--post-sem-color-interactive-button-secondary-disabled-fg),
72
+ post-comp-interactive-button-secondary-color-bg-disabled: var(--post-sem-color-interactive-button-secondary-disabled-bg),
73
+ post-comp-interactive-button-secondary-color-stroke-disabled: var(--post-sem-color-interactive-button-secondary-disabled-stroke),
74
+ post-comp-interactive-breadcrumb-spacing-padding-block-text: var(--post-sem-spacing-interactive-padding-block-7),
75
+ post-comp-interactive-breadcrumb-spacing-gap-inline-outer: var(--post-sem-spacing-interactive-gap-inline-4),
76
+ post-comp-interactive-breadcrumb-spacing-gap-inline-inner: var(--post-sem-spacing-interactive-gap-inline-5),
77
+ );
78
+
79
+ $post-notifications: (
80
+ post-comp-interactive-color-primary-bg-enabled: var(--post-sem-color-interactive-primary-enabled-bg),
81
+ post-comp-interactive-color-primary-fg-enabled: var(--post-sem-color-interactive-primary-enabled-fg1),
82
+ post-comp-interactive-color-primary-bg-hover: var(--post-sem-color-interactive-primary-hover-bg),
83
+ post-comp-interactive-color-primary-fg-hover: var(--post-sem-color-interactive-primary-hover-fg1),
84
+ post-comp-interactive-color-primary-bg-disabled: var(--post-sem-color-interactive-primary-disabled-bg),
85
+ post-comp-interactive-color-primary-fg-disabled: var(--post-sem-color-interactive-primary-disabled-fg1),
86
+ post-comp-interactive-color-primary-bg-selected: var(--post-sem-color-interactive-primary-selected-bg),
87
+ post-comp-interactive-color-primary-fg-selected: var(--post-sem-color-interactive-primary-selected-fg1),
88
+ post-comp-interactive-color-primary-fg-help: var(--post-sem-color-interactive-primary-enabled-fg2),
89
+ post-comp-interactive-color-primary-stroke-enabled: var(--post-sem-color-interactive-primary-enabled-stroke),
90
+ post-comp-interactive-color-primary-stroke-hover: var(--post-sem-color-interactive-primary-hover-stroke),
91
+ post-comp-interactive-color-primary-stroke-disabled: var(--post-sem-color-interactive-primary-disabled-stroke),
92
+ post-comp-interactive-color-primary-stroke-selected: var(--post-sem-color-interactive-primary-selected-stroke),
93
+ post-comp-interactive-color-primary-handle-fg-enabled: var(--post-sem-color-interactive-primary-enabled-fg-handle),
94
+ post-comp-interactive-color-primary-handle-bg-enabled: var(--post-sem-color-interactive-primary-enabled-bg-handle),
95
+ post-comp-interactive-color-primary-handle-fg-selected: var(--post-sem-color-interactive-primary-selected-fg-handle),
96
+ post-comp-interactive-color-primary-handle-bg-selected: var(--post-sem-color-interactive-primary-selected-bg-handle),
97
+ post-comp-interactive-color-primary-handle-fg-hover: var(--post-sem-color-interactive-primary-enabled-fg-handle),
98
+ post-comp-interactive-color-primary-handle-bg-hover: var(--post-sem-color-interactive-primary-hover-bg-handle),
99
+ post-comp-interactive-color-primary-handle-fg-disabled: var(--post-sem-color-interactive-primary-disabled-fg-handle),
100
+ post-comp-interactive-color-primary-handle-bg-disabled: var(--post-sem-color-interactive-primary-disabled-bg-handle),
101
+ post-comp-interactive-color-primary-handle-stroke-disabled: var(--post-sem-color-interactive-primary-disabled-stroke-handle),
102
+ post-comp-interactive-color-signal-error: var(--post-sem-color-signal-error-dark),
103
+ post-comp-interactive-color-signal-success: var(--post-sem-color-signal-success-dark),
104
+ post-comp-interactive-color-focus-stroke: var(--post-sem-color-interactive-focus-stroke),
105
+ post-comp-interactive-color-focus-stroke-inverted: var(--post-sem-color-interactive-focus-stroke-inverted),
106
+ post-comp-interactive-spacing-gap-block-1: var(--post-sem-spacing-interactive-gap-block-1),
107
+ post-comp-interactive-spacing-gap-block-2: var(--post-sem-spacing-interactive-gap-block-2),
108
+ post-comp-interactive-spacing-gap-inline-1: var(--post-sem-spacing-interactive-gap-inline-1),
109
+ post-comp-interactive-spacing-gap-inline-switch: var(--post-sem-spacing-interactive-gap-inline-3),
110
+ post-comp-interactive-spacing-padding-block-icon-inner: var(--post-sem-spacing-interactive-padding-1),
111
+ post-comp-interactive-spacing-padding-inline-icon-inner: var(--post-sem-spacing-interactive-padding-1),
112
+ post-comp-interactive-textfields-spacing-padding-inline-text-start: var(--post-sem-spacing-interactive-padding-inline-1),
113
+ post-comp-interactive-textfields-spacing-padding-inline-text-end: var(--post-sem-spacing-interactive-padding-3),
114
+ post-comp-interactive-textfields-spacing-padding-inline-text-assist: var(--post-sem-spacing-interactive-padding-2),
115
+ post-comp-interactive-textfields-spacing-padding-block-text1: var(--post-sem-spacing-interactive-padding-block-1),
116
+ post-comp-interactive-textfields-spacing-padding-block-text2: var(--post-sem-spacing-interactive-padding-block-3),
117
+ post-comp-interactive-textfields-spacing-padding-block-text3: var(--post-sem-spacing-interactive-padding-block-4),
118
+ post-comp-interactive-textfields-spacing-padding-block-text-assist: var(--post-sem-spacing-interactive-padding-block-5),
119
+ post-comp-interactive-textfields-spacing-padding-block-text4: var(--post-sem-spacing-interactive-padding-3),
120
+ post-comp-interactive-textfields-spacing-padding-block-textarea-top: var(--post-sem-spacing-interactive-padding-block-9),
121
+ post-comp-interactive-textfields-spacing-gap-inline-1: var(--post-sem-spacing-interactive-gap-inline-2),
122
+ post-comp-interactive-textfields-spacing-gap-inline-2: var(--post-sem-spacing-interactive-gap-inline-4),
123
+ post-comp-interactive-sizing-icon-width-inner: var(--post-sem-sizing-interactive-icon-width),
124
+ post-comp-interactive-sizing-icon-height-inner: var(--post-sem-sizing-interactive-icon-height),
125
+ post-comp-interactive-clickable-spacing-padding-inline-text-start: var(--post-sem-spacing-interactive-padding-inline-2),
126
+ post-comp-interactive-clickable-spacing-padding-block-text: var(--post-sem-spacing-interactive-padding-block-6),
127
+ post-comp-interactive-switch-spacing-padding-block-text: var(--post-sem-spacing-interactive-padding-block-7),
128
+ post-comp-interactive-switch-spacing-padding-block-group-bottom: var(--post-sem-spacing-interactive-padding-block-8),
129
+ post-comp-interactive-button-primary-color-fg-enabled: var(--post-sem-color-interactive-button-primary-enabled-fg),
130
+ post-comp-interactive-button-primary-color-bg-enabled: var(--post-sem-color-interactive-button-primary-enabled-bg),
131
+ post-comp-interactive-button-primary-color-stroke-enabled: var(--post-sem-color-interactive-button-primary-enabled-stroke),
132
+ post-comp-interactive-button-primary-color-fg-hover: var(--post-sem-color-interactive-button-primary-hover-fg),
133
+ post-comp-interactive-button-primary-color-bg-hover: var(--post-sem-color-interactive-button-primary-hover-bg),
134
+ post-comp-interactive-button-primary-color-stroke-hover: var(--post-sem-color-interactive-button-primary-hover-stroke),
135
+ post-comp-interactive-button-primary-color-fg-disabled: var(--post-sem-color-interactive-button-primary-disabled-fg),
136
+ post-comp-interactive-button-primary-color-bg-disabled: var(--post-sem-color-interactive-button-primary-disabled-bg),
137
+ post-comp-interactive-button-primary-color-stroke-disabled: var(--post-sem-color-interactive-button-primary-disabled-stroke),
138
+ post-comp-interactive-button-secondary-color-fg-enabled: var(--post-sem-color-interactive-button-secondary-enabled-fg),
139
+ post-comp-interactive-button-secondary-color-bg-enabled: var(--post-sem-color-interactive-button-secondary-enabled-bg),
140
+ post-comp-interactive-button-secondary-color-stroke-enabled: var(--post-sem-color-interactive-button-secondary-enabled-stroke),
141
+ post-comp-interactive-button-secondary-color-fg-hover: var(--post-sem-color-interactive-button-secondary-hover-fg),
142
+ post-comp-interactive-button-secondary-color-bg-hover: var(--post-sem-color-interactive-button-secondary-hover-bg),
143
+ post-comp-interactive-button-secondary-color-stroke-hover: var(--post-sem-color-interactive-button-secondary-hover-stroke),
144
+ post-comp-interactive-button-secondary-color-fg-disabled: var(--post-sem-color-interactive-button-secondary-disabled-fg),
145
+ post-comp-interactive-button-secondary-color-bg-disabled: var(--post-sem-color-interactive-button-secondary-disabled-bg),
146
+ post-comp-interactive-button-secondary-color-stroke-disabled: var(--post-sem-color-interactive-button-secondary-disabled-stroke),
147
+ post-comp-interactive-breadcrumb-spacing-padding-block-text: var(--post-sem-spacing-interactive-padding-block-7),
148
+ post-comp-interactive-breadcrumb-spacing-gap-inline-outer: var(--post-sem-spacing-interactive-gap-inline-4),
149
+ post-comp-interactive-breadcrumb-spacing-gap-inline-inner: var(--post-sem-spacing-interactive-gap-inline-5),
150
+ );
@@ -1,6 +1,7 @@
1
- // Do not edit manually!
2
- // This file was generated on:
3
- // Mon, 28 Jul 2025 08:25:20 GMT by the @swisspost/design-system-tokens package build command
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Mon, 15 Sep 2025 10:53:04 GMT
4
5
 
5
6
  :root {
6
7
  --post-core-color-brand-postyellow: #ffcc00;
@@ -83,20 +84,20 @@
83
84
  --post-core-font-weight-300: 300;
84
85
  --post-core-font-weight-400: 400;
85
86
  --post-core-font-weight-700: 700;
86
- --post-core-font-size-12: 12px;
87
- --post-core-font-size-14: 14px;
88
- --post-core-font-size-16: 16px;
89
- --post-core-font-size-18: 18px;
90
- --post-core-font-size-20: 20px;
91
- --post-core-font-size-22: 22px;
92
- --post-core-font-size-24: 24px;
93
- --post-core-font-size-26: 26px;
94
- --post-core-font-size-28: 28px;
95
- --post-core-font-size-30: 30px;
96
- --post-core-font-size-32: 32px;
97
- --post-core-font-size-34: 34px;
98
- --post-core-font-size-36: 36px;
99
- --post-core-font-size-40: 40px;
87
+ --post-core-font-size-12: 0.75rem;
88
+ --post-core-font-size-14: 0.875rem;
89
+ --post-core-font-size-16: 1rem;
90
+ --post-core-font-size-18: 1.125rem;
91
+ --post-core-font-size-20: 1.25rem;
92
+ --post-core-font-size-22: 1.375rem;
93
+ --post-core-font-size-24: 1.5rem;
94
+ --post-core-font-size-26: 1.625rem;
95
+ --post-core-font-size-28: 1.75rem;
96
+ --post-core-font-size-30: 1.875rem;
97
+ --post-core-font-size-32: 2rem;
98
+ --post-core-font-size-34: 2.125rem;
99
+ --post-core-font-size-36: 2.25rem;
100
+ --post-core-font-size-40: 2.5rem;
100
101
  --post-core-line-height-120: 1.2;
101
102
  --post-core-line-height-140: 1.4;
102
103
  --post-core-line-height-150: 1.5;
@@ -107,6 +108,6 @@
107
108
  --post-core-elevation-3: 0 4px 8px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
108
109
  --post-core-elevation-4: inset 0 8px 16px 0 rgba(0,0,0,0.16), inset 0 0 2px 0 rgba(0,0,0,0.16);
109
110
  --post-core-elevation-5: 0 14px 28px 0 rgba(0,0,0,0.24), 0 0 8px 0 rgba(0,0,0,0.24);
110
- --post-core-border-focus: 2px solid #050400;
111
- --post-core-border-disabled: 2px dashed #696864;
111
+ --post-core-border-focus: var(--post-core-color-sandgrey-100) var(--post-core-dimension-2) solid;
112
+ --post-core-border-disabled: var(--post-core-color-sandgrey-060) var(--post-core-dimension-2) dashed;
112
113
  }