yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(ui): consolidate and simplify how we use colors

Browse Source 
* reconciles latest color variables from Figma
* defines the primary colors and the color system in tailwind config.
* refines how we generate utilities within the color system for `bg`, `fg` and `border`.
* removes custom box shadows, instead leaning on direct definition in CSS and `theme()`.

This change removes duplicate color information being defined as CSS variables in `index.css`
and co-locates all style information with the component
whilst retaining the ability to tie in to the color system when mapping styles from Figma.
This commit is contained in:
Brian McGee
2025-06-18 17:10:12 +01:00
parent ed4c7e6834
commit 101f97bc4a
13 changed files with 306 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkgs/clan-app/ui/src/components/Button/Button-Dark.css
View File

@@ -27,5 +27,5 @@
}
.button--dark-active:active {
@apply active:border-secondary-900 active:shadow-button-primary-active;
@apply active:border-secondary-900;
}

2
pkgs/clan-app/ui/src/components/Button/Button-Ghost.css
View File

@@ -7,5 +7,5 @@
}
.button--ghost-active:active {
@apply active:bg-secondary-200 active:text-secondary-900 active:shadow-button-primary-active;
@apply active:bg-secondary-200 active:text-secondary-900;
}

2
pkgs/clan-app/ui/src/components/Button/Button-Light.css
View File

@@ -27,7 +27,7 @@
}
.button--light-active:active {
@apply active:bg-secondary-200 border-secondary-600 active:text-secondary-900 active:shadow-button-primary-active;
@apply active:bg-secondary-200 border-secondary-600 active:text-secondary-900;
box-shadow: inset 2px 2px theme(backgroundColor.secondary.300);

4
pkgs/clan-app/ui/src/components/inputBase/index.tsx
View File

@@ -124,7 +124,7 @@ export const InputLabel = (props: InputLabelProps) => {
weight="bold"
class="inline-flex gap-1 align-middle !fg-def-1"
classList={{
[cx("!fg-semantic-1")]: !!props.error,
[cx("!fg-semantic-info-1")]: !!props.error,
}}
aria-invalid={props.error}
>
@@ -184,7 +184,7 @@ export const InputError = (props: InputErrorProps) => {
// @ts-expect-error: Dependent type is to complex to check how it is coupled to the override for now
size="xxs"
weight="medium"
class={cx("col-span-full px-1 !fg-semantic-4", typoClasses)}
class={cx("col-span-full px-1 !fg-semantic-info-4", typoClasses)}
{...rest}
>
{props.error}

43
pkgs/clan-app/ui/src/components/v2/Button/Button.css
View File

@@ -25,23 +25,32 @@
&.primary {
@apply bg-inv-acc-4 fg-inv-1;
@apply border border-solid border-inv-4;
@apply shadow-button-primary;
box-shadow: 0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.3) inset;
&.ghost {
@apply bg-transparent border-none shadow-none;
}
&:hover {
@apply bg-inv-acc-3 border-solid shadow-button-primary-hover;
border-color: theme(backgroundColor.secondary.700);
@apply bg-inv-acc-3 border-solid border-inv-acc-3;
box-shadow: 0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.2) inset;
}
&:active {
@apply bg-inv-acc-4 border-solid border-inv-3 shadow-button-primary-active;
@apply bg-inv-acc-4 border-solid border-inv-3;
box-shadow:
0 0 0 0.0625rem theme(colors.off.white),
0 0 0 0.125rem theme(colors.bg.inv.acc.4),
-0.125rem -0.125rem 0 0 theme(colors.bg.inv.acc.1) inset;
}
&:focus-visible {
@apply bg-inv-acc-4 border-solid border-inv-3 shadow-button-primary-focus;
@apply bg-inv-acc-4 border-solid border-inv-3;
box-shadow:
0 0 0 0.0625rem theme(colors.off.white),
0 0 0 0.125rem theme(colors.border.semantic.info.1),
0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.2) inset;
}
&:disabled {
@@ -56,23 +65,37 @@
&.secondary {
@apply bg-def-acc-2 fg-def-1;
@apply border border-solid border-inv-2;
@apply shadow-button-secondary;
box-shadow:
-0.125rem -0.125rem 0 0 #cedfe2 inset,
0.125rem 0.125rem 0 0 theme(colors.off.white) inset;
&.ghost {
@apply bg-transparent border-none shadow-none;
}
&:hover {
@apply bg-def-acc-3 border-solid shadow-button-secondary-hover;
border-color: theme(backgroundColor.secondary.700);
@apply bg-def-acc-3 border-solid border-inv-3;
box-shadow:
-0.125rem -0.125rem 0 0 #cedfe2 inset,
0.125rem 0.125rem 0 0 theme(colors.off.white) inset;
}
&:focus-visible {
@apply bg-def-acc-3 border-solid border-inv-3 shadow-button-secondary-focus;
@apply bg-def-acc-3 border-solid border-inv-3;
box-shadow:
0 0 0 0.0625rem theme(colors.off.white),
0 0 0 0.125rem theme(colors.border.semantic.info.1),
-0.125rem -0.125rem 0 0 #cedfe2 inset,
0.125rem 0.125rem 0 0 theme(colors.off.white) inset;
}
&:active {
@apply bg-def-acc-3 border-solid border-inv-4 shadow-button-secondary-active;
@apply bg-def-acc-3 border-solid border-inv-4;
box-shadow:
0 0 0 0.0625rem theme(colors.off.white),
0 0 0 0.125rem theme(colors.bg.inv.acc.4),
0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.2) inset;
}
&:disabled {

3
pkgs/clan-app/ui/src/components/v2/Button/Button.tsx
View File

@@ -99,8 +99,7 @@ export const Button = (props: ButtonProps) => {
hierarchy="label"
family="mono"
size={local.size || "default"}
color="inherit"
inverted={local.hierarchy === "secondary"}
inverted={local.hierarchy === "primary"}
weight="bold"
tag="span"
>

6
pkgs/clan-app/ui/src/components/v2/MachineStatus/MachineStatus.css
View File

@@ -6,14 +6,14 @@ span.tag-status {
}
&.online > .indicator {
background-color: #0ae856; /* todo get from theme */
background-color: theme(colors.fg.semantic.success.1);
}
&.offline > .indicator {
background-color: #ff2c78; /* todo get from theme */
background-color: theme(colors.fg.semantic.error.1);
}
&.installed > .indicator {
background-color: var(--clr-fg-inv-3);
background-color: theme(colors.fg.inv.3);
}
}

4
pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavBody.css
View File

@@ -13,8 +13,8 @@ div.sidebar-body {
background: linear-gradient(
180deg,
var(--clr-bg-inv-1) 0%,
var(--clr-bg-inv-3) 100%
theme(colors.bg.inv.1) 0%,
theme(colors.bg.inv.3) 100%
);
@apply backdrop-blur-sm;

4
pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavHeader.css
View File

@@ -4,8 +4,8 @@ div.sidebar-header {
background: linear-gradient(
90deg,
var(--clr-bg-inv-3) 0%,
var(--clr-bg-inv-4) 100%
theme(colors.bg.inv.3) 0%,
theme(colors.bg.inv.4) 0%
);
& > .dropdown-trigger {

43
pkgs/clan-app/ui/src/components/v2/index.css
View File

@@ -1,6 +1,8 @@
/* Material icons removed - using custom icons */
/* @import url(./components/Typography/css/typography.css); */
@config "../../../tailwind.config.ts";
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -47,47 +49,6 @@
src: url(../../../.fonts/CommitMono-400-Regular.otf) format("otf");
}
:root {
--clr-bg-def-1: theme(colors.white);
--clr-bg-def-2: theme(colors.primary.50);
--clr-bg-def-3: theme(colors.secondary.100);
--clr-bg-def-4: theme(colors.secondary.200);
--clr-border-def-1: theme(colors.secondary.50);
--clr-border-def-2: theme(colors.secondary.100);
--clr-border-def-3: theme(colors.secondary.200);
--clr-border-def-4: theme(colors.secondary.300);
--clr-border-def-sem-inf-1: theme(colors.info.500);
--clr-border-def-sem-inf-2: theme(colors.info.600);
--clr-border-def-sem-inf-3: theme(colors.info.700);
--clr-border-def-sem-inf-4: theme(colors.info.800);
--clr-bg-inv-1: theme(colors.primary.600);
--clr-bg-inv-2: theme(colors.primary.700);
--clr-bg-inv-3: theme(colors.primary.800);
--clr-bg-inv-4: theme(colors.primary.900);
--clr-border-inv-1: theme(colors.secondary.700);
--clr-border-inv-2: theme(colors.secondary.800);
--clr-border-inv-3: theme(colors.secondary.900);
--clr-border-inv-4: theme(colors.secondary.950);
--clr-bg-inv-acc-1: theme(colors.secondary.500);
--clr-bg-inv-acc-2: theme(colors.secondary.600);
--clr-bg-inv-acc-3: theme(colors.secondary.700);
--clr-fg-def-1: theme(colors.secondary.950);
--clr-fg-def-2: theme(colors.secondary.900);
--clr-fg-def-3: theme(colors.secondary.700);
--clr-fg-def-4: theme(colors.secondary.400);
--clr-fg-inv-1: theme(colors.white);
--clr-fg-inv-2: theme(colors.secondary.100);
--clr-fg-inv-3: theme(colors.secondary.300);
--clr-fg-inv-4: theme(colors.secondary.400);
}
html {
@apply font-sans;
overflow-x: hidden;

2
pkgs/clan-app/ui/src/index.css
View File

@@ -1,6 +1,8 @@
/* Material icons removed - using custom icons */
/* @import url(./components/Typography/css/typography.css); */
@config "../tailwind.config.ts";
@tailwind base;
@tailwind components;
@tailwind utilities;