@designsystem-se/af 31.3.0 → 31.3.1-beta.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 (92) hide show
  1. package/dist/collection/components/_form/form-receipt/check-icon.svg +21 -21
  2. package/dist/collection/design-tokens/components/_calendar-week-view.variables.scss +44 -44
  3. package/dist/collection/design-tokens/components/_chart-line.variables.scss +1 -1
  4. package/dist/collection/design-tokens/components/_code-example.variables.scss +5 -5
  5. package/dist/collection/design-tokens/components/_dialog.variables.scss +36 -36
  6. package/dist/collection/design-tokens/components/_expandable-faq-item.variables.scss +17 -17
  7. package/dist/collection/design-tokens/components/_footer-card.variables.scss +4 -4
  8. package/dist/collection/design-tokens/components/_footer.variables.scss +11 -11
  9. package/dist/collection/design-tokens/components/_form-category-filter.variables.scss +2 -2
  10. package/dist/collection/design-tokens/components/_form-checkbox.variables.scss +22 -22
  11. package/dist/collection/design-tokens/components/_form-error-list.variables.scss +6 -6
  12. package/dist/collection/design-tokens/components/_form-fieldset.variables.scss +9 -9
  13. package/dist/collection/design-tokens/components/_form-input-search.variables.scss +2 -2
  14. package/dist/collection/design-tokens/components/_form-radiobutton.variables.scss +21 -21
  15. package/dist/collection/design-tokens/components/_form-radiogroup.variables.scss +1 -1
  16. package/dist/collection/design-tokens/components/_form-textarea.variables.scss +20 -20
  17. package/dist/collection/design-tokens/components/_header-avatar.variables.scss +6 -6
  18. package/dist/collection/design-tokens/components/_header-navigation.variables.scss +4 -4
  19. package/dist/collection/design-tokens/components/_header-notification.variables.scss +6 -6
  20. package/dist/collection/design-tokens/components/_header.variables.scss +7 -7
  21. package/dist/collection/design-tokens/components/_icon-chart.variables.scss +1 -1
  22. package/dist/collection/design-tokens/components/_icon-move.variables.scss +1 -1
  23. package/dist/collection/design-tokens/components/_icon-share-chain.variables.scss +1 -1
  24. package/dist/collection/design-tokens/components/_icon-table-column.variables.scss +1 -1
  25. package/dist/collection/design-tokens/components/_icon-table-row.variables.scss +1 -1
  26. package/dist/collection/design-tokens/components/_icon-table.variables.scss +1 -1
  27. package/dist/collection/design-tokens/components/_icon.variables.scss +4 -4
  28. package/dist/collection/design-tokens/components/_info-card.variables.scss +13 -13
  29. package/dist/collection/design-tokens/components/_layout-columns.variables.scss +5 -5
  30. package/dist/collection/design-tokens/components/_list.variables.scss +3 -3
  31. package/dist/collection/design-tokens/components/_loader-skeleton.variables.scss +16 -16
  32. package/dist/collection/design-tokens/components/_loader-spinner.variables.scss +8 -8
  33. package/dist/collection/design-tokens/components/_logo.variables.scss +37 -37
  34. package/dist/collection/design-tokens/components/_navigation-pagination.variables.scss +29 -29
  35. package/dist/collection/design-tokens/components/_notification-alert.variables.scss +29 -29
  36. package/dist/collection/design-tokens/components/_notification-error-page.variables.scss +9 -9
  37. package/dist/collection/design-tokens/components/_progress-indicator.variables.scss +45 -45
  38. package/dist/collection/design-tokens/components/_progress-list-item.variables.scss +14 -14
  39. package/dist/collection/design-tokens/components/_progress-list.variables.scss +10 -10
  40. package/dist/collection/design-tokens/components/_quote-quote-multi-container.variables.scss +1 -1
  41. package/dist/collection/design-tokens/components/_quote-single.variables.scss +6 -6
  42. package/dist/collection/design-tokens/components/_tag-media.variables.scss +13 -13
  43. package/dist/collection/design-tokens/components/_tools-feedback-rating.variables.scss +1 -1
  44. package/dist/collection/design-tokens/components/_tools-languagepicker.variables.scss +34 -34
  45. package/dist/collection/design-tokens/components/_typography.variables.scss +19 -19
  46. package/dist/collection/design-tokens/components/card.variables.scss +10 -10
  47. package/dist/digi-arbetsformedlingen/design-tokens/components/_calendar-week-view.variables.scss +44 -44
  48. package/dist/digi-arbetsformedlingen/design-tokens/components/_chart-line.variables.scss +1 -1
  49. package/dist/digi-arbetsformedlingen/design-tokens/components/_code-example.variables.scss +5 -5
  50. package/dist/digi-arbetsformedlingen/design-tokens/components/_dialog.variables.scss +36 -36
  51. package/dist/digi-arbetsformedlingen/design-tokens/components/_expandable-faq-item.variables.scss +17 -17
  52. package/dist/digi-arbetsformedlingen/design-tokens/components/_footer-card.variables.scss +4 -4
  53. package/dist/digi-arbetsformedlingen/design-tokens/components/_footer.variables.scss +11 -11
  54. package/dist/digi-arbetsformedlingen/design-tokens/components/_form-category-filter.variables.scss +2 -2
  55. package/dist/digi-arbetsformedlingen/design-tokens/components/_form-checkbox.variables.scss +22 -22
  56. package/dist/digi-arbetsformedlingen/design-tokens/components/_form-error-list.variables.scss +6 -6
  57. package/dist/digi-arbetsformedlingen/design-tokens/components/_form-fieldset.variables.scss +9 -9
  58. package/dist/digi-arbetsformedlingen/design-tokens/components/_form-input-search.variables.scss +2 -2
  59. package/dist/digi-arbetsformedlingen/design-tokens/components/_form-radiobutton.variables.scss +21 -21
  60. package/dist/digi-arbetsformedlingen/design-tokens/components/_form-radiogroup.variables.scss +1 -1
  61. package/dist/digi-arbetsformedlingen/design-tokens/components/_form-textarea.variables.scss +20 -20
  62. package/dist/digi-arbetsformedlingen/design-tokens/components/_header-avatar.variables.scss +6 -6
  63. package/dist/digi-arbetsformedlingen/design-tokens/components/_header-navigation.variables.scss +4 -4
  64. package/dist/digi-arbetsformedlingen/design-tokens/components/_header-notification.variables.scss +6 -6
  65. package/dist/digi-arbetsformedlingen/design-tokens/components/_header.variables.scss +7 -7
  66. package/dist/digi-arbetsformedlingen/design-tokens/components/_icon-chart.variables.scss +1 -1
  67. package/dist/digi-arbetsformedlingen/design-tokens/components/_icon-move.variables.scss +1 -1
  68. package/dist/digi-arbetsformedlingen/design-tokens/components/_icon-share-chain.variables.scss +1 -1
  69. package/dist/digi-arbetsformedlingen/design-tokens/components/_icon-table-column.variables.scss +1 -1
  70. package/dist/digi-arbetsformedlingen/design-tokens/components/_icon-table-row.variables.scss +1 -1
  71. package/dist/digi-arbetsformedlingen/design-tokens/components/_icon-table.variables.scss +1 -1
  72. package/dist/digi-arbetsformedlingen/design-tokens/components/_icon.variables.scss +4 -4
  73. package/dist/digi-arbetsformedlingen/design-tokens/components/_info-card.variables.scss +13 -13
  74. package/dist/digi-arbetsformedlingen/design-tokens/components/_layout-columns.variables.scss +5 -5
  75. package/dist/digi-arbetsformedlingen/design-tokens/components/_list.variables.scss +3 -3
  76. package/dist/digi-arbetsformedlingen/design-tokens/components/_loader-skeleton.variables.scss +16 -16
  77. package/dist/digi-arbetsformedlingen/design-tokens/components/_loader-spinner.variables.scss +8 -8
  78. package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss +37 -37
  79. package/dist/digi-arbetsformedlingen/design-tokens/components/_navigation-pagination.variables.scss +29 -29
  80. package/dist/digi-arbetsformedlingen/design-tokens/components/_notification-alert.variables.scss +29 -29
  81. package/dist/digi-arbetsformedlingen/design-tokens/components/_notification-error-page.variables.scss +9 -9
  82. package/dist/digi-arbetsformedlingen/design-tokens/components/_progress-indicator.variables.scss +45 -45
  83. package/dist/digi-arbetsformedlingen/design-tokens/components/_progress-list-item.variables.scss +14 -14
  84. package/dist/digi-arbetsformedlingen/design-tokens/components/_progress-list.variables.scss +10 -10
  85. package/dist/digi-arbetsformedlingen/design-tokens/components/_quote-quote-multi-container.variables.scss +1 -1
  86. package/dist/digi-arbetsformedlingen/design-tokens/components/_quote-single.variables.scss +6 -6
  87. package/dist/digi-arbetsformedlingen/design-tokens/components/_tag-media.variables.scss +13 -13
  88. package/dist/digi-arbetsformedlingen/design-tokens/components/_tools-feedback-rating.variables.scss +1 -1
  89. package/dist/digi-arbetsformedlingen/design-tokens/components/_tools-languagepicker.variables.scss +34 -34
  90. package/dist/digi-arbetsformedlingen/design-tokens/components/_typography.variables.scss +19 -19
  91. package/dist/digi-arbetsformedlingen/design-tokens/components/card.variables.scss +10 -10
  92. package/package.json +1 -1
@@ -1,9 +1,9 @@
1
- @mixin digi-header-avatar--variables(){
2
- --digi--header-avatar--margin: var(--digi--gutter--medium);
3
- --digi--header-avatar--font-family: var(--digi--global--typography--font-family--default);
4
- --digi--header-avatar--font-size: var(--digi--typography--label--font-size--desktop);
5
- --digi--header-avatar--line-height: var(--digi--typography--label--line-height--desktop);
6
- --digi--header-avatar--color: var(--digi--color--text--primary);
1
+ @mixin digi-header-avatar--variables(){
2
+ --digi--header-avatar--margin: var(--digi--gutter--medium);
3
+ --digi--header-avatar--font-family: var(--digi--global--typography--font-family--default);
4
+ --digi--header-avatar--font-size: var(--digi--typography--label--font-size--desktop);
5
+ --digi--header-avatar--line-height: var(--digi--typography--label--line-height--desktop);
6
+ --digi--header-avatar--color: var(--digi--color--text--primary);
7
7
  }
8
8
 
9
9
  /** Do not touch! Autogenerated
@@ -1,7 +1,7 @@
1
- @mixin digi-header--variables() {
2
- --digi--header--border-color: var(--digi--color--border--neutral-4);
3
- --digi--header--close-button--padding: var(--digi--padding--smaller);
4
- --digi--header--backdrop--background-color: rgba(0, 0, 0, 0.7);
1
+ @mixin digi-header--variables() {
2
+ --digi--header--border-color: var(--digi--color--border--neutral-4);
3
+ --digi--header--close-button--padding: var(--digi--padding--smaller);
4
+ --digi--header--backdrop--background-color: rgba(0, 0, 0, 0.7);
5
5
  }
6
6
 
7
7
  /** Do not touch! Autogenerated
@@ -1,9 +1,9 @@
1
- @mixin header-notification--variables() {
2
- --digi--header-notification--font-family: var(--digi--global--typography--font-family--default);
3
- --digi--header-notification--font-size: var(--digi--typography--body--font-size--desktop);
4
- --digi--header-notification--color: var(--digi--color--text--primary);
5
- --digi--header-notification--color-hover: var(--digi--color--text--link);
6
- --digi--header-notification--color-active: var(--digi--color--text--link);
1
+ @mixin header-notification--variables() {
2
+ --digi--header-notification--font-family: var(--digi--global--typography--font-family--default);
3
+ --digi--header-notification--font-size: var(--digi--typography--body--font-size--desktop);
4
+ --digi--header-notification--color: var(--digi--color--text--primary);
5
+ --digi--header-notification--color-hover: var(--digi--color--text--link);
6
+ --digi--header-notification--color-active: var(--digi--color--text--link);
7
7
  }
8
8
 
9
9
  /** Do not touch! Autogenerated
@@ -1,10 +1,10 @@
1
- @mixin digi-header--variables() {
2
- --digi--header--padding: var(--digi--padding--large);
3
- --digi--header--border-width: var(--digi--border-width--primary);
4
- --digi--header--border-color: var(--digi--color--border--neutral-2);
5
- --digi--header--padding-right: var(--digi--padding--medium);
6
- --digi--header--font-size: var(--digi--typography--body--font-size--desktop);
7
- --digi--header--font-weight: var(--digi--typography--title-logo--font-weight--desktop);
1
+ @mixin digi-header--variables() {
2
+ --digi--header--padding: var(--digi--padding--large);
3
+ --digi--header--border-width: var(--digi--border-width--primary);
4
+ --digi--header--border-color: var(--digi--color--border--neutral-2);
5
+ --digi--header--padding-right: var(--digi--padding--medium);
6
+ --digi--header--font-size: var(--digi--typography--body--font-size--desktop);
7
+ --digi--header--font-weight: var(--digi--typography--title-logo--font-weight--desktop);
8
8
  }
9
9
 
10
10
  /** Do not touch! Autogenerated
@@ -1,4 +1,4 @@
1
- @mixin digi-icon-chart--variables {
1
+ @mixin digi-icon-chart--variables {
2
2
  }
3
3
 
4
4
  /** Do not touch! Autogenerated
@@ -1,4 +1,4 @@
1
- @mixin digi-icon-move--variables {
1
+ @mixin digi-icon-move--variables {
2
2
  }
3
3
 
4
4
  /** Do not touch! Autogenerated
@@ -1,4 +1,4 @@
1
- @mixin digi-icon-share-chain--variables {
1
+ @mixin digi-icon-share-chain--variables {
2
2
  }
3
3
 
4
4
  /** Do not touch! Autogenerated
@@ -1,4 +1,4 @@
1
- @mixin digi-icon-table-column--variables {
1
+ @mixin digi-icon-table-column--variables {
2
2
  }
3
3
 
4
4
  /** Do not touch! Autogenerated
@@ -1,4 +1,4 @@
1
- @mixin digi-icon-table-row--variables {
1
+ @mixin digi-icon-table-row--variables {
2
2
  }
3
3
 
4
4
  /** Do not touch! Autogenerated
@@ -1,4 +1,4 @@
1
- @mixin digi-icon-table--variables {
1
+ @mixin digi-icon-table--variables {
2
2
  }
3
3
 
4
4
  /** Do not touch! Autogenerated
@@ -1,7 +1,7 @@
1
- @mixin digi-icon--variables {
2
- --digi--icon--color: var(--digi--color--icons--primary);
3
- --digi--icon--width: initial;
4
- --digi--icon--height: auto;
1
+ @mixin digi-icon--variables {
2
+ --digi--icon--color: var(--digi--color--icons--primary);
3
+ --digi--icon--width: initial;
4
+ --digi--icon--height: auto;
5
5
  }
6
6
 
7
7
  /** Do not touch! Autogenerated
@@ -1,16 +1,16 @@
1
- @mixin digi-info-card--variables() {
2
- --digi--info-card--background-color--primary: var(--digi--color--background--neutral-5);
3
- --digi--info-card--background-color--secondary: var(--digi--color--background--secondary);
4
- --digi--info-card--background-color--related: var(--digi--color--background--primary);
5
- --digi--info-card--color--heading: var(--digi--color--text--primary);
6
- --digi--info-card--color--heading--multi: var(--digi--color--text--link);
7
- --digi--info-card--border: var(--digi--border-width--complementary-2) solid var(--digi--color--border--secondary);
8
- --digi--info-card--padding: var(--digi--padding--large) var(--digi--padding--medium) var(--digi--padding--largest) var(--digi--padding--medium);
9
- --digi--info-card--padding--desktop: var(--digi--padding--largest-2) var(--digi--padding--largest) var(--digi--padding--largest-3) var(--digi--padding--largest);
10
- --digi--info-card--heading--font-weight: var(--digi--typography--heading-3--font-weight--desktop);
11
- --digi--info-card--heading--font-size--mobile: var(--digi--typography--heading-2--font-size--mobile);
12
- --digi--info-card--heading--font-size--desktop: var(--digi--typography--heading-2--font-size--desktop);
13
-
1
+ @mixin digi-info-card--variables() {
2
+ --digi--info-card--background-color--primary: var(--digi--color--background--neutral-5);
3
+ --digi--info-card--background-color--secondary: var(--digi--color--background--secondary);
4
+ --digi--info-card--background-color--related: var(--digi--color--background--primary);
5
+ --digi--info-card--color--heading: var(--digi--color--text--primary);
6
+ --digi--info-card--color--heading--multi: var(--digi--color--text--link);
7
+ --digi--info-card--border: var(--digi--border-width--complementary-2) solid var(--digi--color--border--secondary);
8
+ --digi--info-card--padding: var(--digi--padding--large) var(--digi--padding--medium) var(--digi--padding--largest) var(--digi--padding--medium);
9
+ --digi--info-card--padding--desktop: var(--digi--padding--largest-2) var(--digi--padding--largest) var(--digi--padding--largest-3) var(--digi--padding--largest);
10
+ --digi--info-card--heading--font-weight: var(--digi--typography--heading-3--font-weight--desktop);
11
+ --digi--info-card--heading--font-size--mobile: var(--digi--typography--heading-2--font-size--mobile);
12
+ --digi--info-card--heading--font-size--desktop: var(--digi--typography--heading-2--font-size--desktop);
13
+
14
14
  }
15
15
 
16
16
  /** Do not touch! Autogenerated
@@ -1,8 +1,8 @@
1
- @mixin digi-layout-columns--variables() {
2
- --digi--layout-columns--gap--column: var(--digi--gutter--largest);
3
- --digi--layout-columns--gap--row: var(--digi--gutter--largest);
4
- --digi--layout-columns--min-width: 0;
5
- --digi--layout-columns--gap--column--32: var(--digi--global--spacing--largest-4);
1
+ @mixin digi-layout-columns--variables() {
2
+ --digi--layout-columns--gap--column: var(--digi--gutter--largest);
3
+ --digi--layout-columns--gap--row: var(--digi--gutter--largest);
4
+ --digi--layout-columns--min-width: 0;
5
+ --digi--layout-columns--gap--column--32: var(--digi--global--spacing--largest-4);
6
6
  }
7
7
 
8
8
  /** Do not touch! Autogenerated
@@ -1,6 +1,6 @@
1
- @mixin digi-list--variables (){
2
- --digi--list--margin--top: initial;
3
- --digi--list--margin--bottom: var(--digi--margin--large);
1
+ @mixin digi-list--variables (){
2
+ --digi--list--margin--top: initial;
3
+ --digi--list--margin--bottom: var(--digi--margin--large);
4
4
  }
5
5
 
6
6
  /** Do not touch! Autogenerated
@@ -1,19 +1,19 @@
1
- @mixin digi-loader-skeleton--variables {
2
- --digi--loader-skeleton--background: var(--digi--color--background--neutral-3);
3
- --digi--loader-skeleton--margin-bottom: var(--digi--typography--paragraph--margin--small);
4
- --digi--loader-skeleton--header-height: 2rem;
5
- --digi--loader-skeleton--line-height: var(--digi--typography--body--font-size--desktop);
6
- --digi--loader-skeleton--text-height: var(--digi--typography--body--font-size--desktop);
7
-
8
- --digi--loader-skeleton--circle-height: 2rem;
9
- --digi--loader-skeleton--circle-width: 2rem;
10
- --digi--loader-skeleton--circle-border-radius: 50%;
11
-
12
- --digi--loader-skeleton--text-margin: var(--digi--margin--h4-h6-large);
13
- --digi--loader-skeleton--header-margin: var(--digi--typography--h3--margin--small);
14
- --digi--loader-skeleton--line-margin-bottom: var(--digi--typography--paragraph--margin--small);
15
-
16
- --digi--loader-skeleton--rounded-border-radius: var(--digi--border-radius--complementary-2);
1
+ @mixin digi-loader-skeleton--variables {
2
+ --digi--loader-skeleton--background: var(--digi--color--background--neutral-3);
3
+ --digi--loader-skeleton--margin-bottom: var(--digi--typography--paragraph--margin--small);
4
+ --digi--loader-skeleton--header-height: 2rem;
5
+ --digi--loader-skeleton--line-height: var(--digi--typography--body--font-size--desktop);
6
+ --digi--loader-skeleton--text-height: var(--digi--typography--body--font-size--desktop);
7
+
8
+ --digi--loader-skeleton--circle-height: 2rem;
9
+ --digi--loader-skeleton--circle-width: 2rem;
10
+ --digi--loader-skeleton--circle-border-radius: 50%;
11
+
12
+ --digi--loader-skeleton--text-margin: var(--digi--margin--h4-h6-large);
13
+ --digi--loader-skeleton--header-margin: var(--digi--typography--h3--margin--small);
14
+ --digi--loader-skeleton--line-margin-bottom: var(--digi--typography--paragraph--margin--small);
15
+
16
+ --digi--loader-skeleton--rounded-border-radius: var(--digi--border-radius--complementary-2);
17
17
  }
18
18
 
19
19
  /** Do not touch! Autogenerated
@@ -1,11 +1,11 @@
1
- @mixin digi-loader-spinner--variables {
2
- --digi--loader-spinner--icon--size--small: 1rem;
3
- --digi--loader-spinner--icon--size--medium: 2rem;
4
- --digi--loader-spinner--icon--size--large: 5rem;
5
-
6
- --digi-loader-spinner--font--size--small: var(--digi--typography--heading-4--font-size--desktop-xsmall);
7
- --digi-loader-spinner--font--size--medium: var(--digi--typography--heading-4--font-size--desktop);
8
- --digi-loader-spinner--font--size--large: var(--digi--typography--heading-4--font-size--desktop-large);
1
+ @mixin digi-loader-spinner--variables {
2
+ --digi--loader-spinner--icon--size--small: 1rem;
3
+ --digi--loader-spinner--icon--size--medium: 2rem;
4
+ --digi--loader-spinner--icon--size--large: 5rem;
5
+
6
+ --digi-loader-spinner--font--size--small: var(--digi--typography--heading-4--font-size--desktop-xsmall);
7
+ --digi-loader-spinner--font--size--medium: var(--digi--typography--heading-4--font-size--desktop);
8
+ --digi-loader-spinner--font--size--large: var(--digi--typography--heading-4--font-size--desktop-large);
9
9
  }
10
10
 
11
11
  /** Do not touch! Autogenerated
@@ -1,40 +1,40 @@
1
- @use '../../../global/styles/utilities' as *;
2
-
3
- @mixin digi-logo--variables() {
4
- --digi--logo--img--min-width: #{rem(256)};
5
- --digi--logo--img--max-width:#{rem(312)};
6
- --digi--logo--img--max-width--large: #{rem(392)};
7
- --digi--logo--img--max-width--system: #{rem(44)};
8
-
9
- --digi--logo--padding: var(--digi--gutter--medium);
10
- --digi--logo--padding--wide: var(--digi--gutter--larger);
11
- --digi--logo--padding--large: var(--digi--gutter--medium);
12
- --digi--logo--padding--large--wide: var(--digi--gutter--larger);
13
-
14
- --digi--logo--color--primary: var(--digi--color--text--secondary);
15
- --digi--logo--color--secondary: var(--digi--color--text--inverted);
16
-
17
- --digi--logo--system-name-color--primary: var(--digi--color--text--primary);
18
- --digi--logo--system-name-color--secondary: var(--digi--color--text--inverted);
19
-
20
- --digi--logo--color--border--primary: var(--digi--color--text--primary);
21
- --digi--logo--color--border--secondary: var(--digi--color--text--inverted);
22
-
23
- --digi--logo--border-width: var(--digi--border-width--primary);
24
- --digi--logo--border-width--large: var(--digi--border-width--secondary);
25
-
26
- --digi--logo--margin--system: 0 0 0 var(--digi--gutter--medium);
27
- --digi--logo--margin--system--large: 0 0 0 var(--digi--gutter--larger);
28
- --digi--logo--padding--system: 0 0 0 var(--digi--gutter--medium);
29
- --digi--logo--padding--system--large: 0 0 0 var(--digi--gutter--larger);
30
-
31
- --digi--logo--font-size: var(--digi--typography--title-logo--font-size--mobile);
32
- --digi--logo--font-size--large: var(--digi--typography--title-logo--font-size--desktop-large);
33
- --digi--logo--font-size--system: var(--digi--typography--title-logo--font-size--mobile);
34
- --digi--logo--font-size--system--large: var(--digi--typography--title-logo--font-size--desktop);
35
- --digi--logo--font-weight: var(--digi--typography--title-logo--font-weight--desktop);
36
- --digi--logo--line-height: #{rem(44)}; // or 1.375
37
- --digi--logo--font-family: var(--digi--global--typography--font-family--default);
1
+ @use '../../../global/styles/utilities' as *;
2
+
3
+ @mixin digi-logo--variables() {
4
+ --digi--logo--img--min-width: #{rem(256)};
5
+ --digi--logo--img--max-width:#{rem(312)};
6
+ --digi--logo--img--max-width--large: #{rem(392)};
7
+ --digi--logo--img--max-width--system: #{rem(44)};
8
+
9
+ --digi--logo--padding: var(--digi--gutter--medium);
10
+ --digi--logo--padding--wide: var(--digi--gutter--larger);
11
+ --digi--logo--padding--large: var(--digi--gutter--medium);
12
+ --digi--logo--padding--large--wide: var(--digi--gutter--larger);
13
+
14
+ --digi--logo--color--primary: var(--digi--color--text--secondary);
15
+ --digi--logo--color--secondary: var(--digi--color--text--inverted);
16
+
17
+ --digi--logo--system-name-color--primary: var(--digi--color--text--primary);
18
+ --digi--logo--system-name-color--secondary: var(--digi--color--text--inverted);
19
+
20
+ --digi--logo--color--border--primary: var(--digi--color--text--primary);
21
+ --digi--logo--color--border--secondary: var(--digi--color--text--inverted);
22
+
23
+ --digi--logo--border-width: var(--digi--border-width--primary);
24
+ --digi--logo--border-width--large: var(--digi--border-width--secondary);
25
+
26
+ --digi--logo--margin--system: 0 0 0 var(--digi--gutter--medium);
27
+ --digi--logo--margin--system--large: 0 0 0 var(--digi--gutter--larger);
28
+ --digi--logo--padding--system: 0 0 0 var(--digi--gutter--medium);
29
+ --digi--logo--padding--system--large: 0 0 0 var(--digi--gutter--larger);
30
+
31
+ --digi--logo--font-size: var(--digi--typography--title-logo--font-size--mobile);
32
+ --digi--logo--font-size--large: var(--digi--typography--title-logo--font-size--desktop-large);
33
+ --digi--logo--font-size--system: var(--digi--typography--title-logo--font-size--mobile);
34
+ --digi--logo--font-size--system--large: var(--digi--typography--title-logo--font-size--desktop);
35
+ --digi--logo--font-weight: var(--digi--typography--title-logo--font-weight--desktop);
36
+ --digi--logo--line-height: #{rem(44)}; // or 1.375
37
+ --digi--logo--font-family: var(--digi--global--typography--font-family--default);
38
38
  }
39
39
 
40
40
  /** Do not touch! Autogenerated
@@ -1,32 +1,32 @@
1
- @mixin digi-navigation-pagination--variables() {
2
- --digi--navigation-pagination--button--padding: calc(#{var(--digi--gutter--small)} + 1px) var(--digi--gutter--largest-2);
3
- --digi--navigation-pagination--button--icon--width: var(--digi--gutter--medium);
4
- --digi--navigation-pagination--button--width: 8.750rem;
5
- --digi--navigation-pagination--button--margin: 0.125rem;
6
- --digi--navigation-pagination--button--display: flex;
7
- --digi--navigation-pagination--button--justify-content--default: center;
8
- --digi--navigation-pagination--button--keep-right--margin: 8.375rem;
9
-
10
- --digi--navigation-pagination--button--previous-button--border-radius: var(--digi--global--border-radius--base) 0 0 var(--digi--global--border-radius--base);
11
- --digi--navigation-pagination--button--next-button--border-radius: 0 var(--digi--global--border-radius--base) var(--digi--global--border-radius--base) 0;
12
-
13
- --digi--navigation-pagination--button--page-button--padding: calc(#{var(--digi--gutter--medium)} - 1px) calc(#{var(--digi--gutter--largest)} - 1px);
14
- --digi--navigation-pagination--button--page-button--padding--compressed: calc(#{var(--digi--gutter--medium)} - 1px) calc(#{var(--digi--gutter--medium)} - 1px);
15
- --digi--navigation-pagination--button--page-button--margin: 0 2px;
16
- --digi--navigation-pagination--button--page-button--width: 2.750rem; //44px
17
- --digi--navigation-pagination--button--page-button--height: 2.750rem; //44px
18
- // --digi--navigation-pagination--button--page-button--width--compressed: max-content;
19
- --digi--navigation-pagination--button--page-button--border-radius: 0;
20
-
21
- --digi--navigation-pagination--pages--margin: 0 0 var(--digi--global--spacing--smallest-4) 0; //4 eller 6px
22
-
23
- --digi--navigation-pagination--result--pages--margin: var(--digi--margin--smaller) 0 0 0;
24
- --digi--navigation-pagination--result--margin: 0;
25
- --digi--navigation-pagination--result--strong--font-weight: 600;
26
- --digi--navigation-pagination--result--text-align: center;
27
-
28
- --digi--navigation-pagination--page-list--padding: 0;
29
- --digi--navigation-pagination--page-list--margin: 0;
1
+ @mixin digi-navigation-pagination--variables() {
2
+ --digi--navigation-pagination--button--padding: calc(#{var(--digi--gutter--small)} + 1px) var(--digi--gutter--largest-2);
3
+ --digi--navigation-pagination--button--icon--width: var(--digi--gutter--medium);
4
+ --digi--navigation-pagination--button--width: 8.750rem;
5
+ --digi--navigation-pagination--button--margin: 0.125rem;
6
+ --digi--navigation-pagination--button--display: flex;
7
+ --digi--navigation-pagination--button--justify-content--default: center;
8
+ --digi--navigation-pagination--button--keep-right--margin: 8.375rem;
9
+
10
+ --digi--navigation-pagination--button--previous-button--border-radius: var(--digi--global--border-radius--base) 0 0 var(--digi--global--border-radius--base);
11
+ --digi--navigation-pagination--button--next-button--border-radius: 0 var(--digi--global--border-radius--base) var(--digi--global--border-radius--base) 0;
12
+
13
+ --digi--navigation-pagination--button--page-button--padding: calc(#{var(--digi--gutter--medium)} - 1px) calc(#{var(--digi--gutter--largest)} - 1px);
14
+ --digi--navigation-pagination--button--page-button--padding--compressed: calc(#{var(--digi--gutter--medium)} - 1px) calc(#{var(--digi--gutter--medium)} - 1px);
15
+ --digi--navigation-pagination--button--page-button--margin: 0 2px;
16
+ --digi--navigation-pagination--button--page-button--width: 2.750rem; //44px
17
+ --digi--navigation-pagination--button--page-button--height: 2.750rem; //44px
18
+ // --digi--navigation-pagination--button--page-button--width--compressed: max-content;
19
+ --digi--navigation-pagination--button--page-button--border-radius: 0;
20
+
21
+ --digi--navigation-pagination--pages--margin: 0 0 var(--digi--global--spacing--smallest-4) 0; //4 eller 6px
22
+
23
+ --digi--navigation-pagination--result--pages--margin: var(--digi--margin--smaller) 0 0 0;
24
+ --digi--navigation-pagination--result--margin: 0;
25
+ --digi--navigation-pagination--result--strong--font-weight: 600;
26
+ --digi--navigation-pagination--result--text-align: center;
27
+
28
+ --digi--navigation-pagination--page-list--padding: 0;
29
+ --digi--navigation-pagination--page-list--margin: 0;
30
30
  }
31
31
 
32
32
  /** Do not touch! Autogenerated
@@ -1,32 +1,32 @@
1
- @mixin digi-notification-alert--variables() {
2
- --digi--notification-alert--heading--font-weight: var(--digi--typography--heading-3--font-weight--desktop);
3
- --digi--notification-alert--heading--font-size: var(--digi--typography--heading-3--font-size--desktop);
4
- --digi--notification-alert--heading--font-size--large: var(--digi--typography--heading-3--font-size--desktop-large);
5
- --digi--notification-alert--icon--padding--large: var(--digi--gutter--largest);
6
- --digi--notification-alert--icon--padding--medium: var(--digi--gutter--largest);
7
- --digi--notification-alert--icon--padding--small: var(--digi--gutter--large);
8
- --digi--notification-alert--icon--width--large: 2.25rem;
9
- --digi--notification-alert--icon--width--medium: 1.4375rem;
10
- --digi--notification-alert--icon--width--small: 1.4375rem;
11
- --digi--notification-alert--max-width--large: 100%;
12
- --digi--notification-alert--max-width--medium: 31.25rem;
13
- --digi--notification-alert--max-width--small: 18.75rem;
14
-
15
- --digi--notification-alert--border--informative: var(--digi--border-width--secondary) solid var(--digi--color--border--informative);
16
- --digi--notification-alert--icon--color--informative: var(--digi--color--text--inverted);
17
- --digi--notification-alert--icon--background--informative: var(--digi--color--background--informative);
18
-
19
- --digi--notification-alert--border--success: var(--digi--border-width--secondary) solid var(--digi--color--border--success);
20
- --digi--notification-alert--icon--color--success: var(--digi--color--text--inverted);
21
- --digi--notification-alert--icon--background--success: var(--digi--color--background--success-1);
22
-
23
- --digi--notification-alert--border--warning: var(--digi--border-width--secondary) solid var(--digi--color--border--warning);
24
- --digi--notification-alert--icon--color--warning: var(--digi--color--text--primary);
25
- --digi--notification-alert--icon--background--warning: var(--digi--color--background--warning-1);
26
-
27
- --digi--notification-alert--border--danger: var(--digi--border-width--secondary) solid var(--digi--color--border--danger);
28
- --digi--notification-alert--icon--color--danger: var(--digi--color--text--inverted);
29
- --digi--notification-alert--icon--background--danger: var(--digi--color--background--danger-1);
1
+ @mixin digi-notification-alert--variables() {
2
+ --digi--notification-alert--heading--font-weight: var(--digi--typography--heading-3--font-weight--desktop);
3
+ --digi--notification-alert--heading--font-size: var(--digi--typography--heading-3--font-size--desktop);
4
+ --digi--notification-alert--heading--font-size--large: var(--digi--typography--heading-3--font-size--desktop-large);
5
+ --digi--notification-alert--icon--padding--large: var(--digi--gutter--largest);
6
+ --digi--notification-alert--icon--padding--medium: var(--digi--gutter--largest);
7
+ --digi--notification-alert--icon--padding--small: var(--digi--gutter--large);
8
+ --digi--notification-alert--icon--width--large: 2.25rem;
9
+ --digi--notification-alert--icon--width--medium: 1.4375rem;
10
+ --digi--notification-alert--icon--width--small: 1.4375rem;
11
+ --digi--notification-alert--max-width--large: 100%;
12
+ --digi--notification-alert--max-width--medium: 31.25rem;
13
+ --digi--notification-alert--max-width--small: 18.75rem;
14
+
15
+ --digi--notification-alert--border--informative: var(--digi--border-width--secondary) solid var(--digi--color--border--informative);
16
+ --digi--notification-alert--icon--color--informative: var(--digi--color--text--inverted);
17
+ --digi--notification-alert--icon--background--informative: var(--digi--color--background--informative);
18
+
19
+ --digi--notification-alert--border--success: var(--digi--border-width--secondary) solid var(--digi--color--border--success);
20
+ --digi--notification-alert--icon--color--success: var(--digi--color--text--inverted);
21
+ --digi--notification-alert--icon--background--success: var(--digi--color--background--success-1);
22
+
23
+ --digi--notification-alert--border--warning: var(--digi--border-width--secondary) solid var(--digi--color--border--warning);
24
+ --digi--notification-alert--icon--color--warning: var(--digi--color--text--primary);
25
+ --digi--notification-alert--icon--background--warning: var(--digi--color--background--warning-1);
26
+
27
+ --digi--notification-alert--border--danger: var(--digi--border-width--secondary) solid var(--digi--color--border--danger);
28
+ --digi--notification-alert--icon--color--danger: var(--digi--color--text--inverted);
29
+ --digi--notification-alert--icon--background--danger: var(--digi--color--background--danger-1);
30
30
  }
31
31
 
32
32
  /** Do not touch! Autogenerated
@@ -1,12 +1,12 @@
1
- @use '../../../global/styles/utilities' as *;
2
-
3
- @mixin digi-notification-error-page--variables {
4
- --digi--notification-error-page--max-width: var(--digi--container-width--larger);
5
- --digi--notification-error-page--gutter: calc(var(--digi--container-gutter--larger) + 3rem);
6
- --digi--notification-error-page--padding-top--tablet:238px;
7
- --digi--notification-error-page--padding-top--desktop:144px;
8
- --digi--notification-error-page--padding-top--mobile:48px;
9
-
1
+ @use '../../../global/styles/utilities' as *;
2
+
3
+ @mixin digi-notification-error-page--variables {
4
+ --digi--notification-error-page--max-width: var(--digi--container-width--larger);
5
+ --digi--notification-error-page--gutter: calc(var(--digi--container-gutter--larger) + 3rem);
6
+ --digi--notification-error-page--padding-top--tablet:238px;
7
+ --digi--notification-error-page--padding-top--desktop:144px;
8
+ --digi--notification-error-page--padding-top--mobile:48px;
9
+
10
10
  }
11
11
 
12
12
  /** Do not touch! Autogenerated
@@ -1,48 +1,48 @@
1
- @mixin digi-progress-indicator--variables() {
2
- --digi--progress-indicator--margin: 0 0 var(--digi--margin--medium);
3
- --digi--progress-indicator--label--font-size: var(--digi--typography--label--font-size--desktop);
4
- --digi--progress-indicator--label--margin: var(--digi--gutter--medium) 0;
5
-
6
- --digi--progress-indicator--border-color: var(--digi--color--border--neutral-5);
7
- --digi--progress-indicator--border-color--active: var(--digi--global--color--function--success--base);
8
- --digi--progress-indicator--border-color--secondary--active: var(--digi--color--border--secondary);
9
- --digi--progress-indicator--border-width: var(--digi--border-width--primary);
10
-
11
- --digi--progress-indicator--gap: var(--digi--padding--largest);
12
- --digi--progress-indicator--gap--medium: var(--digi--padding--largest);
13
- --digi--progress-indicator--gap--large: var(--digi--padding--largest-3);
14
- --digi--progress-indicator--gap--x-large: var(--digi--padding--largest-3);
15
-
16
- --digi--progress-indicator--heading--font-size: var(--digi--typography--heading-2--font-size--desktop);
17
- --digi--progress-indicator--heading--mobile--font-size: var(--digi--typography--heading-2--font-size--mobile);
18
- --digi--progress-indicator--heading--font-weight: var(--digi--typography--heading-2--font-weight--desktop);
19
-
20
-
21
- --digi--progress-indicator--step--background: var(--digi--color--background--primary);
22
- --digi--progress-indicator--step--background--active: var(--digi--global--color--function--success--base);
23
- --digi--progress-indicator--step--background--secondary--active: var(--digi--color--background--inverted-1);
24
- --digi--progress-indicator--step--size: var(--digi--global--spacing--base);
25
- --digi--progress-indicator--step--size--large: 1.625rem;
26
- --digi--progress-indicator--step--size--active: 1.625rem;
27
- --digi--progress-indicator--step--size--active--large: 1.625rem;
28
-
29
- --digi--progress-indicator--step--line--width: var(--digi--border-width--secondary);
30
- --digi--progress-indicator--step--line--color: var(--digi--color--border--neutral-5);
31
- --digi--progress-indicator--step--line--color--current: var(--digi--color--border--neutral-5);
32
- --digi--progress-indicator--step--line--color--active: var(--digi--global--color--function--success--base);
33
- --digi--progress-indicator--step--line--color--secondary--active: var(--digi--color--border--secondary);
34
- --digi--progress-indicator--step--line--style: dashed;
35
-
36
-
37
- --digi--progress-indicator--icon--width: 1rem;
38
- --digi--progress-indicator--icon--height: 1rem;
39
- --digi--progress-indicator--icon--color: var(--digi--color--text--inverted);
40
-
41
- --digi--progress-indicator--icon-status--width: 1.75rem;
42
- --digi--progress-indicator--icon-status--height: 1.75rem;
43
- --digi--progress-indicator--icon--warning--color: var(--digi--color--background--warning-1);
44
- --digi--progress-indicator--icon--error--color: var(--digi--color--background--danger-1);
45
- --digi--progress-indicator--icon--error--background-color: var(--digi--color--background--danger-2);
1
+ @mixin digi-progress-indicator--variables() {
2
+ --digi--progress-indicator--margin: 0 0 var(--digi--margin--medium);
3
+ --digi--progress-indicator--label--font-size: var(--digi--typography--label--font-size--desktop);
4
+ --digi--progress-indicator--label--margin: var(--digi--gutter--medium) 0;
5
+
6
+ --digi--progress-indicator--border-color: var(--digi--color--border--neutral-5);
7
+ --digi--progress-indicator--border-color--active: var(--digi--global--color--function--success--base);
8
+ --digi--progress-indicator--border-color--secondary--active: var(--digi--color--border--secondary);
9
+ --digi--progress-indicator--border-width: var(--digi--border-width--primary);
10
+
11
+ --digi--progress-indicator--gap: var(--digi--padding--largest);
12
+ --digi--progress-indicator--gap--medium: var(--digi--padding--largest);
13
+ --digi--progress-indicator--gap--large: var(--digi--padding--largest-3);
14
+ --digi--progress-indicator--gap--x-large: var(--digi--padding--largest-3);
15
+
16
+ --digi--progress-indicator--heading--font-size: var(--digi--typography--heading-2--font-size--desktop);
17
+ --digi--progress-indicator--heading--mobile--font-size: var(--digi--typography--heading-2--font-size--mobile);
18
+ --digi--progress-indicator--heading--font-weight: var(--digi--typography--heading-2--font-weight--desktop);
19
+
20
+
21
+ --digi--progress-indicator--step--background: var(--digi--color--background--primary);
22
+ --digi--progress-indicator--step--background--active: var(--digi--global--color--function--success--base);
23
+ --digi--progress-indicator--step--background--secondary--active: var(--digi--color--background--inverted-1);
24
+ --digi--progress-indicator--step--size: var(--digi--global--spacing--base);
25
+ --digi--progress-indicator--step--size--large: 1.625rem;
26
+ --digi--progress-indicator--step--size--active: 1.625rem;
27
+ --digi--progress-indicator--step--size--active--large: 1.625rem;
28
+
29
+ --digi--progress-indicator--step--line--width: var(--digi--border-width--secondary);
30
+ --digi--progress-indicator--step--line--color: var(--digi--color--border--neutral-5);
31
+ --digi--progress-indicator--step--line--color--current: var(--digi--color--border--neutral-5);
32
+ --digi--progress-indicator--step--line--color--active: var(--digi--global--color--function--success--base);
33
+ --digi--progress-indicator--step--line--color--secondary--active: var(--digi--color--border--secondary);
34
+ --digi--progress-indicator--step--line--style: dashed;
35
+
36
+
37
+ --digi--progress-indicator--icon--width: 1rem;
38
+ --digi--progress-indicator--icon--height: 1rem;
39
+ --digi--progress-indicator--icon--color: var(--digi--color--text--inverted);
40
+
41
+ --digi--progress-indicator--icon-status--width: 1.75rem;
42
+ --digi--progress-indicator--icon-status--height: 1.75rem;
43
+ --digi--progress-indicator--icon--warning--color: var(--digi--color--background--warning-1);
44
+ --digi--progress-indicator--icon--error--color: var(--digi--color--background--danger-1);
45
+ --digi--progress-indicator--icon--error--background-color: var(--digi--color--background--danger-2);
46
46
  }
47
47
 
48
48
  /** Do not touch! Autogenerated
@@ -1,17 +1,17 @@
1
- @mixin digi-progress-list-item--variables {
2
- --digi--progress-list-item--indicator--color--primary: var(--digi--color--background--success-1);
3
- --digi--progress-list-item--indicator--color--secondary: var(--digi--color--icons--secondary);
4
- --digi--progress-list-item--indicator--color--tertiary: var(--digi--color--border--neutral-5);
5
-
6
- --digi--progress-list-item--heading--font-size: var(--digi--typography--heading-2--font-size--desktop);
7
- --digi--progress-list-item--heading--font-weight: var(--digi--typography--heading-3--font-weight--desktop);
8
-
9
- --digi--process-list-item--indicator--border--width: var(--digi--border-width--secondary);
10
-
11
- --digi-process-list-item--toggle--padding: 0 var(--digi--padding--medium);
12
-
13
- --digi--progress-list-item---icon--size: 0.875rem;
14
- --digi--progress-list-item--header--toggle-icon--transition: ease-in-out var(--digi--animation--duration--base) all;
1
+ @mixin digi-progress-list-item--variables {
2
+ --digi--progress-list-item--indicator--color--primary: var(--digi--color--background--success-1);
3
+ --digi--progress-list-item--indicator--color--secondary: var(--digi--color--icons--secondary);
4
+ --digi--progress-list-item--indicator--color--tertiary: var(--digi--color--border--neutral-5);
5
+
6
+ --digi--progress-list-item--heading--font-size: var(--digi--typography--heading-2--font-size--desktop);
7
+ --digi--progress-list-item--heading--font-weight: var(--digi--typography--heading-3--font-weight--desktop);
8
+
9
+ --digi--process-list-item--indicator--border--width: var(--digi--border-width--secondary);
10
+
11
+ --digi-process-list-item--toggle--padding: 0 var(--digi--padding--medium);
12
+
13
+ --digi--progress-list-item---icon--size: 0.875rem;
14
+ --digi--progress-list-item--header--toggle-icon--transition: ease-in-out var(--digi--animation--duration--base) all;
15
15
  }
16
16
 
17
17
  /** Do not touch! Autogenerated
@@ -1,13 +1,13 @@
1
- @mixin digi-progress-list--variables {
2
- --digi--progress-list--block--element--modifier--primary: var(--digi--brand--design-token);
3
- --digi--progress-list--block--element--modifier--secondary: var(--digi--brand--design-token);
4
- --digi--progress-list--block--element--modifier--tertiary: var(--digi--brand--design-token);
5
-
6
- --digi--progress-list--content--padding-top: var(--digi--padding--medium);
7
-
8
- --digi--progress-list--heading--font-size: var(--digi--typography--heading-1--font-size--desktop);
9
- --digi--progress-list--heading--font-weight: var(--digi--typography--heading-1--font-weight--desktop);
10
- --digi--progress-list--heading--margin-bottom: var(--digi--margin--largest);
1
+ @mixin digi-progress-list--variables {
2
+ --digi--progress-list--block--element--modifier--primary: var(--digi--brand--design-token);
3
+ --digi--progress-list--block--element--modifier--secondary: var(--digi--brand--design-token);
4
+ --digi--progress-list--block--element--modifier--tertiary: var(--digi--brand--design-token);
5
+
6
+ --digi--progress-list--content--padding-top: var(--digi--padding--medium);
7
+
8
+ --digi--progress-list--heading--font-size: var(--digi--typography--heading-1--font-size--desktop);
9
+ --digi--progress-list--heading--font-weight: var(--digi--typography--heading-1--font-weight--desktop);
10
+ --digi--progress-list--heading--margin-bottom: var(--digi--margin--largest);
11
11
  }
12
12
 
13
13
  /** Do not touch! Autogenerated