acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Dim mode

Browse Source
This commit is contained in:
Eric Bailey
2024-01-12 13:38:44 -06:00
parent a33fa45b74
commit 45c807b83b
7 changed files with 71 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/themes.ts
+61 -15
View File
@@ -1,15 +1,15 @@
import * as tokens from '#/alf/tokens'
import type {Mutable} from '#/alf/types'
export type ThemeName = 'light' | 'dark'
export type ThemeName = 'light' | 'dim' | 'dark'
export type ReadonlyTheme = typeof light
export type Theme = Mutable<ReadonlyTheme>
export type ReadonlyPalette = typeof lightPalette
export type Palette = Mutable<ReadonlyPalette>
export const lightPalette = {
white: tokens.color.white,
black: tokens.color.black,
white: '#FFFFFF',
black: '#080B12',
primary: tokens.color.blue_500,
positive: tokens.color.green_500,
negative: tokens.color.red_500,
@@ -28,8 +28,8 @@ export const lightPalette = {
} as const
export const darkPalette: Palette = {
white: tokens.color.white,
black: tokens.color.black,
white: '#FFFFFF',
black: '#080B12',
primary: tokens.color.blue_500,
positive: tokens.color.green_500,
negative: tokens.color.red_500,
@@ -64,10 +64,10 @@ export const light = {
color: lightPalette.contrast_400,
},
text_inverted: {
color: tokens.color.white,
color: lightPalette.white,
},
bg: {
backgroundColor: tokens.color.white,
backgroundColor: lightPalette.white,
},
bg_contrast_25: {
backgroundColor: lightPalette.contrast_25,
@@ -85,10 +85,56 @@ export const light = {
backgroundColor: lightPalette.contrast_300,
},
border: {
borderColor: tokens.color.gray_200,
borderColor: lightPalette.contrast_100,
},
border_contrast_500: {
borderColor: tokens.color.gray_500,
border_contrast: {
borderColor: lightPalette.contrast_400,
},
},
}
export const dim: Theme = {
name: 'dim',
palette: darkPalette,
atoms: {
text: {
color: darkPalette.white,
},
text_contrast_600: {
color: darkPalette.contrast_600,
},
text_contrast_500: {
color: darkPalette.contrast_500,
},
text_contrast_400: {
color: darkPalette.contrast_400,
},
text_inverted: {
color: darkPalette.contrast_900,
},
bg: {
backgroundColor: darkPalette.contrast_25,
},
bg_contrast_25: {
backgroundColor: darkPalette.contrast_50,
},
bg_contrast_50: {
backgroundColor: darkPalette.contrast_100,
},
bg_contrast_100: {
backgroundColor: darkPalette.contrast_200,
},
bg_contrast_200: {
backgroundColor: darkPalette.contrast_300,
},
bg_contrast_300: {
backgroundColor: darkPalette.contrast_400,
},
border: {
borderColor: darkPalette.contrast_50,
},
border_contrast: {
borderColor: darkPalette.contrast_300,
},
},
}
@@ -98,7 +144,7 @@ export const dark: Theme = {
palette: darkPalette,
atoms: {
text: {
color: tokens.color.white,
color: darkPalette.white,
},
text_contrast_600: {
color: darkPalette.contrast_600,
@@ -113,7 +159,7 @@ export const dark: Theme = {
color: tokens.color.gray_900,
},
bg: {
backgroundColor: tokens.color.gray_900,
backgroundColor: darkPalette.black,
},
bg_contrast_25: {
backgroundColor: darkPalette.contrast_25,
@@ -131,10 +177,10 @@ export const dark: Theme = {
backgroundColor: darkPalette.contrast_300,
},
border: {
borderColor: tokens.color.gray_800,
borderColor: darkPalette.contrast_50,
},
border_contrast_500: {
borderColor: tokens.color.gray_500,
border_contrast: {
borderColor: darkPalette.contrast_300,
},
},
}
src/alf/tokens.ts
-3
View File
@@ -1,7 +1,4 @@
export const color = {
white: '#FFFFFF',
black: '#000000',
gray_25: `#FCFCFD`,
gray_50: `#F9FAFB`,
gray_100: `#F3F4F6`,
src/view/com/forms/InputDate/index.android.tsx
+2 -2
View File
@@ -52,7 +52,7 @@ export function InputDate({
if (focused) {
input.push({
borderColor: t.atoms.border_contrast_500.borderColor,
borderColor: t.atoms.border_contrast.borderColor,
})
if (hasError) {
@@ -130,7 +130,7 @@ export function InputDate({
]}>
<Logo
style={[
{color: t.atoms.border_contrast_500.borderColor},
{color: t.atoms.border_contrast.borderColor},
{
width: 20,
pointerEvents: 'none',
src/view/com/forms/InputDate/index.web.tsx
+2 -2
View File
@@ -52,7 +52,7 @@ export function InputDate({
if (hovered || focused) {
input.push({
borderColor: t.atoms.border_contrast_500.borderColor,
borderColor: t.atoms.border_contrast.borderColor,
})
if (hasError) {
@@ -138,7 +138,7 @@ export function InputDate({
]}>
<Logo
style={[
{color: t.atoms.border_contrast_500.borderColor},
{color: t.atoms.border_contrast.borderColor},
{
width: 20,
pointerEvents: 'none',
src/view/com/forms/InputText.tsx
+2 -2
View File
@@ -71,7 +71,7 @@ export function InputText({
if (hovered || focused) {
input.push({
borderColor: t.atoms.border_contrast_500.borderColor,
borderColor: t.atoms.border_contrast.borderColor,
})
if (hasError) {
@@ -155,7 +155,7 @@ export function InputText({
]}>
<Icon
style={[
{color: t.atoms.border_contrast_500.borderColor},
{color: t.atoms.border_contrast.borderColor},
{
width: 20,
pointerEvents: 'none',
src/view/screens/Storybook/Theming.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export function Theming() {
theme.atoms.text_contrast_400
</Text>
<View style={[a.flex_1, t.atoms.border_contrast_500, a.border_t]} />
<View style={[a.flex_1, t.atoms.border_contrast, a.border_t]} />
<View style={[a.w_full, a.gap_md]}>
<View style={[t.atoms.bg, a.justify_center, a.p_md]}>
src/view/screens/Storybook/index.tsx
+3
View File
@@ -52,6 +52,9 @@ export function Storybook() {
<ThemeProvider theme="light">
<Theming />
</ThemeProvider>
<ThemeProvider theme="dim">
<Theming />
</ThemeProvider>
<ThemeProvider theme="dark">
<Theming />
</ThemeProvider>