@ebay/skin 14.0.6 → 14.1.1
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/.github/workflows/pages-html-proofer.yml +1 -1
- package/.github/workflows/storybook-percy.yml +1 -1
- package/.storybook/preview-head.html +374 -55
- package/_cdn/skin/v14.1.1/skin-default.min.css +6 -0
- package/_cdn/skin/v14.1.1/skin-full.min.css +6 -0
- package/_cdn/skin/v14.1.1/skin-headless.min.css +6 -0
- package/_cdn/skin/v14.1.1/skin-legacy.min.css +6 -0
- package/dist/button/button.css +2 -4
- package/dist/drawer-dialog/drawer-dialog.css +2 -2
- package/dist/filter-button/filter-button.css +1 -0
- package/dist/filter-menu-button/filter-menu-button.css +1 -0
- package/dist/floating-label/floating-label.css +5 -8
- package/dist/fullscreen-dialog/fullscreen-dialog.css +17 -20
- package/dist/icon/direction.css +4 -0
- package/dist/icon/general.css +102 -2
- package/dist/icon/icon.css +169 -13
- package/dist/icon/interface.css +34 -2
- package/dist/icon/internal.css +4 -0
- package/dist/icon/large.css +6 -2
- package/dist/icon/photo.css +15 -3
- package/dist/icon/shipping.css +2 -2
- package/dist/icon/user.css +2 -2
- package/dist/legacy-tokens/ds4-light.css +1 -1
- package/dist/lightbox-dialog/lightbox-dialog.css +8 -11
- package/dist/link/link.css +1 -1
- package/dist/page-notice/page-notice.css +35 -14
- package/dist/panel-dialog/panel-dialog.css +8 -21
- package/dist/progress-stepper/progress-stepper.css +21 -6
- package/dist/select/select.css +13 -17
- package/dist/svg/direction.svg +5 -0
- package/dist/svg/general.svg +181 -8
- package/dist/svg/icons.svg +374 -55
- package/dist/svg/interface.svg +75 -10
- package/dist/svg/internal.svg +160 -77
- package/dist/svg/large.svg +14 -2
- package/dist/svg/photo.svg +104 -35
- package/dist/svg/shipping.svg +79 -48
- package/dist/svg/social.svg +2 -13
- package/dist/svg/user.svg +45 -25
- package/dist/textbox/textbox.css +16 -10
- package/dist/tokens/evo-dark.css +1 -1
- package/dist/tokens/evo-light.css +1 -1
- package/package.json +1 -1
- package/scripts/generate-bundle.js +46 -22
- package/src/less/floating-label/floating-label.less +5 -12
- package/src/less/floating-label/stories/floating-label.stories.js +60 -1
- package/src/less/fullscreen-dialog/fullscreen-dialog.less +14 -14
- package/src/less/fullscreen-dialog/stories/fullscreen-dialog.stories.js +33 -11
- package/src/less/icon/generated/direction.less +4 -0
- package/src/less/icon/generated/general.less +102 -2
- package/src/less/icon/generated/interface.less +34 -2
- package/src/less/icon/generated/internal.less +4 -0
- package/src/less/icon/generated/large.less +6 -2
- package/src/less/icon/generated/photo.less +15 -3
- package/src/less/icon/generated/shipping.less +2 -2
- package/src/less/icon/generated/user.less +2 -2
- package/src/less/lightbox-dialog/lightbox-dialog.less +7 -13
- package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +38 -10
- package/src/less/link/link.less +1 -1
- package/src/less/mixins/private/dialog-mixins.less +13 -10
- package/src/less/mixins/private/filter-button-mixins.less +1 -0
- package/src/less/page-notice/page-notice.less +42 -14
- package/src/less/page-notice/stories/page-notice.stories.js +43 -0
- package/src/less/panel-dialog/panel-dialog.less +8 -18
- package/src/less/panel-dialog/stories/panel-dialog.stories.js +32 -10
- package/src/less/progress-stepper/progress-stepper.less +24 -6
- package/src/less/progress-stepper/stories/progress-stepper.stories.js +108 -17
- package/src/less/select/select.less +14 -19
- package/src/less/select/stories/floating-label.stories.js +66 -0
- package/src/less/textbox/stories/textbox.stories.js +12 -0
- package/src/less/textbox/textbox.less +18 -10
- package/src/less/toast-dialog/stories/toast-dialog.stories.js +9 -9
- package/src/svg/direction.svg +5 -0
- package/src/svg/general.svg +181 -8
- package/src/svg/icons.svg +374 -55
- package/src/svg/interface.svg +75 -10
- package/src/svg/internal.svg +160 -77
- package/src/svg/large.svg +14 -2
- package/src/svg/photo.svg +104 -35
- package/src/svg/shipping.svg +79 -48
- package/src/svg/social.svg +2 -13
- package/src/svg/user.svg +45 -25
- package/src/tokens/evo-dark.css +1 -1
- package/src/tokens/evo-light.css +1 -1
- package/svg.svg +374 -55
- package/_cdn/skin/v14.0.6/skin-default.min.css +0 -6
- package/_cdn/skin/v14.0.6/skin-full.min.css +0 -6
- package/_cdn/skin/v14.0.6/skin-headless.min.css +0 -6
- package/_cdn/skin/v14.0.6/skin-legacy.min.css +0 -6
package/dist/svg/shipping.svg
CHANGED
|
@@ -1,51 +1,82 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<svg xmlns="http://www.w3.org/2000/svg">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
3
|
+
<symbol id="icon-bag" viewBox="0 0 24 24">
|
|
4
|
+
<path
|
|
5
|
+
d="M17.9959 6.775C17.8776 3.5657 15.2384 1 12 1 8.6863 1 6 3.6863 6 7v2H4a1 1 0 00-.9864.8356l-2 12A1 1 0 002 23h20a.9998.9998 0 00.9864-1.1644l-2-12A1 1 0 0020 9h-2V7l-.0041-.225zM16 11v2l.0067.1166c.0578.4974.4805.8834.9933.8834.5523 0 1-.4477 1-1v-2h1.1529l1.6666 10H3.1805L4.847 11H6v2l.0067.1166C6.0645 13.614 6.4872 14 7 14c.5523 0 1-.4477 1-1v-2h8zm0-2H8V7l.0049-.1996C8.1089 4.684 9.8578 3 12 3c2.2091 0 4 1.7909 4 4v2z"
|
|
6
|
+
/>
|
|
7
|
+
</symbol>
|
|
8
|
+
<symbol id="icon-large-case" viewBox="0 0 24 24">
|
|
9
|
+
<path
|
|
10
|
+
d="M7.25 1C6.5596 1 6 1.5596 6 2.25V4H4.25C3.5596 4 3 4.5596 3 5.25v15.5c0 .6904.5596 1.25 1.25 1.25H5c0 .5523.4477 1 1 1s1-.4477 1-1h10c0 .5523.4477 1 1 1s1-.4477 1-1h.75c.6904 0 1.25-.5596 1.25-1.25V5.25C21 4.5596 20.4404 4 19.75 4H18V2.25C18 1.5596 17.4404 1 16.75 1h-9.5zM19 20H5v-2h14v2zM16 4H8V3h8v1zM5 8V6h14v2H5zm0 2h14v6H5v-6z"
|
|
11
|
+
/>
|
|
12
|
+
</symbol>
|
|
13
|
+
<symbol viewBox="0 0 22 16" id="icon-large-box">
|
|
14
|
+
<path
|
|
15
|
+
d="M22 5.015a.996.996 0 00-.2-.615l-3-4a.996.996 0 00-.816-.4H4a.999.999 0 00-.812.414L.21 4.387A.995.995 0 000 5V15a1 1 0 001 1h20a1 1 0 001-1V5.015zM20 14h-8V6h8v8zm-10 0H2V6h8v8zm2-10V2h5.5L19 4h-7zm-2-2v2H3l1.5-2H10z"
|
|
16
|
+
/>
|
|
17
|
+
</symbol>
|
|
18
|
+
<symbol viewBox="0 0 18 16" id="icon-medium-box">
|
|
19
|
+
<path
|
|
20
|
+
d="M17.796 4.395L14.805.406A.994.994 0 0013.984 0H4a.998.998 0 00-.809.412L.208 4.39A.997.997 0 000 5.01V15A1 1 0 001 16h16a1 1 0 001-1V5.01a.999.999 0 00-.204-.615zM16 14h-6V6h6v8zm-8 0H2V6h6v8zm2-10V2h3.5L15 4h-5zM8 2v2H3l1.5-2H8z"
|
|
21
|
+
/>
|
|
22
|
+
</symbol>
|
|
23
|
+
<symbol viewBox="0 0 22 20" id="icon-package">
|
|
24
|
+
<path
|
|
25
|
+
fill-rule="evenodd"
|
|
26
|
+
d="M22 5c-.005-.184-.054-.407-.16-.56l-3-4A.999.999 0 0018 0H4a1 1 0 00-.8.4l-3 4A1.37 1.37 0 000 5v14a1 1 0 001 1h20a1 1 0 001-1V5zm-3-1h-7V2h5.5L19 4zm-9-2H4.5L3 4h7V2zM2 6h8v12H2V6zm18 0h-8v12h8V6z"
|
|
27
|
+
/>
|
|
28
|
+
</symbol>
|
|
29
|
+
<symbol viewBox="0 0 22 17" id="icon-truck">
|
|
30
|
+
<path
|
|
31
|
+
d="M20 12h-1.766c-.015-.018-.036-.031-.052-.048a2.942 2.942 0 00-.28-.254c-.056-.047-.108-.096-.168-.139a3.092 3.092 0 00-.343-.203c-.061-.031-.118-.069-.18-.097a3.092 3.092 0 00-.414-.138c-.058-.017-.11-.04-.169-.053a2.938 2.938 0 00-1.21-.009c-.072.014-.139.041-.209.06-.113.031-.227.06-.333.103-.081.033-.155.077-.232.116-.089.045-.178.088-.261.141-.077.05-.148.108-.219.165-.054.042-.113.077-.164.122V5h3.562L20 8.612V12zm-4 3a1 1 0 01-1-1c0-.173.055-.327.132-.469a.978.978 0 01.701-.497c.057-.01.107-.034.167-.034a1 1 0 110 2zm-8-3h-.766c-.015-.017-.035-.029-.05-.045a2.818 2.818 0 00-.286-.26c-.054-.046-.105-.094-.164-.135a2.81 2.81 0 00-.343-.203c-.061-.032-.118-.07-.18-.098a3.065 3.065 0 00-.412-.138c-.058-.016-.112-.04-.171-.053A3.02 3.02 0 005 11a3.02 3.02 0 00-.628.068c-.06.013-.113.037-.171.053-.14.039-.28.08-.412.138-.062.028-.119.066-.18.098a2.81 2.81 0 00-.343.203c-.059.041-.11.09-.165.135a3.04 3.04 0 00-.285.259c-.015.017-.035.029-.05.046H2V2h10v10H8zm-3 3a1 1 0 110-2 1 1 0 110 2zm16.829-7.253L18.922 3.44a1 1 0 00-.828-.44H14V1a1 1 0 00-1-1H1a1 1 0 00-1 1v12a1 1 0 001 1h1a3 3 0 106 0h5a3 3 0 106 0h2a1 1 0 001-1V8.306a1 1 0 00-.171-.559z"
|
|
32
|
+
/>
|
|
33
|
+
</symbol>
|
|
34
|
+
<symbol viewBox="0 0 22 17" id="icon-fast-n-free">
|
|
35
|
+
<path
|
|
36
|
+
d="M20 12h-6V5h3.5L20 8.333V12zm1.8-4.6l-3-4A1 1 0 0018 3h-4V1a1 1 0 00-1-1H1a1 1 0 100 2h11v10H1a1 1 0 100 2h20a1 1 0 001-1V8a1 1 0 00-.2-.6zM6 14a1 1 0 01-2 0H2c0 1.654 1.346 3 3 3s3-1.346 3-3H6zm11 0a1 1 0 01-2 0h-2c0 1.654 1.346 3 3 3s3-1.346 3-3h-2zM1 6a1 1 0 110-2h8a1 1 0 110 2H1zm0 4a1 1 0 110-2h6a1 1 0 110 2H1z"
|
|
37
|
+
/>
|
|
38
|
+
</symbol>
|
|
39
|
+
<symbol viewBox="0 0 24 24" id="icon-small-letter">
|
|
40
|
+
<path
|
|
41
|
+
fill-rule="evenodd"
|
|
42
|
+
d="M5.6 5A2.6 2.6 0 0 0 3 7.6v8.8A2.6 2.6 0 0 0 5.6 19h12.8a2.6 2.6 0 0 0 2.6-2.6V7.6A2.6 2.6 0 0 0 18.4 5H5.6Zm13.393 2.506A.6.6 0 0 0 18.4 7H5.6a.6.6 0 0 0-.592.506l6.632 4.974a.6.6 0 0 0 .72 0l6.633-4.974ZM5 10v6.4a.6.6 0 0 0 .6.6h12.8a.6.6 0 0 0 .6-.6V10l-5.44 4.08a2.6 2.6 0 0 1-3.12 0L5 10Z"
|
|
43
|
+
clip-rule="evenodd"
|
|
44
|
+
/>
|
|
45
|
+
</symbol>
|
|
46
|
+
<symbol id="icon-small-box" viewBox="0 0 18 12">
|
|
47
|
+
<path
|
|
48
|
+
d="M17.796 4.395L14.805.406A.994.994 0 0013.984 0H4a.998.998 0 00-.809.412L.208 4.39A.997.997 0 000 5.01V11a1 1 0 001 1h16a1 1 0 001-1V5.01a.999.999 0 00-.204-.615zM16 10h-6V6h6v4zm-8 0H2V6h6v4zm2-6V2h3.5L15 4h-5zM8 2v2H3l1.5-2H8z"
|
|
49
|
+
/>
|
|
50
|
+
</symbol>
|
|
31
51
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
</
|
|
52
|
+
<symbol id="icon-envelope" viewBox="0 0 24 24">
|
|
53
|
+
<path
|
|
54
|
+
d="M5.25 2C4.55964 2 4 2.55964 4 3.25v17.5c0 .6904.55964 1.25 1.25 1.25h13.5c.6904 0 1.25-.5596 1.25-1.25V3.25C20 2.55964 19.4404 2 18.75 2H5.25zM6 5.34061V4h12v1.3406l-6 2.57143-6-2.57142zm0 2.17593l5.5076 2.3604c.3144.13476.6704.13476.9848 0L18 7.51654V20H6V7.51654z"
|
|
55
|
+
/>
|
|
56
|
+
</symbol>
|
|
57
|
+
<symbol id="icon-shoe-box" viewBox="0 0 24 24">
|
|
58
|
+
<path
|
|
59
|
+
d="M2.25 4C1.56 4 1 4.56 1 5.25v3.5c0 .605.43 1.11 1 1.225v8.775c0 .69.56 1.25 1.25 1.25h17.5c.69 0 1.25-.56 1.25-1.25V9.975c.57-.116 1-.62 1-1.225v-3.5C23 4.56 22.44 4 21.75 4H2.25zM20 10v8H4v-8h16zm1-2H3V6h18v2z"
|
|
60
|
+
/>
|
|
61
|
+
</symbol>
|
|
62
|
+
<symbol id="icon-suitcase" viewBox="0 0 24 24">
|
|
63
|
+
<path
|
|
64
|
+
d="M7 2a1 1 0 011-1h8a1 1 0 011 1v3h5a1 1 0 011 1v14a1 1 0 01-1 1h-3a1 1 0 11-2 0H7a1 1 0 11-2 0H2a1 1 0 01-1-1V6a1 1 0 011-1h5V2zm2 3h6V3H9v2zm8 2H7v12h10V7zm2 0v12h2V7h-2zM5 7H3v12h2V7z"
|
|
65
|
+
/>
|
|
66
|
+
</symbol>
|
|
67
|
+
<symbol viewBox="0 0 18 13" id="icon-fast-n-free-small">
|
|
68
|
+
<path
|
|
69
|
+
d="M16.71 5.29l-2-2A1 1 0 0014 3h-2V1a1 1 0 00-1-1H2a1 1 0 100 2h8v7H2a1 1 0 100 2 2 2 0 104 0h4a2 2 0 104 0h2a1 1 0 001-1V6a1 1 0 00-.29-.71zM13.59 5L15 6.41V9h-3V5h1.59zM6 4a1 1 0 110 2H2a1 1 0 110-2z"
|
|
70
|
+
/>
|
|
71
|
+
</symbol>
|
|
72
|
+
<symbol viewBox="0 0 16 13" id="icon-truck-small">
|
|
73
|
+
<path
|
|
74
|
+
d="M15.71 5.29l-2-2A1 1 0 0013 3h-2V1a1 1 0 00-1-1H1a1 1 0 00-1 1v9a1 1 0 001 1 2 2 0 104 0h4a2 2 0 104 0h2a1 1 0 001-1V6a1 1 0 00-.29-.71zM2 9V2h7v7H2zm12 0h-3V5h1.59L14 6.41V9z"
|
|
75
|
+
/>
|
|
76
|
+
</symbol>
|
|
77
|
+
<symbol id="icon-small-case" viewBox="0 0 24 24">
|
|
78
|
+
<path
|
|
79
|
+
d="M7 3.25C7 2.5596 7.5596 2 8.25 2h7.5c.6904 0 1.25.5596 1.25 1.25V5h.75c.6904 0 1.25.5596 1.25 1.25v12.5c0 .6047-.4294 1.1092-1 1.225V20c0 .5523-.4477 1-1 1s-1-.4477-1-1H8c0 .5523-.4477 1-1 1s-1-.4477-1-1v-.025c-.5706-.1158-1-.6203-1-1.225V6.25C5 5.5596 5.5596 5 6.25 5H7V3.25zM17 18v-5H7v5h10zM9 5h6V4H9v1zM7 7v4h10V7H7z"
|
|
80
|
+
/>
|
|
81
|
+
</symbol>
|
|
82
|
+
</svg>
|
package/dist/svg/social.svg
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<svg xmlns="http://www.w3.org/2000/svg">
|
|
3
3
|
<symbol viewBox="0 0 24 24" id="icon-social-link">
|
|
4
|
-
<g clip-path="
|
|
4
|
+
<g clip-path="path('M0 0h24v24H0z')">
|
|
5
5
|
<path
|
|
6
6
|
d="M20.828 3.207c-1.574-1.575-3.95-1.66-5.61.025l-.014.014-4 3.964a1 1 0 1 1-1.408-1.42l3.994-3.96c2.472-2.51 6.124-2.366 8.453-.038 2.344 2.344 2.348 6.053-.027 8.44l-.012.013-4 3.964a1 1 0 0 1-1.408-1.42l3.996-3.96c1.612-1.615 1.595-4.065.036-5.623Z"
|
|
7
7
|
/>
|
|
@@ -12,9 +12,6 @@
|
|
|
12
12
|
d="M7.207 9.793a1 1 0 0 1 0 1.414l-4 4c-1.609 1.605-1.594 4.063-.035 5.622 1.557 1.557 4.005 1.577 5.611-.026l.01-.01 4-4a1 1 0 0 1 1.414 1.414l-3.999 3.999c-2.383 2.392-6.105 2.382-8.45.037-2.343-2.343-2.349-6.06.024-8.44l.01-.01 4-4a1 1 0 0 1 1.415 0Z"
|
|
13
13
|
/>
|
|
14
14
|
</g>
|
|
15
|
-
<defs>
|
|
16
|
-
<clipPath id="clip0_49833_77257"><path d="M0 0h24v24H0z" /></clipPath>
|
|
17
|
-
</defs>
|
|
18
15
|
</symbol>
|
|
19
16
|
<symbol viewBox="0 0 24 24" id="icon-social-discord">
|
|
20
17
|
<path
|
|
@@ -27,19 +24,11 @@
|
|
|
27
24
|
/>
|
|
28
25
|
</symbol>
|
|
29
26
|
<symbol id="icon-social-messenger" viewBox="0 0 24 24">
|
|
30
|
-
<g clip-path="
|
|
27
|
+
<g clip-path="path('M0 0h24v24H0z')">
|
|
31
28
|
<path
|
|
32
29
|
d="M12 0C5.24 0 0 4.952 0 11.64c0 3.499 1.434 6.521 3.769 8.61a.957.957 0 01.322.684l.066 2.136a.96.96 0 001.346.849l2.383-1.05a.958.958 0 01.64-.047c1.132.308 2.3.462 3.474.458 6.76 0 12-4.95 12-11.64S18.76 0 12 0zm7.206 8.956l-3.525 5.594a1.799 1.799 0 01-2.603.48l-2.803-2.103a.72.72 0 00-.868.003l-3.786 2.872c-.505.384-1.165-.221-.827-.758l3.525-5.593a1.8 1.8 0 012.603-.48l2.803 2.103a.72.72 0 00.868-.002l3.786-2.874c.505-.384 1.165.221.827.758z"
|
|
33
30
|
/>
|
|
34
31
|
</g>
|
|
35
|
-
<defs>
|
|
36
|
-
<clipPath id="clip0_41192_49714">
|
|
37
|
-
<path
|
|
38
|
-
fill="var(--color-social-icons-foreground, #fff)"
|
|
39
|
-
d="M0 0h24v24H0z"
|
|
40
|
-
/>
|
|
41
|
-
</clipPath>
|
|
42
|
-
</defs>
|
|
43
32
|
</symbol>
|
|
44
33
|
<symbol id="icon-social-pinterest" viewBox="0 0 24 24">
|
|
45
34
|
<g clip-path="url(#a)">
|
package/dist/svg/user.svg
CHANGED
|
@@ -1,28 +1,48 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<svg xmlns="http://www.w3.org/2000/svg">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
</
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
3
|
+
<symbol viewBox="0 0 40 40" id="icon-avatar-light" >
|
|
4
|
+
<g clip-path="path('M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20z')">
|
|
5
|
+
<path
|
|
6
|
+
d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20z"
|
|
7
|
+
fill="#F7F7F7"
|
|
8
|
+
/>
|
|
9
|
+
<ellipse cx="20" cy="41" rx="13.6" ry="12" fill="#707070"/>
|
|
10
|
+
<circle cx="20" cy="19.4" r="8.4" fill="#707070"/>
|
|
11
|
+
</g>
|
|
12
|
+
<path
|
|
13
|
+
d="M20 38c-9.941 0-18-8.059-18-18h-4c0 12.15 9.85 22 22 22v-4zm18-18c0 9.941-8.059 18-18 18v4c12.15 0 22-9.85 22-22h-4zM20 2c9.941 0 18 8.059 18 18h4C42 7.85 32.15-2 20-2v4zm0-4C7.85-2-2 7.85-2 20h4c0-9.941 8.059-18 18-18v-4z"
|
|
14
|
+
fill="#fff"
|
|
15
|
+
/>
|
|
16
|
+
</symbol>
|
|
17
|
+
<symbol id="icon-avatar-filled" viewBox="0 0 22 22">
|
|
18
|
+
<path
|
|
19
|
+
d="M4.075 19.547C4.57 16.409 7.483 14 11 14s6.429 2.409 6.925 5.547A10.954 10.954 0 0111 22c-2.625 0-5.034-.92-6.925-2.453zM15 9a4 4 0 11-8 0 4 4 0 018 0z"
|
|
20
|
+
/>
|
|
21
|
+
<path
|
|
22
|
+
d="M11 20a9 9 0 110-18 9 9 0 010 18zm0 2c6.075 0 11-4.925 11-11S17.075 0 11 0 0 4.925 0 11s4.925 11 11 11z"
|
|
23
|
+
/>
|
|
24
|
+
</symbol>
|
|
25
|
+
<symbol id="icon-avatar" viewBox="0 0 22 22">
|
|
26
|
+
<path
|
|
27
|
+
d="M15.596 18.74A8.958 8.958 0 0111 20c-1.68 0-3.25-.46-4.596-1.26C7.147 17.177 8.853 16 11 16c2.147 0 3.853 1.177 4.596 2.74zm1.62-1.232C16.05 15.424 13.704 14 11 14s-5.05 1.424-6.216 3.508a9 9 0 1112.432 0zm.575 2.146A10.98 10.98 0 0022 11c0-6.075-4.925-11-11-11S0 4.925 0 11c0 3.45 1.589 6.53 4.075 8.547l.005.004c.59.478 1.23.896 1.912 1.246l.02.01A10.954 10.954 0 0011 22a10.954 10.954 0 006.791-2.346zM11 11a2 2 0 110-4 2 2 0 010 4zm0 2a4 4 0 100-8 4 4 0 000 8z"
|
|
28
|
+
/>
|
|
29
|
+
</symbol>
|
|
30
|
+
<symbol id="icon-avatar-dark" fill="none" viewBox="0 0 22 22">
|
|
31
|
+
<g>
|
|
32
|
+
<path
|
|
33
|
+
fill="#fff"
|
|
34
|
+
d="M0 11C0 4.92487 4.92487 0 11 0c6.0751 0 11 4.92487 11 11 0 6.0751-4.9249 11-11 11-6.07513 0-11-4.9249-11-11Z"
|
|
35
|
+
/>
|
|
36
|
+
<path
|
|
37
|
+
fill="#333"
|
|
38
|
+
d="M0 11C0 4.92487 4.92487 0 11 0c6.0751 0 11 4.92487 11 11 0 6.0751-4.9249 11-11 11-6.07513 0-11-4.9249-11-11Z"
|
|
39
|
+
/>
|
|
40
|
+
<ellipse cx="11" cy="22.55" fill="gray" rx="7.48" ry="6.6" />
|
|
41
|
+
<circle cx="11" cy="10.67" r="4.62" fill="gray" />
|
|
42
|
+
</g>
|
|
43
|
+
<path
|
|
44
|
+
fill="#171717"
|
|
45
|
+
d="M11 20c-4.97056 0-9-4.0294-9-9h-4c0 7.1797 5.8203 13 13 13v-4Zm9-9c0 4.9706-4.0294 9-9 9v4c7.1797 0 13-5.8203 13-13h-4Zm-9-9c4.9706 0 9 4.02944 9 9h4c0-7.1797-5.8203-13-13-13v4Zm0-4C3.8203-2-2 3.8203-2 11h4c0-4.97056 4.02944-9 9-9v-4Z"
|
|
46
|
+
/>
|
|
47
|
+
</symbol>
|
|
28
48
|
</svg>
|
package/dist/textbox/textbox.css
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
position: relative;
|
|
5
5
|
}
|
|
6
6
|
.textbox button.icon-btn {
|
|
7
|
+
background-color: transparent;
|
|
7
8
|
display: inline-flex;
|
|
8
9
|
height: 100%;
|
|
9
10
|
justify-content: center;
|
|
@@ -46,7 +47,6 @@ textarea.textbox__control {
|
|
|
46
47
|
}
|
|
47
48
|
input.textbox__control[disabled],
|
|
48
49
|
textarea.textbox__control[disabled] {
|
|
49
|
-
background-color: var(--textbox-disabled-background-color, var(--color-background-secondary));
|
|
50
50
|
border-color: var(--textbox-disabled-border-color, var(--color-background-disabled));
|
|
51
51
|
color: var(--textbox-disabled-foreground-color, var(--color-foreground-disabled));
|
|
52
52
|
}
|
|
@@ -64,20 +64,15 @@ textarea.textbox__control[disabled]:-ms-input-placeholder {
|
|
|
64
64
|
}
|
|
65
65
|
input.textbox__control[readonly],
|
|
66
66
|
textarea.textbox__control[readonly] {
|
|
67
|
-
color:
|
|
67
|
+
background-color: transparent;
|
|
68
|
+
border: none;
|
|
69
|
+
padding-left: 0;
|
|
70
|
+
padding-right: 0;
|
|
68
71
|
}
|
|
69
72
|
input.textbox__control[aria-invalid="true"],
|
|
70
73
|
textarea.textbox__control[aria-invalid="true"] {
|
|
71
|
-
background-color: var(--color-red-1);
|
|
72
74
|
border-color: var(--textbox-invalid-foreground-color, var(--color-stroke-attention));
|
|
73
75
|
}
|
|
74
|
-
input.textbox__control:focus,
|
|
75
|
-
textarea.textbox__control:focus {
|
|
76
|
-
border-color: var(--textbox-focus-border-color, var(--color-stroke-default));
|
|
77
|
-
background-color: var(--textbox-focus-background-color, var(--color-background-primary));
|
|
78
|
-
color: var(--textbox-focus-foreground-color, var(--color-foreground-on-secondary));
|
|
79
|
-
outline: 0;
|
|
80
|
-
}
|
|
81
76
|
input.textbox__control::-webkit-input-placeholder,
|
|
82
77
|
textarea.textbox__control::-webkit-input-placeholder {
|
|
83
78
|
color: var(--textbox-placeholder-color, var(--color-foreground-on-secondary));
|
|
@@ -121,6 +116,17 @@ input.textbox__control--large {
|
|
|
121
116
|
.textbox--icon-end > svg:last-child {
|
|
122
117
|
right: 16px;
|
|
123
118
|
}
|
|
119
|
+
input.textbox__control:not(:read-only):focus,
|
|
120
|
+
textarea.textbox__control:not(:read-only):focus {
|
|
121
|
+
border-color: var(--textbox-focus-border-color, var(--color-stroke-default));
|
|
122
|
+
background-color: var(--textbox-focus-background-color, var(--color-background-primary));
|
|
123
|
+
outline: 0;
|
|
124
|
+
}
|
|
125
|
+
input.textbox__control[readonly]:focus,
|
|
126
|
+
textarea.textbox__control[readonly]:focus {
|
|
127
|
+
outline: 0;
|
|
128
|
+
text-decoration: underline;
|
|
129
|
+
}
|
|
124
130
|
.textbox > svg:first-child {
|
|
125
131
|
left: 16px;
|
|
126
132
|
}
|
package/dist/tokens/evo-dark.css
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
:root {
|
|
3
3
|
--color-background-primary: var(--color-neutral-7);
|
|
4
4
|
--color-background-secondary: var(--color-neutral-6);
|
|
5
|
-
--color-background-disabled: var(--color-neutral-
|
|
5
|
+
--color-background-disabled: var(--color-neutral-5);
|
|
6
6
|
--color-background-inverse: var(--color-neutral-1);
|
|
7
7
|
--color-background-attention: var(--color-red-3);
|
|
8
8
|
--color-background-confirmation: var(--color-green-4);
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
--color-background-disabled: var(--color-neutral-3);
|
|
5
5
|
--color-background-inverse: var(--color-neutral-6);
|
|
6
6
|
--color-background-attention: var(--color-red-4);
|
|
7
|
-
--color-background-confirmation: var(--color-green-
|
|
7
|
+
--color-background-confirmation: var(--color-green-6);
|
|
8
8
|
--color-background-information: var(--color-blue-4);
|
|
9
9
|
--color-background-accent: var(--color-blue-4);
|
|
10
10
|
--color-background-invalid: var(--color-red-1);
|
package/package.json
CHANGED
|
@@ -14,16 +14,22 @@ const cleanCSSInstance = new CleanCSS({
|
|
|
14
14
|
const currentDir = path.dirname(__dirname);
|
|
15
15
|
const { exec } = require('child_process');
|
|
16
16
|
const bodyMatch = new RegExp('body ?({(?:.|\\s|\\S)*?})', 'm');
|
|
17
|
+
const rootMatch = new RegExp(':root ?({(?:.|\\s|\\S)*?})', 'm');
|
|
17
18
|
|
|
18
19
|
// The list of directories in the dist to pull
|
|
19
|
-
const
|
|
20
|
+
const tokensList = [
|
|
21
|
+
['evo-core', 'evo-light'],
|
|
22
|
+
['ds4-core', 'ds4-light'],
|
|
23
|
+
];
|
|
24
|
+
const tokensDirList = ['evo', 'ds4'];
|
|
20
25
|
|
|
21
26
|
/**
|
|
22
27
|
* Main Processing class. Holds info about args passed and ds version
|
|
23
28
|
*/
|
|
24
29
|
class CssProcesser {
|
|
25
|
-
constructor(
|
|
26
|
-
this.
|
|
30
|
+
constructor(tokensFile, tokensDir, args) {
|
|
31
|
+
this.tokensFile = tokensFile;
|
|
32
|
+
this.tokensDir = tokensDir;
|
|
27
33
|
this.args = args;
|
|
28
34
|
this.processed = [];
|
|
29
35
|
this.skipped = [];
|
|
@@ -52,10 +58,11 @@ class CssProcesser {
|
|
|
52
58
|
|
|
53
59
|
getDistCss() {
|
|
54
60
|
return new Promise((resolve, reject) => {
|
|
55
|
-
glob(`${currentDir}/dist
|
|
61
|
+
glob(`${currentDir}/dist/**/*.css`, (err, files) => {
|
|
56
62
|
if (err) {
|
|
57
63
|
return reject(err);
|
|
58
64
|
}
|
|
65
|
+
console.log(files);
|
|
59
66
|
resolve(files);
|
|
60
67
|
});
|
|
61
68
|
});
|
|
@@ -80,6 +87,18 @@ class CssProcesser {
|
|
|
80
87
|
return this.wrap(cssContents);
|
|
81
88
|
}
|
|
82
89
|
|
|
90
|
+
rewrapRoot(cssContents) {
|
|
91
|
+
const root = rootMatch.exec(cssContents);
|
|
92
|
+
if (root && root[1]) {
|
|
93
|
+
// Add newroot
|
|
94
|
+
const newContents = cssContents.replace(rootMatch, '');
|
|
95
|
+
return `${this.classDef} ${root[1]}
|
|
96
|
+
${this.wrap(newContents)}
|
|
97
|
+
`;
|
|
98
|
+
}
|
|
99
|
+
return this.wrap(cssContents);
|
|
100
|
+
}
|
|
101
|
+
|
|
83
102
|
/**
|
|
84
103
|
* Generates a raw less file for given css file
|
|
85
104
|
* @param {*} file
|
|
@@ -87,8 +106,10 @@ class CssProcesser {
|
|
|
87
106
|
generateRawLess(file) {
|
|
88
107
|
const fileName = path.basename(file, '.css');
|
|
89
108
|
if (this.args.modules.length > 0 && this.args.modules.indexOf(fileName) === -1) {
|
|
90
|
-
this.
|
|
91
|
-
|
|
109
|
+
if (this.tokensFile.indexOf(fileName) === -1) {
|
|
110
|
+
this.skipped.push(fileName);
|
|
111
|
+
return '';
|
|
112
|
+
}
|
|
92
113
|
}
|
|
93
114
|
this.processed.push(fileName);
|
|
94
115
|
|
|
@@ -99,6 +120,9 @@ class CssProcesser {
|
|
|
99
120
|
if (fileName === 'global') {
|
|
100
121
|
return this.rewrapBody(cssContents);
|
|
101
122
|
}
|
|
123
|
+
if (this.tokensFile.indexOf(fileName) > -1) {
|
|
124
|
+
return this.rewrapRoot(cssContents);
|
|
125
|
+
}
|
|
102
126
|
return this.wrap(cssContents);
|
|
103
127
|
}
|
|
104
128
|
return `@import (inline) "${file}";`;
|
|
@@ -109,23 +133,23 @@ class CssProcesser {
|
|
|
109
133
|
const compiled = files.map((file) => this.generateRawLess(file)).join('\n');
|
|
110
134
|
const processed = this.processed;
|
|
111
135
|
const skipped = this.skipped;
|
|
112
|
-
const
|
|
136
|
+
const tokensFile = this.tokensFile;
|
|
113
137
|
|
|
114
138
|
if (this.args.modules.length > 0 || this.args.verbose) {
|
|
115
|
-
console.log(`Processed ${processed.length} modules for ${
|
|
139
|
+
console.log(`Processed ${processed.length} modules for ${tokensFile}`);
|
|
116
140
|
}
|
|
117
141
|
if (this.args.verbose) {
|
|
118
|
-
console.log(`Modules processed: ${processed.join(',')} for ${
|
|
142
|
+
console.log(`Modules processed: ${processed.join(',')} for ${tokensFile}`);
|
|
119
143
|
|
|
120
|
-
console.log(`Skipped ${skipped.length} modules for ${
|
|
121
|
-
console.log(`Modules skipped: ${skipped.join(',')} for ${
|
|
144
|
+
console.log(`Skipped ${skipped.length} modules for ${tokensFile}`);
|
|
145
|
+
console.log(`Modules skipped: ${skipped.join(',')} for ${tokensFile}`);
|
|
122
146
|
}
|
|
123
147
|
resolve(compiled);
|
|
124
148
|
});
|
|
125
149
|
}
|
|
126
150
|
|
|
127
151
|
generateLESS() {
|
|
128
|
-
return this.getDistCss(this.
|
|
152
|
+
return this.getDistCss(this.tokensFile).then((files) => this.processFiles(files));
|
|
129
153
|
}
|
|
130
154
|
|
|
131
155
|
compileLess(raw) {
|
|
@@ -133,24 +157,24 @@ class CssProcesser {
|
|
|
133
157
|
}
|
|
134
158
|
|
|
135
159
|
writeAllFiles(raw) {
|
|
136
|
-
const cdnPath = getCDNPath(this.args.name
|
|
160
|
+
const cdnPath = getCDNPath(this.args.name);
|
|
137
161
|
rimraf.sync(cdnPath);
|
|
138
162
|
return makeDir(cdnPath).then(() =>
|
|
139
163
|
writeFile(
|
|
140
|
-
`${cdnPath}/skin.${this.minify ? 'min.' : ''}css`,
|
|
164
|
+
`${cdnPath}/skin-${this.tokensDir}.${this.minify ? 'min.' : ''}css`,
|
|
141
165
|
`/* autoprefixer: off */\n${raw}\n/* autoprefixer: on */`
|
|
142
166
|
)
|
|
143
167
|
);
|
|
144
168
|
}
|
|
145
169
|
}
|
|
146
170
|
|
|
147
|
-
function getCDNPath(bundle
|
|
148
|
-
return `${currentDir}/_cdn/${bundle}/v${pkg.version}
|
|
171
|
+
function getCDNPath(bundle) {
|
|
172
|
+
return `${currentDir}/_cdn/${bundle}/v${pkg.version}`;
|
|
149
173
|
}
|
|
150
174
|
|
|
151
175
|
/**
|
|
152
176
|
* Runs the compilation of less
|
|
153
|
-
* @param {*} res The response with
|
|
177
|
+
* @param {*} res The response with tokensFile and raw css/less
|
|
154
178
|
* @param {*} plugin The given plugin to run the render with
|
|
155
179
|
*/
|
|
156
180
|
/**
|
|
@@ -200,8 +224,8 @@ function runCSSBuild(name, args) {
|
|
|
200
224
|
prebuild()
|
|
201
225
|
.then(() =>
|
|
202
226
|
Promise.all(
|
|
203
|
-
|
|
204
|
-
const cssProcesser = new CssProcesser(
|
|
227
|
+
tokensList.map((token, index) => {
|
|
228
|
+
const cssProcesser = new CssProcesser(token, tokensDirList[index], args);
|
|
205
229
|
return cssProcesser.run();
|
|
206
230
|
})
|
|
207
231
|
)
|
|
@@ -218,11 +242,11 @@ Please upload the ./_cdn/${args.name}/v${pkg.version} directory to CDN
|
|
|
218
242
|
|
|
219
243
|
async function listBundles(argv) {
|
|
220
244
|
await prebuild();
|
|
221
|
-
|
|
222
|
-
const cssProcesser = new CssProcesser(
|
|
245
|
+
tokensList.forEach((tokensFile) => {
|
|
246
|
+
const cssProcesser = new CssProcesser(tokensFile, argv);
|
|
223
247
|
cssProcesser.getDistCss().then((files) => {
|
|
224
248
|
console.log(`======================`);
|
|
225
|
-
console.log(`${
|
|
249
|
+
console.log(`${tokensFile} - modules avaiable`);
|
|
226
250
|
console.log(`======================`);
|
|
227
251
|
files.forEach((file) => {
|
|
228
252
|
console.log(path.basename(file, '.css'));
|
|
@@ -14,6 +14,7 @@ div.floating-label {
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
label.floating-label__label {
|
|
17
|
+
.background-color-token(floating-label-background-color, color-background-secondary);
|
|
17
18
|
.color-token(floating-label-color, color-foreground-primary);
|
|
18
19
|
display: inline-block;
|
|
19
20
|
left: 16px;
|
|
@@ -21,14 +22,16 @@ label.floating-label__label {
|
|
|
21
22
|
pointer-events: none;
|
|
22
23
|
position: absolute;
|
|
23
24
|
text-overflow: ellipsis;
|
|
25
|
+
top: 0;
|
|
24
26
|
transform: scale(0.75, 0.75) translate(0, 2px);
|
|
25
27
|
transform-origin: left;
|
|
26
28
|
white-space: nowrap;
|
|
27
|
-
width: calc(100% -
|
|
29
|
+
width: calc(100% - 40px);
|
|
28
30
|
z-index: 1;
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
label.floating-label__label--focus {
|
|
34
|
+
.background-color-token(floating-label-focus-background-color, color-background-primary);
|
|
32
35
|
color: var(--color-background-inverse);
|
|
33
36
|
}
|
|
34
37
|
|
|
@@ -51,6 +54,7 @@ label.floating-label__label--animate {
|
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
label.floating-label__label--disabled {
|
|
57
|
+
.background-color-token(floating-label-disabled-background-color, color-background-secondary);
|
|
54
58
|
.color-token(floating-label-disabled-color, color-foreground-disabled);
|
|
55
59
|
}
|
|
56
60
|
|
|
@@ -72,12 +76,6 @@ label.floating-label__label--invalid {
|
|
|
72
76
|
padding-top: 23px;
|
|
73
77
|
}
|
|
74
78
|
|
|
75
|
-
// For select floating label
|
|
76
|
-
.floating-label .select {
|
|
77
|
-
// Reduce space given for floating-label so that it doesn't cover the chevron
|
|
78
|
-
margin-right: -24px;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
79
|
.floating-label .select select {
|
|
82
80
|
line-height: 52px;
|
|
83
81
|
}
|
|
@@ -85,8 +83,3 @@ label.floating-label__label--invalid {
|
|
|
85
83
|
.floating-label .select--large select {
|
|
86
84
|
line-height: 60px;
|
|
87
85
|
}
|
|
88
|
-
|
|
89
|
-
[dir="rtl"] .floating-label .select {
|
|
90
|
-
margin-left: -24px;
|
|
91
|
-
margin-right: 0;
|
|
92
|
-
}
|