Skip to content

Commit 5bf7b04

Browse files
devversionandrewseguin
devversion
authored and
andrewseguin
committed
refactor: switch "material" away from cross-package relative Sass imports
1 parent 6c999eb commit 5bf7b04

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+251
-185
lines changed

‎src/material/BUILD.bazel

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,8 @@ filegroup(
1919
srcs = ["//src/material/%s:overview" % name for name in MATERIAL_ENTRYPOINTS],
2020
)
2121

22-
# Makes the theming bundle available in the release output as `angular/material/theming`.
2322
sass_library(
24-
name = "theming_bundle",
23+
name = "sass_lib",
2524
srcs = [
2625
"_index.scss",
2726
"_theming.scss",
@@ -36,7 +35,7 @@ ng_package(
3635
"package.json",
3736
],
3837
data = [
39-
":theming_bundle",
38+
":sass_lib",
4039
"//src/material/core:theming_scss_lib",
4140
"//src/material/prebuilt-themes:deeppurple-amber",
4241
"//src/material/prebuilt-themes:indigo-pink",

‎src/material/_index.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,25 @@
1414
@forward './core/typography/typography-utils' show typography-level,
1515
font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
1616

17+
// Private/Internal
18+
@forward './core/density/private/all-density' as private-* show private-all-component-densities;
19+
@forward './core/theming/theming' show private-check-duplicate-theme-styles,
20+
private-legacy-get-theme, private-is-theme-object;
21+
@forward './core/style/layout-common' as private-* show private-fill;
22+
@forward './core/style/private' show private-theme-elevation, private-animation-noop;
23+
@forward './core/style/vendor-prefixes' as private-* show private-user-select,
24+
private-position-sticky, private-color-adjust;
25+
@forward './core/theming/palette' as private-* show $private-dark-primary-text,
26+
$private-dark-disabled-text;
27+
@forward './core/style/variables' as private-* show $private-swift-ease-in-duration,
28+
$private-swift-ease-in-timing-function, $private-swift-ease-out-timing-function,
29+
$private-ease-in-out-curve-function, $private-swift-ease-out-duration, $private-xsmall;
30+
@forward './core/typography/typography' show private-typography-to-2014-config,
31+
private-typography-to-2018-config;
32+
@forward './table/table-flex-styles' show private-table-flex-styles;
33+
@forward './core/style/menu-common' as private-menu-common-*;
34+
@forward './core/style/button-common' as private-button-common-*;
35+
1736
// Structural
1837
@forward './core/core' show core;
1938
@forward './core/ripple/ripple' show ripple;

‎src/material/autocomplete/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ sass_binary(
4646
name = "autocomplete_scss",
4747
src = "autocomplete.scss",
4848
deps = [
49-
"//src/cdk/a11y:a11y_scss_lib",
49+
"//src/cdk:sass_lib",
5050
"//src/material/core:core_scss_lib",
5151
],
5252
)

‎src/material/autocomplete/autocomplete.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
@use '@angular/cdk';
2+
13
@use '../core/style/menu-common';
2-
@use '../../cdk/a11y';
34

45
// The max-height of the panel, currently matching mat-select value.
56
$panel-max-height: 256px !default;
@@ -36,7 +37,7 @@ $panel-border-radius: 4px !default;
3637
margin-top: -1px;
3738
}
3839

39-
@include a11y.high-contrast(active, off) {
40+
@include cdk.high-contrast(active, off) {
4041
outline: solid 1px;
4142
}
4243
}

‎src/material/badge/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ sass_library(
3131
name = "badge_scss_lib",
3232
srcs = glob(["**/_*.scss"]),
3333
deps = [
34-
"//src/cdk/a11y:a11y_scss_lib",
34+
"//src/cdk:sass_lib",
3535
"//src/material/core:core_scss_lib",
3636
],
3737
)

‎src/material/badge/_badge-theme.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
@use 'sass:map';
66
@use 'sass:meta';
77
@use 'sass:math';
8+
@use '@angular/cdk';
9+
810
@use '../core/theming/theming';
911
@use '../core/typography/typography';
1012
@use '../core/typography/typography-utils';
11-
@use '../../cdk/a11y';
1213

1314
$font-size: 12px;
1415
$font-weight: 600;
@@ -166,7 +167,7 @@ $_badge-structure-emitted: false !default;
166167
color: theming.get-color-from-palette($primary, default-contrast);
167168
background: theming.get-color-from-palette($primary);
168169

169-
@include a11y.high-contrast(active, off) {
170+
@include cdk.high-contrast(active, off) {
170171
outline: solid 1px;
171172
border-radius: 0;
172173
}

‎src/material/bottom-sheet/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ sass_library(
4545
sass_binary(
4646
name = "bottom_sheet_container_scss",
4747
src = "bottom-sheet-container.scss",
48-
deps = ["//src/cdk/a11y:a11y_scss_lib"],
48+
deps = ["//src/cdk:sass_lib"],
4949
)
5050

5151
ng_test_library(

‎src/material/bottom-sheet/bottom-sheet-container.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use '../../cdk/a11y';
1+
@use '@angular/cdk';
22

33
// The bottom sheet minimum width on larger screen sizes is based
44
// on increments of the toolbar, according to the spec. See:
@@ -17,7 +17,7 @@ $container-horizontal-padding: 16px !default;
1717
max-height: 80vh;
1818
overflow: auto;
1919

20-
@include a11y.high-contrast(active, off) {
20+
@include cdk.high-contrast(active, off) {
2121
outline: 1px solid;
2222
}
2323
}

‎src/material/button-toggle/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ sass_binary(
4343
name = "button_toggle_scss",
4444
src = "button-toggle.scss",
4545
deps = [
46-
"//src/cdk/a11y:a11y_scss_lib",
46+
"//src/cdk:sass_lib",
4747
"//src/material/core:core_scss_lib",
4848
],
4949
)

‎src/material/button-toggle/button-toggle.scss

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
@use '@angular/cdk';
2+
13
@use '../core/style/vendor-prefixes';
24
@use '../core/style/layout-common';
3-
@use '../../cdk/a11y';
45

56
$standard-padding: 0 12px !default;
67
$standard-border-radius: 4px !default;
@@ -22,7 +23,7 @@ $legacy-border-radius: 2px !default;
2223
// Fixes the ripples not being clipped to the border radius on Safari.
2324
transform: translateZ(0);
2425

25-
@include a11y.high-contrast(active, off) {
26+
@include cdk.high-contrast(active, off) {
2627
outline: solid 1px;
2728
}
2829
}
@@ -31,7 +32,7 @@ $legacy-border-radius: 2px !default;
3132
.mat-button-toggle-group-appearance-standard {
3233
border-radius: $standard-border-radius;
3334

34-
@include a11y.high-contrast(active, off) {
35+
@include cdk.high-contrast(active, off) {
3536
outline: 0;
3637
}
3738
}
@@ -60,7 +61,7 @@ $legacy-border-radius: 2px !default;
6061
opacity: 1;
6162

6263
// In high contrast mode `opacity: 1` will show the overlay as solid so we fall back 0.5.
63-
@include a11y.high-contrast(active, off) {
64+
@include cdk.high-contrast(active, off) {
6465
opacity: 0.5;
6566
}
6667
}
@@ -80,7 +81,7 @@ $legacy-border-radius: 2px !default;
8081
&.cdk-keyboard-focused:not(.mat-button-toggle-disabled) .mat-button-toggle-focus-overlay {
8182
opacity: 0.12;
8283

83-
@include a11y.high-contrast(active, off) {
84+
@include cdk.high-contrast(active, off) {
8485
opacity: 0.5;
8586
}
8687
}
@@ -126,7 +127,7 @@ $legacy-border-radius: 2px !default;
126127
// Changing the background color for the selected item won't be visible in high contrast mode.
127128
// We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
128129
// It uses a border, because the browser will render it using a brighter color.
129-
@include a11y.high-contrast(active, off) {
130+
@include cdk.high-contrast(active, off) {
130131
.mat-button-toggle-checked & {
131132
border-bottom: solid $legacy-height;
132133
opacity: 0.5;
@@ -135,7 +136,7 @@ $legacy-border-radius: 2px !default;
135136
}
136137
}
137138

138-
@include a11y.high-contrast(active, off) {
139+
@include cdk.high-contrast(active, off) {
139140
.mat-button-toggle-checked.mat-button-toggle-appearance-standard
140141
.mat-button-toggle-focus-overlay {
141142
// In high contrast mode, we use a border for the checked state because backgrounds

‎src/material/button/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ sass_binary(
3939
src = "button.scss",
4040
deps = [
4141
":button_scss_lib",
42-
"//src/cdk/a11y:a11y_scss_lib",
42+
"//src/cdk:sass_lib",
4343
"//src/material/core:core_scss_lib",
4444
],
4545
)

‎src/material/button/button.scss

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
@use '@angular/cdk';
2+
3+
@use './button-base';
4+
@use '../core/style/layout-common';
5+
16
// TODO(jelbourn): Measure perf benefits for translate3d and will-change.
27
// TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.
3-
@use 'button-base';
4-
@use '../core/style/layout-common';
5-
@use '../../cdk/a11y';
68

79
.mat-button, .mat-icon-button {
810
.mat-button-focus-overlay {
@@ -155,7 +157,7 @@
155157

156158
// Add an outline to make buttons more visible in high contrast mode. Stroked buttons
157159
// don't need a special look in high-contrast mode, because those already have an outline.
158-
@include a11y.high-contrast(active, off) {
160+
@include cdk.high-contrast(active, off) {
159161
.mat-button, .mat-flat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
160162
outline: solid 1px;
161163
}

‎src/material/card/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ sass_binary(
3333
name = "card_scss",
3434
src = "card.scss",
3535
deps = [
36-
"//src/cdk/a11y:a11y_scss_lib",
36+
"//src/cdk:sass_lib",
3737
"//src/material/core:core_scss_lib",
3838
],
3939
)

‎src/material/card/card.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@use 'sass:math';
2+
@use '@angular/cdk';
3+
24
@use '../core/style/variables';
35
@use '../core/style/elevation';
46
@use '../core/style/private';
5-
@use '../../cdk/a11y';
67

78

89
$padding: 16px !default;
@@ -38,7 +39,7 @@ $header-size: 40px !default;
3839
}
3940
}
4041

41-
@include a11y.high-contrast(active, off) {
42+
@include cdk.high-contrast(active, off) {
4243
outline: solid 1px;
4344
}
4445
}

‎src/material/checkbox/BUILD.bazel

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ sass_library(
3535
name = "checkbox_scss_lib",
3636
srcs = glob(["**/_*.scss"]),
3737
deps = [
38-
"//src/cdk/a11y:a11y_scss_lib",
3938
"//src/material/core:core_scss_lib",
4039
],
4140
)
@@ -44,7 +43,7 @@ sass_binary(
4443
name = "checkbox_scss",
4544
src = "checkbox.scss",
4645
deps = [
47-
"//src/cdk/a11y:a11y_scss_lib",
46+
"//src/cdk:sass_lib",
4847
"//src/material/core:core_scss_lib",
4948
],
5049
)

‎src/material/checkbox/checkbox.scss

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
@use 'sass:math';
2+
@use '@angular/cdk';
3+
24
@use '../core/style/elevation';
35
@use '../core/style/checkbox-common';
46
@use '../core/style/layout-common';
57
@use '../core/style/vendor-prefixes';
68
@use '../core/style/private';
7-
@use '../../cdk/a11y';
89
@use '../core/style/variables';
910

1011
// Manual calculation done on SVG
@@ -205,7 +206,7 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
205206
}
206207

207208
&.cdk-keyboard-focused .mat-checkbox-ripple {
208-
@include a11y.high-contrast(active, off) {
209+
@include cdk.high-contrast(active, off) {
209210
outline: solid 3px;
210211
}
211212
}
@@ -287,7 +288,7 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
287288
variables.$linear-out-slow-in-timing-function;
288289

289290
// force browser to show background-color when using the print function
290-
@include vendor-prefixes.private-color-adjust(exact);
291+
@include vendor-prefixes.color-adjust(exact);
291292

292293
._mat-animation-noopable & {
293294
transition: none;
@@ -296,7 +297,7 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
296297
// `.mat-checkbox` here is redundant, but we need it to increase the specificity so that
297298
// these styles don't get overwritten by the `background-color` from the theme.
298299
.mat-checkbox & {
299-
@include a11y.high-contrast(active, off) {
300+
@include cdk.high-contrast(active, off) {
300301
// Needs to be removed because it hides the checkbox outline.
301302
background: none;
302303
}
@@ -347,7 +348,7 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
347348
width: $_mark-stroke-size;
348349
}
349350

350-
@include a11y.high-contrast(black-on-white, off) {
351+
@include cdk.high-contrast(black-on-white, off) {
351352
// In the checkbox theme this `stroke` has !important which ends up overriding the browser's
352353
// automatic color inversion so we need to re-invert it ourselves for black-on-white.
353354
stroke: #000 !important;
@@ -363,7 +364,7 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
363364
transform: scaleX(0) rotate(0deg);
364365
border-radius: 2px;
365366

366-
@include a11y.high-contrast(active, off) {
367+
@include cdk.high-contrast(active, off) {
367368
height: 0;
368369
border-top: solid $height;
369370
margin-top: $height;
@@ -427,7 +428,7 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
427428
.mat-checkbox-disabled {
428429
cursor: default;
429430

430-
@include a11y.high-contrast(active, off) {
431+
@include cdk.high-contrast(active, off) {
431432
opacity: 0.5;
432433
}
433434
}

‎src/material/chips/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ sass_binary(
4242
name = "chips_scss",
4343
src = "chips.scss",
4444
deps = [
45-
"//src/cdk/a11y:a11y_scss_lib",
45+
"//src/cdk:sass_lib",
4646
"//src/material/core:core_scss_lib",
4747
],
4848
)

‎src/material/chips/chips.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
@use '@angular/cdk';
2+
13
@use '../core/style/variables';
24
@use '../core/style/elevation';
35
@use '../core/style/layout-common';
46
@use '../core/style/private';
5-
@use '../../cdk/a11y';
67

78
$chip-min-height: 32px;
89
$chip-vertical-padding: 7px;
@@ -88,7 +89,7 @@ $chip-remove-size: 18px;
8889
}
8990
}
9091

91-
@include a11y.high-contrast(active, off) {
92+
@include cdk.high-contrast(active, off) {
9293
outline: solid 1px;
9394

9495
&:focus {

‎src/material/core/BUILD.bazel

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,16 +62,16 @@ sass_library(
6262
exclude = ALL_THEMING_FILES,
6363
),
6464
deps = [
65-
"//src/cdk/a11y:a11y_scss_lib",
66-
"//src/cdk/overlay:overlay_scss_lib",
67-
"//src/cdk/text-field:text_field_scss_lib",
65+
"//src/cdk:sass_lib",
6866
],
6967
)
7068

7169
sass_library(
7270
name = "theming_scss_lib",
7371
srcs = ALL_THEMING_FILES,
74-
deps = MATERIAL_SCSS_LIBS,
72+
deps = MATERIAL_SCSS_LIBS + [
73+
"//src/cdk:sass_lib",
74+
],
7575
)
7676

7777
sass_binary(

0 commit comments

Comments
 (0)