Skip to content

feat: Update @use @forward and hsla #961

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
IvayloG merged 6 commits into from
Dec 10, 2021
Merged

feat: Update @use @forward and hsla #961

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9b2caa8
feat: Update @use @forward and hsla
IvayloG Dec 3, 2021
d989c55
Merge branch 'vNext' into iganchev/scss-use
IvayloG Dec 3, 2021
a630349
chore: Address comments
IvayloG Dec 10, 2021
0963ac2
Merge branch 'iganchev/scss-use' of https://github.com/IgniteUI/ignit…
IvayloG Dec 10, 2021
a4581b8
chore: Revert @use
IvayloG Dec 10, 2021
1b8bbf6
Merge branch 'master' into iganchev/scss-use
Lipata Dec 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/cli/migrations/update-4_2_3/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe("Update 4.2.3", () => {
it("should add Awesome Grid extra paginator style", async done => {
const stylesFile = "/src/app/awesome-grid/awesome-grid.component.scss";
appTree.create(stylesFile,
`@import '~igniteui-angular/theming';
`@use 'igniteui-angular/theming' as *;

:host ::ng-deep {

Expand All @@ -46,7 +46,7 @@ describe("Update 4.2.3", () => {
await schematicRunner.runSchematicAsync("migration-04", {}, appTree).toPromise();
expect(appTree.readContent(stylesFile).replace(/\r\n/g, "\n"))
.toEqual(
`@import '~igniteui-angular/theming';
`@use 'igniteui-angular/theming' as *;

:host ::ng-deep {

Expand Down
2 changes: 1 addition & 1 deletion packages/cli/templates/webcomponents/igc-ts/projects/empty/files/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
:host {
display: block;
padding: 25px;
color: var(--test-component-test-text-color, #000);
color: hsla(var(--test-component-test-text-color, #000));
Comment thread
wnvko marked this conversation as resolved.
Outdated
}

#outlet {
Expand Down
12 changes: 4 additions & 8 deletions packages/igx-templates/Update.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,17 +118,13 @@ export class HomeComponent {
}`}, {
path: "src/home.component.scss",
content:
`@import '~igniteui-angular/theming';
@import '~igniteui-dockmanager/styles/themes/test';
@use 'igniteui-angular/theming';
@forward 'igniteui-angular/theming';
`@use 'igniteui-angular/theming' as *;
@use 'igniteui-dockmanager/styles/themes/test' as *;
@include igx-core();
`,
expected:
`@import '~@infragistics/igniteui-angular/theming';
@import '~@infragistics/igniteui-dockmanager/styles/themes/test';
@use '@infragistics/igniteui-angular/theming';
@forward '@infragistics/igniteui-angular/theming';
`@use '@infragistics/igniteui-angular/theming' as *;
@use '@infragistics/igniteui-dockmanager/styles/themes/test' as *;
@include igx-core();
`}, {
path: "angular.json",
Expand Down
3 changes: 1 addition & 2 deletions ...igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@import '~<%=igxPackage%>/theming';

@use '<%=igxPackage%>/theming' as *;
$grid-sample-theme: igx-grid-theme(
$row-selected-background: #333,
$row-selected-text-color: #ddd,
Expand Down
2 changes: 1 addition & 1 deletion ...tes/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use '<%=igxPackage%>/theming' as *;
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
Comment thread
wnvko marked this conversation as resolved.
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
@import '~<%=igxPackage%>/theming';

:host ::ng-deep {

Expand Down
7 changes: 4 additions & 3 deletions ...igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@use '<%=igxPackage%>/theming' as *;
@use './themes/_mixins' as *;

:host {
display: block;
width: 100%;
Expand Down Expand Up @@ -175,7 +178,7 @@
.control-item {
padding-right: 20px;
label {
color: var(--igx-surface-500-contrast);
color: hsla(var(--igx-surface-500-contrast));
Comment thread
wnvko marked this conversation as resolved.
Outdated
}
}
.igx-slider,
Expand Down Expand Up @@ -224,12 +227,10 @@
height: 100%;
}

@import '~<%=igxPackage%>/theming';
@include igx-core();
@include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale);
@include igx-theme($default-palette);

@import './themes/_mixins';

@include scrollbar-love();

Expand Down
4 changes: 3 additions & 1 deletion ...templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/themes/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
@use '@infragistics/igniteui-angular/theming' as *;

@mixin scrollbar-love($scrollbar-color: null) {
$scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200));
$scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400));

@if $scrollbar-color and luminance($scrollbar-color) < .5 {
$scrollbar-track: darken($scrollbar-color, 8%);
$scrollbar-thumb: lighten($scrollbar-color, 20%);
Expand Down
5 changes: 3 additions & 2 deletions ...s/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@use '<%=igxPackage%>/theming' as *;
@use './themes/_mixins' as *;

:host ::ng-deep {
.finjs-icons {
display: flex;
Expand Down Expand Up @@ -202,12 +205,10 @@
// Custom Dark Theme

// Import the theme utilities first
@import '~<%=igxPackage%>/theming';
@include igx-core();
@include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale);
@include igx-theme($default-palette);

@import './themes/_mixins';

$green-palette: igx-palette($primary: #09f,$secondary: #72da67, $surface: #333);

Expand Down
4 changes: 3 additions & 1 deletion ...ates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/themes/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use '@infragistics/igniteui-angular/theming' as *;
Comment thread
wnvko marked this conversation as resolved.
Outdated

@mixin scrollbar-love($scrollbar-color: null) {
$scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200));
$scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400));
Expand All @@ -16,4 +18,4 @@
::-webkit-scrollbar-thumb {
background-color: $scrollbar-thumb;
}
}
}
3 changes: 2 additions & 1 deletion packages/igx-templates/igx-ts/projects/_base/files/src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* You can add global styles to this file, and also import other style files */
// Standard CSS normalize, comment out if not required or using a different module
@import "~minireset.css/minireset";
@use "~minireset.css/minireset" as *;
@forward "~minireset.css/minireset";

<%=CustomTheme%>
html, body {
Expand Down
2 changes: 1 addition & 1 deletion packages/igx-templates/igx-ts/projects/_base/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export class BaseIgxProject implements ProjectTemplate {

private CUSTOM_THEME
= `/* See: https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index */
@import "~igniteui-angular/theming";
@use "igniteui-angular/theming" as *;

$primary: #731963 !default;
$secondary: #ce5712 !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/igx-templates/igx-ts/projects/empty/files/src/app/home/home.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "~igniteui-angular/theming";
@use '<%=igxPackage%>/theming' as *;

%content-display {
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion ...es/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ igx-tree {
.node-refresh {
cursor: pointer;
padding: 0px 4px;
color: var(--igx-success-500);
color: hsla(var(--igx-success-500));
}

.node {
Expand Down
2 changes: 1 addition & 1 deletion spec/unit/PromptSession-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -690,7 +690,7 @@ describe("Unit - PromptSession", () => {
await mockSession.start();
const CUSTOM_THEME = `
/* See: https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index */
@import "~igniteui-angular/theming";
@use "igniteui-angular/theming" as *;
$primary: #731963 !default;
$secondary: #ce5712 !default;
$app-palette: igx-palette($primary, $secondary);
Expand Down