@rolster/react-components 18.21.15 → 18.21.18

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 (39) hide show
  1. package/dist/cjs/assets/{index-ogdfILLi.css → index-8PgjMh4T.css} +111 -97
  2. package/dist/es/assets/{index-ogdfILLi.css → index-8PgjMh4T.css} +111 -97
  3. package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css +2 -2
  4. package/dist/esm/components/atoms/Button/Button.css +2 -2
  5. package/dist/esm/components/atoms/ButtonAction/ButtonAction.css +2 -2
  6. package/dist/esm/components/atoms/Input/Input.css +2 -2
  7. package/dist/esm/components/atoms/InputPassword/InputPassword.css +2 -2
  8. package/dist/esm/components/atoms/MessageIcon/MessageIcon.css +1 -1
  9. package/dist/esm/components/atoms/Poster/Poster.css +3 -3
  10. package/dist/esm/components/atoms/Switch/Switch.css +3 -3
  11. package/dist/esm/components/definitions.d.ts +1 -1
  12. package/dist/esm/components/molecules/Ballot/Ballot.css +2 -2
  13. package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +4 -4
  14. package/dist/esm/components/molecules/FieldMoney/FieldMoney.css +1 -1
  15. package/dist/esm/components/molecules/FieldNumber/FieldNumber.css +1 -1
  16. package/dist/esm/components/molecules/FieldPassword/FieldPassword.css +1 -1
  17. package/dist/esm/components/molecules/FieldReadonly/FieldReadonly.css +1 -1
  18. package/dist/esm/components/molecules/FieldText/FieldText.css +1 -1
  19. package/dist/esm/components/molecules/LabelCheckBox/LabelCheckBox.css +1 -1
  20. package/dist/esm/components/molecules/LabelRadioButton/LabelRadioButton.css +1 -1
  21. package/dist/esm/components/molecules/LabelSwitch/LabelSwitch.css +1 -1
  22. package/dist/esm/components/molecules/Pagination/Pagination.css +5 -5
  23. package/dist/esm/components/molecules/PickerDay/PickerDay.css +7 -7
  24. package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.css +8 -8
  25. package/dist/esm/components/molecules/PickerMonth/PickerMonth.css +2 -2
  26. package/dist/esm/components/molecules/PickerSelectorTitle/PickerSelectorTitle.css +1 -1
  27. package/dist/esm/components/molecules/PickerYear/PickerYear.css +7 -7
  28. package/dist/esm/components/molecules/Toolbar/Toolbar.css +2 -2
  29. package/dist/esm/components/organisms/Card/Card.css +1 -1
  30. package/dist/esm/components/organisms/Confirmation/Confirmation.css +3 -3
  31. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.css +6 -6
  32. package/dist/esm/components/organisms/FieldDate/FieldDate.css +13 -7
  33. package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.css +15 -7
  34. package/dist/esm/components/organisms/FormNavigation/FormNavigation.css +1 -1
  35. package/dist/esm/components/organisms/Modal/Modal.css +1 -1
  36. package/dist/esm/components/organisms/PickerDate/PickerDate.css +2 -2
  37. package/dist/esm/components/organisms/PickerDateRange/PickerDateRange.css +3 -3
  38. package/dist/esm/components/organisms/Snackbar/Snackbar.css +3 -3
  39. package/package.json +3 -3
package/dist/esm/components/atoms/Button/Button.css CHANGED
@@ -15,7 +15,7 @@
15
15
  --pvt-stroked-font-color: var(--rls-theme-color-500);
16
16
  --pvt-stroked-border: var(--rls-theme-border-1-500);
17
17
  --pvt-outline-background: transparent;
18
- --pvt-outline-font-color: var(--rls-app-color-300);
18
+ --pvt-outline-font-color: var(--rls-app-color-600);
19
19
  --pvt-outline-border: var(--rls-app-border-1-300);
20
20
  --pvt-ghost-background: none;
21
21
  --pvt-ghost-font-color: var(--rls-theme-color-500);
@@ -67,7 +67,7 @@
67
67
  --pvt-stroked-font-color: var(--rls-theme-color-300);
68
68
  --pvt-stroked-border: var(--rls-theme-border-1-300);
69
69
  --pvt-outline-background: transparent;
70
- --pvt-outline-font-color: var(--rls-app-color-100);
70
+ --pvt-outline-font-color: var(--rls-app-color-400);
71
71
  --pvt-outline-border: var(--rls-app-border-1-100);
72
72
  --pvt-ghost-background: transparent;
73
73
  --pvt-ghost-font-color: var(--rls-theme-color-300);
package/dist/esm/components/atoms/ButtonAction/ButtonAction.css CHANGED
@@ -72,8 +72,8 @@
72
72
  white-space: nowrap;
73
73
  pointer-events: none;
74
74
  transform: translateX(-50%);
75
- background: var(--rls-dark-color-500);
76
- color: var(--rls-light-color-500);
75
+ background: var(--rls-app-color-900);
76
+ color: var(--rls-app-color-050);
77
77
  transition: opacity 200ms 0ms var(--rls-deceleration-curve);
78
78
  opacity: var(--pvt-tooltip-opacity);
79
79
  transition-delay: var(--pvt-tooltip-transition-delay);
package/dist/esm/components/atoms/Input/Input.css CHANGED
@@ -34,11 +34,11 @@
34
34
  -webkit-appearance: none;
35
35
  }
36
36
  .rls-input__component::placeholder {
37
- color: var(--rls-app-color-100);
37
+ color: var(--rls-app-color-400);
38
38
  }
39
39
  .rls-input__component::selection {
40
40
  background: var(--rls-theme-color-700);
41
- color: var(--rls-light-color-500);
41
+ color: var(--rls-app-color-050);
42
42
  }
43
43
  .rls-input__component:disabled {
44
44
  opacity: 0.5;
package/dist/esm/components/atoms/InputPassword/InputPassword.css CHANGED
@@ -25,11 +25,11 @@
25
25
  -webkit-appearance: none;
26
26
  }
27
27
  .rls-input-password__component::placeholder {
28
- color: var(--rls-app-color-100);
28
+ color: var(--rls-app-color-400);
29
29
  }
30
30
  .rls-input-password__component::selection {
31
31
  background: var(--rls-theme-color-700);
32
- color: var(--rls-light-color-500);
32
+ color: var(--rls-app-color-050);
33
33
  }
34
34
  .rls-input-password__component:disabled {
35
35
  opacity: 0.5;
package/dist/esm/components/atoms/MessageIcon/MessageIcon.css CHANGED
@@ -8,5 +8,5 @@
8
8
  .rls-message-icon span {
9
9
  font-size: var(--rls-caption-font-size);
10
10
  letter-spacing: var(--rls-caption-letter-spacing);
11
- color: var(--rls-app-color-300);
11
+ color: var(--rls-app-color-600);
12
12
  }
package/dist/esm/components/atoms/Poster/Poster.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .rls-poster {
2
2
  --pvt-background: var(--rls-theme-color-100);
3
3
  --pvt-border-content: none;
4
- --pvt-border-color: var(--rls-app-color-100);
4
+ --pvt-border-color: var(--rls-app-color-400);
5
5
  position: relative;
6
6
  display: block;
7
7
  width: auto;
@@ -13,8 +13,8 @@
13
13
  padding: var(--rlc-poster-padding);
14
14
  text-align: var(--rlc-poster-text-align);
15
15
  border-radius: var(--rls-sizing-x2);
16
- color: var(--rls-app-color-300);
17
- background: var(--rls-app-background-100);
16
+ color: var(--rls-app-color-600);
17
+ background: var(--rls-app-color-200);
18
18
  border: var(--pvt-border-content);
19
19
  }
20
20
  .rls-poster[rls-theme] {
package/dist/esm/components/atoms/Switch/Switch.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .rls-switch {
2
2
  --pvt-element-left: var(--rls-sizing-x1);
3
- --pvt-element-background: var(--rls-app-background-500);
4
- --pvt-bar-background: var(--rls-app-background-100);
3
+ --pvt-element-background: var(--rls-app-color-050);
4
+ --pvt-bar-background: var(--rls-app-color-200);
5
5
  max-width: var(--rls-sizing-x20);
6
6
  }
7
7
  .rls-switch:hover {
@@ -34,7 +34,7 @@
34
34
  padding: var(--rls-sizing-x2);
35
35
  box-sizing: border-box;
36
36
  border-radius: 50%;
37
- background: var(--rls-app-background-500);
37
+ background: var(--rls-app-color-050);
38
38
  box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
39
39
  /*transition: left 240ms var(--rls-standard-curve);*/
40
40
  }
package/dist/esm/components/definitions.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type RlsTheme = 'standard' | 'success' | 'info' | 'warning' | 'danger' | 'amaizing' | 'amber' | 'smartness' | 'obsidian';
1
+ export type RlsTheme = 'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'warning' | 'danger' | 'berry' | 'mountains' | 'amaizing' | 'amber' | 'smartness' | 'obsidian';
2
2
  export interface RlsComponent extends React.PropsWithChildren {
3
3
  identifier?: string;
4
4
  rlsTheme?: RlsTheme;
package/dist/esm/components/molecules/Ballot/Ballot.css CHANGED
@@ -32,7 +32,7 @@
32
32
  --rlc-skeleton-text-font-size: var(--rlc-ballot-title-font-size);
33
33
  position: relative;
34
34
  width: 100%;
35
- color: var(--rls-app-color-500);
35
+ color: var(--rls-app-color-900);
36
36
  overflow: hidden;
37
37
  white-space: nowrap;
38
38
  text-overflow: ellipsis;
@@ -48,7 +48,7 @@
48
48
  --rlc-skeleton-text-font-size: var(--rlc-ballot-subtitle-font-size);
49
49
  position: relative;
50
50
  width: var(--rlc-ballot-subtitle-width);
51
- color: var(--rls-app-color-300);
51
+ color: var(--rls-app-color-600);
52
52
  font-weight: var(--rlc-ballot-subtitle-font-weight);
53
53
  font-size: var(--rls-ballot-subtitle-font-size);
54
54
  letter-spacing: var(--rlc-ballot-subtitle-letter-spacing);
package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css CHANGED
@@ -54,7 +54,7 @@
54
54
  overflow-y: auto;
55
55
  overflow-x: hidden;
56
56
  z-index: var(--rls-z-index-2);
57
- background: var(--rls-app-background-500);
57
+ background: var(--rls-app-color-050);
58
58
  border: var(--rls-theme-border-1-500);
59
59
  transform: var(--rlc-button-toggle-ul-transform);
60
60
  transform-origin: 0% 0%;
@@ -72,9 +72,9 @@
72
72
  font-size: 6rem;
73
73
  letter-spacing: 0.825px;
74
74
  text-transform: uppercase;
75
- color: var(--rls-app-color-300);
75
+ color: var(--rls-app-color-600);
76
76
  }
77
77
  .rls-button-toggle__list ul li:hover {
78
- background: var(--rls-app-background-300);
79
- color: var(--rls-app-color-500);
78
+ background: var(--rls-app-color-100);
79
+ color: var(--rls-app-color-900);
80
80
  }
package/dist/esm/components/molecules/FieldMoney/FieldMoney.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rls-field-money {
2
- --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2
+ --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
3
3
  position: relative;
4
4
  width: 100%;
5
5
  box-sizing: border-box;
package/dist/esm/components/molecules/FieldNumber/FieldNumber.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rls-field-number {
2
- --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2
+ --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
3
3
  position: relative;
4
4
  width: 100%;
5
5
  box-sizing: border-box;
package/dist/esm/components/molecules/FieldPassword/FieldPassword.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rls-field-password {
2
- --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2
+ --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
3
3
  --rlc-action-ripple-dimension: var(--rls-sizing-x12);
4
4
  --rlc-action-ripple-position: -6rem;
5
5
  position: relative;
package/dist/esm/components/molecules/FieldReadonly/FieldReadonly.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rls-field-readonly {
2
- --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2
+ --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
3
3
  --pvt-component-font-color: var(--rlc-input-font-color);
4
4
  position: relative;
5
5
  width: 100%;
package/dist/esm/components/molecules/FieldText/FieldText.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rls-field-text {
2
- --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2
+ --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
3
3
  position: relative;
4
4
  width: 100%;
5
5
  box-sizing: border-box;
package/dist/esm/components/molecules/LabelCheckBox/LabelCheckBox.css CHANGED
@@ -24,7 +24,7 @@
24
24
  max-width: calc(100% - var(--rls-sizing-x16));
25
25
  height: var(--pvt-text-height);
26
26
  line-height: var(--rls-sizing-x12);
27
- color: var(--rls-app-color-300);
27
+ color: var(--rls-app-color-600);
28
28
  font-size: var(--rls-label-font-size);
29
29
  font-weight: var(--rls-font-weight-medium);
30
30
  letter-spacing: var(--rls-label-letter-spacing);
package/dist/esm/components/molecules/LabelRadioButton/LabelRadioButton.css CHANGED
@@ -26,7 +26,7 @@
26
26
  max-width: calc(100% - var(--rls-sizing-x16));
27
27
  height: var(--pvt-text-height);
28
28
  line-height: var(--rls-sizing-x12);
29
- color: var(--rls-app-color-300);
29
+ color: var(--rls-app-color-600);
30
30
  font-size: var(--rls-label-font-size);
31
31
  font-weight: var(--rls-font-weight-medium);
32
32
  letter-spacing: var(--rls-label-letter-spacing);
package/dist/esm/components/molecules/LabelSwitch/LabelSwitch.css CHANGED
@@ -24,7 +24,7 @@
24
24
  max-width: calc(100% - var(--rls-sizing-x28));
25
25
  height: var(--pvt-text-height);
26
26
  line-height: var(--rls-sizing-x12);
27
- color: var(--rls-app-color-300);
27
+ color: var(--rls-app-color-600);
28
28
  font-size: var(--rls-label-font-size);
29
29
  font-weight: var(--rls-font-weight-medium);
30
30
  letter-spacing: var(--rls-label-letter-spacing);
package/dist/esm/components/molecules/Pagination/Pagination.css CHANGED
@@ -15,8 +15,8 @@
15
15
  margin: 0rem var(--rls-sizing-x4);
16
16
  }
17
17
  .rls-pagination__page {
18
- background: var(--rls-app-background-100);
19
- color: var(--rls-app-color-500);
18
+ background: var(--rls-app-color-200);
19
+ color: var(--rls-app-color-900);
20
20
  cursor: default;
21
21
  margin: auto 0rem;
22
22
  text-align: center;
@@ -33,10 +33,10 @@
33
33
  }
34
34
  .rls-pagination__page--active {
35
35
  background: var(--rls-theme-gradient-500);
36
- color: var(--rls-light-color-500);
36
+ color: var(--rls-app-color-050);
37
37
  }
38
38
  .rls-pagination__description {
39
- color: var(--rls-app-color-500);
39
+ color: var(--rls-app-color-900);
40
40
  margin: 0rem var(--rls-sizing-x4);
41
41
  width: auto;
42
42
  height: var(--rls-sizing-x20);
@@ -51,7 +51,7 @@
51
51
  .rls-pagination__action {
52
52
  background: none;
53
53
  outline: none;
54
- color: var(--rls-app-color-300);
54
+ color: var(--rls-app-color-600);
55
55
  height: var(--rls-sizing-x18);
56
56
  width: var(--rls-sizing-x18);
57
57
  padding: var(--rls-sizing-x3);
package/dist/esm/components/molecules/PickerDay/PickerDay.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .rls-picker-day {
2
2
  --pvt-span-background: transparent;
3
- --pvt-span-font-color: var(--rls-app-color-500);
3
+ --pvt-span-font-color: var(--rls-app-color-900);
4
4
  --pvt-span-border: var(--rls-border-1) solid transparent;
5
5
  position: relative;
6
6
  width: 100%;
@@ -11,8 +11,8 @@
11
11
  .rls-picker-day__header {
12
12
  display: flex;
13
13
  margin-bottom: var(--rls-sizing-x4);
14
- background: var(--rls-app-background-100);
15
- color: var(--rls-app-color-500);
14
+ background: var(--rls-app-color-100);
15
+ color: var(--rls-app-color-900);
16
16
  border-radius: var(--rls-sizing-x4);
17
17
  }
18
18
  .rls-picker-day__label {
@@ -67,14 +67,14 @@
67
67
  --pvt-span-border: var(--rls-theme-border-1-500);
68
68
  }
69
69
  .rls-picker-day__element--forbidden {
70
- --pvt-span-background: var(--rls-app-background-300);
71
- --pvt-span-font-color: var(--rls-app-color-100);
72
- --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
70
+ --pvt-span-background: var(--rls-app-color-100);
71
+ --pvt-span-font-color: var(--rls-app-color-400);
72
+ --pvt-span-border: var(--rls-border-1) solid var(--rls-app-color-100);
73
73
  pointer-events: none;
74
74
  }
75
75
  .rls-picker-day__element--disabled {
76
76
  --pvt-span-background: transparent;
77
- --pvt-span-font-color: var(--rls-app-color-100);
77
+ --pvt-span-font-color: var(--rls-app-color-400);
78
78
  --pvt-span-border: var(--rls-border-1) solid transparent;
79
79
  pointer-events: none;
80
80
  }
package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.css CHANGED
@@ -22,8 +22,8 @@
22
22
  }
23
23
  .rls-picker-day-range__header {
24
24
  display: flex;
25
- background: var(--rls-app-background-100);
26
- color: var(--rls-app-color-500);
25
+ background: var(--rls-app-color-200);
26
+ color: var(--rls-app-color-900);
27
27
  border-radius: var(--rls-sizing-x2);
28
28
  }
29
29
  .rls-picker-day-range__label {
@@ -44,7 +44,7 @@
44
44
  .rls-picker-day-range__element__span {
45
45
  position: relative;
46
46
  display: block;
47
- color: var(--rls-app-color-500);
47
+ color: var(--rls-app-color-900);
48
48
  border-radius: var(--rls-sizing-x4);
49
49
  height: var(--rls-sizing-x18);
50
50
  line-height: var(--rls-sizing-x18);
@@ -57,22 +57,22 @@
57
57
  color: var(--pvt-span-nothover-font-color);
58
58
  }
59
59
  .rls-picker-day-range__element__span:hover {
60
- color: var(--rls-light-color-500);
60
+ color: var(--rls-app-color-050);
61
61
  background: var(--rls-theme-color-900);
62
62
  }
63
63
  .rls-picker-day-range__element--end {
64
- --pvt-span-nothover-background: var(--rls-app-color-500);
65
- --pvt-span-nothover-font-color: var(--rls-app-background-500);
64
+ --pvt-span-nothover-background: var(--rls-app-color-900);
65
+ --pvt-span-nothover-font-color: var(--rls-app-color-050);
66
66
  }
67
67
  .rls-picker-day-range__element--source {
68
68
  --pvt-span-nothover-background: var(--rls-theme-color-500);
69
- --pvt-span-nothover-font-color: var(--rls-light-color-500);
69
+ --pvt-span-nothover-font-color: var(--rls-app-color-050);
70
70
  }
71
71
  .rls-picker-day-range__element--ranged {
72
72
  --pvt-span-nothover-background: var(--rls-theme-color-100);
73
73
  }
74
74
  .rls-picker-day-range__element--forbidden {
75
- --pvt-span-background: var(--rls-app-background-100);
75
+ --pvt-span-background: var(--rls-app-color-200);
76
76
  pointer-events: none;
77
77
  opacity: 0.5;
78
78
  }
package/dist/esm/components/molecules/PickerMonth/PickerMonth.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .rls-picker-month {
2
2
  --pvt-component-background: transparent;
3
- --pvt-component-font-color: var(--rls-app-color-500);
3
+ --pvt-component-font-color: var(--rls-app-color-900);
4
4
  --pvt-component-border: var(--rls-border-1) solid transparent;
5
5
  position: relative;
6
6
  display: grid;
@@ -42,7 +42,7 @@
42
42
  }
43
43
  .rls-picker-month__component--disabled {
44
44
  --pvt-component-background: transparent;
45
- --pvt-component-font-color: var(--rls-app-color-100);
45
+ --pvt-component-font-color: var(--rls-app-color-400);
46
46
  --pvt-component-border: var(--rls-border-1) solid transparent;
47
47
  pointer-events: none;
48
48
  }
package/dist/esm/components/molecules/PickerSelectorTitle/PickerSelectorTitle.css CHANGED
@@ -4,7 +4,7 @@
4
4
  align-items: center;
5
5
  }
6
6
  .rls-picker-selector-title span {
7
- color: var(--rls-app-color-300);
7
+ color: var(--rls-app-color-600);
8
8
  cursor: default;
9
9
  height: var(--rls-sizing-x14);
10
10
  line-height: var(--rls-sizing-x14);
package/dist/esm/components/molecules/PickerYear/PickerYear.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .rls-picker-year {
2
2
  --pvt-component-background: transparent;
3
- --pvt-component-font-color: var(--rls-app-color-300);
3
+ --pvt-component-font-color: var(--rls-app-color-600);
4
4
  --pvt-component-border: var(--rls-border-1) solid transparent;
5
5
  position: relative;
6
6
  width: 100%;
@@ -15,8 +15,8 @@
15
15
  align-items: center;
16
16
  box-sizing: border-box;
17
17
  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
18
- color: var(--rls-app-color-500);
19
- background: var(--rls-app-background-100);
18
+ color: var(--rls-app-color-900);
19
+ background: var(--rls-app-color-200);
20
20
  border-radius: var(--rls-sizing-x4);
21
21
  }
22
22
  .rls-picker-year__header > label {
@@ -30,7 +30,7 @@
30
30
  line-height: var(--rls-sizing-x16);
31
31
  }
32
32
  .rls-picker-year__action button {
33
- color: var(--rls-app-color-500);
33
+ color: var(--rls-app-color-900);
34
34
  background: transparent;
35
35
  outline: none;
36
36
  width: inherit;
@@ -81,9 +81,9 @@
81
81
  --pvt-component-border: var(--rls-theme-border-1-500);
82
82
  }
83
83
  .rls-picker-year__element--disabled {
84
- --pvt-span-background: var(--rls-app-background-300);
85
- --pvt-component-font-color: var(--rls-app-color-100);
86
- --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
84
+ --pvt-span-background: var(--rls-app-color-100);
85
+ --pvt-component-font-color: var(--rls-app-color-400);
86
+ --pvt-span-border: var(--rls-border-1) solid var(--rls-app-color-100);
87
87
  pointer-events: none;
88
88
  }
89
89
  .rls-picker-year__span {
package/dist/esm/components/molecules/Toolbar/Toolbar.css CHANGED
@@ -22,7 +22,7 @@
22
22
  white-space: nowrap;
23
23
  }
24
24
  .rls-toolbar__title {
25
- color: var(--rls-app-color-500);
25
+ color: var(--rls-app-color-900);
26
26
  height: var(--rls-sizing-x12);
27
27
  line-height: var(--rls-sizing-x12);
28
28
  font-size: 8.125rem;
@@ -30,7 +30,7 @@
30
30
  font-weight: var(--rls-font-weight-bold);
31
31
  }
32
32
  .rls-toolbar__subtitle {
33
- color: var(--rls-app-color-300);
33
+ color: var(--rls-app-color-600);
34
34
  }
35
35
  .rls-toolbar__actions {
36
36
  display: flex;
package/dist/esm/components/organisms/Card/Card.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rls-card {
2
- background: var(--rls-app-background-500);
2
+ background: var(--rls-app-color-050);
3
3
  border-radius: var(--rls-sizing-x4);
4
4
  box-shadow: var(--rls-light-shadow-center-8);
5
5
  }
package/dist/esm/components/organisms/Confirmation/Confirmation.css CHANGED
@@ -50,7 +50,7 @@
50
50
  box-sizing: border-box;
51
51
  z-index: var(--rls-z-index-4);
52
52
  border-radius: var(--rls-sizing-x4);
53
- background: var(--rls-app-background-500);
53
+ background: var(--rls-app-color-050);
54
54
  box-shadow: var(--rls-app-shadow-4);
55
55
  transform: var(--pvt-component-transform);
56
56
  /*transition: opacity 125ms 0ms var(--rls-deceleration-curve),
@@ -68,7 +68,7 @@
68
68
  }
69
69
  .rls-confirmation__title {
70
70
  text-align: center;
71
- color: var(--rls-app-color-500);
71
+ color: var(--rls-app-color-900);
72
72
  font-weight: var(--rls-font-weight-bold);
73
73
  font-size: var(--pvt-title-font-size);
74
74
  line-height: var(--pvt-title-line-height);
@@ -91,7 +91,7 @@
91
91
  box-sizing: border-box;
92
92
  }
93
93
  .rls-confirmation__message {
94
- color: var(--rls-app-color-300);
94
+ color: var(--rls-app-color-600);
95
95
  text-align: center;
96
96
  }
97
97
  .rls-confirmation__message p {
package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --pvt-control-opacity: 1;
4
4
  }
5
5
  .rls-field-autocomplete.rls-field-box--selected {
6
- --pvt-control-width: calc(100% - var(--rlc-fieldlist-action-dimension));
6
+ --pvt-control-width: calc(100% - var(--rlc-fieldbox-action-dimension));
7
7
  }
8
8
  .rls-field-autocomplete.rls-field-box--disabled {
9
9
  --pvt-control-opacity: 0.5;
@@ -17,13 +17,13 @@
17
17
  width: 100%;
18
18
  margin-top: var(--rls-sizing-x2);
19
19
  margin-bottom: var(--rls-sizing-x6);
20
- background: var(--rls-app-background-300);
20
+ background: var(--rls-app-color-100);
21
21
  border-radius: var(--rls-sizing-x4);
22
22
  padding: var(--rls-sizing-x4);
23
23
  box-sizing: border-box;
24
24
  }
25
25
  .rls-field-autocomplete .rls-field-list__ul__search button {
26
- color: var(--rls-app-color-300);
26
+ color: var(--rls-app-color-600);
27
27
  background: transparent;
28
28
  }
29
29
  .rls-field-autocomplete
@@ -43,17 +43,17 @@
43
43
  border: none;
44
44
  outline: none;
45
45
  background: transparent;
46
- color: var(--rls-app-color-500);
46
+ color: var(--rls-app-color-900);
47
47
  font-size: var(--rls-input-font-size);
48
48
  font-weight: var(--rls-font-weight-medium);
49
49
  letter-spacing: var(--rls-input-letter-spacing);
50
50
  }
51
51
  .rls-field-autocomplete .rls-field-list__ul__control::placeholder {
52
- color: var(--rls-app-color-100);
52
+ color: var(--rls-app-color-400);
53
53
  }
54
54
  .rls-field-autocomplete .rls-field-list__ul__control::selection {
55
55
  background: var(--rls-theme-color-700);
56
- color: var(--rls-light-color-500);
56
+ color: var(--rls-app-color-050);
57
57
  }
58
58
  .rls-field-autocomplete .rls-field-list__ul__control:disabled {
59
59
  opacity: 0.5;
package/dist/esm/components/organisms/FieldDate/FieldDate.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rls-field-date {
2
- --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2
+ --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
3
3
  position: relative;
4
4
  width: 100%;
5
5
  box-sizing: border-box;
@@ -17,24 +17,30 @@
17
17
  border: none;
18
18
  outline: none;
19
19
  background: transparent;
20
- color: var(--rls-app-color-500);
20
+ color: var(--rls-app-color-900);
21
21
  font-weight: var(--rls-font-weight-medium);
22
22
  font-size: var(--rlc-input-font-size);
23
23
  letter-spacing: var(--rlc-input-letter-spacing);
24
24
  }
25
25
  .rls-field-date__control::placeholder {
26
- color: var(--rls-app-color-100);
26
+ color: var(--rls-app-color-400);
27
27
  }
28
28
  .rls-field-date__control:disabled {
29
29
  opacity: 0.5;
30
30
  }
31
31
  .rls-field-date__action {
32
- color: var(--rls-app-color-300);
33
- width: var(--rls-sizing-x12);
34
- height: var(--rls-sizing-x12);
32
+ --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
33
+ width: var(--rlc-fieldbox-action-dimension);
34
+ height: var(--rlc-fieldbox-action-dimension);
35
+ color: var(--rls-app-color-600);
35
36
  padding: 0rem;
36
- background: transparent;
37
+ outline: none;
38
+ border-radius: 50%;
39
+ background: var(--rlc-fieldbox-action-background);
37
40
  }
38
41
  .rls-field-date__action:disabled {
39
42
  opacity: 0.5;
40
43
  }
44
+ .rls-field-date__action .rls-icon {
45
+ margin: 1rem;
46
+ }
package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rls-field-date-range {
2
- --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2
+ --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
3
3
  position: relative;
4
4
  width: 100%;
5
5
  box-sizing: border-box;
@@ -20,16 +20,24 @@
20
20
  letter-spacing: var(--rlc-input-letter-spacing);
21
21
  }
22
22
  .rls-field-date-range__control::placeholder {
23
- color: var(--rls-app-color-100);
23
+ color: var(--rls-app-color-400);
24
24
  }
25
25
  .rls-field-date-range__control:disabled {
26
26
  opacity: 0.5;
27
27
  }
28
28
  .rls-field-date-range__action {
29
- color: var(--rls-app-color-300);
30
- width: var(--rls-sizing-x12);
31
- height: var(--rls-sizing-x12);
29
+ --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
30
+ width: var(--rlc-fieldbox-action-dimension);
31
+ height: var(--rlc-fieldbox-action-dimension);
32
+ color: var(--rls-app-color-600);
32
33
  padding: 0rem;
33
- margin-left: var(--rls-sizing-x2);
34
- background: transparent;
34
+ outline: none;
35
+ border-radius: 50%;
36
+ background: var(--rlc-fieldbox-action-background);
37
+ }
38
+ .rls-field-date-range__action:disabled {
39
+ opacity: 0.5;
40
+ }
41
+ .rls-field-date-range__action .rls-icon {
42
+ margin: 1rem;
35
43
  }
package/dist/esm/components/organisms/FormNavigation/FormNavigation.css CHANGED
@@ -10,7 +10,7 @@
10
10
  padding: var(--rls-sizing-x8) var(--rls-sizing-x8) var(--rls-sizing-x12)
11
11
  var(--rls-sizing-x8);
12
12
  box-sizing: border-box;
13
- background: var(--rls-app-background-500);
13
+ background: var(--rls-app-color-050);
14
14
  border-radius: var(--rls-sizing-x4);
15
15
  box-shadow: var(--rls-dark-shadow-center-8);
16
16
  transform: translateX(calc(100% + var(--rls-sizing-x16)));
package/dist/esm/components/organisms/Modal/Modal.css CHANGED
@@ -39,7 +39,7 @@
39
39
  z-index: var(--rls-z-index-2);
40
40
  overflow: var(--pvt-component-overflow);
41
41
  border-radius: var(--rls-sizing-x4);
42
- background: var(--rls-app-background-500);
42
+ background: var(--rls-app-color-050);
43
43
  transform: var(--pvt-component-transform);
44
44
  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
45
45
  transform 125ms 0ms var(--rls-deceleration-curve),
package/dist/esm/components/organisms/PickerDate/PickerDate.css CHANGED
@@ -20,7 +20,7 @@
20
20
  box-sizing: border-box;
21
21
  }
22
22
  .rls-picker-date__title {
23
- color: var(--rls-app-color-500);
23
+ color: var(--rls-app-color-900);
24
24
  text-align: center;
25
25
  cursor: default;
26
26
  font-weight: var(--rls-font-weight-bold);
@@ -37,7 +37,7 @@
37
37
  height: var(--rls-sizing-x16);
38
38
  line-height: var(--rls-sizing-x16);
39
39
  font-size: var(--rls-sizing-x12);
40
- color: var(--rls-app-color-300);
40
+ color: var(--rls-app-color-600);
41
41
  }
42
42
  .rls-picker-date__component {
43
43
  display: flex;