@egovernments/digit-ui-components-css 0.2.1 → 2.0.0-dev-01

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 (70) hide show
  1. package/dist/index.css +4 -14513
  2. package/package.json +33 -36
  3. package/src/digitv2/components/FormComposerV2.scss +6 -5
  4. package/src/digitv2/components/accordionV2.scss +59 -59
  5. package/src/digitv2/components/alertCardV2.scss +43 -43
  6. package/src/digitv2/components/backLinkV2.scss +11 -8
  7. package/src/digitv2/components/bodyContainerV2.scss +2 -1
  8. package/src/digitv2/components/bottomSheetV2.scss +22 -19
  9. package/src/digitv2/components/breadcrumbV2.scss +27 -25
  10. package/src/digitv2/components/buttonsV2.scss +72 -72
  11. package/src/digitv2/components/cardV2.scss +21 -14
  12. package/src/digitv2/components/cardbasedoptionsV2.scss +4 -1
  13. package/src/digitv2/components/cardlabelV2.scss +4 -3
  14. package/src/digitv2/components/checkboxV2.scss +33 -32
  15. package/src/digitv2/components/chipV2.scss +46 -43
  16. package/src/digitv2/components/dividerV2.scss +7 -4
  17. package/src/digitv2/components/errorMessageV2.scss +15 -15
  18. package/src/digitv2/components/fieldV1.scss +131 -28
  19. package/src/digitv2/components/fileUploadV2.scss +129 -126
  20. package/src/digitv2/components/filterCardV2.scss +54 -51
  21. package/src/digitv2/components/footerV2.scss +14 -13
  22. package/src/digitv2/components/formCardV2.scss +52 -49
  23. package/src/digitv2/components/hamburgerV2.scss +145 -142
  24. package/src/digitv2/components/headerV2.scss +60 -57
  25. package/src/digitv2/components/headerdropdownV2.scss +72 -69
  26. package/src/digitv2/components/infobuttonV2.scss +18 -15
  27. package/src/digitv2/components/labelFieldPairV2.scss +11 -8
  28. package/src/digitv2/components/landingpagecardV2.scss +73 -70
  29. package/src/digitv2/components/loaderV2.scss +7 -4
  30. package/src/digitv2/components/menuCardV2.scss +34 -31
  31. package/src/digitv2/components/metricCardV2.scss +55 -52
  32. package/src/digitv2/components/mobileNumberV2.scss +10 -10
  33. package/src/digitv2/components/multiSelectDropdownV2.scss +175 -168
  34. package/src/digitv2/components/otpInputV2.scss +29 -26
  35. package/src/digitv2/components/panelCardV2.scss +46 -43
  36. package/src/digitv2/components/panelV2.scss +34 -31
  37. package/src/digitv2/components/popUpV2.scss +94 -91
  38. package/src/digitv2/components/radiobtnV2.scss +24 -23
  39. package/src/digitv2/components/selectDropdownV2.scss +200 -197
  40. package/src/digitv2/components/selectionTagV2.scss +32 -29
  41. package/src/digitv2/components/sidePanelV2.scss +51 -48
  42. package/src/digitv2/components/sidenavV2.scss +119 -116
  43. package/src/digitv2/components/stepperV2.scss +61 -58
  44. package/src/digitv2/components/summaryCardFieldPairV2.scss +25 -22
  45. package/src/digitv2/components/summaryCardV2.scss +30 -27
  46. package/src/digitv2/components/switchV2.scss +34 -31
  47. package/src/digitv2/components/tabV2.scss +29 -26
  48. package/src/digitv2/components/tableV2.scss +152 -149
  49. package/src/digitv2/components/tagV2.scss +27 -24
  50. package/src/digitv2/components/textInputV2.scss +117 -101
  51. package/src/digitv2/components/textareaV2.scss +23 -20
  52. package/src/digitv2/components/textblockV2.scss +31 -28
  53. package/src/digitv2/components/timelineV2.scss +64 -61
  54. package/src/digitv2/components/toastV2.scss +28 -25
  55. package/src/digitv2/components/toggleV2.scss +121 -37
  56. package/src/digitv2/components/tooltipwrapperV2.scss +97 -94
  57. package/src/digitv2/components/treeSelectV2.scss +58 -55
  58. package/src/digitv2/index.scss +136 -134
  59. package/src/digitv2/pages/employee/boundaryFilter.scss +63 -0
  60. package/src/digitv2/pages/employee/inboxsearchcomposer.scss +156 -34
  61. package/src/digitv2/pages/employee/index.scss +4 -3
  62. package/src/digitv2/pages/employee/reactdatatable.scss +15 -15
  63. package/src/digitv2/pages/employee/workbench.scss +29 -28
  64. package/src/digitv2/typography.scss +633 -640
  65. package/src/index.scss +29 -19
  66. package/src/pages/employee/index.scss +26 -26
  67. package/src/pages/employee/login.scss +4 -4
  68. package/src/theme-variables.css +137 -0
  69. package/CHANGELOG.md +0 -231
  70. package/dist/index.min.css +0 -6
package/src/digitv2/components/bottomSheetV2.scss CHANGED
@@ -1,18 +1,21 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-bottom-sheet {
2
5
  position: fixed;
3
6
  left: 0;
4
7
  right: 0;
5
8
  bottom: 0;
6
9
  transition: height 0.3s ease;
7
- background-color: theme(digitv2.lightTheme.paper-primary);
8
- box-shadow: theme(digitv2.spacers.spacer0) -0.063rem theme(digitv2.spacers.spacer1) -0.063rem #00000026;
10
+ background-color: theme("digitv2.lightTheme.paper-primary");
11
+ box-shadow: theme("digitv2.spacers.spacer0") -0.063rem theme("digitv2.spacers.spacer1") -0.063rem #00000026;
9
12
  overflow: hidden;
10
- border-radius: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
13
+ border-radius: theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer0");
11
14
  display: flex;
12
15
  flex-direction: column;
13
16
 
14
17
  &.full {
15
- border-radius: theme(digitv2.spacers.spacer0);
18
+ border-radius: theme("digitv2.spacers.spacer0");
16
19
  }
17
20
  }
18
21
 
@@ -25,10 +28,10 @@
25
28
  .digit-bottom-sheet-header {
26
29
  display: flex;
27
30
  justify-content: center;
28
- height: theme(digitv2.spacers.spacer10);
31
+ height: theme("digitv2.spacers.spacer10");
29
32
 
30
33
  &.actionsEnabled {
31
- height: theme(digitv2.spacers.spacer6);
34
+ height: theme("digitv2.spacers.spacer6");
32
35
  }
33
36
  }
34
37
 
@@ -46,9 +49,9 @@
46
49
  .digit-bottom-sheet-handle-indicator {
47
50
  width: 6.25rem;
48
51
  height: 0.375rem;
49
- border-radius: theme(digitv2.spacers.spacer1);
52
+ border-radius: theme("digitv2.spacers.spacer1");
50
53
  background-color: #D9D9D9;
51
- margin: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
54
+ margin: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer0");
52
55
  }
53
56
 
54
57
  .digit-bottom-sheet-header{
@@ -60,32 +63,32 @@
60
63
  }
61
64
 
62
65
  .digit-bottom-sheet-content {
63
- padding: theme(digitv2.spacers.spacer4);
66
+ padding: theme("digitv2.spacers.spacer4");
64
67
  overflow-y: scroll;
65
68
  display: flex;
66
69
  flex-direction: column;
67
70
  height: 100%;
68
71
 
69
72
  @media (max-aspect-ratio: 9/16) {
70
- gap: theme(digitv2.spacers.spacer4);
73
+ gap: theme("digitv2.spacers.spacer4");
71
74
  }
72
75
 
73
76
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
74
- gap: theme(digitv2.spacers.spacer5);
77
+ gap: theme("digitv2.spacers.spacer5");
75
78
  }
76
79
 
77
80
  @media (min-aspect-ratio: 3/4) {
78
- gap: theme(digitv2.spacers.spacer6);
81
+ gap: theme("digitv2.spacers.spacer6");
79
82
  }
80
83
  }
81
84
 
82
85
  .digit-bottom-sheet-actions {
83
- padding: theme(digitv2.spacers.spacer4);
86
+ padding: theme("digitv2.spacers.spacer4");
84
87
  display: flex;
85
- gap: theme(digitv2.spacers.spacer6);
88
+ gap: theme("digitv2.spacers.spacer6");
86
89
  background-color: #FFFFFF;
87
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.188rem 0.063rem #00000026;
88
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #0000004D;
90
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.188rem 0.063rem #00000026;
91
+ box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #0000004D;
89
92
  justify-content: flex-end;
90
93
 
91
94
  &.equalButtons {
@@ -107,15 +110,15 @@
107
110
 
108
111
  .digit-bottom-sheet-content::-webkit-scrollbar {
109
112
  width: 0.375rem;
110
- background-color: theme(digitv2.lightTheme.generic-background);
113
+ background-color: theme("digitv2.lightTheme.generic-background");
111
114
  }
112
115
 
113
116
  .digit-bottom-sheet-content::-webkit-scrollbar-track {
114
- background-color: theme(digitv2.lightTheme.generic-background);
117
+ background-color: theme("digitv2.lightTheme.generic-background");
115
118
  border-radius: 0.563rem;
116
119
  }
117
120
 
118
121
  .digit-bottom-sheet-content::-webkit-scrollbar-thumb {
119
- background-color: theme(digitv2.lightTheme.generic-divider);
122
+ background-color: theme("digitv2.lightTheme.generic-divider");
120
123
  border-radius: 0.563rem;
121
124
  }
package/src/digitv2/components/breadcrumbV2.scss CHANGED
@@ -1,16 +1,18 @@
1
- @import url("../index.scss");
2
- @import url("../typography.scss");
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
4
+ @import "../typography.scss";
3
5
 
4
6
  .digit-bread-crumb {
5
7
  display: flex;
6
- gap: theme(digitv2.spacers.spacer2);
8
+ gap: theme("digitv2.spacers.spacer2");
7
9
  height: 1.375rem;
8
10
  padding: unset;
9
11
  }
10
12
 
11
13
  .digit-bread-crumb--item {
12
14
  display: flex;
13
- gap: theme(digitv2.spacers.spacer2);
15
+ gap: theme("digitv2.spacers.spacer2");
14
16
 
15
17
 
16
18
  button {
@@ -19,37 +21,37 @@
19
21
 
20
22
 
21
23
  .digit-bread-crumb-content {
22
- @extend .typography.body-s;
23
- font-family: theme(digitv2.fontFamily.sans);
24
- font-style: theme(digitv2.fontStyle.normal);
25
- font-weight: theme(digitv2.fontWeight.regular);
26
- line-height: theme(digitv2.lineHeight.lineheight2);
24
+ @include typography-body-s;
25
+ font-family: theme("digitv2.fontFamily.sans");
26
+ font-style: theme("digitv2.fontStyle.normal");
27
+ font-weight: theme("digitv2.fontWeight.regular");
28
+ line-height: theme("digitv2.lineHeight.lineheight2");
27
29
 
28
30
  @media (max-aspect-ratio: 9/16) {
29
31
  /* Media query for mobile */
30
- font-size: theme(digitv2.fontSize.body-s.mobile);
32
+ font-size: theme("digitv2.fontSize.body-s.mobile");
31
33
  }
32
34
 
33
35
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
34
36
  /* Media query for tablets */
35
- font-size: theme(digitv2.fontSize.body-s.tablet);
37
+ font-size: theme("digitv2.fontSize.body-s.tablet");
36
38
  }
37
39
 
38
40
  @media (min-aspect-ratio: 3/4) {
39
41
  /* Media query for desktop */
40
- font-size: theme(digitv2.fontSize.body-s.desktop);
42
+ font-size: theme("digitv2.fontSize.body-s.desktop");
41
43
  }
42
44
  display: flex !important;
43
- gap: theme(digitv2.spacers.spacer1);
45
+ gap: theme("digitv2.spacers.spacer1");
44
46
  cursor: pointer;
45
47
  text-decoration: none;
46
48
 
47
49
  svg {
48
- width: theme(digitv2.spacers.spacer5);
49
- height: theme(digitv2.spacers.spacer5);
50
+ width: theme("digitv2.spacers.spacer5");
51
+ height: theme("digitv2.spacers.spacer5");
50
52
  }
51
53
 
52
- color: theme(digitv2.lightTheme.primary-1);
54
+ color: theme("digitv2.lightTheme.primary-1");
53
55
 
54
56
  &:hover {
55
57
  text-decoration: underline;
@@ -62,27 +64,27 @@
62
64
 
63
65
  .digit-bread-crumb-content.current,
64
66
  .digit-bread-crumb-seperator {
65
- @extend .typography.body-s;
66
- font-family: theme(digitv2.fontFamily.sans);
67
- font-style: theme(digitv2.fontStyle.normal);
68
- font-weight: theme(digitv2.fontWeight.regular);
69
- line-height: theme(digitv2.lineHeight.lineheight2);
67
+ @include typography-body-s;
68
+ font-family: theme("digitv2.fontFamily.sans");
69
+ font-style: theme("digitv2.fontStyle.normal");
70
+ font-weight: theme("digitv2.fontWeight.regular");
71
+ line-height: theme("digitv2.lineHeight.lineheight2");
70
72
 
71
73
  @media (max-aspect-ratio: 9/16) {
72
74
  /* Media query for mobile */
73
- font-size: theme(digitv2.fontSize.body-s.mobile);
75
+ font-size: theme("digitv2.fontSize.body-s.mobile");
74
76
  }
75
77
 
76
78
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
77
79
  /* Media query for tablets */
78
- font-size: theme(digitv2.fontSize.body-s.tablet);
80
+ font-size: theme("digitv2.fontSize.body-s.tablet");
79
81
  }
80
82
 
81
83
  @media (min-aspect-ratio: 3/4) {
82
84
  /* Media query for desktop */
83
- font-size: theme(digitv2.fontSize.body-s.desktop);
85
+ font-size: theme("digitv2.fontSize.body-s.desktop");
84
86
  }
85
- color: theme(digitv2.lightTheme.text-secondary);
87
+ color: theme("digitv2.lightTheme.text-secondary");
86
88
  text-decoration: none;
87
89
  cursor: default;
88
90
  }
package/src/digitv2/components/buttonsV2.scss CHANGED
@@ -1,11 +1,12 @@
1
- @import url("../index.scss");
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
2
3
 
3
4
  .icon-label-container {
4
5
  @apply flex max-w-full items-center;
5
- gap: theme(digitv2.spacers.spacer2);
6
+ gap: var(--digitv2-spacers-spacer2);
6
7
 
7
8
  &.small{
8
- gap: theme(digitv2.spacers.spacer1);
9
+ gap: var(--digitv2-spacers-spacer1);
9
10
  }
10
11
 
11
12
  .digit-button-customIcon {
@@ -23,7 +24,7 @@
23
24
 
24
25
  &.link {
25
26
  @apply items-start;
26
- gap: theme(digitv2.spacers.spacer1);
27
+ gap: var(--digitv2-spacers-spacer1);
27
28
 
28
29
  .digit-button-customIcon {
29
30
  @apply w-5 h-5 flex-shrink-0;
@@ -31,15 +32,15 @@
31
32
  &.small {
32
33
  width: 0.875rem;
33
34
  height: 0.875rem;
34
- margin-top:theme(digitv2.spacers.spacer1);
35
+ margin-top:var(--digitv2-spacers-spacer1);
35
36
  }
36
37
  }
37
38
  }
38
39
  }
39
40
 
40
41
  .digit-button-label {
41
- @extend .typography.button.large;
42
- @apply text-center text-white w-full overflow-hidden whitespace-no-wrap;
42
+ @include typography-button-large;
43
+ @apply text-center text-white w-full overflow-hidden whitespace-nowrap;
43
44
  text-overflow: ellipsis;
44
45
  }
45
46
 
@@ -47,15 +48,15 @@
47
48
  @apply text-center cursor-pointer outline-none inline-flex bg-white max-w-full items-center;
48
49
  height: fit-content;
49
50
  width: fit-content;
50
- gap: theme(digitv2.spacers.spacer2);
51
+ gap: var(--digitv2-spacers-spacer2);
51
52
  border: 0.063rem solid #000000;
52
- padding-left: theme(digitv2.spacers.spacer6);
53
- padding-right: theme(digitv2.spacers.spacer6);
53
+ padding-left: var(--digitv2-spacers-spacer6);
54
+ padding-right: var(--digitv2-spacers-spacer6);
54
55
  min-width: 6.5625rem;
55
- min-height: theme(digitv2.spacers.spacer10);
56
+ min-height: var(--digitv2-spacers-spacer10);
56
57
 
57
58
  h2 {
58
- @extend .typography.button.large;
59
+ @include typography-button-large;
59
60
  @apply text-black h-5;
60
61
  margin: 0;
61
62
  }
@@ -64,21 +65,21 @@
64
65
  .digit-button-primary {
65
66
  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
66
67
  width: fit-content;
67
- padding-left: theme(digitv2.spacers.spacer6);
68
- padding-right: theme(digitv2.spacers.spacer6);
69
- gap: theme(digitv2.spacers.spacer2);
68
+ padding-left: var(--digitv2-spacers-spacer6);
69
+ padding-right: var(--digitv2-spacers-spacer6);
70
+ gap: var(--digitv2-spacers-spacer2);
70
71
  min-width: 6.5625rem;
71
- background-color: theme(digitv2.lightTheme.primary-1);
72
+ background-color: var(--digitv2-lightTheme-primary-1);
72
73
 
73
74
  h2 {
74
- @extend .typography.button.large;
75
+ @include typography-button-large;
75
76
  @apply text-white;
76
77
  margin: 0;
77
78
  }
78
79
 
79
80
  &.disabled {
80
81
  @apply opacity-50;
81
- background: theme(digitv2.lightTheme.text-disabled);
82
+ background: var(--digitv2-lightTheme-text-disabled);
82
83
  }
83
84
 
84
85
  &:focus {
@@ -86,14 +87,14 @@
86
87
  }
87
88
 
88
89
  &:hover {
89
- box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
90
+ box-shadow: var(--digitv2-spacers-spacer0) -0.125rem var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0) var(--digitv2-lightTheme-text-primary) inset;
90
91
  }
91
92
 
92
93
  &:active {
93
- box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
94
+ box-shadow: var(--digitv2-spacers-spacer0) -0.125rem var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0) #0B0C0C inset, var(--digitv2-spacers-spacer0) 0.063rem 0.175rem var(--digitv2-spacers-spacer0) #00000040;
94
95
 
95
96
  h2 {
96
- font-weight: theme(digitv2.fontWeight.bold);
97
+ font-weight: var(--digitv2-fontWeight-bold);
97
98
  }
98
99
  }
99
100
 
@@ -108,7 +109,7 @@
108
109
  @apply h-8;
109
110
 
110
111
  h2 {
111
- @extend .typography.button.medium;
112
+ @include typography-button-medium;
112
113
  }
113
114
  }
114
115
 
@@ -116,7 +117,7 @@
116
117
  @apply h-6;
117
118
 
118
119
  h2 {
119
- @extend .typography.button.small;
120
+ @include typography-button-small;
120
121
  }
121
122
  }
122
123
 
@@ -124,11 +125,11 @@
124
125
 
125
126
  .digit-button-secondary {
126
127
  @apply text-center cursor-pointer outline-none bg-white flex max-w-full items-center justify-center h-10;
127
- padding-left: theme(digitv2.spacers.spacer6);
128
- padding-right: theme(digitv2.spacers.spacer6);
129
- gap: theme(digitv2.spacers.spacer2);
128
+ padding-left: var(--digitv2-spacers-spacer6);
129
+ padding-right: var(--digitv2-spacers-spacer6);
130
+ gap: var(--digitv2-spacers-spacer2);
130
131
  min-width: 6.5625rem;
131
- border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
132
+ border: 0.063rem solid var(--digitv2-lightTheme-primary-1);
132
133
  width: fit-content;
133
134
 
134
135
  &:focus {
@@ -137,34 +138,34 @@
137
138
 
138
139
  &:hover {
139
140
  @apply bg-white;
140
- box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset;
141
+ box-shadow: var(--digitv2-spacers-spacer0) -0.125rem var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0) var(--digitv2-lightTheme-primary-1) inset;
141
142
  }
142
143
 
143
144
  &:active {
144
145
  @apply bg-white;
145
- box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset, theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #C84C0E33;
146
+ box-shadow: var(--digitv2-spacers-spacer0) -0.125rem var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0) var(--digitv2-lightTheme-primary-1) inset, var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer1) var(--digitv2-spacers-spacer1) var(--digitv2-spacers-spacer0) #C84C0E33;
146
147
 
147
148
  h2 {
148
- font-weight: theme(digitv2.fontWeight.bold);
149
+ font-weight: var(--digitv2-fontWeight-bold);
149
150
  }
150
151
  }
151
152
 
152
153
  h2 {
153
- @extend .typography.button.large;
154
+ @include typography-button-large;
154
155
  margin: 0;
155
- color: theme(digitv2.lightTheme.primary-1);
156
+ color: var(--digitv2-lightTheme-primary-1);
156
157
  }
157
158
 
158
159
  .digit-button-label{
159
- color: theme(digitv2.lightTheme.primary-1);
160
+ color: var(--digitv2-lightTheme-primary-1);
160
161
  }
161
162
 
162
163
  &.disabled {
163
164
  @apply opacity-50;
164
- border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
165
+ border: 0.063rem solid var(--digitv2-lightTheme-text-disabled);
165
166
 
166
167
  h2 {
167
- color: theme(digitv2.lightTheme.text-disabled);
168
+ color: var(--digitv2-lightTheme-text-disabled);
168
169
  }
169
170
  }
170
171
 
@@ -178,7 +179,7 @@
178
179
  @apply h-8;
179
180
 
180
181
  h2 {
181
- @extend .typography.button.medium;
182
+ @include typography-button-medium;
182
183
  }
183
184
  }
184
185
 
@@ -186,7 +187,7 @@
186
187
  @apply h-6;
187
188
 
188
189
  h2 {
189
- @extend .typography.button.small;
190
+ @include typography-button-small;
190
191
  }
191
192
  }
192
193
  }
@@ -195,9 +196,9 @@
195
196
  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
196
197
  background: none;
197
198
  width: fit-content;
198
- padding-left: theme(digitv2.spacers.spacer0);
199
- padding-right: theme(digitv2.spacers.spacer0);
200
- gap: theme(digitv2.spacers.spacer2);
199
+ padding-left: var(--digitv2-spacers-spacer0);
200
+ padding-right: var(--digitv2-spacers-spacer0);
201
+ gap: var(--digitv2-spacers-spacer2);
201
202
  min-width: 6.5625rem;
202
203
 
203
204
  &:focus {
@@ -206,16 +207,16 @@
206
207
 
207
208
  h2 {
208
209
  @apply w-auto;
209
- @extend .typography.button.large;
210
+ @include typography-button-large;
210
211
  margin: 0;
211
- color: theme(digitv2.lightTheme.primary-1);
212
+ color: var(--digitv2-lightTheme-primary-1);
212
213
  }
213
214
 
214
215
  &.disabled {
215
216
  @apply opacity-50;
216
217
 
217
218
  h2 {
218
- color: theme(digitv2.lightTheme.text-disabled);
219
+ color: var(--digitv2-lightTheme-text-disabled);
219
220
  }
220
221
  }
221
222
 
@@ -230,7 +231,7 @@
230
231
  @apply h-8;
231
232
 
232
233
  h2 {
233
- @extend .typography.button.medium;
234
+ @include typography-button-medium;
234
235
  }
235
236
  }
236
237
 
@@ -238,13 +239,13 @@
238
239
  @apply h-6;
239
240
 
240
241
  h2 {
241
- @extend .typography.button.small;
242
+ @include typography-button-small;
242
243
  }
243
244
  }
244
245
 
245
246
  &:active{
246
247
  h2{
247
- font-weight: theme(digitv2.fontWeight.bold);
248
+ font-weight: var(--digitv2-fontWeight-bold);
248
249
  }
249
250
  }
250
251
  }
@@ -254,9 +255,9 @@
254
255
  background: none;
255
256
  width: fit-content;
256
257
  height: fit-content;
257
- padding-left: theme(digitv2.spacers.spacer0);
258
- padding-right: theme(digitv2.spacers.spacer0);
259
- gap: theme(digitv2.spacers.spacer2);
258
+ padding-left: var(--digitv2-spacers-spacer0);
259
+ padding-right: var(--digitv2-spacers-spacer0);
260
+ gap: var(--digitv2-spacers-spacer2);
260
261
  min-width: 4.875rem;
261
262
 
262
263
  &:focus {
@@ -264,21 +265,21 @@
264
265
  }
265
266
 
266
267
  h2 {
267
- @extend .typography.link-L;
268
+ @include typography-link-L;
268
269
  @apply h-auto whitespace-normal text-left w-auto;
269
270
  margin: 0;
270
271
  word-break: break-word;
271
- color: theme(digitv2.lightTheme.primary-1);
272
+ color: var(--digitv2-lightTheme-primary-1);
272
273
  height: fit-content;
273
274
  }
274
275
 
275
276
  &:hover {
276
277
  h2 {
277
- @extend .typography.link-L;
278
+ @include typography-link-L;
278
279
  @apply h-auto whitespace-normal text-left;
279
280
  margin: 0;
280
281
  word-break: break-word;
281
- color: theme(digitv2.lightTheme.primary-1);
282
+ color: var(--digitv2-lightTheme-primary-1);
282
283
  height: fit-content;
283
284
  text-decoration-thickness: 0.125rem;
284
285
  }
@@ -288,21 +289,21 @@
288
289
  @apply opacity-50;
289
290
 
290
291
  h2 {
291
- color: theme(digitv2.lightTheme.text-disabled);
292
+ color: var(--digitv2-lightTheme-text-disabled);
292
293
  }
293
294
  }
294
295
 
295
296
  &.medium {
296
297
 
297
298
  h2 {
298
- @extend .typography.link-S;
299
+ @include typography-link-S;
299
300
  }
300
301
  }
301
302
 
302
303
  &.small {
303
304
 
304
305
  h2 {
305
- @extend .typography.link-XS;
306
+ @include typography-link-XS;
306
307
  }
307
308
  }
308
309
  }
@@ -325,17 +326,17 @@
325
326
  h2 {
326
327
  @apply font-medium text-black flex justify-center items-center;
327
328
  margin: 0;
328
- font-family: theme(digitv2.fontFamily.sans)
329
+ font-family: var(--digitv2-fontFamily-sans)
329
330
  }
330
331
  }
331
332
 
332
333
  .digit-submit-bar {
333
334
  @apply w-full text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
334
- padding-left: theme(digitv2.spacers.spacer6);
335
- padding-right: theme(digitv2.spacers.spacer6);
336
- gap: theme(digitv2.spacers.spacer2);
335
+ padding-left: var(--digitv2-spacers-spacer6);
336
+ padding-right: var(--digitv2-spacers-spacer6);
337
+ gap: var(--digitv2-spacers-spacer2);
337
338
  min-width: 15rem;
338
- background-color: theme(digitv2.lightTheme.primary-1);
339
+ background-color: var(--digitv2-lightTheme-primary-1);
339
340
 
340
341
  &.digit-formcomposer-submitbar{
341
342
  width: fit-content;
@@ -343,7 +344,7 @@
343
344
  }
344
345
 
345
346
  h2 {
346
- @extend .typography.button.large;
347
+ @include typography-button-large;
347
348
  @apply text-white;
348
349
  margin: 0;
349
350
  width: 100%;
@@ -356,7 +357,7 @@
356
357
 
357
358
  &.disabled {
358
359
  @apply opacity-50;
359
- background: theme(digitv2.lightTheme.text-disabled);
360
+ background: var(--digitv2-lightTheme-text-disabled);
360
361
  }
361
362
 
362
363
  &:focus {
@@ -364,21 +365,21 @@
364
365
  }
365
366
 
366
367
  &:hover {
367
- box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
368
+ box-shadow: var(--digitv2-spacers-spacer0) -0.125rem var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0) var(--digitv2-lightTheme-text-primary) inset;
368
369
  }
369
370
 
370
371
  &:active {
371
- box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
372
+ box-shadow: var(--digitv2-spacers-spacer0) -0.125rem var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0) #0B0C0C inset, var(--digitv2-spacers-spacer0) 0.063rem 0.175rem var(--digitv2-spacers-spacer0) #00000040;
372
373
 
373
374
  h2 {
374
- font-weight: theme(digitv2.fontWeight.bold);
375
+ font-weight: var(--digitv2-fontWeight-bold);
375
376
  }
376
377
  }
377
378
  }
378
379
 
379
380
  .digit-selector-button-primary {
380
381
  @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg;
381
- background-color: theme(digitv2.lightTheme.primary-1);
382
+ background-color: var(--digitv2-lightTheme-primary-1);
382
383
 
383
384
  &:focus {
384
385
  @apply outline-none;
@@ -403,7 +404,7 @@
403
404
 
404
405
  .digit-selector-button-primary-disabled {
405
406
  @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg opacity-50;
406
- background-color: theme(digitv2.lightTheme.primary-1);
407
+ background-color: var(--digitv2-lightTheme-primary-1);
407
408
 
408
409
  &:focus {
409
410
  @apply outline-none;
@@ -422,7 +423,7 @@
422
423
  display: flex;
423
424
  flex-direction: row;
424
425
  height: fit-content;
425
- gap:theme(digitv2.spacers.spacer4);
426
+ gap:var(--digitv2-spacers-spacer4);
426
427
 
427
428
  @media (max-width: 30rem) {
428
429
  flex-direction: column;
@@ -442,7 +443,7 @@
442
443
 
443
444
  .header-dropdown-menu {
444
445
  @apply absolute z-30;
445
- bottom: theme(digitv2.spacers.spacer5);
446
+ bottom: var(--digitv2-spacers-spacer5);
446
447
  right: 0;
447
448
  max-height: unset;
448
449
  margin-top: unset;
@@ -459,5 +460,4 @@
459
460
  left:0 ;
460
461
  }
461
462
  }
462
- }
463
-
463
+ }