@moda/om 19.9.0 → 20.0.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 (69) hide show
  1. package/README.md +1 -2
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/styles.css +1 -1
  5. package/index.scss +1 -0
  6. package/package.json +4 -3
  7. package/src/components/AspectRatioBox/AspectRatioBox.scss +1 -1
  8. package/src/components/Badge/Badge.scss +17 -17
  9. package/src/components/Breadcrumbs/Breadcrumb/Breadcrumb.scss +5 -5
  10. package/src/components/Breadcrumbs/Breadcrumbs.scss +2 -2
  11. package/src/components/Breakpoint/Breakpoint.scss +9 -7
  12. package/src/components/Button/Button.scss +45 -44
  13. package/src/components/Checkbox/Checkbox.scss +11 -11
  14. package/src/components/Clickable/Clickable.scss +3 -3
  15. package/src/components/ColorSwatch/ColorSwatch.scss +9 -9
  16. package/src/components/Constrain/Constrain.scss +9 -8
  17. package/src/components/Constrain/ExceedConstrain.scss +7 -7
  18. package/src/components/ControlLink/ControlLink.scss +6 -6
  19. package/src/components/DefinitionList/DefinitionList.scss +5 -5
  20. package/src/components/Dialog/Dialog.scss +4 -4
  21. package/src/components/Divider/Divider.scss +5 -5
  22. package/src/components/Expandable/Expandable.scss +17 -17
  23. package/src/components/Field/Field.scss +7 -7
  24. package/src/components/Label/Label.scss +4 -4
  25. package/src/components/Loading/Loading.scss +4 -4
  26. package/src/components/LoadingBalls/LoadingBalls.scss +2 -2
  27. package/src/components/LoadingShapes/LoadingShapes.scss +2 -2
  28. package/src/components/Modal/Modal.scss +1 -1
  29. package/src/components/ModalOverlay/ModalOverlay.scss +6 -6
  30. package/src/components/Overlay/Overlay.scss +4 -4
  31. package/src/components/Paginator/Paginator.scss +10 -10
  32. package/src/components/PasswordInput/PasswordInput.scss +4 -4
  33. package/src/components/Popover/Popover.scss +9 -9
  34. package/src/components/PromoBanner/PromoBanner.scss +9 -9
  35. package/src/components/RadioButton/RadioButton.scss +14 -14
  36. package/src/components/SearchInput/SearchInput.scss +4 -4
  37. package/src/components/Select/MultiSelect.scss +14 -14
  38. package/src/components/Select/Select.scss +25 -25
  39. package/src/components/Select/SelectOption.scss +7 -7
  40. package/src/components/Select/SelectOptions.scss +8 -8
  41. package/src/components/SelectableButton/SelectableButton.scss +13 -13
  42. package/src/components/SlidingPane/SlidingPane.scss +7 -7
  43. package/src/components/Stack/Stack.scss +6 -4
  44. package/src/components/Tabs/Tab.scss +6 -6
  45. package/src/components/Tabs/TabList.scss +3 -3
  46. package/src/components/Tabs/TabPanels.scss +2 -2
  47. package/src/components/Tag/Tag.scss +8 -8
  48. package/src/components/Text/Text.scss +4 -3
  49. package/src/components/TextInput/TextInput.scss +2 -2
  50. package/src/components/Textarea/Textarea.scss +3 -3
  51. package/src/components/Toast/Toast.scss +6 -6
  52. package/src/components/VerticalDivider/VerticalDivider.scss +3 -3
  53. package/src/index.scss +3 -3
  54. package/src/mixins/_mixins.scss +7 -7
  55. package/src/mixins/font-smoothing/_font-smoothing.scss +0 -2
  56. package/src/mixins/font-smoothing/font-smoothing.stories.scss +3 -3
  57. package/src/mixins/global-styles/_global-styles.scss +6 -5
  58. package/src/mixins/input-styles/_input-styles.scss +14 -12
  59. package/src/mixins/overflow-scroll/_overflow-scroll.scss +0 -2
  60. package/src/mixins/overflow-scroll/overflow-scroll.stories.scss +3 -3
  61. package/src/mixins/stack/_stack.scss +3 -3
  62. package/src/mixins/stack/stack.stories.scss +3 -3
  63. package/src/mixins/thin-underline/_thin-underline.scss +0 -2
  64. package/src/mixins/thin-underline/thin-underline.stories.scss +2 -2
  65. package/src/mixins/visually-hidden/_visually-hidden.scss +0 -2
  66. package/src/mixins/visually-hidden/visually-hidden.stories.scss +2 -2
  67. package/src/utilities/States/State.scss +4 -4
  68. package/src/utilities/States/States.scss +2 -2
  69. package/src/utilities/States/StatesProps.scss +8 -8
package/src/mixins/input-styles/_input-styles.scss CHANGED
@@ -1,17 +1,19 @@
1
+ @use '~@moda/tokens';
2
+
1
3
  @mixin input-styles() {
2
- @include text(body1);
4
+ @include tokens.text(body1);
3
5
 
4
6
  //ios devices zoom in if inputs are smaller than 16px
5
- @include breakpoint(sm, $prop: max-width) {
6
- @include text(h6);
7
+ @include tokens.breakpoint(sm, $prop: max-width) {
8
+ @include tokens.text(h6);
7
9
  }
8
10
 
9
11
  appearance: none;
10
12
  line-height: 1;
11
13
  width: 100%;
12
- padding: spacing(3, 4);
13
- border: 1px solid color(elephant);
14
- background-color: color('snow');
14
+ padding: tokens.spacing(3, 4);
15
+ border: 1px solid tokens.color(elephant);
16
+ background-color: tokens.color('snow');
15
17
  border-radius: 0;
16
18
 
17
19
  &::placeholder {
@@ -21,24 +23,24 @@
21
23
  &--focus,
22
24
  &:focus {
23
25
  outline: none;
24
- border-color: color(ink);
26
+ border-color: tokens.color(ink);
25
27
  }
26
28
 
27
29
  &--disabled,
28
30
  &:disabled {
29
- color: color(elephant);
30
- border-color: color(elephant);
31
- background-color: color(noise);
31
+ color: tokens.color(elephant);
32
+ border-color: tokens.color(elephant);
33
+ background-color: tokens.color(noise);
32
34
  }
33
35
 
34
36
  &--valid {
35
- border-color: color(money-good);
37
+ border-color: tokens.color(money-good);
36
38
  }
37
39
 
38
40
  &--error {
39
41
  &,
40
42
  &:focus {
41
- border-color: color(code-red);
43
+ border-color: tokens.color(code-red);
42
44
  }
43
45
  }
44
46
  }
package/src/mixins/overflow-scroll/_overflow-scroll.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '~@moda/tokens';
2
-
3
1
  @mixin overflow-scroll($direction: y) {
4
2
  @if $direction == x {
5
3
  overflow-x: auto;
package/src/mixins/overflow-scroll/overflow-scroll.stories.scss CHANGED
@@ -1,9 +1,9 @@
1
- @import './overflow-scroll';
1
+ @use 'overflow-scroll';
2
2
 
3
3
  .Story.overflow-scroll {
4
- @include overflow-scroll();
4
+ @include overflow-scroll.overflow-scroll();
5
5
  }
6
6
 
7
7
  .Story.overflow-scroll-x {
8
- @include overflow-scroll(x);
8
+ @include overflow-scroll.overflow-scroll(x);
9
9
  }
package/src/mixins/stack/_stack.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '~@moda/tokens';
1
+ @use '~@moda/tokens';
2
2
 
3
3
  @mixin stack($index: 4, $direction: vertical) {
4
4
  display: flex;
@@ -13,7 +13,7 @@
13
13
  }
14
14
 
15
15
  > * + * {
16
- margin-top: space($index);
16
+ margin-top: tokens.space($index);
17
17
  }
18
18
 
19
19
  > .Overlay {
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  > * + * {
33
- margin-left: space($index);
33
+ margin-left: tokens.space($index);
34
34
  }
35
35
 
36
36
  > .Overlay {
package/src/mixins/stack/stack.stories.scss CHANGED
@@ -1,13 +1,13 @@
1
- @import './stack';
1
+ @use './stack';
2
2
 
3
3
  .Story.Mixins.stack {
4
- @include stack(4);
4
+ @include stack.stack(4);
5
5
 
6
6
  > * {
7
7
  background-color: yellow;
8
8
  }
9
9
 
10
10
  &--horizontal {
11
- @include stack(6, $direction: horizontal);
11
+ @include stack.stack(6, $direction: horizontal);
12
12
  }
13
13
  }
package/src/mixins/thin-underline/_thin-underline.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '~@moda/tokens';
2
-
3
1
  @mixin thin-underline() {
4
2
  position: relative;
5
3
  text-decoration: none;
package/src/mixins/thin-underline/thin-underline.stories.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import './thin-underline';
1
+ @use './thin-underline';
2
2
 
3
3
  .Story.thin-underline {
4
- @include thin-underline();
4
+ @include thin-underline.thin-underline();
5
5
 
6
6
  display: inline-block;
7
7
  }
package/src/mixins/visually-hidden/_visually-hidden.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '~@moda/tokens';
2
-
3
1
  @mixin visually-hidden() {
4
2
  border: 0;
5
3
  clip: rect(0 0 0 0);
package/src/mixins/visually-hidden/visually-hidden.stories.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import './visually-hidden';
1
+ @use './visually-hidden';
2
2
 
3
3
  .Story.visually-hidden {
4
- @include visually-hidden();
4
+ @include visually-hidden.visually-hidden();
5
5
  }
package/src/utilities/States/State.scss CHANGED
@@ -1,11 +1,11 @@
1
- @import '~om';
1
+ @use '~@moda/om';
2
2
 
3
3
  .State {
4
- border: 1px dotted color(fog);
5
- padding: spacing(2);
4
+ border: 1px dotted om.color(fog);
5
+ padding: om.spacing(2);
6
6
 
7
7
  &__props {
8
8
  display: block;
9
- margin-top: space(2);
9
+ margin-top: om.space(2);
10
10
  }
11
11
  }
package/src/utilities/States/States.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import '~om';
1
+ @use '~@moda/om';
2
2
 
3
3
  .States {
4
- @include stack(6);
4
+ @include om.stack(6);
5
5
  }
package/src/utilities/States/StatesProps.scss CHANGED
@@ -1,24 +1,24 @@
1
- @import '~om';
1
+ @use '~@moda/om';
2
2
 
3
3
  .StatesProps {
4
- @include text(body1, $font: code);
4
+ @include om.text(body1, $font: code);
5
5
 
6
- padding-top: space(2);
7
- color: color(fog);
8
- border-top: 1px dotted color(elephant);
6
+ padding-top: om.space(2);
7
+ color: om.color(fog);
8
+ border-top: 1px dotted om.color(elephant);
9
9
 
10
10
  > strong {
11
11
  text-decoration: underline;
12
- color: color(ink);
12
+ color: om.color(ink);
13
13
  }
14
14
 
15
15
  &::before {
16
16
  content: '<';
17
- color: color(elephant);
17
+ color: om.color(elephant);
18
18
  }
19
19
 
20
20
  &::after {
21
21
  content: '/>';
22
- color: color(elephant);
22
+ color: om.color(elephant);
23
23
  }
24
24
  }