@digdir/designsystemet-css 0.8.0 → 0.9.1-alpha.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 (79) hide show
  1. package/accordion.css +40 -43
  2. package/alert.css +39 -35
  3. package/box.css +30 -30
  4. package/button.css +107 -107
  5. package/card.css +41 -49
  6. package/checkbox.css +70 -58
  7. package/chip.css +76 -76
  8. package/combobox.css +86 -87
  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 +3 -3
  49. package/dropdownmenu.css +13 -13
  50. package/error-message.css +15 -15
  51. package/error-summary.css +4 -4
  52. package/fieldset.css +3 -3
  53. package/heading.css +24 -31
  54. package/helptext.css +13 -13
  55. package/index.css +1 -1
  56. package/ingress.css +15 -15
  57. package/label.css +11 -11
  58. package/link.css +13 -13
  59. package/list.css +7 -7
  60. package/modal.css +19 -19
  61. package/native-select.css +28 -28
  62. package/package.json +2 -2
  63. package/pagination.css +24 -24
  64. package/paragraph.css +34 -34
  65. package/popover.css +29 -29
  66. package/radio.css +51 -54
  67. package/search.css +42 -42
  68. package/skeleton.css +4 -4
  69. package/skiplink.css +3 -3
  70. package/spinner.css +5 -5
  71. package/switch.css +77 -61
  72. package/table.css +33 -29
  73. package/tabs.css +35 -43
  74. package/tag.css +35 -35
  75. package/textarea.css +20 -20
  76. package/textfield.css +42 -42
  77. package/togglegroup.css +5 -5
  78. package/tooltip.css +11 -9
  79. package/utils.css +4 -4
package/accordion.css CHANGED
@@ -1,23 +1,23 @@
1
1
  @layer fds.accordion {
2
2
  .fds-accordion {
3
- --fds-accordion-border-radius: var(--fds-border_radius-interactive);
4
- --fds-accordion-border-color: var(--fds-semantic-border-neutral-subtle);
3
+ --dsc-accordion-border-radius: var(--ds-border-radius-md);
4
+ --dsc-accordion-border-color: var(--ds-color-neutral-border-subtle);
5
5
 
6
- border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
6
+ border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
7
7
  box-sizing: border-box;
8
8
  }
9
9
 
10
10
  .fds-accordion--border {
11
- border: 1px solid var(--fds-accordion-border-color);
12
- border-radius: var(--fds-accordion-border-radius);
11
+ border: 1px solid var(--dsc-accordion-border-color);
12
+ border-radius: var(--dsc-accordion-border-radius);
13
13
  }
14
14
 
15
15
  .fds-accordion__expand-icon {
16
- border-radius: var(--fds-border_radius-interactive);
16
+ border-radius: var(--ds-border-radius-md);
17
17
  }
18
18
 
19
19
  .fds-accordion__content {
20
- padding: var(--fds-spacing-5, 1rem);
20
+ padding: var(--ds-spacing-5, 1rem);
21
21
  overflow: hidden;
22
22
  text-overflow: ellipsis;
23
23
  }
@@ -31,20 +31,19 @@
31
31
  display: flex;
32
32
  justify-content: flex-start;
33
33
  align-items: center;
34
- gap: var(--fds-spacing-2);
34
+ gap: var(--ds-spacing-2);
35
35
  margin: 0;
36
36
  text-align: left;
37
37
  cursor: pointer;
38
38
  border: none;
39
- border-top: 1px solid var(--fds-semantic-border-neutral-subtle);
40
- padding: var(--fds-spacing-4);
39
+ border-top: 1px solid var(--ds-color-neutral-border-subtle);
40
+ padding: var(--ds-spacing-4);
41
41
  }
42
42
 
43
43
  .fds-accordion--border .fds-accordion__button {
44
- border-radius: var(--fds-accordion-border-radius);
44
+ border-radius: var(--dsc-accordion-border-radius);
45
45
  }
46
46
 
47
-
48
47
  .fds-accordion__item:focus-within {
49
48
  position: relative;
50
49
  }
@@ -55,56 +54,54 @@
55
54
 
56
55
  .fds-accordion--neutral,
57
56
  .fds-accordion--neutral .fds-accordion__button {
58
- background-color: var(--fds-semantic-surface-neutral-default);
57
+ background-color: var(--ds-color-neutral-background-default);
59
58
  }
60
59
 
61
60
  .fds-accordion--subtle,
62
61
  .fds-accordion--subtle .fds-accordion__button {
63
- background-color: var(--fds-semantic-surface-neutral-subtle);
62
+ background-color: var(--ds-color-neutral-background-subtle);
64
63
  }
65
64
 
66
- .fds-accordion--first,
67
- .fds-accordion--first .fds-accordion__button {
68
- --fds-accordion-border-color: var(--fds-semantic-border-first-default);
65
+ .fds-accordion--brand1,
66
+ .fds-accordion--brand1 .fds-accordion__button {
67
+ --dsc-accordion-border-color: var(--ds-color-brand1-base-default);
69
68
 
70
- background: var(--fds-semantic-surface-first-light);
69
+ background: var(--ds-color-brand1-surface-default);
71
70
  }
72
71
 
72
+ .fds-accordion--brand2,
73
+ .fds-accordion--brand2 .fds-accordion__button {
74
+ --dsc-accordion-border-color: var(--ds-color-brand2-base-default);
73
75
 
74
- .fds-accordion--second,
75
- .fds-accordion--second .fds-accordion__button {
76
- --fds-accordion-border-color: var(--fds-semantic-border-second-default);
77
-
78
- background: var(--fds-semantic-surface-second-light);
76
+ background: var(--ds-color-brand2-surface-default);
79
77
  }
80
78
 
79
+ .fds-accordion--brand3,
80
+ .fds-accordion--brand3 .fds-accordion__button {
81
+ --dsc-accordion-border-color: var(--ds-color-brand3-base-default);
81
82
 
82
- .fds-accordion--third,
83
- .fds-accordion--third .fds-accordion__button {
84
- --fds-accordion-border-color: var(--fds-semantic-border-third-default);
85
-
86
- background: var(--fds-semantic-surface-third-light);
83
+ background: var(--ds-color-brand3-surface-default);
87
84
  }
88
85
 
89
- .fds-accordion--first .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
90
- .fds-accordion--second .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
91
- .fds-accordion--third .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
86
+ .fds-accordion--brand1 .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
87
+ .fds-accordion--brand2 .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
88
+ .fds-accordion--brand3 .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
92
89
  background-color: rgba(0 0 0 / 0.03);
93
90
  }
94
91
 
95
92
  .fds-accordion--neutral .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
96
93
  .fds-accordion--subtle .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
97
- background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
94
+ background-color: var(--ds-color-accent-surface-default);
98
95
  }
99
96
 
100
97
  .fds-accordion--border .fds-accordion__item:first-child .fds-accordion__button {
101
98
  border-top: 0;
102
99
  }
103
100
 
104
- .fds-accordion--first .fds-accordion__item:not(:first-child) .fds-accordion__button,
105
- .fds-accordion--second .fds-accordion__item:not(:first-child) .fds-accordion__button,
106
- .fds-accordion--third .fds-accordion__item:not(:first-child) .fds-accordion__button {
107
- border-top: 1px solid var(--fds-semantic-surface-neutral-default);
101
+ .fds-accordion--brand1 .fds-accordion__item:not(:first-child) .fds-accordion__button,
102
+ .fds-accordion--brand2 .fds-accordion__item:not(:first-child) .fds-accordion__button,
103
+ .fds-accordion--brand3 .fds-accordion__item:not(:first-child) .fds-accordion__button {
104
+ border-top: 1px solid var(--ds-color-neutral-background-default);
108
105
  }
109
106
 
110
107
  @media (hover: hover) and (pointer: fine) {
@@ -114,19 +111,19 @@
114
111
 
115
112
  .fds-accordion--neutral .fds-accordion__button:hover,
116
113
  .fds-accordion--subtle .fds-accordion__button:hover {
117
- background-color: var(--fds-semantic-surface-neutral-subtle-hover);
114
+ background-color: var(--ds-color-neutral-surface-default);
118
115
  }
119
116
 
120
- .fds-accordion--first .fds-accordion__button:hover {
121
- background-color: var(--fds-semantic-surface-first-light-hover);
117
+ .fds-accordion--brand1 .fds-accordion__button:hover {
118
+ background-color: var(--ds-color-brand1-surface-hover);
122
119
  }
123
120
 
124
- .fds-accordion--second .fds-accordion__button:hover {
125
- background-color: var(--fds-semantic-surface-second-light-hover);
121
+ .fds-accordion--brand2 .fds-accordion__button:hover {
122
+ background-color: var(--ds-color-brand2-surface-hover);
126
123
  }
127
124
 
128
- .fds-accordion--third .fds-accordion__button:hover {
129
- background-color: var(--fds-semantic-surface-third-light-hover);
125
+ .fds-accordion--brand3 .fds-accordion__button:hover {
126
+ background-color: var(--ds-color-brand3-surface-hover);
130
127
  }
131
128
  }
132
129
  }
package/alert.css CHANGED
@@ -1,29 +1,29 @@
1
1
  @layer fds.alert {
2
2
  .fds-alert {
3
- --fds-alert-border-color: var(--fds-semantic-border-info-default);
4
- --fds-alert-border-radius: var(--fds-border_radius-medium);
5
- --fds-alert-color: var(--fds-semantic-text-neutral-default);
6
- --fds-alert-icon-color: var(--fds-alert-border-color);
7
- --fds-alert-icon-size: var(--fds-sizing-7);
8
- --fds-alert-background: var(--fds-semantic-surface-info-subtle);
9
- --fds-alert-padding: var(--fds-spacing-6);
3
+ --dsc-alert-border-color: var(--ds-color-info-border-strong);
4
+ --dsc-alert-border-radius: var(--ds-border-radius-md);
5
+ --dsc-alert-color: var(--ds-color-neutral-text-default);
6
+ --dsc-alert-icon-color: var(--dsc-alert-border-color);
7
+ --dsc-alert-icon-size: var(--ds-sizing-7);
8
+ --dsc-alert-background: var(--ds-color-info-surface-default);
9
+ --dsc-alert-padding: var(--ds-spacing-6);
10
10
 
11
- border: 1px solid var(--fds-alert-border-color);
12
- border-radius: var(--fds-alert-border-radius);
13
- background: var(--fds-alert-background);
14
- color: var(--fds-alert-color);
15
- padding: var(--fds-alert-padding);
11
+ border: 1px solid var(--dsc-alert-border-color);
12
+ border-radius: var(--dsc-alert-border-radius);
13
+ background: var(--dsc-alert-background);
14
+ color: var(--dsc-alert-color);
15
+ padding: var(--dsc-alert-padding);
16
16
  display: grid;
17
17
  grid-auto-flow: column;
18
18
  grid-auto-columns: min-content auto;
19
- gap: var(--fds-spacing-2);
20
- font: var(--fds-typography-paragraph-medium);
19
+ gap: var(--ds-spacing-2);
20
+ font: var(--ds-typography-paragraph-md);
21
21
  }
22
22
 
23
23
  .fds-alert__icon {
24
- height: var(--fds-alert-icon-size);
25
- width: var(--fds-alert-icon-size);
26
- color: var(--fds-alert-icon-color);
24
+ height: var(--dsc-alert-icon-size);
25
+ width: var(--dsc-alert-icon-size);
26
+ color: var(--dsc-alert-icon-color);
27
27
  }
28
28
 
29
29
  .fds-alert__content {
@@ -32,41 +32,45 @@
32
32
  }
33
33
 
34
34
  .fds-alert--info {
35
- --fds-alert-border-color: var(--fds-semantic-border-info-default);
36
- --fds-alert-background: var(--fds-semantic-surface-info-subtle);
35
+ --dsc-alert-border-color: var(--ds-color-info-border-strong);
36
+ --dsc-alert-icon-color: var(--ds-color-info-base-default);
37
+ --dsc-alert-background: var(--ds-color-info-surface-default);
37
38
  }
38
39
 
39
40
  .fds-alert--warning {
40
- --fds-alert-border-color: var(--fds-semantic-border-warning-default);
41
- --fds-alert-background: var(--fds-semantic-surface-warning-subtle);
41
+ --dsc-alert-border-color: var(--ds-color-warning-border-default);
42
+ --dsc-alert-icon-color: var(--ds-color-warning-base-default);
43
+ --dsc-alert-background: var(--ds-color-warning-surface-default);
42
44
  }
43
45
 
44
46
  .fds-alert--success {
45
- --fds-alert-border-color: var(--fds-semantic-border-success-default);
46
- --fds-alert-background: var(--fds-semantic-surface-success-subtle);
47
+ --dsc-alert-border-color: var(--ds-color-success-border-default);
48
+ --dsc-alert-icon-color: var(--ds-color-success-base-default);
49
+ --dsc-alert-background: var(--ds-color-success-surface-default);
47
50
  }
48
51
 
49
52
  .fds-alert--danger {
50
- --fds-alert-border-color: var(--fds-semantic-border-danger-default);
51
- --fds-alert-background: var(--fds-semantic-surface-danger-subtle);
53
+ --dsc-alert-border-color: var(--ds-color-danger-border-default);
54
+ --dsc-alert-icon-color: var(--ds-color-danger-base-default);
55
+ --dsc-alert-background: var(--ds-color-danger-surface-default);
52
56
  }
53
57
 
54
- .fds-alert--small {
55
- --fds-alert-padding: var(--fds-spacing-5);
56
- --fds-alert-icon-size: var(--fds-sizing-6);
58
+ .fds-alert--sm {
59
+ --dsc-alert-padding: var(--ds-spacing-5);
60
+ --dsc-alert-icon-size: var(--ds-sizing-6);
57
61
  }
58
62
 
59
- .fds-alert--medium {
60
- --fds-alert-padding: var(--fds-spacing-6);
61
- --fds-alert-icon-size: var(--fds-sizing-7);
63
+ .fds-alert--md {
64
+ --dsc-alert-padding: var(--ds-spacing-6);
65
+ --dsc-alert-icon-size: var(--ds-sizing-7);
62
66
  }
63
67
 
64
- .fds-alert--large {
65
- --fds-alert-padding: var(--fds-spacing-7);
66
- --fds-alert-icon-size: var(--fds-sizing-8);
68
+ .fds-alert--lg {
69
+ --dsc-alert-padding: var(--ds-spacing-7);
70
+ --dsc-alert-icon-size: var(--ds-sizing-8);
67
71
  }
68
72
 
69
73
  .fds-alert--elevated {
70
- box-shadow: var(--fds-shadow-small);
74
+ box-shadow: var(--ds-shadow-sm);
71
75
  }
72
76
  }
package/box.css CHANGED
@@ -1,73 +1,73 @@
1
1
  @layer fds.box {
2
- .fds-box--xsmall-shadow {
3
- box-shadow: var(--fds-shadow-xsmall);
2
+ .fds-box--xs-shadow {
3
+ box-shadow: var(--ds-shadow-xs);
4
4
  }
5
5
 
6
- .fds-box--small-shadow {
7
- box-shadow: var(--fds-shadow-small);
6
+ .fds-box--sm-shadow {
7
+ box-shadow: var(--ds-shadow-sm);
8
8
  }
9
9
 
10
- .fds-box--medium-shadow {
11
- box-shadow: var(--fds-shadow-medium);
10
+ .fds-box--md-shadow {
11
+ box-shadow: var(--ds-shadow-md);
12
12
  }
13
13
 
14
- .fds-box--large-shadow {
15
- box-shadow: var(--fds-shadow-large);
14
+ .fds-box--lg-shadow {
15
+ box-shadow: var(--ds-shadow-lg);
16
16
  }
17
17
 
18
- .fds-box--xlarge-shadow {
19
- box-shadow: var(--fds-shadow-xlarge);
18
+ .fds-box--xl-shadow {
19
+ box-shadow: var(--ds-shadow-xl);
20
20
  }
21
21
 
22
22
  .fds-box--default-border-color {
23
- border: 1px solid var(--fds-semantic-border-neutral-default);
23
+ border: 1px solid var(--ds-color-neutral-border-strong);
24
24
  }
25
25
 
26
26
  .fds-box--subtle-border-color {
27
- border: 1px solid var(--fds-semantic-border-neutral-subtle);
27
+ border: 1px solid var(--ds-color-neutral-border-subtle);
28
28
  }
29
29
 
30
30
  .fds-box--strong-border-color {
31
- border: 1px solid var(--fds-semantic-border-neutral-strong);
31
+ border: 1px solid var(--ds-color-neutral-base-default);
32
32
  }
33
33
 
34
- .fds-box--small-border-radius {
35
- border-radius: var(--fds-border_radius-small);
34
+ .fds-box--sm-border-radius {
35
+ border-radius: var(--ds-border-radius-sm);
36
36
  }
37
37
 
38
- .fds-box--medium-border-radius {
39
- border-radius: var(--fds-border_radius-medium);
38
+ .fds-box--md-border-radius {
39
+ border-radius: var(--ds-border-radius-md);
40
40
  }
41
41
 
42
- .fds-box--large-border-radius {
43
- border-radius: var(--fds-border_radius-large);
42
+ .fds-box--lg-border-radius {
43
+ border-radius: var(--ds-border-radius-lg);
44
44
  }
45
45
 
46
- .fds-box--xlarge-border-radius {
47
- border-radius: var(--fds-border_radius-xlarge);
46
+ .fds-box--xl-border-radius {
47
+ border-radius: var(--ds-border-radius-xl);
48
48
  }
49
49
 
50
- .fds-box--xxlarge-border-radius {
51
- border-radius: var(--fds-border_radius-xxlarge);
50
+ .fds-box--2xl-border-radius {
51
+ border-radius: var(--ds-border-radius-2xl);
52
52
  }
53
53
 
54
- .fds-box--xxxlarge-border-radius {
55
- border-radius: var(--fds-border_radius-xxxlarge);
54
+ .fds-box--3xl-border-radius {
55
+ border-radius: var(--ds-border-radius-3xl);
56
56
  }
57
57
 
58
- .fds-box--xxxxlarge-border-radius {
59
- border-radius: var(--fds-border_radius-xxxxlarge);
58
+ .fds-box--4xl-border-radius {
59
+ border-radius: var(--ds-border-radius-4xl);
60
60
  }
61
61
 
62
62
  .fds-box--full-border-radius {
63
- border-radius: var(--fds-border_radius-full);
63
+ border-radius: var(--ds-border-radius-full);
64
64
  }
65
65
 
66
66
  .fds-box--default-background {
67
- background-color: var(--fds-semantic-background-default);
67
+ background-color: var(--ds-color-neutral-background-default);
68
68
  }
69
69
 
70
70
  .fds-box--subtle-background {
71
- background-color: var(--fds-semantic-background-subtle);
71
+ background-color: var(--ds-color-neutral-background-subtle);
72
72
  }
73
73
  }