@educarehq/solaris-ui 0.3.2 → 0.5.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 (43) hide show
  1. package/fesm2022/educarehq-solaris-ui.mjs +1229 -911
  2. package/fesm2022/educarehq-solaris-ui.mjs.map +1 -1
  3. package/package.json +20 -1
  4. package/schematics/collection.json +16 -0
  5. package/schematics/init/fonts.js +18 -0
  6. package/schematics/init/index.js +77 -0
  7. package/schematics/init/messages.js +25 -0
  8. package/schematics/init/providers.js +89 -0
  9. package/schematics/init/schema.json +54 -0
  10. package/schematics/init/styles.js +75 -0
  11. package/schematics/init/workspace.js +45 -0
  12. package/schematics/ng-add/index.js +66 -0
  13. package/schematics/ng-add/schema.json +40 -0
  14. package/schematics/package.json +5 -0
  15. package/styles/_button.scss +584 -510
  16. package/styles/_core.scss +13 -37
  17. package/styles/_dropdown-menu.scss +70 -72
  18. package/styles/_icon-button.scss +486 -481
  19. package/styles/_index.scss +28 -19
  20. package/styles/_input.scss +257 -255
  21. package/styles/_popover.scss +73 -73
  22. package/styles/_textarea.scss +248 -0
  23. package/styles/_theme.scss +35 -1
  24. package/styles/_toast.scss +9 -9
  25. package/styles/_tooltip.scss +5 -3
  26. package/styles/token/border/_border.scss +4 -3
  27. package/styles/token/color/_dark.scss +5 -2
  28. package/styles/token/color/_high-contrast.scss +116 -0
  29. package/styles/token/color/_light.scss +3 -0
  30. package/styles/token/density/_comfortable.scss +11 -11
  31. package/styles/token/density/_compact.scss +11 -11
  32. package/styles/token/focus/_focus.scss +16 -0
  33. package/styles/token/focus/_index.scss +1 -0
  34. package/styles/token/glass/_glass.scss +17 -0
  35. package/styles/token/glass/_index.scss +1 -0
  36. package/styles/token/motion/_motion.scss +1 -0
  37. package/styles/token/opacity/_opacity.scss +9 -0
  38. package/styles/token/radius/_radius.scss +4 -4
  39. package/styles/token/shadow/_shadow.scss +34 -20
  40. package/styles/token/spacing/_spacing.scss +15 -12
  41. package/styles/token/typography/_typography.scss +10 -9
  42. package/styles/token/z-index/_z-index.scss +3 -0
  43. package/types/educarehq-solaris-ui.d.ts +282 -106
package/styles/_core.scss CHANGED
@@ -1,37 +1,13 @@
1
- /// Solaris UI Core
2
- /// Provides root font-size strategy and base resets.
3
- ///
4
- /// The default `none` strategy respects the browser's default font-size (typically 16px)
5
- /// and produces no additional CSS. Consumers who prefer the `rem-10` strategy may opt in,
6
- /// but must ensure token SCSS files are imported at the correct scope.
7
- ///
8
- /// Usage:
9
- /// @use '@solaris-ui/angular/styles' as solaris;
10
- ///
11
- /// // Default: no root font-size override (browser default)
12
- /// @include solaris.core();
13
- ///
14
- /// // rem-10 strategy: 1rem = 10px at root, body reset to 16px
15
- /// @include solaris.core((root-font-size: rem-10));
16
-
17
- @use 'sass:map';
18
-
19
- $-default-config: (
20
- root-font-size: none,
21
- );
22
-
23
- @mixin core($config: ()) {
24
- $merged: map.merge($-default-config, $config);
25
-
26
- $root-font-size: map.get($merged, root-font-size);
27
-
28
- @if $root-font-size == rem-10 {
29
- :root {
30
- font-size: 62.5%;
31
- }
32
-
33
- body {
34
- font-size: 1.6rem;
35
- }
36
- }
37
- }
1
+ /// Solaris UI Core
2
+ /// Uses the browser's default font-size (100%, typically 16px).
3
+ /// All design tokens are calculated at 1rem = 16px.
4
+ /// Do NOT set a custom root font-size — it breaks accessibility (WCAG 1.4.4).
5
+ ///
6
+ /// Usage:
7
+ /// @use '@solaris-ui/angular/styles' as solaris;
8
+ /// @include solaris.core();
9
+
10
+ @mixin core() {
11
+ // Uses browser default font-size (100%).
12
+ // No root font-size override needed.
13
+ }
package/styles/_dropdown-menu.scss CHANGED
@@ -1,72 +1,70 @@
1
- .solaris-dropdown-menu-overlay {
2
- --solaris-dropdown-menu-min-width: calc(
3
- var(--solaris-spacing-24) + var(--solaris-spacing-10) +
4
- var(--solaris-spacing-1)
5
- );
6
- --solaris-dropdown-menu-max-width: calc(
7
- var(--solaris-spacing-24) * 2 + var(--solaris-spacing-10) +
8
- var(--solaris-spacing-2)
9
- );
10
-
11
- .solaris-popover-panel__container {
12
- padding: 0;
13
- overflow: hidden;
14
- }
15
- }
16
-
17
- .solaris-dropdown-menu__wrapper {
18
- --solaris-dropdown-menu-gap: var(--solaris-spacing-2);
19
- --solaris-dropdown-menu-padding: var(--solaris-spacing-2);
20
-
21
- display: flex;
22
- outline: none;
23
- user-select: none;
24
- flex-direction: column;
25
- box-sizing: border-box;
26
- gap: var(--solaris-dropdown-menu-gap);
27
- padding: var(--solaris-dropdown-menu-padding);
28
- min-width: var(--solaris-dropdown-menu-min-width);
29
- max-width: var(--solaris-dropdown-menu-max-width);
30
-
31
- solaris-divider {
32
- margin-inline: calc(-1 * var(--solaris-dropdown-menu-padding));
33
- width: calc(100% + 2 * var(--solaris-dropdown-menu-padding));
34
- }
35
- }
36
-
37
- solaris-dropdown-menu-group {
38
- display: flex;
39
- flex-direction: column;
40
- padding-block: var(--solaris-spacing-1);
41
-
42
- &:first-child {
43
- padding-block-start: 0;
44
- }
45
-
46
- &:last-child {
47
- padding-block-end: 0;
48
- }
49
- }
50
-
51
- solaris-dropdown-menu-label {
52
- display: flex;
53
- cursor: default;
54
- user-select: none;
55
- align-items: center;
56
- letter-spacing: 0.05em;
57
- text-transform: uppercase;
58
- color: var(--solaris-text-muted);
59
- font-weight: var(--solaris-font-weight-semibold);
60
- font-size: var(--solaris-font-size-xs);
61
- line-height: var(--solaris-line-height-xs);
62
- padding: var(--solaris-spacing-2) var(--solaris-spacing-3);
63
- }
64
-
65
- solaris-dropdown-submenu {
66
- display: flex;
67
- flex-direction: column;
68
- }
69
-
70
- solaris-dropdown-submenu-trigger {
71
- display: flex;
72
- }
1
+ .solaris-dropdown-menu-overlay {
2
+ .solaris-popover-panel__container {
3
+ padding: 0;
4
+ overflow: hidden;
5
+ }
6
+ --solaris-dropdown-menu-min-width: calc(
7
+ var(--solaris-spacing-24) + var(--solaris-spacing-10) +
8
+ var(--solaris-spacing-1)
9
+ );
10
+ --solaris-dropdown-menu-max-width: calc(
11
+ var(--solaris-spacing-24) * 2 + var(--solaris-spacing-10) +
12
+ var(--solaris-spacing-2)
13
+ );
14
+ }
15
+
16
+ .solaris-dropdown-menu__wrapper {
17
+ solaris-divider {
18
+ width: calc(100% + 2 * var(--solaris-dropdown-menu-padding));
19
+ margin-inline: calc(-1 * var(--solaris-dropdown-menu-padding));
20
+ }
21
+ --solaris-dropdown-menu-gap: var(--solaris-spacing-2);
22
+ --solaris-dropdown-menu-padding: var(--solaris-spacing-2);
23
+
24
+ display: flex;
25
+ outline: none;
26
+ user-select: none;
27
+ flex-direction: column;
28
+ box-sizing: border-box;
29
+ gap: var(--solaris-dropdown-menu-gap);
30
+ padding: var(--solaris-dropdown-menu-padding);
31
+ min-width: var(--solaris-dropdown-menu-min-width);
32
+ max-width: var(--solaris-dropdown-menu-max-width);
33
+ }
34
+
35
+ solaris-dropdown-menu-group {
36
+ &:first-child {
37
+ padding-block-start: 0;
38
+ }
39
+
40
+ &:last-child {
41
+ padding-block-end: 0;
42
+ }
43
+
44
+ display: flex;
45
+ flex-direction: column;
46
+ padding-block: var(--solaris-spacing-1);
47
+ }
48
+
49
+ solaris-dropdown-menu-label {
50
+ display: flex;
51
+ cursor: default;
52
+ user-select: none;
53
+ align-items: center;
54
+ letter-spacing: 0.05em;
55
+ text-transform: uppercase;
56
+ color: var(--solaris-text-muted);
57
+ font-size: var(--solaris-font-size-xs);
58
+ line-height: var(--solaris-line-height-xs);
59
+ font-weight: var(--solaris-font-weight-semibold);
60
+ padding: var(--solaris-spacing-2) var(--solaris-spacing-3);
61
+ }
62
+
63
+ solaris-dropdown-submenu {
64
+ display: flex;
65
+ flex-direction: column;
66
+ }
67
+
68
+ solaris-dropdown-submenu-trigger {
69
+ display: flex;
70
+ }