-
+
{project?.name ? project.name : APP_NAME}
{project?.entrypointMetadata && (
Created{' '}
@@ -183,11 +180,10 @@ function ProjectMenuPopover({
onProjectClose(file || null, project?.path || null, true)
}}
icon={{
- icon: faHome,
+ icon: 'arrowLeft',
className: 'p-1',
- size: 'sm',
}}
- className="border-transparent dark:border-transparent hover:bg-energy-10/20 dark:hover:bg-chalkboard-90"
+ className="border-transparent dark:border-transparent"
>
Go to Home
diff --git a/src/components/SettingsAuthProvider.tsx b/src/components/SettingsAuthProvider.tsx
index 18dc961e1..955bdbdc0 100644
--- a/src/components/SettingsAuthProvider.tsx
+++ b/src/components/SettingsAuthProvider.tsx
@@ -199,6 +199,17 @@ export const SettingsAuthProviderBase = ({
return () => matcher.removeEventListener('change', listener)
}, [settingsState.context])
+ /**
+ * Update the --primary-hue CSS variable
+ * to match the setting app.themeColor.current
+ */
+ useEffect(() => {
+ document.documentElement.style.setProperty(
+ `--primary-hue`,
+ settingsState.context.app.themeColor.current
+ )
+ }, [settingsState.context.app.themeColor.current])
+
// Auth machine setup
const [authState, authSend, authActor] = useMachine(authMachine, {
actions: {
diff --git a/src/components/UserSidebarMenu.tsx b/src/components/UserSidebarMenu.tsx
index beea654c8..0e8ca4338 100644
--- a/src/components/UserSidebarMenu.tsx
+++ b/src/components/UserSidebarMenu.tsx
@@ -154,10 +154,9 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
icon={{
icon: faSignOutAlt,
className: 'p-1',
- bgClassName: 'bg-destroy-80',
+ bgClassName: '!bg-transparent',
size: 'sm',
- iconClassName:
- 'text-destroy-20 group-hover:text-destroy-10 hover:text-destroy-10',
+ iconClassName: '!text-destroy-70',
}}
className="border-transparent dark:border-transparent hover:border-destroy-40 dark:hover:border-destroy-60 hover:bg-destroy-10/20 dark:hover:bg-destroy-80/20"
data-testid="user-sidebar-sign-out"
diff --git a/src/index.css b/src/index.css
index 019805362..c1b29d93c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -64,15 +64,15 @@ select {
}
button {
- @apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs focus-visible:ring-energy-10;
+ @apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs focus-visible:ring-primary;
}
button:hover {
- @apply border-chalkboard-40 bg-energy-10/20;
+ @apply border-chalkboard-40 bg-primary/5;
}
.dark button {
- @apply border-chalkboard-70 focus-visible:ring-energy-10/50;
+ @apply border-chalkboard-70 focus-visible:ring-primary/50;
}
.dark button:hover {
@@ -80,7 +80,7 @@ button:hover {
}
button:disabled {
- @apply cursor-not-allowed bg-chalkboard-20 text-chalkboard-60 border-chalkboard-20;
+ @apply cursor-not-allowed bg-chalkboard-20/50 text-chalkboard-60 border-chalkboard-20;
}
.dark button:disabled {
@@ -88,19 +88,19 @@ button:disabled {
}
a:not(.action-button) {
- @apply text-energy-70 hover:text-energy-60 underline;
+ @apply text-primary underline hover:hue-rotate-15;
}
.dark a:not(.action-button) {
- @apply text-energy-20 hover:text-energy-10;
+ @apply hover:brightness-110 hover:hue-rotate-0;
}
input {
- @apply selection:bg-energy-10/50;
+ @apply selection:bg-primary/50;
}
.dark input {
- @apply selection:bg-energy-10/40;
+ @apply selection:bg-primary/40;
}
.mono {
diff --git a/src/index.tsx b/src/index.tsx
index b55bcf1d9..6f5f322f3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -28,8 +28,8 @@ root.render(
'bg-chalkboard-10 dark:bg-chalkboard-90 text-chalkboard-110 dark:text-chalkboard-10 rounded-sm border-chalkboard-20/50 dark:border-chalkboard-80/50',
success: {
iconTheme: {
- primary: 'oklch(93.31% 0.227 122.3deg)',
- secondary: 'oklch(24.49% 0.01405 158.7deg)',
+ primary: 'oklch(89% 0.16 143.4deg)',
+ secondary: 'oklch(48.62% 0.1654 142.5deg)',
},
duration: 1500,
},
diff --git a/src/lib/settings/initialSettings.tsx b/src/lib/settings/initialSettings.tsx
index 5ec464bcf..47a30a525 100644
--- a/src/lib/settings/initialSettings.tsx
+++ b/src/lib/settings/initialSettings.tsx
@@ -13,7 +13,7 @@ import {
cameraSystems,
} from 'lib/cameraControls'
import { isTauri } from 'lib/isTauri'
-import { useRef } from 'react'
+import { CSSProperties, useRef } from 'react'
import { open } from '@tauri-apps/api/dialog'
import { CustomIcon } from 'components/CustomIcon'
import Tooltip from 'components/Tooltip'
@@ -132,6 +132,31 @@ export function createSettings() {
})),
},
}),
+ themeColor: new Setting({
+ defaultValue: '264.5',
+ description: 'The hue of the primary theme color for the app',
+ validate: (v) => Number(v) >= 0 && Number(v) < 360,
+ Component: ({ value, onChange }) => (
+
+ ),
+ }),
onboardingStatus: new Setting({
defaultValue: '',
validate: (v) => typeof v === 'string',
@@ -179,7 +204,7 @@ export function createSettings() {
inputRef.current.value = newValue
}
}}
- className="p-0 m-0 border-none hover:bg-energy-10 focus:bg-energy-10 dark:hover:bg-energy-80/50 dark:focus::bg-energy-80/50"
+ className="p-0 m-0 border-none hover:bg-primary/10 focus:bg-primary/10 dark:hover:bg-primary/20 dark:focus::bg-primary/20"
>
Choose a folder
diff --git a/src/machines/settingsMachine.ts b/src/machines/settingsMachine.ts
index 94b28922b..5ad28a7e1 100644
--- a/src/machines/settingsMachine.ts
+++ b/src/machines/settingsMachine.ts
@@ -32,6 +32,11 @@ export const settingsMachine = createMachine(
internal: true,
actions: ['setSettingAtLevel', 'persistSettings'], // No toast
},
+ 'set.app.themeColor': {
+ target: 'idle',
+ internal: true,
+ actions: ['setSettingAtLevel', 'persistSettings'], // No toast
+ },
'set.modeling.defaultUnit': {
target: 'idle',
diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx
index 2289dd30a..2f46a7e3f 100644
--- a/src/routes/Home.tsx
+++ b/src/routes/Home.tsx
@@ -247,7 +247,7 @@ const Home = () => {
Loaded from{' '}
-
+
{settings.app.projectDirectory.current}
.{' '}
diff --git a/src/routes/Onboarding/CodeEditor.tsx b/src/routes/Onboarding/CodeEditor.tsx
index 33b58c165..1b70f50f7 100644
--- a/src/routes/Onboarding/CodeEditor.tsx
+++ b/src/routes/Onboarding/CodeEditor.tsx
@@ -24,8 +24,7 @@ export default function CodeEditor() {
>
- Editing code with{' '}
- kcl
+ Editing code with kcl
kcl is our language for describing geometry. Building our own
diff --git a/src/routes/Onboarding/Introduction.tsx b/src/routes/Onboarding/Introduction.tsx
index 43d955e29..2dac0e291 100644
--- a/src/routes/Onboarding/Introduction.tsx
+++ b/src/routes/Onboarding/Introduction.tsx
@@ -137,7 +137,7 @@ export default function Introduction() {
alt={APP_NAME}
className="h-20 max-w-full"
/>
-
+
Alpha
diff --git a/src/routes/Onboarding/ParametricModeling.tsx b/src/routes/Onboarding/ParametricModeling.tsx
index 7ddb81af9..26c0268ee 100644
--- a/src/routes/Onboarding/ParametricModeling.tsx
+++ b/src/routes/Onboarding/ParametricModeling.tsx
@@ -49,10 +49,8 @@ export default function ParametricModeling() {
We've received this sketch from a designer highlighting an{' '}
-
- aluminum bracket
- {' '}
- they need for this shelf:
+ aluminum bracket they need for
+ this shelf:
![]()
We are able to easily calculate the thickness of the material based
on the width of the bracket to meet a set safety factor on{' '}
-
+
line {bracketThicknessCalculationLine}
.
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index 78744ab42..bdd477201 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -420,9 +420,7 @@ export function SettingsSection({
className={
'group grid grid-cols-2 gap-6 items-start ' +
className +
- (settingHasChanged
- ? ' border-0 border-l-2 -ml-0.5 border-energy-50 dark:border-energy-20'
- : '')
+ (settingHasChanged ? ' border-0 border-l-2 -ml-0.5 border-primary' : '')
}
>
@@ -607,17 +605,14 @@ function SettingsTabButton(props: SettingsTabButtonProps) {
{text}
diff --git a/tailwind.config.js b/tailwind.config.js
index 8974e35b1..3dd6bc0fa 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -32,6 +32,7 @@ module.exports = {
theme: {
extend: {
colors: {
+ primary: `oklch(var(--_primary) /
)`,
...themeColors,
},
fontFamily: {