admin/webstudio
1
0 Fork 0
mirror of https://github.com/webstudio-is/webstudio.git synced 2026-11-07 12:33:36 +09:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #331 from webstudio-is/feature-style-panel-typography-section

Browse Source 
Feature style panel typography section
This commit is contained in:
Oleg Isonen authored and GitHub committed 2022-11-15 20:36:29 +01:00
2 parents 76de817d77 84fa4580fb
commit 2ba4941b5e
19 files changed
+758 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx
+313 -14
View File
@@ -1,19 +1,318 @@
import type { RenderCategoryProps } from "../../style-sections";
import { ShowMore } from "../../shared/show-more";
import { renderProperty } from "../../style-sections";
import { Flex, Grid, IconButton, Tooltip } from "@webstudio-is/design-system";
import { PropertyName } from "../../shared/property-name";
import {
ColorControl,
FontFamilyControl,
FontWeightControl,
SelectControl,
TextControl,
} from "../../controls";
import {
CrossSmallIcon,
EllipsesIcon,
TextDirectionLTRIcon,
TextDirectionRTLIcon,
TextAlignCenterIcon,
TextAlignJustifyIcon,
TextAlignLeftIcon,
TextAlignRightIcon,
TextCapitalizeIcon,
TextHyphenIcon,
TextItalicIcon,
TextLowercaseIcon,
TextStrikethroughIcon,
TextTruncateIcon,
TextUnderlineIcon,
TextUppercaseIcon,
} from "@webstudio-is/icons";
import { ToggleGroupControl } from "../../controls/toggle/toggle-control";
import { ValuePickerPopover } from "../../shared/value-picker-popover";
export const TypographySection = ({
styleConfigsByCategory,
moreStyleConfigsByCategory,
}: RenderCategoryProps) => {
export const TypographySection = (props: RenderCategoryProps) => {
return (
<>
{styleConfigsByCategory.map((entry) => renderProperty(entry))}
<ShowMore
styleConfigs={moreStyleConfigsByCategory.map((entry) =>
renderProperty(entry)
)}
/>
</>
<Flex css={{ gap: "$spacing$7" }} direction="column">
<TypographySectionFont {...props} />
<TypographySectionSizing {...props} />
<TypographySectionAdvanced {...props} />
</Flex>
);
};
export const TypographySectionFont = (props: RenderCategoryProps) => {
const { sectionStyle } = props;
return (
<Grid
css={{
gap: "$spacing$5",
}}
>
<Grid css={{ gridTemplateColumns: "4fr 6fr" }}>
<PropertyName label="Font" property="fontFamily" />
<FontFamilyControl {...sectionStyle.fontFamily} />
</Grid>
<Grid css={{ gridTemplateColumns: "4fr 6fr" }}>
<PropertyName label="Weight" property="fontWeight" />
<FontWeightControl {...sectionStyle.fontWeight} />
</Grid>
<Grid css={{ gridTemplateColumns: "4fr 6fr" }}>
<PropertyName label="Color" property="color" />
<ColorControl {...sectionStyle.color} />
</Grid>
</Grid>
);
};
export const TypographySectionSizing = (props: RenderCategoryProps) => {
const { sectionStyle } = props;
return (
<Grid
css={{
gridTemplateColumns: "1fr 1fr 1fr",
gap: "$spacing$5",
}}
>
<Grid css={{ gridTemplateColumns: "auto", gap: "$spacing$3" }}>
<PropertyName property="fontSize" label="Size" />
<TextControl {...sectionStyle.fontSize} />
</Grid>
<Grid css={{ gridTemplateColumns: "auto", gap: "$spacing$3" }}>
<PropertyName property="lineHeight" label="Height" />
<TextControl {...sectionStyle.lineHeight} />
</Grid>
<Grid css={{ gridTemplateColumns: "auto", gap: "$spacing$3" }}>
<PropertyName property="letterSpacing" label="Spacing" />
<TextControl {...sectionStyle.letterSpacing} />
</Grid>
</Grid>
);
};
export const TypographySectionAdvanced = (props: RenderCategoryProps) => {
const { setProperty, currentStyle } = props;
const setTextAlign = setProperty("textAlign");
const setTextDecorationLine = setProperty("textDecorationLine");
const setTextTransform = setProperty("textTransform");
const setFontStyle = setProperty("fontStyle");
return (
<Grid
css={{
gap: "$spacing$5",
}}
>
<Grid
css={{
gridTemplateColumns: "1fr 1fr",
gap: "$spacing$9",
}}
>
<ToggleGroupControl
property="textAlign"
onValueChange={(value) => setTextAlign(value)}
value={String(getTextAlign(String(currentStyle.textAlign?.value)))}
items={[
{
child: <TextAlignLeftIcon />,
label: "align: left",
value: "start",
},
{
child: <TextAlignCenterIcon />,
label: "align: center",
value: "center",
},
{
child: <TextAlignRightIcon />,
label: "align: right",
value: "end",
},
{
child: <TextAlignJustifyIcon />,
label: "align: justify",
value: "justify",
},
]}
/>
<ToggleGroupControl
property="textDecorationLine"
onValueChange={(value) => setTextDecorationLine(value)}
value={String(currentStyle.textDecorationLine?.value)}
items={[
{
child: <CrossSmallIcon />,
label: "None",
value: "none",
},
{
child: <TextUnderlineIcon />,
label: "Underline",
value: "underline",
},
{
child: <TextStrikethroughIcon />,
label: "Line through",
value: "line-through",
},
]}
/>
</Grid>
<Grid
css={{
gridTemplateColumns: "1fr 1fr auto",
gap: "$spacing$9",
alignItems: "center",
}}
>
<ToggleGroupControl
property="textTransform"
onValueChange={(value) => setTextTransform(value)}
value={String(currentStyle.textTransform?.value)}
items={[
{
child: <CrossSmallIcon />,
label: "None",
value: "none",
},
{
child: <TextUppercaseIcon />,
label: "Uppercase",
value: "uppercase",
},
{
child: <TextCapitalizeIcon />,
label: "Capitalize",
value: "capitalize",
},
{
child: <TextLowercaseIcon />,
label: "Lowercase",
value: "lowercase",
},
]}
/>
<ToggleGroupControl
property="fontStyle"
onValueChange={(value) => setFontStyle(value)}
value={String(currentStyle.fontStyle?.value)}
items={[
{
child: <CrossSmallIcon />,
label: "None",
value: "normal",
},
{
child: <TextItalicIcon />,
label: "Italic",
value: "italic",
},
]}
/>
<TypographySectionAdvancedPopover {...props} />
</Grid>
</Grid>
);
};
export const TypographySectionAdvancedPopover = (
props: RenderCategoryProps
) => {
const { setProperty, currentStyle, sectionStyle } = props;
const setDirection = setProperty("direction");
const setTextOverflow = setProperty("textOverflow");
const setHyphens = setProperty("hyphens");
return (
<ValuePickerPopover
title="Advanced Typography"
content={
<Grid css={{ padding: "$spacing$9", gap: "$spacing$9" }}>
<Grid css={{ gridTemplateColumns: "4fr 6fr" }}>
<PropertyName property="whiteSpace" label="White Space" />
<SelectControl {...sectionStyle.whiteSpace} />
</Grid>
<Grid css={{ gridTemplateColumns: "4fr auto" }}>
<PropertyName property="direction" label="Direction" />
<ToggleGroupControl
property="direction"
onValueChange={(value) => setDirection(value)}
value={String(currentStyle.direction?.value)}
items={[
{
child: <TextDirectionLTRIcon />,
label: "Left to Right",
value: "ltr",
},
{
child: <TextDirectionRTLIcon />,
label: "Right to Left",
value: "rtl",
},
]}
/>
</Grid>
<Grid css={{ gridTemplateColumns: "4fr auto" }}>
<PropertyName property="hyphens" label="Hyphens" />
<ToggleGroupControl
property="hyphens"
onValueChange={(value) => setHyphens(value)}
value={String(currentStyle.hyphens?.value)}
items={[
{
child: <CrossSmallIcon />,
label: "None",
value: "manual",
},
{
child: <TextHyphenIcon />,
label: "Auto",
value: "auto",
},
]}
/>
</Grid>
<Grid css={{ gridTemplateColumns: "4fr auto" }}>
<PropertyName property="textOverflow" label="Text Overflow" />
<ToggleGroupControl
property="textOverflow"
onValueChange={(value) => setTextOverflow(value)}
value={String(currentStyle.textOverflow?.value)}
items={[
{
child: <CrossSmallIcon />,
label: "None",
value: "clip",
},
{
child: <TextTruncateIcon />,
label: "Ellipsis",
value: "ellipsis",
},
]}
/>
</Grid>
</Grid>
}
>
<Flex>
<Tooltip content="More typography options" delayDuration={0}>
<IconButton>
<EllipsesIcon />
</IconButton>
</Tooltip>
</Flex>
</ValuePickerPopover>
);
};
const getTextAlign = (value: string) => {
switch (value) {
case "left":
return "start";
case "right":
return "end";
default:
return value;
}
};
packages/design-system/src/components/toggle-group.tsx
+2 -1
View File
@@ -9,7 +9,8 @@ export const ToggleGroupRoot = styled(ToggleGroupPrimitive.Root, {
});
export const ToggleGroupItem = styled(ToggleGroupPrimitive.Item, {
all: "unset",
// all: "unset", // @note weird bug, this somehow gets into weird specifity issues with how styles are inserted
border: "none",
backgroundColor: "$loContrast",
color: "$hiContrast",
display: "flex",
packages/icons/src/external-link.tsx
+27
View File
@@ -0,0 +1,27 @@
import * as React from "react";
import { IconProps } from "./types";
export const ExternalLinkIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
width="16"
height="16"
fill={color}
{...props}
ref={forwardedRef}
>
<path
fill={color}
fillRule="evenodd"
clipRule="evenodd"
d="M3.7 3.7h2.294a.7.7 0 1 0 0-1.4H3.5a1.2 1.2 0 0 0-1.2 1.2v9a1.2 1.2 0 0 0 1.2 1.2h9a1.2 1.2 0 0 0 1.2-1.2V9.993a.7.7 0 1 0-1.4 0V12.3H3.7V3.7ZM8.813 3a.7.7 0 0 1 .7-.7H13a.7.7 0 0 1 .7.7v3.49a.7.7 0 1 1-1.4 0v-1.8L8.495 8.495a.7.7 0 1 1-.99-.99L11.31 3.7H9.513a.7.7 0 0 1-.7-.7Z"
/>
</svg>
);
}
);
ExternalLinkIcon.displayName = "ExternalLinkIcon";
packages/icons/src/index.ts
+14
View File
@@ -77,3 +77,17 @@ export * from "./order-last";
export * from "./cross-small";
export * from "./cross-large";
export * from "./ellipses";
export * from "./text-align-center";
export * from "./text-align-justify";
export * from "./text-align-left";
export * from "./text-align-right";
export * from "./text-capitalize";
export * from "./text-hyphen";
export * from "./text-italic";
export * from "./text-lowercase";
export * from "./text-strikethrough";
export * from "./text-truncate";
export * from "./text-underline";
export * from "./text-uppercase";
export * from "./text-direction-ltr";
export * from "./text-direction-rtl";
packages/icons/src/legacy.ts
-1
View File
@@ -21,7 +21,6 @@ export {
CommitIcon,
InputIcon,
ButtonIcon,
TextAlignLeftIcon,
HeadingIcon,
TextIcon,
SquareIcon,
packages/icons/src/text-align-center.tsx
+32
View File
@@ -0,0 +1,32 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextAlignCenterIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
d="M1 4C1 3.65482 1.27982 3.375 1.625 3.375H14.375C14.7202 3.375 15 3.65482 15 4C15 4.34518 14.7202 4.625 14.375 4.625H1.625C1.27982 4.625 1 4.34518 1 4Z"
fill={color}
/>
<path
d="M4 8C4 7.65482 4.27982 7.375 4.625 7.375H11.375C11.7202 7.375 12 7.65482 12 8C12 8.34518 11.7202 8.625 11.375 8.625H4.625C4.27982 8.625 4 8.34518 4 8Z"
fill={color}
/>
<path
d="M3 12C3 11.6548 3.27982 11.375 3.625 11.375H12.375C12.7202 11.375 13 11.6548 13 12C13 12.3452 12.7202 12.625 12.375 12.625H3.625C3.27982 12.625 3 12.3452 3 12Z"
fill={color}
/>
</svg>
);
}
);
TextAlignCenterIcon.displayName = "TextAlignCenterIcon";
packages/icons/src/text-align-justify.tsx
+32
View File
@@ -0,0 +1,32 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextAlignJustifyIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
d="M1 4C1 3.65482 1.27982 3.375 1.625 3.375H14.375C14.7202 3.375 15 3.65482 15 4C15 4.34518 14.7202 4.625 14.375 4.625H1.625C1.27982 4.625 1 4.34518 1 4Z"
fill={color}
/>
<path
d="M1 8C1 7.65482 1.27982 7.375 1.625 7.375H14.375C14.7202 7.375 15 7.65482 15 8C15 8.34518 14.7202 8.625 14.375 8.625H1.625C1.27982 8.625 1 8.34518 1 8Z"
fill={color}
/>
<path
d="M1.625 11.375C1.27982 11.375 1 11.6548 1 12C1 12.3452 1.27982 12.625 1.625 12.625H14.375C14.7202 12.625 15 12.3452 15 12C15 11.6548 14.7202 11.375 14.375 11.375H1.625Z"
fill={color}
/>
</svg>
);
}
);
TextAlignJustifyIcon.displayName = "TextAlignJustifyIcon";
packages/icons/src/text-align-left.tsx
+32
View File
@@ -0,0 +1,32 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextAlignLeftIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
d="M1 4C1 3.65482 1.27982 3.375 1.625 3.375H14.375C14.7202 3.375 15 3.65482 15 4C15 4.34518 14.7202 4.625 14.375 4.625H1.625C1.27982 4.625 1 4.34518 1 4Z"
fill={color}
/>
<path
d="M1 8C1 7.65482 1.27982 7.375 1.625 7.375H8.375C8.72018 7.375 9 7.65482 9 8C9 8.34518 8.72018 8.625 8.375 8.625H1.625C1.27982 8.625 1 8.34518 1 8Z"
fill={color}
/>
<path
d="M1 12C1 11.6548 1.27982 11.375 1.625 11.375H10.375C10.7202 11.375 11 11.6548 11 12C11 12.3452 10.7202 12.625 10.375 12.625H1.625C1.27982 12.625 1 12.3452 1 12Z"
fill={color}
/>
</svg>
);
}
);
TextAlignLeftIcon.displayName = "TextAlignLeftIcon";
packages/icons/src/text-align-right.tsx
+32
View File
@@ -0,0 +1,32 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextAlignRightIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
d="M1 4C1 3.65482 1.27982 3.375 1.625 3.375H14.375C14.7202 3.375 15 3.65482 15 4C15 4.34518 14.7202 4.625 14.375 4.625H1.625C1.27982 4.625 1 4.34518 1 4Z"
fill={color}
/>
<path
d="M7 8C7 7.65482 7.27982 7.375 7.625 7.375H14.375C14.7202 7.375 15 7.65482 15 8C15 8.34518 14.7202 8.625 14.375 8.625H7.625C7.27982 8.625 7 8.34518 7 8Z"
fill={color}
/>
<path
d="M5 12C5 11.6548 5.27982 11.375 5.625 11.375H14.375C14.7202 11.375 15 11.6548 15 12C15 12.3452 14.7202 12.625 14.375 12.625H5.625C5.27982 12.625 5 12.3452 5 12Z"
fill={color}
/>
</svg>
);
}
);
TextAlignRightIcon.displayName = "TextAlignRightIcon";
packages/icons/src/text-capitalize.tsx
+24
View File
@@ -0,0 +1,24 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextCapitalizeIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
d="M2.97885 8.20764C2.61986 8.20764 2.32885 8.49866 2.32885 8.85764C2.32885 9.21663 2.61986 9.50764 2.97885 9.50764V8.20764ZM6.45885 9.50764C6.81783 9.50764 7.10885 9.21663 7.10885 8.85764C7.10885 8.49866 6.81783 8.20764 6.45885 8.20764V9.50764ZM4.29644 4.81751L4.90952 5.03345L4.29644 4.81751ZM1.20577 11.6356C1.0865 11.9742 1.26431 12.3454 1.6029 12.4647C1.9415 12.5839 2.31267 12.4061 2.43193 12.0675L1.20577 11.6356ZM5.14126 4.81751L4.52818 5.03345V5.03345L5.14126 4.81751ZM7.00577 12.0675C7.12503 12.4061 7.4962 12.5839 7.83479 12.4647C8.17339 12.3454 8.35119 11.9742 8.23193 11.6356L7.00577 12.0675ZM4.59071 4.18692L4.24203 3.63836L4.24203 3.63836L4.59071 4.18692ZM4.84699 4.18692L5.19567 3.63836L5.19567 3.63836L4.84699 4.18692ZM9.74033 6.34775C9.4867 6.60179 9.48702 7.01335 9.74107 7.26699C9.99511 7.52062 10.4067 7.52029 10.6603 7.26625L9.74033 6.34775ZM13.8673 7.19908L13.2649 7.44319L13.2781 7.47586L13.2948 7.50691L13.8673 7.19908ZM13.0622 8.66143L12.9153 8.02825L13.0622 8.66143ZM9.68547 10.7235L9.03689 10.7664L9.68547 10.7235ZM2.97885 9.50764H6.45885V8.20764H2.97885V9.50764ZM3.68336 4.60156L1.20577 11.6356L2.43193 12.0675L4.90952 5.03345L3.68336 4.60156ZM4.52818 5.03345L7.00577 12.0675L8.23193 11.6356L5.75434 4.60156L4.52818 5.03345ZM4.90952 5.03345C4.94351 4.93693 4.97125 4.85822 4.996 4.79094C5.02094 4.72313 5.03942 4.67639 5.05396 4.64334C5.0694 4.60825 5.07319 4.60542 5.06484 4.61791C5.0568 4.62994 5.01859 4.68514 4.93939 4.73548L4.24203 3.63836C4.01318 3.78382 3.90853 4.01871 3.8641 4.11967C3.80654 4.25045 3.74674 4.42162 3.68336 4.60156L4.90952 5.03345ZM5.75434 4.60156C5.69096 4.42162 5.63115 4.25045 5.5736 4.11967C5.52916 4.01871 5.42451 3.78382 5.19567 3.63836L4.4983 4.73548C4.41911 4.68514 4.38089 4.62994 4.37285 4.61791C4.36451 4.60542 4.36829 4.60825 4.38374 4.64334C4.39828 4.67639 4.41675 4.72313 4.4417 4.79094C4.46644 4.85822 4.49418 4.93693 4.52818 5.03345L5.75434 4.60156ZM4.93939 4.73548C4.88097 4.77262 4.80474 4.79841 4.71885 4.79841C4.63295 4.79841 4.55673 4.77262 4.4983 4.73548L5.19567 3.63836C4.90209 3.45176 4.5356 3.45176 4.24203 3.63836L4.93939 4.73548ZM10.6603 7.26625C10.6308 7.29581 10.6471 7.27132 10.7739 7.21285C10.8802 7.16385 11.0216 7.1102 11.183 7.06039C11.5159 6.95766 11.864 6.89265 12.0975 6.89265V5.59265C11.6831 5.59265 11.1964 5.69577 10.7997 5.81818C10.5963 5.88095 10.3991 5.95413 10.2295 6.03233C10.0805 6.10106 9.88371 6.20414 9.74033 6.34775L10.6603 7.26625ZM12.0975 6.89265C12.6361 6.89265 12.8947 7.01242 13.0195 7.10261C13.1431 7.19192 13.2084 7.30385 13.2649 7.44319L14.4697 6.95497C14.3694 6.70732 14.1852 6.34104 13.7809 6.04889C13.3778 5.7576 12.8299 5.59265 12.0975 5.59265V6.89265ZM13.2948 7.50691C13.2705 7.46167 13.2702 7.44124 13.2798 7.48268C13.2872 7.51427 13.2963 7.56406 13.3058 7.63512C13.3247 7.77685 13.3406 7.96737 13.3531 8.19679L14.6511 8.126C14.6378 7.88167 14.6197 7.65312 14.5943 7.46318C14.5817 7.36841 14.5661 7.2742 14.5459 7.18774C14.5281 7.11113 14.4975 6.99859 14.4398 6.89126L13.2948 7.50691ZM13.3531 8.19679C13.3903 8.87957 13.3928 9.80903 13.3857 10.5657L14.6857 10.5778C14.6927 9.81805 14.6908 8.85318 14.6511 8.126L13.3531 8.19679ZM13.3857 10.5657C13.3824 10.9261 13.3769 11.2436 13.3723 11.4709C13.37 11.5845 13.3679 11.6755 13.3663 11.7379C13.3656 11.7691 13.365 11.7932 13.3645 11.8094C13.3643 11.8175 13.3642 11.8236 13.3641 11.8276C13.364 11.8297 13.364 11.8312 13.3639 11.8322C13.3639 11.8327 13.3639 11.833 13.3639 11.8333C13.3639 11.8334 13.3639 11.8334 13.3639 11.8335C13.3639 11.8335 13.3639 11.8335 13.3639 11.8335C13.3639 11.8335 13.3639 11.8335 13.3639 11.8335C13.3639 11.8335 13.3639 11.8335 14.0137 11.8515C14.6634 11.8694 14.6634 11.8694 14.6634 11.8694C14.6634 11.8694 14.6634 11.8694 14.6634 11.8693C14.6634 11.8693 14.6634 11.8693 14.6634 11.8692C14.6634 11.8692 14.6634 11.869 14.6634 11.8689C14.6634 11.8686 14.6634 11.8681 14.6635 11.8675C14.6635 11.8664 14.6635 11.8647 14.6636 11.8625C14.6637 11.8581 14.6639 11.8516 14.6641 11.8432C14.6645 11.8263 14.6652 11.8015 14.666 11.7695C14.6675 11.7055 14.6697 11.6128 14.672 11.4973C14.6767 11.2664 14.6823 10.944 14.6857 10.5778L13.3857 10.5657ZM14.0256 8.12982C13.4757 7.78323 13.4758 7.78317 13.4758 7.78311C13.4758 7.78309 13.4759 7.78303 13.4759 7.78299C13.4759 7.78291 13.476 7.78283 13.476 7.78275C13.4761 7.78259 13.4762 7.78243 13.4763 7.78227C13.4765 7.78196 13.4767 7.78165 13.4769 7.78134C13.4773 7.78072 13.4777 7.78011 13.4781 7.77952C13.4789 7.77832 13.4796 7.77717 13.4803 7.77606C13.4818 7.77384 13.4831 7.77178 13.4844 7.76989C13.4869 7.7661 13.4891 7.76295 13.491 7.76039C13.4946 7.75529 13.4968 7.75259 13.4973 7.75196L14.5069 8.57083C14.5237 8.55021 14.5376 8.53172 14.5489 8.51583C14.5546 8.50788 14.5596 8.50059 14.5641 8.494C14.5663 8.49071 14.5683 8.48759 14.5702 8.48466C14.5712 8.48319 14.5721 8.48177 14.573 8.4804C14.5734 8.47971 14.5738 8.47904 14.5743 8.47837C14.5745 8.47804 14.5747 8.47771 14.5749 8.47739C14.575 8.47722 14.5751 8.47706 14.5752 8.4769C14.5753 8.47682 14.575Line truncated
fill={color}
/>
</svg>
);
}
);
TextCapitalizeIcon.displayName = "TextCapitalizeIcon";
packages/icons/src/text-direction-ltr.tsx
+26
View File
@@ -0,0 +1,26 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextDirectionLTRIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.46967 12.5303C8.17678 12.2374 8.17678 11.7626 8.46967 11.4697L11.1893 8.75L3 8.75C2.58579 8.75 2.25 8.41421 2.25 8C2.25 7.58579 2.58579 7.25 3 7.25L11.1893 7.25L8.46967 4.53033C8.17678 4.23744 8.17678 3.76256 8.46967 3.46967C8.76256 3.17678 9.23744 3.17678 9.53033 3.46967L13.5303 7.46967C13.8232 7.76256 13.8232 8.23744 13.5303 8.53033L9.53033 12.5303C9.23744 12.8232 8.76256 12.8232 8.46967 12.5303Z"
fill={color}
/>
</svg>
);
}
);
TextDirectionLTRIcon.displayName = "TextDirectionLTRIcon";
packages/icons/src/text-direction-rtl.tsx
+26
View File
@@ -0,0 +1,26 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextDirectionRTLIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.53033 3.46967C7.82322 3.76256 7.82322 4.23744 7.53033 4.53033L4.81066 7.25H13C13.4142 7.25 13.75 7.58579 13.75 8C13.75 8.41421 13.4142 8.75 13 8.75H4.81066L7.53033 11.4697C7.82322 11.7626 7.82322 12.2374 7.53033 12.5303C7.23744 12.8232 6.76256 12.8232 6.46967 12.5303L2.46967 8.53033C2.17678 8.23744 2.17678 7.76256 2.46967 7.46967L6.46967 3.46967C6.76256 3.17678 7.23744 3.17678 7.53033 3.46967Z"
fill={color}
/>
</svg>
);
}
);
TextDirectionRTLIcon.displayName = "TextDirectionRTLIcon";
packages/icons/src/text-hyphen.tsx
+26
View File
@@ -0,0 +1,26 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextHyphenIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 8C12 8.55228 11.5523 9 11 9H5C4.44772 9 4 8.55228 4 8C4 7.44772 4.44772 7 5 7H11C11.5523 7 12 7.44772 12 8Z"
fill={color}
/>
</svg>
);
}
);
TextHyphenIcon.displayName = "TextHyphenIcon";
packages/icons/src/text-italic.tsx
+27
View File
@@ -0,0 +1,27 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextItalicIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
d="M12.75 3H7.125M9.625 13H4M10.25 3L6.5 13"
stroke={color}
strokeWidth="1.45"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
);
TextItalicIcon.displayName = "TextItalicIcon";
packages/icons/src/text-lowercase.tsx
+24
View File
@@ -0,0 +1,24 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextLowercaseIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
d="M2.30954 6.49619C2.05591 6.75023 2.05624 7.16179 2.31028 7.41543C2.56432 7.66907 2.97588 7.66874 3.22952 7.41469L2.30954 6.49619ZM6.43651 7.34753L5.83409 7.59164L5.84732 7.62431L5.86402 7.65535L6.43651 7.34753ZM5.63107 8.80987L5.48413 8.17669L5.63107 8.80987ZM2.25432 10.8719L2.90291 10.829L2.25432 10.8719ZM9.30955 6.49619C9.05591 6.75023 9.05624 7.16179 9.31028 7.41543C9.56432 7.66907 9.97588 7.66874 10.2295 7.41469L9.30955 6.49619ZM13.4365 7.34753L12.8341 7.59164L12.8473 7.62431L12.864 7.65535L13.4365 7.34753ZM12.6311 8.80987L12.4841 8.17669L12.6311 8.80987ZM9.25432 10.8719L9.90291 10.829L9.25432 10.8719ZM3.22952 7.41469C3.20001 7.44425 3.21633 7.41976 3.34313 7.36129C3.44938 7.31229 3.59078 7.25864 3.7522 7.20884C4.08516 7.1061 4.43317 7.0411 4.66674 7.0411V5.7411C4.25235 5.7411 3.76563 5.84422 3.36891 5.96663C3.16548 6.02939 2.96831 6.10257 2.79873 6.18077C2.64969 6.2495 2.45292 6.35258 2.30954 6.49619L3.22952 7.41469ZM4.66674 7.0411C5.20527 7.0411 5.46393 7.16087 5.58874 7.25105C5.71235 7.34036 5.77762 7.4523 5.83409 7.59164L7.03893 7.10342C6.93857 6.85576 6.75444 6.48949 6.35011 6.19733C5.94697 5.90605 5.39915 5.7411 4.66674 5.7411V7.0411ZM5.86402 7.65535C5.8397 7.61012 5.8394 7.58969 5.84905 7.6311C5.85641 7.66267 5.86548 7.71242 5.87496 7.78344C5.89386 7.9251 5.90975 8.11552 5.92226 8.34483L7.22033 8.27401C7.20701 8.02978 7.18887 7.80132 7.16353 7.61146C7.15089 7.51672 7.13528 7.42254 7.11514 7.33611C7.09729 7.25951 7.06669 7.147 7.00899 7.0397L5.86402 7.65535ZM5.92226 8.34483C5.95951 9.02755 5.96198 9.95707 5.95493 10.7138L7.25488 10.7259C7.26195 9.96608 7.26001 9.00115 7.22033 8.27401L5.92226 8.34483ZM5.95493 10.7138C5.95158 11.0743 5.94611 11.3919 5.94148 11.6192C5.93917 11.7329 5.93707 11.8239 5.93555 11.8863C5.93479 11.9175 5.93418 11.9416 5.93376 11.9578C5.93355 11.9659 5.93338 11.972 5.93327 11.9761C5.93322 11.9781 5.93318 11.9796 5.93315 11.9806C5.93314 11.9811 5.93313 11.9815 5.93312 11.9817C5.93312 11.9818 5.93312 11.9819 5.93312 11.9819C5.93312 11.982 5.93312 11.982 5.93312 11.982C5.93311 11.982 5.93312 11.982 5.93311 11.982C5.93312 11.982 5.93312 11.982 6.58287 11.9999C7.23262 12.0178 7.23262 12.0178 7.23262 12.0178C7.23262 12.0178 7.23262 12.0178 7.23262 12.0178C7.23262 12.0178 7.23262 12.0177 7.23262 12.0177C7.23263 12.0176 7.23263 12.0175 7.23263 12.0173C7.23264 12.017 7.23266 12.0166 7.23267 12.016C7.2327 12.0148 7.23275 12.0132 7.23281 12.011C7.23292 12.0066 7.2331 12.0001 7.23332 11.9916C7.23376 11.9747 7.23439 11.9499 7.23517 11.9179C7.23672 11.8539 7.23886 11.7612 7.24121 11.6457C7.24591 11.4147 7.25147 11.0922 7.25488 10.7259L5.95493 10.7138ZM6.59447 8.27827C6.0446 7.93166 6.04463 7.9316 6.04467 7.93154C6.04468 7.93152 6.04472 7.93146 6.04475 7.93142C6.0448 7.93134 6.04485 7.93126 6.04489 7.93119C6.04499 7.93103 6.04509 7.93087 6.04519 7.93072C6.04539 7.9304 6.04559 7.93009 6.04578 7.92979C6.04617 7.92917 6.04656 7.92857 6.04694 7.92798C6.04769 7.92679 6.04843 7.92565 6.04915 7.92454C6.05059 7.92233 6.05194 7.92029 6.0532 7.9184C6.05573 7.91463 6.05791 7.91149 6.05973 7.90894C6.06337 7.90385 6.06554 7.90112 6.06609 7.90043L7.0765 8.71841C7.09303 8.69799 7.10679 8.67968 7.11802 8.66394C7.12364 8.65607 7.12862 8.64884 7.13299 8.64231C7.13518 8.63905 7.13722 8.63596 7.13911 8.63305C7.14006 8.63159 7.14097 8.63019 7.14184 8.62882C7.14228 8.62814 7.1427 8.62747 7.14312 8.62681C7.14333 8.62648 7.14354 8.62616 7.14374 8.62583C7.14384 8.62567 7.14395 8.62551 7.14405 8.62535C7.1441 8.62527 7.14415 8.62519 7.1442 8.62511C7.14422 8.62507 7.14426 8.62501 7.14427 8.62499C7.14431 8.62493 7.14435 8.62487 6.59447 8.27827ZM6.0661 7.90043C6.07733 7.88656 5.93903 8.07113 5.48413 8.17669L5.778 9.44304C6.5332 9.26779 6.9176 8.91469 7.0765 8.71841L6.0661 7.90043ZM5.48413 8.17669C5.28566 8.22275 5.01188 8.25242 4.59921 8.3158C4.2205 8.37397 3.76945 8.45594 3.34114 8.6022C2.91711 8.74698 2.46083 8.97259 2.11776 9.35259C1.75568 9.75364 1.56367 10.2786 1.60574 10.9148L2.90291 10.829C2.88294 10.5271 2.967 10.3519 3.08269 10.2237C3.21738 10.0746 3.44054 9.94195 3.76122 9.83245C4.0776 9.72442 4.43651 9.65604 4.79657 9.60074C5.12268 9.55065 5.51649 9.50373 5.778 9.44304L5.48413 8.17669ZM1.60574 10.9148C1.67016 11.889 2.54267 12.5005 3.5233 12.5904C4.53081 12.6828 5.76702 12.2796 7.02459 11.2162L6.18521 10.2235C5.11229 11.1308 4.20921 11.3479 3.64204 11.2959C3.04801 11.2414 2.91048 10.9436 2.90291 10.829L1.60574 10.9148ZM7.02459 11.2162C7.07687 11.172 7.12922 11.1267 7.18163 11.0801L6.31837 10.1081C6.27374 10.1477 6.22935 10.1862 6.18521 10.2235L7.02459 11.2162ZM10.2295 7.41469C10.2 7.44425 10.2163 7.41976 10.3431 7.36129C10.4494 7.31229 10.5908 7.25864 10.7522 7.20884C11.0852 7.1061 11.4332 7.0411 11.6667 7.0411V5.7411C11.2523 5.7411 10.7656 5.84422 10.3689 5.96663C10.1655 6.02939 9.96831 6.10257 9.79873 6.18077C9.64969 6.2495 9.45292 6.35258 9.30955 6.49619L10.2295 7.41469ZM11.6667 7.0411C12.2053 7.0411 12.4639 7.16087 12.5887 7.25105C12.7123 7.34036 12.7776 7.4523 12.8341 7.59164L14.0389 7.103Line truncated
fill={color}
/>
</svg>
);
}
);
TextLowercaseIcon.displayName = "TextLowercaseIcon";
packages/icons/src/text-strikethrough.tsx
+32
View File
@@ -0,0 +1,32 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextStrikethroughIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
d="M5.82521 2.94998C6.50328 2.40116 7.40433 2.125 8.34865 2.125C9.89864 2.125 11.3095 2.79299 11.8362 4.32438C11.9485 4.65079 11.7748 5.0064 11.4484 5.11866C11.122 5.23092 10.7664 5.05731 10.6541 4.7309C10.3558 3.86342 9.55544 3.375 8.34865 3.375C7.6374 3.375 7.02905 3.58374 6.61162 3.9216C6.20592 4.24996 5.95485 4.71776 5.95485 5.32689C5.95485 5.8952 6.21462 6.25961 6.54642 6.52111C6.66036 6.61091 6.78052 6.6864 6.89868 6.75H5.09412C4.86079 6.37035 4.70485 5.90046 4.70485 5.32689C4.70485 4.32895 5.1354 3.50829 5.82521 2.94998Z"
fill={color}
/>
<path
d="M10.6813 9.75H12.0228C12.0884 9.99225 12.125 10.2587 12.125 10.5514C12.125 11.5568 11.7375 12.4146 11.0147 13.009C10.3059 13.5919 9.33318 13.875 8.22795 13.875C6.42452 13.875 5.0547 13.2188 4.51522 11.7922C4.39313 11.4693 4.55589 11.1086 4.87875 10.9865C5.20162 10.8644 5.56233 11.0272 5.68441 11.3501C5.96897 12.1026 6.70934 12.625 8.22795 12.625C9.13269 12.625 9.79597 12.3929 10.2207 12.0436C10.6315 11.7058 10.875 11.2143 10.875 10.5514C10.875 10.2188 10.8015 9.95921 10.6813 9.75Z"
fill={color}
/>
<path
d="M3.00012 7.58447C2.65494 7.58447 2.37512 7.86429 2.37512 8.20947C2.37512 8.55465 2.65494 8.83447 3.00012 8.83447H13.0001C13.3453 8.83447 13.6251 8.55465 13.6251 8.20947C13.6251 7.86429 13.3453 7.58447 13.0001 7.58447H3.00012Z"
fill={color}
/>
</svg>
);
}
);
TextStrikethroughIcon.displayName = "TextStrikethroughIcon";
packages/icons/src/text-truncate.tsx
+36
View File
@@ -0,0 +1,36 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextTruncateIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
d="M10.8285 1.2998H5.1711C4.63547 1.2998 4.19138 1.29979 3.82921 1.32938C3.45241 1.36016 3.10307 1.42643 2.77403 1.59409C2.26599 1.85295 1.85295 2.26599 1.59409 2.77403C1.42643 3.10307 1.36016 3.45241 1.32938 3.82921C1.29979 4.19137 1.2998 4.63545 1.2998 5.17109V10.8285C1.2998 11.3641 1.29979 11.8082 1.32938 12.1704C1.36016 12.5472 1.42643 12.8965 1.59409 13.2256C1.85295 13.7336 2.26599 14.1467 2.77403 14.4055C3.10307 14.5732 3.45241 14.6394 3.82921 14.6702C3.97287 14.682 4.12941 14.6891 4.29945 14.6933C4.68616 14.703 5 14.386 5 13.9992C5 13.6128 4.68684 13.3036 4.30058 13.2929C4.1673 13.2892 4.04965 13.2836 3.94321 13.2749C3.653 13.2512 3.5084 13.2084 3.40962 13.1581C3.16501 13.0335 2.96613 12.8346 2.8415 12.59C2.79116 12.4912 2.74844 12.3466 2.72473 12.0564C2.70035 11.758 2.69981 11.3714 2.69981 10.7998V5.19981C2.69981 4.6282 2.70035 4.2416 2.72473 3.94321C2.74844 3.653 2.79116 3.5084 2.8415 3.40962C2.96613 3.16501 3.16501 2.96613 3.40962 2.8415C3.5084 2.79116 3.653 2.74844 3.94321 2.72473C4.2416 2.70035 4.6282 2.69981 5.19981 2.69981H10.7998C11.3714 2.69981 11.758 2.70035 12.0564 2.72473C12.3466 2.74844 12.4912 2.79116 12.59 2.8415C12.8346 2.96613 13.0335 3.16501 13.1581 3.40962C13.2084 3.5084 13.2512 3.653 13.2749 3.94321C13.2993 4.2416 13.2998 4.6282 13.2998 5.19981V9.3C13.2998 9.6866 13.6132 10 13.9998 10C14.3864 10 14.6998 9.6866 14.6998 9.3V5.17114C14.6998 4.63548 14.6998 4.19139 14.6702 3.82921C14.6394 3.45241 14.5732 3.10307 14.4055 2.77403C14.1467 2.26599 13.7336 1.85295 13.2256 1.59409C12.8965 1.42643 12.5472 1.36016 12.1704 1.32938C11.8082 1.29979 11.3641 1.2998 10.8285 1.2998Z"
fill={color}
/>
<path
d="M8.00001 12C8.55229 12 9.00001 12.4477 9.00001 13C9.00001 13.5523 8.55229 14 8.00001 14C7.44772 14 7.00001 13.5523 7.00001 13C7.00001 12.4477 7.44772 12 8.00001 12Z"
fill={color}
/>
<path
d="M11 12C11.5523 12 12 12.4477 12 13C12 13.5523 11.5523 14 11 14C10.4477 14 10 13.5523 10 13C10 12.4477 10.4477 12 11 12Z"
fill={color}
/>
<path
d="M14 12C14.5523 12 15 12.4477 15 13C15 13.5523 14.5523 14 14 14C13.4477 14 13 13.5523 13 13C13 12.4477 13.4477 12 14 12Z"
fill={color}
/>
</svg>
);
}
);
TextTruncateIcon.displayName = "TextTruncateIcon";
packages/icons/src/text-underline.tsx
+26
View File
@@ -0,0 +1,26 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextUnderlineIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5 3C5.34518 3 5.625 3.27982 5.625 3.625V8.5C5.625 9.81168 6.68832 10.875 8 10.875C9.31168 10.875 10.375 9.81168 10.375 8.5V3.625C10.375 3.27982 10.6548 3 11 3C11.3452 3 11.625 3.27982 11.625 3.625V8.5C11.625 10.502 10.002 12.125 8 12.125C5.99797 12.125 4.375 10.502 4.375 8.5V3.625C4.375 3.27982 4.65482 3 5 3ZM13.375 13.875C13.7202 13.875 14 14.1548 14 14.5C14 14.8452 13.7202 15.125 13.375 15.125H2.625C2.27982 15.125 2 14.8452 2 14.5C2 14.1548 2.27982 13.875 2.625 13.875H13.375Z"
fill={color}
/>
</svg>
);
}
);
TextUnderlineIcon.displayName = "TextUnderlineIcon";
packages/icons/src/text-uppercase.tsx
+27
View File
@@ -0,0 +1,27 @@
import * as React from "react";
import { IconProps } from "./types";
export const TextUppercaseIcon = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, forwardedRef) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
ref={forwardedRef}
>
<path
d="M2.33566 8.8573H5.81566M1.17566 11.85L3.65325 4.81882C3.78744 4.43799 3.85454 4.24757 3.94752 4.1885C4.02831 4.13717 4.12301 4.13717 4.2038 4.1885C4.29678 4.24757 4.36387 4.43799 4.49807 4.81882L6.97566 11.85M10.1843 8.85777H13.6643M9.02429 11.8517L11.5019 4.81764C11.6361 4.43664 11.7032 4.24615 11.7962 4.18705C11.8769 4.1357 11.9716 4.1357 12.0524 4.18705C12.1454 4.24615 12.2125 4.43664 12.3467 4.81764L14.8243 11.8517"
stroke={color}
strokeWidth="1.3"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
);
TextUppercaseIcon.displayName = "TextUppercaseIcon";