diff --git a/src/App.tsx b/src/App.tsx index ab147143..77f71c52 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { Fragment, useRef, useState } from "react"; import "@/styles/globals.css"; import "./styles/variables.css"; @@ -51,6 +51,8 @@ import GridExample from "./examples/GridExample"; import MultiAccordionDemo from "./components/MultiAccordion/MultiAccordionDemo"; import { styled } from "styled-components"; +import { ICON_NAMES, IconSize } from "@/components/Icon/types"; + const BackgroundWrapper = styled.div` background: ${({ theme }) => theme.global.color.background.default}; padding: 6rem; @@ -752,6 +754,40 @@ const App = () => { + + Icons + + {ICON_NAMES.map(name => { + return ( + + {name} : default + + {(["sm", "md", "lg", "xl", "xxl"] satisfies Array).map(size => { + return ( + + ) + })} + + {name} : thin + + {(["sm", "md", "lg", "xl", "xxl"] satisfies Array).map(size => { + return ( + + ) + })} + + + + ); + })} ); diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx index 17f8a8fc..60589961 100644 --- a/src/components/Icon/Icon.stories.tsx +++ b/src/components/Icon/Icon.stories.tsx @@ -30,6 +30,11 @@ export default { options: ["xs", "sm", "md", "lg", "xl", "xxl"], control: { type: "select" }, }, + weight: { + options: ["default", "thin"], + control: { type: "select" }, + defaultValue: "default", + }, state: { options: ["default", "info", "success", "warning", "danger", "neutral"], control: { type: "select" }, @@ -41,6 +46,7 @@ export const Playground = { args: { name: "users", size: "md", + weight: "default", state: "default", width: "", height: "", diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index cf91d71c..0b850040 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -1,5 +1,5 @@ import { styled } from "styled-components"; -import { IconName, IconProps, IconSize, IconState, ImageType } from "./types"; +import { IconName, IconProps, IconSize, IconState, IconWeight, ImageType } from "./types"; import { ICONS_MAP } from "@/components/Icon/IconCommon"; import Flags, { FlagList, FlagName } from "../icons/Flags"; import { Logo } from "../Logos/Logo"; @@ -13,6 +13,7 @@ const SVGIcon = ({ width, height, state, + weight, className, size, ...props @@ -29,6 +30,7 @@ const SVGIcon = ({ $width={width} $height={height} $size={size} + $weight={weight} className={className} state={state} > @@ -42,20 +44,49 @@ const SvgWrapper = styled.div<{ $width?: number | string; $height?: number | string; $size?: IconSize; + $weight?: IconWeight; state?: IconState; }>` display: flex; align-items: center; - ${({ theme, $color = "currentColor", $width, $height, $size }) => ` - & path[stroke], & svg[stroke]:not([stroke="none"]), & rect[stroke], & circle[fill] { + ${({ theme, $color = "currentColor", $width, $height, $size, $weight = "default" }) => ` + & svg[stroke]:not([stroke="none"]), + & g[stroke]:not([stroke="none"]), + & path[stroke]:not([stroke="none"]), + & rect[stroke]:not([stroke="none"]), + & circle[stroke]:not([stroke="none"]), + & ellipse[stroke]:not([stroke="none"]), + & line[stroke]:not([stroke="none"]), + & polyline[stroke]:not([stroke="none"]), + & polygon[stroke]:not([stroke="none"]) { stroke: ${$color}; } - & path[fill], & svg[fill]:not([fill="none"]), & rect[fill], & circle[fill] { + & svg[fill]:not([fill="none"]), + & g[fill]:not([fill="none"]), + & path[fill]:not([fill="none"]), + & rect[fill]:not([fill="none"]), + & circle[fill]:not([fill="none"]), + & ellipse[fill]:not([fill="none"]), + & line[fill]:not([fill="none"]), + & polyline[fill]:not([fill="none"]), + & polygon[fill]:not([fill="none"]) { fill: ${$color}; } + & svg[stroke-width="1.5"], + & g[stroke-width="1.5"], + & path[stroke-width="1.5"], + & rect[stroke-width="1.5"], + & circle[stroke-width="1.5"], + & ellipse[stroke-width="1.5"], + & line[stroke-width="1.5"], + & polyline[stroke-width="1.5"], + & polygon[stroke-width="1.5"] { + stroke-width: ${theme.click.image.borderWidth[$weight]} + } + & svg { width: ${$width || theme.click.image[$size || "md"].size.width || "24px"}; height: ${$height || theme.click.image[$size || "md"].size.height || "24px"}; diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts index 11812e17..c7937091 100644 --- a/src/components/Icon/types.ts +++ b/src/components/Icon/types.ts @@ -6,6 +6,7 @@ import { PaymentName, PaymentProps } from "../icons/Payments"; export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; export type IconState = "default" | "success" | "warning" | "danger" | "info"; +export type IconWeight = "default" | "thin" export const ICON_NAMES = [ "activity", @@ -165,6 +166,7 @@ export interface IconProps extends SVGAttributes { color?: string; size?: IconSize; state?: IconState; + weight?: IconWeight; } type NoThemeType = { @@ -175,12 +177,16 @@ type NoColorType = { color?: never; }; +type NoWeightType = { + weight?: never; +}; + export type ImageName = IconName | LogoName | FlagName | PaymentName; export type ImageType = ( | (Omit & NoThemeType) - | (Omit & NoColorType) - | (Omit & NoThemeType & NoColorType) - | (Omit & NoThemeType & NoColorType) + | (Omit & NoColorType & NoWeightType) + | (Omit & NoThemeType & NoColorType & NoWeightType) + | (Omit & NoThemeType & NoColorType & NoWeightType) ) & { name: ImageName; }; diff --git a/src/components/icons/Beta.tsx b/src/components/icons/Beta.tsx index 61f908d4..dbe6f7cc 100644 --- a/src/components/icons/Beta.tsx +++ b/src/components/icons/Beta.tsx @@ -10,8 +10,11 @@ const Beta = (props: SVGAttributes) => ( {...props} > ); diff --git a/src/components/icons/ChartArea.tsx b/src/components/icons/ChartArea.tsx index c2555606..d8609234 100644 --- a/src/components/icons/ChartArea.tsx +++ b/src/components/icons/ChartArea.tsx @@ -9,14 +9,11 @@ const ChartArea = (props: SVGAttributes) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - - + + + + + ); diff --git a/src/components/icons/ChartBarHorizontal.tsx b/src/components/icons/ChartBarHorizontal.tsx index 9369d288..d8d43ae8 100644 --- a/src/components/icons/ChartBarHorizontal.tsx +++ b/src/components/icons/ChartBarHorizontal.tsx @@ -9,10 +9,10 @@ const ChartBarHorizontal = (props: SVGAttributes) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - + + + + ); diff --git a/src/components/icons/ChartDonut.tsx b/src/components/icons/ChartDonut.tsx index 70fdf423..c4441c8f 100644 --- a/src/components/icons/ChartDonut.tsx +++ b/src/components/icons/ChartDonut.tsx @@ -9,10 +9,14 @@ const ChartDonut = (props: SVGAttributes) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - + + + + ); diff --git a/src/components/icons/ChartHeatmap.tsx b/src/components/icons/ChartHeatmap.tsx index 8c08d01c..c98a8af2 100644 --- a/src/components/icons/ChartHeatmap.tsx +++ b/src/components/icons/ChartHeatmap.tsx @@ -9,34 +9,45 @@ const ChartHeatmap = (props: SVGAttributes) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - - - - - + + + + + + + ); diff --git a/src/components/icons/ChartScatter.tsx b/src/components/icons/ChartScatter.tsx index 7b3b3506..af7fa231 100644 --- a/src/components/icons/ChartScatter.tsx +++ b/src/components/icons/ChartScatter.tsx @@ -9,10 +9,20 @@ const ChartScatter = (props: SVGAttributes) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - + + + + ); diff --git a/src/components/icons/CheckIcon.tsx b/src/components/icons/CheckIcon.tsx index aa23fdf4..9091923d 100644 --- a/src/components/icons/CheckIcon.tsx +++ b/src/components/icons/CheckIcon.tsx @@ -10,11 +10,10 @@ const CheckIcon = (props: SVGAttributes) => ( {...props} > ); diff --git a/src/components/icons/DatabaseIcon.tsx b/src/components/icons/DatabaseIcon.tsx index 24a7f7b4..e5e5cbba 100644 --- a/src/components/icons/DatabaseIcon.tsx +++ b/src/components/icons/DatabaseIcon.tsx @@ -9,22 +9,26 @@ const DatabaseIcon = (props: SVGAttributes) => ( viewBox="0 0 24 25" {...props} > - - + strokeWidth="1.5" + transform="translate(6 4)"> + + + + ); diff --git a/src/components/icons/Dot.tsx b/src/components/icons/Dot.tsx index 5ab55fe3..3ae0f7bf 100644 --- a/src/components/icons/Dot.tsx +++ b/src/components/icons/Dot.tsx @@ -10,10 +10,13 @@ const Dot = (props: SVGAttributes) => ( {...props} > ); diff --git a/src/components/icons/DotsHorizontal.tsx b/src/components/icons/DotsHorizontal.tsx index 07efafcf..31731bfd 100644 --- a/src/components/icons/DotsHorizontal.tsx +++ b/src/components/icons/DotsHorizontal.tsx @@ -9,27 +9,30 @@ const DotsHorizontal = (props: SVGAttributes) => ( fill="none" {...props} > - - - + + + + + + + + + ); diff --git a/src/components/icons/DotsVertical.tsx b/src/components/icons/DotsVertical.tsx index 1be9c8a8..1db5597e 100644 --- a/src/components/icons/DotsVertical.tsx +++ b/src/components/icons/DotsVertical.tsx @@ -14,18 +14,24 @@ const DotsVertical = (props: SVGAttributes) => ( cy={6.5} r={1.5} fill="#161517" + stroke="#161517" + strokeWidth="1.5" /> ); diff --git a/src/components/icons/DotsVerticalDouble.tsx b/src/components/icons/DotsVerticalDouble.tsx index 2fce7ce0..4a74342e 100644 --- a/src/components/icons/DotsVerticalDouble.tsx +++ b/src/components/icons/DotsVerticalDouble.tsx @@ -14,36 +14,48 @@ const DotsVerticalDouble = (props: SVGAttributes) => ( cy="6.5" r="1.5" fill="#161517" + stroke="#161517" + strokeWidth="1.5" /> ); diff --git a/src/components/icons/Gift.tsx b/src/components/icons/Gift.tsx index 9c5ef4cd..62bcd8e6 100644 --- a/src/components/icons/Gift.tsx +++ b/src/components/icons/Gift.tsx @@ -9,12 +9,30 @@ const Gift = (props: SVGAttributes) => ( fill="none" {...props} > - + strokeWidth="1.5" + transform="translate(3 2)" + > + + + + + ); diff --git a/src/components/icons/HorizontalLoading.tsx b/src/components/icons/HorizontalLoading.tsx index 784f7a07..714d7d0f 100644 --- a/src/components/icons/HorizontalLoading.tsx +++ b/src/components/icons/HorizontalLoading.tsx @@ -1,81 +1,50 @@ import DotsHorizontal from "./DotsHorizontal"; import { keyframes, styled } from "styled-components"; -const animationCircle1 = keyframes` - 0 { - r: 0; +const animationCircle = keyframes` + 0% { + transform: scale(1); } - 30% { - r: 1.5; - } - 60% { - r: 0; - } - 100% { - r: 0; - } -`; -const animationCircle2 = keyframes` - 0 { - r: 0; - } - 20% { - r: 0; - } - 40% { - r: 1.5; - } - 80% { - r: 0; - } - 100% { - r: 0 - } -`; -const animationCircle3 = keyframes` - 0 { - r: 0; - } - 40% { - r: 0; - } - 80% { - r: 1.5; + 85% { + transform: scale(0); } 100% { - r: 0 + transform: scale(0); } `; const HorizontalLoading = styled(DotsHorizontal)` circle { - animation-name: horizontal-loading; - animation-duration: 1.5s; + animation-name: ${animationCircle}; + animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; - -webkit-animation-name: horizontal-loading; - -webkit-animation-duration: 1.5s; + animation-direction: alternate; + -webkit-animation-duration: 1s; + -webkit-animation-name: ${animationCircle}; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; - -moz-animation-name: horizontal-loading; - -moz-animation-duration: 1.5s; + -webkit-animation-direction: alternate; + -moz-animation-duration: 1s; + -moz-animation-name: ${animationCircle}; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; - &:nth-child(1) { - animation-name: ${animationCircle1}; - -webkit-animation-name: ${animationCircle1}; - -moz-animation-name: ${animationCircle1}; - } - &:nth-child(2) { - animation-name: ${animationCircle2}; - -webkit-animation-name: ${animationCircle2}; - -moz-animation-name: ${animationCircle2}; - } - &:nth-child(3) { - animation-name: ${animationCircle3}; - -webkit-animation-name: ${animationCircle3}; - -moz-animation-name: ${animationCircle3}; - } + -moz-animation-direction: alternate; + } + g:nth-child(1) circle { + animation-delay: 0s; + -webkit-animation-delay: 0s; + -moz-animation-delay: 0s; + } + g:nth-child(2) circle { + animation-delay: 0.3s; + -webkit-animation-delay: 0.3s; + -moz-animation-delay: 0.3s; + } + g:nth-child(3) circle { + animation-delay: 0.6s; + -webkit-animation-delay: 0.6s; + -moz-animation-delay: 0.6s; } `; diff --git a/src/components/icons/Icons.mdx b/src/components/icons/Icons.mdx index 78e722f4..569c2f22 100644 --- a/src/components/icons/Icons.mdx +++ b/src/components/icons/Icons.mdx @@ -51,3 +51,15 @@ import { ClickUIProvider } from ".."; ))} + +# Glyphs (thin) + + + + {Object.keys(ICONS_MAP).map((iconName) => ( + + + + ))} + + diff --git a/src/components/icons/InformationIcon.tsx b/src/components/icons/InformationIcon.tsx index 6674efb3..01dd080b 100644 --- a/src/components/icons/InformationIcon.tsx +++ b/src/components/icons/InformationIcon.tsx @@ -13,6 +13,7 @@ const InformationIcon = (props: SVGAttributes) => ( stroke="#161517" strokeLinecap="round" strokeLinejoin="round" + strokeWidth={1.5} d="M10.854 11.877h1.15v4.252M10.845 16.128h2.31" /> ) => ( stroke="#161517" strokeLinecap="round" strokeLinejoin="round" + strokeWidth={1.5} d="M11.695 8.623a.25.25 0 0 1 .25.25" /> diff --git a/src/components/icons/Loading.tsx b/src/components/icons/Loading.tsx index d40cad99..396a59b2 100644 --- a/src/components/icons/Loading.tsx +++ b/src/components/icons/Loading.tsx @@ -14,7 +14,7 @@ const Loading = (props: SVGAttributes) => ( stroke="#161517" strokeLinecap="round" strokeLinejoin="round" - strokeWidth={1.25} + strokeWidth={1.5} d="M7.625 8.875H4.5V5.75" /> ) => ( stroke="#161517" strokeLinecap="round" strokeLinejoin="round" - strokeWidth={1.25} + strokeWidth={1.5} d="M16.375 15.125H19.5v3.125" /> ) => ( fill="none" {...props} > - - + + + + ); diff --git a/src/components/icons/Taxi.tsx b/src/components/icons/Taxi.tsx index 6f9a76df..5e102c6f 100644 --- a/src/components/icons/Taxi.tsx +++ b/src/components/icons/Taxi.tsx @@ -57,6 +57,7 @@ const Taxi = (props: SVGAttributes) => ( d="M21.3217 9.857H20.3904L19.4446 7.76429C19.2063 7.23877 18.8219 6.79294 18.3371 6.48006C17.8523 6.16718 17.2877 6.00048 16.7107 5.99986H16.6117L15.7464 2.885C15.7213 2.79481 15.6674 2.71532 15.5929 2.65867C15.5183 2.60202 15.4273 2.57133 15.3337 2.57129H8.66685C8.57324 2.57133 8.48221 2.60202 8.40768 2.65867C8.33315 2.71532 8.27923 2.79481 8.25414 2.885L7.38885 5.99986H7.28985C6.71286 6.00048 6.14825 6.16718 5.66346 6.48006C5.17868 6.79294 4.79421 7.23877 4.55599 7.76429L3.61014 9.857H2.67885C1.33442 9.857 0.857422 10.6074 0.857422 11.2499C0.857876 11.6191 1.00477 11.9731 1.26588 12.2343C1.52699 12.4954 1.88101 12.6423 2.25028 12.6427H2.35099L2.05956 13.2856C1.83127 13.7887 1.71362 14.335 1.71456 14.8876V18.4284C1.71602 18.8889 1.86719 19.3364 2.14528 19.7034C2.14528 19.7073 2.14314 19.7103 2.14314 19.7141V20.9999C2.14314 21.3409 2.27859 21.6679 2.51971 21.909C2.76083 22.1501 3.08786 22.2856 3.42885 22.2856H5.14314C5.48413 22.2856 5.81116 22.1501 6.05227 21.909C6.29339 21.6679 6.42885 21.3409 6.42885 20.9999V20.5713H17.5717V20.9999C17.5717 21.3409 17.7072 21.6679 17.9483 21.909C18.1894 22.1501 18.5164 22.2856 18.8574 22.2856H20.5717C20.9127 22.2856 21.2397 22.1501 21.4808 21.909C21.722 21.6679 21.8574 21.3409 21.8574 20.9999V19.7141C21.8574 19.7103 21.8553 19.7073 21.8553 19.7034C22.1334 19.3364 22.2845 18.8889 22.286 18.4284V14.8876C22.2876 14.3352 22.1707 13.7889 21.9431 13.2856L21.6517 12.6427H21.7524C22.1213 12.6417 22.4748 12.4946 22.7354 12.2335C22.9961 11.9725 23.1427 11.6188 23.1431 11.2499C23.1431 10.6074 22.6661 9.857 21.3217 9.857ZM1.71456 11.2499C1.71456 10.7664 2.38914 10.7141 2.67885 10.7141H3.19785L2.72171 11.7856H2.25028C2.10827 11.7853 1.97214 11.7288 1.87172 11.6284C1.77131 11.528 1.71479 11.3919 1.71456 11.2499ZM8.99257 3.42843H15.008L15.7224 5.99986H8.27814L8.99257 3.42843ZM5.57171 20.9999C5.57171 21.1135 5.52656 21.2225 5.44618 21.3029C5.36581 21.3833 5.2568 21.4284 5.14314 21.4284H3.42885C3.31519 21.4284 3.20618 21.3833 3.1258 21.3029C3.04543 21.2225 3.00028 21.1135 3.00028 20.9999V20.3896C3.27024 20.5091 3.56218 20.571 3.85742 20.5713H5.57171V20.9999ZM3.85742 19.7141C3.51643 19.7141 3.1894 19.5787 2.94828 19.3376C2.70717 19.0964 2.57171 18.7694 2.57171 18.4284V14.8876C2.57109 14.4576 2.66272 14.0324 2.84042 13.6409L5.33728 8.117C5.50744 7.7417 5.78204 7.42332 6.12829 7.19989C6.47453 6.97646 6.87778 6.85742 7.28985 6.857H16.7107C17.1228 6.85741 17.5261 6.97648 17.8724 7.2C18.2187 7.42352 18.4932 7.74202 18.6633 8.11743L21.1601 13.6409C21.3378 14.0324 21.4295 14.4576 21.4289 14.8876V18.4284C21.4289 18.7694 21.2934 19.0964 21.0523 19.3376C20.8112 19.5787 20.4841 19.7141 20.1431 19.7141H3.85742ZM20.5717 21.4284H18.8574C18.7438 21.4284 18.6347 21.3833 18.5544 21.3029C18.474 21.2225 18.4289 21.1135 18.4289 20.9999V20.5713H20.1431C20.4384 20.571 20.7303 20.5091 21.0003 20.3896V20.9999C21.0003 21.1135 20.9551 21.2225 20.8748 21.3029C20.7944 21.3833 20.6854 21.4284 20.5717 21.4284ZM21.7503 11.7856H21.2789L20.8027 10.7141H21.3217C21.6114 10.7141 22.286 10.7664 22.286 11.2499C22.2858 11.3919 22.2293 11.528 22.1288 11.6284C22.0284 11.7288 21.8923 11.7853 21.7503 11.7856Z" stroke="#161517" strokeWidth="3" + fill="#161517" mask="url(#path-8-inside-4_3169_15708)" /> ) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - - - - - - + + + + ); diff --git a/src/components/icons/UserIcon.tsx b/src/components/icons/UserIcon.tsx index cdd0b953..93d03049 100644 --- a/src/components/icons/UserIcon.tsx +++ b/src/components/icons/UserIcon.tsx @@ -9,9 +9,9 @@ export const UserIcon = (props: SVGAttributes) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - + + + + ); diff --git a/src/components/icons/Waves.tsx b/src/components/icons/Waves.tsx index 07cfd028..934ebf41 100644 --- a/src/components/icons/Waves.tsx +++ b/src/components/icons/Waves.tsx @@ -10,10 +10,12 @@ const Waves = (props: SVGAttributes) => ( {...props} > ); diff --git a/src/styles/types.ts b/src/styles/types.ts index 4fc34cba..6986fe48 100644 --- a/src/styles/types.ts +++ b/src/styles/types.ts @@ -1703,6 +1703,10 @@ "width": string } }, + "borderWidth": { + "default": string, + "thin": string + }, "color": { "stroke": string } diff --git a/src/styles/variables.json b/src/styles/variables.json index 83302203..837c1198 100644 --- a/src/styles/variables.json +++ b/src/styles/variables.json @@ -1702,6 +1702,10 @@ "width": "4rem" } }, + "borderWidth": { + "default": "1.5", + "thin": "0.5" + }, "color": { "stroke": "#161517" } diff --git a/tokens/themes/component.json b/tokens/themes/component.json index 468c930b..8a7b7c86 100644 --- a/tokens/themes/component.json +++ b/tokens/themes/component.json @@ -1683,11 +1683,11 @@ "borderWidth": { "default": { "value": "1.5", - "type": "sizing" + "type": "strokeWidth" }, "thin": { - "value": "{sizes.1}", - "type": "sizing" + "value": "0.5", + "type": "strokeWidth" } } },