@swisspost/design-system-styles 8.2.0 → 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/components/form-validation.css +1 -1
- package/components/form-validation.scss +4 -1
- package/functions/_index.scss +1 -0
- package/functions/_sizing.scss +0 -19
- package/functions/_tokens.scss +74 -0
- package/index.css +2 -2
- package/intranet.css +2 -2
- package/package.json +8 -8
- package/post-external.css +3 -3
- package/post-internal.css +3 -3
- 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/_chip.scss +8 -1
- package/variables/components/_datatable.scss +0 -6
- package/variables/components/_form-check.scss +1 -38
- package/variables/components/_stepper.scss +2 -9
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
|
}
|
|
@@ -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
|
-
*/.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-success);border-radius:0}.was-validated :valid~.valid-tooltip,.is-valid~.valid-tooltip{display:block}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-danger);border-radius:0}.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-tooltip{display:block}.invalid-feedback,.valid-feedback{display:none;align-items:center;width:100%;margin-block:0 0;padding:.375rem 1rem;font-size:.75rem}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.invalid-feedback,.valid-feedback{padding-inline:0}}.invalid-feedback::before,.valid-feedback::before{content:"";height:1.125rem;width:1.125rem;
|
|
29
|
+
*/.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-success);border-radius:0}.was-validated :valid~.valid-tooltip,.is-valid~.valid-tooltip{display:block}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-danger);border-radius:0}.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-tooltip{display:block}.invalid-feedback,.valid-feedback{display:none;align-items:center;width:100%;margin-block:0 0;padding:.375rem 1rem;font-size:.75rem}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.invalid-feedback,.valid-feedback{padding-inline:0}}.invalid-feedback::before,.valid-feedback::before{content:"";flex-shrink:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;align-self:flex-start;height:1.125rem;width:1.125rem;margin-right:.5rem}.invalid-feedback{background:#a51728;color:#fff}.invalid-feedback::before{-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 2.362-16 27.7h32zm0 2.666 13.69 23.7H2.31zm-1.12 17.056-.364-9.417h2.942l-.401 9.417zm-.23 1.242h2.674V26H14.65z'/%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 2.362-16 27.7h32zm0 2.666 13.69 23.7H2.31zm-1.12 17.056-.364-9.417h2.942l-.401 9.417zm-.23 1.242h2.674V26H14.65z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.valid-feedback{background:#2c871d;color:#fff}.valid-feedback::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%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='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.valid-feedback.custom-feedback{background:#2c871d;color:#fff}.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip,.is-valid~.valid-feedback,.is-valid~.valid-tooltip{display:inline-flex}.was-validated .input-group>.form-control:not(:focus):valid,.input-group>.form-control:not(:focus).is-valid,.was-validated .input-group>.form-select:not(:focus):valid,.input-group>.form-select:not(:focus).is-valid,.was-validated .input-group>.form-floating:not(:focus-within):valid,.input-group>.form-floating:not(:focus-within).is-valid{z-index:3}.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip{display:inline-flex}.was-validated .input-group>.form-control:not(:focus):invalid,.input-group>.form-control:not(:focus).is-invalid,.was-validated .input-group>.form-select:not(:focus):invalid,.input-group>.form-select:not(:focus).is-invalid,.was-validated .input-group>.form-floating:not(:focus-within):invalid,.input-group>.form-floating:not(:focus-within).is-invalid{z-index:4}.is-invalid~.invalid-feedback,.is-valid~.valid-feedback,post-card-control~.invalid-feedback{display:inline-flex}.form-control.is-invalid:not(:disabled),.form-select.is-invalid:not(:disabled){border-color:#a51728}.form-control.is-invalid:not(:disabled):focus,.form-select.is-invalid:not(:disabled):focus{border-color:#a51728}.form-control.is-invalid.form-control-sm~.invalid-feedback,.form-select.is-invalid.form-control-sm~.invalid-feedback{padding:.25rem 1rem}.form-control.is-valid:not(:disabled),.form-select.is-valid:not(:disabled){border-color:var(--post-success)}.form-control.is-valid:not(:disabled):focus,.form-select.is-valid:not(:disabled):focus{border-color:var(--post-success)}.form-control.is-valid.form-control-sm~.valid-feedback,.form-select.is-valid.form-control-sm~.valid-feedback{padding:.25rem 1rem}.form-check-input.is-invalid{border-color:#a51728}.form-check-input.is-invalid~.form-check-label{color:#a51728}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .form-check-input.is-invalid{border-color:inherit}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .form-check-input.is-invalid~.form-check-label{color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input.is-invalid{border-color:FieldText}}
|
|
@@ -31,9 +31,12 @@
|
|
|
31
31
|
|
|
32
32
|
&::before {
|
|
33
33
|
content: '';
|
|
34
|
+
flex-shrink: 0;
|
|
35
|
+
-webkit-mask-repeat: no-repeat;
|
|
36
|
+
mask-repeat: no-repeat;
|
|
37
|
+
align-self: flex-start;
|
|
34
38
|
height: form-validation.$form-feedback-font-size * type.$line-height-copy;
|
|
35
39
|
width: form-validation.$form-feedback-font-size * type.$line-height-copy;
|
|
36
|
-
display: inline-block;
|
|
37
40
|
margin-right: spacing.$size-mini;
|
|
38
41
|
}
|
|
39
42
|
}
|
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
|
+
}
|