@digdir/designsystemet-css 0.10.0 → 0.11.0-alpha.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 (79) hide show
  1. package/accordion.css +89 -81
  2. package/alert.css +48 -44
  3. package/box.css +37 -37
  4. package/button.css +133 -196
  5. package/card.css +129 -91
  6. package/checkbox.css +118 -86
  7. package/chip.css +93 -93
  8. package/combobox.css +138 -125
  9. package/dist/accordion.css +1 -1
  10. package/dist/alert.css +1 -1
  11. package/dist/box.css +1 -1
  12. package/dist/button.css +1 -1
  13. package/dist/card.css +1 -1
  14. package/dist/checkbox.css +1 -1
  15. package/dist/chip.css +1 -1
  16. package/dist/combobox.css +1 -1
  17. package/dist/divider.css +1 -1
  18. package/dist/dropdownmenu.css +1 -1
  19. package/dist/error-message.css +1 -1
  20. package/dist/error-summary.css +1 -1
  21. package/dist/fieldset.css +1 -1
  22. package/dist/heading.css +1 -1
  23. package/dist/helptext.css +1 -1
  24. package/dist/index.css +1 -1
  25. package/dist/ingress.css +1 -1
  26. package/dist/label.css +1 -1
  27. package/dist/link.css +1 -1
  28. package/dist/list.css +1 -1
  29. package/dist/modal.css +1 -1
  30. package/dist/native-select.css +1 -1
  31. package/dist/pagination.css +1 -1
  32. package/dist/paragraph.css +1 -1
  33. package/dist/popover.css +1 -1
  34. package/dist/radio.css +1 -1
  35. package/dist/search.css +1 -1
  36. package/dist/skeleton.css +1 -1
  37. package/dist/skiplink.css +1 -1
  38. package/dist/spinner.css +1 -1
  39. package/dist/switch.css +1 -1
  40. package/dist/table.css +1 -1
  41. package/dist/tabs.css +1 -1
  42. package/dist/tag.css +1 -1
  43. package/dist/textarea.css +1 -1
  44. package/dist/textfield.css +1 -1
  45. package/dist/togglegroup.css +1 -1
  46. package/dist/tooltip.css +1 -1
  47. package/dist/utils.css +1 -1
  48. package/divider.css +8 -8
  49. package/dropdownmenu.css +20 -19
  50. package/error-message.css +19 -19
  51. package/error-summary.css +12 -8
  52. package/fieldset.css +13 -13
  53. package/heading.css +27 -27
  54. package/helptext.css +22 -21
  55. package/index.css +5 -5
  56. package/ingress.css +18 -18
  57. package/label.css +17 -17
  58. package/link.css +46 -18
  59. package/list.css +10 -10
  60. package/modal.css +35 -33
  61. package/native-select.css +62 -45
  62. package/package.json +2 -2
  63. package/pagination.css +32 -32
  64. package/paragraph.css +37 -37
  65. package/popover.css +43 -40
  66. package/radio.css +88 -81
  67. package/search.css +66 -61
  68. package/skeleton.css +14 -14
  69. package/skiplink.css +32 -8
  70. package/spinner.css +15 -23
  71. package/switch.css +121 -91
  72. package/table.css +54 -50
  73. package/tabs.css +44 -46
  74. package/tag.css +42 -42
  75. package/textarea.css +34 -32
  76. package/textfield.css +64 -62
  77. package/togglegroup.css +11 -10
  78. package/tooltip.css +11 -18
  79. package/utils.css +11 -11
package/native-select.css CHANGED
@@ -1,92 +1,109 @@
1
- @layer fds.nativeselect {
2
- .fds-native-select {
1
+ @layer ds.nativeselect {
2
+ .ds-native-select__wrapper {
3
+ position: relative;
4
+ display: grid;
5
+ flex: 0 1 auto;
6
+ }
7
+
8
+ /* chevron for native select */
9
+ .ds-native-select__wrapper::after {
10
+ content: '';
11
+ position: absolute;
12
+ background-color: var(--ds-color-neutral-text-default);
13
+ pointer-events: none;
14
+ top: 50%;
15
+ right: var(--ds-spacing-2);
16
+ transform: translateY(-50%);
17
+ width: 1.5em;
18
+ height: 1.5em;
19
+ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
20
+ mask-size: contain;
21
+ }
22
+
23
+ .ds-native-select {
3
24
  position: relative;
4
25
  font: inherit;
5
26
  font-family: inherit;
6
27
  box-sizing: border-box;
7
- flex: 0 1 auto;
8
- padding: 0 var(--fds-spacing-2);
9
- border: solid 1px var(--fds-semantic-border-input-default);
10
- border-radius: var(--fds-border_radius-medium);
11
- background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
12
- background-color: var(--fds-semantic-background-default);
13
- background-repeat: no-repeat;
14
- background-position: right var(--fds-spacing-2) center;
15
- background-size: 1.5em 1.5em;
28
+ padding: 0 var(--ds-spacing-2);
29
+ border: solid 1px var(--ds-color-neutral-border-default);
30
+ border-radius: var(--ds-border-radius-md);
31
+ background-color: var(--ds-color-neutral-background-default);
32
+ color: var(--ds-color-neutral-text-default);
16
33
  appearance: none;
17
34
  }
18
35
 
19
36
  @media (hover: hover) and (pointer: fine) {
20
- .fds-native-select:not(:focus-visible, :disabled, [aria-disabled]):hover {
21
- border-color: var(--fds-semantic-border-input-hover);
22
- box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
37
+ .ds-native-select:not(:focus-visible, :disabled, [aria-disabled]):hover {
38
+ border-color: var(--ds-color-accent-border-strong);
39
+ box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
23
40
  }
24
41
  }
25
42
 
26
- .fds-native-select.fds-native-select--multiple {
43
+ .ds-native-select.ds-native-select--multiple {
27
44
  background-image: none;
28
45
  }
29
46
 
30
- .fds-native-select--sm {
31
- padding: 0 var(--fds-spacing-2);
32
- padding-right: var(--fds-spacing-8);
33
- height: var(--fds-sizing-10);
47
+ .ds-native-select--sm {
48
+ padding: 0 var(--ds-spacing-2);
49
+ padding-right: var(--ds-spacing-8);
50
+ height: var(--ds-sizing-10);
34
51
  }
35
52
 
36
- .fds-native-select--md {
37
- padding: 0 var(--fds-spacing-3);
38
- padding-right: var(--fds-spacing-10);
39
- height: var(--fds-sizing-12);
53
+ .ds-native-select--md {
54
+ padding: 0 var(--ds-spacing-3);
55
+ padding-right: var(--ds-spacing-10);
56
+ height: var(--ds-sizing-12);
40
57
  }
41
58
 
42
- .fds-native-select--lg {
43
- padding: 0 var(--fds-spacing-4);
44
- padding-right: var(--fds-spacing-12);
45
- height: var(--fds-sizing-14);
59
+ .ds-native-select--lg {
60
+ padding: 0 var(--ds-spacing-4);
61
+ padding-right: var(--ds-spacing-12);
62
+ height: var(--ds-sizing-14);
46
63
  }
47
64
 
48
- .fds-native-select--container {
65
+ .ds-native-select--container {
49
66
  display: grid;
50
- gap: var(--fds-spacing-2);
67
+ gap: var(--ds-spacing-2);
51
68
  }
52
69
 
53
- .fds-native-select--container:has(.fds-native-select:disabled) {
54
- opacity: var(--fds-opacity-disabled);
70
+ .ds-native-select--container:has(.ds-native-select:disabled) {
71
+ opacity: var(--ds-disabled-opacity);
55
72
  }
56
73
 
57
- .fds-native-select:disabled {
74
+ .ds-native-select:disabled {
58
75
  cursor: not-allowed;
59
76
  }
60
77
 
61
- .fds-native-select--readonly .fds-native-select {
62
- background: var(--fds-semantic-surface-neutral-subtle);
63
- border-color: var(--fds-semantic-border-neutral-default);
78
+ .ds-native-select--readonly .ds-native-select {
79
+ background: var(--ds-color-neutral-background-subtle);
80
+ border-color: var(--ds-color-neutral-border-strong);
64
81
  }
65
82
 
66
- .fds-native-select--error>.fds-native-select:not(:focus-visible) {
67
- border-color: var(--fds-semantic-border-danger-default);
68
- box-shadow: inset 0 0 0 1px var(--fds-semantic-border-danger-default);
83
+ .ds-native-select--error > .ds-native-select:not(:focus-visible) {
84
+ border-color: var(--ds-color-danger-border-default);
85
+ box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
69
86
  }
70
87
 
71
- .fds-native-select__readonly__icon {
88
+ .ds-native-select__readonly__icon {
72
89
  height: 1.2em;
73
90
  width: 1.2em;
74
91
  }
75
92
 
76
- .fds-native-select__error-message:empty {
93
+ .ds-native-select__error-message:empty {
77
94
  display: none;
78
95
  }
79
96
 
80
- .fds-native-select__label {
97
+ .ds-native-select__label {
81
98
  min-width: min-content;
82
99
  display: inline-flex;
83
100
  flex-direction: row;
84
- gap: var(--fds-spacing-1);
101
+ gap: var(--ds-spacing-1);
85
102
  align-items: center;
86
103
  }
87
104
 
88
- .fds-native-select__description {
89
- color: var(--fds-semantic-text-neutral-subtle);
90
- margin-top: calc(var(--fds-spacing-2) * -1);
105
+ .ds-native-select__description {
106
+ color: var(--ds-color-neutral-text-subtle);
107
+ margin-top: calc(var(--ds-spacing-2) * -1);
91
108
  }
92
109
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digdir/designsystemet-css",
3
- "version": "0.10.0",
3
+ "version": "0.11.0-alpha.2",
4
4
  "description": "CSS for Designsystemet",
5
5
  "author": "Designsystemet team",
6
6
  "repository": "https://github.com/digdir/designsystemet",
@@ -39,5 +39,5 @@
39
39
  "postcss-import": "^16.0.1",
40
40
  "rimraf": "^5.0.5"
41
41
  },
42
- "gitHead": "245eb9f42ec347248133be61b1e690679cb96000"
42
+ "gitHead": "92430c5083e185ada96522d28ff1c5bd2811de88"
43
43
  }
package/pagination.css CHANGED
@@ -1,8 +1,8 @@
1
- @layer fds.pagination {
2
- .fds-pagination {
3
- --fds-pagination-listitem-margin: var(--fds-spacing-4);
4
- --fds-pagination-ellipsis-width: var(--fds-sizing-12);
5
- --fds-pagination-chevron-margin: var(--fds-spacing-2);
1
+ @layer ds.pagination {
2
+ .ds-pagination {
3
+ --dsc-pagination-listitem-margin: var(--ds-spacing-4);
4
+ --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
5
+ --dsc-pagination-chevron-margin: var(--ds-spacing-2);
6
6
 
7
7
  list-style-type: none;
8
8
  display: flex;
@@ -12,58 +12,58 @@
12
12
  width: fit-content;
13
13
  }
14
14
 
15
- .fds-pagination--hidden {
15
+ .ds-pagination--hidden {
16
16
  visibility: hidden;
17
17
  }
18
18
 
19
- .fds-pagination--sm {
20
- --fds-pagination-chevron-margin: var(--fds-spacing-2);
19
+ .ds-pagination--sm {
20
+ --dsc-pagination-chevron-margin: var(--ds-spacing-2);
21
21
  }
22
22
 
23
- .fds-pagination--md {
24
- --fds-pagination-chevron-margin: var(--fds-spacing-2);
23
+ .ds-pagination--md {
24
+ --dsc-pagination-chevron-margin: var(--ds-spacing-2);
25
25
  }
26
26
 
27
- .fds-pagination--lg {
28
- --fds-pagination-chevron-margin: var(--fds-spacing-2);
27
+ .ds-pagination--lg {
28
+ --dsc-pagination-chevron-margin: var(--ds-spacing-2);
29
29
  }
30
30
 
31
- .fds-pagination li:first-child {
32
- margin-right: var(--fds-pagination-chevron-margin);
31
+ .ds-pagination li:first-child {
32
+ margin-right: var(--dsc-pagination-chevron-margin);
33
33
  }
34
34
 
35
- .fds-pagination li:last-child {
36
- margin-left: var(--fds-pagination-chevron-margin);
35
+ .ds-pagination li:last-child {
36
+ margin-left: var(--dsc-pagination-chevron-margin);
37
37
  }
38
38
 
39
- .fds-pagination__item {
39
+ .ds-pagination__item {
40
40
  flex: 1;
41
- margin-right: var(--fds-pagination-listitem-margin);
41
+ margin-right: var(--dsc-pagination-listitem-margin);
42
42
  }
43
43
 
44
- .fds-pagination--sm .fds-pagination__item {
45
- --fds-pagination-listitem-margin: var(--fds-spacing-2);
46
- --fds-pagination-ellipsis-width: var(--fds-sizing-10);
44
+ .ds-pagination--sm .ds-pagination__item {
45
+ --dsc-pagination-listitem-margin: var(--ds-spacing-2);
46
+ --dsc-pagination-ellipsis-width: var(--ds-sizing-10);
47
47
  }
48
48
 
49
- .fds-pagination--md .fds-pagination__item {
50
- --fds-pagination-listitem-margin: var(--fds-spacing-4);
51
- --fds-pagination-ellipsis-width: var(--fds-sizing-12);
49
+ .ds-pagination--md .ds-pagination__item {
50
+ --dsc-pagination-listitem-margin: var(--ds-spacing-4);
51
+ --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
52
52
  }
53
53
 
54
- .fds-pagination--lg .fds-pagination__item {
55
- --fds-pagination-listitem-margin: var(--fds-spacing-6);
56
- --fds-pagination-ellipsis-width: var(--fds-sizing-14);
54
+ .ds-pagination--lg .ds-pagination__item {
55
+ --dsc-pagination-listitem-margin: var(--ds-spacing-6);
56
+ --dsc-pagination-ellipsis-width: var(--ds-sizing-14);
57
57
  }
58
58
 
59
- .fds-pagination__item.fds-pagination--compact {
60
- --fds-pagination-listitem-margin: var(--fds-spacing-0);
61
- --fds-pagination-chevron-margin: var(--fds-spacing-1);
59
+ .ds-pagination__item.ds-pagination--compact {
60
+ --dsc-pagination-listitem-margin: var(--ds-spacing-0);
61
+ --dsc-pagination-chevron-margin: var(--ds-spacing-1);
62
62
  }
63
63
 
64
- .fds-pagination__ellipsis {
64
+ .ds-pagination__ellipsis {
65
65
  margin-top: 0.5em;
66
66
  text-align: center;
67
- width: var(--fds-pagination-ellipsis-width);
67
+ width: var(--dsc-pagination-ellipsis-width);
68
68
  }
69
69
  }
package/paragraph.css CHANGED
@@ -1,82 +1,82 @@
1
- @layer fds.typography.paragraph {
2
- .fds-paragraph {
3
- --fdsc-bottom-spacing: var(--fds-spacing-5);
1
+ @layer ds.typography.paragraph {
2
+ .ds-paragraph {
3
+ --dsc-bottom-spacing: var(--ds-spacing-5);
4
4
 
5
- color: var(--fds-semantic-text-neutral-default);
5
+ color: var(--ds-color-neutral-text-default);
6
6
  margin: 0;
7
7
  }
8
8
 
9
- .fds-paragraph--spacing {
10
- margin-bottom: var(--fdsc-bottom-spacing);
9
+ .ds-paragraph--spacing {
10
+ margin-bottom: var(--dsc-bottom-spacing);
11
11
  }
12
12
 
13
- .fds-paragraph--lg {
14
- --fdsc-bottom-spacing: var(--fds-spacing-6);
13
+ .ds-paragraph--lg {
14
+ --dsc-bottom-spacing: var(--ds-spacing-6);
15
15
 
16
- font: var(--fds-typography-paragraph-large);
16
+ font: var(--ds-typography-paragraph-lg);
17
17
  font-family: inherit;
18
18
  }
19
19
 
20
- .fds-paragraph--lg.fds-paragraph--short {
21
- font: var(--fds-typography-paragraph-short-large);
20
+ .ds-paragraph--lg.ds-paragraph--short {
21
+ font: var(--ds-typography-paragraph-short-lg);
22
22
  font-family: inherit;
23
23
  }
24
24
 
25
- .fds-paragraph--lg.fds-paragraph--long {
26
- line-height: var(--fds-typography-paragraph-long-large);
25
+ .ds-paragraph--lg.ds-paragraph--long {
26
+ line-height: var(--ds-typography-paragraph-long-lg);
27
27
  }
28
28
 
29
- .fds-paragraph--md {
30
- --fdsc-bottom-spacing: var(--fds-spacing-5);
29
+ .ds-paragraph--md {
30
+ --dsc-bottom-spacing: var(--ds-spacing-5);
31
31
 
32
- font: var(--fds-typography-paragraph-medium);
32
+ font: var(--ds-typography-paragraph-md);
33
33
  font-family: inherit;
34
34
  }
35
35
 
36
- .fds-paragraph--md.fds-paragraph--short {
37
- --fdsc-bottom-spacing: var(--fds-spacing-5);
36
+ .ds-paragraph--md.ds-paragraph--short {
37
+ --dsc-bottom-spacing: var(--ds-spacing-5);
38
38
 
39
- font: var(--fds-typography-paragraph-short-medium);
39
+ font: var(--ds-typography-paragraph-short-md);
40
40
  font-family: inherit;
41
41
  }
42
42
 
43
- .fds-paragraph--md.fds-paragraph--long {
44
- line-height: var(--fds-typography-paragraph-long-medium);
43
+ .ds-paragraph--md.ds-paragraph--long {
44
+ line-height: var(--ds-typography-paragraph-long-md);
45
45
  }
46
46
 
47
- .fds-paragraph--sm {
48
- --fdsc-bottom-spacing: var(--fds-spacing-4);
47
+ .ds-paragraph--sm {
48
+ --dsc-bottom-spacing: var(--ds-spacing-4);
49
49
 
50
- font: var(--fds-typography-paragraph-small);
50
+ font: var(--ds-typography-paragraph-sm);
51
51
  font-family: inherit;
52
52
  }
53
53
 
54
- .fds-paragraph--sm.fds-paragraph--short {
55
- --fdsc-bottom-spacing: var(--fds-spacing-4);
54
+ .ds-paragraph--sm.ds-paragraph--short {
55
+ --dsc-bottom-spacing: var(--ds-spacing-4);
56
56
 
57
- font: var(--fds-typography-paragraph-short-small);
57
+ font: var(--ds-typography-paragraph-short-sm);
58
58
  font-family: inherit;
59
59
  }
60
60
 
61
- .fds-paragraph--sm.fds-paragraph--long {
62
- line-height: var(--fds-typography-paragraph-long-small);
61
+ .ds-paragraph--sm.ds-paragraph--long {
62
+ line-height: var(--ds-typography-paragraph-long-sm);
63
63
  }
64
64
 
65
- .fds-paragraph--xs {
66
- --fdsc-bottom-spacing: var(--fds-spacing-3);
65
+ .ds-paragraph--xs {
66
+ --dsc-bottom-spacing: var(--ds-spacing-3);
67
67
 
68
- font: var(--fds-typography-paragraph-xsmall);
68
+ font: var(--ds-typography-paragraph-xs);
69
69
  font-family: inherit;
70
70
  }
71
71
 
72
- .fds-paragraph--xs.fds-paragraph--short {
73
- --fdsc-bottom-spacing: var(--fds-spacing-3);
72
+ .ds-paragraph--xs.ds-paragraph--short {
73
+ --dsc-bottom-spacing: var(--ds-spacing-3);
74
74
 
75
- font: var(--fds-typography-paragraph-short-xsmall);
75
+ font: var(--ds-typography-paragraph-short-xs);
76
76
  font-family: inherit;
77
77
  }
78
78
 
79
- .fds-paragraph--xs.fds-paragraph--long {
80
- line-height: var(--fds-typography-paragraph-long-xsmall);
79
+ .ds-paragraph--xs.ds-paragraph--long {
80
+ line-height: var(--ds-typography-paragraph-long-xs);
81
81
  }
82
82
  }
package/popover.css CHANGED
@@ -1,79 +1,82 @@
1
- @layer fds.fds-popover {
2
- .fds-popover {
3
- --fds-popover-border: 1px solid;
4
- --fds-popover-background: var(--fds-semantic-surface-neutral-default);
1
+ @layer ds.popover {
2
+ .ds-popover {
3
+ --dsc-popover-border: 1px solid;
4
+ --dsc-popover-background: var(--ds-color-neutral-background-default);
5
5
 
6
6
  z-index: 1500;
7
- background: var(--fds-popover-background);
8
- padding: var(--fds-spacing-3);
9
- border: var(--fds-popover-border);
10
- border-radius: var(--fds-border_radius-medium);
7
+ background: var(--dsc-popover-background);
8
+ padding: var(--ds-spacing-3);
9
+ border: var(--dsc-popover-border);
10
+ border-radius: var(--ds-border-radius-md);
11
11
  max-width: 300px;
12
12
  }
13
13
 
14
- .fds-popover--sm {
15
- padding: var(--fds-spacing-2) var(--fds-spacing-3);
14
+ .ds-popover--sm {
15
+ padding: var(--ds-spacing-2) var(--ds-spacing-3);
16
16
  }
17
17
 
18
- .fds-popover--md {
19
- padding: var(--fds-spacing-3) var(--fds-spacing-4);
18
+ .ds-popover--md {
19
+ padding: var(--ds-spacing-3) var(--ds-spacing-4);
20
20
  }
21
21
 
22
- .fds-popover--lg {
23
- padding: var(--fds-spacing-3) var(--fds-spacing-5);
22
+ .ds-popover--lg {
23
+ padding: var(--ds-spacing-3) var(--ds-spacing-5);
24
24
  }
25
25
 
26
- .fds-popover--default {
27
- --fds-popover-background: var(--fds-semantic-surface-neutral-default);
26
+ .ds-popover--default {
27
+ --dsc-popover-background: var(--ds-color-neutral-background-default);
28
28
 
29
- border-color: var(--fds-semantic-border-neutral-default);
29
+ border-color: var(--ds-color-neutral-border-default);
30
30
  }
31
31
 
32
- .fds-popover--info {
33
- --fds-popover-background: var(--fds-semantic-surface-info-subtle);
32
+ .ds-popover--info {
33
+ --dsc-popover-background: var(--ds-color-info-surface-default);
34
34
 
35
- border-color: var(--fds-semantic-border-info-default);
35
+ border-color: var(--ds-color-info-border-default);
36
+ color: var(--ds-color-info-text-default);
36
37
  }
37
38
 
38
- .fds-popover--warning {
39
- --fds-popover-background: var(--fds-semantic-surface-warning-subtle);
39
+ .ds-popover--warning {
40
+ --dsc-popover-background: var(--ds-color-warning-surface-default);
40
41
 
41
- border-color: var(--fds-semantic-border-warning-default);
42
+ border-color: var(--ds-color-warning-border-default);
43
+ color: var(--ds-color-warning-text-default);
42
44
  }
43
45
 
44
- .fds-popover--danger {
45
- --fds-popover-background: var(--fds-semantic-surface-danger-subtle);
46
+ .ds-popover--danger {
47
+ --dsc-popover-background: var(--ds-color-danger-surface-default);
46
48
 
47
- border-color: var(--fds-semantic-border-danger-default);
49
+ border-color: var(--ds-color-danger-border-default);
50
+ color: var(--ds-color-danger-text-default);
48
51
  }
49
52
 
50
- .fds-popover__arrow {
53
+ .ds-popover__arrow {
51
54
  position: absolute;
52
- background: var(--fds-popover-background);
55
+ background: var(--dsc-popover-background);
53
56
  transform: rotate(45deg);
54
57
  }
55
58
 
56
- .fds-popover__arrow.fds-popover__arrow--top {
57
- border-top: var(--fds-popover-border);
58
- border-left: var(--fds-popover-border);
59
+ .ds-popover__arrow.ds-popover__arrow--top {
60
+ border-top: var(--dsc-popover-border);
61
+ border-left: var(--dsc-popover-border);
59
62
  border-color: inherit;
60
63
  }
61
64
 
62
- .fds-popover__arrow.fds-popover__arrow--bottom {
63
- border-bottom: var(--fds-popover-border);
64
- border-right: var(--fds-popover-border);
65
+ .ds-popover__arrow.ds-popover__arrow--bottom {
66
+ border-bottom: var(--dsc-popover-border);
67
+ border-right: var(--dsc-popover-border);
65
68
  border-color: inherit;
66
69
  }
67
70
 
68
- .fds-popover__arrow.fds-popover__arrow--right {
69
- border-top: var(--fds-popover-border);
70
- border-right: var(--fds-popover-border);
71
+ .ds-popover__arrow.ds-popover__arrow--right {
72
+ border-top: var(--dsc-popover-border);
73
+ border-right: var(--dsc-popover-border);
71
74
  border-color: inherit;
72
75
  }
73
76
 
74
- .fds-popover__arrow.fds-popover__arrow--left {
75
- border-bottom: var(--fds-popover-border);
76
- border-left: var(--fds-popover-border);
77
+ .ds-popover__arrow.ds-popover__arrow--left {
78
+ border-bottom: var(--dsc-popover-border);
79
+ border-left: var(--dsc-popover-border);
77
80
  border-color: inherit;
78
81
  }
79
82
  }