diff --git a/apps/mobile-rn/src/navigation/TabNavigator.tsx b/apps/mobile-rn/src/navigation/TabNavigator.tsx
index 8190654..0a9f235 100644
--- a/apps/mobile-rn/src/navigation/TabNavigator.tsx
+++ b/apps/mobile-rn/src/navigation/TabNavigator.tsx
@@ -60,7 +60,7 @@ export default function TabNavigator(): React.ReactElement {
paddingBottom: 20,
paddingTop: 8,
},
- tabBarActiveTintColor: d3roNativePalette.accent.amber,
+ tabBarActiveTintColor: d3roNativePalette.accent.main,
tabBarInactiveTintColor: d3roNativePalette.text.muted,
tabBarLabelStyle: {
fontFamily: MONO,
@@ -132,10 +132,10 @@ const fabStyles = StyleSheet.create({
width: 56,
height: 56,
borderRadius: 28,
- backgroundColor: d3roNativePalette.accent.amber,
+ backgroundColor: d3roNativePalette.accent.main,
justifyContent: 'center',
alignItems: 'center',
- shadowColor: d3roNativePalette.accent.amber,
+ shadowColor: d3roNativePalette.accent.main,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.4,
shadowRadius: 10,
diff --git a/apps/mobile-rn/src/screens/HistoryScreen.tsx b/apps/mobile-rn/src/screens/HistoryScreen.tsx
index b00198f..01b3995 100644
--- a/apps/mobile-rn/src/screens/HistoryScreen.tsx
+++ b/apps/mobile-rn/src/screens/HistoryScreen.tsx
@@ -70,7 +70,7 @@ export default function HistoryScreen(): React.ReactElement {
if (loading) {
return (
-
+
)
}
@@ -110,7 +110,7 @@ export default function HistoryScreen(): React.ReactElement {
{ setRefreshing(true); void load() }}
- tintColor={d3roNativePalette.accent.amber}
+ tintColor={d3roNativePalette.accent.main}
/>
}
ListEmptyComponent={
@@ -247,7 +247,7 @@ const styles = StyleSheet.create({
cardHeaderLeft: { flexDirection: 'row', alignItems: 'center' },
timeLabel: { marginLeft: 8 },
wordBadge: {
- backgroundColor: d3roNativePalette.accent.amberDim,
+ backgroundColor: d3roNativePalette.accent.dim,
paddingHorizontal: 8,
paddingVertical: 2,
borderRadius: 4
diff --git a/apps/mobile-rn/src/screens/LoginScreen.tsx b/apps/mobile-rn/src/screens/LoginScreen.tsx
index b2d9e4b..1936409 100644
--- a/apps/mobile-rn/src/screens/LoginScreen.tsx
+++ b/apps/mobile-rn/src/screens/LoginScreen.tsx
@@ -293,11 +293,11 @@ const styles = StyleSheet.create({
fontFamily: Platform.OS === 'ios' ? 'System' : 'Roboto'
},
loginBtn: {
- backgroundColor: P.accent.amber,
+ backgroundColor: P.accent.main,
borderRadius: 12,
paddingVertical: 14,
alignItems: 'center',
- shadowColor: P.accent.amber,
+ shadowColor: P.accent.main,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.3,
shadowRadius: 10,
@@ -315,7 +315,7 @@ const styles = StyleSheet.create({
warningBox: {
borderWidth: 1,
borderColor: 'rgba(255,92,53,0.3)',
- backgroundColor: P.accent.amberDim,
+ backgroundColor: P.accent.dim,
padding: 12,
borderRadius: 8,
marginTop: 8
diff --git a/apps/mobile-rn/src/screens/RecordScreen.tsx b/apps/mobile-rn/src/screens/RecordScreen.tsx
index d62778b..0fb5e7b 100644
--- a/apps/mobile-rn/src/screens/RecordScreen.tsx
+++ b/apps/mobile-rn/src/screens/RecordScreen.tsx
@@ -197,7 +197,7 @@ export default function RecordScreen(): React.ReactElement {
)}
{state === 'processing' && (
-
+
)}
{transcript !== '' && state === 'done' && (
@@ -284,8 +284,8 @@ const styles = StyleSheet.create({
},
errorBox: {
borderWidth: 1,
- borderColor: d3roNativePalette.accent.amber,
- backgroundColor: d3roNativePalette.accent.amberDim,
+ borderColor: d3roNativePalette.accent.main,
+ backgroundColor: d3roNativePalette.accent.dim,
padding: 10,
borderRadius: 6,
width: '100%'
diff --git a/apps/mobile-rn/src/screens/SettingsScreen.tsx b/apps/mobile-rn/src/screens/SettingsScreen.tsx
index 5691d4e..e43052d 100644
--- a/apps/mobile-rn/src/screens/SettingsScreen.tsx
+++ b/apps/mobile-rn/src/screens/SettingsScreen.tsx
@@ -99,7 +99,7 @@ export default function SettingsScreen(): React.ReactElement {
value={true}
trackColor={{
false: d3roNativePalette.bg.inset,
- true: d3roNativePalette.accent.amber
+ true: d3roNativePalette.accent.main
}}
thumbColor="#ffffff"
/>
@@ -121,7 +121,7 @@ export default function SettingsScreen(): React.ReactElement {
value={true}
trackColor={{
false: d3roNativePalette.bg.inset,
- true: d3roNativePalette.accent.amber
+ true: d3roNativePalette.accent.main
}}
thumbColor="#ffffff"
/>
@@ -132,7 +132,7 @@ export default function SettingsScreen(): React.ReactElement {
value={true}
trackColor={{
false: d3roNativePalette.bg.inset,
- true: d3roNativePalette.accent.amber
+ true: d3roNativePalette.accent.main
}}
thumbColor="#ffffff"
/>
diff --git a/apps/mobile-rn/src/screens/TalkScreen.tsx b/apps/mobile-rn/src/screens/TalkScreen.tsx
index b72781b..5a0a631 100644
--- a/apps/mobile-rn/src/screens/TalkScreen.tsx
+++ b/apps/mobile-rn/src/screens/TalkScreen.tsx
@@ -164,7 +164,7 @@ const styles = StyleSheet.create({
},
userBubble: {
alignSelf: 'flex-end',
- backgroundColor: d3roNativePalette.accent.amberDim,
+ backgroundColor: d3roNativePalette.accent.dim,
borderWidth: 1,
borderColor: 'rgba(255, 92, 53, 0.3)',
borderTopRightRadius: 4
@@ -204,7 +204,7 @@ const styles = StyleSheet.create({
width: 32,
height: 32,
borderRadius: 16,
- backgroundColor: d3roNativePalette.accent.amberDim,
+ backgroundColor: d3roNativePalette.accent.dim,
borderWidth: 1,
borderColor: 'rgba(255, 92, 53, 0.3)',
justifyContent: 'center',
@@ -218,7 +218,7 @@ const styles = StyleSheet.create({
borderBottomWidth: 8,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
- borderBottomColor: d3roNativePalette.accent.amber
+ borderBottomColor: d3roNativePalette.accent.main
},
inputStatus: { paddingVertical: 4 }
})
diff --git a/apps/mobile/app/(tabs)/_layout.tsx b/apps/mobile/app/(tabs)/_layout.tsx
index ff8c260..88e884f 100644
--- a/apps/mobile/app/(tabs)/_layout.tsx
+++ b/apps/mobile/app/(tabs)/_layout.tsx
@@ -43,7 +43,7 @@ export default function TabsLayout(): React.ReactElement {
paddingBottom: 20,
paddingTop: 8
},
- tabBarActiveTintColor: d3roNativePalette.accent.amber,
+ tabBarActiveTintColor: d3roNativePalette.accent.main,
tabBarInactiveTintColor: d3roNativePalette.text.muted,
tabBarLabelStyle: {
fontFamily: MONO_FONT,
@@ -52,7 +52,7 @@ export default function TabsLayout(): React.ReactElement {
letterSpacing: 0.5
},
headerStyle: { backgroundColor: d3roNativePalette.bg.app },
- headerTintColor: d3roNativePalette.accent.amber,
+ headerTintColor: d3roNativePalette.accent.main,
headerTitleStyle: { fontWeight: '300', letterSpacing: 1, fontFamily: MONO_FONT },
headerShown: false
}}
@@ -129,10 +129,10 @@ const styles = StyleSheet.create({
width: 56,
height: 56,
borderRadius: 28,
- backgroundColor: d3roNativePalette.accent.amber,
+ backgroundColor: d3roNativePalette.accent.main,
justifyContent: 'center',
alignItems: 'center',
- shadowColor: d3roNativePalette.accent.amber,
+ shadowColor: d3roNativePalette.accent.main,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.4,
shadowRadius: 10,
diff --git a/apps/mobile/app/(tabs)/history.tsx b/apps/mobile/app/(tabs)/history.tsx
index efbf581..bf55046 100644
--- a/apps/mobile/app/(tabs)/history.tsx
+++ b/apps/mobile/app/(tabs)/history.tsx
@@ -70,7 +70,7 @@ export default function HistoryScreen(): React.ReactElement {
if (loading) {
return (
-
+
)
}
@@ -110,7 +110,7 @@ export default function HistoryScreen(): React.ReactElement {
{ setRefreshing(true); void load() }}
- tintColor={d3roNativePalette.accent.amber}
+ tintColor={d3roNativePalette.accent.main}
/>
}
ListEmptyComponent={
@@ -247,7 +247,7 @@ const styles = StyleSheet.create({
cardHeaderLeft: { flexDirection: 'row', alignItems: 'center' },
timeLabel: { marginLeft: 8 },
wordBadge: {
- backgroundColor: d3roNativePalette.accent.amberDim,
+ backgroundColor: d3roNativePalette.accent.dim,
paddingHorizontal: 8,
paddingVertical: 2,
borderRadius: 4
diff --git a/apps/mobile/app/(tabs)/record.tsx b/apps/mobile/app/(tabs)/record.tsx
index 243b86f..322bed5 100644
--- a/apps/mobile/app/(tabs)/record.tsx
+++ b/apps/mobile/app/(tabs)/record.tsx
@@ -181,7 +181,7 @@ export default function RecordScreen(): React.ReactElement {
)}
{state === 'processing' && (
-
+
)}
{transcript !== '' && state === 'done' && (
@@ -268,8 +268,8 @@ const styles = StyleSheet.create({
},
errorBox: {
borderWidth: 1,
- borderColor: d3roNativePalette.accent.amber,
- backgroundColor: d3roNativePalette.accent.amberDim,
+ borderColor: d3roNativePalette.accent.main,
+ backgroundColor: d3roNativePalette.accent.dim,
padding: 10,
borderRadius: 6,
width: '100%'
diff --git a/apps/mobile/app/(tabs)/settings.tsx b/apps/mobile/app/(tabs)/settings.tsx
index 4b2527d..9e4119e 100644
--- a/apps/mobile/app/(tabs)/settings.tsx
+++ b/apps/mobile/app/(tabs)/settings.tsx
@@ -98,7 +98,7 @@ export default function SettingsScreen(): React.ReactElement {
value={true}
trackColor={{
false: d3roNativePalette.bg.inset,
- true: d3roNativePalette.accent.amber
+ true: d3roNativePalette.accent.main
}}
thumbColor="#ffffff"
/>
@@ -120,7 +120,7 @@ export default function SettingsScreen(): React.ReactElement {
value={true}
trackColor={{
false: d3roNativePalette.bg.inset,
- true: d3roNativePalette.accent.amber
+ true: d3roNativePalette.accent.main
}}
thumbColor="#ffffff"
/>
@@ -131,7 +131,7 @@ export default function SettingsScreen(): React.ReactElement {
value={true}
trackColor={{
false: d3roNativePalette.bg.inset,
- true: d3roNativePalette.accent.amber
+ true: d3roNativePalette.accent.main
}}
thumbColor="#ffffff"
/>
diff --git a/apps/mobile/app/(tabs)/talk.tsx b/apps/mobile/app/(tabs)/talk.tsx
index 4f9cafe..d070108 100644
--- a/apps/mobile/app/(tabs)/talk.tsx
+++ b/apps/mobile/app/(tabs)/talk.tsx
@@ -164,7 +164,7 @@ const styles = StyleSheet.create({
},
userBubble: {
alignSelf: 'flex-end',
- backgroundColor: d3roNativePalette.accent.amberDim,
+ backgroundColor: d3roNativePalette.accent.dim,
borderWidth: 1,
borderColor: 'rgba(255, 92, 53, 0.3)',
borderTopRightRadius: 4
@@ -204,7 +204,7 @@ const styles = StyleSheet.create({
width: 32,
height: 32,
borderRadius: 16,
- backgroundColor: d3roNativePalette.accent.amberDim,
+ backgroundColor: d3roNativePalette.accent.dim,
borderWidth: 1,
borderColor: 'rgba(255, 92, 53, 0.3)',
justifyContent: 'center',
@@ -218,7 +218,7 @@ const styles = StyleSheet.create({
borderBottomWidth: 8,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
- borderBottomColor: d3roNativePalette.accent.amber
+ borderBottomColor: d3roNativePalette.accent.main
},
inputStatus: { paddingVertical: 4 }
})
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index 268be81..5eb0fd3 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout(): React.ReactElement {
diff --git a/apps/mobile/app/login.tsx b/apps/mobile/app/login.tsx
index 8a9428a..43f5a7b 100644
--- a/apps/mobile/app/login.tsx
+++ b/apps/mobile/app/login.tsx
@@ -274,11 +274,11 @@ const styles = StyleSheet.create({
fontFamily: Platform.OS === 'ios' ? 'System' : 'Roboto'
},
loginBtn: {
- backgroundColor: P.accent.amber,
+ backgroundColor: P.accent.main,
borderRadius: 12,
paddingVertical: 14,
alignItems: 'center',
- shadowColor: P.accent.amber,
+ shadowColor: P.accent.main,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.3,
shadowRadius: 10,
@@ -296,7 +296,7 @@ const styles = StyleSheet.create({
warningBox: {
borderWidth: 1,
borderColor: 'rgba(255,92,53,0.3)',
- backgroundColor: P.accent.amberDim,
+ backgroundColor: P.accent.dim,
padding: 12,
borderRadius: 8,
marginTop: 8
diff --git a/packages/ui-native/src/components/FilterChip.tsx b/packages/ui-native/src/components/FilterChip.tsx
index 6d1a239..93f0ba3 100644
--- a/packages/ui-native/src/components/FilterChip.tsx
+++ b/packages/ui-native/src/components/FilterChip.tsx
@@ -23,9 +23,9 @@ export function FilterChip({
onPress={onPress}
style={[
{
- backgroundColor: active ? d3roNativePalette.accent.amber : d3roNativePalette.bg.card,
+ backgroundColor: active ? d3roNativePalette.accent.main : d3roNativePalette.bg.card,
borderWidth: 1,
- borderColor: active ? d3roNativePalette.accent.amber : d3roNativePalette.border.default,
+ borderColor: active ? d3roNativePalette.accent.main : d3roNativePalette.border.default,
borderRadius: d3roNativeRadius.pill,
paddingHorizontal: 16,
paddingVertical: 6
diff --git a/packages/ui-native/src/components/Led.tsx b/packages/ui-native/src/components/Led.tsx
index aae30ca..75a3c27 100644
--- a/packages/ui-native/src/components/Led.tsx
+++ b/packages/ui-native/src/components/Led.tsx
@@ -11,7 +11,7 @@ export interface LedProps {
}
const COLOR_MAP: Record = {
- amber: d3roNativePalette.accent.amber,
+ amber: d3roNativePalette.accent.main,
green: d3roNativePalette.tag.green,
red: d3roNativePalette.tag.red,
orange: d3roNativePalette.tag.orange,
@@ -19,7 +19,7 @@ const COLOR_MAP: Record = {
}
export function Led({ color = 'amber', on = true, size = 8 }: LedProps): React.ReactElement {
- const c = COLOR_MAP[color] ?? d3roNativePalette.accent.amber
+ const c = COLOR_MAP[color] ?? d3roNativePalette.accent.main
const style: ViewStyle = {
width: size,
height: size,
diff --git a/packages/ui-native/src/components/PhosphorText.tsx b/packages/ui-native/src/components/PhosphorText.tsx
index 2dbd359..617072e 100644
--- a/packages/ui-native/src/components/PhosphorText.tsx
+++ b/packages/ui-native/src/components/PhosphorText.tsx
@@ -23,12 +23,12 @@ export function PhosphorText({
const isAmberVariant = variant === 'hero' || variant === 'title' || variant === 'value'
const resolvedColor: string = (() => {
- if (color === 'amber') return d3roNativePalette.accent.amber
+ if (color === 'amber') return d3roNativePalette.accent.main
if (color === 'primary') return d3roNativePalette.text.primary
if (color === 'secondary') return d3roNativePalette.text.secondary
if (color === 'label') return d3roNativePalette.text.label
if (color === 'muted') return d3roNativePalette.text.muted
- return isAmberVariant ? d3roNativePalette.accent.amber : d3roNativePalette.text.primary
+ return isAmberVariant ? d3roNativePalette.accent.main : d3roNativePalette.text.primary
})()
const baseStyle: TextStyle = {
@@ -37,7 +37,7 @@ export function PhosphorText({
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
...(isAmberVariant
? {
- textShadowColor: d3roNativePalette.accent.amberGlow,
+ textShadowColor: d3roNativePalette.accent.glow,
textShadowOffset: { width: 0, height: 0 },
textShadowRadius: 6
}
diff --git a/packages/ui-native/src/components/PhysicalButton.tsx b/packages/ui-native/src/components/PhysicalButton.tsx
index 4721495..90387d4 100644
--- a/packages/ui-native/src/components/PhysicalButton.tsx
+++ b/packages/ui-native/src/components/PhysicalButton.tsx
@@ -31,7 +31,7 @@ export function PhysicalButton({
const bgColor =
variant === 'primary'
- ? d3roNativePalette.accent.amber
+ ? d3roNativePalette.accent.main
: variant === 'danger'
? d3roNativePalette.tag.red
: 'transparent'
diff --git a/packages/ui-native/src/components/WaveBars.tsx b/packages/ui-native/src/components/WaveBars.tsx
index a0e114c..e6bc7d1 100644
--- a/packages/ui-native/src/components/WaveBars.tsx
+++ b/packages/ui-native/src/components/WaveBars.tsx
@@ -54,7 +54,7 @@ function WaveBar({ index, active }: { index: number; active: boolean }): React.R
style={{
width: 6,
height,
- backgroundColor: d3roNativePalette.accent.amber,
+ backgroundColor: d3roNativePalette.accent.main,
borderRadius: 3
}}
/>
diff --git a/packages/ui-native/src/theme.ts b/packages/ui-native/src/theme.ts
index 9636f40..65795f7 100644
--- a/packages/ui-native/src/theme.ts
+++ b/packages/ui-native/src/theme.ts
@@ -24,9 +24,9 @@ export const d3roNativePalette = {
muted: '#71717a'
},
accent: {
- amber: '#ff5c35',
- amberDim: 'rgba(255, 92, 53, 0.15)',
- amberGlow: 'rgba(255, 92, 53, 0.6)',
+ main: '#ff5c35',
+ dim: 'rgba(255, 92, 53, 0.15)',
+ glow: 'rgba(255, 92, 53, 0.6)',
green: '#4ade80',
greenGlow: 'rgba(74, 222, 128, 0.6)'
},