@navikt/ds-css 4.1.7 → 4.2.0

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 (13) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/chat.css +30 -16
  3. package/dist/component/chat.css +30 -16
  4. package/dist/component/chat.min.css +1 -1
  5. package/dist/component/index.css +28 -16
  6. package/dist/component/index.min.css +1 -1
  7. package/dist/components.css +27 -15
  8. package/dist/components.min.css +1 -1
  9. package/dist/global/tokens.css +1 -1
  10. package/dist/index.css +28 -16
  11. package/dist/index.min.css +1 -1
  12. package/package.json +2 -2
  13. package/tokens.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 4.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#2048](https://github.com/navikt/aksel/pull/2048) [`b1625ba38`](https://github.com/navikt/aksel/commit/b1625ba3882b430d678d0623922d7fb56aa724b3) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Oppdatert Chat
8
+
9
+ - :sparkles: Ny prop `size` som kan settes til "small" for en mer kompakt layout
10
+ - :sparkles: Ny prop `variant` som erstatter `backgroundColor` og `avatarBgColor`
11
+ - :sparkles: `avatar` er nå valgfritt
12
+ - :wheelchair: Forbedret UU
13
+ - :lipstick: Oppdatert utseende
14
+
3
15
  ## 4.1.7
4
16
 
5
17
  ### Patch Changes
package/chat.css CHANGED
@@ -1,14 +1,12 @@
1
1
  .navds-chat {
2
2
  display: flex;
3
3
  align-items: flex-end;
4
- gap: var(--a-spacing-4);
5
- padding-right: var(--a-spacing-16);
4
+ gap: var(--a-spacing-3);
5
+ max-width: 40.75rem;
6
6
  }
7
7
 
8
8
  .navds-chat--right {
9
9
  flex-direction: row-reverse;
10
- padding-right: 0;
11
- padding-left: var(--a-spacing-16);
12
10
  }
13
11
 
14
12
  .navds-chat__bubble-wrapper {
@@ -26,15 +24,19 @@
26
24
 
27
25
  .navds-chat__avatar {
28
26
  align-items: center;
29
- background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
30
- color: var(--ac-chat-avatar-color, var(--a-text-default));
27
+ box-shadow: var(--a-shadow-xsmall);
28
+ background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
29
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
31
30
  border-radius: var(--a-border-radius-full);
31
+ color: var(--ac-chat-avatar-color, var(--a-text-default));
32
32
  display: flex;
33
33
  flex-shrink: 0;
34
34
  justify-content: center;
35
35
  overflow: hidden;
36
- height: 3rem;
37
- width: 3rem;
36
+ height: 2.5rem;
37
+ width: 2.5rem;
38
+ font-size: 1.06rem;
39
+ letter-spacing: 0.024rem;
38
40
  }
39
41
 
40
42
  .navds-chat__avatar svg {
@@ -44,11 +46,11 @@
44
46
  }
45
47
 
46
48
  .navds-chat__bubble {
47
- padding: 1rem;
48
- box-shadow: var(--a-shadow-small);
49
+ padding: var(--a-spacing-4);
50
+ box-shadow: var(--a-shadow-xsmall);
49
51
  width: fit-content;
50
- max-width: 37.5rem;
51
- background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
52
+ background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
53
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
52
54
  border-radius: var(--a-border-radius-xlarge);
53
55
  border-bottom-left-radius: 2px;
54
56
  display: flex;
@@ -61,11 +63,27 @@
61
63
  border-bottom-right-radius: 2px;
62
64
  }
63
65
 
66
+ .navds-chat--small .navds-chat__bubble {
67
+ padding: var(--a-spacing-3);
68
+ }
69
+
70
+ .navds-chat--info .navds-chat__bubble,
71
+ .navds-chat--info .navds-chat__avatar {
72
+ background-color: var(--a-surface-info-subtle);
73
+ }
74
+
75
+ .navds-chat--neutral .navds-chat__bubble,
76
+ .navds-chat--neutral .navds-chat__avatar {
77
+ background-color: var(--a-surface-default);
78
+ }
79
+
64
80
  .navds-chat__top-text {
65
81
  color: var(--ac-chat-top-text, var(--a-text-default));
66
82
  display: flex;
67
83
  gap: var(--a-spacing-2);
68
84
  align-items: baseline;
85
+ font-weight: normal;
86
+ margin: 0;
69
87
  }
70
88
 
71
89
  .navds-chat--right .navds-chat__top-text {
@@ -87,7 +105,3 @@
87
105
  .navds-chat--right .navds-chat__top-text--left {
88
106
  align-self: flex-start;
89
107
  }
90
-
91
- .navds-chat__name {
92
- font-weight: var(--a-font-weight-bold);
93
- }
package/dist/component/chat.css CHANGED
@@ -1,14 +1,12 @@
1
1
  .navds-chat {
2
2
  display: flex;
3
3
  align-items: flex-end;
4
- gap: var(--a-spacing-4);
5
- padding-right: var(--a-spacing-16);
4
+ gap: var(--a-spacing-3);
5
+ max-width: 40.75rem;
6
6
  }
7
7
 
8
8
  .navds-chat--right {
9
9
  flex-direction: row-reverse;
10
- padding-right: 0;
11
- padding-left: var(--a-spacing-16);
12
10
  }
13
11
 
14
12
  .navds-chat__bubble-wrapper {
@@ -26,15 +24,19 @@
26
24
 
27
25
  .navds-chat__avatar {
28
26
  align-items: center;
29
- background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
30
- color: var(--ac-chat-avatar-color, var(--a-text-default));
27
+ box-shadow: var(--a-shadow-xsmall);
28
+ background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
29
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
31
30
  border-radius: var(--a-border-radius-full);
31
+ color: var(--ac-chat-avatar-color, var(--a-text-default));
32
32
  display: flex;
33
33
  flex-shrink: 0;
34
34
  justify-content: center;
35
35
  overflow: hidden;
36
- height: 3rem;
37
- width: 3rem;
36
+ height: 2.5rem;
37
+ width: 2.5rem;
38
+ font-size: 1.06rem;
39
+ letter-spacing: 0.024rem;
38
40
  }
39
41
 
40
42
  .navds-chat__avatar svg {
@@ -44,11 +46,11 @@
44
46
  }
45
47
 
46
48
  .navds-chat__bubble {
47
- padding: 1rem;
48
- box-shadow: var(--a-shadow-small);
49
+ padding: var(--a-spacing-4);
50
+ box-shadow: var(--a-shadow-xsmall);
49
51
  width: fit-content;
50
- max-width: 37.5rem;
51
- background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
52
+ background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
53
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
52
54
  border-radius: var(--a-border-radius-xlarge);
53
55
  border-bottom-left-radius: 2px;
54
56
  display: flex;
@@ -61,11 +63,27 @@
61
63
  border-bottom-right-radius: 2px;
62
64
  }
63
65
 
66
+ .navds-chat--small .navds-chat__bubble {
67
+ padding: var(--a-spacing-3);
68
+ }
69
+
70
+ .navds-chat--info .navds-chat__bubble,
71
+ .navds-chat--info .navds-chat__avatar {
72
+ background-color: var(--a-surface-info-subtle);
73
+ }
74
+
75
+ .navds-chat--neutral .navds-chat__bubble,
76
+ .navds-chat--neutral .navds-chat__avatar {
77
+ background-color: var(--a-surface-default);
78
+ }
79
+
64
80
  .navds-chat__top-text {
65
81
  color: var(--ac-chat-top-text, var(--a-text-default));
66
82
  display: flex;
67
83
  gap: var(--a-spacing-2);
68
84
  align-items: baseline;
85
+ font-weight: normal;
86
+ margin: 0;
69
87
  }
70
88
 
71
89
  .navds-chat--right .navds-chat__top-text {
@@ -87,7 +105,3 @@
87
105
  .navds-chat--right .navds-chat__top-text--left {
88
106
  align-self: flex-start;
89
107
  }
90
-
91
- .navds-chat__name {
92
- font-weight: var(--a-font-weight-bold);
93
- }
package/dist/component/chat.min.css CHANGED
@@ -1 +1 @@
1
- .navds-chat{align-items:flex-end;display:flex;gap:var(--a-spacing-4);padding-right:var(--a-spacing-16)}.navds-chat--right{flex-direction:row-reverse;padding-left:var(--a-spacing-16);padding-right:0}.navds-chat__bubble-wrapper{display:flex;flex-direction:column;gap:var(--a-spacing-3);list-style:none;margin:0;padding:0}.navds-chat--right .navds-chat__bubble-wrapper{align-items:flex-end}.navds-chat__avatar{align-items:center;background:var(--ac-chat-avatar-bg,var(--a-bg-subtle));border-radius:var(--a-border-radius-full);color:var(--ac-chat-avatar-color,var(--a-text-default));display:flex;flex-shrink:0;height:3rem;justify-content:center;overflow:hidden;width:3rem}.navds-chat__avatar svg{align-self:center;height:100%;width:100%}.navds-chat__bubble{background-color:var(--ac-chat-bubble-bg,var(--a-bg-subtle));border-radius:var(--a-border-radius-xlarge);border-bottom-left-radius:2px;box-shadow:var(--a-shadow-small);display:flex;flex-direction:column;gap:var(--a-spacing-2);max-width:37.5rem;padding:1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-chat--right .navds-chat__bubble{border-radius:var(--a-border-radius-xlarge);border-bottom-right-radius:2px}.navds-chat__top-text{align-items:baseline;color:var(--ac-chat-top-text,var(--a-text-default));display:flex;gap:var(--a-spacing-2)}.navds-chat--right .navds-chat__top-text{align-self:flex-end}.navds-chat--top-text-left .navds-chat__top-text{align-self:flex-start}.navds-chat--left .navds-chat__top-text--right,.navds-chat--top-text-right .navds-chat__top-text{align-self:flex-end}.navds-chat--right .navds-chat__top-text--left{align-self:flex-start}.navds-chat__name{font-weight:var(--a-font-weight-bold)}
1
+ .navds-chat{align-items:flex-end;display:flex;gap:var(--a-spacing-3);max-width:40.75rem}.navds-chat--right{flex-direction:row-reverse}.navds-chat__bubble-wrapper{display:flex;flex-direction:column;gap:var(--a-spacing-3);list-style:none;margin:0;padding:0}.navds-chat--right .navds-chat__bubble-wrapper{align-items:flex-end}.navds-chat__avatar{align-items:center;background-color:var(--ac-chat-avatar-bg,var(--a-surface-neutral-subtle));border:1px solid var(--ac-chat-border-color,var(--a-border-subtle));border-radius:var(--a-border-radius-full);box-shadow:var(--a-shadow-xsmall);color:var(--ac-chat-avatar-color,var(--a-text-default));display:flex;flex-shrink:0;font-size:1.06rem;height:2.5rem;justify-content:center;letter-spacing:.024rem;overflow:hidden;width:2.5rem}.navds-chat__avatar svg{align-self:center;height:100%;width:100%}.navds-chat__bubble{background-color:var(--ac-chat-bubble-bg,var(--a-surface-neutral-subtle));border:1px solid var(--ac-chat-border-color,var(--a-border-subtle));border-radius:var(--a-border-radius-xlarge);border-bottom-left-radius:2px;box-shadow:var(--a-shadow-xsmall);display:flex;flex-direction:column;gap:var(--a-spacing-2);padding:var(--a-spacing-4);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-chat--right .navds-chat__bubble{border-radius:var(--a-border-radius-xlarge);border-bottom-right-radius:2px}.navds-chat--small .navds-chat__bubble{padding:var(--a-spacing-3)}.navds-chat--info .navds-chat__avatar,.navds-chat--info .navds-chat__bubble{background-color:var(--a-surface-info-subtle)}.navds-chat--neutral .navds-chat__avatar,.navds-chat--neutral .navds-chat__bubble{background-color:var(--a-surface-default)}.navds-chat__top-text{align-items:baseline;color:var(--ac-chat-top-text,var(--a-text-default));display:flex;font-weight:400;gap:var(--a-spacing-2);margin:0}.navds-chat--right .navds-chat__top-text{align-self:flex-end}.navds-chat--top-text-left .navds-chat__top-text{align-self:flex-start}.navds-chat--left .navds-chat__top-text--right,.navds-chat--top-text-right .navds-chat__top-text{align-self:flex-end}.navds-chat--right .navds-chat__top-text--left{align-self:flex-start}
package/dist/component/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Mon, 19 Jun 2023 11:05:07 GMT
4
+ * Generated on Wed, 21 Jun 2023 10:02:14 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-05: 0.125rem;
@@ -1697,13 +1697,11 @@ body,
1697
1697
  .navds-chat {
1698
1698
  display: flex;
1699
1699
  align-items: flex-end;
1700
- gap: var(--a-spacing-4);
1701
- padding-right: var(--a-spacing-16);
1700
+ gap: var(--a-spacing-3);
1701
+ max-width: 40.75rem;
1702
1702
  }
1703
1703
  .navds-chat--right {
1704
1704
  flex-direction: row-reverse;
1705
- padding-right: 0;
1706
- padding-left: var(--a-spacing-16);
1707
1705
  }
1708
1706
  .navds-chat__bubble-wrapper {
1709
1707
  list-style: none;
@@ -1718,15 +1716,19 @@ body,
1718
1716
  }
1719
1717
  .navds-chat__avatar {
1720
1718
  align-items: center;
1721
- background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
1722
- color: var(--ac-chat-avatar-color, var(--a-text-default));
1719
+ box-shadow: var(--a-shadow-xsmall);
1720
+ background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
1721
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
1723
1722
  border-radius: var(--a-border-radius-full);
1723
+ color: var(--ac-chat-avatar-color, var(--a-text-default));
1724
1724
  display: flex;
1725
1725
  flex-shrink: 0;
1726
1726
  justify-content: center;
1727
1727
  overflow: hidden;
1728
- height: 3rem;
1729
- width: 3rem;
1728
+ height: 2.5rem;
1729
+ width: 2.5rem;
1730
+ font-size: 1.06rem;
1731
+ letter-spacing: 0.024rem;
1730
1732
  }
1731
1733
  .navds-chat__avatar svg {
1732
1734
  align-self: center;
@@ -1734,11 +1736,11 @@ body,
1734
1736
  width: 100%;
1735
1737
  }
1736
1738
  .navds-chat__bubble {
1737
- padding: 1rem;
1738
- box-shadow: var(--a-shadow-small);
1739
+ padding: var(--a-spacing-4);
1740
+ box-shadow: var(--a-shadow-xsmall);
1739
1741
  width: fit-content;
1740
- max-width: 37.5rem;
1741
- background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
1742
+ background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
1743
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
1742
1744
  border-radius: var(--a-border-radius-xlarge);
1743
1745
  border-bottom-left-radius: 2px;
1744
1746
  display: flex;
@@ -1749,11 +1751,24 @@ body,
1749
1751
  border-radius: var(--a-border-radius-xlarge);
1750
1752
  border-bottom-right-radius: 2px;
1751
1753
  }
1754
+ .navds-chat--small .navds-chat__bubble {
1755
+ padding: var(--a-spacing-3);
1756
+ }
1757
+ .navds-chat--info .navds-chat__bubble,
1758
+ .navds-chat--info .navds-chat__avatar {
1759
+ background-color: var(--a-surface-info-subtle);
1760
+ }
1761
+ .navds-chat--neutral .navds-chat__bubble,
1762
+ .navds-chat--neutral .navds-chat__avatar {
1763
+ background-color: var(--a-surface-default);
1764
+ }
1752
1765
  .navds-chat__top-text {
1753
1766
  color: var(--ac-chat-top-text, var(--a-text-default));
1754
1767
  display: flex;
1755
1768
  gap: var(--a-spacing-2);
1756
1769
  align-items: baseline;
1770
+ font-weight: normal;
1771
+ margin: 0;
1757
1772
  }
1758
1773
  .navds-chat--right .navds-chat__top-text {
1759
1774
  align-self: flex-end;
@@ -1770,9 +1785,6 @@ body,
1770
1785
  .navds-chat--right .navds-chat__top-text--left {
1771
1786
  align-self: flex-start;
1772
1787
  }
1773
- .navds-chat__name {
1774
- font-weight: var(--a-font-weight-bold);
1775
- }
1776
1788
  .navds-chips {
1777
1789
  display: flex;
1778
1790
  gap: var(--a-spacing-2);