@skyux/theme 11.5.0 → 11.7.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.
Files changed (4) hide show
  1. package/css/sky.css +41 -1
  2. package/css/themes/modern/styles.css +507 -8
  3. package/documentation.json +102 -102
  4. package/package.json +2 -2
package/css/sky.css CHANGED
@@ -942,8 +942,12 @@ textarea.ng-invalid.ng-touched {
942
942
  padding-left: 5px;
943
943
  }
944
944
 
945
+ .sky-control-help-container:not(:empty):not(.sky-theme-modern *) {
946
+ --sky-override-help-inline-margin-left: var(--sky-margin-inline-xs);
947
+ }
948
+
945
949
  .sky-control-help-container:not(:empty) {
946
- margin-left: var(--sky-margin-inline-xs);
950
+ margin-left: var(--sky-override-help-inline-margin-left, var(--sky-space-gap-text_action-xs));
947
951
  }
948
952
 
949
953
  fieldset {
@@ -1018,6 +1022,21 @@ select::-ms-expand {
1018
1022
  .sky-layout-host-blocks, .sky-layout-host-list, .sky-layout-host-tabs {
1019
1023
  display: block;
1020
1024
  }
1025
+ .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1026
+ --sky-layout-host-links-spacing: 10px;
1027
+ display: grid;
1028
+ grid-template: "header" "content" "links";
1029
+ grid-template-columns: 1fr;
1030
+ }
1031
+ .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header, .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links) > sky-page-header, .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) > sky-page-header {
1032
+ grid-area: header;
1033
+ }
1034
+ .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-content, .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links) > sky-page-content, .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) > sky-page-content {
1035
+ grid-area: content;
1036
+ }
1037
+ .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-links, .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links) > sky-page-links, .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) > sky-page-links {
1038
+ grid-area: links;
1039
+ }
1021
1040
  .sky-layout-host-fit, .sky-layout-host-for-child-fit {
1022
1041
  position: absolute;
1023
1042
  top: var(--sky-viewport-top);
@@ -1030,6 +1049,7 @@ select::-ms-expand {
1030
1049
  --sky-layout-host-content-flex-grow: 1;
1031
1050
  --sky-layout-host-content-overflow: auto;
1032
1051
  --sky-layout-host-content-position: relative;
1052
+ --sky-layout-host-links-display: none;
1033
1053
  }
1034
1054
  .sky-layout-host-blocks, .sky-layout-host-list, .sky-layout-host-fit, .sky-layout-host-tabs {
1035
1055
  --sky-layout-host-header-spacing: 20px 10px;
@@ -1046,6 +1066,11 @@ select::-ms-expand {
1046
1066
  }
1047
1067
 
1048
1068
  @media (min-width: 768px) {
1069
+ .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1070
+ --sky-layout-host-links-spacing: 20px;
1071
+ grid-template: "header header" "content links";
1072
+ grid-template-columns: 3fr 1fr;
1073
+ }
1049
1074
  .sky-layout-host-blocks {
1050
1075
  --sky-layout-host-header-spacing: 20px 20px 0 20px;
1051
1076
  --sky-layout-host-content-spacing: 20px;
@@ -1059,6 +1084,17 @@ select::-ms-expand {
1059
1084
  --sky-layout-host-tab-content-spacing: 20px;
1060
1085
  }
1061
1086
  }
1087
+ .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-responsive-container-sm .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-responsive-container-sm .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
1088
+ .sky-responsive-container-md .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1089
+ .sky-responsive-container-md .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1090
+ .sky-responsive-container-md .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
1091
+ .sky-responsive-container-lg .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1092
+ .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1093
+ .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1094
+ --sky-layout-host-links-spacing: 20px;
1095
+ grid-template: "header header" "content links";
1096
+ grid-template-columns: 3fr 1fr;
1097
+ }
1062
1098
  .sky-responsive-container-sm .sky-layout-host-blocks,
1063
1099
  .sky-responsive-container-md .sky-layout-host-blocks,
1064
1100
  .sky-responsive-container-lg .sky-layout-host-blocks {
@@ -1084,9 +1120,11 @@ select::-ms-expand {
1084
1120
  .sky-theme-modern .sky-layout-host-blocks {
1085
1121
  --sky-layout-host-header-spacing: 30px 30px 0 30px;
1086
1122
  --sky-layout-host-content-spacing: 30px;
1123
+ --sky-layout-host-links-spacing: 30px 30px 30px 0;
1087
1124
  }
1088
1125
  .sky-theme-modern .sky-layout-host-fit, .sky-theme-modern .sky-layout-host-list, .sky-theme-modern .sky-layout-host-tabs {
1089
1126
  --sky-layout-host-header-spacing: 30px 30px 20px 30px;
1127
+ --sky-layout-host-links-spacing: 30px;
1090
1128
  }
1091
1129
  .sky-theme-modern .sky-layout-host-fit, .sky-theme-modern .sky-layout-host-list {
1092
1130
  --sky-layout-host-content-spacing: 0 30px;
@@ -1100,6 +1138,7 @@ select::-ms-expand {
1100
1138
  .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-blocks {
1101
1139
  --sky-layout-host-header-spacing: 30px 30px 0 30px;
1102
1140
  --sky-layout-host-content-spacing: 30px;
1141
+ --sky-layout-host-links-spacing: 30px 30px 30px 0;
1103
1142
  }
1104
1143
  .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-fit, .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-list, .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-tabs,
1105
1144
  .sky-theme-modern .sky-responsive-container-md .sky-layout-host-fit,
@@ -1109,6 +1148,7 @@ select::-ms-expand {
1109
1148
  .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-list,
1110
1149
  .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-tabs {
1111
1150
  --sky-layout-host-header-spacing: 30px 30px 20px 30px;
1151
+ --sky-layout-host-links-spacing: 30px;
1112
1152
  }
1113
1153
  .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-fit, .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-list,
1114
1154
  .sky-theme-modern .sky-responsive-container-md .sky-layout-host-fit,
package/css/themes/modern/styles.css CHANGED
@@ -1,3 +1,500 @@
1
+ .sky-theme-modern {
2
+ --modern-border-style-dotted: dotted;
3
+ --modern-border-style-solid: solid;
4
+ --modern-border-radius-pill: 10rem;
5
+ --modern-border-radius-md: 6px;
6
+ --modern-shadow-size-24: 0 7px 27px 3px var(--modern-color-shadow_color);
7
+ --modern-shadow-size-16: 0 3px 25px 2px var(--modern-color-shadow_color);
8
+ --modern-shadow-size-8: 0 2px 15px 2px var(--modern-color-shadow_color);
9
+ --modern-shadow-size-4: 0 1px 12px 0 var(--modern-color-shadow_color);
10
+ --modern-shadow-size-3: 0 1px 8px 0 var(--modern-color-shadow_color);
11
+ --modern-shadow-size-1: 0 1px 3px 0 var(--modern-color-shadow_color);
12
+ --modern-shadow-size-0: 0 0 0 0 #000000;
13
+ --modern-letter_spacing-normal: normal;
14
+ --modern-line-height-normal: normal;
15
+ --modern-line-height-150: 1.5;
16
+ --modern-line-height-115: 1.15;
17
+ --modern-line-height-110: 1.1;
18
+ --modern-line-height-20: 20px;
19
+ --modern-font-blkb_sans-family: var(--modern-font-blkb_sans-name), var(--modern-font-blkb_sans-fallback);
20
+ --modern-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
21
+ --modern-font-blkb_sans-name: BLKB Sans;
22
+ --modern-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
23
+ --modern-font-style-bold: 700;
24
+ --modern-font-style-semibold: 600;
25
+ --modern-font-style-italic-style: italic;
26
+ --modern-font-style-italic-weight: 400;
27
+ --modern-font-style-normal-style: normal;
28
+ --modern-font-style-normal-weight: 400;
29
+ --modern-font-style-regular: 400;
30
+ --modern-font-style-light: 300;
31
+ --modern-font-weight-bold: 700;
32
+ --modern-font-weight-semibold: 600;
33
+ --modern-font-weight-regular: 400;
34
+ --modern-font-weight-light: 300;
35
+ --modern-font-size-800: 48px;
36
+ --modern-font-size-600: 32px;
37
+ --modern-font-size-500: 28px;
38
+ --modern-font-size-400: 24px;
39
+ --modern-font-size-300: 20px;
40
+ --modern-font-size-250: 18px;
41
+ --modern-font-size-200: 16px;
42
+ --modern-font-size-150: 14px;
43
+ --modern-font-size-125: 13px;
44
+ --modern-font-size-100: 12px;
45
+ --modern-size-400: 400px;
46
+ --modern-size-320: 320px;
47
+ --modern-size-296: 296px;
48
+ --modern-size-276: 276px;
49
+ --modern-size-236: 236px;
50
+ --modern-size-96: 96px;
51
+ --modern-size-80: 80px;
52
+ --modern-size-64: 64px;
53
+ --modern-size-48: 48px;
54
+ --modern-size-44: 44px;
55
+ --modern-size-32: 32px;
56
+ --modern-size-30: 30px;
57
+ --modern-size-26: 26px;
58
+ --modern-size-24: 24px;
59
+ --modern-size-20: 20px;
60
+ --modern-size-16: 16px;
61
+ --modern-size-15: 15px;
62
+ --modern-size-13: 13px;
63
+ --modern-size-12: 12px;
64
+ --modern-size-10: 10px;
65
+ --modern-size-9: 9px;
66
+ --modern-size-8: 8px;
67
+ --modern-size-7: 7px;
68
+ --modern-size-6: 6px;
69
+ --modern-size-5: 5px;
70
+ --modern-size-4: 4px;
71
+ --modern-size-3: 3px;
72
+ --modern-size-2: 2px;
73
+ --modern-size-1: 1px;
74
+ --modern-size-0: 0rem;
75
+ --modern-space-xxl: 60px;
76
+ --modern-space-xl: 30px;
77
+ --modern-space-lg: 20px;
78
+ --modern-space-md: 15px;
79
+ --modern-space-s: 10px;
80
+ --modern-space-xs: 5px;
81
+ --modern-space-none: 0rem;
82
+ --modern-color-sky_blue-40: #40c7f4;
83
+ --modern-color-sky_blue-20: #bfecfb;
84
+ --modern-color-yellow-50: #fbb034;
85
+ --modern-color-yellow-30: #ffd597;
86
+ --modern-color-green-50: #72bf44;
87
+ --modern-color-green-30: #b7da9b;
88
+ --modern-color-blue-05: #ebfbff;
89
+ --modern-color-blue-74: #1870b8;
90
+ --modern-color-blue-50: #00b4f1;
91
+ --modern-color-blue-30: #81d4f7;
92
+ --modern-color-blue-10: #c1e8fb;
93
+ --modern-color-scrim: rgba(0, 0, 0, 0.5);
94
+ --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
95
+ --modern-color-transparent: rgba(0, 0, 0, 0);
96
+ --modern-color-black: #000000;
97
+ --modern-color-white: #ffffff;
98
+ --modern-color-red-70: #d93a3d;
99
+ --modern-color-red-50: #ef4044;
100
+ --modern-color-red-30: #f7a08f;
101
+ --modern-color-gray-005: #fcfcfc;
102
+ --modern-color-gray-07: #ededee;
103
+ --modern-color-gray-105: #212327;
104
+ --modern-color-gray-70: #686c73;
105
+ --modern-color-gray-20: #cdcfd2;
106
+ --modern-color-gray-15: #d2d2d2;
107
+ }
108
+
109
+ .sky-theme-modern {
110
+ --sky-elevation-overlay-400: var(--modern-shadow-size-24);
111
+ --sky-elevation-overlay-300: var(--modern-shadow-size-16);
112
+ --sky-elevation-overlay-200: var(--modern-shadow-size-8);
113
+ --sky-elevation-overlay-100: var(--modern-shadow-size-4);
114
+ --sky-elevation-raised-100: var(--modern-shadow-size-1);
115
+ --sky-elevation-overflow: var(--modern-shadow-size-3);
116
+ --sky-elevation-focus: var(--modern-shadow-size-3);
117
+ --sky-elevation-none: var(--modern-shadow-size-0);
118
+ --sky-color-border-separator-row: var(--modern-color-gray-20);
119
+ --sky-color-border-separator-dark: var(--modern-color-gray-20);
120
+ --sky-color-border-input-error: var(--modern-color-red-50);
121
+ --sky-color-border-input-disabled: var(--modern-color-gray-15);
122
+ --sky-color-border-input-focus: var(--modern-color-blue-74);
123
+ --sky-color-border-input-active: var(--modern-color-blue-74);
124
+ --sky-color-border-input-hover: var(--modern-color-blue-74);
125
+ --sky-color-border-input-base: var(--modern-color-gray-15);
126
+ --sky-color-border-action-danger-disabled: var(--modern-color-gray-15);
127
+ --sky-color-border-action-danger-focus: var(--modern-color-red-30);
128
+ --sky-color-border-action-danger-active: var(--modern-color-red-30);
129
+ --sky-color-border-action-danger-hover: var(--modern-color-red-30);
130
+ --sky-color-border-action-danger-base: var(--modern-color-red-70);
131
+ --sky-color-border-action-tertiary-disabled: var(--modern-color-gray-15);
132
+ --sky-color-border-action-tertiary-active: var(--modern-color-blue-74);
133
+ --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
134
+ --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
135
+ --sky-color-border-action-tertiary-base: var(--modern-color-transparent);
136
+ --sky-color-border-action-secondary-disabled: var(--modern-color-gray-15);
137
+ --sky-color-border-action-secondary-focus: var(--modern-color-blue-74);
138
+ --sky-color-border-action-secondary-active: var(--modern-color-blue-74);
139
+ --sky-color-border-action-secondary-hover: var(--modern-color-blue-74);
140
+ --sky-color-border-action-secondary-base: var(--modern-color-gray-15);
141
+ --sky-color-border-action-primary-disabled: var(--modern-color-gray-15);
142
+ --sky-color-border-action-primary-focus: var(--modern-color-blue-10);
143
+ --sky-color-border-action-primary-active: var(--modern-color-blue-10);
144
+ --sky-color-border-action-primary-hover: var(--modern-color-blue-10);
145
+ --sky-color-border-action-primary-base: var(--modern-color-blue-74);
146
+ --sky-color-border-container-base: var(--modern-color-gray-15);
147
+ --sky-color-border-elevation: var(--modern-color-gray-15);
148
+ --sky-color-border-divider: var(--modern-color-gray-15);
149
+ --sky-color-border-info: var(--modern-color-blue-50);
150
+ --sky-color-border-success: var(--modern-color-green-50);
151
+ --sky-color-border-warning: var(--modern-color-yellow-50);
152
+ --sky-color-border-danger: var(--modern-color-red-50);
153
+ --sky-color-border-selected: var(--modern-color-blue-74);
154
+ --sky-color-background-list-disabled: var(--modern-color-gray-07);
155
+ --sky-color-background-list-focus: var(--modern-color-transparent);
156
+ --sky-color-background-list-active: var(--modern-color-transparent);
157
+ --sky-color-background-list-hover: var(--modern-color-transparent);
158
+ --sky-color-background-list-base: var(--modern-color-transparent);
159
+ --sky-color-background-nav-disabled: var(--modern-color-gray-07);
160
+ --sky-color-background-nav-focus: var(--modern-color-transparent);
161
+ --sky-color-background-nav-active: var(--modern-color-transparent);
162
+ --sky-color-background-nav-hover: var(--modern-color-transparent);
163
+ --sky-color-background-nav-base: var(--modern-color-transparent);
164
+ --sky-color-background-input-disabled: var(--modern-color-gray-07);
165
+ --sky-color-background-input-base: var(--modern-color-transparent);
166
+ --sky-color-background-selected-soft: var(--modern-color-blue-05);
167
+ --sky-color-background-selected-heavy: var(--modern-color-blue-05);
168
+ --sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
169
+ --sky-color-background-action-danger-focus: var(--modern-color-red-70);
170
+ --sky-color-background-action-danger-active: var(--modern-color-red-70);
171
+ --sky-color-background-action-danger-hover: var(--modern-color-red-70);
172
+ --sky-color-background-action-danger-base: var(--modern-color-red-70);
173
+ --sky-color-background-action-tertiary-disabled: var(--modern-color-gray-07);
174
+ --sky-color-background-action-tertiary-focus: var(--modern-color-transparent);
175
+ --sky-color-background-action-tertiary-active: var(--modern-color-transparent);
176
+ --sky-color-background-action-tertiary-hover: var(--modern-color-transparent);
177
+ --sky-color-background-action-tertiary-base: var(--modern-color-transparent);
178
+ --sky-color-background-action-secondary-disabled: var(--modern-color-gray-07);
179
+ --sky-color-background-action-secondary-focus: var(--modern-color-white);
180
+ --sky-color-background-action-secondary-active: var(--modern-color-white);
181
+ --sky-color-background-action-secondary-hover: var(--modern-color-white);
182
+ --sky-color-background-action-secondary-base: var(--modern-color-white);
183
+ --sky-color-background-action-primary-disabled: var(--modern-color-gray-07);
184
+ --sky-color-background-action-primary-focus: var(--modern-color-blue-74);
185
+ --sky-color-background-action-primary-active: var(--modern-color-blue-74);
186
+ --sky-color-background-action-primary-hover: var(--modern-color-blue-74);
187
+ --sky-color-background-action-primary-base: var(--modern-color-blue-74);
188
+ --sky-color-background-container-info: var(--modern-color-blue-10);
189
+ --sky-color-background-container-success: var(--modern-color-green-30);
190
+ --sky-color-background-container-warning: var(--modern-color-yellow-30);
191
+ --sky-color-background-container-danger: var(--modern-color-red-30);
192
+ --sky-color-background-container-menu: var(--modern-color-white);
193
+ --sky-color-background-container-base: var(--modern-color-white);
194
+ --sky-color-background-scrim: var(--modern-color-scrim);
195
+ --sky-color-background-page: var(--modern-color-gray-005);
196
+ --sky-color-icon-action: var(--modern-color-blue-74);
197
+ --sky-color-icon-inverse: var(--modern-color-white);
198
+ --sky-color-icon-info: var(--modern-color-blue-50);
199
+ --sky-color-icon-success: var(--modern-color-green-50);
200
+ --sky-color-icon-warning: var(--modern-color-yellow-50);
201
+ --sky-color-icon-danger: var(--modern-color-red-50);
202
+ --sky-color-icon-deemphasized: var(--modern-color-gray-70);
203
+ --sky-color-icon-default: var(--modern-color-gray-105);
204
+ --sky-color-text-heading: var(--modern-color-gray-105);
205
+ --sky-color-text-inverse: var(--modern-color-white);
206
+ --sky-color-text-danger: var(--modern-color-red-70);
207
+ --sky-color-text-action: var(--modern-color-blue-74);
208
+ --sky-color-text-deemphasized: var(--modern-color-gray-70);
209
+ --sky-color-text-default: var(--modern-color-gray-105);
210
+ }
211
+
212
+ .sky-theme-modern {
213
+ --sky-font_face-blkb_sans-bold-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff) format("woff");
214
+ --sky-font_face-blkb_sans-bold-weight: 700;
215
+ --sky-font_face-blkb_sans-bold-style: normal;
216
+ --sky-font_face-blkb_sans-semibold-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff) format("woff");
217
+ --sky-font_face-blkb_sans-semibold-weight: 600;
218
+ --sky-font_face-blkb_sans-semibold-style: normal;
219
+ --sky-font_face-blkb_sans-light-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff) format("woff");
220
+ --sky-font_face-blkb_sans-light-weight: 300;
221
+ --sky-font_face-blkb_sans-light-style: normal;
222
+ --sky-font_face-blkb_sans-thin-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff) format("woff");
223
+ --sky-font_face-blkb_sans-thin-weight: 100;
224
+ --sky-font_face-blkb_sans-thin-style: normal;
225
+ --sky-font_face-blkb_sans-italic-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff) format("woff");
226
+ --sky-font_face-blkb_sans-italic-weight: 400;
227
+ --sky-font_face-blkb_sans-italic-style: italic;
228
+ --sky-font_face-blkb_sans-regular-src: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff") format("woff");
229
+ --sky-font_face-blkb_sans-regular-weight: 400;
230
+ --sky-font_face-blkb_sans-regular-style: normal;
231
+ --sky-font_face-blkb_sans-name: var(--modern-font-blkb_sans-name);
232
+ --sky-border-style-separator-row: var(--modern-border-style-dotted);
233
+ --sky-border-style-separator-dark: var(--modern-border-style-solid);
234
+ --sky-border-style-elevation: var(--modern-border-style-solid);
235
+ --sky-border-style-divider: var(--modern-border-style-solid);
236
+ --sky-border-style-accent: var(--modern-border-style-solid);
237
+ --sky-border-radius-pill: var(--modern-border-radius-pill);
238
+ --sky-border-radius-m: var(--modern-size-6);
239
+ --sky-border-radius-s: var(--modern-size-6);
240
+ --sky-border-width-separator-row: var(--modern-size-1);
241
+ --sky-border-width-separator-dark: var(--modern-size-1);
242
+ --sky-border-width-input-disabled: var(--modern-size-1);
243
+ --sky-border-width-input-error: var(--modern-size-2);
244
+ --sky-border-width-input-focus: var(--modern-size-2);
245
+ --sky-border-width-input-active: var(--modern-size-2);
246
+ --sky-border-width-input-hover: var(--modern-size-1);
247
+ --sky-border-width-input-base: var(--modern-size-1);
248
+ --sky-border-width-container-base: var(--modern-size-1);
249
+ --sky-border-width-action-selected-xl: var(--modern-size-6);
250
+ --sky-border-width-action-selected-l: var(--modern-size-4);
251
+ --sky-border-width-action-selected-m: var(--modern-size-2);
252
+ --sky-border-width-action-selected-s: var(--modern-size-1);
253
+ --sky-border-width-action-disabled: var(--modern-size-1);
254
+ --sky-border-width-action-error: var(--modern-size-2);
255
+ --sky-border-width-action-focus: var(--modern-size-2);
256
+ --sky-border-width-action-active: var(--modern-size-2);
257
+ --sky-border-width-action-hover: var(--modern-size-1);
258
+ --sky-border-width-action-base: var(--modern-size-1);
259
+ --sky-border-width-elevation: var(--modern-size-1);
260
+ --sky-border-width-divider: var(--modern-size-1);
261
+ --sky-border-width-accent: var(--modern-size-7);
262
+ --sky-size-max_width-overlay_message: var(--modern-size-236);
263
+ --sky-size-width-viewport-smallest: var(--modern-size-296);
264
+ --sky-size-illustration-xl: var(--modern-size-96);
265
+ --sky-size-illustration-l: var(--modern-size-80);
266
+ --sky-size-illustration-m: var(--modern-size-64);
267
+ --sky-size-illustration-s: var(--modern-size-48);
268
+ --sky-size-icon-xl: var(--modern-size-32);
269
+ --sky-size-icon-l: var(--modern-size-24);
270
+ --sky-size-icon-m: var(--modern-size-20);
271
+ --sky-size-icon-s: var(--modern-size-16);
272
+ --sky-size-switch: var(--modern-size-26);
273
+ --sky-space-stacked-xxl: var(--modern-space-xxl);
274
+ --sky-space-stacked-xl: var(--modern-space-xl);
275
+ --sky-space-stacked-l: var(--modern-space-lg);
276
+ --sky-space-stacked-m: var(--modern-space-md);
277
+ --sky-space-stacked-s: var(--modern-space-s);
278
+ --sky-space-stacked-xs: var(--modern-space-xs);
279
+ --sky-space-inline-xxl: var(--modern-space-xxl);
280
+ --sky-space-inline-xl: var(--modern-space-xl);
281
+ --sky-space-inline-l: var(--modern-space-lg);
282
+ --sky-space-inline-m: var(--modern-space-md);
283
+ --sky-space-inline-s: var(--modern-space-s);
284
+ --sky-space-inline-xs: var(--modern-space-xs);
285
+ --sky-space-gap-text_action-l: var(--modern-space-lg);
286
+ --sky-space-gap-text_action-m: var(--modern-space-md);
287
+ --sky-space-gap-text_action-s: var(--modern-space-s);
288
+ --sky-space-gap-text_action-xs: var(--modern-space-xs);
289
+ --sky-space-gap-text_action-0: 0rem;
290
+ --sky-space-gap-stacked_supplemental-m: var(--modern-size-10);
291
+ --sky-space-gap-stacked_supplemental-s: var(--modern-size-5);
292
+ --sky-space-gap-stacked_supplemental-0: 0rem;
293
+ --sky-space-gap-label-xl: var(--modern-size-20);
294
+ --sky-space-gap-label-l: var(--modern-size-15);
295
+ --sky-space-gap-label-m: var(--modern-size-10);
296
+ --sky-space-gap-label-s: var(--modern-size-5);
297
+ --sky-space-gap-label-xs: var(--modern-size-2);
298
+ --sky-space-gap-label-xxs: var(--modern-size-1);
299
+ --sky-space-gap-label-0: 0rem;
300
+ --sky-space-gap-icon-xl: var(--modern-size-20);
301
+ --sky-space-gap-icon-l: var(--modern-size-15);
302
+ --sky-space-gap-icon-m: var(--modern-size-10);
303
+ --sky-space-gap-icon-s: var(--modern-size-5);
304
+ --sky-space-gap-icon-0: 0rem;
305
+ --sky-space-gap-form-xl: var(--modern-space-xl);
306
+ --sky-space-gap-form-l: var(--modern-space-lg);
307
+ --sky-space-gap-form-m: var(--modern-space-md);
308
+ --sky-space-gap-form-s: var(--modern-space-s);
309
+ --sky-space-gap-form-0: 0rem;
310
+ --sky-space-gap-action_group-xl: var(--modern-size-20);
311
+ --sky-space-gap-action_group-l: var(--modern-size-15);
312
+ --sky-space-gap-action_group-m: var(--modern-size-10);
313
+ --sky-space-gap-action_group-s: var(--modern-size-5);
314
+ --sky-space-gap-action_group-0: 0rem;
315
+ --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
316
+ --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
317
+ --sky-space-inset-horizontal-left-m: var(--modern-space-md);
318
+ --sky-space-inset-horizontal-left-s: var(--modern-space-s);
319
+ --sky-space-inset-horizontal-bottom-xl: var(--modern-size-0);
320
+ --sky-space-inset-horizontal-bottom-l: var(--modern-size-0);
321
+ --sky-space-inset-horizontal-bottom-m: var(--modern-size-0);
322
+ --sky-space-inset-horizontal-bottom-s: var(--modern-size-0);
323
+ --sky-space-inset-horizontal-right-xl: var(--modern-space-xl);
324
+ --sky-space-inset-horizontal-right-l: var(--modern-space-lg);
325
+ --sky-space-inset-horizontal-right-m: var(--modern-space-md);
326
+ --sky-space-inset-horizontal-right-s: var(--modern-space-s);
327
+ --sky-space-inset-horizontal-top-xl: var(--modern-size-0);
328
+ --sky-space-inset-horizontal-top-l: var(--modern-size-0);
329
+ --sky-space-inset-horizontal-top-m: var(--modern-size-0);
330
+ --sky-space-inset-horizontal-top-s: var(--modern-size-0);
331
+ --sky-space-inset-vertical-left-xl: var(--modern-size-0);
332
+ --sky-space-inset-vertical-left-l: var(--modern-size-0);
333
+ --sky-space-inset-vertical-left-m: var(--modern-size-0);
334
+ --sky-space-inset-vertical-left-s: var(--modern-size-0);
335
+ --sky-space-inset-vertical-bottom-xl: var(--modern-space-xl);
336
+ --sky-space-inset-vertical-bottom-l: var(--modern-space-lg);
337
+ --sky-space-inset-vertical-bottom-m: var(--modern-space-md);
338
+ --sky-space-inset-vertical-bottom-s: var(--modern-space-s);
339
+ --sky-space-inset-vertical-right-xl: var(--modern-size-0);
340
+ --sky-space-inset-vertical-right-l: var(--modern-size-0);
341
+ --sky-space-inset-vertical-right-m: var(--modern-size-0);
342
+ --sky-space-inset-vertical-right-s: var(--modern-size-0);
343
+ --sky-space-inset-vertical-top-xl: var(--modern-space-xl);
344
+ --sky-space-inset-vertical-top-l: var(--modern-space-lg);
345
+ --sky-space-inset-vertical-top-m: var(--modern-space-md);
346
+ --sky-space-inset-vertical-top-s: var(--modern-space-s);
347
+ --sky-space-inset-switch: calc(var(--sky-size-switch)+var(--sky-space-gap-label-s));
348
+ --sky-space-inset-tabs-xl: var(--modern-space-xl);
349
+ --sky-space-inset-tabs-l: var(--modern-space-lg);
350
+ --sky-space-inset-tabs-m: var(--modern-space-md);
351
+ --sky-space-inset-tabs-s: var(--modern-space-s);
352
+ --sky-space-inset-pillarbox-2_3-left-l: var(--modern-size-30);
353
+ --sky-space-inset-pillarbox-2_3-left-m: var(--modern-size-15);
354
+ --sky-space-inset-pillarbox-2_3-bottom-l: var(--modern-size-20);
355
+ --sky-space-inset-pillarbox-2_3-bottom-m: var(--modern-size-10);
356
+ --sky-space-inset-pillarbox-2_3-right-l: var(--modern-size-30);
357
+ --sky-space-inset-pillarbox-2_3-right-m: var(--modern-size-15);
358
+ --sky-space-inset-pillarbox-2_3-top-l: var(--modern-size-20);
359
+ --sky-space-inset-pillarbox-2_3-top-m: var(--modern-size-10);
360
+ --sky-space-inset-pillarbox-1_2-left-l: var(--modern-size-30);
361
+ --sky-space-inset-pillarbox-1_2-left-m: var(--modern-size-20);
362
+ --sky-space-inset-pillarbox-1_2-left-s: var(--modern-size-10);
363
+ --sky-space-inset-pillarbox-1_2-bottom-l: var(--modern-size-15);
364
+ --sky-space-inset-pillarbox-1_2-bottom-m: var(--modern-size-10);
365
+ --sky-space-inset-pillarbox-1_2-bottom-s: var(--modern-size-5);
366
+ --sky-space-inset-pillarbox-1_2-right-l: var(--modern-size-30);
367
+ --sky-space-inset-pillarbox-1_2-right-m: var(--modern-size-20);
368
+ --sky-space-inset-pillarbox-1_2-right-s: var(--modern-size-10);
369
+ --sky-space-inset-pillarbox-1_2-top-l: var(--modern-size-15);
370
+ --sky-space-inset-pillarbox-1_2-top-m: var(--modern-size-10);
371
+ --sky-space-inset-pillarbox-1_2-top-s: var(--modern-size-5);
372
+ --sky-space-inset-pillarbox-1_3-left-m: var(--modern-size-30);
373
+ --sky-space-inset-pillarbox-1_3-bottom-m: var(--modern-size-10);
374
+ --sky-space-inset-pillarbox-1_3-right-m: var(--modern-size-30);
375
+ --sky-space-inset-pillarbox-1_3-top-m: var(--modern-size-10);
376
+ --sky-space-inset-pillarbox-1_4-left-s: var(--modern-size-15);
377
+ --sky-space-inset-pillarbox-1_4-left-xs: var(--modern-size-5);
378
+ --sky-space-inset-pillarbox-1_4-bottom-s: var(--modern-size-4);
379
+ --sky-space-inset-pillarbox-1_4-bottom-xs: var(--modern-size-1);
380
+ --sky-space-inset-pillarbox-1_4-right-s: var(--modern-size-15);
381
+ --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
382
+ --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
383
+ --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
384
+ --sky-space-inset-input_label-top-m: var(--modern-size-6);
385
+ --sky-space-inset-input-left-m: var(--modern-size-15);
386
+ --sky-space-inset-input-bottom-m: var(--modern-size-9);
387
+ --sky-space-inset-input-right-m: var(--modern-size-15);
388
+ --sky-space-inset-input-top-m: var(--modern-size-26);
389
+ --sky-space-inset-bottomless-bottom-xl: var(--modern-space-none);
390
+ --sky-space-inset-bottomless-bottom-l: var(--modern-space-none);
391
+ --sky-space-inset-bottomless-left-xl: var(--modern-space-xl);
392
+ --sky-space-inset-bottomless-left-l: var(--modern-space-lg);
393
+ --sky-space-inset-bottomless-right-xl: var(--modern-space-xl);
394
+ --sky-space-inset-bottomless-right-l: var(--modern-space-lg);
395
+ --sky-space-inset-bottomless-top-xl: var(--modern-space-xl);
396
+ --sky-space-inset-bottomless-top-l: var(--modern-space-lg);
397
+ --sky-space-inset-balanced-xl: var(--modern-space-xl);
398
+ --sky-space-inset-balanced-l: var(--modern-space-lg);
399
+ --sky-space-inset-balanced-m: var(--modern-space-md);
400
+ --sky-space-inset-balanced-s: var(--modern-space-s);
401
+ --sky-space-inset-balanced-xs: var(--modern-space-xs);
402
+ --sky-font-text_decoration-inline_link-disabled: none;
403
+ --sky-font-text_decoration-inline_link-focus: none;
404
+ --sky-font-text_decoration-inline_link-active: underline;
405
+ --sky-font-text_decoration-inline_link-hover: underline;
406
+ --sky-font-text_decoration-inline_link-base: none;
407
+ --sky-font-text_decoration-visible_link: underline;
408
+ --sky-font-weight-metric-l: var(--modern-font-weight-regular);
409
+ --sky-font-weight-metric-m: var(--modern-font-weight-regular);
410
+ --sky-font-weight-metric-s: var(--modern-font-weight-bold);
411
+ --sky-font-weight-input-label: var(--modern-font-weight-regular);
412
+ --sky-font-weight-hint-m: var(--modern-font-weight-regular);
413
+ --sky-font-weight-hint-s: var(--modern-font-weight-regular);
414
+ --sky-font-weight-heading-5: var(--modern-font-weight-semibold);
415
+ --sky-font-weight-heading-4: var(--modern-font-weight-semibold);
416
+ --sky-font-weight-heading-3: var(--modern-font-weight-regular);
417
+ --sky-font-weight-heading-2: var(--modern-font-weight-light);
418
+ --sky-font-weight-heading-1: var(--modern-font-weight-light);
419
+ --sky-font-weight-display-4: var(--modern-font-weight-bold);
420
+ --sky-font-weight-display-3: var(--modern-font-weight-regular);
421
+ --sky-font-weight-display-2: var(--modern-font-weight-regular);
422
+ --sky-font-weight-display-1: var(--modern-font-weight-regular);
423
+ --sky-font-weight-body-l: var(--modern-font-weight-light);
424
+ --sky-font-weight-body-m: var(--modern-font-weight-regular);
425
+ --sky-font-weight-body-s: var(--modern-font-weight-regular);
426
+ --sky-font-weight-data_label: var(--modern-font-weight-regular);
427
+ --sky-font-weight-emphasized: var(--modern-font-weight-bold);
428
+ --sky-font-letter_spacing-hint-s: var(--modern-letter_spacing-normal);
429
+ --sky-font-letter_spacing-input-label: var(--modern-letter_spacing-normal);
430
+ --sky-font-family-monospaced: var(--modern-font-monospaced-family);
431
+ --sky-font-family-primary: var(--modern-font-blkb_sans-family);
432
+ --sky-font-style-metric-l: var(--modern-font-weight-regular);
433
+ --sky-font-style-metric-m: var(--modern-font-weight-regular);
434
+ --sky-font-style-metric-s: var(--modern-font-weight-bold);
435
+ --sky-font-style-input-label: var(--modern-font-style-regular);
436
+ --sky-font-style-hint-m-style: italic;
437
+ --sky-font-style-hint-m-weight: 400;
438
+ --sky-font-style-hint-s-style: italic;
439
+ --sky-font-style-hint-s-weight: 400;
440
+ --sky-font-style-heading-5: var(--modern-font-style-semibold);
441
+ --sky-font-style-heading-4: var(--modern-font-style-semibold);
442
+ --sky-font-style-heading-3: var(--modern-font-style-regular);
443
+ --sky-font-style-heading-2: var(--modern-font-style-light);
444
+ --sky-font-style-heading-1: var(--modern-font-style-light);
445
+ --sky-font-style-display-4: var(--modern-font-style-bold);
446
+ --sky-font-style-display-3: var(--modern-font-style-regular);
447
+ --sky-font-style-display-2: var(--modern-font-style-regular);
448
+ --sky-font-style-display-1: var(--modern-font-style-regular);
449
+ --sky-font-style-body-l: var(--modern-font-style-light);
450
+ --sky-font-style-body-m: var(--modern-font-style-regular);
451
+ --sky-font-style-body-s: var(--modern-font-style-regular);
452
+ --sky-font-style-data_label: var(--modern-font-style-regular);
453
+ --sky-font-style-emphasized: var(--modern-font-style-semibold);
454
+ --sky-font-style-deemphasized-style: italic;
455
+ --sky-font-style-deemphasized-weight: 400;
456
+ --sky-font-line_height-metric-l: var(--modern-line-height-normal);
457
+ --sky-font-line_height-metric-m: var(--modern-line-height-normal);
458
+ --sky-font-line_height-metric-s: var(--modern-line-height-normal);
459
+ --sky-font-line_height-input-val: var(--modern-line-height-20);
460
+ --sky-font-line_height-input-label: var(--modern-line-height-normal);
461
+ --sky-font-line_height-hint-m: var(--modern-line-height-normal);
462
+ --sky-font-line_height-hint-s: var(--modern-line-height-normal);
463
+ --sky-font-line_height-heading-5: var(--modern-line-height-110);
464
+ --sky-font-line_height-heading-4: var(--modern-line-height-110);
465
+ --sky-font-line_height-heading-3: var(--modern-line-height-110);
466
+ --sky-font-line_height-heading-2: var(--modern-line-height-110);
467
+ --sky-font-line_height-heading-1: var(--modern-line-height-110);
468
+ --sky-font-line_height-display-4: var(--modern-line-height-110);
469
+ --sky-font-line_height-display-3: var(--modern-line-height-110);
470
+ --sky-font-line_height-display-2: var(--modern-line-height-110);
471
+ --sky-font-line_height-display-1: var(--modern-line-height-110);
472
+ --sky-font-line_height-body-l: var(--modern-line-height-normal);
473
+ --sky-font-line_height-body-m: var(--modern-line-height-150);
474
+ --sky-font-line_height-body-s: var(--modern-line-height-normal);
475
+ --sky-font-line_height-data_label: var(--modern-line-height-normal);
476
+ --sky-font-size-metric-l: var(--sky-font-size-display-1);
477
+ --sky-font-size-metric-m: var(--sky-font-size-display-3);
478
+ --sky-font-size-metric-s: var(--sky-font-size-display-4);
479
+ --sky-font-size-input-val: var(--modern-font-size-200);
480
+ --sky-font-size-input-label: var(--modern-font-size-125);
481
+ --sky-font-size-hint-m: var(--modern-font-size-200);
482
+ --sky-font-size-hint-s: var(--modern-font-size-200);
483
+ --sky-font-size-heading-5: var(--modern-font-size-150);
484
+ --sky-font-size-heading-4: var(--modern-font-size-200);
485
+ --sky-font-size-heading-3: var(--modern-font-size-300);
486
+ --sky-font-size-heading-2: var(--modern-font-size-400);
487
+ --sky-font-size-heading-1: var(--modern-font-size-600);
488
+ --sky-font-size-display-4: var(--modern-font-size-200);
489
+ --sky-font-size-display-3: var(--modern-font-size-300);
490
+ --sky-font-size-display-2: var(--modern-font-size-500);
491
+ --sky-font-size-display-1: var(--modern-font-size-800);
492
+ --sky-font-size-body-l: var(--modern-font-size-250);
493
+ --sky-font-size-body-m: var(--modern-font-size-200);
494
+ --sky-font-size-body-s: var(--modern-font-size-125);
495
+ --sky-font-size-data_label: var(--modern-font-size-200);
496
+ }
497
+
1
498
  .sky-theme-modern {
2
499
  /* color */
3
500
  --sky-background-color-page-default: #fcfcfc;
@@ -48,8 +545,8 @@
48
545
  }
49
546
 
50
547
  .sky-theme-modern .sky-box {
51
- background-color: #fff;
52
- border-radius: 6px;
548
+ background-color: var(--sky-color-background-container-base);
549
+ border-radius: var(--sky-border-radius-s);
53
550
  overflow: hidden;
54
551
  }
55
552
 
@@ -515,16 +1012,18 @@
515
1012
  }
516
1013
  .sky-theme-modern .sky-elevation-1,
517
1014
  .sky-theme-modern .sky-elevation-1-bordered {
518
- box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
1015
+ box-shadow: var(--sky-elevation-raised-100);
519
1016
  }
520
1017
  .sky-theme-modern .sky-elevation-1-bordered {
521
- border: 1px solid #d2d2d2;
1018
+ border-color: var(--sky-color-border-container-base);
1019
+ border-width: var(--sky-border-width-container-base);
1020
+ border-style: solid;
522
1021
  }
523
1022
  .sky-theme-modern .sky-elevation-3 {
524
1023
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
525
1024
  }
526
1025
  .sky-theme-modern .sky-elevation-4 {
527
- box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.3);
1026
+ box-shadow: var(--sky-elevation-overlay-100);
528
1027
  }
529
1028
  .sky-theme-modern .sky-elevation-8 {
530
1029
  box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.3);
@@ -533,7 +1032,7 @@
533
1032
  box-shadow: 0px 3px 25px 2px rgba(0, 0, 0, 0.3);
534
1033
  }
535
1034
  .sky-theme-modern .sky-elevation-24 {
536
- box-shadow: 0px 7px 27px 3px rgba(0, 0, 0, 0.3);
1035
+ box-shadow: var(--sky-elevation-overlay-400);
537
1036
  }
538
1037
  .sky-theme-modern.sky-theme-mode-dark .sky-elevation-0-bordered,
539
1038
  .sky-theme-modern.sky-theme-mode-dark .sky-elevation-1-bordered {
@@ -784,7 +1283,7 @@
784
1283
  color: var(--sky-text-color-deemphasized);
785
1284
  }
786
1285
  .sky-theme-modern .sky-rounded-corners {
787
- border-radius: 6px;
1286
+ border-radius: var(--sky-border-radius-s);
788
1287
  }
789
1288
 
790
1289
  .sky-theme-modern .sky-font-body-default {
@@ -865,7 +1364,7 @@
865
1364
  padding: 15px 15px 15px 15px;
866
1365
  }
867
1366
  .sky-theme-modern .sky-padding-even-lg {
868
- padding: 20px 20px 20px 20px;
1367
+ padding: var(--sky-space-inset-balanced-l);
869
1368
  }
870
1369
  .sky-theme-modern .sky-padding-even-xl {
871
1370
  padding: 30px 30px 30px 30px;