From 1cc6d7ed395f2f391dd7f6e47efd7b3adb1b13f6 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 17 Sep 2024 16:12:09 +0300 Subject: [PATCH 1/6] refactor(chip): update indigo styles --- .../styles/components/chip/_chip-theme.scss | 80 ++++++++++++++----- src/app/chips/chips.sample.html | 1 + src/app/chips/chips.sample.scss | 16 +--- 3 files changed, 60 insertions(+), 37 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index a1663d19227..e74edab416c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -258,11 +258,12 @@ $chip-max-width: 32ch; $variant: map.get($theme, '_meta', 'variant'); + $theme-variant: map.get($theme, '_meta', 'theme-variant'); $chip-padding: ( - comfortable: rem(12px), + comfortable: rem(if($variant != 'indigo', 12px, 8px)), cosy: rem(6px), - compact: rem(2px) + compact: rem(if($variant != 'indigo', 2px, 4px)) ); $box-shadow-focus: map.get(( @@ -288,6 +289,11 @@ flex-wrap: wrap; width: 100%; + @if $variant == 'indigo' { + padding: rem(4px); + gap: rem(8px) + } + &:empty { display: none; } @@ -378,6 +384,7 @@ map.get($chip-padding, 'cosy'), map.get($chip-padding, 'comfortable') ); + gap: sizable(rem(3px), rem(6px), rem(8px)); color: var-get($theme, 'text-color'); background: var-get($theme, 'background'); @@ -404,6 +411,12 @@ --component-size: var(--chip-size); } + @if $variant == 'indigo' { + %igx-icon-display { + --size: #{sizable(rem(14px), rem(14px), rem(16px))} + } + } + igx-avatar, igx-circular-bar { max-height: 100%; @@ -444,7 +457,7 @@ &:hover { %igx-chip__item { @if $variant == 'indigo' { - color: contrast-color($color: 'primary', $variant: 400); + color: contrast-color($color: 'primary', $variant: 900); background: color($color: 'primary', $variant: 400); border-color: color($color: 'primary', $variant: 400); } @else { @@ -462,10 +475,10 @@ border-color: color($color: 'primary', $variant: 800); @if $variant == 'indigo' { - color: contrast-color($color: 'primary', $variant: 500); + color: contrast-color($color: 'primary', $variant: 900); background: color($color: 'primary', $variant: 500); border-color: color($color: 'primary', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'primary', $variant: 200); + box-shadow: 0 0 0 rem(3px) color($color: 'primary', $variant: 400, $opacity: .5); } @if $variant == 'bootstrap' { @@ -651,7 +664,11 @@ > igx-avatar, > igx-circular-bar { &:first-child { - margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + @if $variant != 'indigo' { + margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + } @else { + margin-inline-start: calc(#{sizable(rem(2px), rem(4px), rem(7px))} * -1); + } } } @@ -670,7 +687,11 @@ > igx-avatar, > igx-circular-bar { &:last-child { - margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + @if $variant != 'indigo' { + margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + } @else { + margin-inline-end: calc(#{sizable(rem(2px), rem(4px), rem(7px))} * -1); + } } } @@ -777,17 +798,38 @@ } } + %igx-chip__item--disabled { + color: var-get($theme, 'disabled-text-color'); + background: var-get($theme, 'disabled-background'); + border-color: var-get($theme, 'disabled-border-color'); + } + %igx-chip--disabled { cursor: default; pointer-events: none; - @if $variant == 'indigo' { + %igx-chip__item--selected { + background: color($color: 'primary', $variant: 400, $opacity: .5); + border-color: transparent; + + @if $theme-variant == 'light' { + color: contrast-color($color: 'primary', $variant: 900, $opacity: .4); + } @else { + color: contrast-color($color: 'primary', $variant: 900, $opacity: .2); + } + } + &%igx-chip--primary { %igx-chip__item { - color: contrast-color($color: 'primary', $variant: 400); - background: color($color: 'primary', $variant: 200); - border-color: color($color: 'primary', $variant: 200); + @if $theme-variant == 'light' { + color: contrast-color($color: 'primary', $variant: 900, $opacity: .4); + } @else { + color: contrast-color($color: 'primary', $variant: 900, $opacity: .2); + } + + background: color($color: 'primary', $variant: 400, $opacity: .5); + border-color: transparent; } } @@ -795,7 +837,7 @@ %igx-chip__item { color: contrast-color($color: 'info', $variant: 400); background: color($color: 'info', $variant: 200); - border-color: color($color: 'info', $variant: 200); + border-color: transparent; } } @@ -803,7 +845,7 @@ %igx-chip__item { color: contrast-color($color: 'success', $variant: 800); background: color($color: 'success', $variant: 200); - border-color: color($color: 'success', $variant: 200); + border-color: transparent; } } @@ -811,25 +853,19 @@ %igx-chip__item { color: contrast-color($color: 'warn', $variant: 900); background: color($color: 'warn', $variant: 200); - border-color: color($color: 'warn', $variant: 200); + border-color: transparent; } } &%igx-chip--danger { %igx-chip__item { - color: contrast-color($color: 'error', $variant: 400); + color: contrast-color($color: 'error', $variant: 900); background: color($color: 'error', $variant: 200); - border-color: color($color: 'error', $variant: 200); + border-color: transparent; } } } } - - %igx-chip__item--disabled { - color: var-get($theme, 'disabled-text-color'); - background: var-get($theme, 'disabled-background'); - border-color: var-get($theme, 'disabled-border-color'); - } } /// Adds typography styles for the igx-chip component. diff --git a/src/app/chips/chips.sample.html b/src/app/chips/chips.sample.html index 32a788d1655..889ea39b440 100644 --- a/src/app/chips/chips.sample.html +++ b/src/app/chips/chips.sample.html @@ -112,6 +112,7 @@

Chips in Chip Area

+

Chips in a Custom Scenario

diff --git a/src/app/chips/chips.sample.scss b/src/app/chips/chips.sample.scss index ee40f927761..c33dfc17db9 100644 --- a/src/app/chips/chips.sample.scss +++ b/src/app/chips/chips.sample.scss @@ -2,10 +2,6 @@ @use '../../../projects/igniteui-angular/src/lib/core/styles/components/chip/chip-component' as *; @use '../../../projects/igniteui-angular/src/lib/core/styles/components/chip/chip-theme' as *; -igx-chip { - margin: rem(4px); -} - .sample-title { font-size: 16px; font-weight: 900; @@ -99,20 +95,10 @@ $padding: 32px; min-width: rem(24px); } -.chip-storyboard { - display: flex; - flex-direction: column; - flex-wrap: wrap; - gap: 20px; - - igx-chip { - margin: rem(4px); - } -} - .chip-area-connector { color: currentColor; opacity: .54; + user-select: none; } .wrapperAreaCc, From 1f3e6ad9da14f995fcd822d7eb5fe5b4a0d801ea Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 19 Sep 2024 14:11:34 +0300 Subject: [PATCH 2/6] fix(chip): add state colors for indigo corresponding to the handoff. make sure that even when the chip is focused we can still see the hover state. --- .../styles/components/chip/_chip-theme.scss | 218 ++++++++---------- 1 file changed, 99 insertions(+), 119 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index e74edab416c..a7872598c9f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -322,21 +322,6 @@ outline: none; // The focus and hover are build that way since the host is the focusable element - - &:hover { - %igx-chip__item { - color: var-get($theme, 'hover-text-color'); - background: var-get($theme, 'hover-background'); - border-color: var-get($theme, 'hover-border-color'); - } - - %igx-chip__item--selected { - color: var-get($theme, 'hover-selected-text-color'); - background: var-get($theme, 'hover-selected-background'); - border-color: var-get($theme, 'hover-selected-border-color'); - } - } - &:focus { %igx-chip__item { outline-style: none; @@ -355,19 +340,17 @@ } } - @if $variant == 'indigo' { - &:focus:hover { - %igx-chip__item { - color: var-get($theme, 'hover-text-color'); - background: var-get($theme, 'hover-background'); - border-color: var-get($theme, 'hover-border-color'); - } + &:hover { + %igx-chip__item { + color: var-get($theme, 'hover-text-color'); + background: var-get($theme, 'hover-background'); + border-color: var-get($theme, 'hover-border-color'); + } - %igx-chip__item--selected { - color: var-get($theme, 'hover-selected-text-color'); - background: var-get($theme, 'hover-selected-background'); - border-color: var-get($theme, 'hover-selected-border-color'); - } + %igx-chip__item--selected { + color: var-get($theme, 'hover-selected-text-color'); + background: var-get($theme, 'hover-selected-background'); + border-color: var-get($theme, 'hover-selected-border-color'); } } } @@ -454,20 +437,6 @@ } %igx-chip%igx-chip--primary { - &:hover { - %igx-chip__item { - @if $variant == 'indigo' { - color: contrast-color($color: 'primary', $variant: 900); - background: color($color: 'primary', $variant: 400); - border-color: color($color: 'primary', $variant: 400); - } @else { - color: contrast-color($color: 'primary', $variant: 600); - background: color($color: 'primary', $variant: 600); - border-color: color($color: 'primary', $variant: 600); - } - } - } - &:focus { %igx-chip__item { color: contrast-color($color: 'primary', $variant: 800); @@ -486,29 +455,29 @@ } } } - } - %igx-chip__item--info { - color: contrast-color($color: 'info', $variant: 500); - background: color($color: 'info', $variant: 500); - border-color: color($color: 'info', $variant: 500); - } - - %igx-chip%igx-chip--info { &:hover { %igx-chip__item { @if $variant == 'indigo' { - color: contrast-color($color: 'info', $variant: 400); - background: color($color: 'info', $variant: 400); - border-color: color($color: 'info', $variant: 400); + color: contrast-color($color: 'primary', $variant: 900); + background: color($color: 'primary', $variant: 400); + border-color: color($color: 'primary', $variant: 400); } @else { - color: contrast-color($color: 'info', $variant: 600); - background: color($color: 'info', $variant: 600); - border-color: color($color: 'info', $variant: 600); + color: contrast-color($color: 'primary', $variant: 600); + background: color($color: 'primary', $variant: 600); + border-color: color($color: 'primary', $variant: 600); } } } + } + %igx-chip__item--info { + color: contrast-color($color: 'info', $variant: 500); + background: color($color: 'info', $variant: 500); + border-color: color($color: 'info', $variant: 500); + } + + %igx-chip%igx-chip--info { &:focus { %igx-chip__item { color: contrast-color($color: 'info', $variant: 800); @@ -519,7 +488,7 @@ color: contrast-color($color: 'info', $variant: 500); background: color($color: 'info', $variant: 500); border-color: color($color: 'info', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: 200); + box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: 100); } @if $variant == 'bootstrap' { @@ -527,33 +496,33 @@ } } } + + &:hover { + %igx-chip__item { + @if $variant == 'indigo' { + color: contrast-color($color: 'info', $variant: 400); + background: color($color: 'info', $variant: 400); + border-color: color($color: 'info', $variant: 400); + } @else { + color: contrast-color($color: 'info', $variant: 600); + background: color($color: 'info', $variant: 600); + border-color: color($color: 'info', $variant: 600); + } + } + } } %igx-chip__item--success { @if $variant == 'bootstrap' { color: contrast-color($color: 'success', $variant: 600); } @else { - color: contrast-color($color: 'success', $variant: 500); + color: contrast-color($color: 'success', $variant: if($variant = 'indigo', 900, 500)); } background: color($color: 'success', $variant: 500); border-color: color($color: 'success', $variant: 500); } %igx-chip%igx-chip--success { - &:hover { - %igx-chip__item { - @if $variant == 'indigo' { - color: contrast-color($color: 'success', $variant: 400); - background: color($color: 'success', $variant: 400); - border-color: color($color: 'success', $variant: 400); - } @else { - color: contrast-color($color: 'success', $variant: 600); - background: color($color: 'success', $variant: 600); - border-color: color($color: 'success', $variant: 600); - } - } - } - &:focus { %igx-chip__item { color: contrast-color($color: 'success', $variant: 800); @@ -561,7 +530,7 @@ border-color: color($color: 'success', $variant: 800); @if $variant == 'indigo' { - color: contrast-color($color: 'success', $variant: 500); + color: contrast-color($color: 'success', $variant: 900); background: color($color: 'success', $variant: 500); border-color: color($color: 'success', $variant: 500); box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: 200); @@ -572,29 +541,29 @@ } } } - } - %igx-chip__item--warning { - color: contrast-color($color: 'warn', $variant: 500); - background: color($color: 'warn', $variant: 500); - border-color: color($color: 'warn', $variant: 500); - } - - %igx-chip%igx-chip--warning { &:hover { %igx-chip__item { @if $variant == 'indigo' { - color: contrast-color($color: 'warn', $variant: 400); - background: color($color: 'warn', $variant: 400); - border-color: color($color: 'warn', $variant: 400); + color: contrast-color($color: 'success', $variant: 900); + background: color($color: 'success', $variant: 400); + border-color: color($color: 'success', $variant: 400); } @else { - color: contrast-color($color: 'warn', $variant: 600); - background: color($color: 'warn', $variant: 600); - border-color: color($color: 'warn', $variant: 600); + color: contrast-color($color: 'success', $variant: 600); + background: color($color: 'success', $variant: 600); + border-color: color($color: 'success', $variant: 600); } } } + } + %igx-chip__item--warning { + color: contrast-color($color: 'warn', $variant: 900); + background: color($color: 'warn', $variant: 500); + border-color: color($color: 'warn', $variant: 500); + } + + %igx-chip%igx-chip--warning { &:focus { %igx-chip__item { color: contrast-color($color: 'warn', $variant: 800); @@ -602,10 +571,10 @@ border-color: color($color: 'warn', $variant: 800); @if $variant == 'indigo' { - color: contrast-color($color: 'warn', $variant: 500); + color: contrast-color($color: 'warn', $variant: 900); background: color($color: 'warn', $variant: 500); border-color: color($color: 'warn', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: 200); + box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: 100); } @if $variant == 'bootstrap' { @@ -613,33 +582,33 @@ } } } + + &:hover { + %igx-chip__item { + @if $variant == 'indigo' { + color: contrast-color($color: 'warn', $variant: 900); + background: color($color: 'warn', $variant: 400); + border-color: color($color: 'warn', $variant: 400); + } @else { + color: contrast-color($color: 'warn', $variant: 600); + background: color($color: 'warn', $variant: 600); + border-color: color($color: 'warn', $variant: 600); + } + } + } } %igx-chip__item--danger { @if $variant == 'bootstrap' { color: contrast-color($color: 'error', $variant: 600); } @else { - color: contrast-color($color: 'error', $variant: 500); + color: contrast-color($color: 'error', $variant: if($variant = 'indigo', 900, 500)); } background: color($color: 'error', $variant: 500); border-color: color($color: 'error', $variant: 500); } %igx-chip%igx-chip--danger { - &:hover { - %igx-chip__item { - @if $variant == 'indigo' { - color: contrast-color($color: 'error', $variant: 400); - background: color($color: 'error', $variant: 400); - border-color: color($color: 'error', $variant: 400); - } @else { - color: contrast-color($color: 'error', $variant: 600); - background: color($color: 'error', $variant: 600); - border-color: color($color: 'error', $variant: 600); - } - } - } - &:focus { %igx-chip__item { color: contrast-color($color: 'error', $variant: 800); @@ -647,10 +616,10 @@ border-color: color($color: 'error', $variant: 800); @if $variant == 'indigo' { - color: contrast-color($color: 'error', $variant: 500); + color: contrast-color($color: 'error', $variant: 900); background: color($color: 'error', $variant: 500); border-color: color($color: 'error', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: 200); + box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: 100); } @if $variant == 'bootstrap' { @@ -658,6 +627,20 @@ } } } + + &:hover { + %igx-chip__item { + @if $variant == 'indigo' { + color: contrast-color($color: 'error', $variant: 900); + background: color($color: 'error', $variant: 400); + border-color: color($color: 'error', $variant: 400); + } @else { + color: contrast-color($color: 'error', $variant: 600); + background: color($color: 'error', $variant: 600); + border-color: color($color: 'error', $variant: 600); + } + } + } } %igx-chip__start { @@ -812,16 +795,12 @@ %igx-chip__item--selected { background: color($color: 'primary', $variant: 400, $opacity: .5); border-color: transparent; - - @if $theme-variant == 'light' { - color: contrast-color($color: 'primary', $variant: 900, $opacity: .4); - } @else { - color: contrast-color($color: 'primary', $variant: 900, $opacity: .2); - } + color: contrast-color($color: 'primary', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2)); } &%igx-chip--primary { %igx-chip__item { + /* stylelint-disable max-nesting-depth */ @if $theme-variant == 'light' { color: contrast-color($color: 'primary', $variant: 900, $opacity: .4); } @else { @@ -830,37 +809,38 @@ background: color($color: 'primary', $variant: 400, $opacity: .5); border-color: transparent; + /* stylelint-enable max-nesting-depth */ } } &%igx-chip--info { %igx-chip__item { - color: contrast-color($color: 'info', $variant: 400); - background: color($color: 'info', $variant: 200); + color: contrast-color($color: 'info', $variant: 400 , $opacity: if($theme-variant == 'light', .4, .2)); + background: color($color: 'info', $variant: 800); border-color: transparent; } } &%igx-chip--success { %igx-chip__item { - color: contrast-color($color: 'success', $variant: 800); - background: color($color: 'success', $variant: 200); + color: contrast-color($color: 'success', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2)); + background: color($color: 'success', $variant: 900); border-color: transparent; } } &%igx-chip--warning { %igx-chip__item { - color: contrast-color($color: 'warn', $variant: 900); - background: color($color: 'warn', $variant: 200); + color: contrast-color($color: 'warn', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2)); + background: color($color: 'warn', $variant: 900); border-color: transparent; } } &%igx-chip--danger { %igx-chip__item { - color: contrast-color($color: 'error', $variant: 900); - background: color($color: 'error', $variant: 200); + color: contrast-color($color: 'error', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2)); + background: color($color: 'error', $variant: 900); border-color: transparent; } } From 6e226685bd9be5d40c5d964911fadcb3a24e693a Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 19 Sep 2024 14:19:24 +0300 Subject: [PATCH 3/6] fix(chip): update the disabled colors to use opacity of 40% --- .../src/lib/core/styles/components/chip/_chip-theme.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index a7872598c9f..806767bda39 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -816,7 +816,7 @@ &%igx-chip--info { %igx-chip__item { color: contrast-color($color: 'info', $variant: 400 , $opacity: if($theme-variant == 'light', .4, .2)); - background: color($color: 'info', $variant: 800); + background: color($color: 'info', $variant: 500, $opacity: .4); border-color: transparent; } } @@ -824,7 +824,7 @@ &%igx-chip--success { %igx-chip__item { color: contrast-color($color: 'success', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2)); - background: color($color: 'success', $variant: 900); + background: color($color: 'success', $variant: 500, $opacity: .4); border-color: transparent; } } @@ -832,7 +832,7 @@ &%igx-chip--warning { %igx-chip__item { color: contrast-color($color: 'warn', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2)); - background: color($color: 'warn', $variant: 900); + background: color($color: 'warn', $variant: 500, $opacity: .4); border-color: transparent; } } @@ -840,7 +840,7 @@ &%igx-chip--danger { %igx-chip__item { color: contrast-color($color: 'error', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2)); - background: color($color: 'error', $variant: 900); + background: color($color: 'error', $variant: 500, $opacity: .4); border-color: transparent; } } From bbcd45a486eb8ad38a98b129972ff222cb4c0557 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 19 Sep 2024 14:39:09 +0300 Subject: [PATCH 4/6] fix(chip): fix the meta theme-variant not working --- .../src/lib/core/styles/components/chip/_chip-theme.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index 806767bda39..af7155bf987 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -243,7 +243,8 @@ focus-selected-outline-color: $focus-selected-outline-color, focus-outline-color: $focus-outline-color, _meta: map.merge(if($meta, $meta, ()), ( - variant: map.get($schema, '_meta', 'theme') + variant: map.get($schema, '_meta', 'theme'), + theme-variant: map.get($schema, '_meta', 'variant') )), size: $size, )); From c25926066993e1454882b86801cbc11481770312 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 19 Sep 2024 16:48:42 +0300 Subject: [PATCH 5/6] refactor(chip): use opacity ont the whole container in disabled state for info, warn, success, and danger --- .../styles/components/chip/_chip-theme.scss | 41 +++++++++++-------- 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index af7155bf987..f5ea226794e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -489,7 +489,7 @@ color: contrast-color($color: 'info', $variant: 500); background: color($color: 'info', $variant: 500); border-color: color($color: 'info', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: 100); + box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: if($theme-variant == 'light', 100, 800)); } @if $variant == 'bootstrap' { @@ -534,7 +534,7 @@ color: contrast-color($color: 'success', $variant: 900); background: color($color: 'success', $variant: 500); border-color: color($color: 'success', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: 200); + box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: if($theme-variant == 'light', 200, 800)); } @if $variant == 'bootstrap' { @@ -575,7 +575,7 @@ color: contrast-color($color: 'warn', $variant: 900); background: color($color: 'warn', $variant: 500); border-color: color($color: 'warn', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: 100); + box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: if($theme-variant == 'light', 100, 900)); } @if $variant == 'bootstrap' { @@ -620,7 +620,7 @@ color: contrast-color($color: 'error', $variant: 900); background: color($color: 'error', $variant: 500); border-color: color($color: 'error', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: 100); + box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: if($theme-variant == 'light', 100, 900)); } @if $variant == 'bootstrap' { @@ -816,33 +816,42 @@ &%igx-chip--info { %igx-chip__item { - color: contrast-color($color: 'info', $variant: 400 , $opacity: if($theme-variant == 'light', .4, .2)); - background: color($color: 'info', $variant: 500, $opacity: .4); - border-color: transparent; + color: contrast-color($color: 'info', $variant: 900); + background: color($color: 'info', $variant: 500); + border-color: color($color: 'info', $variant: 500); } } &%igx-chip--success { %igx-chip__item { - color: contrast-color($color: 'success', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2)); - background: color($color: 'success', $variant: 500, $opacity: .4); - border-color: transparent; + color: contrast-color($color: 'success', $variant: 900); + background: color($color: 'success', $variant: 500); + border-color: color($color: 'success', $variant: 500); } } &%igx-chip--warning { %igx-chip__item { - color: contrast-color($color: 'warn', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2)); - background: color($color: 'warn', $variant: 500, $opacity: .4); - border-color: transparent; + color: contrast-color($color: 'warn', $variant: 900); + background: color($color: 'warn', $variant: 500); + border-color: color($color: 'warn', $variant: 500); } } &%igx-chip--danger { %igx-chip__item { - color: contrast-color($color: 'error', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2)); - background: color($color: 'error', $variant: 500, $opacity: .4); - border-color: transparent; + color: contrast-color($color: 'error', $variant: 900); + background: color($color: 'error', $variant: 500); + border-color: color($color: 'error', $variant: 500); + } + } + + &%igx-chip--info, + &%igx-chip--success, + &%igx-chip--warning, + &%igx-chip--danger { + %igx-chip__item { + opacity: .4; } } } From 36af49b7bdea04a2a41ae0fa2f49f6630cfc9e16 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 25 Sep 2024 00:11:27 +0300 Subject: [PATCH 6/6] refactor(chip): update padding values --- .../styles/components/chip/_chip-theme.scss | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index f5ea226794e..cc1693e30ac 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -262,9 +262,9 @@ $theme-variant: map.get($theme, '_meta', 'theme-variant'); $chip-padding: ( - comfortable: rem(if($variant != 'indigo', 12px, 8px)), - cosy: rem(6px), - compact: rem(if($variant != 'indigo', 2px, 4px)) + comfortable: rem(if($variant != 'indigo', 12px, 7px)), + cosy: rem(if($variant != 'indigo', 6px, 5px)), + compact: rem(if($variant != 'indigo', 2px, 3px)) ); $box-shadow-focus: map.get(( @@ -651,7 +651,7 @@ @if $variant != 'indigo' { margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); } @else { - margin-inline-start: calc(#{sizable(rem(2px), rem(4px), rem(7px))} * -1); + margin-inline-start: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1); } } } @@ -661,7 +661,11 @@ &:first-of-type { igx-avatar, igx-circular-bar { - margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + @if $variant != 'indigo' { + margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + } @else { + margin-inline-start: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1); + } } } } @@ -674,7 +678,7 @@ @if $variant != 'indigo' { margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); } @else { - margin-inline-end: calc(#{sizable(rem(2px), rem(4px), rem(7px))} * -1); + margin-inline-end: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1); } } } @@ -684,7 +688,11 @@ &:first-of-type { igx-avatar, igx-circular-bar { - margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + @if $variant != 'indigo' { + margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + } @else { + margin-inline-end: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1); + } } } }