fix(styles): Fix disabled colours

This commit is contained in:
LynithDev 2024-11-28 17:20:47 +01:00
parent 5a1ed75454
commit 623632a4fe
3 changed files with 15 additions and 15 deletions

View file

@ -15,37 +15,37 @@
--clr-fg-primary: 213, 219, 255;
--clr-fg-primary-hover: 218, 224, 255;
--clr-fg-primary-pressed: 225, 229, 255;
--clr-fg-primary-disabled: 225, 229, 255, 0.5;
--clr-fg-primary-disabled: 205, 209, 235;
--clr-fg-secondary: 120, 129, 141;
--clr-fg-secondary-hover: 95, 104, 116;
--clr-fg-secondary-pressed: 130, 141, 155;
--clr-fg-secondary-disabled: 120, 129, 141, 0.5;
--clr-fg-secondary-disabled: 100, 109, 121;
--clr-brand: 43, 75, 255;
--clr-brand-hover: 40, 67, 221;
--clr-brand-pressed: 57, 87, 255;
--clr-brand-disabled: 57, 87, 255, 0.5;
--clr-brand-disabled: 37, 67, 235;
--clr-onbrand: 213, 219, 255;
--clr-onbrand-hover: 218, 224, 255;
--clr-onbrand-pressed: 225, 229, 255;
--clr-onbrand-disabled: 225, 229, 255, 0.5;
--clr-onbrand-disabled: 205, 209, 235;
--clr-danger: 255, 68, 68;
--clr-danger-hover: 214, 52, 52;
--clr-danger-pressed: 255, 86, 86;
--clr-danger-disabled: 255, 68, 68, 0.5;
--clr-danger-disabled: 235, 48, 48;
--clr-success: 35, 154, 96;
--clr-success-hover: 26, 135, 82;
--clr-success-pressed: 44, 172, 110;
--clr-success-disabled: 35, 154, 96, 0.5;
--clr-success-disabled: 15, 134, 76;
--clr-component-bg: 26, 34, 41;
--clr-component-bg-hover: 23, 31, 37;
--clr-component-bg-pressed: 34, 44, 53;
--clr-component-bg-disabled: 26, 34, 41, 0.5;
--clr-component-bg-disabled: 16, 24, 31;
--clr-code-info: 97, 175, 239;
--clr-code-warn: 229, 192, 123;

View file

@ -19,7 +19,7 @@ function Checkbox(props: CheckboxProps) {
return (
<div
class={`${styles.checkbox} ${` ${split.class}` ?? ''}`}
class={`${styles.checkbox} ${split.class ?? ''}`}
onClick={() => toggle()}
{...rest}
>

View file

@ -52,13 +52,13 @@ export default defineConfig({
DEFAULT: 'rgba(var(--clr-fg-primary), <alpha-value>)',
hover: 'rgba(var(--clr-fg-primary-hover), <alpha-value>)',
pressed: 'rgba(var(--clr-fg-primary-pressed), <alpha-value>)',
disabled: 'rgba(var(--clr-fg-primary-disabled))',
disabled: 'rgba(var(--clr-fg-primary-disabled), <alpha-value>)',
},
secondary: {
DEFAULT: 'rgba(var(--clr-fg-secondary), <alpha-value>)',
hover: 'rgba(var(--clr-fg-secondary-hover), <alpha-value>)',
pressed: 'rgba(var(--clr-fg-secondary-pressed), <alpha-value>)',
disabled: 'rgba(var(--clr-fg-secondary-disabled))',
disabled: 'rgba(var(--clr-fg-secondary-disabled), <alpha-value>)',
},
},
@ -66,28 +66,28 @@ export default defineConfig({
DEFAULT: 'rgba(var(--clr-brand), <alpha-value>)',
hover: 'rgba(var(--clr-brand-hover), <alpha-value>)',
pressed: 'rgba(var(--clr-brand-pressed), <alpha-value>)',
disabled: 'rgba(var(--clr-brand-disabled))',
disabled: 'rgba(var(--clr-brand-disabled), <alpha-value>)',
},
onbrand: {
DEFAULT: 'rgba(var(--clr-onbrand), <alpha-value>)',
hover: 'rgba(var(--clr-onbrand-hover), <alpha-value>)',
pressed: 'rgba(var(--clr-onbrand-pressed), <alpha-value>)',
disabled: 'rgba(var(--clr-onbrand-disabled))',
disabled: 'rgba(var(--clr-onbrand-disabled), <alpha-value>)',
},
danger: {
DEFAULT: 'rgba(var(--clr-danger), <alpha-value>)',
hover: 'rgba(var(--clr-danger-hover), <alpha-value>)',
pressed: 'rgba(var(--clr-danger-pressed), <alpha-value>)',
disabled: 'rgba(var(--clr-danger-disabled))',
disabled: 'rgba(var(--clr-danger-disabled), <alpha-value>)',
},
success: {
DEFAULT: 'rgba(var(--clr-success), <alpha-value>)',
hover: 'rgba(var(--clr-success-hover), <alpha-value>)',
pressed: 'rgba(var(--clr-success-pressed), <alpha-value>)',
disabled: 'rgba(var(--clr-success-disabled))',
disabled: 'rgba(var(--clr-success-disabled), <alpha-value>)',
},
component: {
@ -95,7 +95,7 @@ export default defineConfig({
DEFAULT: 'rgba(var(--clr-component-bg), <alpha-value>)',
hover: 'rgba(var(--clr-component-bg-hover), <alpha-value>)',
pressed: 'rgba(var(--clr-component-bg-pressed), <alpha-value>)',
disabled: 'rgba(var(--clr-component-bg-disabled))',
disabled: 'rgba(var(--clr-component-bg-disabled), <alpha-value>)',
},
},