vanilla-framework 3.0.0-beta.2 → 3.0.0-rc.1

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 (19) hide show
  1. package/package.json +17 -14
  2. package/scss/_base_fontfaces.scss +183 -181
  3. package/scss/_base_grid-definitions.scss +6 -6
  4. package/scss/_base_hr.scss +4 -4
  5. package/scss/_layouts_fluid-breakout.scss +12 -12
  6. package/scss/_patterns_chip.scss +225 -60
  7. package/scss/_patterns_divider.scss +1 -1
  8. package/scss/_patterns_grid.scss +4 -4
  9. package/scss/_patterns_label.scss +5 -29
  10. package/scss/_patterns_logo-section.scss +4 -4
  11. package/scss/_patterns_navigation.scss +7 -7
  12. package/scss/_patterns_search-and-filter.scss +6 -4
  13. package/scss/_patterns_side-navigation.scss +2 -2
  14. package/scss/_patterns_table-expanding.scss +0 -4
  15. package/scss/_patterns_table-mobile-card.scss +2 -2
  16. package/scss/_settings_colors.scss +64 -9
  17. package/scss/_settings_grid.scss +2 -4
  18. package/scss/_settings_spacing.scss +1 -1
  19. package/scss/_settings_themes.scss +1 -0
package/package.json CHANGED
@@ -29,6 +29,7 @@
29
29
  "start": "yarn build && yarn serve",
30
30
  "build": "yarn build-scss && yarn build-js",
31
31
  "build-scss": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
32
+ "build:essential": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css scss/docs:build/css/docs && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
32
33
  "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules",
33
34
  "serve": "./entrypoint 0.0.0.0:${PORT}",
34
35
  "test-scss": "node -e 'require(\"./tests/parker\").parkerTest()'",
@@ -37,13 +38,13 @@
37
38
  "lint-prettier": "prettier -c .",
38
39
  "lint-scss": "stylelint 'scss/**/*.scss'",
39
40
  "watch:scss": "sass --load-path=node_modules --embed-sources --style=compressed scss:build/css --watch",
40
- "watch:scss:skip-standalone": "sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css --watch",
41
+ "watch:essential": "sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css --watch",
41
42
  "watch": "yarn build && yarn watch:scss",
42
43
  "clean": "rm -rf build docs/static/css node_modules/ yarn-error.log",
43
44
  "percy": "percy exec -- node snapshots.js",
44
45
  "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
45
46
  },
46
- "version": "3.0.0-beta.2",
47
+ "version": "3.0.0-rc.1",
47
48
  "files": [
48
49
  "_index.scss",
49
50
  "/scss",
@@ -52,24 +53,26 @@
52
53
  ],
53
54
  "dependencies": {
54
55
  "@canonical/cookie-policy": "3.3.0",
55
- "@canonical/latest-news": "1.2.0",
56
+ "@canonical/latest-news": "1.3.0",
56
57
  "autoprefixer": "10.4.0",
57
- "postcss": "8.3.11",
58
- "postcss-cli": "8.3.1",
59
- "sass": "1.37.5"
58
+ "postcss": "8.4.4",
59
+ "postcss-cli": "9.0.2",
60
+ "sass": "1.44.0"
60
61
  },
61
62
  "devDependencies": {
62
63
  "@percy/script": "1.1.0",
63
64
  "get-site-urls": "1.1.7",
64
65
  "markdown-spellcheck": "1.3.1",
65
66
  "parker": "0.0.10",
66
- "prettier": "2.4.1",
67
- "stylelint": "13.13.1",
68
- "stylelint-config-prettier": "8.0.2",
69
- "stylelint-config-standard": "22.0.0",
70
- "stylelint-order": "4.1.0",
71
- "stylelint-prettier": "1.2.0",
72
- "stylelint-scss": "3.21.0",
73
- "svgo": "2.7.0"
67
+ "prettier": "2.5.0",
68
+ "stylelint": "14.1.0",
69
+ "stylelint-config-prettier": "9.0.3",
70
+ "stylelint-config-recommended-scss": "5.0.2",
71
+ "stylelint-order": "5.0.0",
72
+ "stylelint-prettier": "2.0.0",
73
+ "svgo": "2.8.0"
74
+ },
75
+ "engines": {
76
+ "node": "^14 || ^16 || ^18"
74
77
  }
75
78
  }
package/scss/_base_fontfaces.scss CHANGED
@@ -1,185 +1,187 @@
1
1
  @mixin vf-b-typography-fontfaces {
2
- @if str-index($font-base-family, 'Ubuntu') {
3
- @if $font-use-subset-latin {
4
- @font-face {
5
- font-display: $font-display-option;
6
- font-family: 'Ubuntu';
7
- font-style: normal;
8
- font-weight: $font-weight-regular-text;
9
- src: url('#{$assets-path}46ed6870-Ubuntu-L-subset.woff2') format('woff2'), url('#{$assets-path}4070835e-Ubuntu-L-subset.woff') format('woff');
10
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
11
- }
12
-
13
- @font-face {
14
- font-display: $font-display-option;
15
- font-family: 'Ubuntu';
16
- font-style: normal;
17
- font-weight: $font-weight-bold;
18
- src: url('#{$assets-path}0c7b8dc0-Ubuntu-R-subset.woff2') format('woff2'), url('#{$assets-path}ef4d35ed-Ubuntu-R-subset.woff') format('woff');
19
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
20
- }
21
-
22
- @font-face {
23
- font-display: $font-display-option;
24
- font-family: 'Ubuntu';
25
- font-style: italic;
26
- font-weight: $font-weight-regular-text;
27
- src: url('#{$assets-path}6113b69a-Ubuntu-LI-subset.woff2') format('woff2'), url('#{$assets-path}56a10e22-Ubuntu-LI-subset.woff') format('woff');
28
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
29
- }
30
-
31
- @font-face {
32
- font-display: $font-display-option;
33
- font-family: 'Ubuntu';
34
- font-style: italic;
35
- font-weight: $font-weight-bold;
36
- src: url('#{$assets-path}fd4ec0c7-Ubuntu-RI-subset.woff2') format('woff2'), url('#{$assets-path}89be6515-Ubuntu-RI-subset.woff') format('woff');
37
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
38
- }
39
-
40
- @font-face {
41
- font-display: $font-display-option;
42
- font-family: 'Ubuntu';
43
- font-style: normal;
44
- font-weight: $font-weight-display-heading;
45
- src: url('#{$assets-path}3baab91b-Ubuntu-Th-subset.woff2') format('woff2'), url('#{$assets-path}cb89e3ac-Ubuntu-Th-subset.woff') format('woff');
46
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
47
- }
48
-
49
- @font-face {
50
- font-display: $font-display-option;
51
- font-family: 'Ubuntu Mono';
52
- font-style: normal;
53
- font-weight: $font-weight-regular-text;
54
- src: url('#{$assets-path}a6c34b5d-UbuntuMono-R-subset.woff2') format('woff2'), url('#{$assets-path}e6daa284-UbuntuMono-R-subset.woff') format('woff');
55
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
56
- }
57
-
58
- @font-face {
59
- font-display: $font-display-option;
60
- font-family: 'Ubuntu Mono';
61
- font-style: normal;
62
- font-weight: $font-weight-bold;
63
- src: url('#{$assets-path}a662364d-UbuntuMono-B-subset.woff2') format('woff2'), url('#{$assets-path}22f97dd9-UbuntuMono-B-subset.woff') format('woff');
64
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
65
- }
66
- } @else {
67
- @font-face {
68
- font-display: $font-display-option;
69
- font-family: 'Ubuntu';
70
- font-style: normal;
71
- font-weight: $font-weight-regular-text;
72
- src: url('#{$assets-path}e8c07df6-Ubuntu-L_W.woff2') format('woff2'), url('#{$assets-path}8619add2-Ubuntu-L_W.woff') format('woff');
73
- }
74
-
75
- @font-face {
76
- font-display: $font-display-option;
77
- font-family: 'Ubuntu';
78
- font-style: normal;
79
- font-weight: $font-weight-bold;
80
- src: url('#{$assets-path}fff37993-Ubuntu-R_W.woff2') format('woff2'), url('#{$assets-path}7af50859-Ubuntu-R_W.woff') format('woff');
81
- }
82
-
83
- @font-face {
84
- font-display: $font-display-option;
85
- font-family: 'Ubuntu';
86
- font-style: italic;
87
- font-weight: $font-weight-regular-text;
88
- src: url('#{$assets-path}f8097dea-Ubuntu-LI_W.woff2') format('woff2'), url('#{$assets-path}8be89d02-Ubuntu-LI_W.woff') format('woff');
89
- }
90
-
91
- @font-face {
92
- font-display: $font-display-option;
93
- font-family: 'Ubuntu';
94
- font-style: italic;
95
- font-weight: $font-weight-bold;
96
- src: url('#{$assets-path}fca66073-ubuntu-ri-webfont.woff2') format('woff2'), url('#{$assets-path}f0898c72-ubuntu-ri-webfont.woff') format('woff');
97
- }
98
-
99
- @font-face {
100
- font-display: $font-display-option;
101
- font-family: 'Ubuntu';
102
- font-style: normal;
103
- font-weight: $font-weight-display-heading;
104
- src: url('#{$assets-path}7f100985-Ubuntu-Th_W.woff2') format('woff2'), url('#{$assets-path}502cc3a1-Ubuntu-Th_W.woff') format('woff');
105
- }
106
-
107
- @font-face {
108
- font-display: $font-display-option;
109
- font-family: 'Ubuntu Mono';
110
- font-style: normal;
111
- font-weight: $font-weight-regular-text;
112
- src: url('#{$assets-path}fdd692b9-UbuntuMono-R_W.woff2') format('woff2'), url('#{$assets-path}85edb898-UbuntuMono-R_W.woff') format('woff');
113
- }
114
-
115
- @font-face {
116
- font-display: $font-display-option;
117
- font-family: 'Ubuntu Mono';
118
- font-style: normal;
119
- font-weight: $font-weight-bold;
120
- src: url('#{$assets-path}dd4acb63-UbuntuMono-B.woff2') format('woff2'), url('#{$assets-path}e8e36b19-UbuntuMono-B.woff') format('woff');
121
- }
122
- }
123
-
124
- @if $font-allow-cyrillic-greek-latin {
125
- // cyrillic-ext
126
- @font-face {
127
- font-display: $font-display-option;
128
- font-family: 'Ubuntu';
129
- font-style: normal;
130
- font-weight: $font-weight-regular-text;
131
- src: url('#{$assets-path}8aba5b6f-Ubuntu-L-cyrillic-ext-subset.woff2') format('woff2'), url('#{$assets-path}55e29aa9-Ubuntu-L-cyrillic-ext-subset.woff') format('woff');
132
- unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
133
- }
134
-
135
- // cyrillic
136
- @font-face {
137
- font-display: $font-display-option;
138
- font-family: 'Ubuntu';
139
- font-style: normal;
140
- font-weight: $font-weight-regular-text;
141
- src: url('#{$assets-path}5bea8279-Ubuntu-L-cyrillic-subset.woff2') format('woff2'), url('#{$assets-path}b8058442-Ubuntu-L-cyrillic-subset.woff') format('woff');
142
- unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
143
- }
144
-
145
- // greek-ext
146
- @font-face {
147
- font-display: $font-display-option;
148
- font-family: 'Ubuntu';
149
- font-style: normal;
150
- font-weight: $font-weight-regular-text;
151
- src: url('#{$assets-path}a6dcff6e-Ubuntu-L-greek-ext-subset.woff2') format('woff2'), url('#{$assets-path}496f3bda-Ubuntu-L-greek-ext-subset.woff') format('woff');
152
- unicode-range: U+1F00-1FFF;
153
- }
154
-
155
- // greek
156
- @font-face {
157
- font-display: $font-display-option;
158
- font-family: 'Ubuntu';
159
- font-style: normal;
160
- font-weight: $font-weight-regular-text;
161
- src: url('#{$assets-path}b7ba71af-Ubuntu-L-greek-subset.woff2') format('woff2'), url('#{$assets-path}b864c12e-Ubuntu-L-greek-subset.woff') format('woff');
162
- unicode-range: U+0370-03FF;
163
- }
164
-
165
- // latin-ext
166
- @font-face {
167
- font-display: $font-display-option;
168
- font-family: 'Ubuntu';
169
- font-style: normal;
170
- font-weight: $font-weight-regular-text;
171
- src: url('#{$assets-path}98e516d3-Ubuntu-L-latin-ext-subset.woff2') format('woff2'), url('#{$assets-path}11a74839-Ubuntu-L-latin-ext-subset.woff') format('woff');
172
- unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
173
- }
174
-
175
- // latin
176
- @font-face {
177
- font-display: $font-display-option;
178
- font-family: 'Ubuntu';
179
- font-style: normal;
180
- font-weight: $font-weight-regular-text;
181
- src: url('#{$assets-path}317bd676-Ubuntu-L-latin-subset.woff2') format('woff2'), url('#{$assets-path}c09862e1-Ubuntu-L-latin-subset.woff') format('woff');
182
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
2
+ @at-root {
3
+ @if str-index($font-base-family, 'Ubuntu') {
4
+ @if $font-use-subset-latin {
5
+ @font-face {
6
+ font-display: $font-display-option;
7
+ font-family: 'Ubuntu';
8
+ font-style: normal;
9
+ font-weight: $font-weight-regular-text;
10
+ src: url('#{$assets-path}46ed6870-Ubuntu-L-subset.woff2') format('woff2'), url('#{$assets-path}4070835e-Ubuntu-L-subset.woff') format('woff');
11
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
12
+ }
13
+
14
+ @font-face {
15
+ font-display: $font-display-option;
16
+ font-family: 'Ubuntu';
17
+ font-style: normal;
18
+ font-weight: $font-weight-bold;
19
+ src: url('#{$assets-path}0c7b8dc0-Ubuntu-R-subset.woff2') format('woff2'), url('#{$assets-path}ef4d35ed-Ubuntu-R-subset.woff') format('woff');
20
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
21
+ }
22
+
23
+ @font-face {
24
+ font-display: $font-display-option;
25
+ font-family: 'Ubuntu';
26
+ font-style: italic;
27
+ font-weight: $font-weight-regular-text;
28
+ src: url('#{$assets-path}6113b69a-Ubuntu-LI-subset.woff2') format('woff2'), url('#{$assets-path}56a10e22-Ubuntu-LI-subset.woff') format('woff');
29
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
30
+ }
31
+
32
+ @font-face {
33
+ font-display: $font-display-option;
34
+ font-family: 'Ubuntu';
35
+ font-style: italic;
36
+ font-weight: $font-weight-bold;
37
+ src: url('#{$assets-path}fd4ec0c7-Ubuntu-RI-subset.woff2') format('woff2'), url('#{$assets-path}89be6515-Ubuntu-RI-subset.woff') format('woff');
38
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
39
+ }
40
+
41
+ @font-face {
42
+ font-display: $font-display-option;
43
+ font-family: 'Ubuntu';
44
+ font-style: normal;
45
+ font-weight: $font-weight-display-heading;
46
+ src: url('#{$assets-path}3baab91b-Ubuntu-Th-subset.woff2') format('woff2'), url('#{$assets-path}cb89e3ac-Ubuntu-Th-subset.woff') format('woff');
47
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
48
+ }
49
+
50
+ @font-face {
51
+ font-display: $font-display-option;
52
+ font-family: 'Ubuntu Mono';
53
+ font-style: normal;
54
+ font-weight: $font-weight-regular-text;
55
+ src: url('#{$assets-path}a6c34b5d-UbuntuMono-R-subset.woff2') format('woff2'), url('#{$assets-path}e6daa284-UbuntuMono-R-subset.woff') format('woff');
56
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
57
+ }
58
+
59
+ @font-face {
60
+ font-display: $font-display-option;
61
+ font-family: 'Ubuntu Mono';
62
+ font-style: normal;
63
+ font-weight: $font-weight-bold;
64
+ src: url('#{$assets-path}a662364d-UbuntuMono-B-subset.woff2') format('woff2'), url('#{$assets-path}22f97dd9-UbuntuMono-B-subset.woff') format('woff');
65
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
66
+ }
67
+ } @else {
68
+ @font-face {
69
+ font-display: $font-display-option;
70
+ font-family: 'Ubuntu';
71
+ font-style: normal;
72
+ font-weight: $font-weight-regular-text;
73
+ src: url('#{$assets-path}e8c07df6-Ubuntu-L_W.woff2') format('woff2'), url('#{$assets-path}8619add2-Ubuntu-L_W.woff') format('woff');
74
+ }
75
+
76
+ @font-face {
77
+ font-display: $font-display-option;
78
+ font-family: 'Ubuntu';
79
+ font-style: normal;
80
+ font-weight: $font-weight-bold;
81
+ src: url('#{$assets-path}fff37993-Ubuntu-R_W.woff2') format('woff2'), url('#{$assets-path}7af50859-Ubuntu-R_W.woff') format('woff');
82
+ }
83
+
84
+ @font-face {
85
+ font-display: $font-display-option;
86
+ font-family: 'Ubuntu';
87
+ font-style: italic;
88
+ font-weight: $font-weight-regular-text;
89
+ src: url('#{$assets-path}f8097dea-Ubuntu-LI_W.woff2') format('woff2'), url('#{$assets-path}8be89d02-Ubuntu-LI_W.woff') format('woff');
90
+ }
91
+
92
+ @font-face {
93
+ font-display: $font-display-option;
94
+ font-family: 'Ubuntu';
95
+ font-style: italic;
96
+ font-weight: $font-weight-bold;
97
+ src: url('#{$assets-path}fca66073-ubuntu-ri-webfont.woff2') format('woff2'), url('#{$assets-path}f0898c72-ubuntu-ri-webfont.woff') format('woff');
98
+ }
99
+
100
+ @font-face {
101
+ font-display: $font-display-option;
102
+ font-family: 'Ubuntu';
103
+ font-style: normal;
104
+ font-weight: $font-weight-display-heading;
105
+ src: url('#{$assets-path}7f100985-Ubuntu-Th_W.woff2') format('woff2'), url('#{$assets-path}502cc3a1-Ubuntu-Th_W.woff') format('woff');
106
+ }
107
+
108
+ @font-face {
109
+ font-display: $font-display-option;
110
+ font-family: 'Ubuntu Mono';
111
+ font-style: normal;
112
+ font-weight: $font-weight-regular-text;
113
+ src: url('#{$assets-path}fdd692b9-UbuntuMono-R_W.woff2') format('woff2'), url('#{$assets-path}85edb898-UbuntuMono-R_W.woff') format('woff');
114
+ }
115
+
116
+ @font-face {
117
+ font-display: $font-display-option;
118
+ font-family: 'Ubuntu Mono';
119
+ font-style: normal;
120
+ font-weight: $font-weight-bold;
121
+ src: url('#{$assets-path}dd4acb63-UbuntuMono-B.woff2') format('woff2'), url('#{$assets-path}e8e36b19-UbuntuMono-B.woff') format('woff');
122
+ }
123
+ }
124
+
125
+ @if $font-allow-cyrillic-greek-latin {
126
+ // cyrillic-ext
127
+ @font-face {
128
+ font-display: $font-display-option;
129
+ font-family: 'Ubuntu';
130
+ font-style: normal;
131
+ font-weight: $font-weight-regular-text;
132
+ src: url('#{$assets-path}8aba5b6f-Ubuntu-L-cyrillic-ext-subset.woff2') format('woff2'), url('#{$assets-path}55e29aa9-Ubuntu-L-cyrillic-ext-subset.woff') format('woff');
133
+ unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
134
+ }
135
+
136
+ // cyrillic
137
+ @font-face {
138
+ font-display: $font-display-option;
139
+ font-family: 'Ubuntu';
140
+ font-style: normal;
141
+ font-weight: $font-weight-regular-text;
142
+ src: url('#{$assets-path}5bea8279-Ubuntu-L-cyrillic-subset.woff2') format('woff2'), url('#{$assets-path}b8058442-Ubuntu-L-cyrillic-subset.woff') format('woff');
143
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
144
+ }
145
+
146
+ // greek-ext
147
+ @font-face {
148
+ font-display: $font-display-option;
149
+ font-family: 'Ubuntu';
150
+ font-style: normal;
151
+ font-weight: $font-weight-regular-text;
152
+ src: url('#{$assets-path}a6dcff6e-Ubuntu-L-greek-ext-subset.woff2') format('woff2'), url('#{$assets-path}496f3bda-Ubuntu-L-greek-ext-subset.woff') format('woff');
153
+ unicode-range: U+1F00-1FFF;
154
+ }
155
+
156
+ // greek
157
+ @font-face {
158
+ font-display: $font-display-option;
159
+ font-family: 'Ubuntu';
160
+ font-style: normal;
161
+ font-weight: $font-weight-regular-text;
162
+ src: url('#{$assets-path}b7ba71af-Ubuntu-L-greek-subset.woff2') format('woff2'), url('#{$assets-path}b864c12e-Ubuntu-L-greek-subset.woff') format('woff');
163
+ unicode-range: U+0370-03FF;
164
+ }
165
+
166
+ // latin-ext
167
+ @font-face {
168
+ font-display: $font-display-option;
169
+ font-family: 'Ubuntu';
170
+ font-style: normal;
171
+ font-weight: $font-weight-regular-text;
172
+ src: url('#{$assets-path}98e516d3-Ubuntu-L-latin-ext-subset.woff2') format('woff2'), url('#{$assets-path}11a74839-Ubuntu-L-latin-ext-subset.woff') format('woff');
173
+ unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
174
+ }
175
+
176
+ // latin
177
+ @font-face {
178
+ font-display: $font-display-option;
179
+ font-family: 'Ubuntu';
180
+ font-style: normal;
181
+ font-weight: $font-weight-regular-text;
182
+ src: url('#{$assets-path}317bd676-Ubuntu-L-latin-subset.woff2') format('woff2'), url('#{$assets-path}c09862e1-Ubuntu-L-latin-subset.woff') format('woff');
183
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
184
+ }
183
185
  }
184
186
  }
185
187
  }
package/scss/_base_grid-definitions.scss CHANGED
@@ -69,7 +69,7 @@
69
69
 
70
70
  // set static gutter width per breakpoint
71
71
  @media (min-width: $threshold-4-6-col) {
72
- grid-gap: 0 map-get($grid-gutter-widths, medium);
72
+ grid-gap: 0 map-get($grid-gutter-widths, default);
73
73
  grid-template-columns: repeat($grid-columns-medium, minmax(0, 1fr));
74
74
 
75
75
  & > * {
@@ -78,7 +78,7 @@
78
78
  }
79
79
 
80
80
  @media (min-width: $threshold-6-12-col) {
81
- grid-gap: 0 map-get($grid-gutter-widths, large);
81
+ grid-gap: 0 map-get($grid-gutter-widths, default);
82
82
  grid-template-columns: repeat($grid-columns, minmax(0, 1fr));
83
83
 
84
84
  & > * {
@@ -94,13 +94,13 @@
94
94
  padding-right: map-get($grid-margin-widths, small);
95
95
 
96
96
  @media (min-width: $threshold-4-6-col) {
97
- padding-left: map-get($grid-margin-widths, medium);
98
- padding-right: map-get($grid-margin-widths, medium);
97
+ padding-left: map-get($grid-margin-widths, default);
98
+ padding-right: map-get($grid-margin-widths, default);
99
99
  }
100
100
 
101
101
  @media (min-width: $threshold-6-12-col) {
102
- padding-left: map-get($grid-margin-widths, large);
103
- padding-right: map-get($grid-margin-widths, large);
102
+ padding-left: map-get($grid-margin-widths, default);
103
+ padding-right: map-get($grid-margin-widths, default);
104
104
  }
105
105
  }
106
106
  }
package/scss/_base_hr.scss CHANGED
@@ -24,13 +24,13 @@
24
24
  width: calc(100% - #{2 * map-get($grid-margin-widths, small)});
25
25
 
26
26
  @media (min-width: $threshold-4-6-col) {
27
- max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, medium)});
28
- width: calc(100% - #{2 * map-get($grid-margin-widths, medium)});
27
+ max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, default)});
28
+ width: calc(100% - #{2 * map-get($grid-margin-widths, default)});
29
29
  }
30
30
 
31
31
  @media (min-width: $threshold-6-12-col) {
32
- max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, large)});
33
- width: calc(100% - #{2 * map-get($grid-margin-widths, large)});
32
+ max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, default)});
33
+ width: calc(100% - #{2 * map-get($grid-margin-widths, default)});
34
34
  }
35
35
 
36
36
  .row &,
package/scss/_layouts_fluid-breakout.scss CHANGED
@@ -25,13 +25,13 @@
25
25
  }
26
26
 
27
27
  @media (min-width: $threshold-4-6-col) {
28
- padding-left: map-get($grid-margin-widths, medium);
29
- padding-right: map-get($grid-margin-widths, medium);
28
+ padding-left: map-get($grid-margin-widths, default);
29
+ padding-right: map-get($grid-margin-widths, default);
30
30
  }
31
31
 
32
32
  @media (min-width: $threshold-6-12-col) {
33
- padding-left: map-get($grid-margin-widths, large);
34
- padding-right: map-get($grid-margin-widths, large);
33
+ padding-left: map-get($grid-margin-widths, default);
34
+ padding-right: map-get($grid-margin-widths, default);
35
35
  }
36
36
 
37
37
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
@@ -51,8 +51,8 @@
51
51
  width: 100%;
52
52
 
53
53
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
54
- padding-left: map-get($grid-margin-widths, large);
55
- padding-right: map-get($grid-margin-widths, large);
54
+ padding-left: map-get($grid-margin-widths, default);
55
+ padding-right: map-get($grid-margin-widths, default);
56
56
  }
57
57
 
58
58
  @media (min-width: $breakpoint-large) {
@@ -97,11 +97,11 @@
97
97
  @extend %l-fluid-breakout__aside-common-properties#{$suffix};
98
98
 
99
99
  @media (min-width: $breakpoint-large) {
100
- padding-right: map-get($grid-margin-widths, large);
100
+ padding-right: map-get($grid-margin-widths, default);
101
101
  }
102
102
 
103
103
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
104
- padding-left: map-get($grid-margin-widths, large);
104
+ padding-left: map-get($grid-margin-widths, default);
105
105
  padding-right: 0;
106
106
  }
107
107
  }
@@ -110,13 +110,13 @@
110
110
  @extend %l-fluid-breakout__aside-common-properties#{$suffix};
111
111
 
112
112
  @media (min-width: $breakpoint-large) {
113
- padding-left: map-get($grid-margin-widths, large);
113
+ padding-left: map-get($grid-margin-widths, default);
114
114
  padding-right: 0;
115
115
  }
116
116
 
117
117
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
118
118
  padding-left: 0;
119
- padding-right: map-get($grid-margin-widths, large);
119
+ padding-right: map-get($grid-margin-widths, default);
120
120
  }
121
121
 
122
122
  @extend %l-fluid-breakout__aside-common-properties#{$suffix};
@@ -139,8 +139,8 @@
139
139
  }
140
140
 
141
141
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
142
- margin-left: map-get($grid-margin-widths, large);
143
- margin-right: map-get($grid-margin-widths, large);
142
+ margin-left: map-get($grid-margin-widths, default);
143
+ margin-right: map-get($grid-margin-widths, default);
144
144
  }
145
145
  }
146
146
 
package/scss/_patterns_chip.scss CHANGED
@@ -28,14 +28,12 @@
28
28
  }
29
29
 
30
30
  .p-chip__lead {
31
- @extend %muted-text;
32
31
  @extend %x-small-text;
33
32
 
34
33
  text-transform: uppercase;
35
34
  }
36
35
 
37
36
  .p-chip__lead + .p-chip__value::before {
38
- @extend %muted-text;
39
37
  @extend %x-small-text;
40
38
 
41
39
  content: ': ';
@@ -43,27 +41,21 @@
43
41
 
44
42
  .p-chip__value {
45
43
  @extend %small-text;
44
+ font-weight: $font-weight-bold;
46
45
  }
47
46
 
48
47
  .p-chip__dismiss {
49
- @include vf-button-pattern(
50
- $button-background-color: transparent,
51
- $button-border-color: transparent,
52
- $button-hover-background-color: transparent,
53
- $button-hover-border-color: transparent
54
- );
48
+ @extend %icon;
49
+ // also includes button and close icon styles in the theming section
55
50
 
56
51
  align-self: center;
57
- border: none;
52
+ background-size: map-get($icon-sizes, small);
53
+ border-radius: 50%;
58
54
  flex: 0 0 auto;
59
- height: $default-icon-size;
60
- line-height: $default-icon-size;
61
- margin-bottom: 0;
62
55
  margin-left: $sph--x-small;
63
- margin-top: 0; // override top margin that button gets in some contexts (in paragraphs)
64
- padding: 0;
65
- position: relative;
66
- width: $default-icon-size;
56
+ @media (min-width: $breakpoint-x-large) {
57
+ background-size: map-get($icon-sizes, small) / $font-size-ratio--largescreen; //ensure no rounding happens as it positions the icon off center
58
+ }
67
59
  }
68
60
 
69
61
  &.is-dense {
@@ -71,66 +63,239 @@
71
63
  }
72
64
 
73
65
  &.is-inline {
74
- margin-bottom: 0;
75
- margin-top: 0;
66
+ margin: 0;
76
67
  vertical-align: baseline;
77
68
  }
78
69
  }
79
70
 
80
- @include vf-chip-default;
81
- @include vf-chip-positive;
82
- @include vf-chip-caution;
83
- @include vf-chip-negative;
84
- @include vf-chip-information;
85
- }
86
-
87
- @mixin vf-chip-default {
88
- .p-chip {
71
+ .p-chip,
72
+ .p-chip--positive,
73
+ .p-chip--caution,
74
+ .p-chip--negative,
75
+ .p-chip--information {
89
76
  @extend %vf-chip;
90
- @include vf-chip-type(default);
91
77
  }
92
- }
93
78
 
94
- @mixin vf-chip-positive {
95
- .p-chip--positive {
96
- @extend %vf-chip;
97
- @include vf-chip-type(positive);
98
- }
99
- }
79
+ // Theming
80
+ @if ($theme-default-p-chip == 'dark') {
81
+ .p-chip {
82
+ @include vf-chip-dark-theme;
83
+ }
84
+ .p-chip.is-light {
85
+ @include vf-chip-light-theme;
86
+ }
87
+ // stylelint-disable-next-line selector-max-type
88
+ button.p-chip {
89
+ @include vf-chip-dark-theme($is-interactive: true);
90
+ }
91
+ // stylelint-disable-next-line selector-max-type
92
+ button.p-chip.is-light {
93
+ @include vf-chip-light-theme($is-interactive: true);
94
+ }
100
95
 
101
- @mixin vf-chip-caution {
102
- .p-chip--caution {
103
- @extend %vf-chip;
104
- @include vf-chip-type(caution);
105
- }
106
- }
96
+ .p-chip--positive {
97
+ @include vf-chip-dark-theme(positive);
98
+ }
99
+ .p-chip--positive.is-light {
100
+ @include vf-chip-light-theme(positive);
101
+ }
102
+ // stylelint-disable-next-line selector-max-type
103
+ button.p-chip--positive {
104
+ @include vf-chip-dark-theme($chip-type: positive, $is-interactive: true);
105
+ }
106
+ // stylelint-disable-next-line selector-max-type
107
+ button.p-chip--positive.is-light {
108
+ @include vf-chip-light-theme($chip-type: positive, $is-interactive: true);
109
+ }
107
110
 
108
- @mixin vf-chip-negative {
109
- .p-chip--negative {
110
- @extend %vf-chip;
111
- @include vf-chip-type(negative);
111
+ .p-chip--caution {
112
+ @include vf-chip-dark-theme(caution);
113
+ }
114
+ .p-chip--caution.is-light {
115
+ @include vf-chip-light-theme(caution);
116
+ }
117
+ // stylelint-disable-next-line selector-max-type
118
+ button.p-chip--caution {
119
+ @include vf-chip-dark-theme($chip-type: caution, $is-interactive: true);
120
+ }
121
+ // stylelint-disable-next-line selector-max-type
122
+ button.p-chip--caution.is-light {
123
+ @include vf-chip-light-theme($chip-type: caution, $is-interactive: true);
124
+ }
125
+
126
+ .p-chip--negative {
127
+ @include vf-chip-dark-theme(negative);
128
+ }
129
+ .p-chip--negative.is-light {
130
+ @include vf-chip-light-theme(negative);
131
+ }
132
+ // stylelint-disable-next-line selector-max-type
133
+ button.p-chip--negative {
134
+ @include vf-chip-dark-theme($chip-type: negative, $is-interactive: true);
135
+ }
136
+ // stylelint-disable-next-line selector-max-type
137
+ button.p-chip--negative.is-light {
138
+ @include vf-chip-light-theme($chip-type: negative, $is-interactive: true);
139
+ }
140
+
141
+ .p-chip--information {
142
+ @include vf-chip-dark-theme(information);
143
+ }
144
+ .p-chip--information.is-light {
145
+ @include vf-chip-light-theme(information);
146
+ }
147
+ // stylelint-disable-next-line selector-max-type
148
+ button.p-chip--information {
149
+ @include vf-chip-dark-theme($chip-type: information, $is-interactive: true);
150
+ }
151
+ // stylelint-disable-next-line selector-max-type
152
+ button.p-chip--information.is-light {
153
+ @include vf-chip-light-theme($chip-type: information, $is-interactive: true);
154
+ }
155
+ } @else {
156
+ .p-chip {
157
+ @include vf-chip-light-theme;
158
+ }
159
+ .p-chip.is-dark {
160
+ @include vf-chip-dark-theme;
161
+ }
162
+ // stylelint-disable-next-line selector-max-type
163
+ button.p-chip {
164
+ @include vf-chip-light-theme($is-interactive: true);
165
+ }
166
+ // stylelint-disable-next-line selector-max-type
167
+ button.p-chip.is-dark {
168
+ @include vf-chip-dark-theme($is-interactive: true);
169
+ }
170
+
171
+ .p-chip--positive {
172
+ @include vf-chip-light-theme(positive);
173
+ }
174
+ .p-chip--positive.is-dark {
175
+ @include vf-chip-dark-theme(positive);
176
+ }
177
+ // stylelint-disable-next-line selector-max-type
178
+ button.p-chip--positive {
179
+ @include vf-chip-light-theme($chip-type: positive, $is-interactive: true);
180
+ }
181
+ // stylelint-disable-next-line selector-max-type
182
+ button.p-chip--positive.is-dark {
183
+ @include vf-chip-dark-theme($chip-type: positive, $is-interactive: true);
184
+ }
185
+
186
+ .p-chip--caution {
187
+ @include vf-chip-light-theme(caution);
188
+ }
189
+ .p-chip--caution.is-dark {
190
+ @include vf-chip-dark-theme(caution);
191
+ }
192
+ // stylelint-disable-next-line selector-max-type
193
+ button.p-chip--caution {
194
+ @include vf-chip-light-theme($chip-type: caution, $is-interactive: true);
195
+ }
196
+ // stylelint-disable-next-line selector-max-type
197
+ button.p-chip--caution.is-dark {
198
+ @include vf-chip-dark-theme($chip-type: caution, $is-interactive: true);
199
+ }
200
+
201
+ .p-chip--negative {
202
+ @include vf-chip-light-theme(negative);
203
+ }
204
+ .p-chip--negative.is-dark {
205
+ @include vf-chip-dark-theme(negative);
206
+ }
207
+ // stylelint-disable-next-line selector-max-type
208
+ button.p-chip--negative {
209
+ @include vf-chip-light-theme($chip-type: negative, $is-interactive: true);
210
+ }
211
+ // stylelint-disable-next-line selector-max-type
212
+ button.p-chip--negative.is-dark {
213
+ @include vf-chip-dark-theme($chip-type: negative, $is-interactive: true);
214
+ }
215
+
216
+ .p-chip--information {
217
+ @include vf-chip-light-theme(information);
218
+ }
219
+ .p-chip--information.is-dark {
220
+ @include vf-chip-dark-theme(information);
221
+ }
222
+ // stylelint-disable-next-line selector-max-type
223
+ button.p-chip--information {
224
+ @include vf-chip-light-theme($chip-type: information, $is-interactive: true);
225
+ }
226
+ // stylelint-disable-next-line selector-max-type
227
+ button.p-chip--information.is-dark {
228
+ @include vf-chip-dark-theme($chip-type: information, $is-interactive: true);
229
+ }
112
230
  }
113
231
  }
114
232
 
115
- @mixin vf-chip-information {
116
- .p-chip--information {
117
- @extend %vf-chip;
118
- @include vf-chip-type(information);
233
+ @mixin vf-chip-theme($chip-type: neutral, $is-interactive: false, $colors-chip-tinted-backgrounds, $colors-chip-tinted-borders, $color-chip-value, $color-chip-lead) {
234
+ @if (not map-has-key($colors-chip-tinted-backgrounds, $chip-type)) {
235
+ $chip-type: neutral;
119
236
  }
120
- }
121
237
 
122
- @mixin vf-chip-type($type: neutral) {
123
- $color-background: null;
124
- $color-border: null;
238
+ $color-background: map-get($colors-chip-tinted-backgrounds, $chip-type, 'default');
239
+ $color-background-hover: map-get($colors-chip-tinted-backgrounds, $chip-type, 'hover');
240
+ $color-background-active: map-get($colors-chip-tinted-backgrounds, $chip-type, 'active');
241
+ $color-border: map-get($colors-chip-tinted-borders, $chip-type);
242
+
243
+ background-color: $color-background;
244
+ border: 1px solid $color-border;
125
245
 
126
- @if (map-has-key($colors-light-theme--tinted-backgrounds, $type)) {
127
- $color-background: map-get($colors-light-theme--tinted-backgrounds, $type);
128
- $color-border: map-get($colors-light-theme--tinted-borders, $type);
246
+ .p-chip__value {
247
+ color: $color-chip-value;
248
+ }
249
+ .p-chip__lead,
250
+ .p-chip__lead + .p-chip__value::before {
251
+ color: $color-chip-lead;
252
+ }
253
+
254
+ @if ($is-interactive) {
255
+ &:hover {
256
+ background-color: $color-background-hover;
257
+ border-color: $color-border;
258
+ }
259
+ &[aria-pressed='true'],
260
+ &.is-selected,
261
+ &:active {
262
+ background-color: $color-background-active;
263
+ border-color: $color-border;
264
+ }
129
265
  } @else {
130
- $color-background: map-get($colors-light-theme--tinted-backgrounds, neutral);
131
- $color-border: map-get($colors-light-theme--tinted-borders, neutral);
266
+ .p-chip__dismiss {
267
+ @include vf-icon-close($color-chip-lead);
268
+
269
+ @include vf-button-pattern(
270
+ $button-background-color: transparent,
271
+ $button-border-color: transparent,
272
+ $button-hover-background-color: $color-background-hover,
273
+ $button-hover-border-color: transparent,
274
+ $button-active-background-color: $color-background-active,
275
+ $button-active-border-color: transparent
276
+ );
277
+ }
132
278
  }
279
+ }
133
280
 
134
- background-color: $color-background;
135
- border: 1px solid $color-border;
281
+ @mixin vf-chip-light-theme($chip-type: neutral, $is-interactive: false) {
282
+ @include vf-chip-theme(
283
+ $chip-type: $chip-type,
284
+ $is-interactive: $is-interactive,
285
+ $colors-chip-tinted-backgrounds: $colors-light-theme--tinted-backgrounds,
286
+ $colors-chip-tinted-borders: $colors-light-theme--tinted-borders,
287
+ $color-chip-value: $colors--light-theme--text-default,
288
+ $color-chip-lead: $colors--light-theme--text-default
289
+ );
290
+ }
291
+
292
+ @mixin vf-chip-dark-theme($chip-type: neutral, $is-interactive: false) {
293
+ @include vf-chip-theme(
294
+ $chip-type: $chip-type,
295
+ $is-interactive: $is-interactive,
296
+ $colors-chip-tinted-backgrounds: $colors-dark-theme--tinted-backgrounds,
297
+ $colors-chip-tinted-borders: $colors-dark-theme--tinted-borders,
298
+ $color-chip-value: $colors--dark-theme--text-default,
299
+ $color-chip-lead: $colors--dark-theme--text-default
300
+ );
136
301
  }
package/scss/_patterns_divider.scss CHANGED
@@ -28,7 +28,7 @@
28
28
  &:not(:first-child)::before {
29
29
  bottom: 0;
30
30
  content: '';
31
- left: map-get($grid-gutter-widths, large) * -0.5; // "large" here is not a typo. The grid switches to 12 columns at breakpoint medium. Hence the use of large-screen gutter
31
+ left: map-get($grid-gutter-widths, default) * -0.5; // "large" here is not a typo. The grid switches to 12 columns at breakpoint medium. Hence the use of large-screen gutter
32
32
  position: absolute;
33
33
  top: 0;
34
34
  width: 1px;
package/scss/_patterns_grid.scss CHANGED
@@ -128,13 +128,13 @@
128
128
  right: map-get($grid-margin-widths, small);
129
129
 
130
130
  @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
131
- left: map-get($grid-margin-widths, medium);
132
- right: map-get($grid-margin-widths, medium);
131
+ left: map-get($grid-margin-widths, default);
132
+ right: map-get($grid-margin-widths, default);
133
133
  }
134
134
 
135
135
  @media (min-width: $threshold-6-12-col) {
136
- left: map-get($grid-margin-widths, large);
137
- right: map-get($grid-margin-widths, large);
136
+ left: map-get($grid-margin-widths, default);
137
+ right: map-get($grid-margin-widths, default);
138
138
  }
139
139
  }
140
140
  }
package/scss/_patterns_label.scss CHANGED
@@ -22,52 +22,28 @@
22
22
  color: $color-x-light;
23
23
  }
24
24
 
25
- @include vf-p-label-validated;
26
- @include vf-p-label-in-progress;
27
- @include vf-p-label-new;
28
- @include vf-p-label-updated;
29
- @include vf-p-label-deprecated;
30
- }
31
-
32
- // Override local variables
33
- @mixin vf-p-label-validated {
34
- .p-label--validated {
25
+ .p-label--positive {
35
26
  @extend %vf-label;
36
27
 
37
- background-color: $color-label-validated;
28
+ background-color: $color-positive;
38
29
  color: $color-x-light;
39
30
  }
40
- }
41
31
 
42
- @mixin vf-p-label-in-progress {
43
- .p-label--in-progress {
32
+ .p-label--caution {
44
33
  @extend %vf-label;
45
34
 
46
35
  background-color: $color-caution;
47
36
  color: $color-dark;
48
37
  }
49
- }
50
38
 
51
- @mixin vf-p-label-new {
52
- .p-label--new {
53
- @extend %vf-label;
54
-
55
- background-color: $color-positive;
56
- color: $color-x-light;
57
- }
58
- }
59
-
60
- @mixin vf-p-label-updated {
61
- .p-label--updated {
39
+ .p-label--information {
62
40
  @extend %vf-label;
63
41
 
64
42
  background-color: $color-information;
65
43
  color: $color-x-light;
66
44
  }
67
- }
68
45
 
69
- @mixin vf-p-label-deprecated {
70
- .p-label--deprecated {
46
+ .p-label--negative {
71
47
  @extend %vf-label;
72
48
 
73
49
  background-color: $color-negative;
package/scss/_patterns_logo-section.scss CHANGED
@@ -16,14 +16,14 @@
16
16
  @if $breakpoint == medium {
17
17
  $grid-column-count: $grid-columns-medium;
18
18
  $grid-column-prefix: $grid-medium-col-prefix;
19
- $gutter: map-get($grid-gutter-widths, medium);
19
+ $gutter: map-get($grid-gutter-widths, default);
20
20
  $media-query-keyword: min-width;
21
21
  $media-query-width: $threshold-4-6-col;
22
22
  $logo-column-span: 1;
23
23
  } @else if $breakpoint == large {
24
24
  $grid-column-count: $grid-columns;
25
25
  $grid-column-prefix: $grid-large-col-prefix;
26
- $gutter: map-get($grid-gutter-widths, large);
26
+ $gutter: map-get($grid-gutter-widths, default);
27
27
  $media-query-keyword: min-width;
28
28
  $media-query-width: $threshold-6-12-col;
29
29
  $logo-column-span: 2;
@@ -103,8 +103,8 @@
103
103
  }
104
104
 
105
105
  $margin-small: map-get($grid-gutter-widths, small);
106
- $margin-medium: map-get($grid-gutter-widths, medium);
107
- $margin-large: map-get($grid-gutter-widths, large);
106
+ $margin-medium: map-get($grid-gutter-widths, default);
107
+ $margin-large: map-get($grid-gutter-widths, default);
108
108
 
109
109
  .p-logo-section__items {
110
110
  display: flex;
package/scss/_patterns_navigation.scss CHANGED
@@ -14,7 +14,7 @@ $lightness-threshold: 70;
14
14
  padding-left: map-get($grid-margin-widths, small);
15
15
 
16
16
  @media (min-width: $threshold-4-6-col) {
17
- padding-left: map-get($grid-margin-widths, medium);
17
+ padding-left: map-get($grid-margin-widths, default);
18
18
  }
19
19
 
20
20
  @media (min-width: $breakpoint-navigation-threshold) {
@@ -27,7 +27,7 @@ $lightness-threshold: 70;
27
27
  padding-right: map-get($grid-margin-widths, small);
28
28
 
29
29
  @media (min-width: $threshold-4-6-col) {
30
- padding-right: map-get($grid-margin-widths, medium);
30
+ padding-right: map-get($grid-margin-widths, default);
31
31
  }
32
32
 
33
33
  @media (min-width: $breakpoint-navigation-threshold) {
@@ -102,8 +102,8 @@ $lightness-threshold: 70;
102
102
  order: -1;
103
103
 
104
104
  @media (min-width: $threshold-4-6-col) {
105
- margin-left: map-get($grid-margin-widths, medium);
106
- margin-right: map-get($grid-margin-widths, medium);
105
+ margin-left: map-get($grid-margin-widths, default);
106
+ margin-right: map-get($grid-margin-widths, default);
107
107
  }
108
108
 
109
109
  @media (min-width: $breakpoint-navigation-threshold) {
@@ -207,7 +207,7 @@ $lightness-threshold: 70;
207
207
  display: flex;
208
208
  flex-direction: row;
209
209
  justify-content: space-between;
210
- margin-right: map-get($grid-margin-widths, large);
210
+ margin-right: map-get($grid-margin-widths, default);
211
211
  width: 100%;
212
212
  }
213
213
  }
@@ -336,7 +336,7 @@ $lightness-threshold: 70;
336
336
  width: map-get($icon-sizes, default);
337
337
 
338
338
  @media (min-width: $threshold-4-6-col) {
339
- right: map-get($grid-margin-widths, medium);
339
+ right: map-get($grid-margin-widths, default);
340
340
  }
341
341
 
342
342
  @media (min-width: $breakpoint-navigation-threshold) {
@@ -439,7 +439,7 @@ $lightness-threshold: 70;
439
439
  width: map-get($icon-sizes, default);
440
440
 
441
441
  @media (min-width: $threshold-4-6-col) {
442
- right: map-get($grid-margin-widths, medium);
442
+ right: map-get($grid-margin-widths, default);
443
443
  }
444
444
 
445
445
  @media (min-width: $breakpoint-navigation-threshold) {
package/scss/_patterns_search-and-filter.scss CHANGED
@@ -153,12 +153,14 @@
153
153
  border: 0;
154
154
  }
155
155
 
156
+ // hide chips lead when there are in panel
157
+ // FIXME: this should be handled in HTML/React, not CSS
156
158
  .p-chip {
157
- @include vf-focus;
158
-
159
- cursor: pointer;
159
+ .p-chip__lead {
160
+ display: none;
161
+ }
160
162
 
161
- &__lead {
163
+ .p-chip__lead + .p-chip__value::before {
162
164
  display: none;
163
165
  }
164
166
  }
package/scss/_patterns_side-navigation.scss CHANGED
@@ -357,11 +357,11 @@
357
357
  #{$prop}: $multiplier * map-get($grid-margin-widths, small) + $offset;
358
358
 
359
359
  @media (min-width: $threshold-4-6-col) {
360
- #{$prop}: $multiplier * map-get($grid-margin-widths, medium) + $offset;
360
+ #{$prop}: $multiplier * map-get($grid-margin-widths, default) + $offset;
361
361
  }
362
362
 
363
363
  @media (min-width: $threshold-6-12-col) {
364
- #{$prop}: $multiplier * map-get($grid-margin-widths, large) + $offset;
364
+ #{$prop}: $multiplier * map-get($grid-margin-widths, default) + $offset;
365
365
  }
366
366
  }
367
367
 
package/scss/_patterns_table-expanding.scss CHANGED
@@ -20,10 +20,6 @@
20
20
  flow: row;
21
21
  wrap: wrap;
22
22
  }
23
-
24
- + tr {
25
- margin: 0;
26
- }
27
23
  }
28
24
 
29
25
  th,
package/scss/_patterns_table-mobile-card.scss CHANGED
@@ -56,8 +56,8 @@
56
56
  overflow: visible;
57
57
  }
58
58
 
59
- &[aria-label]::before {
60
- content: attr(aria-label);
59
+ &[data-heading]::before {
60
+ content: attr(data-heading);
61
61
  display: block;
62
62
  margin-bottom: map-get($sp-after, x-small) - map-get($nudges, x-small) - $sp-unit;
63
63
  overflow: hidden;
package/scss/_settings_colors.scss CHANGED
@@ -39,7 +39,7 @@ $color-focus-negative: #3b0006 !default;
39
39
 
40
40
  // Button background color changes
41
41
  $hover-background-opacity-amount: 0.05;
42
- $active-background-opacity-amount: 0.08;
42
+ $active-background-opacity-amount: 0.1;
43
43
 
44
44
  $muted-text-opacity-amount: 0.6;
45
45
  $inactive-text-opacity-amount: 0.75;
@@ -93,19 +93,38 @@ $colors--light-theme--border-default: rgba($color-x-dark, 0.15) !default;
93
93
  $colors--light-theme--border-high-contrast: rgba($color-x-dark, 0.56) !default;
94
94
  $colors--light-theme--border-low-contrast: rgba($color-x-dark, 0.1) !default;
95
95
 
96
- //XXX: add dark theme versions of tinted background and border colours for use with dark theme chips, notificaitons, etc.
97
96
  $colors-light-theme--tinted-backgrounds: (
98
- neutral: #f2f2f2,
99
- positive: #e8fdec,
100
- caution: #fef1dc,
101
- negative: #fce8ea,
102
- information: #e5f2ff,
97
+ neutral: (
98
+ default: #f2f2f2,
99
+ hover: adjust-color(#f2f2f2, $lightness: -100% * $hover-background-opacity-amount, $saturation: -100% * 2 * $hover-background-opacity-amount),
100
+ active: adjust-color(#f2f2f2, $lightness: -100% * $active-background-opacity-amount, $saturation: -100% * 2 * $active-background-opacity-amount),
101
+ ),
102
+ positive: (
103
+ default: hsl(129deg 90% 39% / 10%),
104
+ hover: hsl(129deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
105
+ active: hsl(129deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
106
+ ),
107
+ caution: (
108
+ default: hsl(27deg 100% 39% / 10%),
109
+ hover: hsl(27deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
110
+ active: hsl(27deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
111
+ ),
112
+ negative: (
113
+ default: hsl(354deg 100% 39% / 10%),
114
+ hover: hsl(354deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
115
+ active: hsl(354deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
116
+ ),
117
+ information: (
118
+ default: hsl(210deg 100% 39% / 10%),
119
+ hover: hsl(210deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
120
+ active: hsl(210deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
121
+ ),
103
122
  );
104
123
 
105
124
  $colors-light-theme--tinted-borders: (
106
125
  neutral: $colors--light-theme--border-high-contrast,
107
126
  positive: $color-positive,
108
- caution: #ec6c04,
127
+ caution: hsl(27deg 100% 39%),
109
128
  negative: $color-negative,
110
129
  information: $color-information,
111
130
  );
@@ -123,9 +142,45 @@ $colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $
123
142
  $colors--dark-theme--background-overlay: transparentize($color-dark, 0.15) !default;
124
143
 
125
144
  $colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.2) !default;
126
- $colors--dark-theme--border-high-contrast: rgba($colors--dark-theme--text-default, 0.4) !default;
145
+ $colors--dark-theme--border-high-contrast: hsl(0deg 0% 60%) !default;
127
146
  $colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.1) !default;
128
147
 
148
+ $colors-dark-theme--tinted-backgrounds: (
149
+ neutral: (
150
+ default: rgba(255, 255, 255, 0.15),
151
+ hover: rgba(255, 255, 255, 0.2),
152
+ active: rgba(255, 255, 255, 0.25),
153
+ ),
154
+ positive: (
155
+ default: hsl(129deg 90% 39% / 20%),
156
+ hover: hsl(129deg 100% 39% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
157
+ active: hsl(129deg 100% 39% / #{20% + 2 * $active-background-opacity-amount * 100%}),
158
+ ),
159
+ caution: (
160
+ default: hsl(27deg 100% 50% / 20%),
161
+ hover: hsl(27deg 100% 60% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
162
+ active: hsl(27deg 100% 50% / #{20% + 2 * $active-background-opacity-amount * 100%}),
163
+ ),
164
+ negative: (
165
+ default: hsl(353deg 100% 70% / 20%),
166
+ hover: hsl(353deg 100% 70% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
167
+ active: hsl(353deg 100% 70% / #{20% + 2 * $active-background-opacity-amount * 100%}),
168
+ ),
169
+ information: (
170
+ default: hsl(210deg 100% 50% / 20%),
171
+ hover: hsl(210deg 100% 50% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
172
+ active: hsl(210deg 100% 50% / #{20% + 2 * $active-background-opacity-amount * 100%}),
173
+ ),
174
+ );
175
+
176
+ $colors-dark-theme--tinted-borders: (
177
+ neutral: hsl(0deg 0% 65%),
178
+ positive: hsl(129deg 60% 65%),
179
+ caution: hsl(27deg 80% 65%),
180
+ negative: hsl(353deg 80% 70%),
181
+ information: hsl(210deg 80% 65%),
182
+ );
183
+
129
184
  // Branding colors
130
185
  $color-brand: #333 !default;
131
186
  $color-brand-dark: $color-brand !default;
package/scss/_settings_grid.scss CHANGED
@@ -16,14 +16,12 @@ $grid-large-col-prefix: #{$grid-column-prefix} !default;
16
16
 
17
17
  $grid-gutter-widths: (
18
18
  small: $sp-unit * 3,
19
- medium: $sp-unit * 4,
20
- large: $sp-unit * 4,
19
+ default: $sp-unit * 4,
21
20
  ) !default;
22
21
 
23
22
  $grid-margin-widths: (
24
23
  small: $sp-unit * 2,
25
- medium: $sp-unit * 3,
26
- large: $sp-unit * 3,
24
+ default: $sp-unit * 3,
27
25
  ) !default;
28
26
 
29
27
  // Grid breakout template
package/scss/_settings_spacing.scss CHANGED
@@ -118,7 +118,7 @@ $form-radio-circle-offset: 0.5 * ($form-tick-box-size - $form-radio-inner-circle
118
118
  $text-max-width: 40em !default;
119
119
 
120
120
  $icon-sizes: (
121
- accordion: $sp-unit * 1.5,
121
+ small: $sp-unit * 1.5,
122
122
  default: $sp-unit * 2,
123
123
  heading-icon--x-small: $sp-unit * 3,
124
124
  heading-icon--small: $sp-unit * 4,
package/scss/_settings_themes.scss CHANGED
@@ -7,3 +7,4 @@ $theme-default-p-divider: 'light' !default;
7
7
  $theme-default-p-contextual-menu: 'light' !default;
8
8
  $theme-default-p-inline-list--middot: 'light' !default;
9
9
  $theme-default-p-button: 'light' !default;
10
+ $theme-default-p-chip: 'light' !default;