SGUI / Development
TextColorPickerControl
Semantic colors and custom hex values, with separate foreground/background modes.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Semantic colors and custom hex values, with separate foreground/background modes.
Loading examples…
Loading examples…
Loading examples…
Building a thoughtful learning experience
Semantic colors and custom hex values, with separate foreground/background modes.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextColorPickerControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextColorPickerControlExample() {
const [color,setColor] = useState("var(--sgui-text)");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextColorPickerControl value={color} onChange={setColor} disabled={false} mode={"foreground"}/><Typography style={{color:color}}>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Semantic colors and custom hex values, with separate foreground/background modes.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextColorPickerControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextColorPickerControlExample() {
const [color,setColor] = useState("var(--sgui-text)");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextColorPickerControl value={color} onChange={setColor} disabled={false} mode={"foreground"}/><Typography style={{color:color}}>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Semantic colors and custom hex values, with separate foreground/background modes.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextColorPickerControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextColorPickerControlExample() {
const [color,setColor] = useState("var(--sgui-surface)");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextColorPickerControl value={color} onChange={setColor} disabled={false} mode={"background"}/><Typography style={{background:color}}>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Semantic colors and custom hex values, with separate foreground/background modes.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextColorPickerControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextColorPickerControlExample() {
const [color,setColor] = useState("var(--sgui-text)");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextColorPickerControl value={color} onChange={setColor} disabled={true} mode={"foreground"}/><Typography style={{color:color}}>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}