From 0330ee39a3b26b1488e3182b7da3d73994bdeccf Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Tue, 17 Dec 2024 13:43:25 +0100 Subject: [PATCH 1/2] UI: init label typography --- .../css/typography-hierarchy/index.css | 1 + .../typography-hierarchy/typography-label.css | 14 ++++++++++++++ .../app/src/components/Typography/index.tsx | 16 ++++++++++++++-- pkgs/webview-ui/app/tailwind/typography.ts | 3 +++ 4 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-label.css diff --git a/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/index.css b/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/index.css index 2394559ef..ba3e11c0a 100644 --- a/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/index.css +++ b/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/index.css @@ -1,3 +1,4 @@ +@import "./typography-label.css"; @import "./typography-body.css"; @import "./typography-title.css"; @import "./typography-headline.css"; diff --git a/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-label.css b/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-label.css new file mode 100644 index 000000000..0ebab7685 --- /dev/null +++ b/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-label.css @@ -0,0 +1,14 @@ +.fnt-label-default { + font-size: 0.8125rem; + line-height: 100%; +} + +.fnt-label-s { + font-size: 0.75rem; + line-height: 100%; +} + +.fnt-label-xs { + font-size: 0.6875rem; + line-height: 100%; +} diff --git a/pkgs/webview-ui/app/src/components/Typography/index.tsx b/pkgs/webview-ui/app/src/components/Typography/index.tsx index 5b14bb50c..658677d84 100644 --- a/pkgs/webview-ui/app/src/components/Typography/index.tsx +++ b/pkgs/webview-ui/app/src/components/Typography/index.tsx @@ -3,7 +3,7 @@ import { Dynamic } from "solid-js/web"; import cx from "classnames"; import "./css/typography.css"; -type Hierarchy = "body" | "title" | "headline"; +type Hierarchy = "body" | "title" | "headline" | "label"; type Color = "primary" | "secondary" | "tertiary"; type Weight = "normal" | "medium" | "bold"; type Tag = "span" | "p" | "h1" | "h2" | "h3" | "h4"; @@ -16,6 +16,11 @@ const colorMap: Record = { // type Size = "default" | "xs" | "s" | "m" | "l"; interface SizeForHierarchy { + label: { + default: string; + xs: string; + s: string; + }; body: { default: string; xs: string; @@ -57,6 +62,11 @@ const sizeHierarchyMap: SizeForHierarchy = { m: cx("fnt-title-m"), l: cx("fnt-title-l"), }, + label: { + default: cx("fnt-label-default"), + s: cx("fnt-label-s"), + xs: cx("fnt-label-xs"), + }, }; const weightMap: Record = { @@ -74,18 +84,20 @@ interface TypographyProps { inverted?: boolean; tag?: Tag; class?: string; + classList?: Record; } export const Typography = (props: TypographyProps) => { return ( {props.children} diff --git a/pkgs/webview-ui/app/tailwind/typography.ts b/pkgs/webview-ui/app/tailwind/typography.ts index 332422e2d..6906832fe 100644 --- a/pkgs/webview-ui/app/tailwind/typography.ts +++ b/pkgs/webview-ui/app/tailwind/typography.ts @@ -10,6 +10,9 @@ export const typography: Partial = { title: ["1.125rem", { lineHeight: "124%" }], "title-m": ["1.25rem", { lineHeight: "124%" }], "title-l": ["1.375rem", { lineHeight: "124%" }], + label: ["0.8125rem", { lineHeight: "100%" }], + "label-s": ["0.75rem", { lineHeight: "100%" }], + "label-xs": ["0.6875rem", { lineHeight: "124%" }], }, // textColor: { // ...defaultTheme.textColor, From e64adf74315c6496074ee537dd5255c4936b43cd Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Tue, 17 Dec 2024 13:44:46 +0100 Subject: [PATCH 2/2] UI/chore: consistent color utils --- .../app/src/components/Typography/index.tsx | 2 +- pkgs/webview-ui/app/tailwind/core-plugin.ts | 121 ++++++++++++++---- 2 files changed, 94 insertions(+), 29 deletions(-) diff --git a/pkgs/webview-ui/app/src/components/Typography/index.tsx b/pkgs/webview-ui/app/src/components/Typography/index.tsx index 658677d84..250b88934 100644 --- a/pkgs/webview-ui/app/src/components/Typography/index.tsx +++ b/pkgs/webview-ui/app/src/components/Typography/index.tsx @@ -95,7 +95,7 @@ export const Typography = (props: TypographyProps) => { props.inverted && "fnt-clr--inverted", sizeHierarchyMap[props.hierarchy][props.size] as string, weightMap[props.weight || "normal"], - props.class + props.class, )} classList={props.classList} > diff --git a/pkgs/webview-ui/app/tailwind/core-plugin.ts b/pkgs/webview-ui/app/tailwind/core-plugin.ts index 57b7440f3..aef668b29 100644 --- a/pkgs/webview-ui/app/tailwind/core-plugin.ts +++ b/pkgs/webview-ui/app/tailwind/core-plugin.ts @@ -7,6 +7,71 @@ import { parseColor } from "tailwindcss/lib/util/color"; const toRGB = (value: string) => "rgb(" + parseColor(value).color.join(" ") + ")"; +const mkBorderUtils = ( + theme: (n: string) => unknown, + prefix: string, + cssProperty: string, +) => ({ + // - def colors + [`.${prefix}-def-1`]: { + [cssProperty]: theme("colors.secondary.50"), + }, + [`.${prefix}-def-2`]: { + [cssProperty]: theme("colors.secondary.100"), + }, + [`.${prefix}-def-3`]: { + [cssProperty]: theme("colors.secondary.200"), + }, + [`.${prefix}-def-4`]: { + [cssProperty]: theme("colors.secondary.300"), + }, + [`.${prefix}-def-5`]: { + [cssProperty]: theme("colors.secondary.400"), + }, + // - inverse colors + [`.${prefix}-inv-1`]: { + [cssProperty]: theme("colors.secondary.800"), + }, + [`.${prefix}-inv-2`]: { + [cssProperty]: theme("colors.secondary.900"), + }, + [`.${prefix}-inv-3`]: { + [cssProperty]: theme("colors.secondary.900"), + }, + [`.${prefix}-inv-4`]: { + [cssProperty]: theme("colors.secondary.950"), + }, + [`.${prefix}-inv-5`]: { + [cssProperty]: theme("colors.black"), + }, + + [`.${prefix}-int-1`]: { + [cssProperty]: theme("colors.info.500"), + }, + [`.${prefix}-int-2`]: { + [cssProperty]: theme("colors.info.600"), + }, + [`.${prefix}-int-3`]: { + [cssProperty]: theme("colors.info.700"), + }, + [`.${prefix}-int-4`]: { + [cssProperty]: theme("colors.info.800"), + }, + + [`.${prefix}-semantic-1`]: { + [cssProperty]: theme("colors.error.500"), + }, + [`.${prefix}-semantic-2`]: { + [cssProperty]: theme("colors.error.600"), + }, + [`.${prefix}-semantic-3`]: { + [cssProperty]: theme("colors.error.700"), + }, + [`.${prefix}-semantic-4`]: { + [cssProperty]: theme("colors.error.800"), + }, +}); + export default plugin.withOptions( (_options = {}) => ({ addUtilities, theme }) => { @@ -44,6 +109,19 @@ export default plugin.withOptions( backgroundColor: theme("colors.primary.950"), }, // bg inverse accent + ".bg-acc-1": { + backgroundColor: theme("colors.primary.50"), + }, + ".bg-acc-2": { + backgroundColor: theme("colors.secondary.100"), + }, + ".bg-acc-3": { + backgroundColor: theme("colors.secondary.200"), + }, + ".bg-acc-4": { + backgroundColor: theme("colors.secondary.300"), + }, + // bg inverse accent ".bg-inv-acc-1": { backgroundColor: theme("colors.secondary.500"), }, @@ -53,6 +131,9 @@ export default plugin.withOptions( ".bg-inv-acc-3": { backgroundColor: theme("colors.secondary.700"), }, + ".bg-inv-acc-4": { + backgroundColor: theme("colors.primary.900"), + }, // Text colors ".fg-def-1": { @@ -81,39 +162,22 @@ export default plugin.withOptions( color: theme("colors.secondary.400"), }, - // Border colors - ".border-def-1": { - borderColor: theme("colors.secondary.50"), + ".fg-semantic-1": { + color: theme("colors.error.500"), }, - ".border-def-2": { - borderColor: theme("colors.secondary.100"), + ".fg-semantic-2": { + color: theme("colors.error.600"), }, - ".border-def-3": { - borderColor: theme("colors.secondary.200"), + ".fg-semantic-3": { + color: theme("colors.error.700"), }, - ".border-def-4": { - borderColor: theme("colors.secondary.300"), - }, - ".border-def-5": { - borderColor: theme("colors.secondary.400"), - }, - // border inverse - ".border-inv-1": { - borderColor: theme("colors.secondary.800"), - }, - ".border-inv-2": { - borderColor: theme("colors.secondary.900"), - }, - ".border-inv-3": { - borderColor: theme("colors.secondary.900"), - }, - ".border-inv-4": { - borderColor: theme("colors.secondary.950"), - }, - ".border-inv-5": { - borderColor: theme("colors.black"), + ".fg-semantic-4": { + color: theme("colors.error.800"), }, + ...mkBorderUtils(theme, "border", "borderColor"), + ...mkBorderUtils(theme, "outline", "outlineColor"), + // Example: dark mode utilities (all elements within ) // ".dark .bg-def-1": { // backgroundColor: theme("colors.black"), @@ -194,6 +258,7 @@ export default plugin.withOptions( }, }, boxShadow: { + "input-active": "0px 0px 0px 1px #FFF, 0px 0px 0px 2px #203637", "inner-primary": "2px 2px 0px 0px var(--clr-bg-inv-acc-3, #415E63) inset", "inner-primary-active":