@navikt/ds-css 0.11.5 → 0.12.3

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 (30) hide show
  1. package/accordion-menu.css +8 -6
  2. package/accordion.css +11 -5
  3. package/alert.css +47 -17
  4. package/baseline/baseline.css +2 -2
  5. package/button.css +85 -32
  6. package/card.css +20 -10
  7. package/content-container.css +3 -3
  8. package/dist/index.css +466 -366
  9. package/form/confirmation-panel.css +11 -11
  10. package/form/error-message.css +3 -1
  11. package/form/error-summary.css +6 -2
  12. package/form/radio-checkbox.css +23 -9
  13. package/form/search-field.css +9 -3
  14. package/form/select.css +18 -5
  15. package/form/text-field.css +18 -5
  16. package/form/textarea.css +24 -9
  17. package/grid.css +2 -2
  18. package/guide-panel.css +7 -3
  19. package/help-text.css +20 -8
  20. package/link-panel.css +6 -4
  21. package/link.css +11 -11
  22. package/loader.css +11 -5
  23. package/modal.css +4 -2
  24. package/package.json +3 -3
  25. package/page-header.css +10 -4
  26. package/panel.css +5 -3
  27. package/popover.css +5 -4
  28. package/speech-bubble.css +9 -6
  29. package/table.css +5 -1
  30. package/tag.css +24 -10
package/form/confirmation-panel.css CHANGED
@@ -1,30 +1,30 @@
1
1
  :root {
2
2
  --navds-confirmation-panel-color-background: var(
3
- --navds-color-warning-background
3
+ --navds-semantic-color-feedback-warning-background
4
4
  );
5
5
  --navds-confirmation-panel-color-background-checked: var(
6
- --navds-color-success-background
6
+ --navds-semantic-color-feedback-success-background
7
7
  );
8
8
  --navds-confirmation-panel-color-border-checked: var(
9
- --navds-color-success-background
9
+ --navds-semantic-color-feedback-success-background
10
10
  );
11
11
  --navds-confirmation-panel-color-background-error: var(
12
- --navds-color-error-background
12
+ --navds-semantic-color-feedback-danger-background
13
13
  );
14
14
  --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
15
- --navds-color-green-70
15
+ --navds-global-color-green-700
16
16
  );
17
17
  --navds-confirmation-panel-color-checkbox-border-checked-hover: var(
18
- --navds-color-green-70
18
+ --navds-global-color-green-700
19
19
  );
20
20
  --navds-confirmation-panel-color-checkbox-background-checked: var(
21
- --navds-color-green-50
21
+ --navds-global-color-green-500
22
22
  );
23
23
  --navds-confirmation-panel-color-checkbox-border-checked: var(
24
- --navds-color-green-50
24
+ --navds-semantic-color-feedback-success-border
25
25
  );
26
26
  --navds-confirmation-panel-color-checkbox-label-checked: var(
27
- --navds-color-darkgray
27
+ --navds-semantic-color-text
28
28
  );
29
29
  }
30
30
 
@@ -77,7 +77,7 @@
77
77
  --navds-confirmation-panel-color-checkbox-background-checked
78
78
  );
79
79
  border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
80
- background-image: var(--navds-checkmark-image-white);
80
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
81
81
  }
82
82
 
83
83
  .navds-confirmation-panel--checked
@@ -94,5 +94,5 @@
94
94
  .navds-confirmation-panel--checked
95
95
  .navds-checkbox__input:focus:hover
96
96
  + .navds-checkbox__label::before {
97
- background-image: var(--navds-checkmark-image-white);
97
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
98
98
  }
package/form/error-message.css CHANGED
@@ -1,5 +1,7 @@
1
1
  :root {
2
- --navds-error-message-color-text: var(--navds-color-text-error);
2
+ --navds-error-message-color-text: var(
3
+ --navds-semantic-color-feedback-danger-text
4
+ );
3
5
  }
4
6
 
5
7
  .navds-error-message {
package/form/error-summary.css CHANGED
@@ -1,6 +1,10 @@
1
1
  :root {
2
- --navds-error-summary-color-background: var(--navds-color-white);
3
- --navds-error-summary-color-border: var(--navds-color-error-border);
2
+ --navds-error-summary-color-background: var(
3
+ --navds-semantic-color-component-background-light
4
+ );
5
+ --navds-error-summary-color-border: var(
6
+ --navds-semantic-color-feedback-danger-border
7
+ );
4
8
  }
5
9
 
6
10
  .navds-error-summary {
package/form/radio-checkbox.css CHANGED
@@ -1,12 +1,26 @@
1
1
  :root {
2
- --navds-radio-checkbox-color-background: var(--navds-color-white);
3
- --navds-radio-checkbox-color-background-hover: var(--navds-color-blue-10);
4
- --navds-radio-checkbox-color-background-checked: var(--navds-color-blue-50);
5
- --navds-radio-checkbox-color-shadow: var(--navds-color-gray-60);
6
- --navds-radio-checkbox-color-shadow-hover: var(--navds-color-blue-50);
7
- --navds-radio-checkbox-color-shadow-checked: var(--navds-color-blue-50);
8
- --navds-radio-checkbox-color-shadow-error: var(--navds-color-red-50);
9
- --navds-radio-checkbox-color-label-hover: var(--navds-color-blue-50);
2
+ --navds-radio-checkbox-color-background: var(
3
+ --navds-semantic-color-canvas-background-light
4
+ );
5
+ --navds-radio-checkbox-color-background-hover: var(
6
+ --navds-semantic-color-interaction-primary-hover-subtle
7
+ );
8
+ --navds-radio-checkbox-color-background-checked: var(
9
+ --navds-semantic-color-interaction-primary
10
+ );
11
+ --navds-radio-checkbox-color-shadow: var(--navds-semantic-color-border);
12
+ --navds-radio-checkbox-color-shadow-hover: var(
13
+ --navds-semantic-color-interaction-primary
14
+ );
15
+ --navds-radio-checkbox-color-shadow-checked: var(
16
+ --navds-semantic-color-interaction-primary
17
+ );
18
+ --navds-radio-checkbox-color-shadow-error: var(
19
+ --navds-semantic-color-interaction-danger
20
+ );
21
+ --navds-radio-checkbox-color-label-hover: var(
22
+ --navds-semantic-color-interaction-primary
23
+ );
10
24
  }
11
25
 
12
26
  .navds-checkbox,
@@ -94,7 +108,7 @@
94
108
  }
95
109
 
96
110
  .navds-checkbox__input:checked + .navds-checkbox__label::before {
97
- background-image: var(--navds-checkmark-image-white);
111
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
98
112
  background-position: 6px center;
99
113
  background-repeat: no-repeat;
100
114
  background-size: 13px;
package/form/search-field.css CHANGED
@@ -1,7 +1,13 @@
1
1
  :root {
2
- --navds-search-field-color-shadow-error: var(--navds-color-red-50);
3
- --navds-search-field-color-border-error: var(--navds-color-red-50);
4
- --navds-search-field-color-clearbutton-border: var(--navds-color-gray-60);
2
+ --navds-search-field-color-shadow-error: var(
3
+ --navds-semantic-color-interaction-danger
4
+ );
5
+ --navds-search-field-color-border-error: var(
6
+ --navds-semantic-color-interaction-danger
7
+ );
8
+ --navds-search-field-color-clearbutton-border: var(
9
+ --navds-semantic-color-border
10
+ );
5
11
  }
6
12
 
7
13
  .navds-search-field__input-wrapper {
package/form/select.css CHANGED
@@ -1,9 +1,22 @@
1
1
  :root {
2
- --navds-select-color-background: var(--navds-color-white);
3
- --navds-select-color-border: var(--navds-color-gray-60);
4
- --navds-select-color-border-hover: var(--navds-color-blue-50);
5
- --navds-select-color-border-error: var(--navds-color-red-50);
6
- --navds-select-color-shadow-error: var(--navds-color-red-50);
2
+ --navds-select-color-background: var(
3
+ --navds-semantic-color-component-background-light
4
+ );
5
+ --navds-select-color-border: var(--navds-semantic-color-border);
6
+ --navds-select-color-border-hover: var(
7
+ --navds-semantic-color-interaction-primary
8
+ );
9
+ --navds-select-color-border-error: var(
10
+ --navds-semantic-color-interaction-danger
11
+ );
12
+ --navds-select-color-shadow-error: var(
13
+ --navds-semantic-color-interaction-danger
14
+ );
15
+ --navds-select-color-border-disabled: var(--navds-global-color-gray-400);
16
+ --navds-select-color-background-disabled: var(
17
+ --navds-semantic-color-component-background-alternate
18
+ );
19
+ --navds-select-color-text-disabled: var(--navds-semantic-color-text);
7
20
  }
8
21
 
9
22
  .navds-select__input {
package/form/text-field.css CHANGED
@@ -1,9 +1,22 @@
1
1
  :root {
2
- --navds-text-field-color-background: var(--navds-color-white);
3
- --navds-text-field-color-border: var(--navds-color-gray-60);
4
- --navds-text-field-color-border-hover: var(--navds-color-blue-50);
5
- --navds-text-field-color-border-error: var(--navds-color-red-50);
6
- --navds-text-field-color-shadow-error: var(--navds-color-red-50);
2
+ --navds-text-field-color-background: var(
3
+ --navds-semantic-color-component-background-light
4
+ );
5
+ --navds-text-field-color-border: var(--navds-semantic-color-border);
6
+ --navds-text-field-color-border-hover: var(
7
+ --navds-semantic-color-interaction-primary
8
+ );
9
+ --navds-text-field-color-border-error: var(
10
+ --navds-semantic-color-interaction-danger
11
+ );
12
+ --navds-text-field-color-shadow-error: var(
13
+ --navds-semantic-color-interaction-danger
14
+ );
15
+ --navds-text-field-color-border-disabled: var(--navds-global-color-gray-400);
16
+ --navds-text-field-color-background-disabled: var(
17
+ --navds-semantic-color-component-background-alternate
18
+ );
19
+ --navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
7
20
  }
8
21
 
9
22
  .navds-text-field__input {
package/form/textarea.css CHANGED
@@ -1,11 +1,26 @@
1
1
  :root {
2
- --navds-textarea-color-background: var(--navds-color-white);
3
- --navds-textarea-color-border: var(--navds-color-gray-60);
4
- --navds-textarea-color-border-hover: var(--navds-color-blue-50);
5
- --navds-textarea-color-border-error: var(--navds-color-red-50);
6
- --navds-textarea-color-shadow-error: var(--navds-color-red-50);
7
- --navds-textarea-color-counter-text: var(--navds-color-gray-40);
8
- --navds-textarea-color-counter-text-error: var(--navds-color-red-50);
2
+ --navds-textarea-color-background: var(
3
+ --navds-semantic-color-component-background-light
4
+ );
5
+ --navds-textarea-color-border: var(--navds-semantic-color-border);
6
+ --navds-textarea-color-border-hover: var(
7
+ --navds-semantic-color-interaction-primary
8
+ );
9
+ --navds-textarea-color-border-error: var(
10
+ --navds-semantic-color-interaction-danger
11
+ );
12
+ --navds-textarea-color-shadow-error: var(
13
+ --navds-semantic-color-interaction-danger
14
+ );
15
+ --navds-textarea-color-counter-text: var(--navds-global-color-gray-400);
16
+ --navds-textarea-color-counter-text-error: var(
17
+ --navds-semantic-color-interaction-danger
18
+ );
19
+ --navds-textarea-color-text-disabled: var(--navds-semantic-color-text);
20
+ --navds-textarea-color-border-disabled: var(--navds-global-color-gray-400);
21
+ --navds-textarea-color-background-disabled: var(
22
+ --navds-semantic-color-component-background-alternate
23
+ );
9
24
  }
10
25
 
11
26
  .navds-textarea__wrapper {
@@ -23,7 +38,7 @@
23
38
  width: 100%;
24
39
  transition: height 0.1s ease-out;
25
40
  display: block;
26
- min-height: 48px;
41
+ min-height: 3rem;
27
42
  }
28
43
 
29
44
  .navds-textarea--counter {
@@ -41,7 +56,7 @@
41
56
 
42
57
  .navds-form-field--small .navds-textarea__input {
43
58
  padding: var(--navds-spacing-1);
44
- min-height: 32px;
59
+ min-height: 2rem;
45
60
  }
46
61
 
47
62
  .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
package/grid.css CHANGED
@@ -5,12 +5,12 @@
5
5
  .navds-grid {
6
6
  display: grid;
7
7
  grid-template-columns: repeat(12, minmax(0, 1fr));
8
- grid-gap: var(--navds-grid-gutter-small);
8
+ grid-gap: var(--navds-spacing-4);
9
9
  }
10
10
 
11
11
  @media (min-width: 448px) {
12
12
  .navds-grid {
13
- grid-gap: var(--navds-grid-gutter-medium-and-larger);
13
+ grid-gap: var(--navds-spacing-6);
14
14
  }
15
15
  }
16
16
 
package/guide-panel.css CHANGED
@@ -1,7 +1,11 @@
1
1
  :root {
2
- --navds-guide-panel-color-background: var(--navds-color-background);
3
- --navds-guide-panel-color-border: var(--navds-color-blue-40);
4
- --navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
2
+ --navds-guide-panel-color-background: var(
3
+ --navds-semantic-color-component-background-light
4
+ );
5
+ --navds-guide-panel-color-border: var(--navds-global-color-blue-400);
6
+ --navds-guide-panel-color-illustration-background: var(
7
+ --navds-global-color-blue-200
8
+ );
5
9
  }
6
10
 
7
11
  /**
package/help-text.css CHANGED
@@ -1,13 +1,25 @@
1
1
  :root {
2
2
  --navds-help-text-color-button-background: transparent;
3
- --navds-help-text-color-icon: var(--navds-color-blue-50);
4
- --navds-help-text-color-icon-hover: var(--navds-color-white);
5
- --navds-help-text-color-icon-background-hover: var(--navds-color-blue-50);
6
- --navds-help-text-color-icon-shadow-hover: var(--navds-color-blue-50);
7
- --navds-help-text-color-icon-focus: var(--navds-color-white);
8
- --navds-help-text-color-icon-background-focus: var(--navds-color-blue-50);
9
- --navds-help-text-color-icon-shadow-focus: var(--navds-color-blue-80);
10
- --navds-help-text-color-popover-background: var(--navds-color-lightblue-10);
3
+ --navds-help-text-color-icon: var(--navds-semantic-color-interaction-primary);
4
+ --navds-help-text-color-icon-hover: var(
5
+ --navds-semantic-color-component-background-light
6
+ );
7
+ --navds-help-text-color-icon-background-hover: var(
8
+ --navds-semantic-color-interaction-primary
9
+ );
10
+ --navds-help-text-color-icon-shadow-hover: var(
11
+ --navds-semantic-color-interaction-primary
12
+ );
13
+ --navds-help-text-color-icon-focus: var(
14
+ --navds-semantic-color-component-background-light
15
+ );
16
+ --navds-help-text-color-icon-background-focus: var(
17
+ --navds-semantic-color-interaction-primary
18
+ );
19
+ --navds-help-text-color-icon-shadow-focus: var(--navds-semantic-color-focus);
20
+ --navds-help-text-color-popover-background: var(
21
+ --navds-semantic-color-feedback-info-background
22
+ );
11
23
  }
12
24
 
13
25
  .navds-help-text__button {
package/link-panel.css CHANGED
@@ -1,7 +1,9 @@
1
1
  :root {
2
- --navds-link-panel-color-text: var(--navds-color-gray-90);
3
- --navds-link-panel-color-border-hover: var(--navds-color-blue-50);
4
- --navds-link-panel-color-title-hover: var(--navds-color-text-link);
2
+ --navds-link-panel-color-text: var(--navds-semantic-color-text);
3
+ --navds-link-panel-color-border-hover: var(
4
+ --navds-semantic-color-interaction-primary
5
+ );
6
+ --navds-link-panel-color-title-hover: var(--navds-semantic-color-link);
5
7
  }
6
8
 
7
9
  .navds-link-panel {
@@ -19,7 +21,7 @@
19
21
  }
20
22
 
21
23
  .navds-link-panel:hover {
22
- box-shadow: var(--navds-shadow-hover);
24
+ box-shadow: var(--navds-shadow-card);
23
25
  border-color: var(--navds-link-panel-color-border-hover);
24
26
  }
25
27
 
package/link.css CHANGED
@@ -1,13 +1,13 @@
1
1
  :root {
2
- --navds-link-color-text: var(--navds-color-text-link);
3
- --navds-link-color-text-focus: var(--navds-color-text-inverse);
4
- --navds-link-color-text-active: var(--navds-color-text-inverse);
5
- --navds-link-color-background-focus: var(--navds-text-focus);
6
- --navds-link-color-background-active: var(--navds-text-focus);
7
- --navds-link-color-icon: var(--navds-color-text-link);
8
- --navds-link-color-icon-focus: var(--navds-color-text-inverse);
9
- --navds-link-color-on-info-background: var(--navds-color-text-primary);
10
- --navds-link-color-on-error-background: var(--navds-color-text-primary);
2
+ --navds-link-color-text: var(--navds-semantic-color-link);
3
+ --navds-link-color-text-focus: var(--navds-semantic-color-text-inverted);
4
+ --navds-link-color-text-active: var(--navds-semantic-color-text-inverted);
5
+ --navds-link-color-background-focus: var(--navds-semantic-color-focus);
6
+ --navds-link-color-background-active: var(--navds-semantic-color-focus);
7
+ --navds-link-color-icon: var(--navds-semantic-color-link);
8
+ --navds-link-color-icon-focus: var(--navds-semantic-color-text-inverted);
9
+ --navds-link-color-on-info-background: var(--navds-semantic-color-text);
10
+ --navds-link-color-on-error-background: var(--navds-semantic-color-text);
11
11
  }
12
12
 
13
13
  .navds-link {
@@ -36,7 +36,7 @@
36
36
  color: var(--navds-link-color-text-focus);
37
37
  text-decoration: none;
38
38
  background-color: var(--navds-link-color-background-focus);
39
- box-shadow: var(--navds-text-shadow);
39
+ box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
40
40
  }
41
41
 
42
42
  .navds-link:active {
@@ -44,7 +44,7 @@
44
44
  color: var(--navds-link-color-text-active);
45
45
  text-decoration: none;
46
46
  background-color: var(--navds-link-color-background-active);
47
- box-shadow: var(--navds-text-shadow);
47
+ box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
48
48
  }
49
49
 
50
50
  .navds-link svg {
package/loader.css CHANGED
@@ -1,9 +1,15 @@
1
1
  :root {
2
- --navds-loader-color-foreground: var(--navds-color-gray-40);
3
- --navds-loader-color-background: var(--navds-color-gray-10);
4
- --navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
5
- --navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
6
- --navds-loader-color-inverted-foreground: var(--navds-color-white);
2
+ --navds-loader-color-foreground: var(--navds-global-color-gray-400);
3
+ --navds-loader-color-background: var(
4
+ --navds-semantic-color-component-background-alternate
5
+ );
6
+ --navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
7
+ --navds-loader-color-interaction-foreground: var(
8
+ --navds-semantic-color-interaction-primary
9
+ );
10
+ --navds-loader-color-inverted-foreground: var(
11
+ --navds-semantic-color-component-background-light
12
+ );
7
13
  --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
8
14
  --navds-loader-color-transparent-background: transparent;
9
15
  --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
package/modal.css CHANGED
@@ -1,6 +1,8 @@
1
1
  :root {
2
- --navds-modal-color-background: var(--navds-color-background);
3
- --navds-modal-color-overlay: var(--navds-color-modal-overlay);
2
+ --navds-modal-color-background: var(
3
+ --navds-semantic-color-component-background-light
4
+ );
5
+ --navds-modal-color-overlay: rgba(38, 38, 38, 0.7);
4
6
  }
5
7
 
6
8
  .ReactModal__Body--open {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "0.11.5",
3
+ "version": "0.12.3",
4
4
  "private": false,
5
5
  "description": "Css for NAV Designsystem components",
6
6
  "author": "NAV Designsystem team",
@@ -21,11 +21,11 @@
21
21
  "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
22
22
  },
23
23
  "devDependencies": {
24
- "@navikt/ds-tokens": "^0.6.3",
24
+ "@navikt/ds-tokens": "^0.7.0",
25
25
  "normalize.css": "^8.0.1",
26
26
  "postcss": "^8.3.6",
27
27
  "postcss-cli": "^8.3.1",
28
28
  "postcss-import": "^14.0.2"
29
29
  },
30
- "gitHead": "f6c4f853afefa13244fe3f9bd55126d7caaa0b70"
30
+ "gitHead": "815b07c3ffa03ce873e135ae3480cc7a9c7b3f15"
31
31
  }
package/page-header.css CHANGED
@@ -1,8 +1,14 @@
1
1
  :root {
2
- --navds-page-header-color-background: var(--navds-color-background);
3
- --navds-page-header-color-shadow-situation: var(--navds-color-orange-40);
4
- --navds-page-header-color-shadow-product: var(--navds-color-green-40);
5
- --navds-page-header-color-shadow-guide: var(--navds-color-deepblue-40);
2
+ --navds-page-header-color-background: var(
3
+ --navds-semantic-color-component-background-light
4
+ );
5
+ --navds-page-header-color-shadow-situation: var(
6
+ --navds-global-color-orange-400
7
+ );
8
+ --navds-page-header-color-shadow-product: var(--navds-global-color-green-400);
9
+ --navds-page-header-color-shadow-guide: var(
10
+ --navds-global-color-deepblue-400
11
+ );
6
12
  }
7
13
 
8
14
  .navds-page-header {
package/panel.css CHANGED
@@ -1,12 +1,14 @@
1
1
  :root {
2
- --navds-panel-color-background: var(--navds-color-white);
3
- --navds-panel-color-border: var(--navds-color-border);
2
+ --navds-panel-color-background: var(
3
+ --navds-semantic-color-component-background-light
4
+ );
5
+ --navds-panel-color-border: var(--navds-semantic-color-border-muted);
4
6
  }
5
7
 
6
8
  .navds-panel {
7
9
  background-color: var(--navds-panel-color-background);
8
10
  padding: var(--navds-spacing-4);
9
- border-radius: var(--navds-border-radius);
11
+ border-radius: 4px;
10
12
  border: 1px solid transparent;
11
13
  }
12
14
 
package/popover.css CHANGED
@@ -1,13 +1,14 @@
1
1
  :root {
2
- --navds-popover-color-background: var(--navds-color-background);
3
- --navds-popover-color-border: var(--navds-color-gray-40);
4
- --navds-popover-color-shadow: var(--navds-color-gray-20);
2
+ --navds-popover-color-background: var(
3
+ --navds-semantic-color-component-background-light
4
+ );
5
+ --navds-popover-color-border: var(--navds-semantic-color-border-muted);
5
6
  }
6
7
 
7
8
  .navds-popover {
8
9
  z-index: var(--navds-z-index-popover);
9
10
  background-color: var(--navds-popover-color-background);
10
- box-shadow: 0 2px 4px 0 var(--navds-popover-color-shadow);
11
+ box-shadow: var(--navds-shadow-popover);
11
12
  border: 1px solid;
12
13
  border-color: var(--navds-popover-color-border);
13
14
  border-radius: 4px;
package/speech-bubble.css CHANGED
@@ -1,11 +1,14 @@
1
1
  :root {
2
- --navds-speechbubble-color-background: var(--navds-color-gray-10);
3
- --navds-speechbubble-color-shadow: var(--navds-color-gray-20);
4
- --navds-speechbubble-color-illustration: var(--navds-color-darkgray);
2
+ --navds-speechbubble-color-background: var(
3
+ --navds-semantic-color-component-background-alternate
4
+ );
5
+ --navds-speechbubble-color-illustration: var(--navds-semantic-color-text);
5
6
  --navds-speechbubble-color-illustration-background: var(
6
- --navds-color-gray-20
7
+ --navds-semantic-color-canvas-background
8
+ );
9
+ --navds-speechbubble-color-detail-text: var(
10
+ --navds-semantic-color-text-muted
7
11
  );
8
- --navds-speechbubble-color-detail-text: var(--navds-color-gray-60);
9
12
  }
10
13
 
11
14
  .navds-speechbubble {
@@ -52,7 +55,7 @@
52
55
 
53
56
  .navds-speechbubble__bubble {
54
57
  padding: 1rem;
55
- box-shadow: 0 2px 4px 0 var(--navds-speechbubble-color-shadow);
58
+ box-shadow: var(--navds-shadow-popover);
56
59
  width: fit-content;
57
60
  max-width: 37.5rem;
58
61
  background-color: var(--navds-speechbubble-color-background);
package/table.css CHANGED
@@ -1,3 +1,7 @@
1
+ :root {
2
+ --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
3
+ }
4
+
1
5
  .navds-table {
2
6
  border-collapse: collapse;
3
7
  width: 100%;
@@ -20,7 +24,7 @@
20
24
  display: table-cell;
21
25
  padding: var(--navds-spacing-4);
22
26
  text-align: left;
23
- border-bottom: var(--navds-border-default);
27
+ border-bottom: 1px solid var(--navds-table-cell-color-border);
24
28
  }
25
29
 
26
30
  .navds-table--small .navds-table__cell {
package/tag.css CHANGED
@@ -1,18 +1,32 @@
1
1
  :root {
2
- --navds-tag-color-border: var(--navds-color-gray-40);
3
- --navds-tag-color-background: var(--navds-color-gray-10);
4
- --navds-tag-color-info-background: var(--navds-color-tag-info-background);
5
- --navds-tag-color-info-border: var(--navds-color-tag-info-border);
2
+ --navds-tag-color-border: var(--navds-semantic-color-border-muted);
3
+ --navds-tag-color-background: var(
4
+ --navds-semantic-color-component-background-alternate
5
+ );
6
+ --navds-tag-color-info-background: var(
7
+ --navds-semantic-color-feedback-info-background
8
+ );
9
+ --navds-tag-color-info-border: var(
10
+ --navds-semantic-color-feedback-info-border
11
+ );
6
12
  --navds-tag-color-warning-background: var(
7
- --navds-color-tag-warning-background
13
+ --navds-semantic-color-feedback-warning-background
14
+ );
15
+ --navds-tag-color-warning-border: var(
16
+ --navds-semantic-color-feedback-warning-border
8
17
  );
9
- --navds-tag-color-warning-border: var(--navds-color-tag-warning-border);
10
18
  --navds-tag-color-success-background: var(
11
- --navds-color-tag-success-background
19
+ --navds-semantic-color-feedback-success-background
20
+ );
21
+ --navds-tag-color-success-border: var(
22
+ --navds-semantic-color-feedback-success-border
23
+ );
24
+ --navds-tag-color-error-background: var(
25
+ --navds-semantic-color-feedback-danger-background
26
+ );
27
+ --navds-tag-color-error-border: var(
28
+ --navds-semantic-color-feedback-danger-border
12
29
  );
13
- --navds-tag-color-success-border: var(--navds-color-tag-success-border);
14
- --navds-tag-color-error-background: var(--navds-color-tag-error-background);
15
- --navds-tag-color-error-border: var(--navds-color-tag-error-border);
16
30
  }
17
31
 
18
32
  .navds-tag {