@charcoal-ui/react 4.0.0-beta.1 → 4.0.0-beta.2
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/dist/index.css +2 -3
- package/dist/index.css.map +1 -1
- package/package.json +7 -7
- package/src/components/Button/index.css +2 -3
package/dist/index.css
CHANGED
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
-moz-appearance: none;
|
|
5
5
|
appearance: none;
|
|
6
6
|
background: transparent;
|
|
7
|
-
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
padding: 0 24px;
|
|
8
9
|
border-style: none;
|
|
9
10
|
outline: none;
|
|
10
11
|
text-rendering: inherit;
|
|
@@ -29,8 +30,6 @@
|
|
|
29
30
|
font-size: 14px;
|
|
30
31
|
line-height: 22px;
|
|
31
32
|
font-weight: bold;
|
|
32
|
-
padding-right: 24px;
|
|
33
|
-
padding-left: 24px;
|
|
34
33
|
color: var(--charcoal-text2);
|
|
35
34
|
background-color: var(--charcoal-surface3);
|
|
36
35
|
transition:
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/index.css"],"sourcesContent":[".charcoal-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n padding: 0;\n border-style: none;\n outline: none;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n text-decoration: none;\n font: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n width: -moz-min-content;\n width: min-content;\n display: inline-grid;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n white-space: nowrap;\n border-radius: 999999px;\n font-size: 14px;\n line-height: 22px;\n font-weight: bold;\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/index.css"],"sourcesContent":[".charcoal-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n box-sizing: border-box;\n padding: 0 24px;\n border-style: none;\n outline: none;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n text-decoration: none;\n font: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n width: -moz-min-content;\n width: min-content;\n display: inline-grid;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n white-space: nowrap;\n border-radius: 999999px;\n font-size: 14px;\n line-height: 22px;\n font-weight: bold;\n color: var(--charcoal-text2);\n background-color: var(--charcoal-surface3);\n transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;\n height: 40px;\n}\n\n.charcoal-button:disabled {\n cursor: default;\n opacity: 0.32;\n}\n\n.charcoal-button:not(:disabled):focus-visible {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-button:not(:disabled):hover {\n color: var(--charcoal-text2-hover);\n background-color: var(--charcoal-surface3-hover);\n}\n\n.charcoal-button:not(:disabled):active,\n.charcoal-button[data-active='true'] {\n color: var(--charcoal-text2-press);\n background-color: var(--charcoal-surface3-press);\n}\n\n.charcoal-button[data-variant='Primary'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-brand);\n}\n\n.charcoal-button[data-variant='Primary']:hover:not(:disabled) {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-brand-hover);\n}\n\n.charcoal-button[data-variant='Primary']:active:not(:disabled),\n.charcoal-button[data-variant='Primary'][data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-brand-press);\n}\n\n.charcoal-button[data-variant='Overlay'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface4);\n}\n\n.charcoal-button[data-variant='Overlay']:hover:not(:disabled) {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface4-hover);\n}\n\n.charcoal-button[data-variant='Overlay']:active:not(:disabled),\n.charcoal-button[data-variant='Overlay'][data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface4-press);\n}\n\n.charcoal-button[data-variant='Navigation'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface6);\n}\n\n.charcoal-button[data-variant='Navigation']:hover:not(:disabled) {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface6-hover);\n}\n\n.charcoal-button[data-variant='Navigation']:active:not(:disabled),\n.charcoal-button[data-variant='Navigation'][data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface6-press);\n}\n\n.charcoal-button[data-variant='Danger'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-assertive);\n}\n.charcoal-button[data-variant='Danger']:hover:not(:disabled) {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-assertive-hover);\n}\n\n.charcoal-button[data-variant='Danger']:active:not(:disabled),\n.charcoal-button[data-variant='Danger'][data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-assertive-press);\n}\n\n.charcoal-button[data-size='S'] {\n padding: 0 16px;\n height: 32px;\n}\n\n.charcoal-button[data-full-width='true'] {\n width: 100%;\n}\n"],"mappings":";AAAA;AACE;AACG;AACK;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AACK;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcoal-ui/react",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.2",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"main": "./dist/index.cjs.js",
|
|
6
6
|
"module": "./dist/index.esm.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"clean": "rimraf dist .tsbuildinfo"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.
|
|
29
|
+
"@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.2",
|
|
30
30
|
"@react-types/switch": "^3.1.2",
|
|
31
31
|
"@storybook/addon-actions": "^7.4.1",
|
|
32
32
|
"@storybook/addon-knobs": "^7.0.2",
|
|
@@ -60,10 +60,10 @@
|
|
|
60
60
|
"typescript": "^4.9.5"
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"@charcoal-ui/icons": "^4.0.0-beta.
|
|
64
|
-
"@charcoal-ui/styled": "^4.0.0-beta.
|
|
65
|
-
"@charcoal-ui/theme": "^4.0.0-beta.
|
|
66
|
-
"@charcoal-ui/utils": "^4.0.0-beta.
|
|
63
|
+
"@charcoal-ui/icons": "^4.0.0-beta.2",
|
|
64
|
+
"@charcoal-ui/styled": "^4.0.0-beta.2",
|
|
65
|
+
"@charcoal-ui/theme": "^4.0.0-beta.2",
|
|
66
|
+
"@charcoal-ui/utils": "^4.0.0-beta.2",
|
|
67
67
|
"@react-aria/button": "^3.9.1",
|
|
68
68
|
"@react-aria/checkbox": "^3.13.0",
|
|
69
69
|
"@react-aria/dialog": "^3.5.10",
|
|
@@ -96,5 +96,5 @@
|
|
|
96
96
|
"url": "https://github.com/pixiv/charcoal.git",
|
|
97
97
|
"directory": "packages/react"
|
|
98
98
|
},
|
|
99
|
-
"gitHead": "
|
|
99
|
+
"gitHead": "21a8c3ad738b69cfc849a3a7ec75dbae71eb9e97"
|
|
100
100
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
.charcoal-button {
|
|
2
2
|
appearance: none;
|
|
3
3
|
background: transparent;
|
|
4
|
-
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
padding: 0 24px;
|
|
5
6
|
border-style: none;
|
|
6
7
|
outline: none;
|
|
7
8
|
text-rendering: inherit;
|
|
@@ -23,8 +24,6 @@
|
|
|
23
24
|
font-size: 14px;
|
|
24
25
|
line-height: 22px;
|
|
25
26
|
font-weight: bold;
|
|
26
|
-
padding-right: 24px;
|
|
27
|
-
padding-left: 24px;
|
|
28
27
|
color: var(--charcoal-text2);
|
|
29
28
|
background-color: var(--charcoal-surface3);
|
|
30
29
|
transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
|