@educarehq/solaris-components 0.6.4 → 0.6.6

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 (11) hide show
  1. package/fesm2022/educarehq-solaris-components.mjs +2352 -2143
  2. package/fesm2022/educarehq-solaris-components.mjs.map +1 -1
  3. package/package.json +15 -7
  4. package/styles/actions/button/button.styles.scss +313 -288
  5. package/styles/forms/input-text/input-text.styles.scss +25 -18
  6. package/styles/foundations/_app-defaults.scss +38 -0
  7. package/styles/layouts/dialog/dialog.styles.scss +40 -35
  8. package/styles/solaris-app.scss +7 -0
  9. package/styles/solaris-components.scss +4 -4
  10. package/styles/visual/avatar.styles.scss +6 -6
  11. package/types/educarehq-solaris-components.d.ts +352 -330
package/styles/forms/input-text/input-text.styles.scss CHANGED
@@ -1,18 +1,25 @@
1
- :is(input[solaris-input], textarea[solaris-input]) {
2
- border: 0;
3
- width: 100%;
4
- outline: none;
5
- background: transparent;
6
- color: var(--atlas-color-text);
7
- font-size: var(--solaris-fs-14);
8
- font-family: var(--solaris-font-sans-secondary), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
9
- }
10
-
11
- :is(input[solaris-input], textarea[solaris-input])[disabled] {
12
- cursor: not-allowed !important;
13
- }
14
-
15
- input[type="password"]::-ms-reveal,
16
- input[type="password"]::-ms-clear {
17
- display: none;
18
- }
1
+ :is(input[solaris-input], textarea[solaris-input]) {
2
+ border: 0;
3
+ width: 100%;
4
+ outline: none;
5
+ background: transparent;
6
+ color: var(--atlas-color-text);
7
+ font-size: var(--solaris-fs-14);
8
+ font-family:
9
+ var(--solaris-font-sans-secondary),
10
+ system-ui,
11
+ -apple-system,
12
+ Segoe UI,
13
+ Roboto,
14
+ Arial,
15
+ sans-serif;
16
+ }
17
+
18
+ :is(input[solaris-input], textarea[solaris-input])[disabled] {
19
+ cursor: not-allowed !important;
20
+ }
21
+
22
+ input[type='password']::-ms-reveal,
23
+ input[type='password']::-ms-clear {
24
+ display: none;
25
+ }
package/styles/foundations/_app-defaults.scss ADDED
@@ -0,0 +1,38 @@
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ html,
8
+ body {
9
+ height: 100%;
10
+ }
11
+
12
+ body {
13
+ color: var(--solaris-color-text);
14
+ background: var(--solaris-color-bg);
15
+ font-family:
16
+ var(--solaris-font-sans-primary),
17
+ system-ui,
18
+ -apple-system,
19
+ Segoe UI,
20
+ Roboto,
21
+ Arial,
22
+ sans-serif;
23
+ }
24
+
25
+ main {
26
+ animation: solaris-fade-in var(--solaris-motion-duration-page-enter)
27
+ var(--solaris-motion-ease-exit);
28
+ }
29
+
30
+ @keyframes solaris-fade-in {
31
+ from {
32
+ opacity: 0;
33
+ }
34
+
35
+ to {
36
+ opacity: 1;
37
+ }
38
+ }
package/styles/layouts/dialog/dialog.styles.scss CHANGED
@@ -1,35 +1,40 @@
1
- .solaris-dialog-backdrop {
2
- position: fixed;
3
- inset: 0;
4
- z-index: var(--solaris-z-modal-backdrop, 1300);
5
- background: color-mix(in srgb, black 58%, transparent);
6
- backdrop-filter: blur(0.2rem);
7
- animation: solaris-dialog-backdrop-in 140ms ease;
8
- }
9
-
10
- .solaris-dialog-host {
11
- position: fixed;
12
- inset: 0;
13
- z-index: var(--solaris-z-modal, 1310);
14
- display: grid;
15
- padding: var(--solaris-space-4);
16
- pointer-events: none;
17
- }
18
-
19
- .solaris-dialog-host.position-center {
20
- place-items: center;
21
- }
22
-
23
- .solaris-dialog-host.position-top {
24
- place-items: start center;
25
- padding-top: var(--solaris-space-12);
26
- }
27
-
28
- .solaris-dialog-host > * {
29
- pointer-events: auto;
30
- }
31
-
32
- @keyframes solaris-dialog-backdrop-in {
33
- from { opacity: 0; }
34
- to { opacity: 1; }
35
- }
1
+ .solaris-dialog-backdrop {
2
+ position: fixed;
3
+ inset: 0;
4
+ z-index: var(--solaris-z-modal-backdrop, 1300);
5
+ background: color-mix(in srgb, var(--solaris-overlay-backdrop-strong) 96%, transparent);
6
+ backdrop-filter: blur(0.2rem);
7
+ animation: solaris-dialog-backdrop-in var(--solaris-motion-duration-sm)
8
+ var(--solaris-motion-ease-standard);
9
+ }
10
+
11
+ .solaris-dialog-host {
12
+ position: fixed;
13
+ inset: 0;
14
+ z-index: var(--solaris-z-modal, 1310);
15
+ display: grid;
16
+ padding: var(--solaris-space-4);
17
+ pointer-events: none;
18
+ }
19
+
20
+ .solaris-dialog-host.position-center {
21
+ place-items: center;
22
+ }
23
+
24
+ .solaris-dialog-host.position-top {
25
+ place-items: start center;
26
+ padding-top: var(--solaris-space-12);
27
+ }
28
+
29
+ .solaris-dialog-host > * {
30
+ pointer-events: auto;
31
+ }
32
+
33
+ @keyframes solaris-dialog-backdrop-in {
34
+ from {
35
+ opacity: 0;
36
+ }
37
+ to {
38
+ opacity: 1;
39
+ }
40
+ }
package/styles/solaris-app.scss ADDED
@@ -0,0 +1,7 @@
1
+ @use '@educarehq/solaris-tokens/styles/solaris-tokens' as *;
2
+ @use './solaris-components' as *;
3
+ @use './foundations/app-defaults' as *;
4
+
5
+ @import 'intl-tel-input/build/css/intlTelInput.css';
6
+ @import url('@phosphor-icons/web/regular');
7
+ @import url('@phosphor-icons/web/thin');
package/styles/solaris-components.scss CHANGED
@@ -1,4 +1,4 @@
1
- @forward './forms/input-text/input-text.styles';
2
- @forward 'layouts/dialog/dialog.styles';
3
- @forward './actions/button/button.styles';
4
- @forward './visual/avatar.styles';
1
+ @forward './forms/input-text/input-text.styles';
2
+ @forward 'layouts/dialog/dialog.styles';
3
+ @forward './actions/button/button.styles';
4
+ @forward './visual/avatar.styles';
package/styles/visual/avatar.styles.scss CHANGED
@@ -1,6 +1,6 @@
1
- .solaris-avatar-dropdown-popover {
2
- box-shadow: var(--solaris-shadow-lg);
3
- border-radius: var(--solaris-radius-lg);
4
- background: var(--solaris-color-surface);
5
- border: 1px solid color-mix(in srgb, var(--solaris-color-border) 82%, transparent);
6
- }
1
+ .solaris-avatar-dropdown-popover {
2
+ box-shadow: var(--solaris-shadow-lg);
3
+ border-radius: var(--solaris-radius-lg);
4
+ background: var(--solaris-color-surface);
5
+ border: 1px solid color-mix(in srgb, var(--solaris-color-border) 82%, transparent);
6
+ }