@digdir/designsystemet-css 0.7.0 → 0.9.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 (55) hide show
  1. package/alert.css +3 -3
  2. package/box.css +12 -12
  3. package/button.css +5 -5
  4. package/checkbox.css +3 -3
  5. package/chip.css +11 -11
  6. package/combobox.css +18 -19
  7. package/dist/alert.css +1 -1
  8. package/dist/box.css +1 -1
  9. package/dist/button.css +1 -1
  10. package/dist/checkbox.css +1 -1
  11. package/dist/chip.css +1 -1
  12. package/dist/combobox.css +1 -1
  13. package/dist/dropdownmenu.css +1 -1
  14. package/dist/error-message.css +1 -1
  15. package/dist/heading.css +1 -1
  16. package/dist/helptext.css +1 -1
  17. package/dist/index.css +1 -1
  18. package/dist/ingress.css +1 -1
  19. package/dist/label.css +1 -1
  20. package/dist/list.css +1 -1
  21. package/dist/native-select.css +1 -1
  22. package/dist/pagination.css +1 -1
  23. package/dist/paragraph.css +1 -1
  24. package/dist/popover.css +1 -1
  25. package/dist/radio.css +1 -1
  26. package/dist/search.css +1 -1
  27. package/dist/switch.css +1 -1
  28. package/dist/table.css +1 -1
  29. package/dist/tabs.css +1 -1
  30. package/dist/tag.css +1 -1
  31. package/dist/textarea.css +1 -1
  32. package/dist/textfield.css +1 -1
  33. package/dropdownmenu.css +3 -3
  34. package/error-message.css +4 -4
  35. package/heading.css +8 -8
  36. package/helptext.css +3 -3
  37. package/index.css +1 -2
  38. package/ingress.css +4 -4
  39. package/label.css +4 -4
  40. package/list.css +3 -3
  41. package/native-select.css +3 -3
  42. package/package.json +2 -5
  43. package/pagination.css +6 -6
  44. package/paragraph.css +12 -12
  45. package/popover.css +3 -3
  46. package/radio.css +4 -4
  47. package/search.css +9 -9
  48. package/switch.css +12 -12
  49. package/table.css +3 -3
  50. package/tabs.css +14 -14
  51. package/tag.css +3 -3
  52. package/textarea.css +3 -3
  53. package/textfield.css +9 -9
  54. package/dist/react-css-modules.css +0 -1
  55. package/react-css-modules.css +0 -388
package/dist/textarea.css CHANGED
@@ -1 +1 @@
1
- @layer fds.textarea{.fds-textarea{display:grid;gap:var(--fds-spacing-2)}.fds-textarea__readonly__icon{height:1.2em;width:1.2em}.fds-textarea__error-message:empty{display:none}.fds-textarea__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textarea__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1)}.fds-textarea__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;min-height:2.5em;padding:var(--fds-spacing-3);position:relative;resize:vertical;width:100%}.fds-textarea--small .fds-textarea__input{padding:var(--fds-spacing-2)}.fds-textarea--medium .fds-textarea__input{padding:var(--fds-spacing-3)}.fds-textarea--large .fds-textarea__input{padding:var(--fds-spacing-4)}.fds-textarea--disabled{opacity:var(--fds-opacity-disabled)}.fds-textarea--disabled .fds-textarea__input{cursor:not-allowed}.fds-textarea--readonly .fds-textarea__input{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-textarea--error>.fds-textarea__input:not(:focus-visible){border-color:var(--fds-semantic-border-danger-default);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-textarea__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--fds-semantic-border-input-hover);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-input-hover)}}}
1
+ @layer fds.textarea{.fds-textarea{display:grid;gap:var(--fds-spacing-2)}.fds-textarea__readonly__icon{height:1.2em;width:1.2em}.fds-textarea__error-message:empty{display:none}.fds-textarea__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textarea__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1)}.fds-textarea__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;min-height:2.5em;padding:var(--fds-spacing-3);position:relative;resize:vertical;width:100%}.fds-textarea--sm .fds-textarea__input{padding:var(--fds-spacing-2)}.fds-textarea--md .fds-textarea__input{padding:var(--fds-spacing-3)}.fds-textarea--lg .fds-textarea__input{padding:var(--fds-spacing-4)}.fds-textarea--disabled{opacity:var(--fds-opacity-disabled)}.fds-textarea--disabled .fds-textarea__input{cursor:not-allowed}.fds-textarea--readonly .fds-textarea__input{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-textarea--error>.fds-textarea__input:not(:focus-visible){border-color:var(--fds-semantic-border-danger-default);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-textarea__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--fds-semantic-border-input-hover);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-input-hover)}}}
@@ -1 +1 @@
1
- @layer fds.textfield{.fds-textfield{display:grid;gap:var(--fds-spacing-2)}.fds-textfield__adornment{background:var(--fds-semantic-surface-neutral-subtle);border:1px solid var(--fds-semantic-border-neutral-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;color:var(--fds-semantic-border-neutral-default);display:inline-block;padding:9px var(--fds-spacing-4)}.fds-textfield__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;padding:0 var(--fds-spacing-3);position:relative;width:100%}.fds-textfield--disabled .fds-textfield__input{cursor:not-allowed}.fds-textfield--readonly .fds-textfield__input{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-textfield__field{align-items:stretch;border-radius:var(--fds-border_radius-medium);display:flex}.fds-textfield__field>:first-child{border-bottom-left-radius:var(--fds-border_radius-medium);border-top-left-radius:var(--fds-border_radius-medium)}.fds-textfield__field>:last-child{border-bottom-right-radius:var(--fds-border_radius-medium);border-top-right-radius:var(--fds-border_radius-medium)}.fds-textfield--small .fds-textfield__adornment{padding:var(--fds-sizing-2) var(--fds-spacing-3)}.fds-textfield--medium .fds-textfield__adornment{padding:.65rem var(--fds-spacing-4)}.fds-textfield--large .fds-textfield__adornment{padding:.85rem var(--fds-spacing-5)}.fds-textfield--small .fds-textfield__field{height:var(--fds-sizing-10)}.fds-textfield--medium .fds-textfield__field{height:var(--fds-sizing-12)}.fds-textfield--large .fds-textfield__field{height:var(--fds-sizing-14)}.fds-textfield--small .fds-textfield__input{padding:0 var(--fds-spacing-2)}.fds-textfield--medium .fds-textfield__input{padding:0 var(--fds-spacing-3)}.fds-textfield--large .fds-textfield__input{padding:0 var(--fds-spacing-4)}.fds-textfield__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textfield__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1)}.fds-textfield--disabled{opacity:var(--fds-opacity-disabled)}.fds-textfield--error .fds-textfield__input:not(:focus-visible){border-color:var(--fds-semantic-border-danger-default);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-textfield__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--fds-semantic-border-input-hover);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-input-hover)}}.fds-textfield__input--with-prefix{border-bottom-left-radius:0;border-top-left-radius:0}.fds-textfield__input--with-suffix{border-bottom-right-radius:0;border-top-right-radius:0}.fds-textfield__prefix{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.fds-textfield__suffix{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.fds-textfield__readonly__icon{height:1.2em;width:1.2em}.fds-textfield__error-message:empty{display:none}}
1
+ @layer fds.textfield{.fds-textfield{display:grid;gap:var(--fds-spacing-2)}.fds-textfield__adornment{background:var(--fds-semantic-surface-neutral-subtle);border:1px solid var(--fds-semantic-border-neutral-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;color:var(--fds-semantic-border-neutral-default);display:inline-block;padding:9px var(--fds-spacing-4)}.fds-textfield__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;padding:0 var(--fds-spacing-3);position:relative;width:100%}.fds-textfield--disabled .fds-textfield__input{cursor:not-allowed}.fds-textfield--readonly .fds-textfield__input{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-textfield__field{align-items:stretch;border-radius:var(--fds-border_radius-medium);display:flex}.fds-textfield__field>:first-child{border-bottom-left-radius:var(--fds-border_radius-medium);border-top-left-radius:var(--fds-border_radius-medium)}.fds-textfield__field>:last-child{border-bottom-right-radius:var(--fds-border_radius-medium);border-top-right-radius:var(--fds-border_radius-medium)}.fds-textfield--sm .fds-textfield__adornment{padding:var(--fds-sizing-2) var(--fds-spacing-3)}.fds-textfield--md .fds-textfield__adornment{padding:.65rem var(--fds-spacing-4)}.fds-textfield--lg .fds-textfield__adornment{padding:.85rem var(--fds-spacing-5)}.fds-textfield--sm .fds-textfield__field{height:var(--fds-sizing-10)}.fds-textfield--md .fds-textfield__field{height:var(--fds-sizing-12)}.fds-textfield--lg .fds-textfield__field{height:var(--fds-sizing-14)}.fds-textfield--sm .fds-textfield__input{padding:0 var(--fds-spacing-2)}.fds-textfield--md .fds-textfield__input{padding:0 var(--fds-spacing-3)}.fds-textfield--lg .fds-textfield__input{padding:0 var(--fds-spacing-4)}.fds-textfield__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textfield__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1)}.fds-textfield--disabled{opacity:var(--fds-opacity-disabled)}.fds-textfield--error .fds-textfield__input:not(:focus-visible){border-color:var(--fds-semantic-border-danger-default);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-textfield__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--fds-semantic-border-input-hover);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-input-hover)}}.fds-textfield__input--with-prefix{border-bottom-left-radius:0;border-top-left-radius:0}.fds-textfield__input--with-suffix{border-bottom-right-radius:0;border-top-right-radius:0}.fds-textfield__prefix{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.fds-textfield__suffix{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.fds-textfield__readonly__icon{height:1.2em;width:1.2em}.fds-textfield__error-message:empty{display:none}}
package/dropdownmenu.css CHANGED
@@ -10,17 +10,17 @@
10
10
  background-color: var(--fds-semantic-background-default);
11
11
  }
12
12
 
13
- .fds-dropdownmenu--small {
13
+ .fds-dropdownmenu--sm {
14
14
  min-width: 240px;
15
15
  padding: var(--fds-spacing-2);
16
16
  }
17
17
 
18
- .fds-dropdownmenu--medium {
18
+ .fds-dropdownmenu--md {
19
19
  min-width: 260px;
20
20
  padding: var(--fds-spacing-3) var(--fds-spacing-2);
21
21
  }
22
22
 
23
- .fds-dropdownmenu--large {
23
+ .fds-dropdownmenu--lg {
24
24
  min-width: 280px;
25
25
  padding: var(--fds-spacing-4) var(--fds-spacing-2);
26
26
  }
package/error-message.css CHANGED
@@ -13,28 +13,28 @@
13
13
  margin-bottom: var(--fdsc-bottom-spacing);
14
14
  }
15
15
 
16
- .fds-error-message--large {
16
+ .fds-error-message--lg {
17
17
  --fdsc-bottom-spacing: var(--fds-spacing-5);
18
18
 
19
19
  font: var(--fds-typography-error_message-large);
20
20
  font-family: inherit;
21
21
  }
22
22
 
23
- .fds-error-message--medium {
23
+ .fds-error-message--md {
24
24
  --fdsc-bottom-spacing: var(--fds-spacing-5);
25
25
 
26
26
  font: var(--fds-typography-error_message-medium);
27
27
  font-family: inherit;
28
28
  }
29
29
 
30
- .fds-error-message--small {
30
+ .fds-error-message--sm {
31
31
  --fdsc-bottom-spacing: var(--fds-spacing-4);
32
32
 
33
33
  font: var(--fds-typography-error_message-small);
34
34
  font-family: inherit;
35
35
  }
36
36
 
37
- .fds-error-message--xsmall {
37
+ .fds-error-message--xs {
38
38
  --fdsc-bottom-spacing: var(--fds-spacing-3);
39
39
 
40
40
  font: var(--fds-typography-error_message-xsmall);
package/heading.css CHANGED
@@ -10,56 +10,56 @@
10
10
  margin-bottom: var(--fdsc-bottom-spacing);
11
11
  }
12
12
 
13
- .fds-heading--3xlarge {
13
+ .fds-heading--3xl {
14
14
  --fdsc-bottom-spacing: var(--fds-spacing-8);
15
15
 
16
16
  font: var(--fds-typography-heading-3xlarge);
17
17
  font-family: inherit;
18
18
  }
19
19
 
20
- .fds-heading--2xlarge {
20
+ .fds-heading--2xl {
21
21
  --fdsc-bottom-spacing: var(--fds-spacing-7);
22
22
 
23
23
  font: var(--fds-typography-heading-2xlarge);
24
24
  font-family: inherit;
25
25
  }
26
26
 
27
- .fds-heading--xlarge {
27
+ .fds-heading--xl {
28
28
  --fdsc-bottom-spacing: var(--fds-spacing-6);
29
29
 
30
30
  font: var(--fds-typography-heading-xlarge);
31
31
  font-family: inherit;
32
32
  }
33
33
 
34
- .fds-heading--large {
34
+ .fds-heading--lg {
35
35
  --fdsc-bottom-spacing: var(--fds-spacing-5);
36
36
 
37
37
  font: var(--fds-typography-heading-large);
38
38
  font-family: inherit;
39
39
  }
40
40
 
41
- .fds-heading--medium {
41
+ .fds-heading--md {
42
42
  --fdsc-bottom-spacing: var(--fds-spacing-4);
43
43
 
44
44
  font: var(--fds-typography-heading-medium);
45
45
  font-family: inherit;
46
46
  }
47
47
 
48
- .fds-heading--small {
48
+ .fds-heading--sm {
49
49
  --fdsc-bottom-spacing: var(--fds-spacing-3);
50
50
 
51
51
  font: var(--fds-typography-heading-small);
52
52
  font-family: inherit;
53
53
  }
54
54
 
55
- .fds-heading--xsmall {
55
+ .fds-heading--xs {
56
56
  --fdsc-bottom-spacing: var(--fds-spacing-2);
57
57
 
58
58
  font: var(--fds-typography-heading-xsmall);
59
59
  font-family: inherit;
60
60
  }
61
61
 
62
- .fds-heading--xxsmall {
62
+ .fds-heading--2xs {
63
63
  --fdsc-bottom-spacing: var(--fds-spacing-1);
64
64
 
65
65
  font: var(--fds-typography-heading-xxsmall);
package/helptext.css CHANGED
@@ -41,17 +41,17 @@
41
41
  max-width: 700px;
42
42
  }
43
43
 
44
- .fds-helptext--small .fds-helptext__icon {
44
+ .fds-helptext--sm .fds-helptext__icon {
45
45
  width: var(--fds-sizing-6);
46
46
  height: var(--fds-sizing-6);
47
47
  }
48
48
 
49
- .fds-helptext--medium .fds-helptext__icon {
49
+ .fds-helptext--md .fds-helptext__icon {
50
50
  width: var(--fds-sizing-7);
51
51
  height: var(--fds-sizing-7);
52
52
  }
53
53
 
54
- .fds-helptext--large .fds-helptext__icon {
54
+ .fds-helptext--lg .fds-helptext__icon {
55
55
  width: var(--fds-sizing-8);
56
56
  height: var(--fds-sizing-8);
57
57
  }
package/index.css CHANGED
@@ -1,9 +1,8 @@
1
1
  @charset "UTF-8";
2
2
 
3
- @layer fds.typography, fds.utils, fds.btn;
3
+ @layer fds.typography, fds.utils, fds.box, fds.btn;
4
4
 
5
5
  /** Import order defines ordinal specificity for layers */
6
- @import url('./react-css-modules.css');
7
6
  @import url('./button.css');
8
7
  @import url('./utils.css');
9
8
  @import url('./box.css');
package/ingress.css CHANGED
@@ -10,28 +10,28 @@
10
10
  margin-bottom: var(--fdsc-bottom-spacing);
11
11
  }
12
12
 
13
- .fds-ingress--medium {
13
+ .fds-ingress--md {
14
14
  --fdsc-bottom-spacing: var(--fds-spacing-5);
15
15
 
16
16
  font: var(--fds-typography-ingress-medium);
17
17
  font-family: inherit;
18
18
  }
19
19
 
20
- .fds-ingress--large {
20
+ .fds-ingress--lg {
21
21
  --fdsc-bottom-spacing: var(--fds-spacing-6);
22
22
 
23
23
  font: var(--fds-typography-ingress-large);
24
24
  font-family: inherit;
25
25
  }
26
26
 
27
- .fds-ingress--small {
27
+ .fds-ingress--sm {
28
28
  --fdsc-bottom-spacing: var(--fds-spacing-7);
29
29
 
30
30
  font: var(--fds-typography-ingress-small);
31
31
  font-family: inherit;
32
32
  }
33
33
 
34
- .fds-ingress--xsmall {
34
+ .fds-ingress--xs {
35
35
  --fdsc-bottom-spacing: var(--fds-spacing-8);
36
36
 
37
37
  font: var(--fds-typography-ingress-xsmall);
package/label.css CHANGED
@@ -12,22 +12,22 @@
12
12
  margin-bottom: var(--fdsc-bottom-spacing);
13
13
  }
14
14
 
15
- .fds-label--large {
15
+ .fds-label--lg {
16
16
  font: var(--fds-typography-label-large);
17
17
  font-family: inherit;
18
18
  }
19
19
 
20
- .fds-label--medium {
20
+ .fds-label--md {
21
21
  font: var(--fds-typography-label-medium);
22
22
  font-family: inherit;
23
23
  }
24
24
 
25
- .fds-label--small {
25
+ .fds-label--sm {
26
26
  font: var(--fds-typography-label-small);
27
27
  font-family: inherit;
28
28
  }
29
29
 
30
- .fds-label--xsmall {
30
+ .fds-label--xs {
31
31
  font: var(--fds-typography-label-xsmall);
32
32
  font-family: inherit;
33
33
  }
package/list.css CHANGED
@@ -1,10 +1,10 @@
1
1
  @layer fds.list {
2
- .fds-list--small {
2
+ .fds-list--sm {
3
3
  padding-left: var(--fds-spacing-4);
4
4
  }
5
5
 
6
- .fds-list--medium,
7
- .fds-list--large {
6
+ .fds-list--md,
7
+ .fds-list--lg {
8
8
  padding-left: var(--fds-spacing-6);
9
9
  }
10
10
 
package/native-select.css CHANGED
@@ -27,19 +27,19 @@
27
27
  background-image: none;
28
28
  }
29
29
 
30
- .fds-native-select--small {
30
+ .fds-native-select--sm {
31
31
  padding: 0 var(--fds-spacing-2);
32
32
  padding-right: var(--fds-spacing-8);
33
33
  height: var(--fds-sizing-10);
34
34
  }
35
35
 
36
- .fds-native-select--medium {
36
+ .fds-native-select--md {
37
37
  padding: 0 var(--fds-spacing-3);
38
38
  padding-right: var(--fds-spacing-10);
39
39
  height: var(--fds-sizing-12);
40
40
  }
41
41
 
42
- .fds-native-select--large {
42
+ .fds-native-select--lg {
43
43
  padding: 0 var(--fds-spacing-4);
44
44
  padding-right: var(--fds-spacing-12);
45
45
  height: var(--fds-sizing-14);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digdir/designsystemet-css",
3
- "version": "0.7.0",
3
+ "version": "0.9.0",
4
4
  "description": "CSS for Designsystemet",
5
5
  "author": "Designsystemet team",
6
6
  "repository": "https://github.com/digdir/designsystemet",
@@ -39,8 +39,5 @@
39
39
  "postcss-import": "^16.0.1",
40
40
  "rimraf": "^5.0.5"
41
41
  },
42
- "dependencies": {
43
- "@digdir/designsystemet-react": "^0.60.0"
44
- },
45
- "gitHead": "65be7461058771bb400da9a4c606e855d79b7237"
42
+ "gitHead": "1e5c96601e637b59585362632c539dfc214b8270"
46
43
  }
package/pagination.css CHANGED
@@ -16,15 +16,15 @@
16
16
  visibility: hidden;
17
17
  }
18
18
 
19
- .fds-pagination--small {
19
+ .fds-pagination--sm {
20
20
  --fds-pagination-chevron-margin: var(--fds-spacing-2);
21
21
  }
22
22
 
23
- .fds-pagination--medium {
23
+ .fds-pagination--md {
24
24
  --fds-pagination-chevron-margin: var(--fds-spacing-2);
25
25
  }
26
26
 
27
- .fds-pagination--large {
27
+ .fds-pagination--lg {
28
28
  --fds-pagination-chevron-margin: var(--fds-spacing-2);
29
29
  }
30
30
 
@@ -41,17 +41,17 @@
41
41
  margin-right: var(--fds-pagination-listitem-margin);
42
42
  }
43
43
 
44
- .fds-pagination--small .fds-pagination__item {
44
+ .fds-pagination--sm .fds-pagination__item {
45
45
  --fds-pagination-listitem-margin: var(--fds-spacing-2);
46
46
  --fds-pagination-ellipsis-width: var(--fds-sizing-10);
47
47
  }
48
48
 
49
- .fds-pagination--medium .fds-pagination__item {
49
+ .fds-pagination--md .fds-pagination__item {
50
50
  --fds-pagination-listitem-margin: var(--fds-spacing-4);
51
51
  --fds-pagination-ellipsis-width: var(--fds-sizing-12);
52
52
  }
53
53
 
54
- .fds-pagination--large .fds-pagination__item {
54
+ .fds-pagination--lg .fds-pagination__item {
55
55
  --fds-pagination-listitem-margin: var(--fds-spacing-6);
56
56
  --fds-pagination-ellipsis-width: var(--fds-sizing-14);
57
57
  }
package/paragraph.css CHANGED
@@ -10,73 +10,73 @@
10
10
  margin-bottom: var(--fdsc-bottom-spacing);
11
11
  }
12
12
 
13
- .fds-paragraph--large {
13
+ .fds-paragraph--lg {
14
14
  --fdsc-bottom-spacing: var(--fds-spacing-6);
15
15
 
16
16
  font: var(--fds-typography-paragraph-large);
17
17
  font-family: inherit;
18
18
  }
19
19
 
20
- .fds-paragraph--large.fds-paragraph--short {
20
+ .fds-paragraph--lg.fds-paragraph--short {
21
21
  font: var(--fds-typography-paragraph-short-large);
22
22
  font-family: inherit;
23
23
  }
24
24
 
25
- .fds-paragraph--large.fds-paragraph--long {
25
+ .fds-paragraph--lg.fds-paragraph--long {
26
26
  line-height: var(--fds-typography-paragraph-long-large);
27
27
  }
28
28
 
29
- .fds-paragraph--medium {
29
+ .fds-paragraph--md {
30
30
  --fdsc-bottom-spacing: var(--fds-spacing-5);
31
31
 
32
32
  font: var(--fds-typography-paragraph-medium);
33
33
  font-family: inherit;
34
34
  }
35
35
 
36
- .fds-paragraph--medium.fds-paragraph--short {
36
+ .fds-paragraph--md.fds-paragraph--short {
37
37
  --fdsc-bottom-spacing: var(--fds-spacing-5);
38
38
 
39
39
  font: var(--fds-typography-paragraph-short-medium);
40
40
  font-family: inherit;
41
41
  }
42
42
 
43
- .fds-paragraph--medium.fds-paragraph--long {
43
+ .fds-paragraph--md.fds-paragraph--long {
44
44
  line-height: var(--fds-typography-paragraph-long-medium);
45
45
  }
46
46
 
47
- .fds-paragraph--small {
47
+ .fds-paragraph--sm {
48
48
  --fdsc-bottom-spacing: var(--fds-spacing-4);
49
49
 
50
50
  font: var(--fds-typography-paragraph-small);
51
51
  font-family: inherit;
52
52
  }
53
53
 
54
- .fds-paragraph--small.fds-paragraph--short {
54
+ .fds-paragraph--sm.fds-paragraph--short {
55
55
  --fdsc-bottom-spacing: var(--fds-spacing-4);
56
56
 
57
57
  font: var(--fds-typography-paragraph-short-small);
58
58
  font-family: inherit;
59
59
  }
60
60
 
61
- .fds-paragraph--small.fds-paragraph--long {
61
+ .fds-paragraph--sm.fds-paragraph--long {
62
62
  line-height: var(--fds-typography-paragraph-long-small);
63
63
  }
64
64
 
65
- .fds-paragraph--xsmall {
65
+ .fds-paragraph--xs {
66
66
  --fdsc-bottom-spacing: var(--fds-spacing-3);
67
67
 
68
68
  font: var(--fds-typography-paragraph-xsmall);
69
69
  font-family: inherit;
70
70
  }
71
71
 
72
- .fds-paragraph--xsmall.fds-paragraph--short {
72
+ .fds-paragraph--xs.fds-paragraph--short {
73
73
  --fdsc-bottom-spacing: var(--fds-spacing-3);
74
74
 
75
75
  font: var(--fds-typography-paragraph-short-xsmall);
76
76
  font-family: inherit;
77
77
  }
78
78
 
79
- .fds-paragraph--xsmall.fds-paragraph--long {
79
+ .fds-paragraph--xs.fds-paragraph--long {
80
80
  line-height: var(--fds-typography-paragraph-long-xsmall);
81
81
  }
82
82
  }
package/popover.css CHANGED
@@ -11,15 +11,15 @@
11
11
  max-width: 300px;
12
12
  }
13
13
 
14
- .fds-popover--small {
14
+ .fds-popover--sm {
15
15
  padding: var(--fds-spacing-2) var(--fds-spacing-3);
16
16
  }
17
17
 
18
- .fds-popover--medium {
18
+ .fds-popover--md {
19
19
  padding: var(--fds-spacing-3) var(--fds-spacing-4);
20
20
  }
21
21
 
22
- .fds-popover--large {
22
+ .fds-popover--lg {
23
23
  padding: var(--fds-spacing-3) var(--fds-spacing-5);
24
24
  }
25
25
 
package/radio.css CHANGED
@@ -145,19 +145,19 @@
145
145
 
146
146
  /** Sizing */
147
147
 
148
- .fds-radio--small {
148
+ .fds-radio--sm {
149
149
  --fds-radio-size: var(--fds-sizing-5);
150
150
 
151
151
  min-height: var(--fds-sizing-10);
152
152
  }
153
153
 
154
- .fds-radio--medium {
154
+ .fds-radio--md {
155
155
  --fds-radio-size: var(--fds-sizing-6);
156
156
 
157
157
  min-height: var(--fds-sizing-11);
158
158
  }
159
159
 
160
- .fds-radio--large {
160
+ .fds-radio--lg {
161
161
  --fds-radio-size: var(--fds-sizing-7);
162
162
 
163
163
  min-height: var(--fds-sizing-12);
@@ -166,6 +166,6 @@
166
166
  .fds-radio-group--horizontal {
167
167
  display: flex;
168
168
  flex-direction: row;
169
- gap: var(--fds-spacing-2);
169
+ gap: var(--fds-spacing-6);
170
170
  }
171
171
  }
package/search.css CHANGED
@@ -5,15 +5,15 @@
5
5
  gap: var(--fds-spacing-2);
6
6
  }
7
7
 
8
- .fds-search--small {
8
+ .fds-search--sm {
9
9
  --f-search-button-clear-size: var(--fds-sizing-5);
10
10
  }
11
11
 
12
- .fds-search--medium {
12
+ .fds-search--md {
13
13
  --f-search-button-clear-size: var(--fds-sizing-6);
14
14
  }
15
15
 
16
- .fds-search--large {
16
+ .fds-search--lg {
17
17
  --f-search-button-clear-size: var(--fds-sizing-8);
18
18
  }
19
19
 
@@ -112,7 +112,7 @@
112
112
  z-index: 2;
113
113
  }
114
114
 
115
- .fds-search--small .fds-search__input {
115
+ .fds-search--sm .fds-search__input {
116
116
  --f-search-button-clear-size: var(--fds-sizing-4);
117
117
 
118
118
  height: var(--fds-sizing-10);
@@ -120,11 +120,11 @@
120
120
  padding-right: 2.5em;
121
121
  }
122
122
 
123
- .fds-search--small .fds-search__icon {
123
+ .fds-search--sm .fds-search__icon {
124
124
  left: var(--fds-spacing-3);
125
125
  }
126
126
 
127
- .fds-search--medium .fds-search__input {
127
+ .fds-search--md .fds-search__input {
128
128
  --f-search-button-clear-size: var(--fds-sizing-6);
129
129
 
130
130
  height: var(--fds-sizing-12);
@@ -132,11 +132,11 @@
132
132
  padding-right: 2.2em;
133
133
  }
134
134
 
135
- .fds-search--medium .fds-search__icon {
135
+ .fds-search--md .fds-search__icon {
136
136
  left: var(--fds-spacing-4);
137
137
  }
138
138
 
139
- .fds-search--large .fds-search__input {
139
+ .fds-search--lg .fds-search__input {
140
140
  --f-search-button-clear-size: var(--fds-sizing-12);
141
141
 
142
142
  height: var(--fds-sizing-14);
@@ -144,7 +144,7 @@
144
144
  padding-right: 2em;
145
145
  }
146
146
 
147
- .fds-search--large .fds-search__icon {
147
+ .fds-search--lg .fds-search__icon {
148
148
  left: var(--fds-spacing-5);
149
149
  }
150
150
 
package/switch.css CHANGED
@@ -101,47 +101,47 @@
101
101
  margin-left: var(--fds-spacing-1);
102
102
  }
103
103
 
104
- .fds-switch--small,
105
- .fds-switch--small .fds-switch__label {
104
+ .fds-switch--sm,
105
+ .fds-switch--sm .fds-switch__label {
106
106
  min-height: var(--fds-sizing-6);
107
107
  }
108
108
 
109
- .fds-switch--medium,
110
- .fds-switch--medium .fds-switch__label {
109
+ .fds-switch--md,
110
+ .fds-switch--md .fds-switch__label {
111
111
  min-height: var(--fds-sizing-7);
112
112
  }
113
113
 
114
- .fds-switch--large,
115
- .fds-switch--large .fds-switch__label {
114
+ .fds-switch--lg,
115
+ .fds-switch--lg .fds-switch__label {
116
116
  min-height: var(--fds-sizing-8);
117
117
  }
118
118
 
119
- .fds-switch--small {
119
+ .fds-switch--sm {
120
120
  --fds-switch-height: var(--fds-sizing-6);
121
121
  --fds-switch-width: var(--fds-sizing-11);
122
122
  }
123
123
 
124
- .fds-switch--small .fds-switch__input {
124
+ .fds-switch--sm .fds-switch__input {
125
125
  left: -0.25rem;
126
126
  top: -0.25rem;
127
127
  }
128
128
 
129
- .fds-switch--medium {
129
+ .fds-switch--md {
130
130
  --fds-switch-height: var(--fds-sizing-7);
131
131
  --fds-switch-width: var(--fds-sizing-13);
132
132
  }
133
133
 
134
- .fds-switch--medium .fds-switch__input {
134
+ .fds-switch--md .fds-switch__input {
135
135
  left: 0;
136
136
  top: 0;
137
137
  }
138
138
 
139
- .fds-switch--large {
139
+ .fds-switch--lg {
140
140
  --fds-switch-height: var(--fds-sizing-8);
141
141
  --fds-switch-width: var(--fds-sizing-15);
142
142
  }
143
143
 
144
- .fds-switch--large .fds-switch__input {
144
+ .fds-switch--lg .fds-switch__input {
145
145
  left: 0;
146
146
  top: 0.25rem;
147
147
  }
package/table.css CHANGED
@@ -17,15 +17,15 @@
17
17
  border-bottom: 0;
18
18
  }
19
19
 
20
- .fds-table--small {
20
+ .fds-table--sm {
21
21
  --table-padding: var(--fds-spacing-1) var(--fds-spacing-3);
22
22
  }
23
23
 
24
- .fds-table--medium {
24
+ .fds-table--md {
25
25
  --table-padding: var(--fds-spacing-2) var(--fds-spacing-3);
26
26
  }
27
27
 
28
- .fds-table--large {
28
+ .fds-table--lg {
29
29
  --table-padding: var(--fds-spacing-3) var(--fds-spacing-3);
30
30
  }
31
31