@moda/om 18.1.0 → 18.2.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.
- package/CHANGELOG.md +7 -0
- package/package.json +3 -3
- package/src/components/Badge/Badge.scss +3 -3
- package/src/components/Breakpoint/Breakpoint.scss +2 -1
- package/src/components/Button/Button.scss +6 -6
- package/src/components/Checkbox/Checkbox.scss +2 -2
- package/src/components/ColorSwatch/ColorSwatch.scss +3 -3
- package/src/components/Divider/Divider.scss +1 -1
- package/src/components/Expandable/Expandable.scss +3 -3
- package/src/components/LoadingShapes/LoadingShapes.scss +1 -1
- package/src/components/Popover/Popover.scss +4 -4
- package/src/components/RadioButton/RadioButton.scss +3 -3
- package/src/components/Select/Select.scss +1 -1
- package/src/components/Select/SelectOption.scss +1 -1
- package/src/components/Select/SelectOptions.scss +1 -1
- package/src/components/SlidingPane/SlidingPane.scss +1 -1
- package/src/components/Toast/Toast.scss +1 -1
- package/src/mixins/input-styles/_input-styles.scss +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,13 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [18.2.0](https://github.com/ModaOperandi/om/compare/v18.1.0...v18.2.0) (2023-01-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* move from node-sass to sass ([#3159](https://github.com/ModaOperandi/om/issues/3159)) ([fc30fb4](https://github.com/ModaOperandi/om/commit/fc30fb4a3efa80d34f0c43ee043a6fad9169296d))
|
|
12
|
+
|
|
6
13
|
# [18.1.0](https://github.com/ModaOperandi/om/compare/v18.0.0...v18.1.0) (2022-12-29)
|
|
7
14
|
|
|
8
15
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moda/om",
|
|
3
|
-
"version": "18.
|
|
3
|
+
"version": "18.2.0",
|
|
4
4
|
"description": "Moda Operandi design system",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@moda/icons": "^5.18.0",
|
|
51
|
-
"@moda/tokens": "^5.
|
|
51
|
+
"@moda/tokens": "^5.7.0",
|
|
52
52
|
"@types/classnames": "^2.2.9",
|
|
53
53
|
"classnames": "^2.2.6",
|
|
54
54
|
"credit-card-type": "^9.0.0",
|
|
@@ -120,7 +120,6 @@
|
|
|
120
120
|
"jest-environment-jsdom": "^29.0.0",
|
|
121
121
|
"jest-matchmedia-mock": "^1.1.0",
|
|
122
122
|
"lint-staged": "^13.0.0",
|
|
123
|
-
"node-sass": "^8.0.0",
|
|
124
123
|
"node-sass-package-importer": "^5.3.2",
|
|
125
124
|
"pinst": "^3.0.0",
|
|
126
125
|
"postcss": "^8.1.10",
|
|
@@ -133,6 +132,7 @@
|
|
|
133
132
|
"rollup": "^3.2.3",
|
|
134
133
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
135
134
|
"rollup-plugin-scss": "^4.0.0",
|
|
135
|
+
"sass": "^1.57.1",
|
|
136
136
|
"sass-loader": "^13.0.0",
|
|
137
137
|
"semantic-release": "^19.0.2",
|
|
138
138
|
"storybook-states": "^1.2.0",
|
|
@@ -18,19 +18,19 @@
|
|
|
18
18
|
&--forest-green {
|
|
19
19
|
background-color: color(forest-green);
|
|
20
20
|
border-color: transparent;
|
|
21
|
-
color: color(snow);
|
|
21
|
+
color: color('snow');
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
&--klein-blue {
|
|
25
25
|
background-color: color(klein-blue);
|
|
26
26
|
border-color: transparent;
|
|
27
|
-
color: color(snow);
|
|
27
|
+
color: color('snow');
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
&--brick {
|
|
31
31
|
background-color: color(brick);
|
|
32
32
|
border-color: transparent;
|
|
33
|
-
color: color(snow);
|
|
33
|
+
color: color('snow');
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
&--dark-fuchsia {
|
|
@@ -22,23 +22,23 @@
|
|
|
22
22
|
|
|
23
23
|
&,
|
|
24
24
|
&--primary {
|
|
25
|
-
color: color(snow);
|
|
25
|
+
color: color('snow');
|
|
26
26
|
border-color: color(ink);
|
|
27
27
|
background-color: color(ink);
|
|
28
28
|
@include font-smoothing(subpixel);
|
|
29
29
|
|
|
30
30
|
&#{$self}--hover,
|
|
31
31
|
&:hover {
|
|
32
|
-
color: color(snow);
|
|
32
|
+
color: color('snow');
|
|
33
33
|
border-color: color(fog, 0.32);
|
|
34
34
|
background: linear-gradient(0deg, color(fog, 0.32), color(fog, 0.32)), color(ink);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
&#{$self}--focus,
|
|
38
38
|
&:focus {
|
|
39
|
-
color: color(snow);
|
|
39
|
+
color: color('snow');
|
|
40
40
|
border-color: color(fog, 0.12);
|
|
41
|
-
background: linear-gradient(0deg, color(snow, 0.12), color(snow, 0.12)), color(ink);
|
|
41
|
+
background: linear-gradient(0deg, color('snow', 0.12), color('snow', 0.12)), color(ink);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
&#{$self}--disabled,
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
&--secondary {
|
|
55
55
|
color: color(ink);
|
|
56
56
|
border-color: color(ink);
|
|
57
|
-
background-color: color(snow);
|
|
57
|
+
background-color: color('snow');
|
|
58
58
|
|
|
59
59
|
&#{$self}--hover,
|
|
60
60
|
&:hover {
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
padding: spacing(2, 3);
|
|
87
87
|
color: color(ink);
|
|
88
88
|
border-color: color(elephant);
|
|
89
|
-
background-color: color(snow);
|
|
89
|
+
background-color: color('snow');
|
|
90
90
|
text-transform: none;
|
|
91
91
|
line-height: 1.4;
|
|
92
92
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
.Checkbox {
|
|
4
4
|
$checkbox-size: space(4);
|
|
5
|
-
$checkbox-check-offset: space(1) / 2;
|
|
5
|
+
$checkbox-check-offset: calc(space(1) / 2);
|
|
6
6
|
|
|
7
7
|
@include stack(2, $direction: horizontal);
|
|
8
8
|
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
position: relative;
|
|
17
17
|
width: $checkbox-size;
|
|
18
18
|
height: $checkbox-size;
|
|
19
|
-
margin-top: space(1) / 2;
|
|
19
|
+
margin-top: calc(space(1) / 2);
|
|
20
20
|
flex-shrink: 0;
|
|
21
21
|
border: 1px solid;
|
|
22
22
|
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
height: 33%;
|
|
34
34
|
transform: translate(-50%, -50%);
|
|
35
35
|
border-radius: 50%;
|
|
36
|
-
background-color: color(snow);
|
|
36
|
+
background-color: color('snow');
|
|
37
37
|
z-index: 1;
|
|
38
38
|
}
|
|
39
39
|
|
|
@@ -108,8 +108,8 @@
|
|
|
108
108
|
content: '';
|
|
109
109
|
display: block;
|
|
110
110
|
position: absolute;
|
|
111
|
-
top: -
|
|
112
|
-
right: -
|
|
111
|
+
top: calc(-1 * $on-sale-dot-size / 2);
|
|
112
|
+
right: calc(-1 * $on-sale-dot-size / 2);
|
|
113
113
|
width: $on-sale-dot-size;
|
|
114
114
|
height: $on-sale-dot-size;
|
|
115
115
|
border-radius: 50%;
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
&:before,
|
|
27
27
|
&:after {
|
|
28
28
|
$space-between-lines: 0.175rem;
|
|
29
|
-
$offset: $space-between-lines/2;
|
|
29
|
+
$offset: calc($space-between-lines / 2);
|
|
30
30
|
transform: translateY(calc(-#{$offset}));
|
|
31
31
|
background-color: color(ink);
|
|
32
32
|
box-shadow: 0 $space-between-lines 0 0 color(ink);
|
|
@@ -85,17 +85,17 @@
|
|
|
85
85
|
|
|
86
86
|
&--dark-background {
|
|
87
87
|
border-color: color(cement);
|
|
88
|
-
color: color(snow);
|
|
88
|
+
color: color('snow');
|
|
89
89
|
|
|
90
90
|
#{$self}__name {
|
|
91
91
|
&::before,
|
|
92
92
|
&::after {
|
|
93
|
-
background-color: color(snow);
|
|
93
|
+
background-color: color('snow');
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
#{$self}__contents {
|
|
98
|
-
color: color(snow);
|
|
98
|
+
color: color('snow');
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
}
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
.Popover {
|
|
4
4
|
$self: &;
|
|
5
5
|
$caret-size: space(2);
|
|
6
|
-
$border-width: 1rem / 16;
|
|
6
|
+
$border-width: calc(1rem / 16);
|
|
7
7
|
$offset: space(2);
|
|
8
8
|
|
|
9
9
|
position: relative;
|
|
10
10
|
|
|
11
11
|
&__content {
|
|
12
12
|
position: absolute;
|
|
13
|
-
background-color: color(snow);
|
|
13
|
+
background-color: color('snow');
|
|
14
14
|
border: $border-width solid color(elephant);
|
|
15
15
|
z-index: 1;
|
|
16
16
|
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
top: auto;
|
|
120
120
|
bottom: -($border-width + $offset);
|
|
121
121
|
border-top: none;
|
|
122
|
-
border-bottom: $caret-size solid color(snow);
|
|
122
|
+
border-bottom: $caret-size solid color('snow');
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
&:before {
|
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
&:before {
|
|
138
138
|
top: -($border-width + $offset);
|
|
139
139
|
bottom: auto;
|
|
140
|
-
border-top: $caret-size solid color(snow);
|
|
140
|
+
border-top: $caret-size solid color('snow');
|
|
141
141
|
border-bottom: none;
|
|
142
142
|
}
|
|
143
143
|
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
flex-shrink: 0;
|
|
20
20
|
border: 1px solid;
|
|
21
21
|
border-radius: 50%;
|
|
22
|
-
background-color: color(snow);
|
|
22
|
+
background-color: color('snow');
|
|
23
23
|
|
|
24
24
|
&--checked {
|
|
25
25
|
background-color: color(ink);
|
|
@@ -33,14 +33,14 @@
|
|
|
33
33
|
bottom: $radio-button-check-offset;
|
|
34
34
|
left: $radio-button-check-offset;
|
|
35
35
|
border-radius: 50%;
|
|
36
|
-
background-color: color(snow);
|
|
36
|
+
background-color: color('snow');
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
&--disabled {
|
|
41
41
|
color: color(elephant);
|
|
42
42
|
pointer-events: none;
|
|
43
|
-
background-color: color(snow);
|
|
43
|
+
background-color: color('snow');
|
|
44
44
|
&::after {
|
|
45
45
|
background-color: color(elephant);
|
|
46
46
|
}
|