From 0d9228b32eecccff87b2f0c11b7e8f4f7458787a Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Thu, 3 Apr 2025 17:55:06 +0100 Subject: [PATCH 01/18] Initial icon weight shananigans --- src/App.tsx | 29 +++++++++++++++++++++++++++++ src/components/Icon/Icon.tsx | 11 +++++++++-- src/components/Icon/types.ts | 2 ++ src/styles/types.ts | 4 ++++ src/styles/variables.json | 4 ++++ 5 files changed, 48 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index ab147143..f496e247 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -51,6 +51,8 @@ import GridExample from "./examples/GridExample"; import MultiAccordionDemo from "./components/MultiAccordion/MultiAccordionDemo"; import { styled } from "styled-components"; +import { ICON_NAMES } from "@/components/Icon/types"; + const BackgroundWrapper = styled.div` background: ${({ theme }) => theme.global.color.background.default}; padding: 6rem; @@ -752,6 +754,33 @@ const App = () => { + + Icons + + {ICON_NAMES.map(name => { + return ( +
+ + + + + + + + + + + + + + +
+ ); + })} ); diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index cf91d71c..326f89c9 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,12 +44,13 @@ 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 }) => ` + ${({ theme, $color = "currentColor", $width, $height, $size, $weight = "default" }) => ` & path[stroke], & svg[stroke]:not([stroke="none"]), & rect[stroke], & circle[fill] { stroke: ${$color}; } @@ -56,6 +59,10 @@ const SvgWrapper = styled.div<{ fill: ${$color}; } + & path[stroke-width] { + 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..39f8b28d 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 = { 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..9bce95db 100644 --- a/src/styles/variables.json +++ b/src/styles/variables.json @@ -1702,6 +1702,10 @@ "width": "4rem" } }, + "borderWidth": { + "default": "1.5px", + "thin": "1px" + }, "color": { "stroke": "#161517" } From 9d7a2a11ca59cf615469000d8e607603ea57a1c7 Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Fri, 4 Apr 2025 11:58:13 +0100 Subject: [PATCH 02/18] icon view --- src/App.tsx | 41 ++++++++++++++++++++++++----------------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f496e247..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,7 +51,7 @@ import GridExample from "./examples/GridExample"; import MultiAccordionDemo from "./components/MultiAccordion/MultiAccordionDemo"; import { styled } from "styled-components"; -import { ICON_NAMES } from "@/components/Icon/types"; +import { ICON_NAMES, IconSize } from "@/components/Icon/types"; const BackgroundWrapper = styled.div` background: ${({ theme }) => theme.global.color.background.default}; @@ -759,26 +759,33 @@ const App = () => { {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 ( + + ) + })} + + + ); })} From a99025d781f1444d8426124590aed41f2755b9dc Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Fri, 4 Apr 2025 11:59:30 +0100 Subject: [PATCH 03/18] Changed component.image.borderWidth type from "sizing" to "strokeWidth" --- tokens/themes/component.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tokens/themes/component.json b/tokens/themes/component.json index 468c930b..045732bb 100644 --- a/tokens/themes/component.json +++ b/tokens/themes/component.json @@ -42,11 +42,11 @@ "size": { "height": { "value": "{click.image.md.size.height}", - "type": "sizing" + "type": "strokeWidth" }, "width": { "value": "{click.image.md.size.width}", - "type": "sizing" + "type": "strokeWidth" } } }, From 27af586c3cdc3620b7c2bdfe2cddea39dbd122c3 Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Fri, 4 Apr 2025 12:14:23 +0100 Subject: [PATCH 04/18] Fixed incorrectly changed tokens --- tokens/themes/component.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tokens/themes/component.json b/tokens/themes/component.json index 045732bb..4ffc3fc6 100644 --- a/tokens/themes/component.json +++ b/tokens/themes/component.json @@ -42,11 +42,11 @@ "size": { "height": { "value": "{click.image.md.size.height}", - "type": "strokeWidth" + "type": "sizing" }, "width": { "value": "{click.image.md.size.width}", - "type": "strokeWidth" + "type": "sizing" } } }, @@ -1683,11 +1683,11 @@ "borderWidth": { "default": { "value": "1.5", - "type": "sizing" + "type": "strokeWidth" }, "thin": { "value": "{sizes.1}", - "type": "sizing" + "type": "strokeWidth" } } }, From 62eebe24a2ec259f563d94b021769b7ec7d9ca4c Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Fri, 4 Apr 2025 12:16:43 +0100 Subject: [PATCH 05/18] Fixed click.image.borderWidth.default token incorrectly transforming to pixels --- src/styles/variables.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/variables.json b/src/styles/variables.json index 9bce95db..2d056859 100644 --- a/src/styles/variables.json +++ b/src/styles/variables.json @@ -1703,7 +1703,7 @@ } }, "borderWidth": { - "default": "1.5px", + "default": "1.5", "thin": "1px" }, "color": { From a08bf93bf0358dda882765455884df82da6f2881 Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Fri, 4 Apr 2025 14:59:35 +0100 Subject: [PATCH 06/18] Apply stroke widths to all valid svg shapes --- src/components/Icon/Icon.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 326f89c9..9f8d0286 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -59,6 +59,12 @@ const SvgWrapper = styled.div<{ fill: ${$color}; } + & rect[stroke-width], + & circle[stroke-width], + & ellipse[stroke-width], + & line[stroke-width], + & polyline[stroke-width], + & polygon[stroke-width], & path[stroke-width] { stroke-width: ${theme.click.image.borderWidth[$weight]} } From 3396082eda1bfae6c997d10785bee0dcf5af25a8 Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Fri, 4 Apr 2025 18:34:14 +0100 Subject: [PATCH 07/18] Changed image borderWidth thin value from 1px to 0.5 (relative to svg size) --- tokens/themes/component.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tokens/themes/component.json b/tokens/themes/component.json index 4ffc3fc6..8a7b7c86 100644 --- a/tokens/themes/component.json +++ b/tokens/themes/component.json @@ -1686,7 +1686,7 @@ "type": "strokeWidth" }, "thin": { - "value": "{sizes.1}", + "value": "0.5", "type": "strokeWidth" } } From f6b42aad7d4cd0ccbdb55445abe101d73fb19eec Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Fri, 4 Apr 2025 18:35:36 +0100 Subject: [PATCH 08/18] Improved icon svg overrides --- src/components/Icon/Icon.tsx | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 9f8d0286..17062494 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -51,21 +51,40 @@ const SvgWrapper = styled.div<{ align-items: center; ${({ theme, $color = "currentColor", $width, $height, $size, $weight = "default" }) => ` - & path[stroke], & svg[stroke]:not([stroke="none"]), & rect[stroke], & circle[fill] { + & 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], + & g[stroke-width], + & path[stroke-width], & rect[stroke-width], & circle[stroke-width], & ellipse[stroke-width], & line[stroke-width], & polyline[stroke-width], - & polygon[stroke-width], - & path[stroke-width] { + & polygon[stroke-width] { stroke-width: ${theme.click.image.borderWidth[$weight]} } From a792c491a78294bb8a38741af37e743b5b3f39db Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Fri, 4 Apr 2025 18:38:56 +0100 Subject: [PATCH 09/18] Made a hand full of icons use stroke-width instead of fill. Enabling support for icon weight --- src/components/icons/Beta.tsx | 7 +- src/components/icons/ChartArea.tsx | 13 ++-- src/components/icons/ChartBarHorizontal.tsx | 8 +- src/components/icons/ChartDonut.tsx | 12 ++- src/components/icons/ChartHeatmap.tsx | 35 ++------- src/components/icons/ChartScatter.tsx | 13 +++- src/components/icons/Dot.tsx | 11 ++- src/components/icons/DotsHorizontal.tsx | 45 +++++------ src/components/icons/DotsVertical.tsx | 12 ++- src/components/icons/DotsVerticalDouble.tsx | 24 ++++-- src/components/icons/HorizontalLoading.tsx | 84 ++++++--------------- src/components/icons/InformationIcon.tsx | 2 + src/components/icons/UserIcon.tsx | 8 +- src/components/icons/Waves.tsx | 10 ++- 14 files changed, 133 insertions(+), 151 deletions(-) diff --git a/src/components/icons/Beta.tsx b/src/components/icons/Beta.tsx index 61f908d4..e68b14a1 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..19741816 100644 --- a/src/components/icons/ChartHeatmap.tsx +++ b/src/components/icons/ChartHeatmap.tsx @@ -9,34 +9,13 @@ 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..ab7d8ef1 100644 --- a/src/components/icons/ChartScatter.tsx +++ b/src/components/icons/ChartScatter.tsx @@ -9,10 +9,15 @@ const ChartScatter = (props: SVGAttributes) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - + + + + + + + + + ); 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..ae2319b4 100644 --- a/src/components/icons/DotsVertical.tsx +++ b/src/components/icons/DotsVertical.tsx @@ -13,19 +13,25 @@ const DotsVertical = (props: SVGAttributes) => ( cx={12.5} cy={6.5} r={1.5} - fill="#161517" + fill="#FFF" + stroke="#FFF" + strokeWidth="1.5" /> ); diff --git a/src/components/icons/DotsVerticalDouble.tsx b/src/components/icons/DotsVerticalDouble.tsx index 2fce7ce0..f5eb4217 100644 --- a/src/components/icons/DotsVerticalDouble.tsx +++ b/src/components/icons/DotsVerticalDouble.tsx @@ -13,37 +13,49 @@ const DotsVerticalDouble = (props: SVGAttributes) => ( cx="8.5" cy="6.5" r="1.5" - fill="#161517" + fill="#FFF" + stroke="#FFF" + strokeWidth="1.5" /> ); diff --git a/src/components/icons/HorizontalLoading.tsx b/src/components/icons/HorizontalLoading.tsx index 784f7a07..c4d98d0e 100644 --- a/src/components/icons/HorizontalLoading.tsx +++ b/src/components/icons/HorizontalLoading.tsx @@ -1,81 +1,47 @@ import DotsHorizontal from "./DotsHorizontal"; import { keyframes, styled } from "styled-components"; -const animationCircle1 = keyframes` +const animationCircle = keyframes` 0 { - r: 0; - } - 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; + transform: scale(1); } 100% { - r: 0 + transform: scale(0); } `; const HorizontalLoading = styled(DotsHorizontal)` circle { - animation-name: horizontal-loading; + animation-name: ${animationCircle}; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; - -webkit-animation-name: horizontal-loading; + animation-direction: alternate; -webkit-animation-duration: 1.5s; + -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/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/UserIcon.tsx b/src/components/icons/UserIcon.tsx index cdd0b953..19d65a8f 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} > ); From 2011af7eb5759ba169307793d2b38a8971d6e842 Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Fri, 4 Apr 2025 18:44:33 +0100 Subject: [PATCH 10/18] Added weight option to storybook --- src/components/Icon/Icon.stories.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx index 17f8a8fc..414751c9 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" }, From 52930939b14df47657b17439e0f4af9d7883ffa2 Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Mon, 7 Apr 2025 11:06:38 +0100 Subject: [PATCH 11/18] Set default playground weight --- src/components/Icon/Icon.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx index 414751c9..60589961 100644 --- a/src/components/Icon/Icon.stories.tsx +++ b/src/components/Icon/Icon.stories.tsx @@ -46,6 +46,7 @@ export const Playground = { args: { name: "users", size: "md", + weight: "default", state: "default", width: "", height: "", From bf6296c2f25be2a2155588c4783961147ffefaf5 Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Mon, 7 Apr 2025 11:06:46 +0100 Subject: [PATCH 12/18] Generated tokens --- src/styles/variables.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/variables.json b/src/styles/variables.json index 2d056859..837c1198 100644 --- a/src/styles/variables.json +++ b/src/styles/variables.json @@ -1704,7 +1704,7 @@ }, "borderWidth": { "default": "1.5", - "thin": "1px" + "thin": "0.5" }, "color": { "stroke": "#161517" From ac0e33ca4afbfcca9d1aecc2b1896d1b2645768b Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Mon, 7 Apr 2025 12:08:45 +0100 Subject: [PATCH 13/18] Restored original colors for redrawn icons --- src/components/icons/DotsVertical.tsx | 12 +++++------ src/components/icons/DotsVerticalDouble.tsx | 24 ++++++++++----------- src/components/icons/UserIcon.tsx | 2 +- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/icons/DotsVertical.tsx b/src/components/icons/DotsVertical.tsx index ae2319b4..1db5597e 100644 --- a/src/components/icons/DotsVertical.tsx +++ b/src/components/icons/DotsVertical.tsx @@ -13,24 +13,24 @@ const DotsVertical = (props: SVGAttributes) => ( cx={12.5} cy={6.5} r={1.5} - fill="#FFF" - stroke="#FFF" + fill="#161517" + stroke="#161517" strokeWidth="1.5" /> diff --git a/src/components/icons/DotsVerticalDouble.tsx b/src/components/icons/DotsVerticalDouble.tsx index f5eb4217..4a74342e 100644 --- a/src/components/icons/DotsVerticalDouble.tsx +++ b/src/components/icons/DotsVerticalDouble.tsx @@ -13,48 +13,48 @@ const DotsVerticalDouble = (props: SVGAttributes) => ( cx="8.5" cy="6.5" r="1.5" - fill="#FFF" - stroke="#FFF" + fill="#161517" + stroke="#161517" strokeWidth="1.5" /> diff --git a/src/components/icons/UserIcon.tsx b/src/components/icons/UserIcon.tsx index 19d65a8f..93d03049 100644 --- a/src/components/icons/UserIcon.tsx +++ b/src/components/icons/UserIcon.tsx @@ -9,7 +9,7 @@ export const UserIcon = (props: SVGAttributes) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - + From 71fa2006c17107aa27ba054b6442244b74369f97 Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Mon, 7 Apr 2025 13:35:46 +0100 Subject: [PATCH 14/18] Added no weight type --- src/components/Icon/types.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts index 39f8b28d..c7937091 100644 --- a/src/components/Icon/types.ts +++ b/src/components/Icon/types.ts @@ -177,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; }; From 315a557259752055b6e77bceac25ab2ee15df75c Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Mon, 7 Apr 2025 13:36:40 +0100 Subject: [PATCH 15/18] Fixed varying timing across browsers --- src/components/icons/HorizontalLoading.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/icons/HorizontalLoading.tsx b/src/components/icons/HorizontalLoading.tsx index c4d98d0e..714d7d0f 100644 --- a/src/components/icons/HorizontalLoading.tsx +++ b/src/components/icons/HorizontalLoading.tsx @@ -2,9 +2,12 @@ import DotsHorizontal from "./DotsHorizontal"; import { keyframes, styled } from "styled-components"; const animationCircle = keyframes` - 0 { + 0% { transform: scale(1); } + 85% { + transform: scale(0); + } 100% { transform: scale(0); } @@ -13,11 +16,11 @@ const animationCircle = keyframes` const HorizontalLoading = styled(DotsHorizontal)` circle { animation-name: ${animationCircle}; - animation-duration: 1.5s; + animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate; - -webkit-animation-duration: 1.5s; + -webkit-animation-duration: 1s; -webkit-animation-name: ${animationCircle}; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; From 9b0bb598bdb4117a8f3657e3ef2c3c3fa4ac589b Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Mon, 7 Apr 2025 14:21:00 +0100 Subject: [PATCH 16/18] Fixed taxi icon on thin weight --- src/components/icons/Taxi.tsx | 1 + 1 file changed, 1 insertion(+) 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)" /> Date: Tue, 8 Apr 2025 10:45:02 +0100 Subject: [PATCH 17/18] Fixed more thin icons --- src/components/Icon/Icon.tsx | 19 ++++++------ src/components/icons/Beta.tsx | 2 +- src/components/icons/ChartHeatmap.tsx | 44 +++++++++++++++++++++++---- src/components/icons/ChartScatter.tsx | 21 ++++++++----- src/components/icons/CheckIcon.tsx | 7 ++--- src/components/icons/DatabaseIcon.tsx | 32 ++++++++++--------- src/components/icons/Gift.tsx | 28 ++++++++++++++--- src/components/icons/Loading.tsx | 4 +-- src/components/icons/Payment.tsx | 27 +++++++++++----- src/components/icons/Upgrade.tsx | 44 +++++++++++++++------------ 10 files changed, 150 insertions(+), 78 deletions(-) diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 17062494..0b850040 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -75,16 +75,15 @@ const SvgWrapper = styled.div<{ fill: ${$color}; } - - & svg[stroke-width], - & g[stroke-width], - & path[stroke-width], - & rect[stroke-width], - & circle[stroke-width], - & ellipse[stroke-width], - & line[stroke-width], - & polyline[stroke-width], - & polygon[stroke-width] { + & 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]} } diff --git a/src/components/icons/Beta.tsx b/src/components/icons/Beta.tsx index e68b14a1..dbe6f7cc 100644 --- a/src/components/icons/Beta.tsx +++ b/src/components/icons/Beta.tsx @@ -14,7 +14,7 @@ const Beta = (props: SVGAttributes) => ( stroke="#FFF" strokeLinecap="square" strokeWidth="1.5" - d="M8 21.1V6c.52-4.1 6.92-3.9 6.92 0 0 3.23-2.96 3.23-4.17 3.23 1.07 0 2.91-.08 4 1.27.4.51.81 1.28.81 2.23.01 1.36-.39 2.14-1.08 2.77-.63.57-1.5.89-2.57.95-1.92-.1-3.4-1.32-3.8-3.72" + d="M7.8 21.05V6.7c.52-4.1 6.92-3.9 6.92 0 0 3.23-2.96 3.23-4.17 3.23 1.07 0 2.91-.08 4 1.27.4.51.81 1.28.81 2.23.01 1.36-.39 2.14-1.08 2.77-.63.57-1.5.89-2.57.95-1.92-.1-3.405-1.323-3.794-3.72" /> ); diff --git a/src/components/icons/ChartHeatmap.tsx b/src/components/icons/ChartHeatmap.tsx index 19741816..c98a8af2 100644 --- a/src/components/icons/ChartHeatmap.tsx +++ b/src/components/icons/ChartHeatmap.tsx @@ -9,12 +9,44 @@ 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 ab7d8ef1..af7fa231 100644 --- a/src/components/icons/ChartScatter.tsx +++ b/src/components/icons/ChartScatter.tsx @@ -9,14 +9,19 @@ 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/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/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/Upgrade.tsx b/src/components/icons/Upgrade.tsx index 30a63b6b..289e536a 100644 --- a/src/components/icons/Upgrade.tsx +++ b/src/components/icons/Upgrade.tsx @@ -9,27 +9,31 @@ const Upgrade = (props: SVGAttributes) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - - - - - - + + + + ); From 11035fa694f1452e2bd150dd0d8db0bbbf0effd3 Mon Sep 17 00:00:00 2001 From: Levi Cole Date: Tue, 8 Apr 2025 14:14:56 +0100 Subject: [PATCH 18/18] Added thin icons to storybook --- src/components/icons/Icons.mdx | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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) => ( + + + + ))} + +