zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Application Layout Framework (#1732)

Browse source 
* Initial library setup

* Add docblocks

* Some cleanup

* New storybook

* Playing around

* Remove silly test, use for...in

* Memo

* Memo

* Add hooks example

* Tweak colors, bit of cleanup

* Improve macro handling

* Add some more examples

* Rename for better diff

* Cleanup

* Add nested context example

* Add todo

* Less break more perf

* Buttons, you get the idea

* Fix test

* Remove temp colors

* Add a few more common macros

* Docs

* Perf improvements

* Alf go brrrr

* Update breakpoint handling

* I think it'll work

* Better naming, better code

* Fix typo

* Some renaming

* More complete pass at Tailwind naming

* Build out storybook

* Playing around with curves

* Revert "Playing around with curves"

This reverts commit 6b0e0e5c9d842a2d9af31b53affe2f6291c3fa0d.

* Smooth brain

* Remove outdated docs

* Some docs, fix line-height values, export tokens
This commit is contained in:
Eric Bailey 2024-01-08 19:43:56 -06:00 • committed by GitHub
parent 0ee0554b86
commit a5b474895a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 1793 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

108
src/alf/themes.ts Normal file
View file

@ -0,0 +1,108 @@
import * as tokens from '#/alf/tokens'
import type {Mutable} from '#/alf/types'
export type ThemeName = 'light' | 'dark'
export type ReadonlyTheme = typeof light
export type Theme = Mutable<ReadonlyTheme>
export type Palette = {
primary: string
positive: string
negative: string
}
export const lightPalette: Palette = {
primary: tokens.color.blue_500,
positive: tokens.color.green_500,
negative: tokens.color.red_500,
} as const
export const darkPalette: Palette = {
primary: tokens.color.blue_500,
positive: tokens.color.green_400,
negative: tokens.color.red_400,
} as const
export const light = {
palette: lightPalette,
atoms: {
text: {
color: tokens.color.gray_1000,
},
text_contrast_700: {
color: tokens.color.gray_700,
},
text_contrast_500: {
color: tokens.color.gray_500,
},
text_inverted: {
color: tokens.color.white,
},
bg: {
backgroundColor: tokens.color.white,
},
bg_contrast_100: {
backgroundColor: tokens.color.gray_100,
},
bg_contrast_200: {
backgroundColor: tokens.color.gray_200,
},
bg_contrast_300: {
backgroundColor: tokens.color.gray_300,
},
bg_positive: {
backgroundColor: tokens.color.green_500,
},
bg_negative: {
backgroundColor: tokens.color.red_400,
},
border: {
borderColor: tokens.color.gray_200,
},
border_contrast_500: {
borderColor: tokens.color.gray_500,
},
},
}
export const dark: Theme = {
palette: darkPalette,
atoms: {
text: {
color: tokens.color.white,
},
text_contrast_700: {
color: tokens.color.gray_300,
},
text_contrast_500: {
color: tokens.color.gray_500,
},
text_inverted: {
color: tokens.color.gray_1000,
},
bg: {
backgroundColor: tokens.color.gray_1000,
},
bg_contrast_100: {
backgroundColor: tokens.color.gray_900,
},
bg_contrast_200: {
backgroundColor: tokens.color.gray_800,
},
bg_contrast_300: {
backgroundColor: tokens.color.gray_700,
},
bg_positive: {
backgroundColor: tokens.color.green_400,
},
bg_negative: {
backgroundColor: tokens.color.red_400,
},
border: {
borderColor: tokens.color.gray_800,
},
border_contrast_500: {
borderColor: tokens.color.gray_500,
},
},
}