@egovernments/digit-ui-components-css 0.2.0-beta.9 → 0.2.0-rc.16

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 -14685
  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 +18 -17
  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 +69 -64
  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 +170 -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 +7 -7
  60. package/src/digitv2/pages/employee/inboxsearchcomposer.scss +107 -37
  61. package/src/digitv2/pages/employee/index.scss +4 -4
  62. package/src/digitv2/pages/employee/reactdatatable.scss +13 -13
  63. package/src/digitv2/pages/employee/workbench.scss +29 -28
  64. package/src/digitv2/typography.scss +633 -640
  65. package/src/index.scss +21 -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 -235
  70. package/dist/index.min.css +0 -6
package/src/digitv2/components/stepperV2.scss CHANGED
@@ -1,3 +1,6 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-stepper-container {
2
5
  @apply flex overflow-auto;
3
6
  min-height: 4rem;
@@ -27,65 +30,65 @@
27
30
  .digit-stepper-content {
28
31
  @apply flex flex-col items-center font-sans font-regular;
29
32
  min-height: 4rem;
30
- gap: theme(digitv2.spacers.spacer2);
31
- color: theme(digitv2.lightTheme.text-secondary);
32
- font-size: theme(digitv2.spacers.spacer4);
33
- line-height: theme(digitv2.spacers.spacer6);
33
+ gap: theme("digitv2.spacers.spacer2");
34
+ color: theme("digitv2.lightTheme.text-secondary");
35
+ font-size: theme("digitv2.spacers.spacer4");
36
+ line-height: theme("digitv2.spacers.spacer6");
34
37
  text-align: center;
35
38
 
36
39
 
37
40
  .stepper-label {
38
- @extend .typography.body-s;
39
- font-family: theme(digitv2.fontFamily.sans);
40
- font-style: theme(digitv2.fontStyle.normal);
41
- font-weight: theme(digitv2.fontWeight.regular);
42
- line-height: theme(digitv2.lineHeight.lineheight2);
41
+ @include typography-body-s;
42
+ font-family: theme("digitv2.fontFamily.sans");
43
+ font-style: theme("digitv2.fontStyle.normal");
44
+ font-weight: theme("digitv2.fontWeight.regular");
45
+ line-height: theme("digitv2.lineHeight.lineheight2");
43
46
 
44
47
  @media (max-aspect-ratio: 9/16) {
45
48
  /* Media query for mobile */
46
- font-size: theme(digitv2.fontSize.body-s.mobile);
49
+ font-size: theme("digitv2.fontSize.body-s.mobile");
47
50
  }
48
51
 
49
52
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
50
53
  /* Media query for tablets */
51
- font-size: theme(digitv2.fontSize.body-s.tablet);
54
+ font-size: theme("digitv2.fontSize.body-s.tablet");
52
55
  }
53
56
 
54
57
  @media (min-aspect-ratio: 3/4) {
55
58
  /* Media query for desktop */
56
- font-size: theme(digitv2.fontSize.body-s.desktop);
59
+ font-size: theme("digitv2.fontSize.body-s.desktop");
57
60
  }
58
61
  @apply text-center;
59
- color: theme(digitv2.lightTheme.text-secondary);
60
- letter-spacing: theme(digitv2.spacers.spacer0);
62
+ color: theme("digitv2.lightTheme.text-secondary");
63
+ letter-spacing: theme("digitv2.spacers.spacer0");
61
64
 
62
65
  &.completed {
63
- color: theme(digitv2.lightTheme.text-primary);
66
+ color: theme("digitv2.lightTheme.text-primary");
64
67
  }
65
68
 
66
69
  &.current {
67
- @extend .typography.heading-s;
68
- font-family: theme(digitv2.fontFamily.sans);
69
- font-style: theme(digitv2.fontStyle.normal);
70
- font-weight: theme(digitv2.fontWeight.bold);
71
- line-height: theme(digitv2.lineHeight.lineheight1);
70
+ @include typography-heading-s;
71
+ font-family: theme("digitv2.fontFamily.sans");
72
+ font-style: theme("digitv2.fontStyle.normal");
73
+ font-weight: theme("digitv2.fontWeight.bold");
74
+ line-height: theme("digitv2.lineHeight.lineheight1");
72
75
 
73
76
  @media (max-aspect-ratio: 9/16) {
74
77
  /* Media query for mobile */
75
- font-size: theme(digitv2.fontSize.heading-s.mobile);
78
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
76
79
  }
77
80
 
78
81
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
79
82
  /* Media query for tablets */
80
- font-size: theme(digitv2.fontSize.heading-s.tablet);
83
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
81
84
  }
82
85
 
83
86
  @media (min-aspect-ratio: 3/4) {
84
87
  /* Media query for desktop */
85
- font-size: theme(digitv2.fontSize.heading-s.desktop);
88
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
86
89
  }
87
90
  line-height: 1.37rem;
88
- color: theme(digitv2.lightTheme.text-primary);
91
+ color: theme("digitv2.lightTheme.text-primary");
89
92
  }
90
93
 
91
94
  &.vertical {
@@ -101,10 +104,10 @@
101
104
 
102
105
  .stepper-circle {
103
106
  @apply flex text-center justify-center items-center font-regular w-8 h-8;
104
- background-color: theme(digitv2.lightTheme.paper-primary);
107
+ background-color: theme("digitv2.lightTheme.paper-primary");
105
108
  border-radius: 50%;
106
- margin-top: theme(digitv2.spacers.spacer1);
107
- border: 0.125rem solid theme(digitv2.lightTheme.generic-divider);
109
+ margin-top: theme("digitv2.spacers.spacer1");
110
+ border: 0.125rem solid theme("digitv2.lightTheme.generic-divider");
108
111
  color: #787878;
109
112
 
110
113
  @media (max-aspect-ratio: 9/16) {
@@ -114,17 +117,17 @@
114
117
 
115
118
  .active {
116
119
  @apply font-bold;
117
- background-color: theme(digitv2.lightTheme.primary-1);
118
- border-color: theme(digitv2.lightTheme.primary-1);
119
- color: theme(digitv2.lightTheme.paper-primary);
120
+ background-color: theme("digitv2.lightTheme.primary-1");
121
+ border-color: theme("digitv2.lightTheme.primary-1");
122
+ color: theme("digitv2.lightTheme.paper-primary");
120
123
  }
121
124
 
122
125
  .stepper-connect {
123
126
  @apply absolute;
124
- top: theme(digitv2.spacers.spacer5);
125
- left: calc(50% + (theme(digitv2.spacers.spacer2)));
126
- right: calc(-50% + (theme(digitv2.spacers.spacer2)));
127
- border-top: 0.125rem solid theme(colors.border);
127
+ top: theme("digitv2.spacers.spacer5");
128
+ left: calc(50% + (theme("digitv2.spacers.spacer2")));
129
+ right: calc(-50% + (theme("digitv2.spacers.spacer2")));
130
+ border-top: 0.125rem solid theme("colors.border");
128
131
  z-index: -1;
129
132
  height: 0.125rem;
130
133
 
@@ -154,15 +157,15 @@
154
157
  }
155
158
  }
156
159
  &.active {
157
- background-color: theme(digitv2.lightTheme.primary-1);
158
- border-color: theme(digitv2.lightTheme.primary-1);
159
- height: theme(digitv2.spacers.spacer1);
160
- border-top: theme(digitv2.spacers.spacer1) solid theme(digitv2.lightTheme.primary-1);
160
+ background-color: theme("digitv2.lightTheme.primary-1");
161
+ border-color: theme("digitv2.lightTheme.primary-1");
162
+ height: theme("digitv2.spacers.spacer1");
163
+ border-top: theme("digitv2.spacers.spacer1") solid theme("digitv2.lightTheme.primary-1");
161
164
  }
162
165
 
163
166
  &.vertical {
164
- top: calc(50% + (theme(digitv2.spacers.spacer2)));
165
- bottom: calc(-50% + (theme(digitv2.spacers.spacer2)));
167
+ top: calc(50% + (theme("digitv2.spacers.spacer2")));
168
+ bottom: calc(-50% + (theme("digitv2.spacers.spacer2")));
166
169
  left: -3.1rem;
167
170
  width: 0.125rem;
168
171
  height: auto;
@@ -170,7 +173,7 @@
170
173
 
171
174
  &.active {
172
175
  background-color: transparent;
173
- border-color: theme(digitv2.lightTheme.primary-1);
176
+ border-color: theme("digitv2.lightTheme.primary-1");
174
177
  }
175
178
  @media (max-aspect-ratio: 9/16) {
176
179
  left: -3.65rem;
@@ -193,56 +196,56 @@
193
196
 
194
197
  .digit-stepper-content:hover {
195
198
  .stepper-circle.active {
196
- outline: theme(digitv2.spacers.spacer1) solid #F477381F;
199
+ outline: theme("digitv2.spacers.spacer1") solid #F477381F;
197
200
  }
198
201
 
199
202
  .stepper-label {
200
203
  &.completed {
201
- @extend .typography.heading-s;
202
- font-family: theme(digitv2.fontFamily.sans);
203
- font-style: theme(digitv2.fontStyle.normal);
204
- font-weight: theme(digitv2.fontWeight.bold);
205
- line-height: theme(digitv2.lineHeight.lineheight1);
204
+ @include typography-heading-s;
205
+ font-family: theme("digitv2.fontFamily.sans");
206
+ font-style: theme("digitv2.fontStyle.normal");
207
+ font-weight: theme("digitv2.fontWeight.bold");
208
+ line-height: theme("digitv2.lineHeight.lineheight1");
206
209
 
207
210
  @media (max-aspect-ratio: 9/16) {
208
211
  /* Media query for mobile */
209
- font-size: theme(digitv2.fontSize.heading-s.mobile);
212
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
210
213
  }
211
214
 
212
215
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
213
216
  /* Media query for tablets */
214
- font-size: theme(digitv2.fontSize.heading-s.tablet);
217
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
215
218
  }
216
219
 
217
220
  @media (min-aspect-ratio: 3/4) {
218
221
  /* Media query for desktop */
219
- font-size: theme(digitv2.fontSize.heading-s.desktop);
222
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
220
223
  }
221
224
  line-height: 1.37rem;
222
- color: theme(digitv2.lightTheme.text-primary);
225
+ color: theme("digitv2.lightTheme.text-primary");
223
226
  }
224
227
  }
225
228
  }
226
229
  }
227
230
 
228
231
  .digit-stepper-container::-webkit-scrollbar {
229
- width: theme(digitv2.spacers.spacer0);
230
- height: theme(digitv2.spacers.spacer0);
231
- background-color: theme(digitv2.lightTheme.generic-background);
232
+ width: theme("digitv2.spacers.spacer0");
233
+ height: theme("digitv2.spacers.spacer0");
234
+ background-color: theme("digitv2.lightTheme.generic-background");
232
235
  }
233
236
 
234
237
  .digit-stepper-container::-webkit-scrollbar-track {
235
- background-color: theme(digitv2.lightTheme.generic-background);
238
+ background-color: theme("digitv2.lightTheme.generic-background");
236
239
  border-radius: 0.563rem;
237
240
  }
238
241
 
239
242
  .digit-stepper-container::-webkit-scrollbar-thumb {
240
- background-color: theme(digitv2.lightTheme.generic-divider);
243
+ background-color: theme("digitv2.lightTheme.generic-divider");
241
244
  border-radius: 0.563rem;
242
245
  }
243
246
 
244
247
  .stepper-vertical-divider{
245
248
  position: absolute;
246
- left: theme(digitv2.spacers.spacer10);
247
- margin: theme(digitv2.spacers.spacer0);
249
+ left: theme("digitv2.spacers.spacer10");
250
+ margin: theme("digitv2.spacers.spacer0");
248
251
  }
package/src/digitv2/components/summaryCardFieldPairV2.scss CHANGED
@@ -1,74 +1,77 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-viewcard-field-pair{
2
5
  @apply w-full flex-col;
3
6
  display: flex;
4
7
  height: fit-content;
5
8
  background-color: transparent;
6
- gap: theme(digitv2.spacers.spacer1);
9
+ gap: theme("digitv2.spacers.spacer1");
7
10
 
8
11
  .digit-viewcard-label{
9
- @extend .typography.heading-s;
10
- font-family: theme(digitv2.fontFamily.sans);
11
- font-style: theme(digitv2.fontStyle.normal);
12
- font-weight: theme(digitv2.fontWeight.bold);
13
- line-height: theme(digitv2.lineHeight.lineheight1);
12
+ @include typography-heading-s;
13
+ font-family: theme("digitv2.fontFamily.sans");
14
+ font-style: theme("digitv2.fontStyle.normal");
15
+ font-weight: theme("digitv2.fontWeight.bold");
16
+ line-height: theme("digitv2.lineHeight.lineheight1");
14
17
 
15
18
  @media (max-aspect-ratio: 9/16) {
16
19
  /* Media query for mobile */
17
- font-size: theme(digitv2.fontSize.heading-s.mobile);
20
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
18
21
  }
19
22
 
20
23
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
21
24
  /* Media query for tablets */
22
- font-size: theme(digitv2.fontSize.heading-s.tablet);
25
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
23
26
  }
24
27
 
25
28
  @media (min-aspect-ratio: 3/4) {
26
29
  /* Media query for desktop */
27
- font-size: theme(digitv2.fontSize.heading-s.desktop);
30
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
28
31
  }
29
32
  @apply whitespace-pre-wrap break-words w-full;
30
33
  word-break: break-word;
31
- color: theme(digitv2.lightTheme.text-primary);
34
+ color: theme("digitv2.lightTheme.text-primary");
32
35
  }
33
36
 
34
37
  .digit-viewcard-value{
35
- @extend .typography.body-s;
36
- font-family: theme(digitv2.fontFamily.sans);
37
- font-style: theme(digitv2.fontStyle.normal);
38
- font-weight: theme(digitv2.fontWeight.regular);
39
- line-height: theme(digitv2.lineHeight.lineheight2);
38
+ @include typography-body-s;
39
+ font-family: theme("digitv2.fontFamily.sans");
40
+ font-style: theme("digitv2.fontStyle.normal");
41
+ font-weight: theme("digitv2.fontWeight.regular");
42
+ line-height: theme("digitv2.lineHeight.lineheight2");
40
43
 
41
44
  @media (max-aspect-ratio: 9/16) {
42
45
  /* Media query for mobile */
43
- font-size: theme(digitv2.fontSize.body-s.mobile);
46
+ font-size: theme("digitv2.fontSize.body-s.mobile");
44
47
  }
45
48
 
46
49
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
47
50
  /* Media query for tablets */
48
- font-size: theme(digitv2.fontSize.body-s.tablet);
51
+ font-size: theme("digitv2.fontSize.body-s.tablet");
49
52
  }
50
53
 
51
54
  @media (min-aspect-ratio: 3/4) {
52
55
  /* Media query for desktop */
53
- font-size: theme(digitv2.fontSize.body-s.desktop);
56
+ font-size: theme("digitv2.fontSize.body-s.desktop");
54
57
  }
55
58
  @apply whitespace-pre-wrap break-words w-full;
56
- color: theme(digitv2.lightTheme.text-primary);
59
+ color: theme("digitv2.lightTheme.text-primary");
57
60
  }
58
61
 
59
62
  &.inline{
60
63
  flex-direction: row;
61
64
 
62
65
  @media (min-width: 48rem) {
63
- gap: theme(digitv2.spacers.spacer6);
66
+ gap: theme("digitv2.spacers.spacer6");
64
67
  }
65
68
 
66
69
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
67
- gap: theme(digitv2.spacers.spacer5);
70
+ gap: theme("digitv2.spacers.spacer5");
68
71
  }
69
72
 
70
73
  @media (max-width: 30rem) {
71
- gap: theme(digitv2.spacers.spacer4);
74
+ gap: theme("digitv2.spacers.spacer4");
72
75
  }
73
76
 
74
77
  .digit-viewcard-label{
package/src/digitv2/components/summaryCardV2.scss CHANGED
@@ -1,81 +1,84 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-view-card {
2
5
  .digit-view-card-header {
3
- @extend .typography.heading-l;
4
- font-family: theme(digitv2.fontFamily.sans);
5
- font-style: theme(digitv2.fontStyle.normal);
6
- font-weight: theme(digitv2.fontWeight.bold);
7
- line-height: theme(digitv2.lineHeight.lineheight1);
6
+ @include typography-heading-l;
7
+ font-family: theme("digitv2.fontFamily.sans");
8
+ font-style: theme("digitv2.fontStyle.normal");
9
+ font-weight: theme("digitv2.fontWeight.bold");
10
+ line-height: theme("digitv2.lineHeight.lineheight1");
8
11
 
9
12
  @media (max-aspect-ratio: 9/16) {
10
13
  /* Media query for mobile */
11
- font-size: theme(digitv2.fontSize.heading-l.mobile);
14
+ font-size: theme("digitv2.fontSize.heading-l.mobile");
12
15
  }
13
16
 
14
17
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
15
18
  /* Media query for tablets */
16
- font-size: theme(digitv2.fontSize.heading-l.tablet);
19
+ font-size: theme("digitv2.fontSize.heading-l.tablet");
17
20
  }
18
21
 
19
22
  @media (min-aspect-ratio: 3/4) {
20
23
  /* Media query for desktop */
21
- font-size: theme(digitv2.fontSize.heading-l.desktop);
24
+ font-size: theme("digitv2.fontSize.heading-l.desktop");
22
25
  }
23
26
 
24
- padding-bottom: theme(digitv2.spacers.spacer2);
25
- color: theme(digitv2.lightTheme.text-primary);
27
+ padding-bottom: theme("digitv2.spacers.spacer2");
28
+ color: theme("digitv2.lightTheme.text-primary");
26
29
  line-height: normal;
27
30
 
28
31
  @media (max-width: 30rem) {
29
- padding-bottom: theme(digitv2.spacers.spacer1);
32
+ padding-bottom: theme("digitv2.spacers.spacer1");
30
33
  }
31
34
  }
32
35
 
33
36
  .digit-view-card-subheader {
34
- @extend .typography.heading-m;
35
- font-family: theme(digitv2.fontFamily.sans);
36
- font-style: theme(digitv2.fontStyle.normal);
37
- font-weight: theme(digitv2.fontWeight.bold);
38
- line-height: theme(digitv2.lineHeight.lineheight1);
37
+ @include typography-heading-m;
38
+ font-family: theme("digitv2.fontFamily.sans");
39
+ font-style: theme("digitv2.fontStyle.normal");
40
+ font-weight: theme("digitv2.fontWeight.bold");
41
+ line-height: theme("digitv2.lineHeight.lineheight1");
39
42
 
40
43
  @media (max-aspect-ratio: 9/16) {
41
44
  /* Media query for mobile */
42
- font-size: theme(digitv2.fontSize.heading-m.mobile);
45
+ font-size: theme("digitv2.fontSize.heading-m.mobile");
43
46
  }
44
47
 
45
48
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
46
49
  /* Media query for tablets */
47
- font-size: theme(digitv2.fontSize.heading-m.tablet);
50
+ font-size: theme("digitv2.fontSize.heading-m.tablet");
48
51
  }
49
52
 
50
53
  @media (min-aspect-ratio: 3/4) {
51
54
  /* Media query for desktop */
52
- font-size: theme(digitv2.fontSize.heading-m.desktop);
55
+ font-size: theme("digitv2.fontSize.heading-m.desktop");
53
56
  }
54
57
 
55
- color: theme(digitv2.lightTheme.primary-2);
58
+ color: theme("digitv2.lightTheme.primary-2");
56
59
  line-height: normal;
57
60
  }
58
61
 
59
62
  .view-card-field-pairs {
60
63
  display: flex;
61
64
  flex-direction: column;
62
- gap: theme(digitv2.spacers.spacer4);
65
+ gap: theme("digitv2.spacers.spacer4");
63
66
  position: relative;
64
67
 
65
68
  &.two-column-layout {
66
69
  display: grid;
67
70
  grid-template-columns: repeat(2, 1fr);
68
- gap: theme(digitv2.spacers.spacer4);
71
+ gap: theme("digitv2.spacers.spacer4");
69
72
 
70
73
  &.with-divider{
71
- grid-column-gap:theme(digitv2.spacers.spacer8);
74
+ grid-column-gap:theme("digitv2.spacers.spacer8");
72
75
  }
73
76
  }
74
77
 
75
78
  .vertical-summarycard-divider {
76
79
  position: absolute;
77
80
  height: 100%;
78
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
81
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
79
82
  z-index: 1;
80
83
  }
81
84
  }
@@ -86,15 +89,15 @@
86
89
  flex-direction: column;
87
90
 
88
91
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
89
- gap: theme(digitv2.spacers.spacer5);
92
+ gap: theme("digitv2.spacers.spacer5");
90
93
  }
91
94
 
92
95
  @media (min-aspect-ratio: 3/4) {
93
- gap: theme(digitv2.spacers.spacer6);
96
+ gap: theme("digitv2.spacers.spacer6");
94
97
  }
95
98
 
96
99
  @media (max-aspect-ratio: 9/16) {
97
- gap: theme(digitv2.spacers.spacer4);
100
+ gap: theme("digitv2.spacers.spacer4");
98
101
  }
99
102
 
100
103
  }
package/src/digitv2/components/switchV2.scss CHANGED
@@ -1,13 +1,16 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-switch-container {
2
5
  display: flex;
3
6
  align-items: center;
4
7
  }
5
8
 
6
9
  .digit-switch {
7
- width: theme(digitv2.spacers.spacer11);
8
- height: theme(digitv2.spacers.spacer6);
10
+ width: theme("digitv2.spacers.spacer11");
11
+ height: theme("digitv2.spacers.spacer6");
9
12
  background-color: #BFBFBF;
10
- border-radius: theme(digitv2.spacers.spacer4);
13
+ border-radius: theme("digitv2.spacers.spacer4");
11
14
  position: relative;
12
15
  cursor: pointer;
13
16
  transition: background-color 0.2s ease;
@@ -23,81 +26,81 @@
23
26
  }
24
27
 
25
28
  &.switch-disabled{
26
- background-color: theme(digitv2.lightTheme.text-disabled);
29
+ background-color: theme("digitv2.lightTheme.text-disabled");
27
30
  }
28
31
  }
29
32
 
30
33
  .digit-switch.checked {
31
- background-color: theme(digitv2.lightTheme.primary-1);
34
+ background-color: theme("digitv2.lightTheme.primary-1");
32
35
  }
33
36
 
34
37
  .digit-switch-toggle {
35
38
  width: 1.125rem;
36
39
  height: 1.125rem;
37
- background-color: theme(digitv2.lightTheme.paper-primary);
40
+ background-color: theme("digitv2.lightTheme.paper-primary");
38
41
  border-radius: 50%;
39
42
  position: absolute;
40
43
  left: 0.125rem;
41
44
  transition: left 0.2s ease;
42
- box-shadow: theme(digitv2.spacers.spacer0) 0.125rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #00230B33;
45
+ box-shadow: theme("digitv2.spacers.spacer0") 0.125rem theme("digitv2.spacers.spacer1") theme("digitv2.spacers.spacer0") #00230B33;
43
46
  }
44
47
 
45
48
  .digit-switch.checked .digit-switch-toggle {
46
- left: theme(digitv2.spacers.spacer6);
47
- background-color: theme(digitv2.lightTheme.paper-primary);
49
+ left: theme("digitv2.spacers.spacer6");
50
+ background-color: theme("digitv2.lightTheme.paper-primary");
48
51
  }
49
52
 
50
53
  .digit-switch-label {
51
- @extend .typography.body-s;
52
- margin-left: theme(digitv2.spacers.spacer2);
53
- font-family: theme(digitv2.fontFamily.sans);
54
- font-style: theme(digitv2.fontStyle.normal);
55
- font-weight: theme(digitv2.fontWeight.regular);
56
- line-height: theme(digitv2.lineHeight.lineheight2);
54
+ @include typography-body-s;
55
+ margin-left: theme("digitv2.spacers.spacer2");
56
+ font-family: theme("digitv2.fontFamily.sans");
57
+ font-style: theme("digitv2.fontStyle.normal");
58
+ font-weight: theme("digitv2.fontWeight.regular");
59
+ line-height: theme("digitv2.lineHeight.lineheight2");
57
60
 
58
61
  @media (max-aspect-ratio: 9/16) {
59
- font-size: theme(digitv2.fontSize.body-s.mobile);
62
+ font-size: theme("digitv2.fontSize.body-s.mobile");
60
63
  }
61
64
 
62
65
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
63
- font-size: theme(digitv2.fontSize.body-s.tablet);
66
+ font-size: theme("digitv2.fontSize.body-s.tablet");
64
67
  }
65
68
 
66
69
  @media (min-aspect-ratio: 3/4) {
67
- font-size: theme(digitv2.fontSize.body-s.desktop);
70
+ font-size: theme("digitv2.fontSize.body-s.desktop");
68
71
  }
69
72
 
70
73
  @apply text-left;
71
74
  word-break: break-word;
72
- letter-spacing: theme(digitv2.spacers.spacer0);
73
- color: theme(digitv2.lightTheme.text-primary);
75
+ letter-spacing: theme("digitv2.spacers.spacer0");
76
+ color: theme("digitv2.lightTheme.text-primary");
74
77
 
75
78
  &.labelFirst{
76
- margin:theme(digitv2.spacers.spacer0);
77
- margin-right:theme(digitv2.spacers.spacer2);
79
+ margin:theme("digitv2.spacers.spacer0");
80
+ margin-right:theme("digitv2.spacers.spacer2");
78
81
  }
79
82
  }
80
83
 
81
84
 
82
85
  .digit-switch-shape-on {
83
86
  position: absolute;
84
- top: theme(digitv2.spacers.spacer2);
87
+ top: theme("digitv2.spacers.spacer2");
85
88
  width: 0.125rem;
86
- height: theme(digitv2.spacers.spacer2);
89
+ height: theme("digitv2.spacers.spacer2");
87
90
  border-radius: 0.063rem;
88
91
  left: 0.625rem;
89
- background-color: theme(digitv2.lightTheme.primary-bg);
92
+ background-color: theme("digitv2.lightTheme.primary-bg");
90
93
  }
91
94
 
92
95
  .digit-switch-shape-off {
93
96
  position: absolute;
94
- top: theme(digitv2.spacers.spacer2);
95
- width: theme(digitv2.spacers.spacer2);
96
- height: theme(digitv2.spacers.spacer2);
97
- right: theme(digitv2.spacers.spacer2);
97
+ top: theme("digitv2.spacers.spacer2");
98
+ width: theme("digitv2.spacers.spacer2");
99
+ height: theme("digitv2.spacers.spacer2");
100
+ right: theme("digitv2.spacers.spacer2");
98
101
  background-color: transparent;
99
102
  border-radius: 50%;
100
- border: 0.063rem solid theme(digitv2.lightTheme.generic-background);
103
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-background");
101
104
  }
102
105
 
103
106
  .digit-switch-container.switch-disabled {
@@ -107,6 +110,6 @@
107
110
  }
108
111
 
109
112
  .digit-switch-label {
110
- color: theme(digitv2.lightTheme.text-disabled);
113
+ color: theme("digitv2.lightTheme.text-disabled");
111
114
  }
112
115
  }