@navikt/ds-css 1.5.9-next.1 → 1.5.10

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 (44) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/accordion.css +19 -11
  3. package/alert.css +28 -14
  4. package/baseline/Source-Sans-Pro-600.css +7 -0
  5. package/baseline/Source-Sans-Pro-italic.css +7 -0
  6. package/baseline/Source-Sans-Pro-regular.css +7 -0
  7. package/baseline/baseline.css +9 -7
  8. package/button.css +105 -64
  9. package/chat.css +23 -16
  10. package/chips.css +28 -28
  11. package/content-container.css +2 -2
  12. package/date.css +40 -39
  13. package/dist/index.css +976 -916
  14. package/form/confirmation-panel.css +19 -9
  15. package/form/error-summary.css +18 -12
  16. package/form/fieldset.css +2 -2
  17. package/form/form.css +2 -2
  18. package/form/radio-checkbox.css +34 -43
  19. package/form/search.css +37 -30
  20. package/form/select.css +21 -10
  21. package/form/switch.css +35 -20
  22. package/form/text-field.css +35 -21
  23. package/form/textarea.css +30 -31
  24. package/grid.css +2 -2
  25. package/guide-panel.css +19 -14
  26. package/help-text.css +18 -7
  27. package/link-panel.css +14 -7
  28. package/link.css +23 -10
  29. package/loader.css +27 -16
  30. package/modal.css +17 -10
  31. package/package.json +2 -2
  32. package/pagination.css +18 -12
  33. package/panel.css +10 -4
  34. package/popover.css +15 -9
  35. package/read-more.css +10 -10
  36. package/stepper.css +20 -20
  37. package/table.css +32 -22
  38. package/tabs.css +13 -13
  39. package/tag.css +57 -43
  40. package/toggle-group.css +27 -16
  41. package/tooltip.css +13 -13
  42. package/typography.css +60 -54
  43. package/baseline/fonts.css +0 -27
  44. package/tokens.json +0 -302
package/tag.css CHANGED
@@ -1,10 +1,24 @@
1
+ :root,
2
+ :host {
3
+ --navds-tag-color-border: var(--navds-semantic-color-border-muted);
4
+ --navds-tag-color-background: var(--navds-semantic-color-component-background-alternate);
5
+ --navds-tag-color-info-background: var(--navds-semantic-color-feedback-info-background);
6
+ --navds-tag-color-info-border: var(--navds-semantic-color-feedback-info-border);
7
+ --navds-tag-color-warning-background: var(--navds-semantic-color-feedback-warning-background);
8
+ --navds-tag-color-warning-border: var(--navds-semantic-color-feedback-warning-border);
9
+ --navds-tag-color-success-background: var(--navds-semantic-color-feedback-success-background);
10
+ --navds-tag-color-success-border: var(--navds-semantic-color-feedback-success-border);
11
+ --navds-tag-color-error-background: var(--navds-semantic-color-feedback-danger-background);
12
+ --navds-tag-color-error-border: var(--navds-semantic-color-feedback-danger-border);
13
+ }
14
+
1
15
  .navds-tag {
2
16
  border: 1px solid;
3
- border-radius: var(--a-border-radius-small);
17
+ border-radius: var(--navds-border-radius-small);
4
18
  display: inline-flex;
5
19
  align-items: center;
6
20
  justify-content: center;
7
- padding: var(--a-spacing-05) var(--a-spacing-2);
21
+ padding: 0.125rem var(--navds-spacing-2);
8
22
  min-height: 32px;
9
23
  line-height: 1;
10
24
  }
@@ -16,101 +30,101 @@
16
30
 
17
31
  .navds-tag--xsmall {
18
32
  min-height: 20px;
19
- padding: 0 var(--a-spacing-1);
33
+ padding: 0 var(--navds-spacing-1);
20
34
  }
21
35
 
22
36
  .navds-tag--error {
23
- border-color: var(--ac-tag-error-border, var(--a-border-danger));
24
- background-color: var(--ac-tag-error-bg, var(--a-surface-danger-subtle));
25
- color: var(--ac-tag-error-text, var(--a-text-default));
37
+ border-color: var(--ac-tag-error-border, var(--navds-global-color-red-500));
38
+ background-color: var(--ac-tag-error-bg, var(--navds-global-color-red-50));
39
+ color: var(--ac-tag-error-text, var(--navds-global-color-gray-900));
26
40
  }
27
41
 
28
42
  .navds-tag--error-filled {
29
43
  border-color: transparent;
30
- background-color: var(--ac-tag-error-filled-bg, var(--a-surface-danger));
31
- color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
44
+ background-color: var(--ac-tag-error-filled-bg, var(--navds-global-color-red-500));
45
+ color: var(--ac-tag-error-filled-text, var(--navds-global-color-white));
32
46
  }
33
47
 
34
48
  .navds-tag--success {
35
- border-color: var(--ac-tag-success-border, var(--a-border-success));
36
- background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
37
- color: var(--ac-tag-success-text, var(--a-text-default));
49
+ border-color: var(--ac-tag-success-border, var(--navds-global-color-green-500));
50
+ background-color: var(--ac-tag-success-bg, var(--navds-global-color-green-50));
51
+ color: var(--ac-tag-success-text, var(--navds-global-color-gray-900));
38
52
  }
39
53
 
40
54
  .navds-tag--success-filled {
41
55
  border-color: transparent;
42
- background-color: var(--ac-tag-success-filled-bg, var(--a-surface-success));
43
- color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
56
+ background-color: var(--ac-tag-success-filled-bg, var(--navds-global-color-green-500));
57
+ color: var(--ac-tag-success-filled-text, var(--navds-global-color-white));
44
58
  }
45
59
 
46
60
  .navds-tag--warning {
47
- border-color: var(--ac-tag-warning-border, var(--a-border-warning));
48
- background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
49
- color: var(--ac-tag-warning-text, var(--a-text-default));
61
+ border-color: var(--ac-tag-warning-border, var(--navds-global-color-orange-600));
62
+ background-color: var(--ac-tag-warning-bg, var(--navds-global-color-orange-50));
63
+ color: var(--ac-tag-warning-text, var(--navds-global-color-gray-900));
50
64
  }
51
65
 
52
66
  .navds-tag--warning-filled {
53
67
  border-color: transparent;
54
- background-color: var(--ac-tag-warning-filled-bg, var(--a-surface-warning));
55
- color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
68
+ background-color: var(--ac-tag-warning-filled-bg, var(--navds-global-color-orange-500));
69
+ color: var(--ac-tag-warning-filled-text, var(--navds-global-color-gray-900));
56
70
  }
57
71
 
58
72
  .navds-tag--info {
59
- border-color: var(--ac-tag-info-border, var(--a-border-info));
60
- background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
61
- color: var(--ac-tag-info-text, var(--a-text-default));
73
+ border-color: var(--ac-tag-info-border, var(--navds-global-color-lightblue-700));
74
+ background-color: var(--ac-tag-info-bg, var(--navds-global-color-lightblue-50));
75
+ color: var(--ac-tag-info-text, var(--navds-global-color-gray-900));
62
76
  }
63
77
 
64
78
  .navds-tag--info-filled {
65
79
  border-color: transparent;
66
- background-color: var(--ac-tag-info-filled-bg, var(--a-surface-info));
67
- color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
80
+ background-color: var(--ac-tag-info-filled-bg, var(--navds-global-color-lightblue-500));
81
+ color: var(--ac-tag-info-filled-text, var(--navds-global-color-gray-900));
68
82
  }
69
83
 
70
84
  .navds-tag--neutral {
71
- border-color: var(--ac-tag-neutral-border, var(--a-border-default));
72
- background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
73
- color: var(--ac-tag-neutral-text, var(--a-text-default));
85
+ border-color: var(--ac-tag-neutral-border, var(--navds-global-color-gray-500));
86
+ background-color: var(--ac-tag-neutral-bg, var(--navds-global-color-gray-100));
87
+ color: var(--ac-tag-neutral-text, var(--navds-global-color-gray-900));
74
88
  }
75
89
 
76
90
  .navds-tag--neutral-filled {
77
91
  border-color: transparent;
78
- background-color: var(--ac-tag-neutral-filled-bg, var(--a-surface-neutral));
79
- color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
92
+ background-color: var(--ac-tag-neutral-filled-bg, var(--navds-global-color-gray-800));
93
+ color: var(--ac-tag-neutral-filled-text, var(--navds-global-color-white));
80
94
  }
81
95
 
82
96
  .navds-tag--alt1 {
83
- border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
84
- background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
85
- color: var(--ac-tag-alt-1-text, var(--a-text-default));
97
+ border-color: var(--ac-tag-alt1-border, var(--navds-global-color-purple-400));
98
+ background-color: var(--ac-tag-alt1-bg, var(--navds-global-color-purple-100));
99
+ color: var(--ac-tag-alt1-text, var(--navds-global-color-gray-900));
86
100
  }
87
101
 
88
102
  .navds-tag--alt1-filled {
89
103
  border-color: transparent;
90
- background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
91
- color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
104
+ background-color: var(--ac-tag-alt1-filled-bg, var(--navds-global-color-purple-400));
105
+ color: var(--ac-tag-alt1-filled-text, var(--navds-global-color-white));
92
106
  }
93
107
 
94
108
  .navds-tag--alt2 {
95
- border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
96
- background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
97
- color: var(--ac-tag-alt-2-text, var(--a-text-default));
109
+ border-color: var(--ac-tag-alt2-border, var(--navds-global-color-limegreen-500));
110
+ background-color: var(--ac-tag-alt2-bg, var(--navds-global-color-limegreen-100));
111
+ color: var(--ac-tag-alt2-text, var(--navds-global-color-gray-900));
98
112
  }
99
113
 
100
114
  .navds-tag--alt2-filled {
101
115
  border-color: transparent;
102
- background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
103
- color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
116
+ background-color: var(--ac-tag-alt2-filled-bg, var(--navds-global-color-limegreen-400));
117
+ color: var(--ac-tag-alt2-filled-text, var(--navds-global-color-gray-900));
104
118
  }
105
119
 
106
120
  .navds-tag--alt3 {
107
- border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
108
- background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
109
- color: var(--ac-tag-alt-3-text, var(--a-text-default));
121
+ border-color: var(--ac-tag-alt3-border, var(--navds-global-color-deepblue-400));
122
+ background-color: var(--ac-tag-alt3-bg, var(--navds-global-color-deepblue-100));
123
+ color: var(--ac-tag-alt3-text, var(--navds-global-color-gray-900));
110
124
  }
111
125
 
112
126
  .navds-tag--alt3-filled {
113
127
  border-color: transparent;
114
- background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
115
- color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
128
+ background-color: var(--ac-tag-alt3-filled-bg, var(--navds-global-color-deepblue-500));
129
+ color: var(--ac-tag-alt3-filled-text, var(--navds-global-color-white));
116
130
  }
package/toggle-group.css CHANGED
@@ -1,15 +1,26 @@
1
+ :root,
2
+ :host {
3
+ --navds-toggle-group-color-background: var(--navds-semantic-color-component-background-light);
4
+ --navds-toggle-group-color-text: var(--navds-semantic-color-text);
5
+ --navds-toggle-group-color-border: var(--navds-semantic-color-divider);
6
+ --navds-toggle-group-color-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
7
+ --navds-toggle-group-color-text-hover: var(--navds-semantic-color-interaction-primary);
8
+ --navds-toggle-group-color-background-pressed: var(--navds-semantic-color-interaction-primary-selected);
9
+ --navds-toggle-group-color-text-pressed: var(--navds-semantic-color-text-inverted);
10
+ }
11
+
1
12
  .navds-toggle-group__wrapper {
2
13
  display: grid;
3
14
  justify-items: start;
4
- gap: var(--a-spacing-2);
15
+ gap: var(--navds-spacing-2);
5
16
  }
6
17
 
7
18
  .navds-toggle-group {
8
19
  border-radius: 7px; /* Custom value OK */
9
- background-color: var(--ac-toggle-group-bg, var(--a-surface-default));
10
- box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
11
- padding: calc(var(--a-spacing-1) + 1px);
12
- gap: var(--a-spacing-1);
20
+ background-color: var(--navds-toggle-group-color-background);
21
+ box-shadow: inset 0 0 0 1px var(--navds-toggle-group-color-border);
22
+ padding: calc(var(--navds-spacing-1) + 1px);
23
+ gap: var(--navds-spacing-1);
13
24
  display: inline-grid;
14
25
  grid-auto-flow: column;
15
26
  grid-auto-columns: 1fr;
@@ -19,34 +30,34 @@
19
30
  display: inline-flex;
20
31
  align-items: center;
21
32
  justify-content: center;
22
- padding: var(--a-spacing-3);
33
+ padding: var(--navds-spacing-3);
23
34
  min-height: 48px;
24
35
  border: none;
25
36
  cursor: pointer;
26
- background-color: var(--ac-toggle-group-button-bg, var(--a-surface-default));
27
- color: var(--ac-toggle-group-button-text, var(--a-text-default));
28
- border-radius: var(--a-border-radius-small);
37
+ background-color: var(--navds-toggle-group-color-background);
38
+ color: var(--navds-toggle-group-color-text);
39
+ border-radius: var(--navds-border-radius-small);
29
40
  min-width: fit-content;
30
41
  }
31
42
 
32
43
  .navds-toggle-group__button:hover {
33
- background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
34
- color: var(--ac-toggle-group-button-hover-text, var(--a-text-action));
44
+ background-color: var(--navds-toggle-group-color-background-hover);
45
+ color: var(--navds-toggle-group-color-text-hover);
35
46
  }
36
47
 
37
48
  .navds-toggle-group__button:focus {
38
49
  outline: none;
39
- box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
50
+ box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background), 0 0 0 4px var(--navds-semantic-color-focus);
40
51
  }
41
52
 
42
53
  .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
43
- box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
54
+ box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background-hover), 0 0 0 4px var(--navds-semantic-color-focus);
44
55
  }
45
56
 
46
57
  .navds-toggle-group__button-inner {
47
58
  display: flex;
48
59
  align-items: center;
49
- gap: var(--a-spacing-2);
60
+ gap: var(--navds-spacing-2);
50
61
  }
51
62
 
52
63
  .navds-toggle-group__button-inner > * {
@@ -55,8 +66,8 @@
55
66
 
56
67
  .navds-toggle-group__button[aria-pressed="true"],
57
68
  .navds-toggle-group__button[aria-checked="true"] {
58
- background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
59
- color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
69
+ background-color: var(--navds-toggle-group-color-background-pressed);
70
+ color: var(--navds-toggle-group-color-text-pressed);
60
71
  }
61
72
 
62
73
  .navds-toggle-group--small > .navds-toggle-group__button {
package/tooltip.css CHANGED
@@ -9,11 +9,11 @@
9
9
  }
10
10
 
11
11
  .navds-tooltip {
12
- z-index: var(--a-z-index-tooltip);
13
- background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
14
- color: var(--ac-tooltip-text, var(--a-text-on-inverted));
15
- border-radius: var(--a-border-radius-small);
16
- padding: 0 var(--a-spacing-2);
12
+ z-index: var(--navds-z-index-tooltip);
13
+ background-color: var(--navds-semantic-color-component-background-inverted);
14
+ color: var(--navds-semantic-color-text-inverted);
15
+ border-radius: var(--navds-border-radius-small);
16
+ padding: 0 var(--navds-spacing-2);
17
17
  align-items: center;
18
18
  filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
19
19
  display: flex;
@@ -29,22 +29,22 @@
29
29
  width: 7px;
30
30
  transform: rotate(45deg);
31
31
  z-index: -1;
32
- background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
32
+ background-color: var(--navds-semantic-color-component-background-inverted);
33
33
  position: absolute;
34
34
  }
35
35
 
36
36
  .navds-tooltip__keys {
37
- padding-bottom: var(--a-spacing-1);
37
+ padding-bottom: var(--navds-spacing-1);
38
38
  display: flex;
39
- gap: var(--a-spacing-1);
39
+ gap: var(--navds-spacing-1);
40
40
  }
41
41
 
42
42
  .navds-tooltip__key {
43
- font-family: var(--a-font-family);
44
- background-color: var(--ac-tooltip-key-bg, var(--a-surface-neutral));
45
- color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
46
- border-radius: var(--a-border-radius-small);
47
- padding: 0 var(--a-spacing-1);
43
+ font-family: var(--navds-font-family);
44
+ background-color: var(--navds-global-color-gray-700);
45
+ color: var(--navds-semantic-color-text-inverted);
46
+ border-radius: var(--navds-border-radius-small);
47
+ padding: 0 var(--navds-spacing-1);
48
48
  min-width: 18px;
49
49
  height: 18px;
50
50
  display: inline-flex;
package/typography.css CHANGED
@@ -1,177 +1,183 @@
1
+ :root,
2
+ :host,
3
+ [data-theme="light"] {
4
+ --navds-error-message-color-text: var(--navds-semantic-color-feedback-danger-text);
5
+ }
6
+
1
7
  [data-theme="dark"] {
2
- --ac-typo-error-text: var(--a-red-300);
8
+ --navds-error-message-color-text: var(--navds-global-color-red-300);
3
9
  }
4
10
 
5
11
  /* Heading */
6
12
  .navds-heading {
7
- font-weight: var(--a-font-weight-bold);
13
+ font-weight: var(--navds-font-weight-bold);
8
14
  margin: 0;
9
15
  }
10
16
 
11
17
  .navds-heading--xlarge {
12
- font-size: var(--a-font-size-heading-2xlarge);
18
+ font-size: var(--navds-font-size-heading-2xlarge);
13
19
  letter-spacing: -0.01em;
14
- line-height: var(--a-font-line-height-heading-2xlarge);
20
+ line-height: var(--navds-font-line-height-heading-2xlarge);
15
21
  }
16
22
 
17
23
  .navds-heading--xlarge.navds-typo--spacing {
18
- margin-bottom: var(--a-spacing-5);
24
+ margin-bottom: var(--navds-spacing-5);
19
25
  }
20
26
 
21
27
  .navds-heading--large {
22
- font-size: var(--a-font-size-heading-xlarge);
28
+ font-size: var(--navds-font-size-heading-xlarge);
23
29
  letter-spacing: -0.008em;
24
- line-height: var(--a-font-line-height-heading-xlarge);
30
+ line-height: var(--navds-font-line-height-heading-xlarge);
25
31
  }
26
32
 
27
33
  .navds-heading--large.navds-typo--spacing {
28
- margin-bottom: var(--a-spacing-4);
34
+ margin-bottom: var(--navds-spacing-4);
29
35
  }
30
36
 
31
37
  /* Mobile scale */
32
38
  @media (max-width: 480px) {
33
39
  .navds-heading--xlarge {
34
- font-size: var(--a-font-size-heading-xlarge);
40
+ font-size: var(--navds-font-size-heading-xlarge);
35
41
  letter-spacing: -0.008em;
36
- line-height: var(--a-font-line-height-heading-xlarge);
42
+ line-height: var(--navds-font-line-height-heading-xlarge);
37
43
  }
38
44
 
39
45
  .navds-heading--xlarge.navds-typo--spacing {
40
- margin-bottom: var(--a-spacing-4);
46
+ margin-bottom: var(--navds-spacing-4);
41
47
  }
42
48
 
43
49
  .navds-heading--large {
44
- font-size: var(--a-font-size-heading-large);
50
+ font-size: var(--navds-font-size-heading-large);
45
51
  letter-spacing: -0.004em;
46
- line-height: var(--a-font-line-height-heading-large);
52
+ line-height: var(--navds-font-line-height-heading-large);
47
53
  }
48
54
 
49
55
  .navds-heading--large.navds-typo--spacing {
50
- margin-bottom: var(--a-spacing-3);
56
+ margin-bottom: var(--navds-spacing-3);
51
57
  }
52
58
  }
53
59
 
54
60
  .navds-heading--medium {
55
- font-size: var(--a-font-size-heading-medium);
61
+ font-size: var(--navds-font-size-heading-medium);
56
62
  letter-spacing: -0.002em;
57
- line-height: var(--a-font-line-height-heading-medium);
63
+ line-height: var(--navds-font-line-height-heading-medium);
58
64
  }
59
65
 
60
66
  .navds-heading--medium.navds-typo--spacing {
61
- margin-bottom: var(--a-spacing-3);
67
+ margin-bottom: var(--navds-spacing-3);
62
68
  }
63
69
 
64
70
  .navds-heading--small {
65
- font-size: var(--a-font-size-heading-small);
71
+ font-size: var(--navds-font-size-heading-small);
66
72
  letter-spacing: -0.001em;
67
- line-height: var(--a-font-line-height-heading-small);
73
+ line-height: var(--navds-font-line-height-heading-small);
68
74
  }
69
75
 
70
76
  .navds-heading--small.navds-typo--spacing {
71
- margin-bottom: var(--a-spacing-3);
77
+ margin-bottom: var(--navds-spacing-3);
72
78
  }
73
79
 
74
80
  .navds-heading--xsmall {
75
- font-size: var(--a-font-size-heading-xsmall);
81
+ font-size: var(--navds-font-size-heading-xsmall);
76
82
  letter-spacing: -0.001em;
77
- line-height: var(--a-font-line-height-heading-xsmall);
83
+ line-height: var(--navds-font-line-height-heading-xsmall);
78
84
  }
79
85
 
80
86
  .navds-heading--xsmall.navds-typo--spacing {
81
- margin-bottom: var(--a-spacing-3);
87
+ margin-bottom: var(--navds-spacing-3);
82
88
  }
83
89
 
84
90
  /* Ingress */
85
91
  .navds-ingress {
86
- font-size: var(--a-font-size-xlarge);
87
- font-weight: var(--a-font-weight-regular);
92
+ font-size: var(--navds-font-size-xlarge);
93
+ font-weight: var(--navds-font-weight-regular);
88
94
  letter-spacing: -0.001em;
89
- line-height: var(--a-font-line-height-xlarge);
95
+ line-height: var(--navds-font-line-height-xlarge);
90
96
  margin: 0;
91
97
  }
92
98
 
93
99
  .navds-ingress.navds-typo--spacing {
94
- margin-bottom: var(--a-spacing-10);
100
+ margin-bottom: var(--navds-spacing-10);
95
101
  }
96
102
 
97
103
  /* Body */
98
104
  .navds-body-long {
99
- font-size: var(--a-font-size-large);
100
- font-weight: var(--a-font-weight-regular);
105
+ font-size: var(--navds-font-size-large);
106
+ font-weight: var(--navds-font-weight-regular);
101
107
  letter-spacing: 0;
102
- line-height: var(--a-font-line-height-xlarge);
108
+ line-height: var(--navds-font-line-height-xlarge);
103
109
  margin: 0;
104
110
  }
105
111
 
106
112
  .navds-body-long.navds-typo--spacing {
107
- margin-bottom: var(--a-spacing-7);
113
+ margin-bottom: var(--navds-spacing-7);
108
114
  }
109
115
 
110
116
  .navds-body-long--small {
111
- font-size: var(--a-font-size-medium);
117
+ font-size: var(--navds-font-size-medium);
112
118
  letter-spacing: 0.002em;
113
- line-height: var(--a-font-line-height-large);
119
+ line-height: var(--navds-font-line-height-large);
114
120
  }
115
121
 
116
122
  .navds-body-long--small.navds-typo--spacing {
117
- margin-bottom: var(--a-spacing-6);
123
+ margin-bottom: var(--navds-spacing-6);
118
124
  }
119
125
 
120
126
  .navds-body-short {
121
- font-size: var(--a-font-size-large);
122
- font-weight: var(--a-font-weight-regular);
127
+ font-size: var(--navds-font-size-large);
128
+ font-weight: var(--navds-font-weight-regular);
123
129
  letter-spacing: 0;
124
- line-height: var(--a-font-line-height-large);
130
+ line-height: var(--navds-font-line-height-large);
125
131
  margin: 0;
126
132
  }
127
133
 
128
134
  .navds-body-short.navds-typo--spacing {
129
- margin-bottom: var(--a-spacing-3);
135
+ margin-bottom: var(--navds-spacing-3);
130
136
  }
131
137
 
132
138
  .navds-body-short--small {
133
- font-size: var(--a-font-size-medium);
139
+ font-size: var(--navds-font-size-medium);
134
140
  letter-spacing: 0.002em;
135
- line-height: var(--a-font-line-height-medium);
141
+ line-height: var(--navds-font-line-height-medium);
136
142
  }
137
143
 
138
144
  .navds-body-short--small.navds-typo--spacing {
139
- margin-bottom: var(--a-spacing-2);
145
+ margin-bottom: var(--navds-spacing-2);
140
146
  }
141
147
 
142
148
  /* Label */
143
149
  .navds-label {
144
- font-size: var(--a-font-size-large);
145
- font-weight: var(--a-font-weight-bold);
150
+ font-size: var(--navds-font-size-large);
151
+ font-weight: var(--navds-font-weight-bold);
146
152
  letter-spacing: 0;
147
- line-height: var(--a-font-line-height-large);
153
+ line-height: var(--navds-font-line-height-large);
148
154
  margin: 0;
149
155
  }
150
156
 
151
157
  .navds-label.navds-typo--spacing {
152
- margin-bottom: var(--a-spacing-3);
158
+ margin-bottom: var(--navds-spacing-3);
153
159
  }
154
160
 
155
161
  .navds-label--small {
156
- font-size: var(--a-font-size-medium);
162
+ font-size: var(--navds-font-size-medium);
157
163
  letter-spacing: 0.002em;
158
- line-height: var(--a-font-line-height-medium);
164
+ line-height: var(--navds-font-line-height-medium);
159
165
  }
160
166
 
161
167
  .navds-label--small.navds-typo--spacing {
162
- margin-bottom: var(--a-spacing-2);
168
+ margin-bottom: var(--navds-spacing-2);
163
169
  }
164
170
 
165
171
  /* Small text */
166
172
  .navds-detail {
167
- font-size: var(--a-font-size-small);
173
+ font-size: var(--navds-font-size-small);
168
174
  letter-spacing: 0.004em;
169
- line-height: var(--a-font-line-height-medium);
175
+ line-height: var(--navds-font-line-height-medium);
170
176
  margin: 0;
171
177
  }
172
178
 
173
179
  .navds-detail.navds-typo--spacing {
174
- margin-bottom: var(--a-spacing-2);
180
+ margin-bottom: var(--navds-spacing-2);
175
181
  }
176
182
 
177
183
  .navds-detail.navds-typo--uppercase {
@@ -179,13 +185,13 @@
179
185
  }
180
186
 
181
187
  .navds-detail--small {
182
- font-weight: var(--a-font-weight-regular);
188
+ font-weight: var(--navds-font-weight-regular);
183
189
  }
184
190
 
185
191
  .navds-detail--small.navds-typo--spacing {
186
- margin-bottom: var(--a-spacing-2);
192
+ margin-bottom: var(--navds-spacing-2);
187
193
  }
188
194
 
189
195
  .navds-error-message {
190
- color: var(--ac-typo-error-text, var(--a-text-danger));
196
+ color: var(--navds-error-message-color-text);
191
197
  }
package/baseline/fonts.css DELETED
@@ -1,27 +0,0 @@
1
- @font-face {
2
- font-family: "Source Sans Pro";
3
- font-style: italic;
4
- font-weight: 400;
5
- font-display: swap;
6
- src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2") format("woff2");
7
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
8
- U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
9
- }
10
- @font-face {
11
- font-family: "Source Sans Pro";
12
- font-style: normal;
13
- font-weight: 400;
14
- font-display: swap;
15
- src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
16
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
17
- U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
18
- }
19
- @font-face {
20
- font-family: "Source Sans Pro";
21
- font-style: normal;
22
- font-weight: 600;
23
- font-display: swap;
24
- src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
25
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
26
- U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
27
- }