From cc0dfa6cabffa6d640df191f5539946acb95725b Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 11 Sep 2025 13:44:27 -0500 Subject: [PATCH] WIP ALFing --- bskyogcard/package.json | 1 + bskyogcard/src/components/Post/index.tsx | 2 +- bskyogcard/src/components/PostEmbed.tsx | 2 +- bskyogcard/src/components/Text.tsx | 2 +- bskyogcard/src/theme/atoms.ts | 574 +---------------------- bskyogcard/yarn.lock | 60 ++- 6 files changed, 65 insertions(+), 576 deletions(-) diff --git a/bskyogcard/package.json b/bskyogcard/package.json index a390febb33..b0f0808b7e 100644 --- a/bskyogcard/package.json +++ b/bskyogcard/package.json @@ -12,6 +12,7 @@ "dependencies": { "@atproto/api": "^0.15.14", "@atproto/common": "^0.4.11", + "@bsky.app/alf": "^0.1.0", "@resvg/resvg-js": "^2.6.2", "express": "^4.19.2", "http-terminator": "^3.2.0", diff --git a/bskyogcard/src/components/Post/index.tsx b/bskyogcard/src/components/Post/index.tsx index 7a333b3d40..9fdc597bf2 100644 --- a/bskyogcard/src/components/Post/index.tsx +++ b/bskyogcard/src/components/Post/index.tsx @@ -97,7 +97,7 @@ export function Post({ - + {post.author.displayName || post.author.handle} {verification.isVerified && ( diff --git a/bskyogcard/src/components/PostEmbed.tsx b/bskyogcard/src/components/PostEmbed.tsx index 9e767dca9b..db552b2558 100644 --- a/bskyogcard/src/components/PostEmbed.tsx +++ b/bskyogcard/src/components/PostEmbed.tsx @@ -308,7 +308,7 @@ export function LinkEmbed({ right: a.p_md.padding, }, ]}> - GIF + GIF ) diff --git a/bskyogcard/src/components/Text.tsx b/bskyogcard/src/components/Text.tsx index 7370ee0913..37d13c293f 100644 --- a/bskyogcard/src/components/Text.tsx +++ b/bskyogcard/src/components/Text.tsx @@ -18,7 +18,7 @@ export function Text({ }, a.font_normal, a.leading_tight, - a.tracking_wide, + // a.tracking_wide, // 0.25 t.atoms.text, { fontFamily: FONT_FAMILY_DEF, diff --git a/bskyogcard/src/theme/atoms.ts b/bskyogcard/src/theme/atoms.ts index 1ad1bf5d0b..cae2cbe7f6 100644 --- a/bskyogcard/src/theme/atoms.ts +++ b/bskyogcard/src/theme/atoms.ts @@ -1,37 +1,10 @@ -import * as tokens from './tokens.js' +import {atoms as baseAtoms} from '@bsky.app/alf' export const atoms = { - block: { - display: 'block', - }, + ...baseAtoms, inline_block: { display: 'inline-block', }, - inline: { - display: 'inline', - }, - /* - * Positioning - */ - fixed: { - position: 'absolute', - }, - absolute: { - position: 'absolute', - }, - relative: { - position: 'relative', - }, - inset_0: { - top: 0, - left: 0, - right: 0, - bottom: 0, - }, - - overflow_hidden: { - overflow: 'hidden', - }, text_overflow_ellipsis: { textOverflow: 'ellipsis', }, @@ -54,547 +27,4 @@ export const atoms = { display: 'block', lineClamp: 4, }, - - /* - * Width - */ - w_full: { - width: '100%', - }, - max_w_full: { - maxWidth: '100%', - }, - h_full: { - height: '100%', - }, - h_full_vh: { - height: '100vh', - }, - max_h_full: { - maxHeight: '100%', - }, - - /* - * Theme-independent bg colors - */ - bg_transparent: { - backgroundColor: 'transparent', - }, - - /* - * Border radius - */ - rounded_2xs: { - borderRadius: tokens.borderRadius._2xs, - }, - rounded_xs: { - borderRadius: tokens.borderRadius.xs, - }, - rounded_sm: { - borderRadius: tokens.borderRadius.sm, - }, - rounded_md: { - borderRadius: tokens.borderRadius.md, - }, - rounded_lg: { - borderRadius: tokens.borderRadius.lg, - }, - rounded_full: { - borderRadius: tokens.borderRadius.full, - }, - - /* - * Flex - */ - gap_2xs: { - gap: tokens.space._2xs, - }, - gap_xs: { - gap: tokens.space.xs, - }, - gap_sm: { - gap: tokens.space.sm, - }, - gap_md: { - gap: tokens.space.md, - }, - gap_lg: { - gap: tokens.space.lg, - }, - gap_xl: { - gap: tokens.space.xl, - }, - gap_2xl: { - gap: tokens.space._2xl, - }, - gap_3xl: { - gap: tokens.space._3xl, - }, - gap_4xl: { - gap: tokens.space._4xl, - }, - gap_5xl: { - gap: tokens.space._5xl, - }, - flex: { - display: 'flex', - }, - flex_col: { - flexDirection: 'column', - }, - flex_row: { - flexDirection: 'row', - }, - flex_col_reverse: { - flexDirection: 'column-reverse', - }, - flex_row_reverse: { - flexDirection: 'row-reverse', - }, - flex_wrap: { - flexWrap: 'wrap', - }, - flex_nowrap: { - flexWrap: 'nowrap', - }, - flex_0: { - flex: '0 0 auto', - }, - flex_1: { - flex: 1, - }, - flex_grow: { - flexGrow: 1, - }, - flex_shrink: { - flexShrink: 1, - }, - flex_shrink_0: { - flexShrink: 0, - }, - justify_start: { - justifyContent: 'flex-start', - }, - justify_center: { - justifyContent: 'center', - }, - justify_between: { - justifyContent: 'space-between', - }, - justify_end: { - justifyContent: 'flex-end', - }, - align_center: { - alignItems: 'center', - }, - align_start: { - alignItems: 'flex-start', - }, - align_end: { - alignItems: 'flex-end', - }, - align_baseline: { - alignItems: 'baseline', - }, - align_stretch: { - alignItems: 'stretch', - }, - self_auto: { - alignSelf: 'auto', - }, - self_start: { - alignSelf: 'flex-start', - }, - self_end: { - alignSelf: 'flex-end', - }, - self_center: { - alignSelf: 'center', - }, - self_stretch: { - alignSelf: 'stretch', - }, - self_baseline: { - alignSelf: 'baseline', - }, - - /* - * Text - */ - text_left: { - textAlign: 'left', - }, - text_center: { - textAlign: 'center', - }, - text_right: { - textAlign: 'right', - }, - text_2xs: { - fontSize: tokens.fontSize._2xs, - letterSpacing: 0.25, - }, - text_xs: { - fontSize: tokens.fontSize.xs, - letterSpacing: 0.25, - }, - text_sm: { - fontSize: tokens.fontSize.sm, - letterSpacing: 0.25, - }, - text_md: { - fontSize: tokens.fontSize.md, - letterSpacing: 0.25, - }, - text_lg: { - fontSize: tokens.fontSize.lg, - letterSpacing: 0.25, - }, - text_xl: { - fontSize: tokens.fontSize.xl, - letterSpacing: 0.25, - }, - text_2xl: { - fontSize: tokens.fontSize._2xl, - letterSpacing: 0.25, - }, - text_3xl: { - fontSize: tokens.fontSize._3xl, - letterSpacing: 0.25, - }, - text_4xl: { - fontSize: tokens.fontSize._4xl, - letterSpacing: 0.25, - }, - text_5xl: { - fontSize: tokens.fontSize._5xl, - letterSpacing: 0.25, - }, - leading_tight: { - lineHeight: '1.15', - }, - leading_snug: { - lineHeight: '1.3', - }, - leading_normal: { - lineHeight: '1.5', - }, - tracking_normal: { - letterSpacing: 0, - }, - tracking_wide: { - letterSpacing: 0.25, - }, - font_normal: { - fontWeight: tokens.fontWeight.normal, - }, - font_semibold: { - fontWeight: tokens.fontWeight.semibold, - }, - font_bold: { - fontWeight: tokens.fontWeight.bold, - }, - font_heavy: { - fontWeight: tokens.fontWeight.heavy, - }, - italic: { - fontStyle: 'italic', - }, - mono: { - fontFamily: 'monospace', - }, - - /* - * Border - */ - border_0: { - borderWidth: '0px', - }, - border: { - borderWidth: '1px', - borderStyle: 'solid', - }, - border_t: { - borderTopWidth: '1px', - borderStyle: 'solid', - }, - border_b: { - borderBottomWidth: '1px', - borderStyle: 'solid', - }, - border_l: { - borderLeftWidth: '1px', - borderStyle: 'solid', - }, - border_r: { - borderRightWidth: '1px', - borderStyle: 'solid', - }, - - /* - * Padding - */ - p_0: { - padding: 0, - }, - p_2xs: { - padding: tokens.space._2xs, - }, - p_xs: { - padding: tokens.space.xs, - }, - p_sm: { - padding: tokens.space.sm, - }, - p_md: { - padding: tokens.space.md, - }, - p_lg: { - padding: tokens.space.lg, - }, - p_xl: { - padding: tokens.space.xl, - }, - p_2xl: { - padding: tokens.space._2xl, - }, - p_3xl: { - padding: tokens.space._3xl, - }, - p_4xl: { - padding: tokens.space._4xl, - }, - p_5xl: { - padding: tokens.space._5xl, - }, - px_0: { - paddingLeft: 0, - paddingRight: 0, - }, - px_2xs: { - paddingLeft: tokens.space._2xs, - paddingRight: tokens.space._2xs, - }, - px_xs: { - paddingLeft: tokens.space.xs, - paddingRight: tokens.space.xs, - }, - px_sm: { - paddingLeft: tokens.space.sm, - paddingRight: tokens.space.sm, - }, - px_md: { - paddingLeft: tokens.space.md, - paddingRight: tokens.space.md, - }, - px_lg: { - paddingLeft: tokens.space.lg, - paddingRight: tokens.space.lg, - }, - px_xl: { - paddingLeft: tokens.space.xl, - paddingRight: tokens.space.xl, - }, - px_2xl: { - paddingLeft: tokens.space._2xl, - paddingRight: tokens.space._2xl, - }, - px_3xl: { - paddingLeft: tokens.space._3xl, - paddingRight: tokens.space._3xl, - }, - px_4xl: { - paddingLeft: tokens.space._4xl, - paddingRight: tokens.space._4xl, - }, - px_5xl: { - paddingLeft: tokens.space._5xl, - paddingRight: tokens.space._5xl, - }, - py_0: { - paddingTop: 0, - paddingBottom: 0, - }, - py_2xs: { - paddingTop: tokens.space._2xs, - paddingBottom: tokens.space._2xs, - }, - py_xs: { - paddingTop: tokens.space.xs, - paddingBottom: tokens.space.xs, - }, - py_sm: { - paddingTop: tokens.space.sm, - paddingBottom: tokens.space.sm, - }, - py_md: { - paddingTop: tokens.space.md, - paddingBottom: tokens.space.md, - }, - py_lg: { - paddingTop: tokens.space.lg, - paddingBottom: tokens.space.lg, - }, - py_xl: { - paddingTop: tokens.space.xl, - paddingBottom: tokens.space.xl, - }, - py_2xl: { - paddingTop: tokens.space._2xl, - paddingBottom: tokens.space._2xl, - }, - py_3xl: { - paddingTop: tokens.space._3xl, - paddingBottom: tokens.space._3xl, - }, - py_4xl: { - paddingTop: tokens.space._4xl, - paddingBottom: tokens.space._4xl, - }, - py_5xl: { - paddingTop: tokens.space._5xl, - paddingBottom: tokens.space._5xl, - }, - pt_0: { - paddingTop: 0, - }, - pt_2xs: { - paddingTop: tokens.space._2xs, - }, - pt_xs: { - paddingTop: tokens.space.xs, - }, - pt_sm: { - paddingTop: tokens.space.sm, - }, - pt_md: { - paddingTop: tokens.space.md, - }, - pt_lg: { - paddingTop: tokens.space.lg, - }, - pt_xl: { - paddingTop: tokens.space.xl, - }, - pt_2xl: { - paddingTop: tokens.space._2xl, - }, - pt_3xl: { - paddingTop: tokens.space._3xl, - }, - pt_4xl: { - paddingTop: tokens.space._4xl, - }, - pt_5xl: { - paddingTop: tokens.space._5xl, - }, - pb_0: { - paddingBottom: 0, - }, - pb_2xs: { - paddingBottom: tokens.space._2xs, - }, - pb_xs: { - paddingBottom: tokens.space.xs, - }, - pb_sm: { - paddingBottom: tokens.space.sm, - }, - pb_md: { - paddingBottom: tokens.space.md, - }, - pb_lg: { - paddingBottom: tokens.space.lg, - }, - pb_xl: { - paddingBottom: tokens.space.xl, - }, - pb_2xl: { - paddingBottom: tokens.space._2xl, - }, - pb_3xl: { - paddingBottom: tokens.space._3xl, - }, - pb_4xl: { - paddingBottom: tokens.space._4xl, - }, - pb_5xl: { - paddingBottom: tokens.space._5xl, - }, - pl_0: { - paddingLeft: 0, - }, - pl_2xs: { - paddingLeft: tokens.space._2xs, - }, - pl_xs: { - paddingLeft: tokens.space.xs, - }, - pl_sm: { - paddingLeft: tokens.space.sm, - }, - pl_md: { - paddingLeft: tokens.space.md, - }, - pl_lg: { - paddingLeft: tokens.space.lg, - }, - pl_xl: { - paddingLeft: tokens.space.xl, - }, - pl_2xl: { - paddingLeft: tokens.space._2xl, - }, - pl_3xl: { - paddingLeft: tokens.space._3xl, - }, - pl_4xl: { - paddingLeft: tokens.space._4xl, - }, - pl_5xl: { - paddingLeft: tokens.space._5xl, - }, - pr_0: { - paddingRight: 0, - }, - pr_2xs: { - paddingRight: tokens.space._2xs, - }, - pr_xs: { - paddingRight: tokens.space.xs, - }, - pr_sm: { - paddingRight: tokens.space.sm, - }, - pr_md: { - paddingRight: tokens.space.md, - }, - pr_lg: { - paddingRight: tokens.space.lg, - }, - pr_xl: { - paddingRight: tokens.space.xl, - }, - pr_2xl: { - paddingRight: tokens.space._2xl, - }, - pr_3xl: { - paddingRight: tokens.space._3xl, - }, - pr_4xl: { - paddingRight: tokens.space._4xl, - }, - pr_5xl: { - paddingRight: tokens.space._5xl, - }, - - /* - * Text decoration - */ - underline: { - textDecorationLine: 'underline', - }, - strike_through: { - textDecorationLine: 'line-through', - }, } as const diff --git a/bskyogcard/yarn.lock b/bskyogcard/yarn.lock index 9ec774859a..30b2a7e8cd 100644 --- a/bskyogcard/yarn.lock +++ b/bskyogcard/yarn.lock @@ -62,6 +62,13 @@ "@atproto/lexicon" "^0.4.11" zod "^3.23.8" +"@bsky.app/alf@^0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@bsky.app/alf/-/alf-0.1.0.tgz#7fcd82fbb961a3cb675892d1d6568105ea879492" + integrity sha512-uw3ga4qfDA+5BijLk1FAJQVBXHIQIwROfLuzvXBTM4oY5gd74cMpvsftvFdwlm7+U+jqsKDqahTAbOM1DXCUiw== + dependencies: + react-responsive "^10.0.1" + "@cbor-extract/cbor-extract-darwin-arm64@2.2.0": version "2.2.0" resolved "https://registry.npmjs.org/@cbor-extract/cbor-extract-darwin-arm64/-/cbor-extract-darwin-arm64-2.2.0.tgz" @@ -633,6 +640,11 @@ css-color-keywords@^1.0.0: resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz" integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg== +css-mediaquery@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0" + integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q== + css-to-react-native@^3.0.0: version "3.2.0" resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz" @@ -948,6 +960,11 @@ http-terminator@^3.2.0: roarr "^7.0.4" type-fest "^2.3.3" +hyphenate-style-name@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436" + integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw== + iconv-lite@0.4.24: version "0.4.24" resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz" @@ -1029,7 +1046,7 @@ linebreak@^1.1.0: base64-js "0.0.8" unicode-trie "^2.0.0" -loose-envify@^1.1.0: +loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -1041,6 +1058,13 @@ make-error@^1.1.1: resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2" integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw== +matchmediaquery@^0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.4.2.tgz#22582bd4ae63ad9f54c53001bba80cbed0f7eafa" + integrity sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA== + dependencies: + css-mediaquery "^0.1.2" + media-typer@0.3.0: version "0.3.0" resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz" @@ -1124,6 +1148,11 @@ node-vibrant@^4.0.3: "@vibrant/image-node" "^4.0.0" "@vibrant/quantizer-mmcq" "^4.0.0" +object-assign@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" + integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== + object-inspect@^1.13.1: version "1.13.1" resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz" @@ -1314,6 +1343,15 @@ process@^0.11.10: resolved "https://registry.npmjs.org/process/-/process-0.11.10.tgz" integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== +prop-types@^15.6.1: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + proxy-addr@~2.0.7: version "2.0.7" resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz" @@ -1357,6 +1395,21 @@ raw-body@2.5.2: iconv-lite "0.4.24" unpipe "1.0.0" +react-is@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== + +react-responsive@^10.0.1: + version "10.0.1" + resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-10.0.1.tgz#293d4d2562da93409861216f0110d146c5676eb3" + integrity sha512-OM5/cRvbtUWEX8le8RCT8scA8y2OPtb0Q/IViEyCEM5FBN8lRrkUOZnu87I88A6njxDldvxG+rLBxWiA7/UM9g== + dependencies: + hyphenate-style-name "^1.0.0" + matchmediaquery "^0.4.2" + prop-types "^15.6.1" + shallow-equal "^3.1.0" + react@^18.3.1: version "18.3.1" resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz" @@ -1499,6 +1552,11 @@ setprototypeof@1.2.0: resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz" integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw== +shallow-equal@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-3.1.0.tgz#e7a54bac629c7f248eff6c2f5b63122ba4320bec" + integrity sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg== + side-channel@^1.0.4: version "1.0.6" resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz"