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

Merge remote-tracking branch 'origin/main' into 3p-moderators

Browse Source 
* origin/main: (33 commits)
  Improved server selector during account creation and signin (#2840)
  remove line height from text input for composer on ios (#2844)
  Add follow button to highlighted post (#2828)
  Cleaning up old codes pt_BR (#2809)
  Fix wrong translations in zh-CN localization  (#2812)
  Adjust Japanese translation (#2814)
  Update ja messages.po (#2821)
  change follow to follow all when !== 20 (#2831)
  ios adult content link fix 🤦 (#2845)
  improves build.md completeness (#2835)
  increase stroke width for active hashtag icon (#2829)
  Update `blueskyweb.xyz` links to `bsky.social` (#2830)
  eas nightlies (#2826)
  Always show post dropdown button at the bottom of the post, add share button to highlighted post (#2646)
  Measure header layout reliably (#2817)
  Round line height (#2824)
  Design system tweaks (#2822)
  Fix layout calculations (#2816)
  Fix flashes and jumps when opening profile (#2815)
  Show text cursor on web bio (#2813)
  ...
This commit is contained in:
Eric Bailey
2024-02-12 15:43:33 -06:00
parent 937b66e3b5 ba7463cadf
commit 9075c501ec
90 changed files with 1781 additions and 1707 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/themes.ts
+162 -40
View File
@@ -73,19 +73,19 @@ export const darkPalette: Palette = {
white: tokens.color.gray_0,
black: tokens.color.trueBlack,
contrast_25: tokens.color.gray_975,
contrast_50: tokens.color.gray_950,
contrast_100: tokens.color.gray_900,
contrast_200: tokens.color.gray_800,
contrast_300: tokens.color.gray_700,
contrast_400: tokens.color.gray_600,
contrast_500: tokens.color.gray_500,
contrast_600: tokens.color.gray_400,
contrast_700: tokens.color.gray_300,
contrast_800: tokens.color.gray_200,
contrast_900: tokens.color.gray_100,
contrast_950: tokens.color.gray_50,
contrast_975: tokens.color.gray_25,
contrast_25: tokens.color.gray_1000,
contrast_50: tokens.color.gray_975,
contrast_100: tokens.color.gray_950,
contrast_200: tokens.color.gray_900,
contrast_300: tokens.color.gray_800,
contrast_400: tokens.color.gray_700,
contrast_500: tokens.color.gray_600,
contrast_600: tokens.color.gray_500,
contrast_700: tokens.color.gray_400,
contrast_800: tokens.color.gray_300,
contrast_900: tokens.color.gray_200,
contrast_950: tokens.color.gray_100,
contrast_975: tokens.color.gray_50,
primary_25: tokens.color.blue_25,
primary_50: tokens.color.blue_50,
@@ -133,6 +133,20 @@ export const darkPalette: Palette = {
export const dimPalette: Palette = {
...darkPalette,
black: tokens.color.gray_1000,
contrast_25: tokens.color.gray_975,
contrast_50: tokens.color.gray_950,
contrast_100: tokens.color.gray_900,
contrast_200: tokens.color.gray_800,
contrast_300: tokens.color.gray_700,
contrast_400: tokens.color.gray_600,
contrast_500: tokens.color.gray_500,
contrast_600: tokens.color.gray_400,
contrast_700: tokens.color.gray_300,
contrast_800: tokens.color.gray_200,
contrast_900: tokens.color.gray_100,
contrast_950: tokens.color.gray_50,
contrast_975: tokens.color.gray_25,
} as const
export const light = {
@@ -142,17 +156,14 @@ export const light = {
text: {
color: lightPalette.black,
},
text_contrast_700: {
text_contrast_low: {
color: lightPalette.contrast_400,
},
text_contrast_medium: {
color: lightPalette.contrast_700,
},
text_contrast_600: {
color: lightPalette.contrast_600,
},
text_contrast_500: {
color: lightPalette.contrast_500,
},
text_contrast_400: {
color: lightPalette.contrast_400,
text_contrast_high: {
color: lightPalette.contrast_900,
},
text_inverted: {
color: lightPalette.white,
@@ -175,11 +186,38 @@ export const light = {
bg_contrast_300: {
backgroundColor: lightPalette.contrast_300,
},
border: {
bg_contrast_400: {
backgroundColor: lightPalette.contrast_400,
},
bg_contrast_500: {
backgroundColor: lightPalette.contrast_500,
},
bg_contrast_600: {
backgroundColor: lightPalette.contrast_600,
},
bg_contrast_700: {
backgroundColor: lightPalette.contrast_700,
},
bg_contrast_800: {
backgroundColor: lightPalette.contrast_800,
},
bg_contrast_900: {
backgroundColor: lightPalette.contrast_900,
},
bg_contrast_950: {
backgroundColor: lightPalette.contrast_950,
},
bg_contrast_975: {
backgroundColor: lightPalette.contrast_975,
},
border_contrast_low: {
borderColor: lightPalette.contrast_100,
},
border_contrast: {
borderColor: lightPalette.contrast_400,
border_contrast_medium: {
borderColor: lightPalette.contrast_200,
},
border_contrast_high: {
borderColor: lightPalette.contrast_300,
},
shadow_sm: {
...atoms.shadow_sm,
@@ -203,17 +241,14 @@ export const dark: Theme = {
text: {
color: darkPalette.white,
},
text_contrast_700: {
text_contrast_low: {
color: darkPalette.contrast_400,
},
text_contrast_medium: {
color: darkPalette.contrast_700,
},
text_contrast_600: {
color: darkPalette.contrast_600,
},
text_contrast_500: {
color: darkPalette.contrast_500,
},
text_contrast_400: {
color: darkPalette.contrast_400,
text_contrast_high: {
color: darkPalette.contrast_900,
},
text_inverted: {
color: darkPalette.black,
@@ -222,24 +257,51 @@ export const dark: Theme = {
backgroundColor: darkPalette.black,
},
bg_contrast_25: {
backgroundColor: darkPalette.contrast_50,
backgroundColor: darkPalette.contrast_25,
},
bg_contrast_50: {
backgroundColor: darkPalette.contrast_100,
backgroundColor: darkPalette.contrast_50,
},
bg_contrast_100: {
backgroundColor: darkPalette.contrast_200,
backgroundColor: darkPalette.contrast_100,
},
bg_contrast_200: {
backgroundColor: darkPalette.contrast_300,
backgroundColor: darkPalette.contrast_200,
},
bg_contrast_300: {
backgroundColor: darkPalette.contrast_300,
},
bg_contrast_400: {
backgroundColor: darkPalette.contrast_400,
},
border: {
bg_contrast_500: {
backgroundColor: darkPalette.contrast_500,
},
bg_contrast_600: {
backgroundColor: darkPalette.contrast_600,
},
bg_contrast_700: {
backgroundColor: darkPalette.contrast_700,
},
bg_contrast_800: {
backgroundColor: darkPalette.contrast_800,
},
bg_contrast_900: {
backgroundColor: darkPalette.contrast_900,
},
bg_contrast_950: {
backgroundColor: darkPalette.contrast_950,
},
bg_contrast_975: {
backgroundColor: darkPalette.contrast_975,
},
border_contrast_low: {
borderColor: darkPalette.contrast_100,
},
border_contrast: {
border_contrast_medium: {
borderColor: darkPalette.contrast_200,
},
border_contrast_high: {
borderColor: darkPalette.contrast_300,
},
shadow_sm: {
@@ -265,11 +327,71 @@ export const dim: Theme = {
name: 'dim',
atoms: {
...dark.atoms,
text: {
color: dimPalette.white,
},
text_contrast_low: {
color: dimPalette.contrast_400,
},
text_contrast_medium: {
color: dimPalette.contrast_700,
},
text_contrast_high: {
color: dimPalette.contrast_900,
},
text_inverted: {
color: dimPalette.black,
},
bg: {
backgroundColor: dimPalette.black,
},
bg_contrast_25: {
backgroundColor: dimPalette.contrast_25,
},
bg_contrast_50: {
backgroundColor: dimPalette.contrast_50,
},
bg_contrast_100: {
backgroundColor: dimPalette.contrast_100,
},
bg_contrast_200: {
backgroundColor: dimPalette.contrast_200,
},
bg_contrast_300: {
backgroundColor: dimPalette.contrast_300,
},
bg_contrast_400: {
backgroundColor: dimPalette.contrast_400,
},
bg_contrast_500: {
backgroundColor: dimPalette.contrast_500,
},
bg_contrast_600: {
backgroundColor: dimPalette.contrast_600,
},
bg_contrast_700: {
backgroundColor: dimPalette.contrast_700,
},
bg_contrast_800: {
backgroundColor: dimPalette.contrast_800,
},
bg_contrast_900: {
backgroundColor: dimPalette.contrast_900,
},
bg_contrast_950: {
backgroundColor: dimPalette.contrast_950,
},
bg_contrast_975: {
backgroundColor: dimPalette.contrast_975,
},
border_contrast_low: {
borderColor: dimPalette.contrast_100,
},
border_contrast_medium: {
borderColor: dimPalette.contrast_200,
},
border_contrast_high: {
borderColor: dimPalette.contrast_300,
},
},
}
src/alf/tokens.ts
+7 -7
View File
@@ -13,13 +13,13 @@ export const color = {
gray_300: `hsl(${BLUE_HUE}, 20%, 70%)`,
gray_400: `hsl(${BLUE_HUE}, 20%, 60%)`,
gray_500: `hsl(${BLUE_HUE}, 20%, 50%)`,
gray_600: `hsl(${BLUE_HUE}, 20%, 42%)`,
gray_700: `hsl(${BLUE_HUE}, 20%, 34%)`,
gray_800: `hsl(${BLUE_HUE}, 20%, 26%)`,
gray_900: `hsl(${BLUE_HUE}, 20%, 18%)`,
gray_950: `hsl(${BLUE_HUE}, 20%, 10%)`,
gray_975: `hsl(${BLUE_HUE}, 20%, 7%)`,
gray_1000: `hsl(${BLUE_HUE}, 20%, 4%)`,
gray_600: `hsl(${BLUE_HUE}, 24%, 42%)`,
gray_700: `hsl(${BLUE_HUE}, 24%, 34%)`,
gray_800: `hsl(${BLUE_HUE}, 28%, 26%)`,
gray_900: `hsl(${BLUE_HUE}, 28%, 18%)`,
gray_950: `hsl(${BLUE_HUE}, 28%, 10%)`,
gray_975: `hsl(${BLUE_HUE}, 28%, 7%)`,
gray_1000: `hsl(${BLUE_HUE}, 28%, 4%)`,
blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`,
blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`,