diff --git a/live-editing/configs/ButtonConfigGenerator.ts b/live-editing/configs/ButtonConfigGenerator.ts index fbdecc802..3ae3e22d3 100644 --- a/live-editing/configs/ButtonConfigGenerator.ts +++ b/live-editing/configs/ButtonConfigGenerator.ts @@ -79,7 +79,6 @@ export class ButtonConfigGenerator implements IConfigGenerator { // button styling configs.push(new Config({ component: 'ButtonStylingComponent', - additionalFiles: ["/src/app/data-entries/button/button-styling/layout.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/button/" })); @@ -87,7 +86,6 @@ export class ButtonConfigGenerator implements IConfigGenerator { // button tailwind styling configs.push(new Config({ component: 'ButtonTailwindStylingComponent', - additionalFiles: ["/src/app/data-entries/button/button-tailwind-styling/layout.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/button/" })); diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.scss b/src/app/data-display/badge/badge-dot/badge-dot.component.scss index ffb028247..6c4f7b9e4 100644 --- a/src/app/data-display/badge/badge-dot/badge-dot.component.scss +++ b/src/app/data-display/badge/badge-dot/badge-dot.component.scss @@ -2,8 +2,6 @@ @use "igniteui-theming/sass/typography" as *; :host { - --sample-accent: var(--ig-primary-800); - display: grid; grid-auto-flow: column; place-content: center; @@ -103,7 +101,7 @@ $anchors: icon, avatar; color: var(--ig-gray-700); &.active { - color: var(--sample-accent); + color: var(--ig-primary-500); } } diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.html b/src/app/data-display/badge/badge-outlined/badge-outlined.component.html index 58333b1d6..36b762ca3 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.html +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.html @@ -1,4 +1,6 @@ - +
+ favorite_border +
diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss index 4dd987fdd..aff8f663f 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss @@ -21,7 +21,17 @@ } .icon-anchor { - --ig-avatar-background: #{color($color: gray, $variant: 900, $opacity: 0.08)}; + display: grid; + place-items: center; + inline-size: rem(36px); + block-size: rem(36px); + border-radius: 50%; + background: var(--ig-gray-200); + color: var(--ig-gray-800); + + igx-icon { + font-size: rem(18px); + } } igx-badge { @@ -32,6 +42,11 @@ igx-badge { inset-inline-start: anchor(85.5%); translate: -50% -50%; + &:nth-of-type(1) { + inset-block-start: anchor(10%); + inset-inline-start: anchor(100%); + } + &:nth-of-type(2) { inset-block-start: anchor(85.5%); } diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts b/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts index 226ce9c10..8dc6d59a4 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts @@ -1,13 +1,14 @@ import { Component } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IgxIconComponent } from 'igniteui-angular/icon'; import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper'; @Component({ selector: 'app-badge-outlined', styleUrls: ['./badge-outlined.component.scss'], templateUrl: './badge-outlined.component.html', - imports: [IgxAvatarComponent, IgxBadgeComponent, IGX_STEPPER_DIRECTIVES] + imports: [IgxAvatarComponent, IgxBadgeComponent, IgxIconComponent, IGX_STEPPER_DIRECTIVES] }) export class BadgeOutlinedComponent { diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.scss b/src/app/data-display/badge/badge-overview/badge-overview.component.scss index 51d1079d5..ae4d98831 100644 --- a/src/app/data-display/badge/badge-overview/badge-overview.component.scss +++ b/src/app/data-display/badge/badge-overview/badge-overview.component.scss @@ -17,6 +17,20 @@ igx-icon { igx-chip { --ig-size: var(--ig-size-large); + --ig-chip-background: var(--ig-gray-300); + --ig-chip-border-radius: #{rem(16px)}; + + ::ng-deep .igx-chip__item { + @include type-style("body-2") { + margin: 0; + } + + font-family: "Titillium Web", sans-serif; + font-size: rem(14px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.25px); + } } igx-badge { @@ -32,6 +46,10 @@ igx-badge:nth-of-type(1) { inset-block-start: anchor(85.5%); } +igx-badge:nth-of-type(3) { + inset-inline-start: anchor(93%); +} + $anchors: avatar, mail, events, notifications; @each $anchor in $anchors { diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.scss b/src/app/data-display/badge/badge-shape/badge-shape.component.scss index 5d38bab74..b7f2a5cd6 100644 --- a/src/app/data-display/badge/badge-shape/badge-shape.component.scss +++ b/src/app/data-display/badge/badge-shape/badge-shape.component.scss @@ -12,6 +12,10 @@ } span { + @include type-style("body-2") { + margin: 0; + } + justify-self: end; color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; @@ -19,13 +23,9 @@ span { font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("body-2") { - margin: 0; - } } -$sizes: small, medium, large; +$sizes: large, medium, small; @each $size in $sizes { $i: list.index($sizes, $size); diff --git a/src/app/data-display/badge/badge-size/badge-size.component.scss b/src/app/data-display/badge/badge-size/badge-size.component.scss index 7f2108c1b..12a08912c 100644 --- a/src/app/data-display/badge/badge-size/badge-size.component.scss +++ b/src/app/data-display/badge/badge-size/badge-size.component.scss @@ -12,6 +12,10 @@ } span { + @include type-style("body-2") { + margin: 0; + } + justify-self: end; color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; @@ -19,10 +23,6 @@ span { font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("body-2") { - margin: 0; - } } $sizes: small, medium, large; diff --git a/src/app/data-display/badge/badge-type/badge-type.component.scss b/src/app/data-display/badge/badge-type/badge-type.component.scss index ae272a6dc..6564e975a 100644 --- a/src/app/data-display/badge/badge-type/badge-type.component.scss +++ b/src/app/data-display/badge/badge-type/badge-type.component.scss @@ -16,12 +16,14 @@ $types: dot, icon, text; } igx-avatar { - --ig-avatar-size: #{rem(40px)}; - grid-row: 1; } span { + @include type-style("caption") { + margin: 0; + } + grid-row: 2; text-align: center; color: var(--ig-gray-600); @@ -30,10 +32,6 @@ span { font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("caption") { - margin: 0; - } } igx-badge { diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.scss b/src/app/data-display/badge/badge-variants/badge-variants.component.scss index 8f88e19da..8f424300d 100644 --- a/src/app/data-display/badge/badge-variants/badge-variants.component.scss +++ b/src/app/data-display/badge/badge-variants/badge-variants.component.scss @@ -20,6 +20,10 @@ igx-avatar { } span { + @include type-style("body-2") { + margin: 0; + } + grid-row: 2; text-align: center; color: var(--ig-gray-600); @@ -28,10 +32,6 @@ span { font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("body-2") { - margin: 0; - } } igx-badge { diff --git a/src/app/data-entries/button/button-contained/button-contained.component.scss b/src/app/data-entries/button/button-contained/button-contained.component.scss index c98e6acd1..b88855d01 100644 --- a/src/app/data-entries/button/button-contained/button-contained.component.scss +++ b/src/app/data-entries/button/button-contained/button-contained.component.scss @@ -1,9 +1,11 @@ +@use "igniteui-theming/sass/typography" as *; + .button-sample { display: flex; - padding: 2.5rem; + padding: rem(40px); } .button-sample button { - width: 46%; + inline-size: 46%; margin: auto; } diff --git a/src/app/data-entries/button/button-download/button-download.component.scss b/src/app/data-entries/button/button-download/button-download.component.scss index 080967734..6c15ac51b 100644 --- a/src/app/data-entries/button/button-download/button-download.component.scss +++ b/src/app/data-entries/button/button-download/button-download.component.scss @@ -1,9 +1,11 @@ +@use "igniteui-theming/sass/typography" as *; + .button-sample { display: flex; - padding: 2.5rem; + padding: rem(40px); } .button-sample a { - width: 46%; + inline-size: 46%; margin: auto; } diff --git a/src/app/data-entries/button/button-fab/button-fab.component.scss b/src/app/data-entries/button/button-fab/button-fab.component.scss index d41b93c4b..a6e649763 100644 --- a/src/app/data-entries/button/button-fab/button-fab.component.scss +++ b/src/app/data-entries/button/button-fab/button-fab.component.scss @@ -1,9 +1,11 @@ +@use "igniteui-theming/sass/typography" as *; + .button-sample { display: flex; - padding: 2rem; + padding: rem(32px); } .button-sample button { - width: 45%; + inline-size: 45%; margin: auto; } diff --git a/src/app/data-entries/button/button-flat/button-flat.component.scss b/src/app/data-entries/button/button-flat/button-flat.component.scss index c98e6acd1..b88855d01 100644 --- a/src/app/data-entries/button/button-flat/button-flat.component.scss +++ b/src/app/data-entries/button/button-flat/button-flat.component.scss @@ -1,9 +1,11 @@ +@use "igniteui-theming/sass/typography" as *; + .button-sample { display: flex; - padding: 2.5rem; + padding: rem(40px); } .button-sample button { - width: 46%; + inline-size: 46%; margin: auto; } diff --git a/src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss b/src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss index 02a12c790..056b6953e 100644 --- a/src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss +++ b/src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss @@ -1,34 +1,39 @@ -@use "igniteui-angular/theming" as *; +@use "igniteui-theming/sass/typography" as *; .button-container { display: flex; justify-content: center; align-items: center; - gap: 2rem; - padding: 1rem; + gap: rem(32px); + padding: rem(16px); } .button-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.75rem; --hover-background: var(--ig-contained-button-hover-background); --hover-foreground: var(--ig-contained-button-hover-foreground); --focus-background: var(--ig-contained-button-focus-background); --focus-foreground: var(--ig-contained-button-focus-foreground); --focus-hover-background: var(--ig-contained-button-focus-hover-background); --focus-hover-foreground: var(--ig-contained-button-focus-hover-foreground); + + display: flex; + flex-direction: column; + align-items: center; + gap: rem(12px); } .button-label { + @include type-style("body-2") { + margin: 0; + } + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; + font-size: rem(13px); font-weight: 400; font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; + line-height: rem(20px); + letter-spacing: rem(0.3px); } .button-item button.state-hover { diff --git a/src/app/data-entries/button/button-layout/button-layout.component.scss b/src/app/data-entries/button/button-layout/button-layout.component.scss index 7b8cb2563..2c18fa23c 100644 --- a/src/app/data-entries/button/button-layout/button-layout.component.scss +++ b/src/app/data-entries/button/button-layout/button-layout.component.scss @@ -1,24 +1,26 @@ +@use "igniteui-theming/sass/typography" as *; + .button-container { display: flex; align-items: center; justify-content: center; - gap: 1rem; - width: 100%; + gap: rem(16px); + inline-size: 100%; box-sizing: border-box; - padding: 2.5rem; + padding: rem(40px); } .button-item { display: flex; flex-direction: column; align-items: center; - gap: 0.75rem; + gap: rem(12px); } .button-container button { - --ig-font-family: 'Titillium Web', sans-serif; + --ig-font-family: "Titillium Web", sans-serif; --ig-button-text-transform: uppercase; - font-size: 0.85rem; - letter-spacing: 1px; + font-size: rem(13.6px); + letter-spacing: rem(1px); } diff --git a/src/app/data-entries/button/button-outlined/button-outlined.component.scss b/src/app/data-entries/button/button-outlined/button-outlined.component.scss index c98e6acd1..b88855d01 100644 --- a/src/app/data-entries/button/button-outlined/button-outlined.component.scss +++ b/src/app/data-entries/button/button-outlined/button-outlined.component.scss @@ -1,9 +1,11 @@ +@use "igniteui-theming/sass/typography" as *; + .button-sample { display: flex; - padding: 2.5rem; + padding: rem(40px); } .button-sample button { - width: 46%; + inline-size: 46%; margin: auto; } diff --git a/src/app/data-entries/button/button-overview/button-overview.component.scss b/src/app/data-entries/button/button-overview/button-overview.component.scss index 6c2b3ea3c..574fa4daa 100644 --- a/src/app/data-entries/button/button-overview/button-overview.component.scss +++ b/src/app/data-entries/button/button-overview/button-overview.component.scss @@ -1,8 +1,10 @@ +@use "igniteui-theming/sass/typography" as *; + .form { display: flex; justify-content: center; - gap: 1.25rem; - padding: 2.5rem; + gap: rem(20px); + padding: rem(40px); } .form igx-avatar { @@ -12,9 +14,9 @@ .fields { display: flex; flex-direction: column; - gap: 1rem; - max-width: 260px; - width: 100%; + gap: rem(16px); + max-inline-size: rem(260px); + inline-size: 100%; } :host ::ng-deep .fields .igx-input-group__bundle { @@ -29,9 +31,10 @@ :host ::ng-deep .fields .igx-input-group__input { margin: 0; } + .actions { display: flex; justify-content: flex-end; - gap: 1rem; - margin-top: 0.5rem; + gap: rem(16px); + margin-block-start: rem(8px); } diff --git a/src/app/data-entries/button/button-size/button-size.component.scss b/src/app/data-entries/button/button-size/button-size.component.scss index 58d897c92..9495ea135 100644 --- a/src/app/data-entries/button/button-size/button-size.component.scss +++ b/src/app/data-entries/button/button-size/button-size.component.scss @@ -1,3 +1,5 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; justify-content: center; @@ -7,45 +9,58 @@ .size-grid { display: flex; flex-direction: column; - gap: 1.25rem; - padding: 1rem; - width: 100%; + gap: rem(20px); + padding: rem(16px); + inline-size: 100%; box-sizing: border-box; overflow: hidden; } .size-row { display: grid; - grid-template-columns: 70px repeat(4, minmax(0, 1fr)); + grid-template-columns: rem(70px) repeat(4, minmax(0, 1fr)); align-items: center; justify-items: center; - column-gap: 1rem; - row-gap: 0.5rem; - width: 100%; + column-gap: rem(16px); + row-gap: rem(8px); + inline-size: 100%; } .size-header { + @include type-style("body-2") { + margin: 0; + } + display: grid; - grid-template-columns: 70px repeat(4, minmax(0, 1fr)); + grid-template-columns: rem(70px) repeat(4, minmax(0, 1fr)); align-items: center; justify-items: center; - column-gap: 1rem; - width: 100%; + column-gap: rem(16px); + inline-size: 100%; color: var(--ig-gray-600); - font: 13px/20px "Aktiv Grotesk", sans-serif; - letter-spacing: .3px; + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + line-height: rem(20px); + letter-spacing: rem(0.3px); } .size-label { + @include type-style("body-2") { + margin: 0; + } + justify-self: start; color: var(--ig-gray-600); - font: 400 13px/20px "Aktiv Grotesk", sans-serif; - letter-spacing: .3px; + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); } .size-row button { - width: auto; - transform: scale(.9); + inline-size: auto; + transform: scale(0.9); } .size-small { diff --git a/src/app/data-entries/button/button-states/button-states.component.scss b/src/app/data-entries/button/button-states/button-states.component.scss index 3b224d140..b12c4d0ae 100644 --- a/src/app/data-entries/button/button-states/button-states.component.scss +++ b/src/app/data-entries/button/button-states/button-states.component.scss @@ -1,14 +1,16 @@ +@use "igniteui-theming/sass/typography" as *; + .button-container { display: flex; justify-content: center; align-items: center; - gap: 2rem; - padding: 2rem; + gap: rem(32px); + padding: rem(32px); } .button-item { display: flex; flex-direction: column; align-items: center; - gap: 1.5rem; + gap: rem(24px); } diff --git a/src/app/data-entries/button/button-styling/button-styling.component.scss b/src/app/data-entries/button/button-styling/button-styling.component.scss index 4637a2cce..79bfbfc37 100644 --- a/src/app/data-entries/button/button-styling/button-styling.component.scss +++ b/src/app/data-entries/button/button-styling/button-styling.component.scss @@ -1,13 +1,41 @@ -@use "layout.scss"; +@use "igniteui-angular/theming" as *; +@use "igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"; -// CSS variables approach +.button-grid { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + block-size: 100%; + gap: rem(24px); + padding: rem(16px); +} + +.button-row { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + align-items: center; + justify-items: center; + gap: rem(48px); +} + +.button-row button.confirm-button, +.button-row button.send-button, +.button-row button.cancel-button { + block-size: rem(40px); + min-block-size: rem(40px); + inline-size: 90%; +} .confirm-button { --background: #1275c4; --foreground: #fff; --hover-background: #1275c4; --hover-foreground: #fff; - &:hover { --hover-background: #0b4f8a; } + + &:hover { + --hover-background: #0b4f8a; + } } .send-button { @@ -18,13 +46,23 @@ --hover-foreground: #8a2be2; --icon-color: #8a2be2; --icon-color-hover: #8a2be2; - &:hover { --hover-background: #8a2be2; --hover-border-color: #6a1bb1; --hover-foreground: #fff; --icon-color-hover: #fff; } + + &:hover { + --hover-background: #8a2be2; + --hover-border-color: #6a1bb1; + --hover-foreground: #fff; + --icon-color-hover: #fff; + } } .cancel-button { --foreground: #1275c4; --hover-foreground: #1275c4; - &:hover { --hover-background: #dbeeff; --hover-foreground: #063b68; } + + &:hover { + --hover-background: #dbeeff; + --hover-foreground: #063b68; + } } .add-button { @@ -35,5 +73,10 @@ --icon-color: #000; --icon-color-hover: #000; --border-radius: 999px; - &:hover { --hover-background: #257a2b; --hover-foreground: #fff; --icon-color-hover: #fff; } + + &:hover { + --hover-background: #257a2b; + --hover-foreground: #fff; + --icon-color-hover: #fff; + } } diff --git a/src/app/data-entries/button/button-styling/layout.scss b/src/app/data-entries/button/button-styling/layout.scss deleted file mode 100644 index a77566283..000000000 --- a/src/app/data-entries/button/button-styling/layout.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use "igniteui-angular/theming" as *; -@use "igniteui-angular/lib/core/styles/components/button/button-component" as button; -@use "igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"; - -.bootstrap-theme { - ::ng-deep { - @include button( - $flat: flat-button-theme($schema: $light-bootstrap-schema), - $contained: contained-button-theme($schema: $light-bootstrap-schema), - $outlined: outlined-button-theme($schema: $light-bootstrap-schema), - $fab: fab-button-theme($schema: $light-bootstrap-schema) - ); - @include button.component(); - } -} - -.button-row button.confirm-button, -.button-row button.send-button, -.button-row button.cancel-button { - height: 40px; - min-height: 40px; - width: 90%; -} - -.button-grid { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - gap: 1.5rem; - padding: 1rem; -} - -.button-row { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - align-items: center; - justify-items: center; - gap: 3rem; -} diff --git a/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.html b/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.html index 0a6427ed8..f715c6ab1 100644 --- a/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.html +++ b/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.html @@ -1,12 +1,20 @@ -
-
- - + - - + diff --git a/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.scss b/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.scss index f0ca253bc..c37803f99 100644 --- a/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.scss +++ b/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.scss @@ -1,6 +1 @@ -@use "layout.scss"; - -.confirm-button { --hover-background: #3730a3; --hover-foreground: #fff; } -.send-button { --hover-background: #db2777; --hover-border-color: #be185d; --hover-foreground: #fff; --icon-color-hover: #fff; } -.cancel-button { --hover-background: #fef3c7; --hover-foreground: #78350f; } -.add-button { --hover-background: #0f766e; --hover-foreground: #fff; --icon-color-hover: #fff; } +@use "igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"; diff --git a/src/app/data-entries/button/button-tailwind-styling/layout.scss b/src/app/data-entries/button/button-tailwind-styling/layout.scss deleted file mode 100644 index df3c97ac6..000000000 --- a/src/app/data-entries/button/button-tailwind-styling/layout.scss +++ /dev/null @@ -1,56 +0,0 @@ -@use "igniteui-angular/theming" as *; -@use "igniteui-angular/lib/core/styles/components/button/button-component" as button; -@use "igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"; - -:host { - ::ng-deep { - @include button( - $flat: flat-button-theme($schema: $light-bootstrap-schema), - $contained: contained-button-theme($schema: $light-bootstrap-schema), - $outlined: outlined-button-theme($schema: $light-bootstrap-schema), - $fab: fab-button-theme($schema: $light-bootstrap-schema) - ); - @include button.component(); - } -} - -.button-row button.confirm-button, -.button-row button.send-button, -.button-row button.cancel-button { - height: 40px; - min-height: 40px; - width: 90%; -} - -.confirm-button { - --background: #4338ca; - --foreground: #fff; - --hover-background: #4338ca; - --hover-foreground: #fff; -} - -.send-button { - --background: transparent; - --border-color: #db2777; - --foreground: #db2777; - --hover-border-color: #db2777; - --hover-foreground: #db2777; - --icon-color: #db2777; - --icon-color-hover: #db2777; -} - -.cancel-button { - --foreground: #b45309; - --hover-foreground: #b45309; -} - -.add-button { - --background: #14b8a6; - --foreground: #000; - --hover-background: #14b8a6; - --hover-foreground: #000; - --icon-color: #fff; - --icon-color-hover: #fff; - --border-radius: 9999px; - background-color: #14b8a6; -} diff --git a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss index 37cdf8360..f70539d8f 100644 --- a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss @@ -17,10 +17,13 @@ igx-buttongroup { } .album-title { - @include type-style('body-2'); - - margin-block: 0 rem(8px); - color: var(--ig-primary-500); + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); + margin: rem(8px); } .album-photos { diff --git a/src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss b/src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss index 28c0265f9..df38e2180 100644 --- a/src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss +++ b/src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss @@ -1,15 +1,17 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; min-block-size: 100%; box-sizing: border-box; place-content: center; place-items: center; - padding: 16px; + padding: rem(16px); } .states { - --variant-gap: 60px; - --label-gap: 30px; + --variant-gap: #{rem(60px)}; + --label-gap: #{rem(30px)}; display: flex; align-items: center; @@ -23,8 +25,15 @@ } .states__label { - font: 500 14px / 24px "Aktiv Grotesk", sans-serif; - letter-spacing: 0.1px; + @include type-style("body-2") { + margin: 0; + } + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(14px); + font-weight: 500; + line-height: rem(24px); + letter-spacing: rem(0.1px); } } diff --git a/src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss b/src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss index d36f357ba..39fbc06cb 100644 --- a/src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss +++ b/src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss @@ -1,21 +1,30 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; place-content: center; place-items: center; - padding: 16px; + padding: rem(16px); } .states { display: grid; grid-template-columns: repeat(4, auto); align-items: center; - gap: 32px 24px; + gap: rem(32px) rem(24px); .states__column, .states__row { - font: 500 14px / 24px "Aktiv Grotesk", sans-serif; - letter-spacing: 0.1px; + @include type-style("body-2") { + margin: 0; + } + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(14px); + font-weight: 500; + line-height: rem(24px); + letter-spacing: rem(0.1px); } .states__column { diff --git a/src/app/data-entries/switch/switch-layout/switch-layout.component.scss b/src/app/data-entries/switch/switch-layout/switch-layout.component.scss index 9cb1380aa..50c46cadc 100644 --- a/src/app/data-entries/switch/switch-layout/switch-layout.component.scss +++ b/src/app/data-entries/switch/switch-layout/switch-layout.component.scss @@ -1,15 +1,17 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; min-block-size: 100%; box-sizing: border-box; place-content: center; place-items: center; - padding: 16px; + padding: rem(16px); } .variants { - --variant-gap: 60px; - --label-gap: 30px; + --variant-gap: #{rem(60px)}; + --label-gap: #{rem(30px)}; display: flex; inline-size: 100%; @@ -24,8 +26,15 @@ } .variants__label { - font: 500 14px / 24px "Aktiv Grotesk", sans-serif; - letter-spacing: 0.1px; + @include type-style("body-2") { + margin: 0; + } + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(14px); + font-weight: 500; + line-height: rem(24px); + letter-spacing: rem(0.1px); } } diff --git a/src/app/data-entries/switch/switch-overview/switch-overview.component.scss b/src/app/data-entries/switch/switch-overview/switch-overview.component.scss index 4eb2dd76b..228c27b9e 100644 --- a/src/app/data-entries/switch/switch-overview/switch-overview.component.scss +++ b/src/app/data-entries/switch/switch-overview/switch-overview.component.scss @@ -1,38 +1,46 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; place-content: center; place-items: center; - padding: 16px; + padding: rem(16px); } .notifications { inline-size: 100%; - max-inline-size: 384px; + max-inline-size: rem(384px); background: var(--ig-surface-500); - border-radius: 4px; + border-radius: rem(4px); overflow: hidden; .notifications__title { - margin: 0; - padding: 16px; - font: 400 10px / 16px "Titillium Web", sans-serif; - letter-spacing: 1.5px; + @include type-style("overline") { + margin: 0; + } + + padding: rem(16px); text-transform: uppercase; color: var(--ig-secondary-500); + font-family: "Titillium Web", sans-serif; + font-size: rem(10px); + font-weight: 400; + line-height: rem(16px); + letter-spacing: rem(1.5px); } .notifications__row { - padding-block: 12px; - padding-inline: 16px; + padding-block: rem(12px); + padding-inline: rem(16px); igx-switch { inline-size: 100%; justify-content: space-between; - gap: 16px; - transform: translateX(-10px); + gap: rem(16px); + transform: translateX(rem(-10px)); ::ng-deep .igx-switch__composite { - transform: translateX(8px); + transform: translateX(rem(8px)); } } } @@ -41,17 +49,33 @@ .option { display: flex; flex-direction: column; - gap: 2px; + gap: rem(2px); text-align: start; white-space: normal; .option__label { - font-size: 16px; + @include type-style("body-1") { + margin: 0; + } + color: var(--ig-gray-900); + font-family: "Titillium Web", sans-serif; + font-size: rem(16px); + font-weight: 400; + line-height: rem(24px); + letter-spacing: rem(0.15px); } .option__hint { - font-size: 13px; + @include type-style("body-2") { + margin: 0; + } + color: var(--ig-gray-700); + font-family: "Titillium Web", sans-serif; + font-size: rem(14px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.25px); } } diff --git a/src/app/data-entries/switch/switch-selected/switch-selected.component.scss b/src/app/data-entries/switch/switch-selected/switch-selected.component.scss index 3b46e3454..a7eac7e45 100644 --- a/src/app/data-entries/switch/switch-selected/switch-selected.component.scss +++ b/src/app/data-entries/switch/switch-selected/switch-selected.component.scss @@ -1,25 +1,34 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; place-content: center; place-items: center; - padding: 16px; + padding: rem(16px); } .states { display: grid; grid-template-columns: repeat(3, auto); align-items: center; - gap: 32px; - transform: translateY(16px); + gap: rem(32px); + transform: translateY(rem(16px)); .states__row { + @include type-style("body-2") { + margin: 0; + } + text-align: end; - font: 500 14px / 24px "Aktiv Grotesk", sans-serif; - letter-spacing: 0.1px; color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(14px); + font-weight: 500; + line-height: rem(24px); + letter-spacing: rem(0.1px); } .states__disabled { - margin-inline-start: 16px; + margin-inline-start: rem(16px); } } diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss index 1bcc8dcda..e7aba6915 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss @@ -1,9 +1,4 @@ -@use "igniteui-angular/theming" as *; - -:host ::ng-deep igx-switch .igx-switch__thumb { - min-width: 10px; - transform: translateY(-1px); -} +@use "igniteui-theming/sass/typography" as *; :host ::ng-deep igx-switch .igx-switch__ripple { display: none; @@ -14,26 +9,26 @@ place-content: center; place-items: center; min-block-size: 100%; - padding: 1rem; + padding: rem(16px); } .security { display: block; inline-size: 100%; - max-inline-size: 348px; + max-inline-size: rem(348px); background: var(--ig-surface-500); border: rem(1px) solid var(--ig-gray-300); border-radius: rem(16px); - box-shadow: 0 rem(1px) rem(3px) rgb(0 0 0 / 12%); + box-shadow: 0 rem(1px) rem(3px) hsl(from var(--ig-gray-900) h s l / 0.12); overflow: hidden; igx-expansion-panel-header { - display: block !important; + display: block; } ::ng-deep igx-expansion-panel-header > div { - padding: rem(12px) rem(16px) !important; - gap: rem(16px) !important; + padding: rem(12px) rem(16px); + gap: rem(16px); } igx-expansion-panel-title { @@ -54,9 +49,27 @@ } igx-switch { - inline-size: rem(43px); - block-size: rem(24px); - transform: translateX(rem(2px)); + --switch-width: #{rem(32px)}; + --switch-height: #{rem(16px)}; + --switch-thumb-size: #{rem(10px)}; + --switch-on-offset: #{rem(4px)}; + --switch-off-offset: calc(var(--switch-thumb-size) / 4); + --transform-thumb: calc(var(--switch-width) - var(--switch-thumb-size) - var(--switch-on-offset)); + + --ig-switch-border-color: var(--ig-gray-400); + --ig-switch-border-hover-color: var(--ig-gray-500); + --ig-switch-border-on-color: var(--ig-primary-500); + --ig-switch-border-on-hover-color: var(--ig-primary-600); + --ig-switch-track-off-color: var(--ig-gray-900-contrast); + --ig-switch-track-on-color: var(--ig-primary-500); + --ig-switch-track-on-hover-color: var(--ig-primary-600); + --ig-switch-thumb-off-color: var(--ig-gray-400); + --ig-switch-thumb-off-hover-color: var(--ig-gray-500); + --ig-switch-thumb-on-color: var(--ig-primary-800-contrast); + --ig-switch-border-radius-track: #{rem(32px)}; + --ig-switch-border-radius-thumb: #{rem(32px)}; + --ig-switch-resting-elevation: none; + --ig-switch-hover-elevation: none; } igx-radio-group { @@ -76,26 +89,47 @@ min-inline-size: 0; .option__label { - font: 600 #{rem(16px)} / #{rem(24px)} "Aktiv Grotesk", sans-serif; - letter-spacing: #{rem(0.15px)}; + @include type-style("body-1") { + margin: 0; + } + color: var(--ig-gray-700); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(16px); + font-weight: 600; + line-height: rem(24px); + letter-spacing: rem(0.15px); } .option__hint { - font: 500 #{rem(14px)} / #{rem(24px)} "Aktiv Grotesk", sans-serif; - letter-spacing: #{rem(0.1px)}; + @include type-style("body-2") { + margin: 0; + } + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(14px); + font-weight: 500; + line-height: rem(24px); + letter-spacing: rem(0.1px); } } igx-radio { - font: 600 #{rem(12px)} / #{rem(16px)} "Aktiv Grotesk", sans-serif; - letter-spacing: #{rem(0.15px)}; - color: var(--ig-primary-900); + @include type-style("caption") { + margin: 0; + } --fill-color: var(--ig-primary-500); --fill-color-hover: var(--ig-primary-500); --fill-hover-border-color: var(--ig-primary-500); + + color: var(--ig-primary-900); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(12px); + font-weight: 600; + line-height: rem(16px); + letter-spacing: rem(0.15px); } :host ::ng-deep igx-radio.igx-radio--checked .igx-radio__composite::after { @@ -104,24 +138,24 @@ igx-radio { } :host ::ng-deep igx-radio.igx-radio--checked .igx-radio__composite::before { - transform: none !important; + transform: none; } :host ::ng-deep igx-radio .igx-radio__composite::before, :host ::ng-deep igx-radio .igx-radio__composite::after { - width: 16px; - height: 16px; + inline-size: rem(16px); + block-size: rem(16px); } :host ::ng-deep igx-radio .igx-radio__label { - transform: translateY(-2px); + transform: translateY(rem(-2px)); } :host ::ng-deep igx-radio .igx-radio__composite, :host ::ng-deep igx-radio .igx-radio__composite::before, :host ::ng-deep igx-radio .igx-radio__composite::after { - animation: none !important; - transition: none !important; + animation: none; + transition: none; } :host ::ng-deep igx-radio .igx-radio__ripple { diff --git a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss index 20b66dbc1..a46ea1b47 100644 --- a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss +++ b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss @@ -1,14 +1,16 @@ +@use "igniteui-theming/sass/typography" as *; + :host ::ng-deep igx-switch .igx-switch__thumb { - min-width: 10px; + min-inline-size: rem(10px); } :host ::ng-deep igx-switch .igx-switch__ripple { - display: none; + display: none; } :host { - display: flex; - place-content: center; - place-items: center; - padding: 40px; + display: flex; + place-content: center; + place-items: center; + padding: rem(40px); } diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss index cbaac2cdc..063dc6efa 100644 --- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss +++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss @@ -20,6 +20,10 @@ igx-avatar { } span { + @include type-style("body-1") { + margin: 0; + } + grid-row: 2; text-align: center; color: var(--ig-gray-600); @@ -28,10 +32,6 @@ span { font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("body-1") { - margin: 0; - }; } igx-badge { diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss index 119e5278c..9544268cc 100644 --- a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss +++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss @@ -18,6 +18,10 @@ igx-avatar { } span { + @include type-style("body-1") { + margin: 0; + } + grid-row: 2; text-align: center; color: var(--ig-gray-600); @@ -26,10 +30,6 @@ span { font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("body-1") { - margin: 0; - }; } igx-badge { diff --git a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss index 25fc17d77..dbd7fcc9c 100644 --- a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss +++ b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss @@ -21,6 +21,10 @@ $avatars: circle, square, rounded; } :where(span) { + @include type-style("body-1") { + margin: 0; + } + grid-row: 2; text-align: center; color: var(--ig-gray-600); @@ -29,10 +33,6 @@ $avatars: circle, square, rounded; font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("body-1") { - margin: 0; - }; } :where(igx-badge) { diff --git a/src/styles.scss b/src/styles.scss index 03a2dd70b..35f718c8e 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -27,28 +27,6 @@ body { margin: 0; } -// Nothing here paints a page background per color mode on purpose. The sample -// is embedded in an iframe and the documentation's Sample component draws the -// surface behind it from the same mode the theming widget posts down here, so -// the iframe is left transparent for it to show through. `ThemeService` still -// reflects `data-ig-theme` / `data-ig-mode` onto the root element for samples -// that need to react to the selection themselves. - -body.custom-body:has( - app-badge-overview, - app-badge-styling, - app-badge-dot, - app-badge-type, - app-badge-icon, - app-badge-size, - app-badge-shape, - app-badge-variants, - app-badge-outlined, - app-badge-tailwind-styling -) { - background: transparent; -} - // `core()`, `typography()`, `theme()` and the root palette all ship inside the // prebuilt stylesheets loaded through the `igniteui-theme` link (see above).