@a-type/ui 6.0.56 → 6.0.57
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/components/box/Box.module.css +4 -0
- package/dist/components/box/Box.stories.js +2 -1
- package/dist/components/box/Box.stories.js.map +1 -1
- package/dist/components/typography/typography.module.css +2 -1
- package/package.json +1 -1
- package/src/components/box/Box.module.css +4 -0
- package/src/components/box/Box.stories.tsx +13 -0
- package/src/components/typography/typography.module.css +2 -1
|
@@ -195,6 +195,10 @@
|
|
|
195
195
|
@apply --mx-bg-faded(80%);
|
|
196
196
|
@apply --mx-borderColor-faded(80%);
|
|
197
197
|
}
|
|
198
|
+
/* reduce specificity so surface styles override */
|
|
199
|
+
&:where([data-dim='true']) {
|
|
200
|
+
@apply --mx-fg(var(--m-color-neutral-ink));
|
|
201
|
+
}
|
|
198
202
|
&[data-dim='true'] {
|
|
199
203
|
@apply --mx-fg-lighter(2.5);
|
|
200
204
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Button } from '../button/Button.js';
|
|
3
3
|
import { Checkbox } from '../checkbox/Checkbox.js';
|
|
4
|
+
import { Icon } from '../icon/Icon.js';
|
|
4
5
|
import { Progress } from '../progress/Progress.js';
|
|
5
6
|
import { Slider } from '../slider/Slider.js';
|
|
6
7
|
import { Switch } from '../switch/Switch.js';
|
|
@@ -85,7 +86,7 @@ export const Surfaces = {
|
|
|
85
86
|
};
|
|
86
87
|
export const DimComparison = {
|
|
87
88
|
render(args) {
|
|
88
|
-
return (_jsxs(Box, { gap: true, children: [_jsx(Box, { surface: "ambient", dim: true, children: "Dimmed box" }), _jsx(Box, { surface: "ambient", children: _jsx(Text, { dim: true, children: "Dimmed text" }) })] }));
|
|
89
|
+
return (_jsxs(Box, { gap: true, children: [_jsxs(Box, { dim: true, children: ["Dimmed non-surface", _jsx(Text, { children: "Text" }), _jsx(Icon, { name: "placeholder" })] }), _jsxs(Box, { surface: "ambient", dim: true, children: ["Dimmed box", _jsx(Text, { children: "Text" }), _jsx(Icon, { name: "placeholder" })] }), _jsxs(Box, { surface: "primary", dim: true, children: ["Dimmed box", _jsx(Text, { children: "Text" }), _jsx(Icon, { name: "placeholder" })] }), _jsx(Box, { surface: "ambient", children: _jsx(Text, { dim: true, children: "Dimmed text" }) })] }));
|
|
89
90
|
},
|
|
90
91
|
};
|
|
91
92
|
//# sourceMappingURL=Box.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../../src/components/box/Box.stories.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../../src/components/box/Box.stories.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -195,6 +195,10 @@
|
|
|
195
195
|
@apply --mx-bg-faded(80%);
|
|
196
196
|
@apply --mx-borderColor-faded(80%);
|
|
197
197
|
}
|
|
198
|
+
/* reduce specificity so surface styles override */
|
|
199
|
+
&:where([data-dim='true']) {
|
|
200
|
+
@apply --mx-fg(var(--m-color-neutral-ink));
|
|
201
|
+
}
|
|
198
202
|
&[data-dim='true'] {
|
|
199
203
|
@apply --mx-fg-lighter(2.5);
|
|
200
204
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
2
|
import { Button } from '../button/Button.js';
|
|
3
3
|
import { Checkbox } from '../checkbox/Checkbox.js';
|
|
4
|
+
import { Icon } from '../icon/Icon.js';
|
|
4
5
|
import { Progress } from '../progress/Progress.js';
|
|
5
6
|
import { Slider } from '../slider/Slider.js';
|
|
6
7
|
import { Switch } from '../switch/Switch.js';
|
|
@@ -158,8 +159,20 @@ export const DimComparison: Story = {
|
|
|
158
159
|
render(args) {
|
|
159
160
|
return (
|
|
160
161
|
<Box gap>
|
|
162
|
+
<Box dim>
|
|
163
|
+
Dimmed non-surface
|
|
164
|
+
<Text>Text</Text>
|
|
165
|
+
<Icon name="placeholder" />
|
|
166
|
+
</Box>
|
|
161
167
|
<Box surface="ambient" dim>
|
|
162
168
|
Dimmed box
|
|
169
|
+
<Text>Text</Text>
|
|
170
|
+
<Icon name="placeholder" />
|
|
171
|
+
</Box>
|
|
172
|
+
<Box surface="primary" dim>
|
|
173
|
+
Dimmed box
|
|
174
|
+
<Text>Text</Text>
|
|
175
|
+
<Icon name="placeholder" />
|
|
163
176
|
</Box>
|
|
164
177
|
<Box surface="ambient">
|
|
165
178
|
<Text dim>Dimmed text</Text>
|