@odx/ui 3.5.1 → 3.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/core-theme.css +41 -5
  3. package/package.json +1 -1
  4. package/scss/components/list-item.component.scss +30 -17
  5. package/scss/components/tooltip.component.scss +2 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @odx/ui
2
2
 
3
+ ## 3.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 209c36a: tooltip font-size updated
8
+ - 7bbcd5c: Updated List item colors and add warning state, danger attribute is deprecated.
9
+
3
10
  ## 3.5.1
4
11
 
5
12
  ### Patch Changes
package/core-theme.css CHANGED
@@ -4580,7 +4580,7 @@ html body .odx-fs-italic {
4580
4580
  background-color: var(--odx-c-ghost-hover);
4581
4581
  }
4582
4582
  }
4583
- .odx-list-item--danger+.odx-list-item, .odx-list-item.is-selected+.odx-list-item {
4583
+ .odx-list-item--danger+.odx-list-item, .odx-list-item--warning+.odx-list-item, .odx-list-item.is-selected+.odx-list-item {
4584
4584
  --separator-color: transparent !important;
4585
4585
  }
4586
4586
  @media (hover: hover){
@@ -4593,9 +4593,8 @@ html body .odx-fs-italic {
4593
4593
  pointer-events: none;
4594
4594
  }
4595
4595
  .odx-list-item--danger {
4596
- --odx-c-focus: var(--odx-c-danger);
4597
4596
  --separator-color: transparent !important;
4598
- background-color: var(--odx-c-danger);
4597
+ background-color: var(--odx-c-danger-active);
4599
4598
  color: var(--odx-c-danger-text);
4600
4599
  }
4601
4600
  @media (hover: hover){
@@ -4603,9 +4602,28 @@ html body .odx-fs-italic {
4603
4602
  background-color: var(--odx-c-danger-hover);
4604
4603
  }
4605
4604
  }
4605
+ .odx-list-item--danger:focus-visible {
4606
+ background-color: var(--odx-c-danger-active);
4607
+ }
4606
4608
  .odx-list-item--danger.is-disabled {
4607
4609
  color: var(--odx-c-danger-text-disabled);
4608
4610
  }
4611
+ .odx-list-item--warning {
4612
+ --separator-color: transparent !important;
4613
+ background-color: var(--odx-c-warning-active);
4614
+ color: var(--odx-c-warning-text);
4615
+ }
4616
+ @media (hover: hover){
4617
+ .odx-list-item--warning:hover:not(.odx-list-item--muted) {
4618
+ background-color: var(--odx-c-warning-hover);
4619
+ }
4620
+ }
4621
+ .odx-list-item--warning:focus-visible {
4622
+ background-color: var(--odx-c-warning-active);
4623
+ }
4624
+ .odx-list-item--warning.is-disabled {
4625
+ color: var(--odx-c-warning-text-disabled);
4626
+ }
4609
4627
  .odx-list-item.is-selected {
4610
4628
  --separator-color: transparent !important;
4611
4629
  background-color: var(--odx-c-selected);
@@ -4616,16 +4634,33 @@ html body .odx-fs-italic {
4616
4634
  }
4617
4635
  }
4618
4636
  .odx-list-item.is-selected.odx-list-item--danger {
4619
- background-color: var(--odx-c-danger-active);
4637
+ background-color: var(--odx-c-danger);
4620
4638
  }
4621
4639
  @media (hover: hover){
4622
4640
  .odx-list-item.is-selected.odx-list-item--danger:hover:not(.odx-list-item--muted) {
4623
- background-color: var(--red-800);
4641
+ background-color: var(--odx-c-danger-hover);
4624
4642
  }
4625
4643
  }
4626
4644
  .odx-list-item.is-selected.odx-list-item--danger.is-disabled {
4627
4645
  color: var(--odx-c-danger-text);
4628
4646
  }
4647
+ .odx-list-item.is-selected.odx-list-item--danger:focus-visible {
4648
+ background-color: var(--odx-c-danger);
4649
+ }
4650
+ .odx-list-item.is-selected.odx-list-item--warning {
4651
+ background-color: var(--odx-c-warning);
4652
+ }
4653
+ @media (hover: hover){
4654
+ .odx-list-item.is-selected.odx-list-item--warning:hover:not(.odx-list-item--muted) {
4655
+ background-color: var(--odx-c-warning-hover);
4656
+ }
4657
+ }
4658
+ .odx-list-item.is-selected.odx-list-item--warning.is-disabled {
4659
+ color: var(--odx-c-warning-text);
4660
+ }
4661
+ .odx-list-item.is-selected.odx-list-item--warning:focus-visible {
4662
+ background-color: var(--odx-c-warning);
4663
+ }
4629
4664
 
4630
4665
  :root {
4631
4666
  --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
@@ -6807,6 +6842,7 @@ html body .odx-fs-italic {
6807
6842
  padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
6808
6843
  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5);
6809
6844
  padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
6845
+ font-size: calc(var(--odx-typography-base-size) * (1*1/var(--odx-typography-negative-font-scaling-factor)));
6810
6846
  background-color: var(--odx-tooltip-background-color);
6811
6847
  border-radius: var(--odx-v-border-radius);
6812
6848
  color: var(--odx-tooltip-color);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odx/ui",
3
- "version": "3.5.1",
3
+ "version": "3.5.2",
4
4
  "author": "Drägerwerk AG & Co.KGaA",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "peerDependencies": {
package/scss/components/list-item.component.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  .odx-list-item {
8
8
  $root: &;
9
9
  $muted-selector: #{$root}--muted;
10
+ $variants: danger, warning;
10
11
 
11
12
  --separator-color: var(--odx-c-separator);
12
13
 
@@ -56,6 +57,7 @@
56
57
  }
57
58
 
58
59
  &--danger + &,
60
+ &--warning + &,
59
61
  &.is-selected + &,
60
62
  &:hover:not(#{$muted-selector}) + & {
61
63
  --separator-color: transparent !important;
@@ -66,19 +68,24 @@
66
68
  pointer-events: none;
67
69
  }
68
70
 
69
- &--danger {
70
- --odx-c-focus: var(--odx-c-danger);
71
- --separator-color: transparent !important;
71
+ @each $variant in $variants {
72
+ &--#{$variant} {
73
+ --separator-color: transparent !important;
72
74
 
73
- background-color: var(--odx-c-danger);
74
- color: var(--odx-c-danger-text);
75
+ background-color: var(--odx-c-#{$variant}-active);
76
+ color: var(--odx-c-#{$variant}-text);
75
77
 
76
- &:hover:not(#{$muted-selector}) {
77
- background-color: var(--odx-c-danger-hover);
78
- }
78
+ &:hover:not(#{$muted-selector}) {
79
+ background-color: var(--odx-c-#{$variant}-hover);
80
+ }
81
+
82
+ &:focus-visible {
83
+ background-color: var(--odx-c-#{$variant}-active);
84
+ }
79
85
 
80
- &.is-disabled {
81
- color: var(--odx-c-danger-text-disabled);
86
+ &.is-disabled {
87
+ color: var(--odx-c-#{$variant}-text-disabled);
88
+ }
82
89
  }
83
90
  }
84
91
 
@@ -91,15 +98,21 @@
91
98
  background-color: var(--odx-c-selected-hover);
92
99
  }
93
100
 
94
- &#{$root}--danger {
95
- background-color: var(--odx-c-danger-active);
101
+ @each $variant in $variants {
102
+ &#{$root}--#{$variant} {
103
+ background-color: var(--odx-c-#{$variant});
96
104
 
97
- &:hover:not(#{$muted-selector}) {
98
- background-color: var(--red-800);
99
- }
105
+ &:hover:not(#{$muted-selector}) {
106
+ background-color: var(--odx-c-#{$variant}-hover);
107
+ }
100
108
 
101
- &.is-disabled {
102
- color: var(--odx-c-danger-text);
109
+ &.is-disabled {
110
+ color: var(--odx-c-#{$variant}-text);
111
+ }
112
+
113
+ &:focus-visible {
114
+ background-color: var(--odx-c-#{$variant});
115
+ }
103
116
  }
104
117
  }
105
118
  }
package/scss/components/tooltip.component.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use '../abstract/dimensions';
2
2
  @use '../abstract/utils';
3
+ @use '../abstract/typography';
3
4
 
4
5
  :root {
5
6
  --odx-tooltip-background-color: var(--blue-800);
@@ -13,6 +14,7 @@
13
14
  $sizes: small, medium, large;
14
15
 
15
16
  @include dimensions.padding(0.5);
17
+ @include typography.font-size(-1);
16
18
 
17
19
  background-color: var(--odx-tooltip-background-color);
18
20
  border-radius: var(--odx-v-border-radius);