Skip to content

Commit 1702f26

Browse files
HaakonSvaneHaakonSvane
authored
chore: enable dark mode for new color tokens (#86)
1 parent e5909f5 commit 1702f26

47 files changed

Lines changed: 775 additions & 1308 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/storybook/app/(tabs)/_layout.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1-
import { Icon, IconProps } from "@equinor/eds-mobile-components";
1+
import { Icon, IconProps, useToken } from "@equinor/eds-mobile-components";
22
import { Tabs } from "expo-router";
33

44
export default function TabLayout() {
5+
const { newColors } = useToken();
6+
57
return (
68
<Tabs
79
screenOptions={{
8-
tabBarActiveTintColor: "#007079",
9-
tabBarInactiveTintColor: "#6F6F6F",
10+
tabBarActiveTintColor:
11+
newColors.Bg.Accent["Fill Emphasis"].Active,
12+
tabBarInactiveTintColor:
13+
newColors.Bg.Accent["Fill Muted"].Default,
1014
headerShown: false,
1115
}}
1216
>

‎apps/storybook/app/(tabs)/components/_layout.tsx‎

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,33 @@
1-
import { Button } from "@equinor/eds-mobile-components";
2-
import { Stack, useRouter } from "expo-router";
3-
4-
function BackButton() {
5-
const router = useRouter();
6-
return (
7-
<Button.Icon
8-
name="chevron-left"
9-
variant="ghost"
10-
onPress={() => router.back()}
11-
/>
12-
);
13-
}
1+
import { ColorSchemeButton } from "@/components/ColorSchemeButton";
2+
import { Stack } from "expo-router";
143

154
export default function ComponentsLayout() {
165
return (
176
<Stack
187
screenOptions={{
19-
headerTintColor: "#007079",
20-
headerBackVisible: false,
21-
headerLeft: () => <BackButton />,
22-
animation: "slide_from_right",
23-
headerShadowVisible: false,
8+
headerTransparent: true,
9+
headerBlurEffect: "none",
10+
headerLargeTitle: true,
11+
headerLargeTitleShadowVisible: true,
12+
headerLargeTitleStyle: { fontFamily: "Equinor-Bold" },
13+
headerTitleStyle: {
14+
fontFamily: "Equinor-Bold",
15+
},
16+
headerRight: () => <ColorSchemeButton />,
2417
}}
2518
>
2619
<Stack.Screen
2720
name="index"
2821
options={{
2922
title: "Components",
30-
headerLeft: () => null,
3123
}}
3224
/>
3325
<Stack.Screen name="accordion" options={{ title: "Accordion" }} />
3426
<Stack.Screen
3527
name="autocomplete"
3628
options={{ title: "Autocomplete" }}
3729
/>
38-
<Stack.Screen name="buttons" options={{ title: "Buttons" }} />
30+
<Stack.Screen name="button" options={{ title: "Button" }} />
3931
<Stack.Screen name="cell" options={{ title: "Cell" }} />
4032
<Stack.Screen name="cell-detail" options={{ title: "Detail" }} />
4133
<Stack.Screen name="chips" options={{ title: "Chips" }} />

‎apps/storybook/app/(tabs)/components/accordion.tsx‎

Lines changed: 92 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
basicAccordion,
44
chevronAndDisabled,
55
} from "@/codeSnippets/accordion";
6+
import { Section } from "@/components/Section";
67
import { useCodeSnippet } from "@/hooks/useCodeSnippet";
78
import { Accordion, Radio, Typography } from "@equinor/eds-mobile-components";
89
import { useState } from "react";
@@ -13,146 +14,128 @@ export default function AccordionScreen() {
1314
const { ViewCode, CodeSnippetDialog } = useCodeSnippet();
1415

1516
return (
16-
<ScrollView style={styles.container}>
17-
<View style={styles.section}>
18-
<Typography variant="h5">Accordion</Typography>
19-
<Typography variant="p">
17+
<ScrollView contentInsetAdjustmentBehavior="automatic">
18+
<Section>
19+
<Typography>
2020
Accordions tuck content away until it&apos;s needed —
2121
perfect for keeping screens tidy while still giving users
2222
access to all the details.
2323
</Typography>
24-
</View>
24+
</Section>
2525

26-
<View style={styles.section}>
27-
<Typography variant="h6">Basic Accordion</Typography>
28-
<Typography variant="p">
26+
<Section title="Basic Accordion">
27+
<Typography>
2928
Tap to expand, tap again to collapse. Simple! Works well for
3029
FAQs, settings, or any content you want to group together.
3130
</Typography>
32-
<Accordion>
33-
<Accordion.Item title="First Item">
34-
<Typography variant="p">
35-
This is the content of the first accordion item. You
36-
can put any content here.
37-
</Typography>
38-
</Accordion.Item>
31+
</Section>
3932

40-
<Accordion.Item title="Second Item">
41-
<Typography variant="p">
42-
This accordion demonstrates a list of items:
43-
</Typography>
44-
<View style={styles.list}>
45-
<Typography variant="p">
46-
• First list item
47-
</Typography>
48-
<Typography variant="p">
49-
• Second list item
50-
</Typography>
51-
<Typography variant="p">
52-
• Third list item
53-
</Typography>
54-
<Typography variant="p">
55-
• Fourth list item
56-
</Typography>
57-
</View>
58-
</Accordion.Item>
33+
<Accordion>
34+
<Accordion.Item title="First Item">
35+
<Typography>
36+
This is the content of the first accordion item. You can
37+
put any content here.
38+
</Typography>
39+
</Accordion.Item>
5940

60-
<Accordion.Item title="Third Item">
61-
<Typography variant="p">
62-
You can also have a group of radio buttons within
63-
the accordion
64-
</Typography>
65-
<View style={styles.radioGroup}>
66-
<View style={styles.radioOption}>
67-
<Radio
68-
checked={selectedOption === 0}
69-
onPress={() => setSelectedOption(0)}
70-
color="primary"
71-
/>
72-
<Typography variant="p">Option 1</Typography>
73-
</View>
74-
<View style={styles.radioOption}>
75-
<Radio
76-
checked={selectedOption === 1}
77-
onPress={() => setSelectedOption(1)}
78-
color="primary"
79-
/>
80-
<Typography variant="p">Option 2</Typography>
81-
</View>
82-
<View style={styles.radioOption}>
83-
<Radio
84-
checked={selectedOption === 2}
85-
onPress={() => setSelectedOption(2)}
86-
color="primary"
87-
/>
88-
<Typography variant="p">Option 3</Typography>
89-
</View>
41+
<Accordion.Item title="Second Item">
42+
<Typography>
43+
This accordion demonstrates a list of items:
44+
</Typography>
45+
<View style={styles.list}>
46+
<Typography>• First list item</Typography>
47+
<Typography>• Second list item</Typography>
48+
<Typography>• Third list item</Typography>
49+
<Typography>• Fourth list item</Typography>
50+
</View>
51+
</Accordion.Item>
52+
53+
<Accordion.Item title="Third Item">
54+
<Typography>
55+
You can also have a group of radio buttons within the
56+
accordion
57+
</Typography>
58+
<View style={styles.radioGroup}>
59+
<View style={styles.radioOption}>
60+
<Radio
61+
checked={selectedOption === 0}
62+
onPress={() => setSelectedOption(0)}
63+
color="primary"
64+
/>
65+
<Typography>Option 1</Typography>
66+
</View>
67+
<View style={styles.radioOption}>
68+
<Radio
69+
checked={selectedOption === 1}
70+
onPress={() => setSelectedOption(1)}
71+
color="primary"
72+
/>
73+
<Typography>Option 2</Typography>
74+
</View>
75+
<View style={styles.radioOption}>
76+
<Radio
77+
checked={selectedOption === 2}
78+
onPress={() => setSelectedOption(2)}
79+
color="primary"
80+
/>
81+
<Typography>Option 3</Typography>
9082
</View>
91-
</Accordion.Item>
92-
</Accordion>
93-
<ViewCode title="Basic Accordion" code={basicAccordion} />
94-
</View>
83+
</View>
84+
</Accordion.Item>
85+
</Accordion>
86+
<ViewCode title="Basic Accordion" code={basicAccordion} />
9587

96-
<View style={styles.section}>
97-
<Typography variant="h6">
98-
Accordion with Default Open
99-
</Typography>
100-
<Typography variant="p">
88+
<Section title="Default open">
89+
<Typography>
10190
Sometimes you want content visible right away — just set it
10291
to open by default and users see it straight off.
10392
</Typography>
93+
</Section>
10494

105-
<Accordion>
106-
<Accordion.Item title="Expanded by Default" defaultOpen>
107-
<Typography variant="p">
108-
This item is expanded by default using the
109-
defaultOpen prop.
110-
</Typography>
111-
</Accordion.Item>
112-
</Accordion>
113-
<ViewCode
114-
title="Accordion with Default Open"
115-
code={accordionDefaultOpen}
116-
/>
117-
</View>
95+
<Accordion>
96+
<Accordion.Item title="Expanded by Default" defaultOpen>
97+
<Typography>
98+
This item is expanded by default using the defaultOpen
99+
prop.
100+
</Typography>
101+
</Accordion.Item>
102+
</Accordion>
103+
<ViewCode
104+
title="Accordion with Default Open"
105+
code={accordionDefaultOpen}
106+
/>
118107

119-
<View style={styles.section}>
120-
<Typography variant="h6">
121-
Chevron Position & Disabled Accordions
122-
</Typography>
108+
<Section title="Other options">
123109
<Typography variant="p">
124110
You can move the chevron to the right for a different
125111
layout. If some content isn&apos;t ready yet, disable the
126112
item to let users know.
127113
</Typography>
128-
<Accordion>
129-
<Accordion.Item title="Item A" chevronPosition="right">
130-
<Typography variant="p">Content for Item A</Typography>
131-
</Accordion.Item>
132-
</Accordion>
114+
</Section>
115+
<Accordion>
116+
<Accordion.Item title="Item A" chevronPosition="right">
117+
<Typography variant="p">Content for Item A</Typography>
118+
</Accordion.Item>
119+
</Accordion>
133120

134-
<Accordion>
135-
<Accordion.Item
136-
title="This accordion is disabled"
137-
chevronPosition="right"
138-
disabled
139-
/>
140-
</Accordion>
141-
<ViewCode
142-
title="Chevron Position & Disabled"
143-
code={chevronAndDisabled}
121+
<Accordion>
122+
<Accordion.Item
123+
title="This accordion is disabled"
124+
chevronPosition="right"
125+
disabled
144126
/>
145-
</View>
127+
</Accordion>
128+
<ViewCode
129+
title="Chevron Position & Disabled"
130+
code={chevronAndDisabled}
131+
/>
146132

147133
<CodeSnippetDialog />
148134
</ScrollView>
149135
);
150136
}
151137

152138
const styles = StyleSheet.create({
153-
container: {
154-
flex: 1,
155-
},
156139
section: {
157140
padding: 16,
158141
gap: 16,

‎apps/storybook/app/(tabs)/components/autocomplete.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,8 @@ export default function AutocompleteScreen() {
3030
const { ViewCode, CodeSnippetDialog } = useCodeSnippet();
3131

3232
return (
33-
<ScrollView style={styles.container}>
33+
<ScrollView contentInsetAdjustmentBehavior="automatic">
3434
<View style={styles.section}>
35-
<Typography variant="h5">Autocomplete</Typography>
3635
<Typography variant="p">
3736
Autocomplete helps users find and select from a list of
3837
options as they type. Ideal for long lists like countries,
@@ -95,9 +94,6 @@ export default function AutocompleteScreen() {
9594
}
9695

9796
const styles = StyleSheet.create({
98-
container: {
99-
flex: 1,
100-
},
10197
section: {
10298
padding: 16,
10399
gap: 16,

apps/storybook/app/(tabs)/components/buttons.tsx renamed to apps/storybook/app/(tabs)/components/button.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,8 @@ export default function ButtonsScreen() {
1414
const { ViewCode, CodeSnippetDialog } = useCodeSnippet();
1515

1616
return (
17-
<ScrollView style={styles.container}>
17+
<ScrollView contentInsetAdjustmentBehavior="automatic">
1818
<View style={styles.section}>
19-
<Typography variant="h5">Button</Typography>
2019
<Typography variant="p">
2120
Buttons let users take action with a single tap — submitting
2221
forms, triggering events, or navigating through your app.
@@ -143,9 +142,6 @@ export default function ButtonsScreen() {
143142
}
144143

145144
const styles = StyleSheet.create({
146-
container: {
147-
flex: 1,
148-
},
149145
section: {
150146
padding: 10,
151147
gap: 16,

0 commit comments

Comments
 (0)