Dim mode

src/alf/themes.ts

@@ -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,
+  white: '#FFFFFF',
-  black: tokens.color.black,
+  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,
+  white: '#FFFFFF',
-  black: tokens.color.black,
+  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: {
+    border_contrast: {
-      borderColor: tokens.color.gray_500,
+      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: {
+    border_contrast: {
-      borderColor: tokens.color.gray_500,
+      borderColor: darkPalette.contrast_300,
     },
   },
 }

src/alf/tokens.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -52,6 +52,9 @@ export function Storybook() {
           <ThemeProvider theme="light">
             <Theming />
           </ThemeProvider>
+          <ThemeProvider theme="dim">
+            <Theming />
+          </ThemeProvider>
           <ThemeProvider theme="dark">
             <Theming />
           </ThemeProvider>