diff --git a/src/App.tsx b/src/App.tsx index ab147143c..77f71c528 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 17f8a8fcd..605899614 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 cf91d71ce..0b8500406 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 11812e177..c7937091f 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 61f908d49..dbe6f7ccb 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 c25556068..d8609234e 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 9369d2881..d8d43ae8e 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 70fdf4239..c4441c8ff 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 8c08d01c8..c98a8af25 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 7b3b35063..af7fa231a 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 aa23fdf4d..9091923d3 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 24a7f7b44..e5e5cbbab 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 5ab55fe32..3ae0f7bfb 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 07efafcfc..31731bfd3 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 1be9c8a82..1db5597e9 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 2fce7ce0c..4a74342e7 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 9c5ef4cd6..62bcd8e64 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 784f7a07f..714d7d0f0 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 78e722f42..569c2f22c 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 6674efb34..01dd080b4 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 d40cad99d..396a59b2c 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 6f9a76dfb..5e102c6f2 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 cdd0b953d..93d03049c 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 07cfd028b..934ebf41e 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 4fc34cba2..6986fe489 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 833022039..837c1198c 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 468c930b1..8a7b7c866 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" } } },