Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e77d5c9

Browse files
WIP
1 parent 1725262 commit e77d5c9

File tree

6 files changed

+237
-4
lines changed

6 files changed

+237
-4
lines changed
Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
import { useAddonState } from '@storybook/client-api';
22
import { DecoratorFn } from '@storybook/react';
33
import React from 'react';
4-
import { ThemeProvider } from 'styled-components';
54

65
import themes from '../../src/common/themes/index';
6+
import { React95Provider } from '../../src/common/React95Provider';
7+
import { ThemeProvider } from '../../src/common/ThemeProvider';
78
import { THEMES_ID } from './constants';
89

910
export const withThemesProvider: DecoratorFn = story => {
1011
const [themeName] = useAddonState(THEMES_ID, 'original');
1112

1213
return (
13-
<ThemeProvider theme={themes[themeName] ?? themes.original}>
14-
{story()}
15-
</ThemeProvider>
14+
<React95Provider>
15+
<ThemeProvider theme={themes[themeName] ?? themes.original}>
16+
{story()}
17+
</ThemeProvider>
18+
</React95Provider>
1619
);
1720
};
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { ComponentMeta } from '@storybook/react';
2+
import React from 'react';
3+
import { IconWrapper } from 'react95';
4+
import styled from 'styled-components';
5+
6+
const icons = [
7+
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABK0lEQVR4AcXBi23jUAxFwUNCfV12Jrqzx8oYI8gGWtvyR5biGWMhM5sdZabxwMSFeZ7Zw+l04qwB4w7nQJnJWXOHc6CIIDM5a1Y4B5JERJCZnDU3OAeTRESQmZw1FyYOZGbc0IDxY+Ig8zwzzzNLVUVEsOR8mPMOM97lvMuMqmIrZysz9uDsQBFUFVs4W5hRY7AHZyeKoKp4lfMqM2oMJEE373J2pAiqilc4rzCjxkASv7p5h7MzRVBVPMt5lhk1BpK40s1WEy9QBM9QBDUGknhk4hlm1BhIYpUZWzh76WZJEVQVjziPmFFjIIkjTKwx4x9F8KubK2bcogi+dbNmYk03VcWVKiTxn26qilVVSOKWiTsk8SxJbOF8mPNhzodNXKgq/tLEQmby174AAGVj0Xjq+u0AAAAASUVORK5CYII=',
8+
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEyUlEQVR4Ac3Bi2EbNxBF0QuahaCTGVey7gRvOgkryaATdoIsFK4t0fxJYuScU/ggSYOVpMIFkgZ3SCp8UuEdJA1Wkoqk4e5kJpOkwkrSYOXubDyTdMczSXc8k0n8IqnwAd+4Q9Jwd2VmuLvcnVqrWC3LQimFWiu1Vrm73J1aK57Jj1oxM76XgqeTLsyM76Xwo1Zqrfw4/iBJ5JK7KzODdyjcIWm4O5nJ1Fqj986UmUytNXrvTJnJ5O54OumJmdF7xzMBcYsQk6TCA/Y8wMzYRARTa41NRDC11thkJkKYGSUKvwjUeKHCOSEmSUNS4Y5v3OHucndqrdRaKaVQa+VwOHA8HlmWhVIKtVYOhwPH45FlWSilUGvlcDjgOEnyQn/zQoVbkkQuZWZwwzfucHe5O1EK5ft3zIxaK6UUaq0cDgeOxyPLslBKodbK4XDgeDyyLAulFGqt1GPFcdK/gwdogAe3JAmJgOCKPQ9qQLhjQM/EzHgtIphaa2wigqm1xkYpJqnwEAFiAIULvnGHu8vdiQgaEMDy119EBC5Ra6XWSimFWiuHw4Hj8ciyLJRSqLVyOBw4Ho8sy0IphVor9VhxnCS5SQIlJAKCM3se1IAAGhBA4y0z47WIYGqtsYkIptYaG6WQBOIyCST+pQEUXtnzoAAaEEADAmj8zsx4LSKYWmtsIgJJZCYPkUDikh03SBqcNCCABgTQuM3MMDPcHXcnInB3rhNXSSABYjV4ZcejxsAzCaABwWPMDDPD3blJjaskkEDi3I4rJI3WGq+ZGW0MeiaNLySBBBKIaXCy44beO5eYGYzBU6lwlQQSSCDx2o4nKIXP0wAECDR4QwIJJJAAsdlxg5nx5dR4ocFPEkgggQQSq8FqxwWShrvTe+frBKjxhgY/SSCBBBKbHTd4Ju9RCh8nAcG/gp80QAM0QAIJJDY7rvBM0p2PKIWPkYDgKgkkkNjsuCLd8Uz+jMZbwU8SSGx2/N9I/K4BwU8Smx1XZCbiD5D4XQCNS/ackTRYtdaYIoIvo8HvAmhAcMmeE0mDVWuNKSL4SkKISxoQQAOCc3tJg1VrjSki+BMkIfFCavwSQAOCS/asWmv03vnTJDFJvJA4Cd4Sq8Jqx4mZYWa4O+7OuVL4Mq01WmuAuGfPSe+dyczYZCbnSoExeIrM5LUxBlNE8Kg9Z3rvmBlfQRLTGIMpIrhPrAone55gDB6WmUhiGmMwRQQfteeJxuAuSYwxmCKC9xGrwit7Lui9Y2ZMmcktvXcmM2MzBm/03pnGGEwRwbPs+YTeO2bG1HtnMjM2vXcmM2OKCD5OrApn9jxB7x0zY+q9szEzpojgc8SqcMGeK3rvmBmbMXij946Z0Xtn6r0zmRmbiODzxKpwxZ47zIzeO5OZMQY39d7JTJ6ocMNeEpLITM713pnMjKn3zsbM6L3zp+2BwsrdB6vM5FzvncnMmHrv/F8UfjdYZSbXmBm9d67JTD5DEieFOwrXDVaZyXtlJh8hiZPCgwr3DVaZyaMyk/eQxEnhnQqPG6wyk3syk0dI4qTwQYX3G6wyk2syk1skcVL4pMLHDVaZybnM5BJJnBSepPB5g1VmsslMXpPESeHJCs8zWGUmmckkiZPCf6TwfINfCv+xfwBkA0TLpEkjawAAAABJRU5ErkJggg==',
9+
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAFX0lEQVR4AdXBjXUaYbJF0XORAulM+iMSK5O+lYkzUVUmQyQ13cjIIAP6sd96mr3FP2C7+SLb4i88cltznThju8cYfEVmsmpAfJG4rm1zjW1WYmW7xxjM88xXVBWZiW1W4gvEn9o2tsUVtts2thljMM8zHxUR2GbT3WyqiszENivxSQ9catvYFjdkZgAeY/Djxw8+IiLY7/dkJicRgW2maUIS0zSRmQaCT3jkBpvmDtuAWZbmHkncIonuZp5nNrax3YD4IHGpbQNmWZp7JGGDDd3NNZK4YGABAjCvuptNVZGZ2GYlPuCBSx4jWZYGBAQQQAABBBBAEAHPzyDBfh/Y5lxEkJm8MrDwYgAGgqOIwDbTNCGJaZrITAPBOx44Y+NlaUCckyACIiACIjiyYQyQYL8PbHOy3++5kIC5JCA5ighsM00Tkpimicw0ENzxwC82vSwNiHMS2GaMwRiDMQaZycbmaAyQYL8PbBMRZCYbAwNIVgGYFwGYCxGBbaZpQhLTNJGZBoIbHljZ9LI0IN6KgDEGy7IwxmC/32ObzMTm1RggwX4fZCYbAwswgOCXAASYqyIC20zThCSmaSIzDQRXPLAaA49hIHgrAjKTiCAisM2yLEQENhfGAMlkJpsBDF4YCH5JXtnw/Aw2RHAUEdhmmiYkMU0TmWkgeGPHDVVJVbKxTXfT3SzLwklVUpVcMhsDC5fMJRuWhVfdvJLEZp5nxhjYZtW8seOGeR7M8+CaiGAzz4N5HlxjLgVgLtn8oZtXktjM88wYA9usmjNiZdPL0oA4qUpOxhi8lZmczPPgJAJsXjUvxDkD5qSbVxJ/6G42VUVmYpuVWD1ywzwPTrq5YvARAsw5AwuwAGIjgQ02f+hu7nnkhqrko+Z58FZ3I4mNuaUBsbG50N18xCM3zPPgb3U3kri0cMmAOelurqkqMhPbrMQvD6wyCSk8RgPBuarkcHjicHjicHjicHjicHjicHhimn5yLgJs6G6QCInn52cigt/MpT0n3c01VUVmYpuVOCPO2PSyNCA+KwJs6G6OJI662Ujit+aFOOlurqkqMhPbrMQbO87YKEJA8xkRYEN3g0RVcdTNSXfzm/iIqiIzsc1KXPHAG5mEFB6jgeA9EWBDd3MUwfTzJ3RzIoEUPD8/ExG8CE66m7eqiszENitxw44rbBQhoLklAiJgMXQ3SCBBN9fYC5vu5j1VRWZim5W4Y8cNNooQ0JyrSiI4soFukKCbV91sJKgqNt286m5OuptzVUVmYpuVeMeOO2wUIaDZVCWZAzDLwm/dHHXz1hgz3bySRETQ3bxVVWQmtlmJD9jxl6qKE4kjCSTo5irbbLqbk6oiM7HNSnzQjjtselkaELdkJlXFphsk6OZVN0eSqCo23c25qiIzsc1KfMKOG2x6WRoQ99hWZlJVbLo56uYPYwy6m3NVRWZim5X4pB3/gG1lJlXFiSQ2kpBEd/NWVZGZ2GYlvmDHDTaKEBF8iG1lJlXFpruRRHdz0t2cVBWZiW1W4oseuCOTyMQSjAGHwxP/+c9PYDBGEsEm+CUzY5omS2KaJmyzsc25qiIzsc1K/IUd75PNh9lWZlJVXFNVZCa2WYm/tOMdNs0n2VZmUlWcqyoyE9usxD+w4w6bZtXdfJZtZSZVRVVRVWQmtlmJf+SRG2x6WZoX4itsy3bb5oz4hx55l/gbtsX/oR032ChCQPOd7XhHhIDmu9pxh41YRYjvasc7bGSzar6jHe+waY7Ed/TIHTa9LM2yiO9qx/+4HXfYECG+sx33yYYI/hDBt/DA+yITS/Djx0+qWA3sZCX+n+34GNkQwbcjPqf5TXwD/wX5t+jqwrT3TgAAAABJRU5ErkJggg==',
10+
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACZElEQVR4AcXBgW3rOBRE0TuOC1EqIVUZ51VilUJ2sqnkreTvAIqh5C9sB3uObCcvYFs84MyqtcaeJGzTWmNPErZprbEniUeduYkIjkQERyKCVzixY5sjtjlim2ed2LHNEdscsc2zzqwkcUQSRyTxKmdWmcmeJDaZyZ4kNpnJniQedeYmIjgSERyJCF7hxI5tjthmLyLY2OZZZ3Zsc8Q2m8xkM8ag945tnnVmJYkjkthrrbEppVBKISKwjW1WyR3b4i/OrDKTPUlsMpM9SWwyk01rjY1tMpMxBrVWMpMxBqsExA/eaq2utRIRjDEYY9B7p9ZKrZWIYIzBGIPeO7aZ5xnbbGqtSGKeZy6XC/M88/7+zuVyYZ5nlmUxEHzjxI5tjthmLzORxKfWGraRRCmF3juSKKXQe2eVfOPEjm2O2OaebSTxqbWGbSRRSqH3jiRKKfTeWSUHZDttc882trlnG9t8sk1rjZ+MMai1shJ3zqwykz1JbDKTjSQyk4jANpnJp4jgGWduIoIjEcFmjEFrjY0kbPMKJ3Zs851aK2MMWmvYxja2sc0zzuzY5ohtNrVWeu+01mit8QpnVpI4Iol7tVZ675RSeAXxmOy9U0rhvxhjUGtlJe688ZhYlsXzPDNNE38zTRPzPDMtiyu4Q3DzxuNiWRZHBPM8M00TP/n4+OCfZaEBAQaClXiN5Kb3TimFeyHR+CMAcyXxetl7p5TCp5BofBWAgTdeL5Zl8TzPTNNESDS+CsBcSfwSQ7JqfBWAuRKrE7+o8VUA5krcvPFLOoTAlT8CMFdiR/wyQ7IyV+J/knzjX7iWFfpK7PVmAAAAAElFTkSuQmCC',
11+
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACfElEQVR4Ae3B0XFbVwxF0X1s93WhTtTJPajE6oRAZQifJSYUxzJpJzP50Vp8+vTp06f/m8DDOxYPshlu2IjfIPBwxeYu27KZvQcQ1zL5m4244xs3IoIHzN4DCBiu7S2uDGc24gMCD1dmNvd0NxHBzJApwNimqlhr8Q9xyOQHG3HjK4S5Yge/Ionv379jG0lEmL03UvL8/IKURCSZ4umpsIeIJGKQ0hG4iuTNFx4kicPMIInDzGAbENcyzd4bGyQBA4i9h73BZnjzFcJcsYOfsY0kbGMbSdjGNlJyOoEENlQVdtINVSAlEQMIGCISCVeRX7ghiVuSOMwMkriQxGFmkGBvmBlmoLu4lilgAAFDRHE2Aob3BAxvZoaDJGYGSRxmBhASzAwHSdiwN28GEBLYsDdnQ3dTFdgg7pszJHGoKtZagIAhM7HNxcxwyBR7czZIwoa9h+6mKjjYIB4zNkQUay1AZIINM8MhM9nbZIINM5wNICR+mIHuoiqw+eErD7BxRLHWAgQM3eJ0KjKTp6fkdDoBplucTgUMILqLl5cXZobM5Pn5hSqwTVXxjTtsZu/hlcgEW8wMsIFkxmQKG2zOBhDdRVVwsTdEFFXBhbjDZvaG7mKtxSuRCTbMDIfMZG8DA4juoiq4sGEGuouqwOYgcYfNRBRrBd3FWgEMr0Qm2GDD3gOI7qIquGVzS+IOm9kbuou1gu5iraC7WGvxSlx0F1XBr9hcSDxmOKsq1gq6i7WC7mKtAIZDd1MVfMTmQrwRv2c4m4HuYq2gu1gr6C6qgp+xuRA3xJ8ZzqqKtYLuYq0gk3dsLsQHxL8znM1Ad1EVHGwuxB3ivzG8Jx70FzzWb8/V5VanAAAAAElFTkSuQmCC',
12+
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB6ElEQVR4AcXBgXGrSBRE0TssgZDJvFCcCU0mDqVfJnYks7DF1Oe7kITkrdI5hRdIavwgqfCCkSdJahHBiQYUnjTyglor/5eRF2UmG9v8xsCbDbzZwJsNvNnAmw282cCbDbzZwBMkNVbLsnBGUuNJhQskNVYRwSYi+Mk2G9t0kgoPFO6Q1FhFBEe2meeZzMQ2krDNT7bpJBVOjJyQ1FhFBL8REXSSGjtJhd0/HEhqEaGIYJomzthmExF8f3/z9fWFbT4/P/n4+OCWaZqYpolpmpimSbYXVgM7SS0iiAhusc08z5yRRETQOQJHcEdjNbKS1CKCq+Z5ppRCJ4kjRxA2NYISgW1uKZLaPM9sMpNHbDPPM5vMZGMbSdhmYxsk/iMREWxs00liVUYOaq10mcmZiGBZFjaS6GzTRQTYdLa5ZWSVmWxqrXS1VrrM5Cgi2NjmHts8MnKQmXS1VrpaK11m8ohtrhq5ITPpaq10tVa6zOTINs8auSAz6WqtdLVWumVZeMXIyjabiOCRzKSrtbJZloWrJLErrEZWkthIoosIHslMbHOFJHaFg8LfGjtJdBHBLba5RxK7wonCbY2dJLqI4Mg2ZySxK9xRuKaxk0QXEdjmSBK7wgWF5zV2kugksSs8ofA7jT8KL/gX3uTg+E/t5QMAAAAASUVORK5CYII=',
13+
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABnUlEQVR4AcXBC27rSAwAwaaQe3Fupj4a52RcBbABPa3tyHY+VcET1OYBNXhS8AW1uRhjkJncMuekqrhSgxOCO9RmM8YgM3nGnJOq4pMaPBDcoPYYg8zkHXNOqgo1uCM4UHtdV+6ZczJGslc1yUzuiQg2wQ0LO2qv68ojYyRHYySPdDeb5oaFC7XXdeWndDeb5mBho/YYgzOqJkdVkzOqik2z88FFZnJGZtLNQXJGZvJJbTXYLGqPMfgtVYWK2mw+2GQmZ0RwVzenZCZ7C0/ohm6+jdoLf2zhjy38sYXNnJPfMudkb1GjqvgtYwxUrhYu5pz8tDknR8GF2uu68kgEX+rmrohA5UqN4F+94SdEBCp7agT/1xu+U0SgsqcGm+C2rioyk3fMORljoLKnBhfBfc2mqshMnjHnZIzBJ5U9NdgJHlBb5aqqyExumXMyxuBK5UgNDoIvqM2FylVVkZlcRQQq96jBDcFJarOj0t1cRQQqR2rwwAcnqcGF2jygBictvEANIDa8a+E9seEdC++LDa9a+B6h8oqFb6IGL/gPC1nJrKDhY30AAAAASUVORK5CYII='
14+
];
15+
16+
const emojis = ['🎲', '🏠', '🐩', '💾', '🚾', '📁', '💭'];
17+
18+
const Wrapper = styled.div`
19+
padding: 5rem;
20+
background: ${({ theme }) => theme.material};
21+
`;
22+
23+
const Row = styled.div`
24+
display: flex;
25+
align-items: center;
26+
gap: 16px;
27+
margin-top: 24px;
28+
img {
29+
width: 48px;
30+
height: 48px;
31+
image-rendering: pixelated;
32+
}
33+
span {
34+
display: inline-block;
35+
font-size: 48px;
36+
line-height: 48px;
37+
}
38+
`;
39+
40+
export default {
41+
title: 'Other/IconWrapper',
42+
component: IconWrapper,
43+
decorators: [story => <Wrapper>{story()}</Wrapper>]
44+
} as ComponentMeta<typeof IconWrapper>;
45+
46+
export function Default() {
47+
return (
48+
<div>
49+
<Row>
50+
{icons.map((icon, i) => (
51+
<IconWrapper key={i}>
52+
<img src={icon} alt='icon' />
53+
</IconWrapper>
54+
))}
55+
</Row>
56+
<Row>
57+
{icons.map((icon, i) => (
58+
<IconWrapper key={i} disabled>
59+
<img src={icon} alt='icon' />
60+
</IconWrapper>
61+
))}
62+
</Row>
63+
<Row>
64+
{emojis.map((emoji, i) => (
65+
<IconWrapper key={i}>
66+
<span>{emoji}</span>
67+
</IconWrapper>
68+
))}
69+
</Row>
70+
<Row>
71+
{emojis.map((emoji, i) => (
72+
<IconWrapper key={i} disabled>
73+
<span>{emoji}</span>
74+
</IconWrapper>
75+
))}
76+
</Row>
77+
</div>
78+
);
79+
}
80+
81+
Default.story = {
82+
name: 'default'
83+
};

‎src/IconWrapper/IconWrapper.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { getDisabledFilterId } from '../common/ThemeProvider';
4+
import { CommonStyledProps } from '../types';
5+
6+
type IconWrapperProps = {
7+
disabled?: boolean;
8+
} & React.HTMLAttributes<HTMLDivElement> &
9+
CommonStyledProps;
10+
11+
const IconWrapper = styled.div<IconWrapperProps>`
12+
${({ theme, disabled }) => `
13+
display: grid;
14+
filter: ${
15+
disabled ? `contrast(2) url(#${getDisabledFilterId(theme)})` : 'none'
16+
};
17+
`}
18+
`;
19+
20+
IconWrapper.displayName = 'IconWrapper';
21+
22+
export { IconWrapper, IconWrapperProps };

‎src/common/React95Provider.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
3+
type Props = {
4+
children: React.ReactNode;
5+
};
6+
7+
const UtilsElementContext = React.createContext<HTMLDivElement | null>(null);
8+
9+
export function useUtilsElement() {
10+
const utils = React.useContext(UtilsElementContext);
11+
12+
return utils;
13+
}
14+
15+
export function React95Provider({ children }: Props) {
16+
const [utils, setUtils] = React.useState<HTMLDivElement | null>(null);
17+
18+
React.useLayoutEffect(() => {
19+
const filtersWrapper = document.createElement('react95-utils');
20+
const div = document.createElement('div');
21+
filtersWrapper.appendChild(div);
22+
document.documentElement.appendChild(filtersWrapper);
23+
setUtils(div);
24+
25+
return () => {
26+
filtersWrapper.remove();
27+
};
28+
}, []);
29+
30+
return (
31+
<UtilsElementContext.Provider value={utils}>
32+
{children}
33+
</UtilsElementContext.Provider>
34+
);
35+
}

‎src/common/ThemeProvider.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from 'react';
2+
import { ThemeProvider as SCThemeProvider } from 'styled-components';
3+
import { Theme } from '../types';
4+
import { useUtilsElement } from './React95Provider';
5+
6+
type Props = React.ComponentProps<typeof SCThemeProvider> & {
7+
theme: Theme;
8+
};
9+
10+
export function getDisabledFilterId(theme: Theme) {
11+
return `disabled-filter--${theme.name}`;
12+
}
13+
export function ThemeProvider({ theme, ...otherProps }: Props) {
14+
const utilsElement = useUtilsElement();
15+
16+
React.useLayoutEffect(() => {
17+
if (utilsElement) {
18+
const filterId = getDisabledFilterId(theme);
19+
const filter = document.getElementById(filterId);
20+
if (!filter) {
21+
// const disabledFilter = `
22+
// <filter id="${filterId}">
23+
// <feColorMatrix
24+
// type="matrix"
25+
// values="1 0 0 0 0
26+
// 0 1 0 0 0
27+
// 0 0 1 0 0
28+
// -21.25 -71.54 -7.21 40 0"
29+
// result="remove-bright-pixels"
30+
// />
31+
// <feFlood flood-color="${theme.materialTextDisabled}" result="color" />
32+
// <feComposite in="color" in2="remove-bright-pixels" operator="in" />
33+
// <feDropShadow
34+
// dx="1"
35+
// dy="1"
36+
// stdDeviation="0"
37+
// flood-color="${theme.materialTextDisabledShadow}"
38+
// />
39+
// </filter>
40+
41+
// `;
42+
const disabledFilter = `
43+
<filter id="${filterId}">
44+
<feOffset in="SourceGraphic" dx="1" dy="1" result="one"/>
45+
<feOffset in="SourceGraphic" dx="-1" dy="-1" result="two"/>
46+
<feComposite in="one" in2="two" operator="in" result="swag"/>
47+
<feDropShadow dx="1" dy="1" stdDeviation="0" flood-color="red" result="outline-one"/>
48+
<feDropShadow dx="-1" dy="-1" stdDeviation="0" flood-color="red" result="outline-two"/>
49+
<feComposite in="outline-one" in2="outline-two" operator="over" result="outline"/>
50+
<feComposite in="outline" in2="swag" operator="out" result="outline-result"/>
51+
52+
<feColorMatrix
53+
in="SourceGraphic"
54+
type="matrix"
55+
values="1 0 0 0 0
56+
0 1 0 0 0
57+
0 0 1 0 0
58+
-21.25 -71.54 -7.21 50 0"
59+
result="remove-bright-pixels"
60+
/>
61+
<feComposite in="outline-result" in2="remove-bright-pixels" operator="over" result="haha"/>
62+
<feFlood flood-color="${theme.materialTextDisabled}" result="color" />
63+
<feComposite in="color" in2="haha" operator="in" />
64+
<feDropShadow
65+
dx="1"
66+
dy="1"
67+
stdDeviation="0"
68+
flood-color="${theme.materialTextDisabledShadow}"
69+
/>
70+
71+
</filter>
72+
73+
`;
74+
const svg = document.createElementNS(
75+
'http://www.w3.org/2000/svg',
76+
'svg'
77+
);
78+
svg.innerHTML = disabledFilter;
79+
utilsElement.appendChild(svg);
80+
}
81+
}
82+
}, [theme, utilsElement]);
83+
return <SCThemeProvider theme={theme} {...otherProps} />;
84+
}

‎src/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export * from './Frame/Frame';
1515
export * from './GroupBox/GroupBox';
1616
export * from './Handle/Handle';
1717
export * from './Hourglass/Hourglass';
18+
export * from './IconWrapper/IconWrapper';
1819
export * from './MenuList/MenuList';
1920
export * from './Monitor/Monitor';
2021
export * from './NumberInput/NumberInput';
@@ -45,3 +46,8 @@ export * from './legacy/Panel';
4546
export * from './legacy/Progress';
4647
export * from './legacy/TextField';
4748
export * from './legacy/Tree';
49+
50+
/* other */
51+
52+
export * from './common/ThemeProvider';
53+
export * from './common/React95Provider';

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /