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 ab147143c..f496e2478 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 cf91d71ce..326f89c9a 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 11812e177..39f8b28d1 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 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..9bce95dbc 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 f496e2478..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,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 468c930b1..045732bb9 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 045732bb9..4ffc3fc6e 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 9bce95dbc..2d056859b 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 326f89c9a..9f8d02869 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 4ffc3fc6e..8a7b7c866 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 9f8d02869..170624940 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 61f908d49..e68b14a14 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..197418161 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 7b3b35063..ab7d8ef11 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 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..ae2319b40 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 2fce7ce0c..f5eb42173 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 784f7a07f..c4d98d0ee 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 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/UserIcon.tsx b/src/components/icons/UserIcon.tsx index cdd0b953d..19d65a8f8 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} > ); 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 17f8a8fcd..414751c9f 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 414751c9f..605899614 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 2d056859b..837c1198c 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 ae2319b40..1db5597e9 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 f5eb42173..4a74342e7 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 19d65a8f8..93d03049c 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 39f8b28d1..c7937091f 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 c4d98d0ee..714d7d0f0 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 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)" /> 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 170624940..0b8500406 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 e68b14a14..dbe6f7ccb 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 197418161..c98a8af25 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 ab7d8ef11..af7fa231a 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 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/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/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/Upgrade.tsx b/src/components/icons/Upgrade.tsx index 30a63b6b6..289e536a2 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 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) => ( + + + + ))} + +